应急演练

src/views/pms/qhse/emergencyDrill/CertDrawer.vue

@@ -21,6 +21,9 @@
               class="!w-200px" />
           </el-form-item>
           <el-form-item>
+            <el-button type="primary" plain @click="openForm('create')">
+              <Icon icon="ep:plus" class="mr-5px" /> 新增
+            </el-button>
             <el-button @click="handleQuery">
               <Icon icon="ep:search" class="mr-5px" /> 搜索
             </el-button>
@@ -95,6 +98,109 @@
     </div>
   </el-drawer>
 
+  <Dialog :title="formDialogTitle" v-model="formDialogVisible" width="50%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="auto"
+      v-loading="formLoading">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="关联物资" prop="emergencyId">
+            <el-input
+              v-model="formData.emergencyName"
+              disabled
+              placeholder="关联物资"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="证书编号" prop="certNo">
+            <el-input v-model="formData.certNo" placeholder="请输入证书编号" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="检测单位" prop="certOrg">
+            <el-input v-model="formData.certOrg" placeholder="请输入检测单位" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="检测日期" prop="certTime">
+            <el-date-picker
+              v-model="formData.certTime"
+              type="date"
+              value-format="x"
+              placeholder="请选择检测日期"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="有效期至" prop="certExpire">
+            <el-date-picker
+              v-model="formData.certExpire"
+              type="date"
+              value-format="x"
+              placeholder="请选择有效期至"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <!-- <el-col :span="12">
+          <el-form-item label="部门" prop="deptId">
+            <el-tree-select
+              v-model="formData.deptId"
+              :data="deptList"
+              :props="defaultProps"
+              node-key="id"
+              filterable
+              clearable
+              placeholder="请选择部门"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col> -->
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="附件" prop="file">
+            <UploadFile
+              v-model="formData.file"
+              :file-type="['doc', 'docx', 'pdf', 'jpg', 'png', 'jpeg', 'xls', 'xlsx']"
+              :limit="3"
+              :file-size="100"
+              class="min-w-80px" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="formData.remark"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="formDialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+
   <Dialog v-model="dialogFileView" title="附件" width="500">
     <div
       v-for="(file, index) in fileList"
@@ -120,9 +226,12 @@
 </template>
 
 <script setup lang="ts">
-import { EmergencyDrillCertApi } from '@/api/pms/qhse/index'
+import { EmergencyDrillCertApi, EmergencyDrillApi } from '@/api/pms/qhse/index'
 import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 import { formatDate } from '@/utils/formatTime'
+import { defaultProps } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+import { useUserStore } from '@/store/modules/user'
 
 const { ZmTable, ZmTableColumn } = useTableComponents()
 
@@ -130,12 +239,14 @@ defineOptions({ name: 'CertDrawer' })
 
 const message = useMessage()
 const { t } = useI18n()
+const userStore = useUserStore()
 
 const drawerVisible = ref(false)
 const loading = ref(false)
 const list = ref<any[]>([])
 const total = ref(0)
 const currentEmergencyId = ref<number | undefined>(undefined)
+const currentEmergencyName = ref<string>('')
 
 const queryParams = reactive({
   pageNo: 1,
@@ -170,18 +281,117 @@ const resetQuery = () => {
   handleQuery()
 }
 
-const open = (emergencyId: number) => {
+const formDialogVisible = ref(false)
+const formDialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
+const formRef = ref()
+const deptList = ref<Tree[]>([])
+
+const createDefaultFormData = () => ({
+  id: undefined,
+  emergencyId: undefined,
+  emergencyName: '',
+  deptId: undefined,
+  certNo: '',
+  certOrg: '',
+  certTime: undefined,
+  certExpire: undefined,
+  file: '',
+  remark: ''
+})
+
+const formData = ref(createDefaultFormData())
+
+const formRules = reactive({
+  emergencyId: [{ required: true, message: '关联设备不能为空', trigger: 'blur' }],
+  certNo: [{ required: true, message: '证书编号不能为空', trigger: 'blur' }],
+  certOrg: [{ required: true, message: '检测单位不能为空', trigger: 'blur' }],
+  certTime: [{ required: true, message: '检测日期不能为空', trigger: 'blur' }],
+  certExpire: [{ required: true, message: '有效期不能为空', trigger: 'blur' }],
+  file: [{ required: true, message: '请上传附件', trigger: 'blur' }],
+  deptId: [{ required: true, message: '所在部门不能为空', trigger: 'blur' }]
+})
+
+const openForm = (type: string, id?: number) => {
+  formDialogVisible.value = true
+  formDialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+
+  if (type === 'create') {
+    formData.value.emergencyId = currentEmergencyId.value
+    formData.value.emergencyName = currentEmergencyName.value
+    formData.value.deptId = userStore.getUser.deptId
+  } else if (id) {
+    loadFormData(id)
+  }
+}
+
+const resetForm = () => {
+  formData.value = createDefaultFormData()
+  formRef.value?.resetFields()
+}
+
+const loadFormData = async (id: number) => {
+  formLoading.value = true
+  try {
+    const res = await EmergencyDrillCertApi.getEmergencyDrillCert(id)
+    formData.value = {
+      ...createDefaultFormData(),
+      ...res,
+      certTime: res.certTime ? Number(res.certTime) : undefined,
+      certExpire: res.certExpire ? Number(res.certExpire) : undefined
+    }
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = { ...formData.value } as any
+    if (data.file instanceof Array) {
+      data.file = data.file.join(',')
+    }
+
+    if (formType.value === 'create') {
+      await EmergencyDrillCertApi.createEmergencyDrillCert(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await EmergencyDrillCertApi.updateEmergencyDrillCert(data)
+      message.success(t('common.updateSuccess'))
+    }
+
+    formDialogVisible.value = false
+    getList()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const open = async (emergencyId: number, emergencyName?: string) => {
   currentEmergencyId.value = emergencyId
+  currentEmergencyName.value = emergencyName || ''
   queryParams.emergencyId = emergencyId
   queryParams.pageNo = 1
   queryParams.certNo = undefined
+  queryParams.emergencyName = undefined
   drawerVisible.value = true
+
+  if (deptList.value.length === 0) {
+    deptList.value = await DeptApi.getSimpleDeptList()
+  }
+
   getList()
 }
 
 const handleClose = () => {
   drawerVisible.value = false
   currentEmergencyId.value = undefined
+  currentEmergencyName.value = ''
   list.value = []
   total.value = 0
 }
@@ -259,6 +469,7 @@ defineExpose({
   height: 100%;
   display: flex;
   flex-direction: column;
+  margin-top: -20px;
 }
 
 .cert-table-wrapper {

src/views/pms/qhse/emergencyDrill/bookCheck/EmergencyBookForm.vue

@@ -59,7 +59,7 @@
           </el-form-item>
         </el-col>
 
-        <el-col :span="12">
+        <!-- <el-col :span="12">
           <el-form-item label="部门" prop="deptId">
             <el-tree-select
               v-model="formData.deptId"
@@ -72,7 +72,7 @@
               placeholder="请选择部门"
               style="width: 100%" />
           </el-form-item>
-        </el-col>
+        </el-col> -->
       </el-row>
 
       <el-row :gutter="20">
@@ -110,13 +110,20 @@
   <Dialog title="选择设备" v-model="deviceDialogVisible" width="70%">
     <ContentWrap>
       <el-form class="-mb-15px" :model="deviceQueryParams" :inline="true">
+        <el-form-item label="物资编号" prop="emergencyCode">
+          <el-input
+            v-model="deviceQueryParams.emergencyCode"
+            placeholder="请输入物资编号"
+            clearable
+            class="!w-150px" />
+        </el-form-item>
         <el-form-item label="物资名称" prop="emergencyName">
           <el-input
             v-model="deviceQueryParams.emergencyName"
             placeholder="请输入设备名称"
             clearable
             @keyup.enter="handleDeviceQuery"
-            class="!w-200px" />
+            class="!w-150px" />
         </el-form-item>
         <el-form-item label="责任人" prop="dutyPerson">
           <el-input
@@ -124,7 +131,7 @@
             placeholder="请输入责任人"
             clearable
             @keyup.enter="handleDeviceQuery"
-            class="!w-200px" />
+            class="!w-150px" />
         </el-form-item>
         <el-form-item>
           <el-button @click="handleDeviceQuery">
@@ -158,6 +165,7 @@
             {{ scope.$index + 1 }}
           </template>
         </zm-table-column>
+        <zm-table-column label="应急物资编号" align="center" prop="emergencyCode" />
         <zm-table-column label="应急物资名称" align="center" prop="emergencyName" min-width="140" />
         <zm-table-column label="应急物资单位" align="center" prop="emergencyUnit" min-width="120" />
         <zm-table-column label="数量" align="center" prop="emergencyNumber" width="90" />
@@ -327,7 +335,8 @@ const deviceQueryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   emergencyName: undefined as string | undefined,
-  dutyPerson: undefined as string | undefined
+  dutyPerson: undefined as string | undefined,
+  emergencyCode: undefined as string | undefined
 })
 
 const getDeviceList = async () => {
@@ -354,6 +363,7 @@ const handleDeviceQuery = () => {
 const resetDeviceQuery = () => {
   deviceQueryParams.emergencyName = undefined
   deviceQueryParams.dutyPerson = undefined
+  deviceQueryParams.emergencyCode = undefined
   handleDeviceQuery()
 }
 

src/views/pms/qhse/emergencyDrill/index.vue

@@ -17,12 +17,19 @@
         ref="queryFormRef"
         class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 pt-4 flex items-center flex-wrap min-w-0">
         <div class="flex items-center gap-4 flex-wrap">
+          <el-form-item label="应急物资名称" prop="emergencyCode">
+            <el-input
+              v-model="queryParams.emergencyCode"
+              placeholder="请输入物资编号"
+              clearable
+              class="!w-150px" />
+          </el-form-item>
           <el-form-item label="应急物资名称" prop="emergencyName">
             <el-input
               v-model="queryParams.emergencyName"
-              placeholder="请输入应急物资名称"
+              placeholder="请输入物资名称"
               clearable
-              class="!w-150px" />
+              class="!w-120px" />
           </el-form-item>
           <el-form-item label="责任人" prop="dutyPerson">
             <el-input
@@ -30,7 +37,7 @@
               placeholder="请输入责任人"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-150px" />
+              class="!w-120px" />
           </el-form-item>
           <el-form-item>
             <el-button @click="handleQuery">
@@ -74,6 +81,7 @@
                   {{ scope.$index + 1 }}
                 </template>
               </zm-table-column>
+              <zm-table-column label="应急物资编号" align="center" prop="emergencyCode" />
               <zm-table-column
                 label="应急物资名称"
                 align="center"
@@ -116,7 +124,7 @@
                     v-hasPermi="['rq:qhse-emergency-book:update']"
                     link
                     type="primary"
-                    @click="openCertDrawer(scope.row.id)">
+                    @click="openCertDrawer(scope.row.id, scope.row.emergencyName)">
                     查看证书
                   </el-button>
                   <el-button
@@ -202,6 +210,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   emergencyName: undefined,
+  emergencyCode: undefined,
   dutyPerson: undefined,
   deptId: undefined
 })
@@ -302,8 +311,8 @@ const handleDownload = async (url: string) => {
 
 const certDrawerRef = ref()
 
-const openCertDrawer = (emergencyId: number) => {
-  certDrawerRef.value?.open(emergencyId)
+const openCertDrawer = (emergencyId: number, emergencyName: string) => {
+  certDrawerRef.value?.open(emergencyId, emergencyName)
 }
 onMounted(async () => {
   getList()