@nstc-business/imes 1.0.0

package/src/components/model-calculate/tree.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="tree_wrap">
+    <el-tree
+      :data="treeVal"
+      node-key="id"
+      ref="tree"
+      draggable
+      :default-expand-all="true"
+      :expand-on-click-node="false"
+      v-bind="$attrs"
+    >
+      <div
+        class="custom-tree-node flex-box flex-v"
+        v-title
+        slot-scope="{ node, data }"
+      >
+        <i :class="data.type == 0 ? 'el-icon-folder' : 'el-icon-tickets'" />
+        <div class="custom-tree-label" v-title:tooltip>
+          {{ data.label}}
+        </div>
+      </div>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tree',
+  props: {
+    flag: {
+      type: Boolean,
+      default: true
+    },
+    modelTree: {
+      type: [Array, Object],
+      default: () => []
+    }
+  },
+  computed: {
+    treeVal: {
+      get() {
+        if (!this.flag) {
+          return this.modelTree?.map(item => this.buildTreeItem(item)) || []
+        }
+        return Array.isArray(this.modelTree)
+          ? this.modelTree.map(item => this.buildModelTreeItem(item))
+          : [this.buildModelTreeItem(this.modelTree)]
+      },
+      set(v) {
+        this.$emit('update:modelTree', v)
+        return v
+      }
+    },
+    modelFlag: {
+      get() {
+        return this.flag
+      },
+      set(v) {
+        return v
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    buildTreeItem(treeData) {
+      const item = {
+        pid: treeData.pid,
+        sort: treeData.sort,
+        id: treeData.id,
+        label: treeData.name,
+        type: treeData.type,
+        kind: treeData.kind,
+        code: treeData.code,
+        children:
+          treeData.children?.map(child => this.buildTreeItem(child)) || []
+      }
+      return item
+    },
+    buildModelTreeItem(treeData) {
+      const item = {
+        ...treeData,
+        id: treeData.tid,
+        label: treeData.name,
+        type: treeData.isLeaf,
+        validateRuleFlag: true,
+        children:
+          treeData.children?.map(child => this.buildModelTreeItem(child)) || []
+      }
+      item.modelRankRuleVOList?.forEach(r => {
+        r.validateRuleFlag = true
+      })
+      return item
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.tree_wrap {
+  margin-top: 4px;
+
+  .el-tree {
+    width: 300px;
+  }
+
+  span {
+    /deep/ .el-input--mini .el-input__inner {
+      height: 24px;
+      line-height: 24px;
+    }
+  }
+}
+
+.custom-tree-node {
+  width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  .custom-tree-label {
+    width: 90%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+/deep/ .is-current > .el-tree-node__content {
+  background: #168bff;
+  position: relative;
+  color: white;
+}
+</style>

package/src/index.js

@@ -0,0 +1,24 @@
+// 组件导入
+import ModelCalculate from './components/model-calculate/index.vue'
+
+const components = [ModelCalculate]
+
+const install = function (Vue, options = { prefix: 'N' }) {
+  components.forEach(component => {
+    let name = component.name
+    if (!name) return console.error('必须设置组件名称:', component)
+    name = options.prefix + name.replace(name[0], name[0].toUpperCase())
+    Vue.component(name, component)
+  })
+}
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  version: '1.0.0',
+  install,
+  CascaderArea,
+}