添加修改页面

Admin

2022-08-02 d592747d5eaa2cfbe698f8ac61222eb3aa75d1fc

 src/views/IntelligentXjSys/inspectionTaskManagement/index.vue

@@ -399,7 +399,7 @@
   </div>
</template>

<script lang="ts" setup>
<script lang="ts">
   import { toRefs, reactive, ref } from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
@@ -421,72 +421,60 @@
   interface type {

   }
   export default {
      name: 'workingHoursSet',
      components: {},
      setup() {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const {userInfos} = storeToRefs(userInfo);

         // 顶部筛选搜索
         const searchType = ref('任务名称')
         const typeOptions = ref([
            {
               name: '日常检查',
               value: '日常检查'
            },
            {
               name: '周期检查',
               value: '周期检查'
            }
         ])
         const createrOptions = ref([
            {
               name: '张三',
               value: '张三'
            },
            {
               name: '李四',
               value: '李四'
            }
         ])
         const inspectorOptions = ref([
            {
               name: '李四',
               value: '李四'
            },
            {
               name: '张三',
               value: '张三'
            }
         ])
         const searchUnit = ref('小时')
         const changeSearch =()=>{
            searchContent.value=''
         }
         const searchContent = ref()


         const currentPage = ref(1)
         const pageSize = ref(10)
         const chosenIndex = ref(-1)
         const chosenShiftIndex = ref(-1)
         const chosenInspectionIndex = ref(-1)
         const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`)
         }
         const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`)
         }

         // 时间格式化
         const timeForm = {
            hour12: false,
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
         }
         const tableData = reactive(
               [
         const state = reactive({
            searchType: '任务名称',
            typeOptions: [
               {
                  name: '日常检查',
                  value: '日常检查'
               },
               {
                  name: '周期检查',
                  value: '周期检查'
               }
            ],
            createrOptions: [
               {
                  name: '张三',
                  value: '张三'
               },
               {
                  name: '李四',
                  value: '李四'
               }
            ],
            inspectorOptions: [
               {
                  name: '李四',
                  value: '李四'
               },
               {
                  name: '张三',
                  value: '张三'
               }
            ],
            searchUnit: '小时',
            searchContent: '',
            currentPage: 1,
            pageSize: 10,
            chosenIndex: null,
            chosenShiftIndex: null,
            chosenInspectionIndex: null,
            dialogDetails: false,
            dialogAddRecord: false,
            deleteDialog: false,
            deleteShiftDialog: false,
            deleteInspectionDialog: false,
            dialogAddShift: false,
            dialogAddInspection: false,
            tableData: [
               {
                  name: '甲醛装置（）列现场岗位巡检',
                  type: '周期检查',
@@ -497,12 +485,12 @@
                  startTime: '2022-07-02 13:01:37',
                  validTime: '30分钟',
                  createTime: '2022-07-02 12:03:47',
                  chainLength: '20',
                  chainLength: 20,
                  status: '开启',
                  shiftSteps:[
                  shiftSteps: [
                     {
                        name: '风机系统',
                        inspectorData:[
                        inspectorData: [
                           {
                              sort: 1,
                              name: '73011',
@@ -532,7 +520,7 @@
                     },
                     {
                        name: 'A场所',
                        inspectorData:[
                        inspectorData: [
                           {
                              sort: 1,
                              name: '73021',
@@ -571,122 +559,153 @@
                  startTime: '2022-07-02 12:45:37',
                  validTime: '30分钟',
                  createTime: '2022-07-02 08:15:41',
                  chainLength: '15',
                  chainLength: 15,
                  status: '开启'
               }
            ]
         )
            ],
            addRecord: {
               name: '',
               type: '',
               creater: '',
               inspector: '',
               frequency: 1,
               unit: '小时',
               startTime: '',
               validTime: '',
               createTime: '',
               chainLength: 0,
               status: '开启',
               shiftSteps: []
            },
            addShift: {},
            addInspection: {},
            details: {}
         })

         // 顶部筛选搜索
         const changeSearch = () => {
            state.searchContent = ''
         }

         const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`)
         }
         const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`)
         }

         // 时间格式化
         const timeForm = {
            hour12: false,
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
         }
         const handleChange = (value) => {
            addRecord.value.content = []
            state.addRecord.content = []
            console.log(JSON.parse(JSON.stringify(value)))
         }
         const addRef = ref<FormInstance>()
         const addShiftRef = ref<FormInstance>()
         const addInspectionRef = ref<FormInstance>()

   // 表单校验
         // 表单校验
         const addRules = reactive<FormRules>({
            name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            inspector:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            frequency:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            unit:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            startTime:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            validTime:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            type: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            inspector: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
         })
         const addShiftRules = reactive<FormRules>({
            name:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            name: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
         })
         const addInspectionRules = reactive<FormRules>({
            name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            norm:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            sort:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            norm: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            sort: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
         })
         const dialogDetails = ref(false)
         const dialogAddRecord = ref(false)
         const deleteDialog = ref(false)
         const deleteShiftDialog = ref(false)
         const deleteInspectionDialog = ref(false)
         const dialogAddShift = ref(false)
         const dialogAddInspection = ref(false)
         const addRecord = ref({})
         const addShift = ref({})
         const addInspection = ref({})
         const details = ref({})

   // 查看记录
         const viewRecord = (row) =>{
            details.value = JSON.parse(JSON.stringify(row))
            dialogDetails.value = true
         // 查看记录
         const viewRecord = (row) => {
            state.details = JSON.parse(JSON.stringify(row))
            state.dialogDetails = true
         }

         // 删除记录
         const deleteRecord = (index) =>{
            chosenIndex.value = index
            deleteDialog.value = true
         const deleteRecord = (index) => {
            state.chosenIndex = index
            state.deleteDialog = true
         }
         const conFirmDelete = ()=> {
            tableData.splice(chosenIndex.value,1)
            deleteDialog.value = false
         const conFirmDelete = () => {
            state.tableData.splice(state.chosenIndex, 1)
            state.deleteDialog = false
         }

         // 修改添加记录
         const editRecord =(index, row)=>{
            chosenIndex.value = index
            dialogAddRecord.value = true
            addRecord.value = JSON.parse(JSON.stringify(row))
         const editRecord = (index, row) => {
            state.chosenIndex = index
            state.dialogAddRecord = true
            state.addRecord = JSON.parse(JSON.stringify(row))
         }
         const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
         const confirmAddRecord = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
               if (valid) {
                  if(chosenIndex.value == -1){
                     if(!addRecord.value.shiftSteps || addRecord.value.shiftSteps.length == 0){
                  if (state.chosenIndex == null) {
                     if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) {
                        ElMessage({
                           message: '请先设置巡检链后再提交',
                           type: 'warning',
                        })
                        return
                     // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                     }else if(addRecord.value.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length==0)){
                        for(let i =0;i<addRecord.value.shiftSteps.length;i++){
                           if(!addRecord.value.shiftSteps[i].inspectorData||addRecord.value.shiftSteps[i].inspectorData.length==0){
                        // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                     } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) {
                        for (let i = 0; i < state.addRecord.shiftSteps.length; i++) {
                           if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) {
                              ElMessage({
                                 message: '请为'+ addRecord.value.shiftSteps[i].name +'设置巡检点',
                                 message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点',
                                 type: 'warning',
                              })
                           }
                        }
                        return
                     }else{
                        addRecord.value.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                        addRecord.value.chainLength = addRecord.value.shiftSteps.length
                        addRecord.value.status = '开启'
                        tableData.unshift(addRecord.value)
                     } else {
                        state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-')
                        state.addRecord.chainLength = state.addRecord.shiftSteps.length
                        console.log('11111111111111')
                        state.addRecord.status = '开启'
                        console.log('222222222222222')
                        state.tableData.unshift(state.addRecord)
                     }
                  }else{
                     if(addRecord.value.shiftSteps.length == 0){
                  } else {
                     if (state.addRecord.shiftSteps.length == 0) {
                        ElMessage({
                           message: '请先设置巡检链后再提交',
                           type: 'warning',
                        })
                        return
                     // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                     }else if(addRecord.value.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length==0)){
                        for(let i =0;i<addRecord.value.shiftSteps.length;i++){
                           if(!addRecord.value.shiftSteps[i].inspectorData||addRecord.value.shiftSteps[i].inspectorData.length==0){
                        // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                     } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) {
                        for (let i = 0; i < state.addRecord.shiftSteps.length; i++) {
                           if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) {
                              ElMessage({
                                 message: '请为'+ addRecord.value.shiftSteps[i].name +'设置巡检点',
                                 message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点',
                                 type: 'warning',
                              })
                           }
                        }
                        return
                     }else{
                        tableData[chosenIndex.value] = addRecord.value
                     } else {
                        state.tableData[state.chosenIndex] = state.addRecord
                     }
                  }
                  dialogAddRecord.value =false
                  state.dialogAddRecord = false
               } else {
                  console.log('error submit!', fields)
               }
@@ -695,64 +714,64 @@
         }

         // 添加弹窗打开前预操作
         const openAdd =()=>{
            addRecord.value.unit = '小时'
         const openAdd = () => {
            state.addRecord.unit = '小时'
         }

         // 弹窗关闭后判断数据初始化
         const closeAdd =()=>{
            addRecord.value={}
            chosenIndex.value = -1
            addShift.value={}
            chosenShiftIndex.value = -1
         const closeAdd = () => {
            state.addRecord = {}
            state.chosenIndex = null
            state.addShift = {}
            state.chosenShiftIndex = null
         }
         const indexClear = ()=>{
            chosenIndex.value = -1
         const indexClear = () => {
            state.chosenIndex = null
         }
         const indexShiftClear = ()=>{
            chosenShiftIndex.value = -1
         const indexShiftClear = () => {
            state.chosenShiftIndex = null
         }
         const indexInspectionClear = ()=>{
            chosenInspectionIndex.value = -1
            chosenShiftIndex.value = -1
         const indexInspectionClear = () => {
            state.chosenInspectionIndex = null
            state.chosenShiftIndex = null
         }

         // 排序
         function compare(key){
            return function(value1,value2){
               var val1=value1[key];
               var val2=value2[key];
               return val1-val2;
         function compare(key) {
            return function (value1, value2) {
               var val1 = value1[key];
               var val2 = value2[key];
               return val1 - val2;
            }
         }

         // 添加删除巡检设施区域
         const addFlow = (index) => {
            dialogAddShift.value = true
            chosenShiftIndex.value = index
            state.dialogAddShift = true
            state.chosenShiftIndex = index
         }

         // 删除巡检区域
         const deleteFlow = (index) => {
            deleteShiftDialog.value = true
            chosenShiftIndex.value = index
            state.deleteShiftDialog = true
            state.chosenShiftIndex = index
         }
         const conFirmShiftDelete = () => {
            addRecord.value.shiftSteps.splice( chosenShiftIndex.value,1)
            deleteShiftDialog.value = false
            state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1)
            state.deleteShiftDialog = false
         }

         const confirmAddShift = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
               if (valid) {
                  if(addRecord.value.shiftSteps){
                     addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value)
                  }else{
                     addRecord.value.shiftSteps = []
                     addRecord.value.shiftSteps.unshift(addShift.value)
                  if (state.addRecord.shiftSteps) {
                     state.addRecord.shiftSteps.splice(state.chosenShiftIndex + 1, 0, state.addShift)
                  } else {
                     state.addRecord.shiftSteps = []
                     state.addRecord.shiftSteps.unshift(state.addShift)
                  }
                  dialogAddShift.value = false
                  state.dialogAddShift = false
               } else {
                  console.log('error submit!', fields)
               }
@@ -760,63 +779,107 @@
         }


         const addSysInspection =(index)=>{
            dialogAddInspection.value = true
            chosenShiftIndex.value = index
         const addSysInspection = (index) => {
            state.dialogAddInspection = true
            state.chosenShiftIndex = index
         }
         const confirmAddInspection = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
               if (valid) {
                  if(addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData){
                     if(chosenInspectionIndex.value == -1){
                        addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.unshift(addInspection.value)
                        addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort'))
                     }else{
                        addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData[chosenInspectionIndex.value] = addInspection.value
                        addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort'))
                  if (state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData) {
                     if (state.chosenInspectionIndex == null) {
                        state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection)
                        state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                     } else {
                        state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData[state.chosenInspectionIndex] = state.addInspection
                        state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                     }
                  }else{
                     addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData = []
                     addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.unshift(addInspection.value)
                     addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort'))
                  } else {
                     state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData = []
                     state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection)
                     state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                  }
                  dialogAddInspection.value = false
                  state.dialogAddInspection = false
               } else {
                  console.log('error submit!', fields)
               }
            })
         }
         const deleteInspection = (i,index) =>{
            chosenShiftIndex.value = i
            chosenInspectionIndex.value = index
            deleteInspectionDialog.value = true
         const deleteInspection = (i, index) => {
            state.chosenShiftIndex = i
            state.chosenInspectionIndex = index
            state.deleteInspectionDialog = true
         }
         const editInspection =(i,index, row)=>{
            chosenShiftIndex.value = i
            chosenInspectionIndex.value = index
            dialogAddInspection.value = true
            addInspection.value = JSON.parse(JSON.stringify(row))
         const editInspection = (i, index, row) => {
            state.chosenShiftIndex = i
            state.chosenInspectionIndex = index
            state.dialogAddInspection = true
            state.addInspection = JSON.parse(JSON.stringify(row))
         }
         const conFirmInspectionDelete=()=>{
            addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.splice( chosenInspectionIndex.value,1)
            deleteInspectionDialog.value = false
         const conFirmInspectionDelete = () => {
            state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.splice(state.chosenInspectionIndex, 1)
            state.deleteInspectionDialog = false
         }

         const closeAddShift =()=>{
            addShift.value={}
            chosenShiftIndex.value = -1
         const closeAddShift = () => {
            state.addShift = {}
            state.chosenShiftIndex = null
         }
         const closeAddInspection =()=>{
            addInspection.value={}
            chosenShiftIndex.value = -1
         const closeAddInspection = () => {
            state.addInspection = {}
            state.chosenShiftIndex = null
         }

         // 折线图
         const renderMenu = async (value: string) => {
            Session.set('projectId',value)
            Session.set('projectId', value)
            userInfos.value.projectId = value
            await initBackEndControlRoutes();
         };

         return {
            addRef,
            addShiftRef,
            addInspectionRef,
            addRules,
            addShiftRules,
            addInspectionRules,
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            changeSearch,
            handleSizeChange,
            handleCurrentChange,
            handleChange,
            viewRecord,
            deleteRecord,
            conFirmDelete,
            openAdd,
            editRecord,
            confirmAddRecord,
            closeAdd,
            addFlow,
            conFirmShiftDelete,
            confirmAddShift,
            closeAddShift,
            deleteInspection,
            addSysInspection,
            confirmAddInspection,
            conFirmInspectionDelete,
            closeAddInspection,
            editInspection,
            deleteFlow,
            indexClear,
            indexShiftClear,
            indexInspectionClear,
            renderMenu,
            ...toRefs(state)
         }
      }
   }
</script>

<style scoped lang="scss">