流程分类的增删改查

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

@@ -0,0 +1,228 @@
+<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-form-item label='设备类型' prop='deviceType'>
+          <el-radio-group v-model='formData.deviceType'>
+            <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-select-->
+<!--              v-model='formData.deviceId'-->
+<!--              clearable-->
+<!--              placeholder='请选择设备'-->
+<!--              style='width: 100%'-->
+<!--          >-->
+<!--            <el-option-->
+<!--                v-for='category in categoryList'-->
+<!--                :key='category.id'-->
+<!--                :label='category.name'-->
+<!--                :value='category.id'-->
+<!--            />-->
+<!--          </el-select>-->
+          <el-tree-select
+              v-model="value"
+              :data="data"
+              filterable
+              style="width: 240px"
+          />
+        </el-form-item>
+
+        <el-form-item label='资产编号'>
+          <el-input
+              v-model='formData.propertyNo'
+              clearable
+              placeholder='请输入资产编号'
+          />
+        </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>
+            </span>
+    </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 { getFormSimpleList } from '@/api/bpm-boot/form'
+import { getCategorySimpleList } from '@/api/bpm-boot/category'
+import { addModel, updateModel } from '@/api/bpm-boot/model'
+import { getTerminalSelectTree } from '@/api/device-boot/Business'
+
+
+const value = ref()
+
+const sourceData = [
+  {
+    value: '1',
+    label: 'Level one 1',
+    children: [
+      {
+        value: '1-1',
+        label: 'Level two 1-1',
+        children: [
+          {
+            value: '1-1-1',
+            label: 'Level three 1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '2',
+    label: 'Level one 2',
+    children: [
+      {
+        value: '2-1',
+        label: 'Level two 2-1',
+        children: [
+          {
+            value: '2-1-1',
+            label: 'Level three 2-1-1',
+          },
+        ],
+      },
+      {
+        value: '2-2',
+        label: 'Level two 2-2',
+        children: [
+          {
+            value: '2-2-1',
+            label: 'Level three 2-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '3',
+    label: 'Level one 3',
+    children: [
+      {
+        value: '3-1',
+        label: 'Level two 3-1',
+        children: [
+          {
+            value: '3-1-1',
+            label: 'Level three 3-1-1',
+          },
+        ],
+      },
+      {
+        value: '3-2',
+        label: 'Level two 3-2',
+        children: [
+          {
+            value: '3-2-1',
+            label: 'Level three 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+]
+const data = ref(sourceData)
+const filterMethod = (value) => {
+  data.value = [...sourceData].filter((item) => item.label.includes(value))
+}
+const filterNodeMethod = (value, data) => data.label.includes(value)
+
+const title = ref('')
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+
+const dialogVisible = ref(false)
+// 注意不要和表单ref的命名冲突
+const formData = reactive({
+  id: '',
+  deviceId: '',
+  deviceType: '',
+  propertyNo: '',
+})
+
+//form表单校验规则
+const rules = {
+  deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
+}
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+const open = async (text: string, data?: any) => {
+  title.value = text
+  //终端
+  await getTerminalSelectTree(4)
+  //监测点
+  await getTerminalSelectTree(6)
+
+  if (data) {
+    // 表单赋值
+    for (let key in formData) {
+      formData[key] = data[key]
+    }
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in formData) {
+      formData[key] = ''
+    }
+    formData.deviceType = '1'
+  }
+  dialogVisible.value = true
+}
+
+
+/**
+ * 提交用户表单数据
+ */
+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 addModel(formData).then(res => {
+          formData.id = res.data
+          //查询进线数据，避免一直处于loading状态
+          ElMessage.success('保存成功')
+          tableStore.index()
+          dialogVisible.value = false
+        })
+      }
+
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+  transition: none !important;
+}
+
+.el-select {
+  min-width: 180px;
+}
+</style>