gaosp
2024-01-21 98b6db4387e936118169daae76b31abdc68c9599
src/container/machineList/Manage-add-update.vue
@@ -1,60 +1,77 @@
<template>
   <div>
      <el-dialog :title="!dataForm.id ? '新建' : '编辑'" :close-on-click-modal="false" width="80%" :visible.sync="addVisible" @close="cancel">
      <el-dialog :title="!dataForm.id ? '新建' : '编辑'" :close-on-click-modal="false" width="80%" :visible.sync="addVisible"
         @close="cancel">
         <!-- 添加内容-->
         <el-form :model="dataForm" label-width="100px" ref="dataForm">
         <el-form :model="dataForm" :rules="rules" label-width="100px" ref="dataForm">
            <el-row :gutter="20">
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <!-- <el-form-item label="机床名称" prop="machineName">
                     <el-input v-model="dataForm.machineName" placeholder="机床名称" clearable></el-input>
                  </el-form-item> -->
                  <!-- <el-form-item label="机床" prop="id">
                     <el-select  class="value" v-model="dataForm.id" placeholder="请选择">
                        <el-option v-for="item in accountList" :key="item.machineId" :label="item.uuid"
                           :value="item.machineId">
                        </el-option>
                     </el-select>
                  </el-form-item> -->
                  <el-form-item label="IP" prop="ip">
                     <el-input v-model="dataForm.ip" placeholder="IP" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="dnc名称" prop="dncName">
                     <el-input v-model="dataForm.dncName" placeholder="dncName" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="端口" prop="port">
                     <el-input v-model="dataForm.port" placeholder="端口" clearable></el-input>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="ip" prop="ip">
                     <el-input v-model="dataForm.ip" placeholder="ip" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="端口" prop="port">
                     <el-input v-model.number="dataForm.port" placeholder="端口" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="程序传输模式" prop="transMode">
                     <el-select class="value" v-model="dataForm.transMode" placeholder="请选择" clearable>
                        <el-option v-for="item in transModeList" :key="item.value" :label="item.label" :value="item.value">
                        <el-option v-for="item in transModeList" :key="item.value" :label="item.label"
                           :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="车间" prop="workshopId">
                     <el-select class="value" v-model="dataForm.workshopId" @change="changewsl" placeholder="请选择" clearable>
                     <el-select class="value" v-model="dataForm.workshopId" @change="changewsl" placeholder="请选择"
                        clearable>
                        <el-option v-for="item in workshopList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="工段" prop="sectionId">
                     <el-select class="value" v-model="dataForm.sectionId" placeholder="请选择" clearable>
                        <el-option v-for="item in sectionIds" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="协议" prop="protocolId">
                     <el-select class="value" v-model="dataForm.protocolId" placeholder="请选择" clearable>
                        <el-option v-for="item in protocolList" :key="item.id" :label="item.name" :value="item.id">
                        <el-option v-for="item in protocolList" :key="item.id" :label="item.name + item.version"
                           :value="item.id">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="是否采集" prop="isCollect">
                     <el-radio-group class="value" v-model="dataForm.isCollect" clearable>
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                  <el-form-item label="班制" prop="shiftType">
                     <el-select class="value" v-model="dataForm.shiftType" placeholder="请选择" clearable>
                        <el-option v-for="item in shiftTypes" :key="item.value" :label="item.label"
@@ -63,7 +80,18 @@
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
               </el-col>
               <!-- <el-form-item label="机床名称" prop="machineName">
                     <el-input v-model="dataForm.machineName" placeholder="机床名称" clearable></el-input>
                  </el-form-item> -->
               <!-- <el-form-item label="机床" prop="id">
                     <el-select  class="value" v-model="dataForm.id" placeholder="请选择">
                        <el-option v-for="item in accountList" :key="item.machineId" :label="item.uuid"
                           :value="item.machineId">
                        </el-option>
                     </el-select>
                  </el-form-item> -->
            </el-row>
         </el-form>
@@ -79,26 +107,40 @@
<script>
import { getWsl, getPcl, getRequest } from '@/api/Api'
export default {
   props: ['addVisible', 'row'],
   props: ['addVisible', 'row', 'workshopList', 'protocolList'],
   data() {
      var validatePass = (rule, value, callback) => {
         let reg = /((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))/g
         if (!reg.test(value)) {
            callback(new Error('请输入正确的ip地址'));
         } else {
            if (reg.test(value)) {
               this.$refs.dataForm.validateField('ip');
            }
            callback();
         }
      };
      return {
         rules: {
            ip: [
               { validator: validatePass, trigger: 'blur' }
            ],
         },
         shiftTypes: [
            {
               label: '1班',
               value: '1'
               value: 1
            },
            {
               label: '2班',
               value: '2'
               value: 2
            },
            {
               label: '3班',
               value: '3'
               value: 3
            },
         ],
         protocolList: [],
         sectionIds: [],
         workshopList: [],
         accountList: [],
         dataForm: {
            id: '',
@@ -129,83 +171,55 @@
      }
   },
   watch: {
      // machineid: {
      //    handler(val) {
      //       if (val) {
      //          setTimeout(() => {
      //             getRequest('machineQuery', { size: 10, machineId: val }).then(res => {
      //                this.changewsl(res.data.records[0].workshopId)
      //                this.$nextTick(() => {
      //                   try {
      //                      Object.keys(this.addInfo).forEach(item => {
      //                         this.addInfo[item] = res.data.records[0][item]
      //                      })
      //                      // this.addInfo.id = res.data.records[0].id
      //                   } catch (error) {
      //                      console.error(error)
      //                   }
      //                })
      //             })
      //          }, 1000)
      //       }
      //    },
      //    immediate: true
      // }
      row: {
         handler (val)  {
            Object.keys(this.dataForm).forEach(item => {
               this.dataForm[item] = val[item]
         handler(val) {
            this.changewsl(val.workshopId, () => {
               this.$nextTick(() => {
                  Object.keys(this.dataForm).forEach(item => {
                     this.dataForm[item] = val[item]
                  })
               })
            })
         },
         immediate: true,
         deep: true,
      }
   },
   created() {
      getPcl().then(res => {
         this.protocolList = res.data
      })
      getWsl().then(res => {
         this.workshopList = res.data
      })
      getRequest('accountQuery', {}).then(res => {
         console.log(res)
         try {
            this.accountList = res.data
         } catch (error) {
            this.accountList = []
         }
      })
   },
   methods: {
      changewsl(val) {
            console.log(val, 'changewsl')
            try {
                this.sectionIds = this.workshopList.find(item => item.id === val).sections
            } catch (error) {
                this.sectionIds = []
            }
        },
      changewsl(val, cb) {
         console.log(val, 'changewsl')
         try {
            this.sectionIds = this.workshopList.find(item => item.id === val).sections
         } catch (error) {
            this.sectionIds = []
         }
         cb && cb()
      },
      /* 查询使用部门*/
      cancel() {
         this.$emit('close')
      },
      /* 提交*/
      dataFormSubmit() {
         getRequest('machineUpdate',this.dataForm).then(res  => {
            this.$message({
               message: '修改成功',
               type: 'success',
               duration: 1500,
               onClose: () => {
                  this.$emit('confirm')
                  this.visible = false
               }
            })
         })
         this.$refs.dataForm.validate((valid) => {
            if (valid) {
               getRequest('machineUpdate', this.dataForm).then(res => {
                  this.$message({
                     message: '修改成功',
                     type: 'success',
                     duration: 1500,
                     onClose: () => {
                        this.$emit('confirm')
                        this.visible = false
                     }
                  })
               })
            } else {
               return false;
            }
         });
      }
   }
}