优化 APF治理效果页面

src/views/govern/mxgraph/graphList/components/popup.vue

@@ -1,24 +1,57 @@
 <template>
-    <el-dialog draggable :title="title" v-model.trim="dialogVisible" width="500px" :before-close="handleClose"
-        :close-on-click-modal="false">
+    <el-dialog
+        draggable
+        :title="title"
+        v-model.trim="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 maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入项目名称"></el-input>
+                <el-input
+                    maxlength="32"
+                    show-word-limit
+                    v-model.trim="form.name"
+                    placeholder="请输入项目名称"
+                ></el-input>
             </el-form-item>
             <el-form-item label="工程项目:" class="top" prop="projectIds">
-                <el-tree-select v-model.trim="form.projectIds" default-expand-all show-checkbox node-key="id"
-                    :props="defaultProps" multiple :data="Engineering" collapse-tags style="width: 100%" />
+                <el-tree-select
+                    v-model.trim="form.projectIds"
+                    default-expand-all
+                    show-checkbox
+                    node-key="id"
+                    :props="defaultProps"
+                    multiple
+                    :data="Engineering"
+                    collapse-tags
+                    style="width: 100%"
+                />
                 <!-- <el-cascader v-model.trim="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 maxlength="32" show-word-limit-number v-model.trim="form.orderBy" :min="0" :step="1"
-                    step-strictly style="width: 100%" />
+                <el-input
+                    maxlength="32"
+                    show-word-limit-number
+                    v-model.trim="form.orderBy"
+                    :min="0"
+                    :step="1"
+                    step-strictly
+                    style="width: 100%"
+                />
             </el-form-item>
 
             <el-form-item label="备注:" class="top">
-                <el-input maxlength="300" show-word-limit type="textarea" :rows="2" placeholder="请输入内容"
-                    v-model.trim="form.remark"></el-input>
+                <el-input
+                    maxlength="300"
+                    show-word-limit
+                    type="textarea"
+                    :rows="2"
+                    placeholder="请输入内容"
+                    v-model.trim="form.remark"
+                ></el-input>
             </el-form-item>
         </el-form>
 
@@ -58,6 +91,8 @@ const rules = {
     orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }]
 }
 const addFn = () => {
+    console.log('🚀 ~ add ~ form:', form)
+
     formRef.value.validate((valid: boolean) => {
         if (valid) {
             if (title.value == '新增项目') {
@@ -144,7 +179,7 @@ const open = ref((row: any) => {
                 })
             }
         })
-        Engineering.value = res.data
+        Engineering.value = removeData(res.data)
     })
     title.value = row.title
     dialogVisible.value = true
@@ -160,6 +195,17 @@ const open = ref((row: any) => {
         form.id = row.row.id
     }
 })
+const removeData = arr => {
+    return arr
+        .map(item => {
+            if (item.children) {
+                item.children = removeData(item.children)
+            }
+            return item.level <= 1 ? item : {}
+        })
+        .filter(item => Object.keys(item).length > 0)
+}
+
 const handleClose = () => {
     dialogVisible.value = false
 }

src/views/govern/mxgraph/graphList/index.vue

@@ -35,7 +35,8 @@
                                     @click="deleted(item)">删除</el-button>
                             </div>
                         </div>
-                        <img :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
+                        <img v-if="item.fileContent"  :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
+                        <el-empty v-else description="暂无设计" />
                     </el-card>
                 </el-col>
             </el-row>