合并

Your Name

2022-09-08 5a1616f169d75ece07d2d12a8edac3e5f660a920

 src/views/specialWorkSystem/workProcess/workCheck/index.vue

@@ -28,7 +28,7 @@
            <div class="main-card">
               <el-row class="cardTop">
                  <el-col :span="12" class="mainCardBtn">
                     <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button>
                     <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新增</el-button>
                  </el-col>
                  <el-button type="primary" :icon="Refresh" size="default"/>
               </el-row>
@@ -43,7 +43,11 @@
                  <el-table-column property="id" label="作业证编号" width="200"/>
                  <el-table-column property="workType" label="作业类型" width="200"/>
                  <el-table-column property="checkInfo" label="检查内容"/>
                  <el-table-column property="result" label="检查结果"/>
                  <el-table-column property="result" label="检查结果">
                     <template #default="scope">
                        <span :class="scope.row.result == '异常' ? 'red': ''">{{ scope.row.result }}</span>
                     </template>
                  </el-table-column>
                  <el-table-column property="desc" label="描述" width="200"/>
                  <el-table-column property="name" label="分析人"/>
                  <el-table-column property="updateTime" label="分析时间"/>
@@ -97,10 +101,14 @@
            </el-form-item>
         </el-form>
      </el-dialog>
      <el-dialog v-model="dialogAddRecord" title="新建" @close="closeAdd" @open="openAdd">
      <el-dialog v-model="dialogAddRecord" title="新增" @close="closeAdd" @open="openAdd">
         <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
            <el-form-item label="作业证编号" prop="id">
               <el-input v-model="addRecord.id"> </el-input>
               <el-input v-model="addRecord.id">
                  <template #append>
                     <el-button :icon="Search" />
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="作业类型" prop="workType">
               <el-select v-model="addRecord.workType">
@@ -121,6 +129,14 @@
                  <el-option label="异常" value="1"/>
               </el-select>
            </el-form-item>
            <el-form-item label="现场照片" prop="photos">
               <el-upload accept="image/*" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='imgLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" list-type="picture-card" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">
                  <el-icon><Plus /></el-icon>
                  <template #tip>
                     <div class="el-upload__tip">上传jpg/png图片尺寸小于500KB,最多可上传3张</div>
                  </template>
               </el-upload>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
               <el-input v-model="addRecord.desc" type="textarea"> </el-input>
            </el-form-item>
@@ -129,6 +145,9 @@
               <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
      <el-dialog v-model="dialogVisible">
         <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
   </div>
</template>
@@ -140,17 +159,21 @@
   import { useUserInfo } from '/@/stores/userInfo';
   import { Session } from '/@/utils/storage';
   import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
   import { ElTable } from 'element-plus';
   import { FormInstance, FormRules, ElMessage } from 'element-plus';
   import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
   import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
   import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
   import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
   import axios from "axios";

   // 定义接口来定义对象的类型
   interface stateType {
      tableData: Array<any>;
      departmentList: Array<any>;
      department:string;
      workerList: Array<string>;
      casProps: {};
      imgLimit: number;
      fileList: Array<file>,
      uploadUrl: string,
      isOverSize: Boolean,
      dialogVisible: Boolean,
      dialogImageUrl: string | null,
      multipleSelection: Array<any>;
      deleteArr: Array<any>;
      dialogDetails: boolean;
@@ -164,15 +187,13 @@
      searchWord: string;
      searchType: number | null
      totalSize: number;
      addRecord: {

      };
      details: {

      };
      addRecord: {};
      details: {};
      workTypeList: Array<any>
   }

   interface file {
      url: string;
   }
   export default {
      name: 'workCheck',
      components: {},
@@ -187,6 +208,12 @@
            chosenIndex: null,
            searchWord: '',
            searchType: null,
            isOverSize: false,
            fileList: [],
            imgLimit: 3,
            uploadUrl: '',
            dialogVisible: false,
            dialogImageUrl: null,
            tableData: [
               {
                  id: 'GTXH-0000001',
@@ -216,15 +243,6 @@
                  updateTime: '2022-08-31 17:05:20'
               }
            ],
            departmentList: [],
            department: '',
            workerList: [],
            casProps: {
               expandTrigger: 'hover',
               emitPath: false,
               value: 'depId',
               label: 'depName'
            },
            multipleSelection: [],
            dialogDetails: false,
            dialogAddRecord: false,
@@ -256,6 +274,7 @@
            workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            checkInfo: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            result: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            photos: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            desc: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            updateTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
@@ -264,7 +283,6 @@
         // 页面载入时执行方法
         onMounted(() => {
            // getListByPage();
            // getAllDepartment();
         });

         // 分页获取班组管理列表
@@ -289,32 +307,110 @@
            }
         };

         // 获取部门列表
         const getAllDepartment = async () => {
            let res = await teamManageApi().getAllDepartment();
            if (res.data.code === '200') {
               state.departmentList = res.data.data;
            } else {
         // 图片上传
         const showTip =()=>{
            ElMessage({
               type: 'warning',
               message: '超出文件上传数量'
            });
         }

         const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);
         };

         const handlePictureCardPreview = (uploadFile: { url: string }) => {
            state.dialogImageUrl = uploadFile.url!;
            state.dialogVisible = true;
         };

         const getUploadUrl = async (rawFile: any) => {
            const fileSize = rawFile.size / 1024 < 500 ? '1' : '0'
            if(fileSize === '0'){
               ElMessage({
                  type: 'warning',
                  message: res.data.msg
                  message: '文件大小不能超过500k。'
               });
               state.isOverSize = true
               return false
            }else{
               const res = await workApplyApi().getUploadUrl(rawFile.name);
               state.addRecord.photos.push(res.data.data.fileName)
               state.uploadUrl = res.data.data.uploadUrl;
            }
         };

         const handleChange = async (value) => {
            state.addRecord.depId = value;
            console.log(state.addRecord.department, 'de');
            let res = await teamManageApi().getAllMember(value);
         const upload = async (params: any) => {
            let reader = new FileReader();
            reader.readAsArrayBuffer(params.file);
            reader.onload = async () => {
               axios
                     .put(state.uploadUrl, reader.result, {
                        header: { 'Content-Type': 'multipart/form-data' }
                     })
                     .then(() => {
                        // if (state.fileList.length === 2) {
                        //    state.fileList.splice(0, 1);
                        // }
                        // console.log(state.form.workDetail.photos,'photos')
                     });
            };
         };

         const beforeRemove = (file: {}, fileList: []) => {
            const result = new Promise((resolve, reject) => {
               if(!state.isOverSize){
                  ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                  })
                        .then(() => {
                           // console.log(state.workDetail.photos,'path')
                           const list = JSON.parse(JSON.stringify(state.addRecord.photos))
                           fileList.map((item,index)=>{
                              if(item.uid === file.uid){
                                 fileList.splice(index,1)
                                 state.addRecord.photos.splice(index,1)
                                 // 请求删除接口
                                 deletePic(false,list[index])
                              }
                           })
                        })
                        .catch(() => {
                           reject(false);
                        });
               }else{
                  const list = JSON.parse(JSON.stringify(state.addRecord.photos))
                  fileList.map((item,index)=>{
                     if(item.uid === file.uid){
                        fileList.splice(index,1)
                        state.addRecord.photos.splice(index,1)
                        deletePic(true,list[index])
                     }
                  })
                  state.isOverSize = false
               }
            });
            return result;
         };

         // 删除图片接口
         const deletePic = async(isOverSize:boolean,fileName:string)=>{
            const res = await workApplyApi().deleteFile({fileName: fileName})
            if (res.data.code === '200') {
               state.workerList = res.data.data;
               ElMessage({
                  type: isOverSize ? 'error' : 'success',
                  message: isOverSize ? '上传失败':'删除成功！'
               });
            } else {
               ElMessage({
                  type: 'warning',
                  message: res.data.msg
               });
            }
         };
         }


         // 关键词查询记录
         const searchRecord = async () => {
@@ -422,7 +518,13 @@
            Delete,
            Refresh,
            Plus,
            handleChange,
            Search,
            showTip,
            handlePreview,
            handlePictureCardPreview,
            getUploadUrl,
            upload,
            beforeRemove,
            searchRecord,
            clearSearch,
            viewRecord,
@@ -442,6 +544,9 @@

<style scoped lang="scss">
   $homeNavLengh: 8;
   .red{
      color: red;
   }
   .home-container {
      height: calc(100vh - 144px);
      box-sizing: border-box;