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;
|
||||
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>
|
||||
|
||||
@ -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