fl-web-component 0.1.0 → 1.0.0

package/packages/components/com-treeDynamic/Readme.md

@@ -0,0 +1,271 @@
+<!-- 使用方法 样例 -->
+<template>
+  <div class="trigger_tree">
+    <TreeDynamic
+      :tree-data="treeData"
+      :tree-props="treeProps"
+      @treeNodeClick="treeNodeClick"
+    >
+      <template slot-scope="{ data }">
+        <span v-show="data.show" title="添加子级" class="el-icon-plus" />
+        <span v-show="data.show" title="编辑" class="el-icon-edit" />
+        <span v-show="data.show" title="删除" class="el-icon-close" />
+      </template>
+    </TreeDynamic>
+  </dev>
+</template>
+
+<script>
+export default {
+  name: 'TriggerDialog',
+  components: {
+    // 树结构引入，如注册全局组件则克直接使用
+    TreeDynamic: () => import('./TreeDynamic.vue')
+  },
+  props: {},
+  data() {
+    return {
+      // 树结构数据
+      treeData: [
+        {
+          'id': '1745253848118845442',
+          'name': '对象分类',
+          'value': 'objectClass',
+          'businessCode': 'objectClass',
+          'level': 1,
+          'children': [
+            {
+              'id': '12618484347122',
+              'name': '设备',
+              'value': 'shebei',
+              'level': 2,
+              'children': [
+                {
+                  'id': '12618485050290',
+                  'name': '容器类',
+                  'value': 'rongqilei',
+                  'level': 3,
+                  'children': [
+                    {
+                      'id': '12618485152250',
+                      'name': '分离器',
+                      'value': 'fenliqi',
+                      'level': 5
+                    },
+                    {
+                      'id': '12618484578645',
+                      'name': '过滤器',
+                      'value': 'guolu:qi',
+                      'level': 4
+                    },
+                    {
+                      'id': '12618485917543',
+                      'name': '容器',
+                      'value': 'rongqi',
+                      'level': 4
+                    },
+                    {
+                      'id': '1754016181494267905',
+                      'name': '篮式过滤器',
+                      'value': 'lanshiguolu:qi',
+                      'level': 4
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }, {
+          'id': '12618484760325',
+          'name': '电气',
+          'value': 'dianqi',
+          'level': 2,
+          'children': [
+            {
+              'id': '12618485975945',
+              'name': '变压器类',
+              'value': 'bianyaqilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618485384756',
+                  'name': '变压器',
+                  'value': 'bianyaqi',
+                  'level': 4
+                },
+                {
+                  'id': '12618485707383',
+                  'name': '箱式变电站',
+                  'value': 'xiangshibiandianzhan',
+                  'level': 4
+                },
+                {
+                  'id': '12618485371135',
+                  'name': '光伏电站',
+                  'value': 'guangfudianzhan',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485814127',
+              'name': '发电机',
+              'value': 'fadianji',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618485358015',
+                  'name': '燃气轮发电机',
+                  'value': 'ranqilunfadianji',
+                  'level': 4
+                },
+                {
+                  'id': '12618483950122',
+                  'name': '燃气内燃发电机',
+                  'value': 'ranqineiranfadianji',
+                  'level': 4
+                },
+                {
+                  'id': '12618485975170',
+                  'name': '双燃料发电机',
+                  'value': 'shuangranliaofadianji',
+                  'level': 4
+                },
+                {
+                  'id': '12618485691024',
+                  'name': '应急柴油发电机',
+                  'value': 'yingjichaiyoufadianji',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485453906',
+              'name': '开关设备和控制设备',
+              'value': 'kaiguanshebeihekongzhishebei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618483905472',
+                  'name': '低压成套开关设备',
+                  'value': 'diyachengtaokaiguanshebei',
+                  'level': 4
+                },
+                {
+                  'id': '12618484387637',
+                  'name': '中压成套开关设备树结构长度测试',
+                  'value': 'zhongyachengtaokaiguanshebei',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618484918030',
+              'name': '电源装置',
+              'value': 'dianyuanzhuangzhi',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618484390629',
+                  'name': 'AC UPS',
+                  'value': 'AC UPS',
+                  'level': 4
+                },
+                {
+                  'id': '12618484534407',
+                  'name': 'DC UPS',
+                  'value': 'DC UPS',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618484767931',
+              'name': '配电箱类',
+              'value': 'peidianxianglei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618485304400',
+                  'name': '配电箱',
+                  'value': 'peidianxiang',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485729502',
+              'name': '变频器类',
+              'value': 'bianpinqilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618483944869',
+                  'name': '变频器',
+                  'value': 'bianpinqi',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485102937',
+              'name': '软起动器类',
+              'value': 'ruanqidongqilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618484212277',
+                  'name': '软起动器',
+                  'value': 'ruanqidongqi',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485021977',
+              'name': '电机类',
+              'value': 'dianjilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618484664538',
+                  'name': '电机',
+                  'value': 'dianji',
+                  'level': 4
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      treeProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  computed: { },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 点击树结构返回数据 */
+    treeNodeClick(node) {
+      console.log(node)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.trigger_tree {
+  height: 100%;
+  width: 300px;
+background-color: #fff;
+}
+.el-icon-plus, .el-icon-edit, .el-icon-close {
+  color: #1890ff;
+  text-align: right;
+  margin-right: 8px;
+  font-size: 14px;
+}
+</style>

package/packages/components/com-treeDynamic/index.vue

@@ -0,0 +1,207 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-15 15:22:52
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-16 10:27:18
+ * @FilePath: /web/framework/src/views/system/temporary/tree-dynamic.vue
+ * @Description:
+-->
+<template>
+  <div class="tree_dynamic">
+    <!-- 搜索框 -->
+    <el-input
+      v-if="hasSearch"
+      v-model="filterText"
+      class="filter_input"
+      clearable
+      :size="inputSize"
+      :placeholder="filterPlaceholder"
+    />
+    <!-- 树结构 -->
+    <el-tree
+      ref="dynamicTree"
+      :class="hasSearch ? 'whole_tree' : 'part_tree'"
+      :data="treeData"
+      :props="treeProps"
+      :style="{ height: treeHeight }"
+      :expand-on-click-node="expandOnClickNode"
+      :node-key="nodeKey"
+      :default-expand-all="defaultExpandAll"
+      :filter-node-method="filterNode"
+      highlight-current
+      @node-click="treeNodeClick"
+    >
+      <span
+        slot-scope="{ node, data }"
+        class="custom-tree-node"
+        @mouseenter="mouseenter(data)"
+        @mouseleave="mouseleave(data)"
+      >
+        <span :title="node.label" class="tree_node_span">
+          <template id="">
+            <i class="el-icon-folder-opened" style="margin-right: 3px" />
+          </template>
+          <span :title="node.label" class="title_tree">{{ node.label }}</span>
+        </span>
+        <span class="tree_operation" style="display: inline-block; width: 80px; text-align: right">
+          <slot v-if="treeNodeHandle" class="fr_text" :data="data"> 操作按钮 </slot>
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TreeDynamic',
+  components: {},
+  props: {
+    /* 是否可搜索 */
+    hasSearch: {
+      type: Boolean,
+      default: true,
+    },
+    /* 搜索框文字提示 */
+    filterPlaceholder: {
+      type: String,
+      default: '输入关键字进行过滤',
+    },
+    // 搜索框大小
+    inputSize: {
+      type: String,
+      default: 'small',
+    },
+    /* 树结构数据 */
+    treeData: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    /* 树结构 props */
+    treeProps: {
+      type: Object,
+      default: () => {},
+      required: true,
+    },
+    /* 是否默认展开所有节点 */
+    defaultExpandAll: {
+      type: Boolean,
+      default: true,
+    },
+    /* 是否在点击节点的时候展开或者收缩节点 */
+    expandOnClickNode: {
+      type: Boolean,
+      default: false,
+    },
+    /* 树节点 nodeKey */
+    nodeKey: {
+      type: String,
+      default: 'id',
+    },
+    /* 树结构节点操作 */
+    treeNodeHandle: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      /* 搜索字段 */
+      filterText: '',
+      treeHeight: '',
+    };
+  },
+  computed: {},
+  watch: {
+    filterText(val) {
+      this.$refs.dynamicTree.filter(val);
+    },
+    deep: true,
+  },
+  created() {},
+  mounted() {
+    /* 获取搜索框样式，动态赋值树高度 */
+    if (this.hasSearch) {
+      const that = this;
+      this.$nextTick(() => {
+        const inputDom = document.getElementsByClassName('filter_input')[0];
+        if (inputDom) {
+          const inputDomHeight = inputDom.scrollHeight + 8;
+          if (inputDomHeight) {
+            const treeCalcHeight = `calc(100% - ${inputDomHeight}px)`;
+            that.$set(that, 'treeHeight', treeCalcHeight);
+          }
+        }
+      });
+    } else {
+      this.$set(this, 'treeHeight', '100%');
+    }
+  },
+  methods: {
+    /* 搜索 */
+    filterNode(value, data) {
+      if (!value) return true;
+      const label = this.treeProps.label;
+      return data[label].indexOf(value) !== -1;
+    },
+    /* 树结构 点击节点 */
+    treeNodeClick(node) {
+      this.$emit('treeNodeClick', node);
+    },
+    /** 树节点鼠标移入移出 */
+    mouseenter(data) {
+      this.$set(data, 'show', true);
+    },
+    mouseleave(data) {
+      this.$set(data, 'show', false);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.tree_dynamic {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 1px;
+  overflow: hidden;
+}
+/* 搜索框样式 */
+.filter_input {
+  margin-bottom: 8px;
+}
+/* 树结构样式 */
+.el-tree {
+  width: 100%;
+  overflow-y: auto;
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 24px) !important;
+    font-size: 14px;
+  }
+  .custom-tree-node .tree_node_span {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    width: calc(100% - 80px) !important;
+    i {
+      display: inline-block;
+    }
+    .title_tree {
+      display: inline-block;
+      width: calc(100% - 18px) !important;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      height: 100%;
+    }
+  }
+}
+.part_tree {
+  height: 100%;
+}
+.whole_tree {
+  height: v-bind(treeHeight);
+}
+</style>