260720
This commit is contained in:
@@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
placement="right"
|
||||
width="1180"
|
||||
:visible="visible"
|
||||
:title="isUpdate ? '编辑' : '新增'"
|
||||
:body-style="{ paddingBottom: '88px' }"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-form ref="formRef" :model="form">
|
||||
<a-form-item
|
||||
label="年份"
|
||||
name="year"
|
||||
:rules="[{ required: true, message: '请选择年份' }]"
|
||||
>
|
||||
<a-date-picker
|
||||
v-model:value="form.year"
|
||||
picker="year"
|
||||
value-format="YYYY"
|
||||
style="width: 240px"
|
||||
:disabled="!!props.fixedYear"
|
||||
placeholder="请选择年份"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-tabs v-model:activeKey="activeTab" type="card" class="gxmu-tag-tabs">
|
||||
<a-tab-pane key="base" tab="登记表">
|
||||
<div class="sheet-wrap">
|
||||
<!-- <div class="sheet-main-title"-->
|
||||
<!-- >2025 年广西医科大学青年马克思主义者培养工程培训班学员登记表</div>-->
|
||||
<table class="sheet-table">
|
||||
<colgroup>
|
||||
<col style="width: 14%" />
|
||||
<col style="width: 15%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 14%" />
|
||||
<col style="width: 8%" />
|
||||
<col style="width: 17%" />
|
||||
<col style="width: 22%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sheet-label">姓名</td>
|
||||
<td class="sheet-value">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</td>
|
||||
<td class="sheet-label">性别</td>
|
||||
<td class="sheet-value">
|
||||
<a-select v-model:value="form.gender" placeholder="请选择" style="width: 120px">
|
||||
<a-select-option value="男">男</a-select-option>
|
||||
<a-select-option value="女">女</a-select-option>
|
||||
</a-select>
|
||||
</td>
|
||||
<td class="sheet-label">民族</td>
|
||||
<td class="sheet-value">
|
||||
<a-select
|
||||
allow-clear
|
||||
show-search
|
||||
:options="nationOptions"
|
||||
:filter-option="filterSelectOption"
|
||||
placeholder="请选择民族"
|
||||
v-model:value="form.nation"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</td>
|
||||
<td class="sheet-photo-cell" rowspan="4">
|
||||
<div class="sheet-photo-title">电子版照片</div>
|
||||
<div class="sheet-photo-box">
|
||||
<a-image
|
||||
v-if="form.photo"
|
||||
:src="form.photo"
|
||||
:width="96"
|
||||
/>
|
||||
<div v-else class="sheet-photo-placeholder">未上传</div>
|
||||
</div>
|
||||
<upload-file
|
||||
v-model:value="form.photo"
|
||||
accept="image/*"
|
||||
button-text="上传照片"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">出生年月</td>
|
||||
<td class="sheet-value">
|
||||
<a-date-picker
|
||||
v-model:value="form.birthMonth"
|
||||
picker="month"
|
||||
value-format="YYYY-MM"
|
||||
style="width: 100%"
|
||||
placeholder="请选择出生年月"
|
||||
/>
|
||||
</td>
|
||||
<td class="sheet-label">政治面貌</td>
|
||||
<td class="sheet-value">
|
||||
<a-select style="width: 120px"
|
||||
allow-clear
|
||||
show-search
|
||||
v-model:value="form.politics"
|
||||
:options="politicsOptions"
|
||||
:filter-option="filterSelectOption"
|
||||
placeholder="请选择政治面貌"
|
||||
/>
|
||||
</td>
|
||||
<td class="sheet-label">籍贯</td>
|
||||
<td class="sheet-value">
|
||||
<a-input style="width: 120px"
|
||||
v-model:value="form.nativePlace"
|
||||
placeholder="请输入籍贯"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">手机号码</td>
|
||||
<td class="sheet-value" colspan="2">
|
||||
<a-input
|
||||
v-model:value="form.phone"
|
||||
placeholder="请输入手机号码"
|
||||
/>
|
||||
</td>
|
||||
<td class="sheet-label" colspan="2">微信号</td>
|
||||
<td class="sheet-value">
|
||||
<a-input
|
||||
v-model:value="form.wechat"
|
||||
placeholder="请输入微信号"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">电子邮箱</td>
|
||||
<td class="sheet-value" colspan="2">
|
||||
<a-input
|
||||
v-model:value="form.email"
|
||||
placeholder="请输入电子邮箱"
|
||||
/>
|
||||
</td>
|
||||
<td class="sheet-label" colspan="2">QQ号</td>
|
||||
<td class="sheet-value">
|
||||
<a-input v-model:value="form.qq" placeholder="请输入QQ号" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">身份证号</td>
|
||||
<td class="sheet-value" colspan="2">
|
||||
<a-input
|
||||
v-model:value="form.idCardNo"
|
||||
placeholder="请输入身份证号"
|
||||
/>
|
||||
</td>
|
||||
<td class="sheet-label" colspan="2">爱好特长</td>
|
||||
<td class="sheet-value" colspan="2">
|
||||
<a-input
|
||||
v-model:value="form.hobby"
|
||||
placeholder="请输入爱好特长"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label" colspan="4">
|
||||
毕业后是否有志报考广西选调生<br />
|
||||
或志愿到我区基层一线和艰苦边远地区工作
|
||||
</td>
|
||||
<td class="sheet-value" colspan="3">
|
||||
<a-radio-group v-model:value="form.willingToWorkInGuangxi">
|
||||
<a-radio value="是">是</a-radio>
|
||||
<a-radio value="否">否</a-radio>
|
||||
</a-radio-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">学校、院系、年级、专业</td>
|
||||
<td class="sheet-value left" colspan="6">
|
||||
<a-input
|
||||
v-model:value="form.schoolInfo"
|
||||
placeholder="请输入学校、院系、年级、专业"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">担任团学职务情况</td>
|
||||
<td class="sheet-value left" colspan="6">
|
||||
<a-input
|
||||
v-model:value="form.leaguePosition"
|
||||
placeholder="请输入担任团学职务情况"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">个人简历</td>
|
||||
<td class="sheet-value left" colspan="6">
|
||||
<a-textarea
|
||||
v-model:value="form.resume"
|
||||
:rows="8"
|
||||
placeholder="请输入个人简历"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sheet-label">奖惩情况</td>
|
||||
<td class="sheet-value left" colspan="6">
|
||||
<a-textarea
|
||||
v-model:value="form.awards"
|
||||
:rows="7"
|
||||
placeholder="请输入奖惩情况"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<!-- <a-tab-pane key="review" tab="综合成绩与意见">-->
|
||||
<!-- <div class="sheet-wrap">-->
|
||||
<!-- <table class="sheet-table">-->
|
||||
<!-- <colgroup>-->
|
||||
<!-- <col style="width: 15%" />-->
|
||||
<!-- <col style="width: 85%" />-->
|
||||
<!-- </colgroup>-->
|
||||
<!-- <tbody>-->
|
||||
<!-- <tr>-->
|
||||
<!-- <td class="sheet-label">-->
|
||||
<!-- 综合成绩<br />-->
|
||||
<!-- 情况<br />-->
|
||||
<!-- （按最近一<br />-->
|
||||
<!-- 学年填写）-->
|
||||
<!-- </td>-->
|
||||
<!-- <td class="sheet-value left">-->
|
||||
<!-- <a-textarea-->
|
||||
<!-- v-model:value="form.academicPerformance"-->
|
||||
<!-- :rows="12"-->
|
||||
<!-- placeholder="示例：最近学年专业综合排名、补考重修情况、思政课程成绩等"-->
|
||||
<!-- />-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
<!-- <tr>-->
|
||||
<!-- <td class="sheet-label">二级团组织意见</td>-->
|
||||
<!-- <td class="sheet-value left opinion-cell">-->
|
||||
<!-- <a-textarea-->
|
||||
<!-- v-model:value="form.secondaryLeagueOpinion"-->
|
||||
<!-- :rows="6"-->
|
||||
<!-- placeholder="请输入二级团组织意见"-->
|
||||
<!-- />-->
|
||||
<!-- <div class="opinion-date-row">-->
|
||||
<!-- <span>（盖章）</span>-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-model:value="form.secondaryLeagueOpinionDate"-->
|
||||
<!-- placeholder="如：2025年5月1日"-->
|
||||
<!-- class="date-input"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
<!-- <tr>-->
|
||||
<!-- <td class="sheet-label">二级党组织意见</td>-->
|
||||
<!-- <td class="sheet-value left opinion-cell">-->
|
||||
<!-- <a-textarea-->
|
||||
<!-- v-model:value="form.secondaryPartyOpinion"-->
|
||||
<!-- :rows="6"-->
|
||||
<!-- placeholder="请输入二级党组织意见"-->
|
||||
<!-- />-->
|
||||
<!-- <div class="opinion-date-row">-->
|
||||
<!-- <span>（盖章）</span>-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-model:value="form.secondaryPartyOpinionDate"-->
|
||||
<!-- placeholder="如：2025年5月2日"-->
|
||||
<!-- class="date-input"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
<!-- <tr>-->
|
||||
<!-- <td class="sheet-label">学校团委意见</td>-->
|
||||
<!-- <td class="sheet-value left opinion-cell">-->
|
||||
<!-- <a-textarea-->
|
||||
<!-- v-model:value="form.schoolLeagueOpinion"-->
|
||||
<!-- :rows="6"-->
|
||||
<!-- placeholder="请输入学校团委意见"-->
|
||||
<!-- />-->
|
||||
<!-- <div class="opinion-date-row">-->
|
||||
<!-- <span>（盖章）</span>-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-model:value="form.schoolLeagueOpinionDate"-->
|
||||
<!-- placeholder="如：2025年5月3日"-->
|
||||
<!-- class="date-input"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
<!-- </tbody>-->
|
||||
<!-- </table>-->
|
||||
<!-- </div>-->
|
||||
<!-- </a-tab-pane>-->
|
||||
</a-tabs>
|
||||
</a-form>
|
||||
<div class="drawer-footer">
|
||||
<a-space>
|
||||
<a-button @click="updateVisible(false)">取消</a-button>
|
||||
<a-button type="primary" :loading="loading" @click="save"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import UploadFile from '@/components/UploadFile/index.vue';
|
||||
import { addQmgcForm, updateQmgcForm } from '@/api/gxmu/qmgc-form';
|
||||
import type { QmgcForm } from '@/api/gxmu/qmgc-form/model';
|
||||
import { listDictData } from '@/api/system/dict-data';
|
||||
|
||||
const NATION_DICT_ID = 173;
|
||||
const POLITICS_DICT_ID = 172;
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
data?: QmgcForm | null;
|
||||
fixedYear?: string | number;
|
||||
}>();
|
||||
|
||||
const formRef = ref();
|
||||
const loading = ref(false);
|
||||
const isUpdate = ref(false);
|
||||
const activeTab = ref('base');
|
||||
const nationOptions = ref<{ label: string; value: string }[]>([]);
|
||||
const politicsOptions = ref<{ label: string; value: string }[]>([]);
|
||||
const optionsLoaded = ref(false);
|
||||
|
||||
const createDefaultForm = (): QmgcForm => ({
|
||||
id: undefined,
|
||||
year: '',
|
||||
name: '',
|
||||
gender: '',
|
||||
nation: '',
|
||||
photo: '',
|
||||
birthMonth: '',
|
||||
politics: '',
|
||||
nativePlace: '',
|
||||
phone: '',
|
||||
wechat: '',
|
||||
email: '',
|
||||
qq: '',
|
||||
idCardNo: '',
|
||||
hobby: '',
|
||||
willingToWorkInGuangxi: '',
|
||||
schoolInfo: '',
|
||||
leaguePosition: '',
|
||||
resume: '',
|
||||
awards: '',
|
||||
academicPerformance: '',
|
||||
secondaryLeagueOpinion: '',
|
||||
secondaryLeagueOpinionDate: '',
|
||||
secondaryPartyOpinion: '',
|
||||
secondaryPartyOpinionDate: '',
|
||||
schoolLeagueOpinion: '',
|
||||
schoolLeagueOpinionDate: ''
|
||||
});
|
||||
|
||||
const form = reactive<QmgcForm>(createDefaultForm());
|
||||
|
||||
const filterSelectOption = (input: string, option: any) => {
|
||||
return String(option?.label || '')
|
||||
.toLowerCase()
|
||||
.includes(input.toLowerCase());
|
||||
};
|
||||
|
||||
const loadNationOptions = async () => {
|
||||
const result = await listDictData({ dictId: NATION_DICT_ID });
|
||||
nationOptions.value = result
|
||||
.filter((item) => !!item.dictDataName)
|
||||
.map((item) => ({
|
||||
label: item.dictDataName as string,
|
||||
value: item.dictDataName as string
|
||||
}));
|
||||
optionsLoaded.value = true;
|
||||
};
|
||||
|
||||
const loadPoliticsOptions = async () => {
|
||||
const result = await listDictData({ dictId: POLITICS_DICT_ID });
|
||||
politicsOptions.value = result
|
||||
.filter((item) => !!item.dictDataName)
|
||||
.map((item) => ({
|
||||
label: item.dictDataName as string,
|
||||
value: item.dictDataName as string
|
||||
}));
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
if (visible) {
|
||||
if (!optionsLoaded.value) {
|
||||
try {
|
||||
await Promise.all([loadNationOptions(), loadPoliticsOptions()]);
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '民族字典加载失败');
|
||||
}
|
||||
}
|
||||
isUpdate.value = !!props.data?.id;
|
||||
Object.assign(form, createDefaultForm(), props.data ?? {});
|
||||
if (props.fixedYear) {
|
||||
form.year = String(props.fixedYear);
|
||||
}
|
||||
} else {
|
||||
formRef.value?.resetFields?.();
|
||||
Object.assign(form, createDefaultForm());
|
||||
}
|
||||
activeTab.value = 'base';
|
||||
}
|
||||
);
|
||||
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateQmgcForm : addQmgcForm;
|
||||
saveOrUpdate({
|
||||
...form,
|
||||
year: props.fixedYear ? String(props.fixedYear) : form.year
|
||||
})
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../../form-theme.less';
|
||||
@import '../../tag-tabs.less';
|
||||
|
||||
.gxmu-field-theme();
|
||||
.gxmu-tag-tabs();
|
||||
|
||||
.sheet-wrap {
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sheet-main-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sheet-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.sheet-table td {
|
||||
border: 1px solid #3b3b3b;
|
||||
padding: 8px 6px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sheet-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sheet-value.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sheet-photo-cell {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.sheet-photo-title {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
margin: 0 auto 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.sheet-photo-box {
|
||||
min-height: 108px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sheet-photo-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sheet-table .sheet-value :deep(.ant-input),
|
||||
.sheet-table .sheet-value :deep(.ant-select-selector),
|
||||
.sheet-table .sheet-value :deep(.ant-radio-group),
|
||||
.sheet-table .sheet-value :deep(.ant-input-textarea) {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sheet-table .sheet-value :deep(textarea.ant-input) {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.opinion-cell {
|
||||
padding: 12px 12px 18px !important;
|
||||
}
|
||||
|
||||
.opinion-date-row {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sheet-main-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<common-import
|
||||
v-bind="$props"
|
||||
@done="emit('done')"
|
||||
@update:visible="emit('update:visible', $event)"
|
||||
module-name="青马工程"
|
||||
file-name="青马工程导入模板.xlsx"
|
||||
:template-fields="templateFields"
|
||||
:sample-row="sampleRow"
|
||||
:create-payload="createPayload"
|
||||
:save-item="saveItem"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import CommonImport from '../../components/common-import.vue';
|
||||
import { addQmgcForm } from '@/api/gxmu/qmgc-form';
|
||||
import type { QmgcForm } from '@/api/gxmu/qmgc-form/model';
|
||||
|
||||
defineProps<{ visible: boolean }>();
|
||||
const emit = defineEmits(['done', 'update:visible']);
|
||||
|
||||
const templateFields = [
|
||||
{ header: '年份', key: 'year', required: true },
|
||||
{ header: '姓名', key: 'name', required: true },
|
||||
{ header: '性别', key: 'gender' },
|
||||
{ header: '民族', key: 'nation' },
|
||||
{ header: '出生年月', key: 'birthMonth' },
|
||||
{ header: '政治面貌', key: 'politics' },
|
||||
{ header: '籍贯', key: 'nativePlace' },
|
||||
{ header: '手机号', key: 'phone' },
|
||||
{ header: '微信号', key: 'wechat' },
|
||||
{ header: '邮箱', key: 'email' },
|
||||
{ header: 'QQ', key: 'qq' },
|
||||
{ header: '身份证号', key: 'idCardNo' },
|
||||
{ header: '兴趣爱好', key: 'hobby' },
|
||||
{ header: '是否愿意留桂工作', key: 'willingToWorkInGuangxi' },
|
||||
{ header: '学校信息', key: 'schoolInfo' },
|
||||
{ header: '团内职务', key: 'leaguePosition' },
|
||||
{ header: '个人简历', key: 'resume' },
|
||||
{ header: '获得奖励', key: 'awards' },
|
||||
{ header: '学习成绩', key: 'academicPerformance' },
|
||||
{ header: '二级团组织意见', key: 'secondaryLeagueOpinion' },
|
||||
{ header: '二级团组织意见日期', key: 'secondaryLeagueOpinionDate' },
|
||||
{ header: '二级党组织意见', key: 'secondaryPartyOpinion' },
|
||||
{ header: '二级党组织意见日期', key: 'secondaryPartyOpinionDate' },
|
||||
{ header: '学校团组织意见', key: 'schoolLeagueOpinion' },
|
||||
{ header: '学校团组织意见日期', key: 'schoolLeagueOpinionDate' }
|
||||
] as const;
|
||||
|
||||
const sampleRow = {
|
||||
年份: '2025',
|
||||
姓名: '孙七',
|
||||
性别: '男',
|
||||
民族: '汉族',
|
||||
出生年月: '2001-01',
|
||||
政治面貌: '中共党员',
|
||||
籍贯: '广西南宁',
|
||||
手机号: '13800138000',
|
||||
微信号: 'sunqi2025',
|
||||
邮箱: 'sunqi@example.com',
|
||||
QQ: '12345678',
|
||||
身份证号: '450101200101011234',
|
||||
兴趣爱好: '篮球',
|
||||
是否愿意留桂工作: '是',
|
||||
学校信息: '广西医科大学 第一临床医学院',
|
||||
团内职务: '学生会骨干',
|
||||
个人简历: '2022年至今担任学生干部',
|
||||
获得奖励: '校级奖学金',
|
||||
学习成绩: '专业前10%',
|
||||
二级团组织意见: '',
|
||||
二级团组织意见日期: '',
|
||||
二级党组织意见: '',
|
||||
二级党组织意见日期: '',
|
||||
学校团组织意见: '',
|
||||
学校团组织意见日期: ''
|
||||
};
|
||||
|
||||
const createPayload = (row: Record<string, any>): QmgcForm => ({
|
||||
year: String(row['年份'] || '').trim(),
|
||||
name: String(row['姓名'] || '').trim(),
|
||||
gender: String(row['性别'] || '').trim(),
|
||||
nation: String(row['民族'] || '').trim(),
|
||||
birthMonth: String(row['出生年月'] || '').trim(),
|
||||
politics: String(row['政治面貌'] || '').trim(),
|
||||
nativePlace: String(row['籍贯'] || '').trim(),
|
||||
phone: String(row['手机号'] || '').trim(),
|
||||
wechat: String(row['微信号'] || '').trim(),
|
||||
email: String(row['邮箱'] || '').trim(),
|
||||
qq: String(row['QQ'] || '').trim(),
|
||||
idCardNo: String(row['身份证号'] || '').trim(),
|
||||
hobby: String(row['兴趣爱好'] || '').trim(),
|
||||
willingToWorkInGuangxi: String(row['是否愿意留桂工作'] || '').trim(),
|
||||
schoolInfo: String(row['学校信息'] || '').trim(),
|
||||
leaguePosition: String(row['团内职务'] || '').trim(),
|
||||
resume: String(row['个人简历'] || '').trim(),
|
||||
awards: String(row['获得奖励'] || '').trim(),
|
||||
academicPerformance: String(row['学习成绩'] || '').trim(),
|
||||
secondaryLeagueOpinion: String(row['二级团组织意见'] || '').trim(),
|
||||
secondaryLeagueOpinionDate: String(row['二级团组织意见日期'] || '').trim(),
|
||||
secondaryPartyOpinion: String(row['二级党组织意见'] || '').trim(),
|
||||
secondaryPartyOpinionDate: String(row['二级党组织意见日期'] || '').trim(),
|
||||
schoolLeagueOpinion: String(row['学校团组织意见'] || '').trim(),
|
||||
schoolLeagueOpinionDate: String(row['学校团组织意见日期'] || '').trim()
|
||||
});
|
||||
|
||||
const saveItem = (item: QmgcForm) => addQmgcForm(item);
|
||||
</script>
|
||||
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:scroll="{ x: 2200 }"
|
||||
tool-class="ele-toolbar-form"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button
|
||||
class="gxmu-toolbar-btn gxmu-add-btn"
|
||||
@click="openEdit()"
|
||||
>
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>{{ props.popup ? '立即申报' : '添加' }}</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="!props.popup"
|
||||
class="gxmu-toolbar-btn gxmu-import-btn"
|
||||
@click="openImport"
|
||||
>
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>导入</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="!props.popup"
|
||||
class="gxmu-toolbar-btn"
|
||||
:loading="exporting"
|
||||
@click="exportData"
|
||||
>
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
<span>导出</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入姓名/手机号/学校院系"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'photo'">
|
||||
<a-image
|
||||
v-if="record.photo"
|
||||
:src="record.photo"
|
||||
:width="44"
|
||||
:height="58"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'currentReviewStatus'">
|
||||
<ReviewStatusTag :review-list="record.reviewList" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openDetail(record)">详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<template v-if="!shouldHideEditByReviewList(record.reviewList)">
|
||||
<a @click="openEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
</template>
|
||||
<a @click="openReviewHistory(record)">审核历史</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<edit-modal
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:fixed-year="props.fixedYear"
|
||||
@done="reload"
|
||||
/>
|
||||
<import-modal v-model:visible="showImport" @done="reload" />
|
||||
<ModuleDataModal
|
||||
v-model:visible="showDetail"
|
||||
:module="REVIEW_MODULE"
|
||||
module-name="青马工程"
|
||||
:pk="detailCurrent?.id"
|
||||
/>
|
||||
<ReviewHistoryModal
|
||||
v-model:visible="showReviewHistory"
|
||||
:module="REVIEW_MODULE"
|
||||
:pk="reviewCurrent?.id"
|
||||
:review-list="reviewCurrent?.reviewList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
DownloadOutlined,
|
||||
UploadOutlined,
|
||||
PlusOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import EditModal from './components/edit.vue';
|
||||
import ImportModal from './components/import.vue';
|
||||
import ReviewHistoryModal from '../components/reviewHistoryModal.vue';
|
||||
import ModuleDataModal from '../reviewList/components/moduleDataModal.vue';
|
||||
import ReviewStatusTag from '../components/reviewStatusTag.vue';
|
||||
import { shouldHideEditByReviewList } from '../utils/review';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import {
|
||||
exportQmgcForm,
|
||||
userPageQmgcForm,
|
||||
removeQmgcForm
|
||||
} from '@/api/gxmu/qmgc-form';
|
||||
import type { QmgcForm, QmgcFormParam } from '@/api/gxmu/qmgc-form/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
popup?: boolean;
|
||||
fixedYear?: string | number;
|
||||
}>(),
|
||||
{
|
||||
popup: false
|
||||
}
|
||||
);
|
||||
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const searchText = ref('');
|
||||
const showEdit = ref(false);
|
||||
const showImport = ref(false);
|
||||
const showDetail = ref(false);
|
||||
const current = ref<QmgcForm>();
|
||||
const detailCurrent = ref<QmgcForm | null>(null);
|
||||
const REVIEW_MODULE = 'gxmu_qmgc_form';
|
||||
const showReviewHistory = ref(false);
|
||||
const reviewCurrent = ref<QmgcForm | null>(null);
|
||||
const exporting = ref(false);
|
||||
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '照片',
|
||||
dataIndex: 'photo',
|
||||
key: 'photo',
|
||||
align: 'center',
|
||||
width: 88
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '年份',
|
||||
dataIndex: 'year',
|
||||
key: 'year',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
key: 'gender',
|
||||
align: 'center',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '民族',
|
||||
dataIndex: 'nation',
|
||||
key: 'nation',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '政治面貌',
|
||||
dataIndex: 'politics',
|
||||
key: 'politics',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
title: '微信号',
|
||||
dataIndex: 'wechat',
|
||||
key: 'wechat',
|
||||
align: 'center',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
title: '学校、院系、年级、专业',
|
||||
dataIndex: 'schoolInfo',
|
||||
key: 'schoolInfo',
|
||||
align: 'center',
|
||||
width: 240,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '担任团学职务情况',
|
||||
dataIndex: 'leaguePosition',
|
||||
key: 'leaguePosition',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '是否有志到基层一线工作',
|
||||
dataIndex: 'willingToWorkInGuangxi',
|
||||
key: 'willingToWorkInGuangxi',
|
||||
align: 'center',
|
||||
width: 190
|
||||
},
|
||||
{
|
||||
title: '综合成绩情况',
|
||||
dataIndex: 'academicPerformance',
|
||||
key: 'academicPerformance',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '奖惩情况',
|
||||
dataIndex: 'awards',
|
||||
key: 'awards',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '当前审核状态',
|
||||
dataIndex: 'reviewList',
|
||||
key: 'currentReviewStatus',
|
||||
align: 'center',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
width: 200
|
||||
}
|
||||
]);
|
||||
|
||||
const datasource: DatasourceFunction = ({ page, limit }) => {
|
||||
return userPageQmgcForm({
|
||||
page,
|
||||
limit,
|
||||
year: props.fixedYear ? String(props.fixedYear) : undefined,
|
||||
keywords: searchText.value.trim() || undefined
|
||||
} as QmgcFormParam).catch((e) => {
|
||||
message.error(e.message);
|
||||
return { list: [], count: 0 };
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
tableRef.value?.reload();
|
||||
};
|
||||
|
||||
const buildQueryParams = (): QmgcFormParam => {
|
||||
return {
|
||||
year: props.fixedYear ? String(props.fixedYear) : undefined,
|
||||
keywords: searchText.value.trim() || undefined
|
||||
} as QmgcFormParam;
|
||||
};
|
||||
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
const resolveExportUrl = (payload: any) => {
|
||||
return String(payload?.url || payload?.downloadUrl || payload?.path || '');
|
||||
};
|
||||
|
||||
const exportData = async () => {
|
||||
if (exporting.value) {
|
||||
return;
|
||||
}
|
||||
exporting.value = true;
|
||||
const hide = message.loading('导出中..', 0);
|
||||
try {
|
||||
const result = await exportQmgcForm(buildQueryParams());
|
||||
const url = resolveExportUrl(result);
|
||||
if (!url) {
|
||||
throw new Error('导出地址缺失');
|
||||
}
|
||||
window.open(url, '_blank');
|
||||
hide();
|
||||
message.success('导出成功');
|
||||
} catch (e: any) {
|
||||
hide();
|
||||
message.error(e.message || '导出失败');
|
||||
} finally {
|
||||
exporting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openEdit = (record?: QmgcForm) => {
|
||||
current.value = record
|
||||
? (JSON.parse(JSON.stringify(record)) as QmgcForm)
|
||||
: undefined;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const openReviewHistory = (record: QmgcForm) => {
|
||||
reviewCurrent.value = record;
|
||||
showReviewHistory.value = true;
|
||||
};
|
||||
|
||||
const openDetail = (record: QmgcForm) => {
|
||||
detailCurrent.value = record;
|
||||
showDetail.value = true;
|
||||
};
|
||||
|
||||
const remove = (record: QmgcForm) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeQmgcForm(record.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'QMGCForm'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../toolbar.less';
|
||||
</style>
|
||||
Reference in New Issue
Block a user