新增终端状态管理

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

@@ -1,169 +1,161 @@
 <template>
-    <el-dialog
-        draggable
-        class="cn-operate-dialog"
-        v-model="dialogVisible"
-        :title="title"
-        width="450px"
-    >
-        <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
-                <!-- <el-form-item label="设备类型" prop="deviceType">
-                    <el-radio-group v-model="form.deviceType"  :disabled="title == '监测点退运'" @change="changeType">
-                        <el-radio border label="1">监测装置</el-radio>
-                        <el-radio border label="2">监测点</el-radio>
-                    </el-radio-group>
-                </el-form-item> -->
+  <el-dialog
+      draggable
+      class='cn-operate-dialog'
+      v-model='dialogVisible'
+      :title='title'
+      width='450px'
+      top='20vh'
+  >
+    <el-scrollbar>
+      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+        <el-form-item label='终端' prop='deviceId'>
+          <el-tree-select
+              v-model='form.deviceId'
+              :data='data'
+              filterable
+              :default-expand-all='true'
+              style='width: 100%'
+              @change='changeDevStatus'
+              clearable
+          />
+        </el-form-item>
 
-                <el-form-item label="设备" prop="deviceId">
-                    <el-tree-select
-                        v-model="form.deviceId"
-                        :data="data"
-                        filterable
-                        :default-expand-all="true"
-                        style="width: 100%"
-                        clearable
-                    />
-                </el-form-item>
+        <el-form-item label='状态选择:' prop='devStatus'>
+          <el-select v-model='form.devStatus' placeholder='请选择终端状态' clearable class='select'>
+            <el-option
+                v-for='item in devStatusList'
+                :key='item.value'
+                :label='item.name'
+                :value='item.value'
+            ></el-option>
+          </el-select>
+        </el-form-item>
 
-                <el-form-item label="退役原因" prop="propertyNo">
-                    <!-- <el-input
-                        v-model='form.propertyNo'
-                        clearable
-                        placeholder='请输入退役原因'
-                    /> -->
-                    <el-input
-                        type="textarea"
-                        clearable
-                        :autosize="{ minRows: 2, maxRows: 4 }"
-                        placeholder="请输入退役原因"
-                        v-model="form.propertyNo"
-                    ></el-input>
-                </el-form-item>
-            </el-form>
-        </el-scrollbar>
+        <el-form-item label='变更原因' prop='propertyNo'>
+          <el-input
+              type='textarea'
+              clearable
+              :autosize='{ minRows: 2, maxRows: 4 }'
+              placeholder='请输入变更原因'
+              v-model='form.propertyNo'
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
 
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
+    <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'
+<script lang='ts' setup>
+import { ref, inject } from 'vue'
 import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { getTerminalSelectTree } from '@/api/device-boot/Business'
 import { addRunningDevice, quitRunningDeviceUpdate } from '@/api/supervision-boot/device/quitRunningDev'
+import { getDeviceDetailData } from '@/api/device-boot/line'
 
+
+const devStatusList = ref([
+  { 'name': '运行', 'value': '0' },
+  { 'name': '检修', 'value': '1' },
+  { 'name': '退运', 'value': '4' }
+])
 //下拉数据源
 const sourceData = ref()
 const deviceList = ref()
-const lineList = ref()
 const data = ref()
 const title = ref('')
 const tableStore = inject('tableStore') as TableStore
 const formRef = ref()
 
 const dialogVisible = ref(false)
+
 // 注意不要和表单ref的命名冲突
 const form = ref({
-    id: '',
-    deviceId: '',
-    deviceType: '1',
-    propertyNo: ''
+  id: '',
+  deviceId: '',
+  deviceType: '1',
+  devOriginalStatus: '0',
+  devStatus: '0',
+  propertyNo: ''
 })
 
 //form表单校验规则
 const rules = {
-    deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
-    deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
-    propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }]
+  deviceId: [{ required: true, message: '终端不能为空', trigger: 'change' }],
+  devStatus: [{ required: true, message: '状态不能为空', trigger: 'change' }],
+  propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }]
 }
 const resetForm = () => {
-    if (formRef.value) {
-        formRef.value.resetFields()
-    }
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
 }
 
 const open = async (text: string, tempData?: any) => {
-    title.value = text
-    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 form.value) {
-            form.value[key] = tempData[key]
-        }
-        form.value.deviceType = form.value.deviceType + ''
-    } else {
-        //终端
-        await getTerminalSelectTree(4).then(res => {
-            deviceList.value = res.data
-        })
-        //监测点
-        await getTerminalSelectTree(6).then(res => {
-            lineList.value = res.data
-        })
-        sourceData.value = deviceList.value
-        data.value = deviceList.value
-        resetForm()
-        // 在此处恢复默认表单
-        for (let key in form.value) {
-            form.value[key] = ''
-        }
-        form.value.deviceType = '1'
+  title.value = text
+  //终端
+  await getTerminalSelectTree(4).then(res => {
+    deviceList.value = res.data
+  })
+  sourceData.value = deviceList.value
+  data.value = deviceList.value
+  if (tempData) {
+    // 表单赋值
+    for (let key in form.value) {
+      form.value[key] = tempData[key]
     }
-    form.value.deviceType = text == '监测点退运' ? '2' : '1'
-    changeType(form.value.deviceType)
-    dialogVisible.value = true
+    form.value.deviceType = form.value.deviceType + ''
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in form.value) {
+      form.value[key] = ''
+    }
+    form.value.deviceType = '1'
+  }
+  form.value.deviceType = '1'
+  form.value.devStatus = '0'
+  changeType(form.value.deviceType)
+  dialogVisible.value = true
 }
 
 /**
  * 提交用户表单数据
  */
 const submit = () => {
-    formRef.value.validate(async (valid: any) => {
-        if (valid) {
-            if (form.value.id) {
-                await quitRunningDeviceUpdate(form.value)
-                ElMessage.success('重新发起成功')
-                tableStore.index()
-                dialogVisible.value = false
-            } else {
-                await addRunningDevice(form.value)
-                //查询进线数据，避免一直处于loading状态
-                ElMessage.success('申请成功')
-                tableStore.index()
-                dialogVisible.value = false
-            }
+  formRef.value.validate(async (valid: any) => {
+    if (valid) {
+      if (form.value.devOriginalStatus == form.value.devStatus) {
+        if (form.value.devOriginalStatus == '0') {
+          ElMessage.warning('终端当前状态就是运行，无需变更!')
+        } else if (form.value.devOriginalStatus == '1') {
+          ElMessage.warning('终端当前状态就是检修，无需变更!')
+        } else {
+          ElMessage.warning('终端当前状态就是退运，无需变更!')
         }
-    })
+      } else {
+        if (form.value.id) {
+          await quitRunningDeviceUpdate(form.value)
+          ElMessage.success('重新发起成功')
+          tableStore.index()
+          dialogVisible.value = false
+        } else {
+          await addRunningDevice(form.value)
+          //查询进线数据，避免一直处于loading状态
+          ElMessage.success('申请成功')
+          tableStore.index()
+          dialogVisible.value = false
+        }
+      }
+    }
+  })
 }
 
 /**
@@ -171,13 +163,16 @@ const submit = () => {
  */
 
 const changeType = (event: any) => {
-    if (event == 1) {
-        sourceData.value = deviceList.value
-    } else {
-        sourceData.value = lineList.value
-    }
-    form.value.deviceId = ''
-    data.value = sourceData.value
+  sourceData.value = deviceList.value
+  form.value.deviceId = ''
+  data.value = sourceData.value
+}
+
+const changeDevStatus = async (event: any) => {
+  await getDeviceDetailData(event).then(res => {
+    //给当前设备赋值初始运行状态
+    form.value.devOriginalStatus = res.data.runFlag
+  })
 }
 
 defineExpose({ open })
@@ -185,10 +180,10 @@ defineExpose({ open })
 
 <style scoped>
 .el-upload-list__item {
-    transition: none !important;
+  transition: none !important;
 }
 
 .el-select {
-    min-width: 180px;
+  min-width: 180px;
 }
 </style>