|
@@ -1,71 +1,175 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from "vue";
|
|
|
-import request, { download } from '~/utils/request';
|
|
|
+import { ref, reactive, getCurrentInstance } from "vue";
|
|
|
+import request, { download } from "~/utils/request";
|
|
|
+import type { FormInstance, FormRules } from "element-plus";
|
|
|
+import printJS from "print-js";
|
|
|
|
|
|
// #region (constant)
|
|
|
-const TABLE_KEY = 'xkk_id'
|
|
|
-const URL_CUT = '/xdjx/kcpzgl_kcpz'
|
|
|
+const TABLE_KEY = "xkk_id";
|
|
|
+const URL_CUT = "/xdjx/kcpzgl_kcpz";
|
|
|
// #endregion
|
|
|
+const instance = getCurrentInstance();
|
|
|
|
|
|
// #region (type)
|
|
|
type TYPE_TABLE_FIELD = {
|
|
|
[TABLE_KEY]: string;
|
|
|
- 'xkk_name': string; // 考试名称
|
|
|
- 'xkk_kslx': string; // 考试类型
|
|
|
- 'xkk_kc': string; // 考场
|
|
|
- 'xkk_kc_json': string; // 考场JSON
|
|
|
- 'xkk_ks': string; // 考生
|
|
|
- 'xkk_ks_json': string; // 考生JSON
|
|
|
- 'xkk_zkzqz': string; // 准考证前缀
|
|
|
- 'xkk_sjkmjk_json': string; // 时间科目监考JSON
|
|
|
-}
|
|
|
+ xkk_name: string; // 考试名称
|
|
|
+ xkk_kslx: string; // 考试类型
|
|
|
+ xkk_kc: string; // 考场
|
|
|
+ xkk_kc_json: string; // 考场JSON
|
|
|
+ xkk_ks: string; // 考生
|
|
|
+ xkk_ks_json: string; // 考生JSON
|
|
|
+ xkk_zkzqz: string; // 准考证前缀
|
|
|
+ xkk_sjkmjk_json: string; // 时间科目监考JSON
|
|
|
+ xkk_kslx_option_n: string;
|
|
|
+};
|
|
|
// #endregion
|
|
|
|
|
|
// #region (variable)
|
|
|
-const loading = ref(true)
|
|
|
+const loading = ref(true);
|
|
|
// #endregion
|
|
|
|
|
|
// #region (props)
|
|
|
const props = defineProps<{
|
|
|
- aid: string
|
|
|
-}>()
|
|
|
+ aid: string;
|
|
|
+}>();
|
|
|
// #endregion
|
|
|
|
|
|
function detailApi(_id: string) {
|
|
|
return request({
|
|
|
- url: URL_CUT + '/detail',
|
|
|
+ url: URL_CUT + "/detail",
|
|
|
data: {
|
|
|
[TABLE_KEY]: _id,
|
|
|
- }
|
|
|
- })
|
|
|
+ },
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
-const detail_Data = ref<TYPE_TABLE_FIELD>()
|
|
|
+const detail_Data = ref<TYPE_TABLE_FIELD>();
|
|
|
|
|
|
// #region (page init)
|
|
|
async function init() {
|
|
|
- const res = await detailApi(props.aid)
|
|
|
- detail_Data.value = (res.data.one_info)
|
|
|
- info.value = JSON.parse(detail_Data.value?.xkk_sjkmjk_json as string)
|
|
|
+ const res = await detailApi(props.aid);
|
|
|
+ detail_Data.value = res.data.one_info;
|
|
|
+ info.value = JSON.parse(detail_Data.value?.xkk_sjkmjk_json as string);
|
|
|
const tempInfo: any = {
|
|
|
...detail_Data.value,
|
|
|
- xkk_kc: (detail_Data.value?.xkk_kc as string).split(','),
|
|
|
- xkk_kc_json: (detail_Data.value?.xkk_kc_json as string).split(','),
|
|
|
- xkk_ks: (detail_Data.value?.xkk_ks as string).split(','),
|
|
|
- xkk_ks_json: (detail_Data.value?.xkk_ks_json as string).split(','),
|
|
|
+ xkk_kc: (detail_Data.value?.xkk_kc as string).split(","),
|
|
|
+ xkk_kc_json: (detail_Data.value?.xkk_kc_json as string).split(","),
|
|
|
+ xkk_ks: (detail_Data.value?.xkk_ks as string).split(","),
|
|
|
+ xkk_ks_json: (detail_Data.value?.xkk_ks_json as string).split(","),
|
|
|
kc: [],
|
|
|
- ks: []
|
|
|
- }
|
|
|
- tempInfo.kc = tempInfo.xkk_kc.map((_: unknown, i: number) => ({ value: tempInfo.xkk_kc[i], label: tempInfo.xkk_kc_json[i] }))
|
|
|
- tempInfo.ks = tempInfo.xkk_ks.map((_: unknown, i: number) => ({ value: tempInfo.xkk_ks[i], label: tempInfo.xkk_ks_json[i] }))
|
|
|
- sessionStorage.setItem('ksxx', JSON.stringify(tempInfo))
|
|
|
+ ks: [],
|
|
|
+ };
|
|
|
+ tempInfo.kc = tempInfo.xkk_kc.map((_: unknown, i: number) => ({
|
|
|
+ value: tempInfo.xkk_kc[i],
|
|
|
+ label: tempInfo.xkk_kc_json[i],
|
|
|
+ }));
|
|
|
+ tempInfo.ks = tempInfo.xkk_ks.map((_: unknown, i: number) => ({
|
|
|
+ value: tempInfo.xkk_ks[i],
|
|
|
+ label: tempInfo.xkk_ks_json[i],
|
|
|
+ }));
|
|
|
+ sessionStorage.setItem("ksxx", JSON.stringify(tempInfo));
|
|
|
+ kcData.value = tempInfo.kc;
|
|
|
|
|
|
- loading.value = false
|
|
|
+ loading.value = false;
|
|
|
}
|
|
|
-init()
|
|
|
+init();
|
|
|
// #endregion
|
|
|
|
|
|
-const info = ref()
|
|
|
+const info = ref();
|
|
|
+const kcData = ref();
|
|
|
+
|
|
|
+const dialogVisible_audit = ref(false);
|
|
|
+
|
|
|
+type TYPE_TABLE_DIALOG_FIELD = {
|
|
|
+ kskm: string;
|
|
|
+ kssj: string;
|
|
|
+ jkls: string;
|
|
|
+ dydx: string;
|
|
|
+ ysyl: string;
|
|
|
+};
|
|
|
+
|
|
|
+const dialogForm_Rules_audit = reactive<FormRules>({
|
|
|
+ kskm: { required: true, message: "考试科目不能为空", trigger: "submit" },
|
|
|
+ dydx: { required: true, message: "打印对象不能为空", trigger: "submit" },
|
|
|
+});
|
|
|
+const dialogForm_Data = ref<
|
|
|
+ Partial<TYPE_TABLE_DIALOG_FIELD> & { keyword?: string }
|
|
|
+>({});
|
|
|
+
|
|
|
+const handleKskmChange = ($event: {
|
|
|
+ kskm: string;
|
|
|
+ kssj: object;
|
|
|
+ jkls: string;
|
|
|
+}) => {
|
|
|
+ dialogForm_Data.value.kskm = $event.kskm;
|
|
|
+ dialogForm_Data.value.kssj = $event.kssj.join("-");
|
|
|
+ dialogForm_Data.value.jkls = $event.jkls;
|
|
|
+};
|
|
|
+
|
|
|
+const handleClick = () => {
|
|
|
+ dialogVisible_audit.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleDialogFormBtn_cancel = (formRefKey?: string) => {
|
|
|
+ dialogVisible_audit.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const handlePrint = async (
|
|
|
+ formRefKey: string,
|
|
|
+ extendData?: Partial<TYPE_TABLE_FIELD>
|
|
|
+) => {
|
|
|
+ const isValid = await (instance?.refs[formRefKey] as FormInstance).validate(
|
|
|
+ (valid: boolean) => valid
|
|
|
+ );
|
|
|
+ if (isValid) {
|
|
|
+ printJS({
|
|
|
+ printable: "print-part",
|
|
|
+ type: "html",
|
|
|
+ style: `
|
|
|
+#print-part {
|
|
|
+ print-color-adjust: exact
|
|
|
+}
|
|
|
+.flex_center {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.flex-1 {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
|
|
+ --tw-space-x-reverse: 0;
|
|
|
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
|
|
|
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
|
|
+}
|
|
|
+.h-100px {
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+.h-150px {
|
|
|
+ height: 150px;
|
|
|
+}
|
|
|
+.ysyl {
|
|
|
+ border: 1px solid #aaa;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.line {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-top: none;
|
|
|
+}
|
|
|
+.padding10 {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.tip {
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
+`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -75,6 +179,10 @@ const info = ref()
|
|
|
<!-- <div>考试名称</div> -->
|
|
|
<div>{{ detail_Data.xkk_name }}</div>
|
|
|
</div>
|
|
|
+ <div class="mt-10px mb-25px">考试类型:{{ detail_Data.xkk_kslx_option_n }}</div>
|
|
|
+
|
|
|
+ <el-button @click="handleClick" type="primary">考场情况登记表</el-button>
|
|
|
+
|
|
|
<!-- <div class="flex">
|
|
|
<div>考试类型</div>
|
|
|
<div>{{ detail_Data.xkk_kslx }}</div>
|
|
@@ -110,7 +218,68 @@ const info = ref()
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
+ <el-dialog title="考场情况登记表" v-model="dialogVisible_audit" append-to-body destroy-on-close>
|
|
|
+ <el-form :model="dialogForm_Data" ref="dialogForm_Ref_audit" :rules="dialogForm_Rules_audit" label-width="80px">
|
|
|
+ <el-form-item label="考试科目" prop="kskm">
|
|
|
+ <el-select value-key="kskm" v-model="dialogForm_Data.kskm" @change="handleKskmChange" class="w-full">
|
|
|
+ <el-option v-for="(item, index) in info" :key="index" :value="item" :label="item.kskm"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="打印对象" prop="dydx">
|
|
|
+ <el-select value-key="value" v-model="dialogForm_Data.dydx" class="w-full">
|
|
|
+ <el-option v-for="(item, index) in kcData" :key="index" :value="item.label" :label="item.label"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-show="dialogForm_Data.kskm && dialogForm_Data.dydx" label="样式预览" prop="ysyl">
|
|
|
+ <div id="print-part" class="ysyl">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex-1 padding10">{{ dialogForm_Data.dydx }}</div>
|
|
|
+ <div class="flex-1 padding10">{{ detail_Data.xkk_name }}考场情况登记表</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex padding10 space-x-4">
|
|
|
+ <div>{{ dialogForm_Data.kskm }}</div>
|
|
|
+ <div>{{ dialogForm_Data.kssj }}</div>
|
|
|
+ <div>{{ dialogForm_Data.jkls }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex-1 padding10">应到人数</div>
|
|
|
+ <div class="flex-1 padding10">实到人数</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="padding10 h-100px">缺考记录<span class="tip">(缺考考生准考证号及姓名)</span></div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="padding10 h-100px">违纪记录<span class="tip">(缺考考生准考证号、姓名及违纪情况)</span></div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="padding10 h-150px">其他</div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="padding10">监考签名</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="flex justify-center">
|
|
|
+ <el-button @click="handlePrint('dialogForm_Ref_audit')" type="primary">打印</el-button>
|
|
|
+ <el-button @click="handleDialogFormBtn_cancel('dialogForm_Ref_audit')" type="default">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ysyl {
|
|
|
+ border: 1px solid #aaa;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.line {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-top: none;
|
|
|
+}
|
|
|
+.padding10 {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.tip {
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
+</style>
|