目录调整,暂存

src/views/chartRelevance_manage/relevance/components/modifyClassifyDialog.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="Dialog-box">
+        <el-dialog
+        :visible.sync="isOpenDialog"
+        :close-on-click-modal="false"
+        :modal-append-to-body='false'
+        @close="cancelHandle"
+        custom-class="dialog"
+        center
+        width="560px"
+        v-dialogDrag>
+            <div slot="title" style="display:flex;alignItems:center;">
+                <img :src="title=='添加'?$icons.add:title=='编辑'?$icons.edit:''" style="color:#fff;width:16px;height:16px;marginRight:5px;">
+                <span style="fontSize:16px;">{{title==='添加' ? $t('Table.add_btn') : $t('Table.edit_btn')}}</span>
+            </div>
+            <div class="dialog-main">
+                <el-form
+                ref="diaForm"
+                label-position="left"
+                hide-required-asterisk
+                label-width="120px"
+                :model="formData"
+                :rules="formRules">
+                    <el-form-item :label="$t('OnlineExcelPage.parent_directory_lable')" v-if="formData.level>0">
+                        <el-tooltip class="item" effect="dark" :content="getParentName" placement="top">
+                            <span class="parentStr">{{getParentName}}</span>
+                        </el-tooltip>
+                    </el-form-item>
+                    <el-form-item :label="$t('EtaBasePage.menu_name')" prop="levelVal">
+                        <el-input
+                        v-model="formData.levelVal"
+                        style="width: 80%"
+                        :placeholder="$t('Dialog.require_vaild')"></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="dia-bot">
+                <el-button type="primary" style="margin-right:20px" @click="saveHandle"><!-- 保存 -->{{$t('Dialog.confirm_save_btn')}}</el-button>
+                <el-button type="primary" plain @click="cancelHandle"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+	props: {
+		isOpenDialog: {
+			type: Boolean,
+		},
+		//标题
+		title: {
+			type: String,
+			default: '添加'
+		},
+		formData: {
+			type: Object,//{parentArr父级数据}
+		}
+	},
+	computed:{
+		getParentName(){
+			const arr=this.formData.parentArr||[]
+			let strArr=arr.reverse().map(item=>{
+				return item.classifyName
+			})
+			
+			return strArr.join('/')
+		}
+	},
+	data () {
+		return {
+			formRules: {
+				levelVal:[
+					{ required: true, message: this.$t('EtaBasePage.input_menu_msg'), trigger: 'blur' },
+				],
+				level_menu:[
+					{ required: true, message: this.$t('Edb.Valids.menu_msg'), trigger: 'blur' },
+				],
+				frequency:[
+					{ required: true, message: this.$t('Edb.Valids.fre_msg'), trigger: 'blur' },
+				],
+				unit:[
+					{ required: true, message: this.$t('Edb.Valids.unit_msg'), trigger: ['blur','change'] },
+				],
+			},
+			options:  [],
+			unitArr,
+			levelProps: {
+				label: 'ClassifyName',
+				value: 'ClassifyId',
+				children: 'Children',
+				checkStrictly: true
+			},
+			frequencyArr,
+
+		};
+	},
+	methods: {
+		async saveHandle() {
+			await this.$refs.diaForm.validate();
+		},
+		/* 成功回调 */
+		callbackHandle(type) {
+			this.$refs.diaForm.resetFields();
+			this.$emit('sucessCallback',type)
+		},
+		/* 取消 */
+		cancelHandle() {
+			this.$refs.diaForm.resetFields();
+			this.$emit('closeDia')
+		},
+	},
+	created() {},
+	mounted() {},
+}
+</script>
+<style lang='scss'>
+.Dialog-box {
+	.parentStr{
+		display: block;
+		width: 304px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+	.dialog-main {
+		padding-left: 50px;
+	}
+	.el-cascader .el-input {
+		width: 100%;
+	}
+	.dia-bot {
+		margin: 52px 0 30px;
+		display: flex;
+		justify-content: center;
+
+	}
+}
+</style>

src/views/chartRelevance_manage/relevance/list.vue

@@ -70,6 +70,8 @@
             :expand-on-click-node="false"
             check-strictly
             empty-text="暂无分类"
+            lazy
+            :load="getLazyTreeData"
             @node-expand="handleNodeExpand"
             @node-collapse="handleNodeCollapse"
             @current-change="nodeChange"
@@ -107,6 +109,14 @@
                   alt=""
                   style="width: 14px; height: 14px; margin-right: 8px"
                 />
+                <!-- 添加子项 -->
+                <img
+                    src="~@/assets/img/set_m/add.png"
+                    alt=""
+                    style="width: 14px; height: 14px; margin-right: 8px"
+                    @click.stop="addNode(node,data)"
+                    v-if="data.Button.AddButton&&node.level<6"
+                />
                 <img
                   src="~@/assets/img/set_m/edit.png"
                   alt=""
@@ -269,7 +279,7 @@
           :total="chart_total" 
           :list="chartList" 
           @loadMoreHandle="loadMoreHandle"
-          @detailShowHandle="detailShowHandle"
+          @detailShowHandle="handleShowChartDetail"
           @addMychartHandle="addMychartHandle"
           ref="chartListWrap"
         />
@@ -277,11 +287,16 @@
     </div>
 
     <!-- 分类弹窗 -->
-    <classify-dia
+    <!-- <classify-dia
       :isOpenDialog.sync="classifyDia"
       :title="dialog_title"
       :form="classifyForm"
       @successCallback="getTreeData"
+    /> -->
+    <modifyClassifyDialog
+      :isOpenDialog.sync="classifyDia"
+      :title="dialog_title"
+      :formData="classifyForm"
     />
 
     <!-- 加入我的图库弹窗 -->
@@ -326,6 +341,7 @@ import leftMixin from "../mixins/classifyMixin";
 import Chart from "@/views/dataEntry_manage/components/chart";
 import changeLang from "@/views/dataEntry_manage/components/changeLang.vue";
 import classifyDia from "@/views/datasheet_manage/components/sheetClassifyDia.vue";
+import modifyClassifyDialog from './components/modifyClassifyDialog.vue'
 import addMyClassifyDia from "@/views/dataEntry_manage/components/addMyClassifyDia";
 import SaveChartOther from "@/views/dataEntry_manage/components/SaveChartOther";
 import setEnNameDia from "@/views/dataEntry_manage/components/setEnNameDia.vue";
@@ -340,7 +356,8 @@ export default {
     addMyClassifyDia,
     SaveChartOther,
     setEnNameDia,
-    setLangInfoDia
+    setLangInfoDia,
+    modifyClassifyDialog
   },
   mixins: [leftMixin, chartSetMixin],
   computed: {
@@ -366,6 +383,7 @@ export default {
       defaultProp: {
         label: "ChartClassifyName",
         children: "Children",
+        isLeaf:'isLeaf'
       }, //树结构配置项
       dynamicNode: null,
 
@@ -399,6 +417,56 @@ export default {
     };
   },
   methods: {
+    // 递归节点
+    getNodeParentData(data,arr){
+        if(data.level===0) return
+        arr.push({classifyName:this.currentLang==='en'?data.data.ChartClassifyNameEn:data.data.ChartClassifyName,classifyId:data.data.ChartClassifyId})
+        this.getNodeParentData(data.parent,arr)
+        return arr
+    },
+    addNode(node,data){
+        this.dialog_title = '添加';
+        let arr=[]
+        arr=this.getNodeParentData(node,arr)
+        /* 添加目录 */
+        this.classifyForm = {
+            parentArr:arr,
+            parent_id: data.ChartClassifyId,
+            level: node.level,
+            levelVal:'',
+        }
+        //存储当前要新增子级的目录code
+        sessionStorage.setItem('expandCode', data.UniqueCode);
+        this.classifyDia = true;
+    },
+    //绑定el-tree的load属性
+    async getLazyTreeData (node,resolve){
+        if(node.level===0){
+            resolve(this.treeData)
+        }else{
+            let arr=[]
+            const res=await chartRelevanceApi.classifyList({
+                ParentId:node.data.ChartClassifyId,
+                IsShowMe:this.isOnlyMe,
+                Source: this.classify_tab ? 4 : 3})
+            if (res.Ret === 200) {
+                const temarr = res.Data.AllNodes || [];
+                arr=temarr.map(item=>{
+                    return {
+                        ...item,
+                        isLeaf:item.ChartInfoId?true:false
+                    }
+                })
+            }
+            resolve(arr)
+        }
+    },
+    //展开选中图表父级,选中选择图表
+    handleShowChartDetail({ UniqueCode, ChartInfoId }){
+        this.select_classify = 0;
+        this.select_id = ChartInfoId;
+
+    },
     /* 添加图表 */
     goAddChart() {
       if (!this.treeData.length) return this.$message.warning("请先添加分类");
@@ -418,10 +486,16 @@ export default {
           if (Ret !== 200) return;
 
           this.showData = true;
-          this.treeData = Data.AllNodes || [];
+          //this.treeData = Data.AllNodes || [];
+          this.treeData = Data.AllNodes?Data.AllNodes.map(d=>{
+            return {
+                ...d,
+                Children:[]
+            }
+          }):[]
           this.$nextTick(() => {
             /* 新增完成后 处理树展开和选中 */
-            params && this.selectCurrentNode(params);
+            //params && this.selectCurrentNode(params);
           });
         });
     },