提交

src/pages/xdjx/stxkgl/kcxkgl/detail/skdm/index.vue

@@ -1,241 +1,300 @@
 <script setup lang="ts">
 import { ref, getCurrentInstance, reactive } from "vue";
 import { useRouter } from "vue-router";
-import request, { download } from '~/utils/request';
-import { pick } from 'lodash-es';
-import { ElMessage } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { AxiosRequestConfig } from 'axios'
+import request, { download } from "~/utils/request";
+import { pick } from "lodash-es";
+import { ElMessage } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
+import type { AxiosRequestConfig } from "axios";
 
 // #region (constant)
-const TABLE_KEY = 'xss_id'
-const URL_CUT = '/xdjx/stxkgl_skdm'
-const URL_CUT_REF = ref(URL_CUT)
-const URL_SUBMIT_KEY = URL_CUT.split('/').join('_').slice(1)
-const instance = getCurrentInstance()
-const router = useRouter()
+const TABLE_KEY = "xss_id";
+const URL_CUT = "/xdjx/stxkgl_skdm";
+const URL_CUT_REF = ref(URL_CUT);
+const URL_SUBMIT_KEY = URL_CUT.split("/").join("_").slice(1);
+const instance = getCurrentInstance();
+const router = useRouter();
 // #endregion
 
 // #region (variable)
-const loading_table = ref(true)
-let whichDialogSubmit: 'add' | 'edit'
+const loading_table = ref(true);
+let whichDialogSubmit: "add" | "edit";
 // #endregion
 
 // #region (type)
 type TYPE_TABLE_FIELD = {
   [TABLE_KEY]: string;
-  'xss_mc': string; // 名称
-  'xss_dmsj': string; // 点名时间
-  'xss_dmsc': string; // 点名时长
-  'xss_qkrs': string; // 缺课人数
-  'xss_qkrs_json': string; // 缺课人数JSON
-  'xsxk_id': string; // 所属课程编号
-}
+  xss_mc: string; // 名称
+  xss_dmsj: string; // 点名时间
+  xss_dmsc: string; // 点名时长
+  xss_qkrs: string; // 缺课人数
+  xss_qkrs_json: string; // 缺课人数JSON
+  xsxk_id: string; // 所属课程编号
+};
 // #endregion
 
 // #region (props)
 const props = defineProps<{
-  aid: string,
-}>()
+  aid: string;
+}>();
 // #endregion
 
 // #region (query row)
-const queryForm_Data = ref<Partial<TYPE_TABLE_FIELD> & { keyword?: string }>({})
+const queryForm_Data = ref<Partial<TYPE_TABLE_FIELD> & { keyword?: string }>(
+  {}
+);
 
 const handleQueryFormBtn_search = () => {
-  queryApi()
-}
+  queryApi();
+};
 const handleQueryFormBtn_clear = () => {
-  queryForm_Data.value = {}
-}
+  queryForm_Data.value = {};
+};
 // #endregion
 
 // #region (table selection)
-const multipleSelection = ref<TYPE_TABLE_FIELD[]>([])
+const multipleSelection = ref<TYPE_TABLE_FIELD[]>([]);
 const handleSelectionChange = (val: TYPE_TABLE_FIELD[]) => {
-  multipleSelection.value = val
-}
+  multipleSelection.value = val;
+};
 // #endregion
 
 // #region (table row)
 const handleTableRowBtn_import = async ({ file }: { file: File }) => {
-  const res = await API_MAP['import']({ file })
-  if (res.code === '1') {
-    queryApi()
-    ElMessage.success(res.msg)
+  const res = await API_MAP["import"]({ file });
+  if (res.code === "1") {
+    queryApi();
+    ElMessage.success(res.msg);
   }
-}
+};
 const handleTableRowBtn_export = () => {
-  if(multipleSelection.value.length===0) return ElMessage.info('请先勾选导出文件');exportApi({[TABLE_KEY]:multipleSelection.value.map((item: TYPE_TABLE_FIELD)=>item[TABLE_KEY])?.join()})
-}
+  if (multipleSelection.value.length === 0)
+    return ElMessage.info("请先勾选导出文件");
+  exportApi({
+    [TABLE_KEY]: multipleSelection.value
+      .map((item: TYPE_TABLE_FIELD) => item[TABLE_KEY])
+      ?.join(),
+  });
+};
 const handleTableRowBtn_add = () => {
-  whichDialogSubmit = 'add'
-  dialogForm_Data.value = {}
-  dialogVisible_addOrEdit.value = true
-}
+  whichDialogSubmit = "add";
+  dialogForm_Data.value = {};
+  dialogVisible_addOrEdit.value = true;
+};
 const handleTableRowBtn_delete = async () => {
-  if(multipleSelection.value.length===0) return ElMessage.info('请先勾选文件');const resp = await deleteApi(multipleSelection.value.map((item: TYPE_TABLE_FIELD) => item[TABLE_KEY]));if(resp.code!=='1')return;ElMessage.success('删除成功');
-  queryApi()
-}
+  if (multipleSelection.value.length === 0)
+    return ElMessage.info("请先勾选文件");
+  const resp = await deleteApi(
+    multipleSelection.value.map((item: TYPE_TABLE_FIELD) => item[TABLE_KEY])
+  );
+  if (resp.code !== "1") return;
+  ElMessage.success("删除成功");
+  queryApi();
+};
 // #endregion
 
 // #region (table body)
-const tableData = ref<TYPE_TABLE_FIELD[]>([])
-const DetailName = '-STXKGL-KCXKGL-DETAIL-SKDM-DETAIL'
-const DetailParam = 'bid'
+const tableData = ref<TYPE_TABLE_FIELD[]>([]);
+const DetailName = "-STXKGL-KCXKGL-DETAIL-SKDM-DETAIL";
+const DetailParam = "bid";
 
 const handleTableColBtn_edit = async (scope: { row: TYPE_TABLE_FIELD }) => {
-  whichDialogSubmit = 'edit'
-  const res = await detailApi(scope.row[TABLE_KEY])
-  dialogForm_Data.value = (res.data.one_info)
-  dialogVisible_addOrEdit.value = true
-}
+  whichDialogSubmit = "edit";
+  const res = await detailApi(scope.row[TABLE_KEY]);
+  dialogForm_Data.value = res.data.one_info;
+  dialogVisible_addOrEdit.value = true;
+};
 const handleTableColBtn_audit = (scope: { row: TYPE_TABLE_FIELD }) => {
-  whichDialogSubmit = 'edit'
-  dialogForm_Data.value = pick(scope.row, [`${TABLE_KEY}`, ...Object.keys(dialogForm_Rules_audit)])
-  dialogVisible_audit.value = true
-}
+  whichDialogSubmit = "edit";
+  dialogForm_Data.value = pick(scope.row, [
+    `${TABLE_KEY}`,
+    ...Object.keys(dialogForm_Rules_audit),
+  ]);
+  dialogVisible_audit.value = true;
+};
 const handleTableColBtn_detail = (scope: { row: TYPE_TABLE_FIELD }) => {
-  router.push({ name: DetailName, params: { [DetailParam]: scope.row[TABLE_KEY] } })
-}
+  router.push({
+    name: DetailName,
+    params: { [DetailParam]: scope.row[TABLE_KEY] },
+  });
+};
 const handleTableColBtn_delete = async (scope: { row: TYPE_TABLE_FIELD }) => {
-  const resp = await deleteApi(scope.row[TABLE_KEY]);if(resp.code!=='1')return;ElMessage.success('删除成功');
-  queryApi()
-}
+  const resp = await deleteApi(scope.row[TABLE_KEY]);
+  if (resp.code !== "1") return;
+  ElMessage.success("删除成功");
+  queryApi();
+};
 // #endregion
 
 // #region (pagination)
-const total = ref(0)
-const limit = ref(10)
+const total = ref(0);
+const limit = ref(10);
 
-const currentPage = ref(1)
+const currentPage = ref(1);
 function handleCurrentChange() {
-  queryApi()
+  queryApi();
 }
 // #endregion
 
 // #region (dialog base)
-const dialogForm_Data = ref<Partial<TYPE_TABLE_FIELD> & { keyword?: string }>({})
-
-const handleDialogFormBtn_submit = async (formRefKey: string, extendData?: Partial<TYPE_TABLE_FIELD>) => {
-  const isValid = await (instance?.refs[formRefKey] as FormInstance).validate((valid: boolean) => valid)
+const dialogForm_Data = ref<Partial<TYPE_TABLE_FIELD> & { keyword?: string }>(
+  {}
+);
+
+const handleDialogFormBtn_submit = async (
+  formRefKey: string,
+  extendData?: Partial<TYPE_TABLE_FIELD>
+) => {
+  const isValid = await (instance?.refs[formRefKey] as FormInstance).validate(
+    (valid: boolean) => valid
+  );
   if (isValid) {
-    const resp = await API_MAP[whichDialogSubmit](<TYPE_TABLE_FIELD>({ ...dialogForm_Data.value, ...extendData }))
-    if(resp.code!=='1')return;ElMessage.success('操作成功');handleDialogFormBtn_cancel()
-    queryApi()
+    const resp = await API_MAP[whichDialogSubmit](<TYPE_TABLE_FIELD>{
+      ...dialogForm_Data.value,
+      ...extendData,
+    });
+    if (resp.code !== "1") return;
+    ElMessage.success("操作成功");
+    handleDialogFormBtn_cancel();
+    queryApi();
   }
-}
+};
 const handleDialogFormBtn_cancel = (formRefKey?: string) => {
-  dialogVisible_addOrEdit.value = false
-  dialogVisible_audit.value = false
-}
+  dialogVisible_addOrEdit.value = false;
+  dialogVisible_audit.value = false;
+};
 // #endregion
 
 // #region (dialog add/edit)
-const dialogVisible_addOrEdit = ref<boolean>(false)
+const dialogVisible_addOrEdit = ref<boolean>(false);
 
-const dialogForm_Ref_addOrEdit = ref<FormInstance>()
+const dialogForm_Ref_addOrEdit = ref<FormInstance>();
 const dialogForm_Rules_addOrEdit = reactive({
-  'xss_mc': { required: true, message: '名称不能为空', trigger: 'submit' },
-  'xss_dmsj': { required: true, message: '点名时间不能为空', trigger: 'submit' },
-  'xss_dmsc': { required: true, message: '点名时长不能为空', trigger: 'submit' },
-  'xss_qkrs': { required: true, message: '缺课人数不能为空', trigger: 'submit' },
-  'xss_qkrs_json': { required: true, message: '缺课人数JSON不能为空', trigger: 'submit' },
-  'xsxk_id': { required: true, message: '所属课程编号不能为空', trigger: 'submit' },
-})
+  xss_mc: { required: true, message: "名称不能为空", trigger: "submit" },
+  xss_dmsj: { required: true, message: "点名时间不能为空", trigger: "submit" },
+  xss_dmsc: { required: true, message: "点名时长不能为空", trigger: "submit" },
+  // 'xss_qkrs': { required: true, message: '缺课人数不能为空', trigger: 'submit' },
+  // 'xss_qkrs_json': { required: true, message: '缺课人数JSON不能为空', trigger: 'submit' },
+  xsxk_id: {
+    required: true,
+    message: "所属课程编号不能为空",
+    trigger: "submit",
+  },
+});
 // #endregion
 
 // #region (dialog audit)
-const dialogVisible_audit = ref<boolean>(false)
+const dialogVisible_audit = ref<boolean>(false);
 
 const dialogForm_Field_audit = reactive<{
-  FLAG: keyof TYPE_TABLE_FIELD,
-  REASON?: keyof TYPE_TABLE_FIELD
+  FLAG: keyof TYPE_TABLE_FIELD;
+  REASON?: keyof TYPE_TABLE_FIELD;
 }>({
-  FLAG: 'xss_id',
-  REASON: 'xss_id'
-})
+  FLAG: "xss_id",
+  REASON: "xss_id",
+});
 
-const dialogForm_Ref_audit = ref<FormInstance>()
+const dialogForm_Ref_audit = ref<FormInstance>();
 const dialogForm_Rules_audit = reactive<FormRules>({
-  'xss_mc': { required: true, message: '名称不能为空', trigger: 'submit' },
-  'xss_dmsj': { required: true, message: '点名时间不能为空', trigger: 'submit' },
-  'xss_dmsc': { required: true, message: '点名时长不能为空', trigger: 'submit' },
-  'xss_qkrs': { required: true, message: '缺课人数不能为空', trigger: 'submit' },
-  'xss_qkrs_json': { required: true, message: '缺课人数JSON不能为空', trigger: 'submit' },
-  'xsxk_id': { required: true, message: '所属课程编号不能为空', trigger: 'submit' },
-})
+  xss_mc: { required: true, message: "名称不能为空", trigger: "submit" },
+  xss_dmsj: { required: true, message: "点名时间不能为空", trigger: "submit" },
+  xss_dmsc: { required: true, message: "点名时长不能为空", trigger: "submit" },
+  xss_qkrs: { required: true, message: "缺课人数不能为空", trigger: "submit" },
+  xss_qkrs_json: {
+    required: true,
+    message: "缺课人数JSON不能为空",
+    trigger: "submit",
+  },
+  xsxk_id: {
+    required: true,
+    message: "所属课程编号不能为空",
+    trigger: "submit",
+  },
+});
 
 // #endregion
 
 // #region (request api):
 function queryApi() {
-  loading_table.value = true
+  loading_table.value = true;
   return request({
-    url: URL_CUT + '/index',
+    url: URL_CUT + "/index",
     data: {
       ...queryForm_Data.value,
       limit: limit.value,
       page: currentPage.value,
-      xsxk_id: props.aid
-    }
-  }).then((response: { data: { total_rows: string, page_data: TYPE_TABLE_FIELD[] } }) => {
-    const { data } = response
-    total.value = parseInt(data.total_rows)
-    tableData.value = data.page_data
-    return response
-  }).then(() => {
-    loading_table.value = false
+      xsxk_id: props.aid,
+    },
   })
+    .then(
+      (response: {
+        data: { total_rows: string; page_data: TYPE_TABLE_FIELD[] };
+      }) => {
+        const { data } = response;
+        total.value = parseInt(data.total_rows);
+        tableData.value = data.page_data;
+        return response;
+      }
+    )
+    .then(() => {
+      loading_table.value = false;
+    });
 }
 
 function addApi(data: TYPE_TABLE_FIELD) {
   return request({
-    url: URL_CUT + '/add',
+    url: URL_CUT + "/add",
     data: {
       [URL_SUBMIT_KEY]: data,
-    }
-  })
+    },
+  });
 }
 
 function editApi(data: Partial<TYPE_TABLE_FIELD>) {
   return request({
-    url: URL_CUT + '/edit',
+    url: URL_CUT + "/edit",
     data: {
       [TABLE_KEY]: data[TABLE_KEY],
-      [URL_SUBMIT_KEY]: pick(data, ['xss_mc', 'xss_dmsj', 'xss_dmsc', 'xss_qkrs', 'xss_qkrs_json', 'xsxk_id',]),
-    }
-  })
+      [URL_SUBMIT_KEY]: pick(data, [
+        "xss_mc",
+        "xss_dmsj",
+        "xss_dmsc",
+        "xss_qkrs",
+        "xss_qkrs_json",
+        "xsxk_id",
+      ]),
+    },
+  });
 }
 
 function deleteApi(id: string | string[]) {
   return request({
-    url: URL_CUT + '/delete',
+    url: URL_CUT + "/delete",
     data: {
       [TABLE_KEY]: id,
-    }
-  })
+    },
+  });
 }
 
 function detailApi(id: string) {
   return request({
-    url: URL_CUT + '/detail',
+    url: URL_CUT + "/detail",
     data: {
       [TABLE_KEY]: id,
-    }
-  })
+    },
+  });
 }
 
 function importApi(data: { file: File }) {
   return request({
-    $type: 'import',
-    url: URL_CUT + '/import',
-    data
-  } as AxiosRequestConfig)
+    $type: "import",
+    url: URL_CUT + "/import",
+    data,
+  } as AxiosRequestConfig);
 }
 
 function exportApi(d) {
-  return download(URL_CUT + '/index', {...queryForm_Data.value,...d})
+  return download(URL_CUT + "/index", { ...queryForm_Data.value, ...d });
 }
 
 const API_MAP = {
@@ -246,29 +305,28 @@ const API_MAP = {
   detail: detailApi,
   import: importApi,
   export: exportApi,
-}
+};
 // #endregion
 
 // #region (page init)
 function init() {
-  queryApi()
+  queryApi();
 }
-init()
+init();
 // #endregion
 
-
-const dialogVisible_all = ref<boolean>(false)
-const dialogForm_Data_all = ref<any[]>([])
+const dialogVisible_all = ref<boolean>(false);
+const dialogForm_Data_all = ref<any[]>([]);
 const handleTableRowBtn_all = async () => {
   const res = await request({
-    url: '/xdjx/stxkgl_skdm_dmjl/dmjl_alyz',
+    url: "/xdjx/stxkgl_skdm_dmjl/dmjl_alyz",
     data: {
-      xsxk_id: props.aid
-    }
-  })
-  dialogForm_Data_all.value = res.data.students
-  dialogVisible_all.value = true
-}
+      xsxk_id: props.aid,
+    },
+  });
+  dialogForm_Data_all.value = res.data.students;
+  dialogVisible_all.value = true;
+};
 </script>
 
 <template>
@@ -297,8 +355,7 @@ const handleTableRowBtn_all = async () => {
 
     <div class="divider"></div>
     <div class="flex-auto">
-      <el-table :data="tableData" @selection-change="handleSelectionChange" v-loading="loading_table"
-        element-loading-background="#ffffff70">
+      <el-table :data="tableData" @selection-change="handleSelectionChange" v-loading="loading_table" element-loading-background="#ffffff70">
         <el-table-column type="selection"></el-table-column>
         <el-table-column type="index" label="序号" width="60" :index="(i: number) => (currentPage - 1) * limit + i + 1" />
         <el-table-column prop="xss_mc" label="名称" width="200" show-overflow-tooltip></el-table-column>
@@ -306,9 +363,8 @@ const handleTableRowBtn_all = async () => {
         <!-- <el-table-column prop="xss_dmsc" label="点名时长" width="auto" show-overflow-tooltip></el-table-column> -->
         <el-table-column prop="xss_qkrs" label="缺课人数" width="auto" show-overflow-tooltip>
           <template #default="scope">
-            <span>{{ !scope.row.xss_qkrs_json ? 0 : scope.row.xss_qkrs_json.split(',').length }}（{{
-                scope.row.xss_qkrs_json
-            }}）</span>
+            <span>{{ !scope.row.xss_qkrs_json ? 0 : scope.row.xss_qkrs_json.split(',').length }}</span>
+            <span v-if="scope.row.xss_qkrs_json">（{{ scope.row.xss_qkrs_json }}）</span>
           </template>
         </el-table-column>
         <!-- <el-table-column prop="xss_qkrs_json" label="缺课人数JSON" width="auto" show-overflow-tooltip></el-table-column> -->
@@ -326,26 +382,22 @@ const handleTableRowBtn_all = async () => {
     </div>
 
     <div class="flex justify-end mt-10 py-4">
-      <el-pagination :page-size="limit" v-model:current-page="currentPage" @current-change="handleCurrentChange"
-        background layout="total, prev, pager, next" :total="total" />
+      <el-pagination :page-size="limit" v-model:current-page="currentPage" @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total" />
     </div>
   </div>
 
   <el-dialog v-model="dialogVisible_addOrEdit" append-to-body destroy-on-close>
-    <el-form :model="dialogForm_Data" ref="dialogForm_Ref_addOrEdit" :rules="dialogForm_Rules_addOrEdit"
-      label-width="120px">
+    <el-form :model="dialogForm_Data" ref="dialogForm_Ref_addOrEdit" :rules="dialogForm_Rules_addOrEdit" label-width="120px">
       <el-form-item label="名称" prop="xss_mc">
         <el-input v-model="dialogForm_Data.xss_mc" clearable />
       </el-form-item>
       <el-form-item label="点名时间" prop="xss_dmsj">
-        <el-date-picker type="datetime" v-model="dialogForm_Data.xss_dmsj" value-format="YYYY-MM-DD HH:mm:ss"
-          clearable />
+        <el-date-picker type="datetime" v-model="dialogForm_Data.xss_dmsj" value-format="YYYY-MM-DD HH:mm:ss" clearable />
       </el-form-item>
       <!-- <el-form-item label="点名时长" prop="xss_dmsc"><el-input v-model="dialogForm_Data.xss_dmsc" clearable /></el-form-item> -->
       <el-form-item label="缺课人数" prop="xss_qkrs">
         <!-- <el-input v-model="dialogForm_Data.xss_qkrs" clearable /> -->
-        <remote-multi-select v-model="dialogForm_Data.xss_qkrs" v-model:model-name="dialogForm_Data.xss_qkrs_json"
-          :fields="['xsxx_xsxh', 'xsxx_xsxm']" url="/xdjx/stxkgl_xktj_xkqk/index" :d="{
+        <remote-multi-select v-model="dialogForm_Data.xss_qkrs" v-model:model-name="dialogForm_Data.xss_qkrs_json" :fields="['xsxx_xsxh', 'xsxx_xsxm']" url="/xdjx/stxkgl_xktj_xkqk/index" :d="{
             xsxk_id: props.aid,
           }"></remote-multi-select>
         <span class="text-sm">（勾选缺勤的人）</span>
@@ -354,8 +406,7 @@ const handleTableRowBtn_all = async () => {
       <!-- <el-form-item label="缺课人数JSON" prop="xss_qkrs_json"><el-input v-model="dialogForm_Data.xss_qkrs_json" type="textarea" /></el-form-item>
       <el-form-item label="所属课程编号" prop="xsxk_id"><el-input v-model="dialogForm_Data.xsxk_id" clearable /></el-form-item> -->
       <div class="flex justify-center">
-        <el-button @click="handleDialogFormBtn_submit('dialogForm_Ref_addOrEdit', { xsxk_id: props.aid })"
-          type="primary">提交
+        <el-button @click="handleDialogFormBtn_submit('dialogForm_Ref_addOrEdit', { xsxk_id: props.aid })" type="primary">提交
         </el-button>
         <el-button @click="handleDialogFormBtn_cancel('dialogForm_Ref_addOrEdit')" type="default">取消</el-button>
       </div>