feat: 事故信息查询模块接口对接

src/views/accident/records/components/addOrEdit.vue

@@ -4,96 +4,105 @@
       ref="form"
       :model="infoForm"
       :rules="rules"
-      label-width="110px"
+      label-width="180px"
-      style="width: 800px"
+      style="width: 900px"
     >
-      <el-form-item :label-width="formLabelWidth" label="事故案号">
+      <el-form-item :label-width="formLabelWidth" label="事故案号" prop="incidentNumber">
-        <el-input v-model="infoForm.incidentNumber" autocomplete="off" />
+        <el-input v-model="infoForm.incidentNumber" :disabled="isDisabled" autocomplete="off" />
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故名称">
+      <el-form-item :label-width="formLabelWidth" label="事故名称" prop="incidentName">
-        <el-input v-model="infoForm.incidentName" autocomplete="off" />
+        <el-input v-model="infoForm.incidentName" :disabled="isDisabled" autocomplete="off" />
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故类型">
+      <el-form-item :label-width="formLabelWidth" label="事故类型" prop="incidentType">
-        <el-select v-model="infoForm.incidentTypes" placeholder="请选择">
+        <el-select v-model="infoForm.incidentType" :disabled="isDisabled" placeholder="请选择">
           <el-option v-for="item in incidentTypes" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故级别">
+      <el-form-item :label-width="formLabelWidth" label="事故级别" prop="incidentLevel">
-        <el-select v-model="infoForm.incidentLevels" placeholder="请选择">
+        <el-select v-model="infoForm.incidentLevel" :disabled="isDisabled" placeholder="请选择">
           <el-option v-for="item in incidentLevels" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故发生地点">
+      <el-form-item :label-width="formLabelWidth" label="事故发生地点" prop="location">
-        <el-input v-model="infoForm.location" autocomplete="off"/>
+        <el-input v-model="infoForm.location" :disabled="isDisabled" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故发生时间">
+      <el-form-item :label-width="formLabelWidth" label="事故发生时间" prop="incidentDate">
         <el-date-picker
+          :disabled="isDisabled"
           v-model="infoForm.incidentDate"
           type="date"
-          placeholder="选择日期"
+          placeholder="选择事故发生时间"
           style="width: 100%;"
-          format="yyyy 年 MM 月 dd 日"
+          format="yyyy-MM-dd HH:mm:ss"
           value-format="yyyy-MM-dd HH:mm:ss"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="直接经济损失">
+      <el-form-item :label-width="formLabelWidth" label="直接经济损失" prop="directLoss">
-        <el-input v-model="infoForm.directLoss" type="number" autocomplete="off"/>
+        <el-input v-model="infoForm.directLoss" :disabled="isDisabled" type="number" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="受伤人数">
+      <el-form-item :label-width="formLabelWidth" label="受伤人数" prop="injured">
-        <el-input v-model="infoForm.injured" type="number" autocomplete="off"/>
+        <el-input v-model="infoForm.injured" :disabled="isDisabled" type="number" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="死亡人数">
+      <el-form-item :label-width="formLabelWidth" label="死亡人数" prop="fatalities">
-        <el-input v-model="infoForm.fatalities" type="number" autocomplete="off"/>
+        <el-input v-model="infoForm.fatalities" :disabled="isDisabled" type="number" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="重伤人数">
+      <el-form-item :label-width="formLabelWidth" label="重伤人数" prop="seriouslyInjured">
-        <el-input v-model="infoForm.seriouslyInjured" type="number" autocomplete="off"/>
+        <el-input v-model="infoForm.seriouslyInjured" :disabled="isDisabled" type="number" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故起因">
+      <el-form-item :label-width="formLabelWidth" label="事故起因" prop="cause">
-        <el-input v-model="infoForm.cause" autocomplete="off"/>
+        <el-input v-model="infoForm.cause" :disabled="isDisabled" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故概述">
+      <el-form-item :label-width="formLabelWidth" label="事故概述" prop="summary">
-        <el-input v-model="infoForm.summary" autocomplete="off"/>
+        <el-input v-model="infoForm.summary" :disabled="isDisabled" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="事故照片">
+      <el-form-item :label-width="formLabelWidth" label="事故照片" prop="photos">
         <el-upload
           ref="upload"
-          :file-list="image"
+          :disabled="isDisabled"
+          :file-list.sync="infoForm.photos"
           :multiple="false"
-          :limit="1"
+          :auto-upload="true"
+          :limit="limitNum"
           :on-remove="handleRemovePicture"
-          :on-change="handleChangeIMG"
           :on-preview="handlePictureCardPreview"
-          :before-upload="beforeHiddenUpload"
+          :before-upload="beforeAccidentUpload"
-          :auto-upload="false"
+          :on-error="handleError"
-          class="avatar-uploader"
+          :on-exceed="handleExceed"
+          name="file"
           action="#"
           accept=".jpg,.jpeg,.png"
           list-type="picture-card">
           <i class="el-icon-plus" />
         </el-upload>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="原因分析及责任认定">
+      <el-form-item :label-width="formLabelWidth" label="原因分析及责任认定" prop="analysis">
-        <el-input v-model="infoForm.analysis" autocomplete="off"/>
+        <el-input v-model="infoForm.analysis" :disabled="isDisabled" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="考核建议">
+      <el-form-item :label-width="formLabelWidth" label="考核建议" prop="suggestions">
-        <el-input v-model="infoForm.suggestions" autocomplete="off"/>
+        <el-input v-model="infoForm.suggestions" :disabled="isDisabled" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="整改措施">
+      <el-form-item :label-width="formLabelWidth" label="整改措施" prop="measures">
-        <el-input v-model="infoForm.measures" autocomplete="off"/>
+        <el-input v-model="infoForm.measures" :disabled="isDisabled" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="填表人">
+      <el-form-item :label-width="formLabelWidth" label="填表人" prop="creator">
-        <el-input v-model="infoForm.creator" autocomplete="off"/>
+        <el-input v-model="infoForm.creator" :disabled="isDisabled" autocomplete="off"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="报出日期">
+      <el-form-item :label-width="formLabelWidth" label="报出日期" prop="reportDate">
         <el-date-picker
           v-model="infoForm.reportDate"
+          :disabled="isDisabled"
           type="date"
-          placeholder="选择日期"
+          placeholder="请选择报出日期"
           style="width: 100%;"
-          format="yyyy 年 MM 月 dd 日"
+          format="yyyy-MM-dd HH:mm:ss"
-          value-format="yyyy-MM-dd HH:mm:ss"/>
+          value-format="yyyy-MM-dd HH:mm:ss"
+        />
       </el-form-item>
     </el-form>
 
+    <el-dialog :visible.sync="dialogImgVisible">
+      <img :src="dialogImageUrl" width="100%" alt="">
+    </el-dialog>
+
     <div class="ui-height" />
     <div class="ui-foot">
       <el-button
@@ -108,10 +117,12 @@
 
 <script>
 import { requestFN } from '../../../../utils/request'
+import { upload } from '@/utils/upload'
 
 export default {
   data() {
     return {
+      config: config,
       infoForm: {
         id: '', // 主键ID
         incidentNumber: '', // 事故案号
@@ -128,7 +139,7 @@ export default {
         seriouslyInjured: null, // 重伤人数
         cause: '', // 事故起因
         summary: '', // 事故概述
-        photos: '', // 事故照片
+        photos: [], // 事故照片
         analysis: '', // 原因分析及责任认定
         suggestions: '', // 考核建议
         measures: '', // 整改措施
@@ -141,8 +152,13 @@ export default {
       /** 事故等级 */
       incidentLevels: [],
       tableName: '',
-      /** 图片文件 */
+      /** 图片上传限制个数 */
-      image: null,
+      limitNum: 1,
+      /** 预览图片地址 */
+      dialogImageUrl: '',
+      allowRemove: true, // 添加一个控制标志
+      /** 预览弹窗 */
+      dialogImgVisible: false,
       rules: {
         incidentNumber: [{ required: true, message: '事故案号不能为空', trigger: 'blur' }],
         incidentName: [{ required: true, message: '事故名称不能为空', trigger: 'blur' }],
@@ -167,6 +183,12 @@ export default {
     }
   },
 
+  computed: {
+    isDisabled() {
+      return this.$parent.tableName === '查看'
+    }
+  },
+
   created() {
     this.getDict()
     const id = this.$parent.id
@@ -174,39 +196,154 @@ export default {
     if (id == null || id === '') {
       this.infoForm = this.$options.data().infoForm
     } else {
+      // 若有数据项的ID, 则请求接口并回显表单
       requestFN('/accident/' + id, {}).then((data) => {
         this.infoForm = data.info
+        this.getFileImageBinaray(data.info.photos)
       }).catch((e) => {
-        this.listLoading = false
       })
     }
   },
 
   methods: {
-    handleRemovePicture() {},
+    /**
+     * 文件列表移除文件时的钩子
+     */
+    handleRemovePicture(file) {
+      if (file.remotePathName) {
+        requestFN(`/accident/delete/photos/${file.remotePathName}`).then((res) => {
+          if (res.result === 'success') {
+            this.infoForm.photos = []
+            this.$message({
+              message: '文件删除成功',
+              type: 'info',
+              duration: 2000
+            })
+          }
+        })
+      }
+    },
 
-    handleChangeIMG() {},
+    /**
+     * 单独查询图片流文件
+     */
+    getFileImageBinaray(fileName) {
+      requestFN(`/accident/view/photos`, { path: fileName }).then((res) => {
+        console.log('res :>> ', res)
+      })
+    },
 
-    handlePictureCardPreview() {},
+    /**
+     * 点击文件列表中已上传的文件时的钩子
+     */
+    handlePictureCardPreview(file) {
+      this.dialogImgVisible = true
+      this.dialogImageUrl = file.url
+    },
+
+    /**
+     * 文件上传失败时的钩子处理
+     */
+    handleError(err, file, fileList) {
+      this.$message({
+        message: `${file.name}上传失败, 请稍后重试`,
+        type: 'error',
+        duration: 2000
+      })
+    },
+
+    /**
+     * 文件超出个数限制的钩子处理
+     */
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 ${this.limitNum} 个文件,本次选择了 ${files.length} 个文件`)
+    },
+
+    /**
+     * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
+     */
+    beforeAccidentUpload(file) {
+      if (!file) {
+        this.$message({
+          message: '请上传图片',
+          type: 'error'
+        })
+        return false
+      }
+      const types = ['image/jpeg', 'image/jpg', 'image/png']
+      const isImage = types.includes(file.type)
+      if (!isImage) {
+        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
+        return false
+      } else {
+        const formData = new FormData()
+        formData.append('file', file)
+        upload('/accident/import/photos', formData).then((data) => {
+          if (data.result === 'success') {
+            this.infoForm.photos = [{
+              name: file.name,
+              url: URL.createObjectURL(file),
+              remotePathName: data.path
+            }]
+          }
+        })
+        return false
+      }
+    },
 
-    beforeHiddenUpload() {},
     /**
      * 返回到列表页面
      */
     goBack() {
+      this.handleResetInitForm()
+      this.image = []
+      this.dialogImageUrl = ''
       this.$parent.activeName = 'List'
     },
 
+    /**
+     * 表单清空处理
+     */
+    handleResetInitForm() {
+      this.infoForm = {
+        id: '', // 主键ID
+        incidentNumber: '', // 事故案号
+        incidentName: '', // 事故名称
+        incidentType: null, // 事故类型
+        companyName: '', // 所属公司
+        incidentLevel: '', // 事故级别
+        incidentNature: '', // 事故性质
+        location: '', // 事故发生地点
+        incidentDate: null, // 事故发生时间
+        directLoss: '', // 直接经济损失（万元）
+        injured: null, // 受伤人数
+        fatalities: null, // 死亡人数
+        seriouslyInjured: null, // 重伤人数
+        cause: '', // 事故起因
+        summary: '', // 事故概述
+        photos: [], // 事故照片
+        analysis: '', // 原因分析及责任认定
+        suggestions: '', // 考核建议
+        measures: '', // 整改措施
+        creator: '', // 填表人
+        reportDate: null // 报出日期
+      }
+    },
+
     /**
      * 表单确认按钮
      */
     confirm() {
-      requestFN('/accident' + (this.tableName === '修改' ? '/update' : '/save'), this.infoForm)
+      const params = {
+        ...this.infoForm,
+        photos: this.infoForm.photos[0].remotePathName
+      }
+      requestFN('/accident' + (this.tableName === '修改' ? '/update' : '/save'), params)
         .then((response) => {
           // 删除成功后的处理
           this.$message.success(this.tableName + '成功')
-          this.getList() // 重新获取数据
           this.infoForm = this.$options.data().infoForm
+          this.$parent.activeName = 'List'
           // eslint-disable-next-line handle-callback-err
         }).catch((error) => {
           this.$message.error(this.tableName + '失败')

src/views/accident/records/components/list.vue

@@ -7,7 +7,7 @@
             <el-input v-model="searchForm.incidentName" placeholder="请输入隐患描述" class="filter-item"/>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="4">
           <el-form-item label="发生时间" prop="incidentDates">
             <el-date-picker
               v-model="searchForm.incidentDates"
@@ -50,7 +50,6 @@
       <el-row :gutter="24">
         <el-col :span="24">
           <el-button type="primary" icon="el-icon-circle-plus" @click="goView('', '新增')">新增</el-button>
-          <el-button icon="el-icon-top-right" @click="handleExport">导出</el-button>
           <el-button icon="el-icon-s-promotion" @click="handleAllExport">全部导出</el-button>
           <el-button icon="el-icon-refresh-left" @click="handleRefresh">刷新</el-button>
           <el-button type="danger" icon="el-icon-delete-solid" @click="handleBatchDel">批量删除</el-button>
@@ -74,16 +73,17 @@
         <el-table-column label="所属公司" prop="companyName"/>
         <el-table-column label="发生时间" prop="incidentDate"/>
         <el-table-column label="发生地点" prop="location"/>
-        <el-table-column label="操作" width="100">
+        <el-table-column label="操作" width="300">
           <template v-slot="{row}">
             <el-button icon="el-icon-view" size="mini" @click="goView(row.id, '查看')">查看</el-button>
-            <el-button icon="el-icon-view" size="mini" @click="goView(row.id, '修改')">修改</el-button>
+            <el-button icon="el-icon-edit" size="mini" @click="goEdit(row.id, '修改')">修改</el-button>
-            <el-button icon="el-icon-view" size="mini" @click="deleteRow(row.id)">删除</el-button>
+            <el-button icon="el-icon-delete-solid" type="danger" size="mini" @click="deleteRow(row.id)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <!-- table 表格 end -->
+
     <div class="pagination-group">
       <pagination :total="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="searchList" />
     </div>
@@ -101,6 +101,7 @@ export default {
 
   data() {
     return {
+      config: config,
       // 搜索查询条件
       searchForm: {
         /** 事故名称 */
@@ -118,6 +119,8 @@ export default {
         /** 事故等级 */
         incidentLevel: ''
       },
+      /** 当前选中行 */
+      multipleSelection: [],
       /** 列表加载态 */
       listLoading: false,
       /** 源列表数据项 */
@@ -179,7 +182,7 @@ export default {
     },
 
     /**
-     * 跳转页面
+     * 跳转查看详情页面
      */
     goView(id, name) {
       this.$parent.id = id
@@ -187,6 +190,15 @@ export default {
       this.$parent.activeName = 'AddOrEdit'
     },
 
+    /**
+     * 跳转修改页面
+     */
+    goEdit(id, name) {
+      this.$parent.id = id
+      this.$parent.tableName = name
+      this.$parent.activeName = 'AddOrEdit'
+    },
+
     /**
      * 删除行数据
      */
@@ -207,6 +219,7 @@ export default {
         requestFN(url).then((response) => {
           // 删除成功后的处理
           this.$message.success('删除成功')
+          this.searchList()
           // eslint-disable-next-line handle-callback-err
         }).catch((error) => {
           this.$message.error('删除失败')
@@ -217,18 +230,24 @@ export default {
           message: '已取消删除'
         })
       })
-      this.searchList()
     },
 
-    /**
-     * 导出
-     */
-    handleExport() {},
-
     /**
      * 全部导出
      */
-    handleAllExport() {},
+    handleAllExport() {
+      this.$confirm('确定要下载excel模板吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = false
+        window.open(config.templatefileUrl + 'template/limitSpace.xls')
+      }).catch(() => {
+        this.listLoading = false
+      })
+      this.listLoading = false
+    },
 
     /**
      * 刷新
@@ -236,7 +255,7 @@ export default {
     handleRefresh() {
       this.searchForm = this.$options.data().searchForm
       this.searchList()
-      this.toggleSelection()
+      // this.toggleSelection()
     },
 
     /**
@@ -264,7 +283,6 @@ export default {
         requestFN(url).then((response) => {
           // 删除成功后的处理
           this.$message.success('删除成功')
-          this.searchList() // 重新获取数据
           // eslint-disable-next-line handle-callback-err
         }).catch((error) => {
           this.$message.error('删除失败')
@@ -302,4 +320,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pagination-group {
+  margin-top: 14px;
+}
+</style>

src/views/accident/records/index.vue

@@ -26,7 +26,9 @@ export default {
   watch: {
     activeName(val) {
       if (val === 'List') {
-        this.$refs.List.getList()
+        this.$nextTick(() => {
+          this.$refs.List.searchList()
+        })
       }
     }
   }