feat:完成联系我们-在线报名模块
This commit is contained in:
xjh
parent
baa2e726ab
commit
6f296f1a1a
13
src/App.vue
13
src/App.vue
@ -22,4 +22,17 @@ import zhCn from 'element-plus/lib/locale/lang/zh-cn';
|
|||||||
line-height: 100px;
|
line-height: 100px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-avatar-plus {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: middle;
|
||||||
|
min-width: 100px;
|
||||||
|
min-height: 100px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,138 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog v-model="props.modelValue" title="在线报名详情" width="900px" @closed="closeDialog" @open="openDialog">
|
||||||
|
<el-form ref="formRef" :model="formData" :disabled="true">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="名称" prop="signup_user_name">
|
||||||
|
<el-input v-model='formData.signup_user_name' type="text" placeholder='请输入名称'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="电话" prop="signup_user_phone">
|
||||||
|
<el-input v-model='formData.signup_user_phone' type="text" placeholder='请输入电话'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="家长电话" prop="signup_user_parents_phone">
|
||||||
|
<el-input v-model='formData.signup_user_parents_phone' type="text" placeholder='请输入家长电话'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="家庭地址" prop="signup_user_home_address">
|
||||||
|
<el-input v-model='formData.signup_user_home_address' type="text" placeholder='请输入家庭地址'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="原就读学校" prop="signup_user_original_school">
|
||||||
|
<el-input v-model='formData.signup_user_original_school' type="text" placeholder='请输入原就读学校'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="预计到校时间" prop="signup_user_arrival_time">
|
||||||
|
<el-date-picker v-model="formData.signup_user_arrival_time" type="datetime" value-format="YYYY-MM-DD HH:mm"
|
||||||
|
placeholder="预计到校时间" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" prop="classes_guid" label="选择班型">
|
||||||
|
<el-select v-model='formData.classes_guid' clearable >
|
||||||
|
<el-option v-for="item in classesData" :key="item.classes_guid" :label="item.classes_name"
|
||||||
|
:value="item.classes_guid"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" prop="signup_user_grad_type" label="毕业类型">
|
||||||
|
<el-select v-model="formData.signup_user_grad_type" clearable placeholder="请选择">
|
||||||
|
<el-option v-for="item in graduationType" :key="item.dictionary_value" :label="item.dictionary_name"
|
||||||
|
:value="parseInt(item.dictionary_value)"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="受理状态" prop="signup_status">
|
||||||
|
<el-select v-model="formData.signup_status" clearable placeholder="请选择">
|
||||||
|
<el-option v-for="item in processingState" :key="item.dictionary_value" :label="item.dictionary_name"
|
||||||
|
:value="parseInt(item.dictionary_value)"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :label-width="labelWidth" label="报名时间" prop="signup_create_time">
|
||||||
|
<el-date-picker v-model="formData.signup_create_time" type="datetime" value-format="YYYY-MM-DD HH:mm"
|
||||||
|
placeholder="报名时间" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, watch } from "vue";
|
||||||
|
import { isEmptyObject } from "~/utils/index";
|
||||||
|
import { getDictionary } from '~/service/signup';
|
||||||
|
import { getClassesList } from '~/service/classes';
|
||||||
|
// --业务参数
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// --业务方法
|
||||||
|
//班型
|
||||||
|
const classesData = ref([]);
|
||||||
|
async function getClassesData() {
|
||||||
|
await getClassesList().then((res) => classesData.value = res.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 字典获取
|
||||||
|
const graduationType = ref([]);
|
||||||
|
async function get_graduation_type() {
|
||||||
|
await getDictionary({ dictionary_value: 'graduation_type' }).then((res) => {
|
||||||
|
graduationType.value = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 字典获取
|
||||||
|
const processingState = ref([]);
|
||||||
|
async function get_processing_state() {
|
||||||
|
await getDictionary({ dictionary_value: 'processing_state' }).then((res) => {
|
||||||
|
processingState.value = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// --基础参数
|
||||||
|
const formRef = ref();
|
||||||
|
const labelWidth = 100;
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: Boolean,
|
||||||
|
data: Object,
|
||||||
|
done: Function,
|
||||||
|
});
|
||||||
|
const emits = defineEmits(["update:modelValue"]);
|
||||||
|
const formData = ref({
|
||||||
|
...props.data,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// --基础方法
|
||||||
|
watch(props, (v) => {
|
||||||
|
formData.value = v.data;
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// 打开弹窗时执行
|
||||||
|
const openDialog = () => {
|
||||||
|
getClassesData()
|
||||||
|
get_graduation_type()
|
||||||
|
get_processing_state()
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeDialog = () => {
|
||||||
|
emits("update:modelValue", false);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
272
src/pages/index/contact_us/signup/index.vue
Normal file
272
src/pages/index/contact_us/signup/index.vue
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 面包屑 -->
|
||||||
|
<el-breadcrumb>
|
||||||
|
<el-breadcrumb-item>在线报名管理</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item to="/signup/list">在线报名列表</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<el-form inline :model="params">
|
||||||
|
<el-form-item label="用户名称">
|
||||||
|
<el-input v-model='params.signup_user_name' placeholder='请输入用户名称'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户电话">
|
||||||
|
<el-input v-model='params.signup_user_phone' placeholder='请输入用户电话'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户家长电话">
|
||||||
|
<el-input v-model='params.signup_user_parents_phone' placeholder='请输入用户家长电话'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户家庭地址">
|
||||||
|
<el-input v-model='params.signup_user_home_address' placeholder='请输入用户家庭地址'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户原就读学校">
|
||||||
|
<el-input v-model='params.signup_user_original_school' placeholder='请输入用户原就读学校'></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="classes_guid" label="所选班型">
|
||||||
|
<el-select v-model='params.classes_guid' clearable placeholder="请选择所选班型">
|
||||||
|
<el-option v-for="item in classesData" :key="item.classes_guid" :label="item.classes_name"
|
||||||
|
:value="item.classes_guid"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="预计到校日期">
|
||||||
|
<el-date-picker v-model="params.signup_user_arrival_time" value-format="YYYY-MM-DD" placeholder="请填写预计到校日期"
|
||||||
|
type="date" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="毕业类型">
|
||||||
|
<el-select v-model="params.signup_user_grad_type" clearable placeholder="请选择">
|
||||||
|
<el-option v-for="item in graduation_type" :key="item.dictionary_guid" :label="item.dictionary_name"
|
||||||
|
:value="item.dictionary_value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="受理状态">
|
||||||
|
<el-select v-model="params.signup_status" clearable placeholder="请选择">
|
||||||
|
<el-option v-for="item in processing_state" :key="item.dictionary_guid" :label="item.dictionary_name"
|
||||||
|
:value="item.dictionary_value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="日期范围">
|
||||||
|
<el-date-picker v-model="params.data_time" type="daterange" range-separator="至" start-placeholder="起始日期"
|
||||||
|
end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-space style="margin-bottom: 10px;">
|
||||||
|
<!-- 导出 -->
|
||||||
|
<el-button icon="ElIconDocument"
|
||||||
|
@click="exportExcel({ signup_guids: selectionData.map(v => v.signup_guid).join() })">导出</el-button>
|
||||||
|
<!-- 下拉操作 -->
|
||||||
|
<el-dropdown v-if="selectionData.length">
|
||||||
|
<el-button type="primary">
|
||||||
|
批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item @click="handleDelete(selectionData)">
|
||||||
|
批量删除
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</el-space>
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
|
||||||
|
:params="params" :request="params => getSignupList(params)">
|
||||||
|
<!-- 所属班级 -->
|
||||||
|
<template #classes_name="scope">
|
||||||
|
<el-tag type='warning'>{{ scope.row.classes_name }} </el-tag>
|
||||||
|
</template>
|
||||||
|
<!-- 毕业类型 -->
|
||||||
|
<template #signup_user_grad_type='scope'>
|
||||||
|
<dict-tag :options='graduation_type' :value='scope.row.signup_user_grad_type' />
|
||||||
|
</template>
|
||||||
|
<!-- 受理状态 -->
|
||||||
|
<template #signup_status='scope'>
|
||||||
|
<dict-tag :options='processing_state' :value='scope.row.signup_status' />
|
||||||
|
</template>
|
||||||
|
<template #chaoz="scope">
|
||||||
|
<el-space>
|
||||||
|
<el-dropdown @command="handleCommand">
|
||||||
|
<el-button type="primary" size="small">
|
||||||
|
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item :command="{ type: 'detail', row: scope.row }">
|
||||||
|
详情
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item :command="{ type: 'delete', row: scope.row }">
|
||||||
|
删除
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</el-space>
|
||||||
|
</template>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
<!-- 在线报名详情 -->
|
||||||
|
<DetailSignupDialog v-model="DetailSignupDialogVisible" :data="DetailSignupDialogRow"></DetailSignupDialog>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ArrowDown } from '@element-plus/icons-vue';
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { useLoginStore } from "~/store";
|
||||||
|
import { getSignupList, deleteSignup, getDictionary, exportExcel } from '~/service/signup';
|
||||||
|
import DetailSignupDialog from './components/DetailSignupDialog.vue';
|
||||||
|
import { getClassesList } from '~/service/classes';
|
||||||
|
|
||||||
|
const tableRef = ref();
|
||||||
|
const selectionData = ref([]);
|
||||||
|
const store = useLoginStore();
|
||||||
|
|
||||||
|
const DetailSignupDialogVisible = ref(false);
|
||||||
|
const DetailSignupDialogRow = ref({});
|
||||||
|
|
||||||
|
const headers = {
|
||||||
|
Accept: "application/json",
|
||||||
|
...store.headers,
|
||||||
|
};
|
||||||
|
|
||||||
|
//班型
|
||||||
|
const classesData = ref([]);
|
||||||
|
getClassesData()
|
||||||
|
async function getClassesData() {
|
||||||
|
await getClassesList().then((res) => classesData.value = res.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询参数
|
||||||
|
const params = reactive({
|
||||||
|
signup_user_name: "",
|
||||||
|
signup_user_phone: "",
|
||||||
|
signup_user_parents_phone: "",
|
||||||
|
signup_user_home_address: "",
|
||||||
|
signup_user_original_school: "",
|
||||||
|
signup_user_arrival_time: "",
|
||||||
|
signup_user_grad_type: "",
|
||||||
|
signup_status: "",
|
||||||
|
data_time: "",
|
||||||
|
classes_guid: "",
|
||||||
|
});
|
||||||
|
const column = [
|
||||||
|
|
||||||
|
{
|
||||||
|
fixed: true,
|
||||||
|
type: 'selection'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_user_name",
|
||||||
|
label: '用户名称',
|
||||||
|
width: '150'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_user_phone",
|
||||||
|
label: '用户电话',
|
||||||
|
width: '150'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_user_parents_phone",
|
||||||
|
label: '家长电话',
|
||||||
|
width: '150'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_user_home_address",
|
||||||
|
label: '家庭地址',
|
||||||
|
width: '170',
|
||||||
|
showOverflowTooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_user_original_school",
|
||||||
|
label: '原就读学校',
|
||||||
|
width: '170',
|
||||||
|
showOverflowTooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_user_arrival_time",
|
||||||
|
label: '预计到校时间',
|
||||||
|
width: '170',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "classes_name",
|
||||||
|
label: '所选班型',
|
||||||
|
width: '125',
|
||||||
|
showOverflowTooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_user_grad_type",
|
||||||
|
label: '毕业类型',
|
||||||
|
width: '125',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_status",
|
||||||
|
label: '报名受理状态',
|
||||||
|
width: '150'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "signup_create_time",
|
||||||
|
label: '报名时间',
|
||||||
|
width: '170',
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作',
|
||||||
|
prop: 'chaoz',
|
||||||
|
width: '100',
|
||||||
|
fixed: 'right'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const handleCommand = ({ type, row }) => {
|
||||||
|
switch (type) {
|
||||||
|
case "detail":
|
||||||
|
handleDetail(row);
|
||||||
|
break;
|
||||||
|
case 'delete':
|
||||||
|
handleDelete([row]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除数据
|
||||||
|
const handleDelete = data => {
|
||||||
|
ElMessageBox.confirm(`您确定要删除该在线报名吗？`).then(async () => {
|
||||||
|
const res = await deleteSignup({
|
||||||
|
signup_guid: data.map(v => v.signup_guid).join()
|
||||||
|
});
|
||||||
|
if (res) {
|
||||||
|
tableRef.value.reload();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// 详情
|
||||||
|
function handleDetail(row) {
|
||||||
|
DetailSignupDialogVisible.value = true
|
||||||
|
DetailSignupDialogRow.value = row
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 字典获取
|
||||||
|
const graduation_type = ref([]);
|
||||||
|
async function get_graduation_type() {
|
||||||
|
await getDictionary({ dictionary_value: 'graduation_type' }).then((res) => {
|
||||||
|
graduation_type.value = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
get_graduation_type()
|
||||||
|
// 字典获取
|
||||||
|
const processing_state = ref([]);
|
||||||
|
async function get_processing_state() {
|
||||||
|
await getDictionary({ dictionary_value: 'processing_state' }).then((res) => {
|
||||||
|
processing_state.value = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
get_processing_state()
|
||||||
|
</script>
|
||||||
46
src/service/signup.js
Normal file
46
src/service/signup.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import {
|
||||||
|
api,
|
||||||
|
downloadFile,
|
||||||
|
createApiUrl
|
||||||
|
} from '~/utils/axios';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出在线报名
|
||||||
|
* @param {Object} data
|
||||||
|
* @return {Promise} api
|
||||||
|
*/
|
||||||
|
export function exportExcel(data) {
|
||||||
|
downloadFile(createApiUrl('ContactUs.Signup/exportExcel'), data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取字典值
|
||||||
|
* @param {Object} data
|
||||||
|
* @return {Promise} api
|
||||||
|
*/
|
||||||
|
export function getDictionary(data) {
|
||||||
|
return api.post('Dictionary.Dictionary/getDictionary', data, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取在线报名列表
|
||||||
|
* @param {Object} data
|
||||||
|
* @return {Promise} api
|
||||||
|
*/
|
||||||
|
export function getSignupList(data) {
|
||||||
|
return api.post('ContactUs.Signup/getSignupList', data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除在线报名
|
||||||
|
* @param {Object} data
|
||||||
|
* @return {Promise} api
|
||||||
|
*/
|
||||||
|
export function deleteSignup(data) {
|
||||||
|
return api.post('ContactUs.Signup/deleteSignup', data, {
|
||||||
|
isTransformResponse: true,
|
||||||
|
isShowSuccessMessage: true,
|
||||||
|
errorMessageText: '删除失败'
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user