Newer
Older
xc-business-system / src / views / system / baseInfo / remind / detailDialog.vue
dutingting on 16 May 2024 6 KB 到期提醒管理开发
<!-- 到期提醒详情 -->
<script lang="ts" setup name="RemingDetailDialog">
import { ElMessage } from 'element-plus'
import type { Ref } from 'vue'
import { ref } from 'vue'
import dayjs from 'dayjs'
import type { DateModelType } from 'element-plus'
import { getStandardList } from '@/api/equipment/standard/book'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { SCHEDULE } from '@/utils/scheduleDict'
import { getDeptTreeList } from '@/api/system/dept'
import { getStaffList } from '@/api/resource/register'
import { toTreeList } from '@/utils/structure'
import type { deptType, dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { addRemind } from '@/api/system/baseInfoRemindManage'
// 用户信息
const emits = defineEmits(['confirm'])
const user = useUserStore()
const dialogFormVisible = ref(false)
const loading = ref(false)
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const form = ref({
  id: '',
  labCode: '', //	实验室代码(字典code)
  labCodeName: '', //		实验室名称(字典value)
  remindDays: undefined, //	提醒时间
  remindName: '', //	提醒名称
  remindScope: [], //	提醒范围
  remindTimes: undefined, //	提醒频次(每隔多少天提醒一次)
  taskType: '', //	任务类型(0 任务单 1 设备台账 2 标准装置 3 证书管理)
})
const pageType = ref('detail') // 页面类型
const rules = {
  remindDays: [{ required: true, message: '提醒时间不能为空', trigger: ['blur', 'change'] }],
  remindScope: [{ required: true, message: '提醒范围不能为空', trigger: ['blur', 'change'] }],
}
const dataFormRef = ref()
// -------------------------------------------字典------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室代码
const remindNameList = ref<dictType[]>([]) // 提醒名称
// 获取字典值
async function getDict() {
  // 实验室代码
  getDictByCode('bizLabCode').then((response) => {
    labCodeList.value = response.data
  })
  // 提醒名称
  getDictByCode('systemRemindManage').then((response) => {
    remindNameList.value = response.data
  })
}
getDict()
// -----------------------------------------------------------------------------------------
// 点击确定
const confirmSelect = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true
      addRemind({ ...form.value }).then(() => {
        ElMessage.success('新增成功')
        loading.value = false
      }).catch(() => {
        loading.value = false
      })
      dialogFormVisible.value = false
    }
  })
}
// 取消
const resetForm = () => {
  dialogFormVisible.value = false
}
// 初始化
const initDialog = async (type: string, row: any) => {
  pageType.value = type // 页面类型
  form.value = {
    id: type === 'add' ? '' : row.id,
    labCode: row.labCode, //	实验室代码(字典code)
    labCodeName: row.labCodeName, //		实验室名称(字典value)
    remindDays: row.remindDays, //	提醒时间
    remindName: row.remindName, //	提醒名称
    remindScope: [], //	提醒范围
    remindTimes: row.remindTimes, //	提醒频次(每隔多少天提醒一次)
    taskType: row.taskType, //	任务类型(0 任务单 1 设备台账 2 标准装置 3 证书管理)
  }
  dialogFormVisible.value = true
}

// 修改实验室
const changeLab = (value: string) => {
  const index = labCodeList.value.findIndex(item => item.value === value)
  if (index !== -1) {
    form.value.labCodeName = labCodeList.value[index].name
  }
}

// 修改提醒名称
const changeRemindName = (value: string) => {
  const index = remindNameList.value.findIndex(item => item.value === value)
  if (index !== -1) {
    form.value.taskType = remindNameList.value[index].value
  }
}

defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" :title="`${textMap[pageType]}到期提醒`">
    <el-form ref="dataFormRef" v-loading="loading" :rules="rules" :model="form" label-well-code="right" label-width="200px">
      <el-form-item label="实验室代码" prop="labCode">
        <el-select v-model="form.labCode" :placeholder="pageType === 'detail' ? ' ' : '请选择实验室代码'" :disabled="pageType !== 'add'" class="full-width-input" @change="changeLab">
          <el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="提醒名称" prop="name">
        <el-select v-model="form.remindName" :placeholder="pageType === 'detail' ? ' ' : '请选择实验室代码'" :disabled="pageType !== 'add'" class="full-width-input" @change="changeRemindName">
          <el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="提醒时间(按到期前提示)" prop="remindDays">
        <el-input-number
          v-model="form.remindDays"
          :placeholder="pageType === 'detail' ? '' : '到期前XX天'"
          :disabled="pageType === 'detail'"
          :precision="0"
          :min="1"
          :max="730"
          style="width: 180px;"
        />
        <span class="message">(最大不超过2年)</span>
      </el-form-item>
      <el-form-item label="提醒范围" prop="remindScope">
        <el-checkbox-group v-model="form.remindScope">
          <el-checkbox label="综合管理组" />
          <el-checkbox label="所在部门全部人员" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="提醒频次" prop="remindTimes">
        <span style="margin-right: 6px;">每隔</span>
        <el-input-number
          v-model="form.remindTimes"
          :placeholder="pageType === 'detail' ? '' : '提醒频次'"
          :disabled="pageType === 'detail' || !form.remindDays"
          :precision="0"
          :min="0"
          :max="form.remindDays"
          style="width: 180px;"
        />
        <span style="margin-left: 6px;">天提醒一次</span>
        <span class="message">(频次不能超过提醒时间)</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmSelect">确认</el-button>
        <el-button @click="resetForm">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.message {
  font-size: 12px;
  color: #7f7f7f;
  margin-left: 10px;
}
</style>