tmp-jn/src/pages/xdjx/tdkgl/tdksh.vue

<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'

// #region (constant)
const TABLE_KEY = 'xtw_id'
const URL_CUT = '/xdjx/tdkgl_wdtdk'
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'
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  'xtw_jsxm': string; // 申请教师姓名
  'xtw_jsxm_user_id': string; // 申请教师用户编号
  'team_id': string; // 学期编号
  'team_name': string; // 学期名称
  'xtw_tkzc': string; // 调课周次
  'xtw_zcsj': string; // 调课周次时间
  'xtw_tkjc': string; // 调课节次
  'xtw_tkxq': string; // 调课星期
  'xtw_tkmc': string; // 调课名称
  'xtw_tkyy': string; // 调课原因
  'xtw_tklx': string; // 调课类型
  'xtw_hdkjc': string; // 换代课节次
  'xtw_hdkjs_user_id': string; // 换代课教师用户编号
  'xtw_hdkxq': string; // 换代课星期
  'xtw_hdkmc': string; // 换代课名称
  'xtw_hdkjsxm': string; // 换代课教师姓名
  'xtw_hdkzc': string; // 换代课周次
  'xtw_hdkzcsj': string; // 换代课周次时间
  'xtw_shzt': string; // 审核状态
}
// #endregion

// #region (props)
// #endregion

// #region (query row)
const queryForm_Data = ref<Partial<TYPE_TABLE_FIELD>>({})

const handleQueryFormBtn_search = () => {
  queryApi()
}
const handleQueryFormBtn_clear = () => {
  queryForm_Data.value = {}
}
// #endregion

// #region (table selection)
const multipleSelection = ref<TYPE_TABLE_FIELD[]>([])
const handleSelectionChange = (val: TYPE_TABLE_FIELD[]) => {
  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 handleTableRowBtn_export = () => {
  exportApi()
}
const handleTableRowBtn_add = () => {
  whichDialogSubmit = 'add'
  dialogForm_Data.value = {}
  dialogVisible_addOrEdit.value = true
}
const handleTableRowBtn_delete = async () => {
  await deleteApi(multipleSelection.value.map((item: TYPE_TABLE_FIELD) => item[TABLE_KEY]))
  queryApi()
}
// #endregion

// #region (table body)
const tableData = ref<TYPE_TABLE_FIELD[]>([])
const DetailName = '-TDKGL-WDTDK'
const DetailParam = 'aid'

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
}
const handleTableColBtn_audit = (scope: { row: TYPE_TABLE_FIELD }) => {
  whichDialogSubmit = 'edit'
  dialogForm_Data.value = { ...scope.row }
  dialogVisible_audit.value = true
}
const handleTableColBtn_detail = (scope: { row: TYPE_TABLE_FIELD }) => {
  router.push({ name: DetailName, params: { [DetailParam]: scope.row[TABLE_KEY] } })
}
const handleTableColBtn_delete = async (scope: { row: TYPE_TABLE_FIELD }) => {
  await deleteApi(scope.row[TABLE_KEY])
  queryApi()
}
// #endregion

// #region (pagination)
const total = ref(0)
const limit = ref(10)

const currentPage = ref(1)
function handleCurrentChange() {
  queryApi()
}
// #endregion

// #region (dialog base)
const dialogForm_Data = ref<Partial<TYPE_TABLE_FIELD>>({})

const handleDialogFormBtn_submit = async (formRefKey: string) => {
  const isValid = await (instance?.refs[formRefKey] as FormInstance).validate((valid: boolean) => valid)
  if (isValid) {
    await API_MAP[whichDialogSubmit](<TYPE_TABLE_FIELD>(dialogForm_Data.value))
    handleDialogFormBtn_cancel()
    queryApi()
  }
}
const handleDialogFormBtn_cancel = (formRefKey?: string) => {
  dialogVisible_addOrEdit.value = false
  dialogVisible_audit.value = false
}
// #endregion

// #region (dialog add/edit)
const dialogVisible_addOrEdit = ref<boolean>(false)

const dialogForm_Ref_addOrEdit = ref<FormInstance>()
const dialogForm_Rules_addOrEdit = reactive({
  'xtw_jsxm': { required: true, message: '申请教师姓名不能为空' },
  'xtw_jsxm_user_id': { required: true, message: '申请教师用户编号不能为空' },
  'team_id': { required: true, message: '学期编号不能为空' },
  'team_name': { required: true, message: '学期名称不能为空' },
  'xtw_tkzc': { required: true, message: '调课周次不能为空' },
  'xtw_zcsj': { required: true, message: '调课周次时间不能为空' },
  'xtw_tkjc': { required: true, message: '调课节次不能为空' },
  'xtw_tkxq': { required: true, message: '调课星期不能为空' },
  'xtw_tkmc': { required: true, message: '调课名称不能为空' },
  'xtw_tkyy': { required: true, message: '调课原因不能为空' },
  'xtw_tklx': { required: true, message: '调课类型不能为空' },
  'xtw_hdkjc': { required: true, message: '换代课节次不能为空' },
  'xtw_hdkjs_user_id': { required: true, message: '换代课教师用户编号不能为空' },
  'xtw_hdkxq': { required: true, message: '换代课星期不能为空' },
  'xtw_hdkmc': { required: true, message: '换代课名称不能为空' },
  'xtw_hdkjsxm': { required: true, message: '换代课教师姓名不能为空' },
  'xtw_hdkzc': { required: true, message: '换代课周次不能为空' },
  'xtw_hdkzcsj': { required: true, message: '换代课周次时间不能为空' },
  'xtw_shzt': { required: true, message: '审核状态不能为空' },
})
// #endregion

// #region (dialog audit)
const dialogVisible_audit = ref<boolean>(false)

const dialogForm_Field_audit = reactive<{
  FLAG: keyof TYPE_TABLE_FIELD,
  REASON?: keyof TYPE_TABLE_FIELD
}>({
  FLAG: 'xtw_shzt',
})

const dialogForm_Ref_audit = ref<FormInstance>()
const dialogForm_Rules_audit = reactive<FormRules>({
  'xtw_jsxm': { required: true, message: '申请教师姓名不能为空' },
  'xtw_jsxm_user_id': { required: true, message: '申请教师用户编号不能为空' },
  'team_id': { required: true, message: '学期编号不能为空' },
  'team_name': { required: true, message: '学期名称不能为空' },
  'xtw_tkzc': { required: true, message: '调课周次不能为空' },
  'xtw_zcsj': { required: true, message: '调课周次时间不能为空' },
  'xtw_tkjc': { required: true, message: '调课节次不能为空' },
  'xtw_tkxq': { required: true, message: '调课星期不能为空' },
  'xtw_tkmc': { required: true, message: '调课名称不能为空' },
  'xtw_tkyy': { required: true, message: '调课原因不能为空' },
  'xtw_tklx': { required: true, message: '调课类型不能为空' },
  'xtw_hdkjc': { required: true, message: '换代课节次不能为空' },
  'xtw_hdkjs_user_id': { required: true, message: '换代课教师用户编号不能为空' },
  'xtw_hdkxq': { required: true, message: '换代课星期不能为空' },
  'xtw_hdkmc': { required: true, message: '换代课名称不能为空' },
  'xtw_hdkjsxm': { required: true, message: '换代课教师姓名不能为空' },
  'xtw_hdkzc': { required: true, message: '换代课周次不能为空' },
  'xtw_hdkzcsj': { required: true, message: '换代课周次时间不能为空' },
  'xtw_shzt': { required: true, message: '审核状态不能为空' },
})

// #endregion

// #region (request api): 
function queryApi() {
  loading_table.value = true
  return request({
    url: URL_CUT + '/index',
    data: {
      ...queryForm_Data.value,
      limit: limit.value,
      page: currentPage.value
    }
  }).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',
    data: {
      [URL_SUBMIT_KEY]: data,
    }
  })
}

function editApi(data: TYPE_TABLE_FIELD) {
  return request({
    url: URL_CUT + '/edit',
    data: {
      [TABLE_KEY]: data[TABLE_KEY],
      [URL_SUBMIT_KEY]: pick(data, ['xtw_jsxm', 'xtw_jsxm_user_id', 'team_id', 'team_name', 'xtw_tkzc', 'xtw_zcsj', 'xtw_tkjc', 'xtw_tkxq', 'xtw_tkmc', 'xtw_tkyy', 'xtw_tklx', 'xtw_hdkjc', 'xtw_hdkjs_user_id', 'xtw_hdkxq', 'xtw_hdkmc', 'xtw_hdkjsxm', 'xtw_hdkzc', 'xtw_hdkzcsj', 'xtw_shzt',]),
    }
  })
}

function deleteApi(id: string | string[]) {
  return request({
    url: URL_CUT + '/delete',
    data: {
      [TABLE_KEY]: id,
    }
  })
}

function detailApi(id: string) {
  return request({
    url: URL_CUT + '/detail',
    data: {
      [TABLE_KEY]: id,
    }
  })
}

function importApi(data: { file: File }) {
  return request({
    $type: 'import',
    url: URL_CUT + '/import',
    data
  } as AxiosRequestConfig)
}

function exportApi() {
  return download(URL_CUT + '/index', queryForm_Data.value)
}

const API_MAP = {
  query: queryApi,
  add: addApi,
  edit: editApi,
  delete: deleteApi,
  detail: detailApi,
  import: importApi,
  export: exportApi,
}
// #endregion

// #region (page init)
function init() {
  queryApi()
}
init()
// #endregion

</script>

<template>
  <div class="card flex-grow flex flex-col">
    <el-form inline :model="queryForm_Data">
      <el-form-item label="申请教师姓名">
        <el-input v-model="queryForm_Data.xtw_jsxm" clearable />
      </el-form-item>
      <!-- <el-form-item label="申请教师用户编号"><el-input v-model="queryForm_Data.xtw_jsxm_user_id" clearable /></el-form-item>
      <el-form-item label="学期编号"><el-input v-model="queryForm_Data.team_id" clearable /></el-form-item> -->
      <!-- <el-form-item label="学期名称"><el-input v-model="queryForm_Data.team_name" clearable /></el-form-item> -->
      <!-- <el-form-item label="调课周次"><el-input v-model="queryForm_Data.xtw_tkzc" clearable /></el-form-item>
      <el-form-item label="调课周次时间"><el-input v-model="queryForm_Data.xtw_zcsj" clearable /></el-form-item>
      <el-form-item label="调课节次"><el-input v-model="queryForm_Data.xtw_tkjc" clearable /></el-form-item>
      <el-form-item label="调课星期"><el-input v-model="queryForm_Data.xtw_tkxq" clearable /></el-form-item>
      <el-form-item label="调课名称"><el-input v-model="queryForm_Data.xtw_tkmc" clearable /></el-form-item>
      <el-form-item label="调课原因"><el-input v-model="queryForm_Data.xtw_tkyy" type="textarea" /></el-form-item>
      <el-form-item label="调课类型"><el-select v-model="queryForm_Data.xtw_tklx" clearable ><el-option label="调代课" value="1" /><el-option label="调换课" value="2" /></el-select></el-form-item>
      <el-form-item label="换代课节次"><el-input v-model="queryForm_Data.xtw_hdkjc" clearable /></el-form-item>
      <el-form-item label="换代课教师用户编号"><el-input v-model="queryForm_Data.xtw_hdkjs_user_id" clearable /></el-form-item>
      <el-form-item label="换代课星期"><el-input v-model="queryForm_Data.xtw_hdkxq" clearable /></el-form-item>
      <el-form-item label="换代课名称"><el-input v-model="queryForm_Data.xtw_hdkmc" clearable /></el-form-item>
      <el-form-item label="换代课教师姓名"><el-input v-model="queryForm_Data.xtw_hdkjsxm" clearable /></el-form-item>
      <el-form-item label="换代课周次"><el-input v-model="queryForm_Data.xtw_hdkzc" clearable /></el-form-item>
      <el-form-item label="换代课周次时间"><el-input v-model="queryForm_Data.xtw_hdkzcsj" clearable /></el-form-item>
      <el-form-item label="审核状态"><el-select v-model="queryForm_Data.xtw_shzt" clearable ><el-option label="通过" value="1" /><el-option label="不通过" value="2" /></el-select></el-form-item> -->
      <el-form-item>
        <el-button @click="handleQueryFormBtn_search" type="primary">搜索</el-button>
        <el-button @click="handleQueryFormBtn_clear" type="warning">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="divider"></div>
    <div>
      <import-button :url="URL_CUT_REF"></import-button>
      <el-button @click="handleTableRowBtn_export" type="success">导出</el-button>
      <el-button @click="handleTableRowBtn_add" type="primary">新增</el-button>
      <el-button @click="handleTableRowBtn_delete" type="danger">删除</el-button>
    </div>

    <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-column type="selection"></el-table-column>
        <el-table-column prop="xtw_jsxm" label="申请教师姓名" width="auto" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="xtw_jsxm_user_id" label="申请教师用户编号" width="auto" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column prop="team_id" label="学期编号" width="auto" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="team_name" label="学期名称" width="auto" show-overflow-tooltip></el-table-column>

        <el-table-column label="调课" width="500" show-overflow-tooltip>
          <template #default="{ row: { xtw_jsxm, xtw_tkzc, xtw_zcsj, xtw_tkjc, xtw_tkxq, xtw_tkmc } }">
            {{ xtw_jsxm }}-{{ xtw_tkzc }}-{{ xtw_zcsj }}-{{ xtw_tkjc }}-{{ xtw_tkxq }}-{{ xtw_tkmc }}
          </template>
        </el-table-column>

        <!-- <el-table-column prop="xtw_tkzc" label="调课周次" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_zcsj" label="调课周次时间" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_tkjc" label="调课节次" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_tkxq" label="调课星期" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_tkmc" label="调课名称" width="auto" show-overflow-tooltip></el-table-column> -->

        <el-table-column label="换代课" width="500" show-overflow-tooltip>
          <template #default="{ row: { xtw_hdkjsxm, xtw_hdkzc, xtw_hdkzcsj, xtw_hdkjc, xtw_hdkxq, xtw_hdkmc } }">
            {{ xtw_hdkjsxm }}-{{ xtw_hdkzc }}-{{ xtw_hdkzcsj }}-{{ xtw_hdkjc }}-{{ xtw_hdkxq }}-{{ xtw_hdkmc }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="xtw_hdkjs_user_id" label="换代课教师用户编号" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_hdkjc" label="换代课节次" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_hdkxq" label="换代课星期" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_hdkmc" label="换代课名称" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_hdkjsxm" label="换代课教师姓名" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_hdkzc" label="换代课周次" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_hdkzcsj" label="换代课周次时间" width="auto" show-overflow-tooltip></el-table-column> -->

        <el-table-column prop="xtw_tklx" label="调课类型" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_tkyy" label="调课原因" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xtw_shzt" label="审核状态" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <!-- <el-link @click="handleTableColBtn_edit(scope)" type="primary" :underline="false" class="mr-2">编辑</el-link> -->
            <el-link @click="handleTableColBtn_audit(scope)" type="primary" :underline="false" class="mr-2">审核</el-link>
            <!-- <el-link @click="handleTableColBtn_detail(scope)" type="primary" :underline="false" class="mr-2">详情</el-link> -->
            <!-- <el-link @click="handleTableColBtn_delete(scope)" type="primary" :underline="false" class="mr-2">删除</el-link> -->
          </template>
        </el-table-column>
      </el-table>
    </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" />
    </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-item label="申请教师姓名" prop="xtw_jsxm">
        <el-input v-model="dialogForm_Data.xtw_jsxm" clearable />
      </el-form-item>
      <el-form-item label="申请教师用户编号" prop="xtw_jsxm_user_id">
        <el-input v-model="dialogForm_Data.xtw_jsxm_user_id" clearable />
      </el-form-item>
      <el-form-item label="学期编号" prop="team_id">
        <el-input v-model="dialogForm_Data.team_id" clearable />
      </el-form-item>
      <el-form-item label="学期名称" prop="team_name">
        <el-input v-model="dialogForm_Data.team_name" clearable />
      </el-form-item>
      <el-form-item label="调课周次" prop="xtw_tkzc">
        <el-input v-model="dialogForm_Data.xtw_tkzc" clearable />
      </el-form-item>
      <el-form-item label="调课周次时间" prop="xtw_zcsj">
        <el-input v-model="dialogForm_Data.xtw_zcsj" clearable />
      </el-form-item>
      <el-form-item label="调课节次" prop="xtw_tkjc">
        <el-input v-model="dialogForm_Data.xtw_tkjc" clearable />
      </el-form-item>
      <el-form-item label="调课星期" prop="xtw_tkxq">
        <el-input v-model="dialogForm_Data.xtw_tkxq" clearable />
      </el-form-item>
      <el-form-item label="调课名称" prop="xtw_tkmc">
        <el-input v-model="dialogForm_Data.xtw_tkmc" clearable />
      </el-form-item>
      <el-form-item label="调课原因" prop="xtw_tkyy">
        <el-input v-model="dialogForm_Data.xtw_tkyy" type="textarea" />
      </el-form-item>
      <el-form-item label="调课类型" prop="xtw_tklx">
        <el-radio-group v-model="dialogForm_Data.xtw_tklx">
          <el-radio label="1">调代课</el-radio>
          <el-radio label="2">调换课</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="换代课节次" prop="xtw_hdkjc">
        <el-input v-model="dialogForm_Data.xtw_hdkjc" clearable />
      </el-form-item>
      <el-form-item label="换代课教师用户编号" prop="xtw_hdkjs_user_id">
        <el-input v-model="dialogForm_Data.xtw_hdkjs_user_id" clearable />
      </el-form-item>
      <el-form-item label="换代课星期" prop="xtw_hdkxq">
        <el-input v-model="dialogForm_Data.xtw_hdkxq" clearable />
      </el-form-item>
      <el-form-item label="换代课名称" prop="xtw_hdkmc">
        <el-input v-model="dialogForm_Data.xtw_hdkmc" clearable />
      </el-form-item>
      <el-form-item label="换代课教师姓名" prop="xtw_hdkjsxm">
        <el-input v-model="dialogForm_Data.xtw_hdkjsxm" clearable />
      </el-form-item>
      <el-form-item label="换代课周次" prop="xtw_hdkzc">
        <el-input v-model="dialogForm_Data.xtw_hdkzc" clearable />
      </el-form-item>
      <el-form-item label="换代课周次时间" prop="xtw_hdkzcsj">
        <el-input v-model="dialogForm_Data.xtw_hdkzcsj" clearable />
      </el-form-item>
      <el-form-item label="审核状态" prop="xtw_shzt">
        <el-radio-group v-model="dialogForm_Data.xtw_shzt">
          <el-radio label="1">通过</el-radio>
          <el-radio label="2">不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="flex justify-center">
        <el-button @click="handleDialogFormBtn_submit('dialogForm_Ref_addOrEdit')" type="primary">提交</el-button>
        <el-button @click="handleDialogFormBtn_cancel('dialogForm_Ref_addOrEdit')" type="default">取消</el-button>
      </div>
    </el-form>
  </el-dialog>

  <el-dialog 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="120px">
      <el-form-item label="状态">
        <el-radio-group v-model="dialogForm_Data[dialogForm_Field_audit.FLAG]">
          <el-radio label="1">通过</el-radio>
          <el-radio label="2">未通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="原因" v-show="dialogForm_Data[dialogForm_Field_audit.FLAG] === '1'">
        <el-input type="textarea" v-model="dialogForm_Data[dialogForm_Field_audit.REASON]" :rows="5" />
      </el-form-item> -->
      <div class="flex justify-center">
        <el-button @click="handleDialogFormBtn_submit('dialogForm_Ref_audit')" type="primary">提交</el-button>
        <el-button @click="handleDialogFormBtn_cancel('dialogForm_Ref_audit')" type="default">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>