修改组态展示

2024-10-08 20:55:17 +08:00
parent 67abe76339
commit 54ad4aaa15
4 changed files with 479 additions and 52 deletions
--- a/src/views/govern/mxgraph/graphList/components/popup.vue
+++ b/src/views/govern/mxgraph/graphList/components/popup.vue
@@ -0,0 +1,124 @@
+<template>
+
+
+    <el-dialog draggable :title="title" v-model="dialogVisible" width="500px" :before-close="handleClose"
+        :close-on-click-modal="false">
+        <el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form">
+            <el-form-item label="项目名称:" prop="name">
+                <el-input v-model.trim="form.name" placeholder="请输入项目名称"></el-input>
+            </el-form-item>
+            <el-form-item label="工程项目:" class="top" prop="projectIds">
+
+                <el-tree-select v-model="form.projectIds" default-expand-all show-checkbox node-key="id"
+                    :props="defaultProps" multiple :data="Engineering" collapse-tags style="width: 100%" />
+                <!-- <el-cascader v-model="form.projectIds" :options="Engineering" :props="defaultProps"
+                    :show-all-levels="false" collapse-tags collapse-tags-tooltip clearable  style="width: 100%;"/> -->
+
+            </el-form-item>
+            <el-form-item label="项目排序:" prop="orderBy">
+                <el-input-number v-model="form.orderBy" :min="0" :step="1" step-strictly style="width: 100%" />
+            </el-form-item>
+
+
+            <el-form-item label="备注:" class="top">
+                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model.trim="form.remark">
+                </el-input>
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <span class="dialog-footer">
+               
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="addFn">确定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+
+
+</template>
+<script setup lang='ts'>
+import { ref, reactive } from 'vue'
+import { deviceTree, add, audit } from '@/api/cs-harmonic-boot/mxgraph';
+import { ElMessage, ElMessageBox } from 'element-plus'
+const title = ref('')
+const formRef = ref()
+const Engineering = ref([])
+const dialogVisible = ref(false)
+const emit = defineEmits(['submit'])
+const defaultProps = {
+    children: 'children',
+    value: 'id',
+    label: 'name',
+    multiple: true,
+    expandTrigger: 'hover' as const,
+}
+const form: any = reactive({
+    name: "",
+    projectIds: [],
+    orderBy: '100',
+    remark: "",
+})
+const rules = {
+    name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
+    projectIds: [
+        { required: true, message: "请选择工程项目", trigger: "change" },
+    ],
+    orderBy: [{ required: true, message: "请输入排序", trigger: "blur" }],
+}
+const addFn = () => {
+    formRef.value.validate((valid: boolean) => {
+        if (valid) {
+            if (title.value == '新增项目') {
+                add(form).then((res: any) => {
+                    ElMessage.success('新增项目成功!')
+                    dialogVisible.value = false
+                   emit('submit')
+                })
+
+            } else {
+                audit(form).then((res: any) => {
+                    ElMessage.success('修改项目成功!')
+                    dialogVisible.value = false
+                    emit('submit')
+                })
+
+            }
+        }
+    })
+
+
+
+
+}
+const open = ref((row: any) => {
+    formRef.value?.resetFields()
+    deviceTree({}).then((res: any) => {
+        res.data.forEach((item: any) => {
+            item.children.forEach((child: any) => {
+                child.children = []
+            })
+        })
+        Engineering.value = res.data
+    })
+    title.value = row.title
+    dialogVisible.value = true
+    if (row.title == '新增项目') {
+        form.name = ''
+        form.projectIds = ['71e570df7e1cd3e37635c505deb19ee2']
+        form.orderBy = '100'
+        form.remark = ''
+    } else {
+        for (let key in form) {
+            form[key] = row.row[key] || ''
+        }
+        form.id = row.row.id
+    }
+})
+const handleClose = () => {
+    dialogVisible.value = false
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>