设备退运增加 重新发起 + 取消 两个按钮

src/views/pqs/supervise/retire/deviceQuitPopup.vue

@@ -1,52 +1,52 @@
 <template>
-  <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title'
-             style='max-width: 450px;height: 320px' top='30vh'>
-    <el-scrollbar>
-      <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
+    <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title'
+               style='max-width: 450px;height: 320px' top='30vh'>
+        <el-scrollbar>
+            <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
 
-        <el-form-item label='设备类型' prop='deviceType'>
-          <el-radio-group v-model='formData.deviceType' @change='changeType'>
-            <el-radio border label='1'>装置设备</el-radio>
-            <el-radio border label='2'>监测设备</el-radio>
-          </el-radio-group>
-        </el-form-item>
+                <el-form-item label='设备类型' prop='deviceType'>
+                    <el-radio-group v-model='formData.deviceType' @change='changeType'>
+                        <el-radio border label='1'>装置设备</el-radio>
+                        <el-radio border label='2'>监测设备</el-radio>
+                    </el-radio-group>
+                </el-form-item>
 
-        <el-form-item label='设备' prop='deviceId'>
-          <el-tree-select
-              v-model='formData.deviceId'
-              :data='data'
-              filterable
-              :default-expand-all='true'
-              style='width: 260px'
-          />
-        </el-form-item>
+                <el-form-item label='设备' prop='deviceId'>
+                    <el-tree-select
+                        v-model='formData.deviceId'
+                        :data='data'
+                        filterable
+                        :default-expand-all='true'
+                        style='width: 260px'
+                    />
+                </el-form-item>
 
-        <el-form-item label='资产编号'>
-          <el-input
-              v-model='formData.propertyNo'
-              clearable
-              placeholder='请输入资产编号'
-          />
-        </el-form-item>
+                <el-form-item label='资产编号'>
+                    <el-input
+                        v-model='formData.propertyNo'
+                        clearable
+                        placeholder='请输入资产编号'
+                    />
+                </el-form-item>
 
 
-      </el-form>
-    </el-scrollbar>
+            </el-form>
+        </el-scrollbar>
 
-    <template #footer>
+        <template #footer>
             <span class='dialog-footer'>
                 <el-button @click='dialogVisible = false'>取消</el-button>
                 <el-button type='primary' @click='submit'>确认</el-button>
             </span>
-    </template>
-  </el-dialog>
+        </template>
+    </el-dialog>
 </template>
 <script lang='ts' setup>
 import { ref, inject, reactive, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { getTerminalSelectTree } from '@/api/device-boot/Business'
-import { addRunningDevice } from '@/api/supervision-boot/device/quitRunningDev'
+import { addRunningDevice, quitRunningDeviceUpdate } from '@/api/supervision-boot/device/quitRunningDev'
 
 
 //下拉数据源
@@ -61,50 +61,76 @@ const formRef = ref()
 const dialogVisible = ref(false)
 // 注意不要和表单ref的命名冲突
 const formData = reactive({
-  id: '',
-  deviceId: '',
-  deviceType: '',
-  propertyNo: ''
+    id: '',
+    deviceId: '',
+    deviceType: '',
+    propertyNo: ''
 })
 
 //form表单校验规则
 const rules = {
-  deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
-  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
+    deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
+    deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
 }
 const resetForm = () => {
-  if (formRef.value) {
-    formRef.value.resetFields()
-  }
+    if (formRef.value) {
+        formRef.value.resetFields()
+    }
 }
 
 const open = async (text: string, tempData?: any) => {
-  title.value = text
-  //终端
-  await getTerminalSelectTree(4).then(res => {
-    deviceList.value = res.data
-  })
-  //监测点
-  getTerminalSelectTree(6).then(res => {
-    lineList.value = res.data
-  })
+    title.value = text
 
-  if (tempData) {
-    // 表单赋值
-    for (let key in formData) {
-      formData[key] = tempData[key]
+    if (tempData) {
+        if (tempData.deviceType == 1) {
+            //先加载装置数据并赋值
+            //终端
+            await getTerminalSelectTree(4).then(res => {
+                deviceList.value = res.data
+            })
+            //监测点
+            getTerminalSelectTree(6).then(res => {
+                lineList.value = res.data
+            })
+            sourceData.value = deviceList.value
+            data.value = deviceList.value
+        } else {
+            //先加载监测点数据并赋值
+            //终端
+            getTerminalSelectTree(4).then(res => {
+                deviceList.value = res.data
+            })
+            //监测点
+            await getTerminalSelectTree(6).then(res => {
+                lineList.value = res.data
+            })
+            sourceData.value = lineList.value
+            data.value = lineList.value
+        }
+        // 表单赋值
+        for (let key in formData) {
+            formData[key] = tempData[key]
+        }
+        formData.deviceType = formData.deviceType + ''
+    } else {
+        //终端
+        await getTerminalSelectTree(4).then(res => {
+            deviceList.value = res.data
+        })
+        //监测点
+        getTerminalSelectTree(6).then(res => {
+            lineList.value = res.data
+        })
+        sourceData.value = deviceList.value
+        data.value = deviceList.value
+        resetForm()
+        // 在此处恢复默认表单
+        for (let key in formData) {
+            formData[key] = ''
+        }
+        formData.deviceType = '1'
     }
-  } else {
-    resetForm()
-    // 在此处恢复默认表单
-    for (let key in formData) {
-      formData[key] = ''
-    }
-    formData.deviceType = '1'
-    sourceData.value = deviceList.value
-    data.value = deviceList.value
-  }
-  dialogVisible.value = true
+    dialogVisible.value = true
 }
 
 
@@ -112,25 +138,23 @@ const open = async (text: string, tempData?: any) => {
  * 提交用户表单数据
  */
 const submit = () => {
-  formRef.value.validate(async (valid: any) => {
-    if (valid) {
-      if (formData.id) {
-        // await updateModel(formData)
-        ElMessage.success('更新成功')
-        tableStore.index()
-        dialogVisible.value = false
-      } else {
-        await addRunningDevice(formData).then(res => {
-          formData.id = res.data
-          //查询进线数据，避免一直处于loading状态
-          ElMessage.success('保存成功')
-          tableStore.index()
-          dialogVisible.value = false
-        })
-      }
+    formRef.value.validate(async (valid: any) => {
+        if (valid) {
+            if (formData.id) {
+                await quitRunningDeviceUpdate(formData)
+                ElMessage.success('重新发起成功')
+                tableStore.index()
+                dialogVisible.value = false
+            } else {
+                await addRunningDevice(formData)
+                //查询进线数据，避免一直处于loading状态
+                ElMessage.success('申请成功')
+                tableStore.index()
+                dialogVisible.value = false
+            }
 
-    }
-  })
+        }
+    })
 }
 
 /**
@@ -138,13 +162,13 @@ const submit = () => {
  */
 
 const changeType = (event: any) => {
-  if (event == 1) {
-    sourceData.value = deviceList.value
-  } else {
-    sourceData.value = lineList.value
-  }
-  formData.deviceId = ''
-  data.value = sourceData.value
+    if (event == 1) {
+        sourceData.value = deviceList.value
+    } else {
+        sourceData.value = lineList.value
+    }
+    formData.deviceId = ''
+    data.value = sourceData.value
 }
 
 defineExpose({ open })
@@ -152,10 +176,10 @@ defineExpose({ open })
 
 <style scoped>
 .el-upload-list__item {
-  transition: none !important;
+    transition: none !important;
 }
 
 .el-select {
-  min-width: 180px;
+    min-width: 180px;
 }
 </style>