Default Changelist

Admin

2022-09-20 23f1bf22c42a904c05cee63e10c9fd8b60dfe8f5

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

@@ -5,13 +5,13 @@
            <el-col :span="6" style="display:flex;align-items: center">
               <span style="white-space: nowrap">作业证编号：</span>
               <div class="grid-content topInfo">
                  <el-input v-model="searchWord"></el-input>
                  <el-input v-model="workPermitNo" placeholder="请输入作业证编号"></el-input>
               </div>
            </el-col>
            <el-col :span="6" style="display:flex;align-items: center">
               <span style="white-space: nowrap">作业类型：</span>
               <div class="grid-content topInfo">
                  <el-select v-model="searchType" placeholder="请选择作业类型">
                  <el-select v-model="workType" placeholder="请选择作业类型">
                     <el-option
                           v-for="item in workTypeList"
                           :key="item.id"
@@ -30,27 +30,26 @@
                  <el-col :span="12" class="mainCardBtn">
                     <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新增</el-button>
                  </el-col>
                  <el-button type="primary" :icon="Refresh" size="default"/>
                  <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData"/>
               </el-row>
               <el-table
                     ref="multipleTableRef"
                     :data="tableData"
                     style="width: 100%"
                     height="calc(100% - 100px)"
                     :header-cell-style="{background: '#fafafa'}"
               >
                  <el-table-column type="index" label="序号" width="200"/>
                  <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 type="index" label="序号" width="80"/>
                  <el-table-column property="workPermitNo" label="作业证编号"/>
                  <el-table-column property="workTypeDesc" label="作业类型"/>
                  <el-table-column property="checkContent" label="检查内容"/>
                  <el-table-column property="checkResultDesc" label="检查结果">
                     <template #default="scope">
                        <span :class="scope.row.result == '异常' ? 'red': ''">{{ scope.row.result }}</span>
                        <span :class="scope.row.checkResultDesc == '异常' ? 'red': ''">{{ scope.row.checkResultDesc}}</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="分析时间"/>
                  <el-table-column property="info" label="描述" show-overflow-tooltip width="200"/>
                  <el-table-column property="operatorUname" label="分析人"/>
                  <el-table-column property="operationTime" label="分析时间" width="180"/>
                  <el-table-column fixed="right" label="操作" align="center" width="250">
                     <template #default="scope">
                        <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
@@ -65,7 +64,7 @@
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        :total="totalSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                  />
@@ -76,35 +75,44 @@
      <el-dialog v-model="dialogDetails" title="检查记录">
         <el-form :model="details" label-width="120px">
            <el-form-item label="作业证编号">
               <el-input v-model="details.id" readonly/>
               <el-input v-model="details.workPermitNo" readonly/>
            </el-form-item>
            <el-form-item label="作业类型">
               <el-input v-model="details.workType" readonly/>
               <el-input v-model="details.workTypeDesc" readonly/>
            </el-form-item>
            <el-form-item label="检查内容">
               <el-input v-model="details.checkInfo" readonly/>
               <el-input v-model="details.checkContent" readonly/>
            </el-form-item>
            <el-form-item label="检查结果">
               <el-input v-model="details.result" readonly/>
               <el-input :class="details.checkResultDesc == '异常' ? 'red': ''" v-model="details.checkResultDesc" readonly/>
            </el-form-item>
            <el-form-item label="现场图片" v-if="details.imagePaths && details.imagePaths.length>0">
               <el-image v-for="item in details.imagePaths" :preview-src-list="details.imagePaths" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
            </el-form-item>
            <el-form-item label="描述">
               <el-input v-model="details.desc" type="textarea" readonly/>
               <el-input v-model="details.info" type="textarea" readonly/>
            </el-form-item>
            <el-form-item label="分析人">
               <el-input v-model="details.name" readonly/>
               <el-input v-model="details.operatorUname" readonly/>
            </el-form-item>
            <el-form-item label="分析时间">
               <el-input v-model="details.updateTime" readonly/>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
               <el-input v-model="details.operationTime" readonly/>
            </el-form-item>
         </el-form>
         <template #footer>
           <span class="dialog-footer">
            <el-button type="primary" @click="dialogDetails = false">确认</el-button>
           </span>
         </template>
      </el-dialog>
      <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-form-item label="作业证编号" prop="workPermitNo">
               <el-input v-model="addRecord.workPermitNo" placeholder="作业编号须为已审批作业的编号，可点击右方按钮查询">
                  <template #append>
                     <el-button :icon="Search" @click="dialogPermitNo = true"/>
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="作业类型" prop="workType">
               <el-select v-model="addRecord.workType">
@@ -116,130 +124,131 @@
                  />
               </el-select>
            </el-form-item>
            <el-form-item label="检查内容" prop="checkInfo">
               <el-input v-model="addRecord.checkInfo"> </el-input>
            <el-form-item label="检查内容" prop="checkContent">
               <el-input v-model="addRecord.checkContent"> </el-input>
            </el-form-item>
            <el-form-item label="检查结果" prop="result">
               <el-select v-model="addRecord.result">
                  <el-option label="正常" value="0"/>
                  <el-option label="异常" value="1"/>
            <el-form-item label="检查结果" prop="checkResult">
               <el-select v-model="addRecord.checkResult">
                  <el-option label="正常" value="1"/>
                  <el-option label="异常" value="2"/>
               </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
               <el-input v-model="addRecord.desc" type="textarea"> </el-input>
            <el-form-item label="现场照片" prop="imagePaths">
               <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>
               <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
               <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
            <el-form-item label="描述" prop="info">
               <el-input v-model="addRecord.info" type="textarea"> </el-input>
            </el-form-item>
         </el-form>
         <template #footer>
              <span class="dialog-footer">
               <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
               <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
              </span>
         </template>
      </el-dialog>
      <el-dialog v-model="dialogVisible">
         <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <el-dialog v-model="dialogPermitNo" title="选择相应的作业编号">
         <permit-no ref="permitNoInfo"></permit-no>
         <template #footer>
           <span class="dialog-footer">
            <el-button type="warning" @click="dialogPermitNo = false" size="default" plain>取消</el-button>
            <el-button type="primary" @click="confirmPermitNo" size="default">确认</el-button>
           </span>
         </template>
      </el-dialog>
   </div>
</template>

<script lang="ts">
   import { toRefs, reactive, ref, onMounted } from 'vue';
   import {toRefs, reactive, ref, onMounted, defineAsyncComponent} from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   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 { workProcessApi } from '/@/api/specialWorkSystem/workProcess';
   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;
      dialogAddRecord: boolean;
      dialogPermitNo: boolean;
      deleteDialog: boolean;
      deleteSetDialog: boolean;
      pageIndex: number;
      pageSize: number;
      chosenIndex: null | number;
      deleteId: null | number;
      searchWord: string;
      searchType: number | null
      workPermitNo: string;
      workType: number | null;
      totalSize: number;
      addRecord: {

      };
      details: {

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

   interface file {
      url: string;
   }
   export default {
      name: 'workCheck',
      components: {},
      components: {
         permitNo: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workProcess/components/dialogPermitNo.vue'))
      },
      setup() {
         const userInfo = useUserInfo();
         const { userInfos } = storeToRefs(userInfo);

         const permitNoInfo = ref()
         const state = reactive<stateType>({
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            chosenIndex: null,
            searchWord: '',
            searchType: null,
            tableData: [
               {
                  id: 'GTXH-0000001',
                  workType: '动火作业',
                  checkInfo: '动火作业检查',
                  result: '正常',
                  desc: 'A车间动火作业过程检查',
                  name: '李羽飞',
                  updateTime: '2022-08-31 12:00:00'
               },
               {
                  id: 'GTXH-0000002',
                  workType: '动火作业',
                  checkInfo: '动火作业检查',
                  result: '正常',
                  desc: 'B车间动火作业过程气体检查',
                  name: '李羽飞',
                  updateTime: '2022-08-31 16:31:44'
               },
               {
                  id: 'GTXH-0000003',
                  workType: '动火作业',
                  checkInfo: '动火作业检查',
                  result: '异常',
                  desc: '',
                  name: '李羽飞',
                  updateTime: '2022-08-31 17:05:20'
               }
            ],
            departmentList: [],
            department: '',
            workerList: [],
            casProps: {
               expandTrigger: 'hover',
               emitPath: false,
               value: 'depId',
               label: 'depName'
            },
            workPermitNo: '',
            workType: null,
            isOverSize: false,
            fileList: [],
            imgLimit: 3,
            uploadUrl: '',
            dialogVisible: false,
            dialogImageUrl: null,
            tableData: [],
            multipleSelection: [],
            dialogDetails: false,
            dialogAddRecord: false,
            dialogPermitNo: false,
            deleteDialog: false,
            deleteSetDialog: false,
            addRecord: {

               workPermitNo: '',
               checkContent: '',
               checkResult: '',
               info: '',
               source: 2,
               imagePaths: []
            },
            details: {

            },
            details: {},
            deleteId: null,
            deleteArr: [],
            workTypeList: [
@@ -256,34 +265,25 @@

         const addRef = ref<FormInstance>();
         const addRules = reactive<FormRules>({
            id: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            workPermitNo: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            checkInfo: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            result: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            desc: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            updateTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            checkContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            checkResult: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            imagePaths: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            info: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
         });

         // 页面载入时执行方法
         onMounted(() => {
            // getListByPage();
            // getAllDepartment();
            getListByPage();
         });

         // 分页获取班组管理列表
         // 分页获取作业检查列表
         const getListByPage = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
            let res = await teamManageApi().getRecordPage(data);
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { workType: state.workType, workPermitNo: state.workPermitNo } };
            let res = await workProcessApi().getCheckListPage(data);
            if (res.data.code === '200') {
               state.tableData = res.data.data.map((item) => {
                  if (!item.groupMembers || item.groupMembers == null) {
                     item.groupMembers = [];
                  } else {
                     item.groupMembers = Array.from(item.groupMembers, ({ username }) => username);
                  }
                  return item;
               });
               state.tableData = res.data.data
               state.totalSize = res.data.total;
            } else {
               ElMessage({
@@ -293,36 +293,127 @@
            }
         };

         // 获取部门列表
         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 confirmPermitNo = ()=>{
            if(permitNoInfo.value.workPermitNo == ''){
               ElMessage({
                  type: 'warning',
                  message: res.data.msg
                  message: '请选择相应的作业编码'
               });
            }else{
               state.addRecord.workPermitNo = permitNoInfo.value.workPermitNo
               state.dialogPermitNo = false
            }
         }
         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: '文件大小不能超过500k。'
               });
               state.isOverSize = true
               return false
            }else{
               const res = await workApplyApi().getUploadUrl(rawFile.name);
               state.addRecord.imagePaths.push(res.data.data.fileName)
               state.uploadUrl = res.data.data.uploadUrl;
               console.log(state.addRecord.imagePaths,state.uploadUrl,6666666666666)
            }
         };

         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) => {
            // const formData = new FormData();
            // formData.append('file', state.fileList[0].raw);
            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.imagePaths))
                           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.imagePaths))
                  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 () => {
            if (state.searchWord == '') {
            if (state.workPermitNo == ''&& state.workType == null) {
               ElMessage({
                  type: 'warning',
                  message: '请输入查询关键词'
@@ -333,17 +424,19 @@
         };

         const clearSearch = async () => {
            state.searchWord = '';
            state.workPermitNo = '';
            state.workType = null;
            getListByPage();
         };

         // 添加班组管理方法

         // 添加气体检测方法
         const addRecord = async (data: any) => {
            let res = await teamManageApi().addRecord(data);
            let res = await workProcessApi().postCheckReport(data);
            if (res.data.code === '200') {
               ElMessage({
                  type: 'success',
                  message: res.data.msg
                  message: '添加成功！'
               });
               getListByPage();
            } else {
@@ -354,24 +447,15 @@
            }
         };


         // 新增修改记录
         const confirmAddRecord = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate(async (valid, fields) => {
               if (valid) {
                  const data = {
                     groupName: state.addRecord.groupName,
                     groupInfo: state.addRecord.groupInfo,
                     depId: state.addRecord.depId,
                     groupMemberIds: state.addRecord.groupMembers
                  };
                  if (state.chosenIndex == null) {
                     await addRecord(data);
                  } else {
                     data.groupId = JSON.stringify(state.addRecord.groupId);
                     await editRecord(data);
                  }
                  await addRecord(state.addRecord);
                  state.dialogAddRecord = false;
                  getListByPage();
               } else {
                  console.log('error submit!', fields);
               }
@@ -426,7 +510,15 @@
            Delete,
            Refresh,
            Plus,
            handleChange,
            Search,
            permitNoInfo,
            showTip,
            confirmPermitNo,
            handlePreview,
            handlePictureCardPreview,
            getUploadUrl,
            upload,
            beforeRemove,
            searchRecord,
            clearSearch,
            viewRecord,
@@ -448,6 +540,10 @@
   $homeNavLengh: 8;
   .red{
      color: red;

      ::v-deep(input){
         color: red;
      }
   }
   .home-container {
      height: calc(100vh - 144px);