1

src/views/emergency/inspection-add-or-update.vue

@@ -2,34 +2,45 @@
   <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
           <el-form-item label="巡检类型" prop="inspectionType">
-            <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('attendanceStatus')"></el-option>
+            <el-select v-model="dataForm.inspectionType" placeholder="巡检类型">
+              <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('inspectionType')"></el-option>
+          </el-select>
       </el-form-item>
           <el-form-item label="开始日期" prop="startDate">
             <el-date-picker
             v-model="dataForm.startDate"
-            type="date"        
+            type="datetime"        
             placeholder="选择开始日期"
-            value-format="YYYY-MM-DD" 
+            value-format="YYYY-MM-DD HH:mm:ss" 
             style="width: 100%;"
           ></el-date-picker>
-        <!-- <el-input v-model="dataForm.startDate" placeholder="开始日期"></el-input> -->
       </el-form-item>
           <el-form-item label="结束日期" prop="endDate">
             <el-date-picker
             v-model="dataForm.endDate"
-            type="date"        
+            type="datetime"        
             placeholder="选择结束日期"
-            value-format="YYYY-MM-DD" 
+            value-format="YYYY-MM-DD HH:mm:ss" 
             style="width: 100%;"
           ></el-date-picker>
-        <!-- <el-input v-model="dataForm.endDate" placeholder="结束日期"></el-input> -->
       </el-form-item>
-          <el-form-item label="用户上传的文件路径" prop="filePath">
-        <el-input v-model="dataForm.filePath" placeholder="用户上传的文件路径"></el-input>
+          <el-form-item label="巡检照片" prop="filePath">
+            <el-upload
+              class="avatar-uploader"
+              :action="action"
+              :headers="headers"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+            </el-upload>
       </el-form-item>
           <el-form-item label="审阅状态" prop="status">
+            <el-select v-model="dataForm.status" placeholder="审阅状态">
             <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('inspectionReviewStatus')"></el-option>
-        <!-- <el-input v-model="dataForm.status" placeholder="0-待确认 1-已确认"></el-input> -->
+          </el-select>
       </el-form-item>
                   <el-form-item label="备注" prop="remark">
         <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
@@ -43,13 +54,21 @@
 </template>
 
 <script lang="ts" setup>
+import app from "@/constants/app";
+import { getToken } from "@/utils/cache";
+import { parseTime } from '@/utils/ruoyi'
 import { reactive, ref } from "vue";
 import baseService from "@/service/baseService";
 import { ElMessage } from "element-plus";
-import { parseTime } from '@/utils/ruoyi'
+import { Plus } from '@element-plus/icons-vue'
+import type { UploadProps } from 'element-plus'
 const emit = defineEmits(["refreshDataList"]);
 import useView from "@/hooks/useView";
 const state = reactive({ ...useView({}) });
+
+const action = `${app.api}/sys/oss/upload`;
+const headers = {token:  getToken() }
+const imageUrl = ref('');
 const visible = ref(false);
 const dataFormRef = ref();
 
@@ -65,14 +84,9 @@ const rules = ref({
     ],
           endDate: [
       { required: true, message: '必填项不能为空', trigger: 'blur' }
-    ],
-          filePath: [
-      { required: true, message: '必填项不能为空', trigger: 'blur' }
     ],
           status: [
       { required: true, message: '必填项不能为空', trigger: 'blur' }
-    ],
-          remark: [
     ]
   });
 
@@ -83,6 +97,7 @@ const init = (id?: number) => {
   // 重置表单数据
   if (dataFormRef.value) {
     dataFormRef.value.resetFields();
+    imageUrl.value = '';
   }
 
   if (id) {
@@ -90,10 +105,32 @@ const init = (id?: number) => {
   }
 };
 
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+  response,
+  uploadFile
+) => {
+  if(response.code!==0) return ElMessage.error(response.msg);
+  imageUrl.value = response?.data?.src;
+}
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (!['image/jpeg','image/png','image/jpp'].includes(rawFile.type)) {
+    ElMessage.error('请上传jpg/png格式的图片!')
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error('图片大小不能超过10MB!')
+    return false
+  }
+  return true
+}
+
 // 获取信息
 const getInfo = (id: number) => {
   baseService.get("/emergency/inspection/" + id).then((res) => {
     Object.assign(dataForm, res.data);
+    dataForm.inspectionType = dataForm.inspectionType + '';
+    dataForm.status = dataForm.status + '';
+    imageUrl.value = dataForm.filePath;
   });
 };
 
@@ -103,9 +140,10 @@ const dataFormSubmitHandle = () => {
     if (!valid) {
       return false;
     }
+    if(!imageUrl.value) return ElMessage.error('请上传图片');
     dataForm.startDate = dataForm.startDate ? parseTime(new Date(dataForm.startDate), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
     dataForm.endDate = dataForm.endDate ? parseTime(new Date(dataForm.endDate), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
-    dataForm.status = dataForm.status ? Number(dataForm.status) : null;
+    dataForm.filePath = imageUrl.value;
     (!dataForm.id ? baseService.post : baseService.put)("/emergency/inspection", dataForm).then((res) => {
       ElMessage.success({
         message: '成功',
@@ -123,3 +161,33 @@ defineExpose({
   init
 });
 </script>
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>

src/views/emergency/inspection.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="mod-demo__inspection">
     <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
+      <el-form-item>
+        <el-select v-model="state.dataForm.inspection_type" placeholder="巡检类型" clearable>
+          <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('inspectionType')"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="state.getDataList()">查询</el-button>
+      </el-form-item>
       <el-form-item>
         <el-button v-if="state.hasPermission('emergency:inspection:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
       </el-form-item>
       <el-form-item>
         <el-button v-if="state.hasPermission('emergency:inspection:delete')" type="danger" @click="state.deleteHandle()">删除</el-button>
       </el-form-item>
-      <el-form-item>
-        <el-button v-if="state.hasPermission('emergency:inspection:review')" type="danger" @click="state.deleteHandle()">审阅</el-button>
+      <!-- 审阅 -->
+       <el-form-item>
+        <el-button v-if="state.hasPermission('emergency:inspection:review')" type="danger" @click="reviewHandle()">审阅</el-button>
       </el-form-item>
       <el-form-item>
         <el-button v-if="state.hasPermission('emergency:inspection:export')" type="info" @click="state.exportHandle()">导出</el-button>
@@ -16,7 +25,9 @@
     </el-form>
     <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
       <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-              <el-table-column prop="id" label="记录ID" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="id" label="序号" header-align="center" align="center" width="70">
+        <template v-slot="scope">{{ scope.$index+1 }}</template>
+      </el-table-column>
               <el-table-column prop="inspectionType" label="巡检类型" header-align="center" align="center">
                 <template v-slot="scope">
                   {{ state.getDictLabel("inspectionType", scope.row.inspectionType) }}
@@ -24,21 +35,22 @@
               </el-table-column>
               <el-table-column prop="startDate" label="开始日期" header-align="center" align="center"></el-table-column>
               <el-table-column prop="endDate" label="结束日期" header-align="center" align="center"></el-table-column>
-              <el-table-column prop="filePath" label="用户上传文件路径" header-align="center" align="center"></el-table-column>
+              <!-- <el-table-column prop="filePath" label="用户上传文件路径" header-align="center" align="center"></el-table-column> -->
               <el-table-column prop="status" label="审阅状态" header-align="center" align="center">
                 <template v-slot="scope">
                   {{ state.getDictLabel("inspectionReviewStatus", scope.row.status) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="creator" label="创建人" header-align="center" align="center"></el-table-column>
+              <el-table-column prop="creatorName" label="创建人" header-align="center" align="center"></el-table-column>
               <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-              <el-table-column prop="updater" label="更新人" header-align="center" align="center"></el-table-column>
+              <el-table-column prop="updaterName" label="更新人" header-align="center" align="center"></el-table-column>
               <el-table-column prop="updateDate" label="更新时间" header-align="center" align="center"></el-table-column>
               <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
-            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
+            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
         <template v-slot="scope">
           <el-button v-if="state.hasPermission('emergency:inspection:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
           <el-button v-if="state.hasPermission('emergency:inspection:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">删除</el-button>
+          <el-button v-if="state.hasPermission('emergency:leaveapplication:review')" type="primary" link @click="reviewHandle(scope.row.id)">审阅</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -51,6 +63,8 @@
 <script lang="ts" setup>
 import useView from "@/hooks/useView";
 import { reactive, ref, toRefs } from "vue";
+import baseService from "@/service/baseService";
+import { ElMessage, ElMessageBox } from "element-plus";
 import AddOrUpdate from "./inspection-add-or-update.vue";
 
 const view = reactive({
@@ -67,4 +81,38 @@ const addOrUpdateRef = ref();
 const addOrUpdateHandle = (id?: number) => {
   addOrUpdateRef.value.init(id);
 };
+
+// 审阅
+const reviewHandle = (id?: string) => {
+  if (!id && state.dataListSelections && state.dataListSelections.length <= 0) {
+    return ElMessage({
+      message: "请选择操作项",
+      type: "warning",
+      duration: 500
+    });
+  }
+  const reviewData = id 
+    ? [Number(id)] 
+    : (state.dataListSelections || []).map((item: IObject) => {return item.id});
+
+  ElMessageBox.confirm("确定进行[审阅]操作?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  })
+  .then(() => {
+      baseService.put("/emergency/inspection/review", reviewData).then((res) => {
+        ElMessage.success({
+          message: "审阅成功",
+          duration: 500,
+          onClose: () => {
+            state.getDataList();
+          }
+        });
+      });
+    })
+    .catch(() => {
+      //
+    });
+};
 </script>