cnhis-design-vue 2.1.106 → 2.1.109

package/packages/index.js

@@ -90,7 +90,8 @@ import { default as ShortcutSetter } from './shortcut-setter';
 import { default as Ellipsis } from './ellipsis';
 import { default as ScaleContainer } from './scale-container';
 import { default as ShortcutProvider } from './shortcut-provider';
-// import flexibleResize from '@/directive/flexibleResize';
+import { default as SliderTree } from './slider-tree';
+
 
 const req = require.context('ant-design-vue/es/locale', true, /.js$/);
 const locales = {};
@@ -190,7 +191,8 @@ const components = [
   ShortcutSetter,
   Ellipsis,
   ScaleContainer,
-  ShortcutProvider
+  ShortcutProvider,
+  SliderTree
 ];
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
@@ -308,7 +310,8 @@ export {
   ShortcutSetter,
   Ellipsis,
   ScaleContainer,
-  ShortcutProvider
+  ShortcutProvider,
+  SliderTree
 };
 
 export default {

package/packages/slider-tree/hooks/useAsyncData.js

@@ -0,0 +1,53 @@
+export default function useAsyncData() {
+
+  async function handleGetConfigApi(params, key, filterApiConfig) {
+    try {
+      // TODO: 判断 fn 是异步函数还是同步
+      const fn = filterApiConfig[key] || null;
+      if (typeof fn === 'function') {
+        const res = await fn(params);
+        return Promise.resolve(res);
+      } else {
+        return Promise.reject(new Error(`${key} Is not a function`));
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
+  // 根据机构id查本身及下级机构，平级返回 /corp-center/iho/org/manage/getChildrenByOrgPartenId
+  async function getChildrenByOrgPartenId(params, filterApiConfig) {
+    return await handleGetConfigApi(params, 'getChildrenByOrgPartenId', filterApiConfig);
+  }
+
+  // 员工左侧树搜索，接口/corp-center/iho/dept/selectOrgBck1TreeByParam
+  async function searchEmpTreeData(params, filterApiConfig) {
+    return await handleGetConfigApi(params, 'searchEmpTreeData', filterApiConfig);
+  }
+
+  // 拖动修改科室的排序，接口/corp-center/iho/dept/updateSort
+  async function updateDeptSort(params, filterApiConfig) {
+    return await handleGetConfigApi(params, 'updateDeptSort', filterApiConfig);
+  }
+
+  // 获取科室管理科室列表，接口/corp-center/iho/dept/selectBck1ListByParam
+  async function getDeptList(params, filterApiConfig) {
+    return await handleGetConfigApi(params, 'getDeptList', filterApiConfig);
+  }
+
+  // 删除科室，接口/corp-center/iho/dept/deleteBck1
+  // async function deleteDept(params, filterApiConfig) {
+  //   return await handleGetConfigApi(params, 'deleteDept', filterApiConfig);
+  // }
+
+
+
+
+  return {
+    getChildrenByOrgPartenId,
+    searchEmpTreeData,
+    updateDeptSort,
+    getDeptList,
+    // deleteDept
+  }
+}

package/packages/slider-tree/index.js

@@ -0,0 +1,7 @@
+import SliderTree from './index.vue';
+
+SliderTree.install = function(Vue){
+  Vue.component(SliderTree.name, SliderTree);
+}
+
+export default SliderTree;

package/packages/slider-tree/index.vue

@@ -0,0 +1,439 @@
+<template>
+  <div
+    class="left-tree-wrap"
+    ref="left"
+    :style = "{
+      width: flexWidth + 'px',
+    }"
+    v-flexible-resize="{
+        mode: 'VR',
+        onMove: changeWidth,
+        onEnd: saveWidth
+      }"
+  >
+    <div class="search-groups">
+      <a-input-search
+        placeholder="搜索关键字"
+        v-model="searchValue"
+        @change="onSearch"
+        @search="onSearch"
+        allowClear
+      />
+      <!-- 按钮插槽 -->
+      <slot name="buttons"></slot>
+    </div>
+
+    <!-- 标签tab插槽 -->
+    <slot name="tabs"></slot>
+
+    <div class="tree-wrap">
+      <a-tree
+        :tree-data="treeData"
+        :replaceFields="treeRenderConfig.replaceFields"
+        :expanded-keys="expandedKeys"
+        :selectedKeys="selectedKeys"
+        :showIcon="true"
+        :draggable="isDraggable"
+        :loadedKeys="loadedKeys"
+        :load-data="onLoadData"
+        @expand="onExpand"
+        @select="onNodeSelect"
+        @dragenter="onDragEnter"
+        @drop="onDrop"
+      >
+        <template slot="title" slot-scope="node">
+          <!-- 图标插槽 -->
+          <div class="tree-left">
+            <slot name="icons" :node="node"></slot>
+            <span class="dept-name" v-if="node.name.indexOf(searchValue.trim()) > -1" :title="node.name">
+              {{ node.name.substr(0, node.name.indexOf(searchValue.trim())) }}
+              <span style="color: #2563F4">{{ searchValue.trim() }}</span>
+              {{
+                node.name.substr(
+                  node.name.indexOf(searchValue.trim()) + searchValue.trim().length
+                )
+              }}
+            </span>
+            <span v-else :title="node.name">{{ node.name }}</span>
+          </div>
+
+          <!-- 操作插槽 -->
+          <slot name="operate" :node="node"></slot>
+        </template>
+      </a-tree>
+      <a-empty description="暂无数据"/>
+    </div>
+
+    <div class="table-footer-wrap">
+      <slot name="output"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-async-promise-executor */
+
+import { Tree, Input, Empty } from 'ant-design-vue';
+import flexibleResize from '@/directive/flexibleResize';
+import useAsyncData from './hooks/useAsyncData.js';
+import { traversalData } from './utils'
+const {
+  getChildrenByOrgPartenId,
+  searchEmpTreeData,
+  updateDeptSort,
+  getDeptList,
+} = useAsyncData();
+import create from '@/core/create';
+
+const isMatchFn = (node, keyword) => {
+  keyword = keyword?.toLowerCase();
+  let { name = "", abbrp = "", abbrw = "", code } = node;
+  const nameMatch = name?.toLowerCase()?.indexOf(keyword) > -1; // 名字匹配
+  const codeMatch = code?.toLowerCase()?.indexOf(keyword) > -1; // 编码匹配
+  const pyCodeMatch = abbrp?.toLowerCase()?.indexOf(keyword) > -1; // 拼音匹配
+  const wbCodeMatch = abbrw?.toLowerCase()?.indexOf(keyword) > -1; // 五笔匹配
+  if (nameMatch || pyCodeMatch || wbCodeMatch || codeMatch) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+export default create({
+  name: 'slider-tree',
+  directives: {
+    flexibleResize
+  },
+  components: {
+    [Tree.name]: Tree,
+    [Empty.name]: Tree,
+    [Input.Search.name]: Input.Search,
+  },
+  props: {
+    // 回调对象集合
+    treeSearchApiConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    // 树节点渲染配置
+    treeRenderConfig: {
+      type: Object,
+      default: () => ({
+        replaceFields: {
+          children: "childrenList",
+          title: "name",
+          key: "code"
+        },
+        title: 'bck03',
+        key: 'bck02'
+      })
+    },
+    // 是否需要拖拽树节点
+    isDraggable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否需要更新数据
+    isRefresh: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 初始宽度
+      flexWidth: 260,
+      // 搜索关键词
+      searchValue: "",
+      treeData: [],
+      // replaceFields: {
+      //   children: "childrenList",
+      //   title: "name",
+      //   key: "code"
+      // },
+      expandedKeys: [],
+      selectedKeys: [],
+      // 选中的左侧树节点
+      selectNode: {},
+      loadedKeys: [],
+      // 拖拽的数据
+      dragData: {}
+    };
+  },
+  async mounted() {
+    await this.init();
+  },
+  watch: {
+    isRefresh(val) {
+      if (val) {
+        this.refreshTreeData();
+      }
+    }
+  },
+  methods: {
+    // 更新treeData数据，在拖拽节点和删除节点的时候使用
+    async refreshTreeData() {
+      await this.getChildrenByOrgPartenId();
+      // 更新完成
+      this.$emit("refreshEnd", true);
+      if (!this.treeData.length) return;
+    },
+    // 初始化节点数据
+    async init() {
+      await this.getChildrenByOrgPartenId();
+      if (!this.treeData.length) return;
+      this.expandedKeys = [this.treeData[0].code];
+      this.selectedKeys = [this.treeData[0].code];
+      this.selectNode = this.treeData[0];
+      this.$emit("select", JSON.parse(JSON.stringify(this.treeData[0])));
+    },
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+    },
+    // 选中树节点
+    onNodeSelect(selectedKeys = [], { node }) {
+      if (selectedKeys.length) {
+        // 选中
+        this.expandedKeys = [...this.expandedKeys, ...selectedKeys];
+      } else {
+        // 取消选中
+        this.expandedKeys = this.expandedKeys.filter(
+          key => key !== this.selectedKeys[0]
+        );
+      }
+      this.selectedKeys = selectedKeys;
+      this.$emit("select", node.dataRef);
+      const data = Object.create(node.dataRef);
+      this.selectNode = data;
+    },
+    async onSearch() {
+      const searchValue = this.searchValue.trim();
+      if (searchValue) {
+        const {
+          data, success
+        } = await searchEmpTreeData({
+          search: searchValue
+        }, this.treeSearchApiConfig);
+        if (success) {
+          data.forEach(org => {
+            org.childrenList = this.handleDeptData(
+              org.bck1TreeManageRespDTO || []
+            );
+            org.isLeaf = org.childrenList.length ? false : true;
+            org.isOrg = true;
+          });
+          this.treeData = data;
+          this.expandedKeys = this.getExpandKeys(data);
+        }
+      } else {
+        this.reset();
+      }
+    },
+    async reset(flag, selectOrgId) {
+      await this.getChildrenByOrgPartenId();
+      let orgId = this.treeData[0].orgId;
+      let setIndex = 0;
+      if (flag) {
+        orgId = selectOrgId;
+        setIndex = this.treeData.findIndex(org => org.orgId === orgId);
+      }
+      const data = await this.getDeptData(orgId);
+      if (data) {
+        this.$set(this.treeData, setIndex, data);
+      }
+    },
+    onDragEnter(info) {
+      console.log(info, "drag enter info");
+    },
+    async onDrop(info) {
+      const { dragNode, node } = info;
+      const { dataRef: dragData } = dragNode;
+      const { dataRef: dropData } = node;
+      if (dragData.isOrg) {
+        this.$message.error("机构不能拖动排序");
+        return;
+      }
+      if (dragData.orgId !== dropData.orgId) {
+        this.$message.error("不能跨机构移动科室");
+        return;
+      }
+      if (dragData.bck01a !== dropData.bck01a) {
+        this.$message.error("仅允许同层级科室排序");
+        return;
+      }
+      this.dragData = dragData;
+      const params = {
+        bck01: dragData.bck01,
+        moveTobck01: dropData.bck01,
+        orgId: dragData.orgId
+      };
+      const {
+        success
+      } = await updateDeptSort(params, this.treeSearchApiConfig);
+      if (success) {
+        this.$message.success("排序成功");
+        this.reset(true, dragData.orgId);
+        this.$emit("dropEnd", params);
+      }
+    },
+    // 获取科室管理科室列表
+    async getDeptData(orgId) {
+      const {
+        data,
+        success
+      } = await getDeptList({ orgId }, this.treeSearchApiConfig);
+      if (success) {
+        const temp = this.treeData.find(org => org.orgId === orgId);
+        temp.childrenList = this.handleDeptData(data);
+        return temp;
+      }
+    },
+    handleDeptData(data) {
+      for (const item of traversalData(data, "childrenList")) {
+        item.name = item[this.treeRenderConfig.title];
+        item.code = item[this.treeRenderConfig.key];
+        item.isLeaf =
+          item.childrenList && item.childrenList.length ? false : true;
+      }
+      return data;
+    },
+    // 根据机构id查本身及下级机构
+    async getChildrenByOrgPartenId() {
+      const {
+        success, data
+      } = await getChildrenByOrgPartenId(null, this.treeSearchApiConfig);
+      if (success) {
+        data.forEach(org => {
+          org.isOrg = true;
+          org.isLeaf = !org.existBck1;
+        });
+        this.treeData = data;
+      }
+    },
+    // 更新树节点信息
+    onLoadData(treeNode) {
+      return new Promise(async resolve => {
+        if (treeNode.dataRef.isOrg && !treeNode.dataRef.children) {
+          const data = await this.getDeptData(treeNode.dataRef.orgId);
+          if (data) {
+            treeNode.dataRef.children = data;
+          }
+          resolve();
+          return;
+        }
+        resolve();
+      });
+    },
+    // 获取展开的key
+    getExpandKeys(data) {
+      const expandKeys = [];
+      for (const item of traversalData(data, "childrenList")) {
+        // 有子级匹配就展开
+        let hasChildMatch = false;
+        for (const subItem of traversalData(
+          item.childrenList,
+          "childrenList"
+        )) {
+          if (isMatchFn(subItem, this.searchValue)) {
+            hasChildMatch = true;
+          }
+        }
+        if (hasChildMatch) {
+          expandKeys.push(item.code);
+        }
+      }
+      return expandKeys;
+    },
+
+    changeWidth({ distance }) {
+      const w = this.flexWidth + distance;
+      this.flexWidth = Math.min(Math.max(w, 50), 1000);
+    },
+    // 保存拖动的宽度
+    saveWidth() {
+      this.$emit("saveWidth", this.flexWidth);
+    }
+  }
+});
+</script>
+<style lang="less" scoped>
+.left-tree-wrap {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  background: #fff;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  .search-groups{
+    display: flex;
+    align-items: center;
+    .ant-input-search{
+      flex: 1;
+    }
+  }
+  .tree-wrap{
+    margin-top: 8px;
+    flex: 1;
+    overflow-y: auto;
+    /deep/.ant-tree {
+      flex: 1;
+      overflow-y: auto;
+      .ant-tree-switcher {
+        width: 10px;
+      }
+      .ant-tree-title{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        .tree-left{
+          display: flex;
+          align-items: center;
+          flex: 1;
+          .dept-name{
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+        }
+      }
+      .ant-tree-node-content-wrapper {
+        position: relative;
+        width: calc(100% - 24px);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        .node-action {
+          position: absolute;
+          right: 0;
+          top: 0;
+          z-index: 9;
+          display: none;
+        }
+        &:hover .node-action {
+          display: block;
+        }
+      }
+      li span[draggable],
+      .ant-tree li span[draggable] {
+        border: none;
+      }
+    }
+  }
+  .table-footer-wrap{
+    margin-top: 8px;
+  }
+  .resizable {
+    position: absolute;
+    right: -7px;
+    bottom: 0;
+    width: 14px;
+    height: 100%;
+    text-align: center;
+    z-index: 1;
+    cursor: col-resize;
+  }
+}
+</style>

package/packages/slider-tree/utils/index.js

@@ -0,0 +1,10 @@
+export function* traversalData(data, children = "children") {
+  if (!data || !Array.isArray(data)) return;
+  for (let i = 0; i < data.length; i++) {
+    yield data[i];
+    if (data[i][children]) {
+      yield* traversalData(data[i][children], children);
+    }
+  }
+}
+