htui-yllkbz 1.3.16 → 1.3.19

package/src/packages/HtBaseData/index.vue

@@ -0,0 +1,865 @@
+<template>
+  <div>
+    <!-- 选择部门 -->
+    <template v-if="
+        state.configJson['departmentId'] &&
+        state.configJson['departmentId'].show
+      ">
+      <!-- multiple: state.configJson['departmentId'].multiple, -->
+      <el-cascader v-if="!state.configJson['departmentId'].panel"
+                   :disabled="!!disabled"
+                   class="component-item"
+                   :class="comClass"
+                   :style="comStyle || ''"
+                   filterable
+                   :clearable="state.configJson['departmentId'].clearable"
+                   :placeholder="`请选择部门`"
+                   :collapse-tags="state.configJson['departmentId'].collapseTags"
+                   v-model="state.selectVal['departmentId']"
+                   :show-all-levels="state.configJson['departmentId'].showAllLevels"
+                   :props="{
+          label: 'name',
+          value: 'id',
+          children: 'children',
+          expandTrigger: 'click',
+          emitPath: false,
+          checkStrictly: state.configJson['departmentId'].checkStrictly,
+          multiple: state.configJson['departmentId'].multiple,
+        }"
+                   @click.native="selectClick($event)"
+                   ref="departmentId"
+                   @change="setSelctData('departmentId')"
+                   :options="organizationUsersTree">
+      </el-cascader>
+      <el-cascader-panel v-if="state.configJson['departmentId'].panel"
+                         class="component-item"
+                         :class="comClass"
+                         :style="comStyle || ''"
+                         :placeholder="`请选择部门`"
+                         v-model="state.selectVal['departmentId']"
+                         :props="{
+          label: 'name',
+          value: 'id',
+          children: 'children',
+          expandTrigger: 'click',
+          emitPath: false,
+          checkStrictly: state.configJson['departmentId'].checkStrictly,
+          multiple: state.configJson['departmentId'].multiple,
+        }"
+                         ref="departmentId"
+                         @change="setSelctData('departmentId')"
+                         :options="organizationUsersTree">
+        <template slot-scope="{ data }">
+          <span>{{ data.label }}</span>
+        </template>
+      </el-cascader-panel>
+    </template>
+    <!-- 选择人员 -->
+    <el-select v-model="state.selectVal['userId']"
+               placeholder="请选择人员"
+               filterable
+               :disabled="!!disabled"
+               :style="comStyle || ''"
+               class="component-item"
+               @click.native="selectClick($event)"
+               v-if="state.configJson['userId'] && state.configJson['userId'].show"
+               :multiple="state.configJson['userId'].multiple">
+      <el-option v-for="item in userDataList"
+                 :key="item.id"
+                 :label="item.value"
+                 :value="item.id"
+                 :title="`所在部门：${item.organizationNames}`">
+        <span>
+          <p class="ht-user-dot"
+             :class="
+              item.dutyOfficer && !item.dutyOfficer.status
+                ? 'ht-user-dot-disabled'
+                : ''
+            "
+             v-if="item.dutyOfficer"></p>
+          <p class="ht-user-name"
+             :class="
+              item.dutyOfficer && !item.dutyOfficer.status
+                ? 'ht-user-disabled'
+                : ''
+            ">
+            {{ item.value
+            }}<span v-if="item.phoneNumber"> ({{ item.phoneNumber }}) </span>
+          </p>
+        </span>
+      </el-option>
+    </el-select>
+    <!-- 选择部门下人员 -->
+    <template v-if="
+        state.configJson['departmentUser'] &&
+        state.configJson['departmentUser'].show
+      ">
+      <el-cascader v-if="!state.configJson['departmentUser'].panel"
+                   :disabled="!!disabled"
+                   class="component-item"
+                   filterable
+                   :class="comClass"
+                   :style="comStyle || ''"
+                   :clearable="state.configJson['departmentUser'].clearable"
+                   :placeholder="`请选择部门下人员`"
+                   :collapse-tags="state.configJson['departmentUser'].collapseTags"
+                   v-model="state.selectVal['departmentUser']"
+                   :show-all-levels="state.configJson['departmentUser'].showAllLevels"
+                   :props="{
+          label: 'name',
+          value: 'id',
+          children: 'childrenList',
+          expandTrigger: 'click',
+          emitPath: false,
+          checkStrictly: state.configJson['departmentUser'].checkStrictly,
+          multiple: state.configJson['departmentUser'].multiple,
+        }"
+                   ref="departmentUser"
+                   @click.native="selectClick($event)"
+                   @change="setSelctData('departmentUser')"
+                   :options="organizationUsersTreeUser">
+        <template slot-scope="{ data }">
+          <p class="ht-user-dot"
+             style="
+              padding: 0;
+              margin: 0;
+              float: left;
+              width: 14px;
+              height: 14px;
+              background: #4ecc7a;
+              line-height: 34px;
+              margin-top: 10px;
+              border-radius: 10px;
+              margin-right: 4px;
+            "
+             :style="
+              data.dutyOfficer && !data.dutyOfficer.status
+                ? 'background: #ccc;'
+                : ''
+            "
+             v-if="data.dutyOfficer"></p>
+          <p class="ht-user-name"
+             style="padding: 0; margin: 0; float: left"
+             :style="
+              data.dutyOfficer && !data.dutyOfficer.status ? 'color:#ddd' : ''
+            ">
+            {{ data.label }}
+          </p>
+        </template>
+      </el-cascader>
+      <el-cascader-panel v-else
+                         :style="panStyle"
+                         filterable
+                         class="component-item"
+                         :placeholder="`请选择部门下人员`"
+                         v-model="state.selectVal['departmentUser']"
+                         :props="{
+          label: 'name',
+          value: 'id',
+          children: 'childrenList',
+          expandTrigger: 'click',
+          emitPath: false,
+          checkStrictly: state.configJson['departmentUser'].checkStrictly,
+          multiple: state.configJson['departmentUser'].multiple,
+        }"
+                         ref="departmentUser"
+                         @change="setSelctData('departmentUser')"
+                         :options="organizationUsersTreeUser">
+        <template slot-scope="{ data }">
+          <p class="ht-user-dot"
+             style="
+              padding: 0;
+              margin: 0;
+              float: left;
+              width: 14px;
+              height: 14px;
+              background: #4ecc7a;
+              line-height: 34px;
+              margin-top: 10px;
+              border-radius: 10px;
+              margin-right: 4px;
+            "
+             :style="
+              data.dutyOfficer && !data.dutyOfficer.status
+                ? 'background: #ccc;'
+                : ''
+            "
+             v-if="data.dutyOfficer"></p>
+          <p class="ht-user-name"
+             style="padding: 0; margin: 0; float: left"
+             :style="
+              data.dutyOfficer && !data.dutyOfficer.status ? 'color:#ddd' : ''
+            ">
+            {{ data.label }}
+          </p>
+        </template>
+      </el-cascader-panel>
+    </template>
+    <!-- 基础数据分类 -->
+    <template v-for="item in state.resData.dictionaryCategory.items">
+      <!-- 选择严重等级 -->
+      <template v-if="item.code == 'SeverityLevel'">
+        <el-select v-if="state.configJson[item.code] && state.configJson[item.code].show"
+                   v-model="state.selectVal[item.code]"
+                   :disabled="!!disabled"
+                   :key="item.id"
+                   :style="comStyle || ''"
+                   placeholder="请选择严重等级"
+                   filterable
+                   class="component-item"
+                   @click.native="selectClick($event)"
+                   @change="setSelctItem(item.code)">
+          <el-option v-for="item in SeverityLevel"
+                     :key="item.id"
+                     :style="panStyle"
+                     :label="item.name"
+                     :value="`${item.value}`"
+                     :title="`${item.name}(${item.value})`">
+            <span>
+              <b class="item-origin"
+                 :style="{
+                  'border-color': `${item.color}`,
+                }"></b>
+              {{ item.name }}
+            </span>
+            <span v-if="item.phoneNumber"> ({{ item.phoneNumber }}) </span>
+          </el-option>
+        </el-select>
+      </template>
+      <!-- 选择响应列表 -->
+      <template v-else-if="item.code == 'ResponseList'">
+        <el-select v-if="state.configJson[item.code] && state.configJson[item.code].show"
+                   v-model="state.selectVal[item.code]"
+                   :key="item.id"
+                   :disabled="!!disabled"
+                   :style="comStyle || ''"
+                   placeholder="请选择响应列表"
+                   filterable
+                   class="component-item"
+                   @click.native="selectClick($event)"
+                   @change="setSelctItem(item.code)">
+          <el-option v-for="item in ResponseList"
+                     :key="item.id"
+                     :style="panStyle"
+                     :label="item.name"
+                     :value="item.value"
+                     :title="`${item.name}(${item.value})`">
+            <span>
+              <b v-if="item.color"
+                 class="item-origin"
+                 :style="{
+                  'border-color': `${item.color}`,
+                }"></b>
+              {{ item.name }}
+            </span>
+            <span v-if="item.phoneNumber"> ({{ item.phoneNumber }}) </span>
+          </el-option>
+        </el-select>
+      </template>
+      <!-- 基础数据级联选择 -->
+      <template v-else>
+        <template v-if="state.configJson[item.code] && state.configJson[item.code].show">
+          <el-cascader v-if="!state.configJson[item.code].panel"
+                       :placeholder="`请选择${item.name}`"
+                       :disabled="!!disabled"
+                       class="component-item"
+                       :style="comStyle || ''"
+                       :key="item.id"
+                       filterable
+                       :clearable="state.configJson[item.code].clearable"
+                       @click.native="selectClick($event)"
+                       v-model="state.selectVal[item.code]"
+                       :collapse-tags="state.configJson[item.code].collapseTags"
+                       :show-all-levels="state.configJson[item.code].showAllLevels"
+                       :props="{
+              label: 'name',
+              value: 'id',
+              children: 'children',
+              expandTrigger: 'click',
+              emitPath: false,
+              checkStrictly: state.configJson[item.code].checkStrictly,
+              multiple: state.configJson[item.code].multiple,
+            }"
+                       :ref="`${item.code}`"
+                       @change="setSelctData(item.code)"
+                       :options="getbaseDataInfo[item.id]"></el-cascader>
+          <el-cascader-panel v-else
+                             @click.native="selectClick($event)"
+                             :placeholder="`请选择${item.name}`"
+                             class="component-item"
+                             :key="item.id"
+                             :style="panStyle"
+                             v-model="state.selectVal[item.code]"
+                             :props="{
+              label: 'name',
+              value: 'id',
+              children: 'children',
+              expandTrigger: 'click',
+              emitPath: false,
+              checkStrictly: state.configJson[item.code].checkStrictly,
+              multiple: state.configJson[item.code].multiple,
+            }"
+                             :ref="`${item.code}`"
+                             @change="setSelctData(item.code)"
+                             :options="getbaseDataInfo[item.id]"></el-cascader-panel>
+        </template>
+      </template>
+    </template>
+    <!-- <div>
+      <h2>12456</h2>
+      <div
+        is="common-datas-info"
+        :config-json="JSON.stringify({departmentId:{show:true}})"
+      ></div>
+    </div> -->
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Prop, Emit, Component, Watch } from "vue-property-decorator";
+
+import {
+  BaseDataDto,
+  DictionaryCategoryDto,
+  DictionaryDataDto,
+  SeverityLevelDto,
+} from "@/plugins/commonApi";
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+  ListResultDto_1OfOfOrganizationUnitWithUsersAndContractsAnd_0AndCulture_neutralAndPublicKeyToken_null,
+  OrganizationUnitWithDetailsDto,
+  OrganizationUnitDto,
+} from "@/plugins/Auth";
+import { _axios, baseConfig } from "vue-kst-auth";
+interface Inuser {
+  concurrencyStamp: string;
+  email: string;
+  emailConfirmed: boolean;
+  extraProperties: any;
+  id: string;
+  isLockedOut: boolean;
+  lockoutEnabled: boolean;
+  name: string;
+  organizationIds: string[];
+  phoneNumber: string;
+  phoneNumberConfirmed: boolean;
+  surname: string;
+  tenantId: string;
+  userName: string;
+  value: string;
+}
+/** 部门树类型 */
+interface InDeparentTree {
+  children: Array<InDeparentTree>;
+  code: string;
+  creationTime: string;
+  creatorId: string;
+  deleterId: string;
+  deletionTime: string;
+  displayName: string;
+  extraProperties: any;
+  id: string;
+  isDeleted: boolean;
+  label: string;
+  name: string;
+  lastModificationTime: string;
+  lastModifierId: string;
+  parentId: string;
+  roles: any[];
+  users: Array<Inuser>;
+}
+/** 基础数据树声明 */
+interface InNode {
+  children: Array<InNode>;
+  config: any;
+  data?: BaseDataDto;
+  hasChildren: boolean;
+  label: string | undefined;
+  level: number;
+  loaded: boolean;
+  loading: boolean;
+  parent: Node;
+  path: Array<any>;
+  pathLabels: Array<any>;
+  pathNodes: Array<any>;
+  uid: number;
+  value: string;
+  isDisabled: boolean | null;
+  leaf: boolean;
+}
+/** 基础数据部门树声明 */
+interface InNodeDepaent {
+  children: Array<InNode>;
+  config: any;
+  data?: InDeparentTree;
+  hasChildren: boolean;
+  label: string | undefined;
+  level: number;
+  loaded: boolean;
+  loading: boolean;
+  parent: Node;
+  path: Array<any>;
+  pathLabels: Array<any>;
+  pathNodes: Array<any>;
+  uid: number;
+  value: string;
+  isDisabled: boolean | null;
+  leaf: boolean;
+}
+interface State {
+  /** api返回数据 */
+  resData: {
+    /** 基础数据 */
+    baseData: {
+      items: BaseDataDto[];
+    };
+    /** 字典类别 */
+    dictionaryCategory: {
+      items: DictionaryCategoryDto[];
+    };
+    /** 字典数据 */
+    dictionaryData: DictionaryDataDto[];
+    /** 严重等级 */
+    severityLevel: SeverityLevelDto[];
+    /** 部门 */
+    organizationUnit: OrganizationUnitWithDetailsDto[];
+    /** 部门树结构 */
+    organizationUsersTree: any[];
+    /** 用户 */
+    users: {
+      items?: Array<Inuser>;
+    };
+    /** 当前登录用户相关信息 */
+    SessionState: any;
+    /** 当前登录用户所在部门 */
+    userInOrganiza: OrganizationUnitDto[];
+    organizationUsers: ListResultDto_1OfOfOrganizationUnitWithUsersAndContractsAnd_0AndCulture_neutralAndPublicKeyToken_null;
+  };
+  /** 下拉框 */
+  selectVal: {
+    [key: string]: undefined | string | string[];
+  };
+  /** 下拉框选中数据对象 */
+  selectValData: {
+    [key: string]: Array<any>;
+  };
+  /** 配置文件 */
+  configJson: {
+    [key: string]: {
+      /** 名称介绍 */
+      name: string;
+      /** 是否显示 */
+      show: boolean;
+      /** 是否多选 */
+      multiple: boolean;
+      /** 显示 */
+      collapseTags: boolean;
+      /** 唯一字段 */
+      code: string;
+      data: {};
+      /** 级联适用，是否严格的遵守父子节点不互相关联 */
+      checkStrictly: boolean;
+      /** 级联面板显示 */
+      panel: boolean;
+      /** 仅显示最后一级 */
+      showAllLevels: boolean;
+      /** 接收下拉显示唯一值,id/value等 */
+      key?: string | string[];
+    };
+  };
+}
+@Component({
+  name: "HtBaseData",
+  components: {},
+})
+export default class CommonDatas extends Vue {
+  /** 配置数据 */
+  @Prop() configJson?: string;
+  /** 自定义class */
+  @Prop() comClass?: string;
+  /** 自定义style */
+  @Prop() comStyle?: string;
+  /** 自定义style */
+  @Prop() panStyle?: string;
+  /** 所属部门 */
+  @Prop() org?: string;
+  /** 是否禁用 */
+  @Prop() disabled?: string;
+
+  /** 人员 */
+  /** 数据 */
+  state: State = {
+    resData: {
+      baseData: {
+        items: [],
+      },
+      dictionaryCategory: {
+        items: [],
+      },
+      dictionaryData: [],
+      severityLevel: [],
+      organizationUnit: [],
+      organizationUsersTree: [],
+      users: {
+        items: [],
+      },
+      SessionState: "",
+      userInOrganiza: [],
+      organizationUsers:
+        new ListResultDto_1OfOfOrganizationUnitWithUsersAndContractsAnd_0AndCulture_neutralAndPublicKeyToken_null(),
+    },
+    selectVal: {},
+    selectValData: {},
+    configJson: {},
+  };
+  /** 生命周期 */
+  created() {
+    this.rewriteGetComputedStyle();
+    if (!baseConfig.getLoginState()) {
+      return;
+    }
+    const data = window.localStorage.getItem("commonDatas");
+    if (data) {
+      this.state.resData = Object.assign(this.state.resData, JSON.parse(data));
+    }
+    // 初始化配置文件
+    if (this.configJson) {
+      this.state.configJson = JSON.parse(this.configJson);
+    } else {
+      const { items } = this.state.resData.dictionaryCategory;
+      let configJson: any = {
+        departmentId: {
+          name: "部门树结构",
+          show: true,
+          showAllLevels: false,
+          multiple: false,
+          code: "departmentId",
+          data: {},
+          checkStrictly: true,
+          panel: false,
+        },
+        departmentUser: {
+          name: "部门下人员",
+          show: true,
+          showAllLevels: false,
+          multiple: false,
+          code: "departmentUser",
+          data: {},
+          checkStrictly: false,
+          panel: false,
+        },
+        userId: {
+          name: "部门人员",
+          show: true,
+          showAllLevels: false,
+          multiple: false,
+          code: "userId",
+          data: {},
+          checkStrictly: false,
+          panel: false,
+        },
+      };
+      items.forEach((item) => {
+        configJson = {
+          ...configJson,
+          [item.code as string]: {
+            name: item.name,
+            show: true,
+            showAllLevels: false,
+            multiple: true,
+            collapseTags: true,
+            code: item.code,
+            data: {},
+            checkStrictly: true,
+            panel: false,
+            key: "a1c72763-0ed5-0ba8-5131-39fdf96dfe9a",
+          },
+        };
+      });
+      // name: "设备系统分类",
+      // show: true,
+      // showAllLevels: true,
+      // multiple: false,
+      // code: "DeviceSystemType",
+      // data: {},
+      // checkStrictly: true,
+      // panel: false,
+      // key: this.state.editNodeData.systemType,
+      // };
+
+      this.state.configJson = { ...configJson };
+    }
+    for (const key in this.state.configJson) {
+      if (Object.prototype.hasOwnProperty.call(this.state.configJson, key)) {
+        const element = this.state.configJson[key];
+
+        this.$set(this.state.selectVal, key, element.key || "");
+      }
+    }
+  }
+  /** 方法 */
+  /** 重写window的一个方法，解决web components组件获取样式报错问题 */
+  rewriteGetComputedStyle() {
+    const getComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = function (element: any, property) {
+      return getComputedStyle(element.host || element, property);
+    };
+  }
+  /** 设置下拉数据 */
+  setSelctItem(key: string) {
+    const code = this.state.selectVal[key];
+    let codelist: string[];
+    if (!Array.isArray(code)) {
+      codelist = code ? code.toString().split(",") : [];
+    }
+    switch (key) {
+      case "SeverityLevel":
+        this.state.selectValData[key] = this.SeverityLevel.filter((item) =>
+          codelist.some((val) => val == item.value?.toString())
+        );
+        break;
+      case "ResponseList":
+        this.state.selectValData[key] = this.SeverityLevel.filter((item) =>
+          codelist.some((val) => val == item.id)
+        );
+        break;
+
+      default:
+        break;
+    }
+  }
+  /** 动态设置显示面板位置 */
+
+  selectClick(e: any) {
+    // 下拉选择框列表
+    //const list = window.document.getElementsByClassName("el-select-dropdown");
+    // (list as any).forEach((element: any) => {
+    //   // element.style.top = `${e.clientY - e.layerY + e.target.offsetHeight}px`;
+    //   // element.style.left = `${e.clientX - e.layerX}px`;
+    //   element.style.zIndex = 3000;
+    // });
+    // // 级联下拉列表
+    // const list01 = window.document.getElementsByClassName(
+    //   "el-cascader__dropdown"
+    // );
+    // (list01 as any).forEach((element: any) => {
+    //   // element.style.top = `${e.clientY - e.layerY + e.target.offsetHeight}px`;
+    //   // element.style.left = `${e.clientX - e.layerX}px`;
+    //   // element.style.position = "absolute";
+    //   element.style.zIndex = 3000;
+    // });
+  }
+  /** 设置下拉数据(级联选择) */
+  setSelctData(key: string) {
+    const ref: any | undefined = (this.$refs[key] as any)[0] || this.$refs[key];
+    const checkList = ref ? ref.getCheckedNodes() : [];
+    /** 过滤在多选模式下，Tag时触发删除 */
+    const checkNodes = checkList.filter((item: any) => {
+      return this.state.selectVal[key]?.includes(item.data.id);
+    });
+    this.state.selectValData[key] = [];
+    if (checkNodes && checkNodes.length && checkNodes[0] !== null) {
+      checkNodes.forEach(
+        (item: { data?: { id: string; name: string } } | undefined) => {
+          const { data } = item || { data: "" };
+          if (data && !this.state.selectValData[key].includes(data)) {
+            this.state.selectValData[key].push(data);
+          }
+        }
+      );
+    }
+    this.$emit("change", this.state.selectValData);
+  }
+  /** 基础数据递归处理 */
+  recursion(data: Array<BaseDataDto>) {
+    return data.reduce((prv: BaseDataDto[], cur) => {
+      if (cur.children && cur.children.length > 0) {
+        this.recursion(cur.children);
+      } else {
+        cur.children = undefined;
+      }
+      prv.push(cur);
+      return prv;
+    }, []);
+  }
+  /** 计算属性 */
+  /** 根据基础数据分类获取详细数据 */
+  get getbaseDataInfo() {
+    const body: { [key: string]: Array<BaseDataDto> } = {};
+    /** 获取基础数据列表 */
+    const { items: baseItems } = this.state.resData.baseData;
+    this.state.resData.dictionaryCategory.items.forEach((item) => {
+      body[item.id || ""] = [];
+      if (this.org) {
+        body[item.id || ""] = this.recursion(
+          baseItems.filter(
+            (val) =>
+              val.category == item.code &&
+              val.organizationUnits?.includes(this.org as string)
+          )
+        );
+      } else {
+        body[item.id || ""] = this.recursion(
+          baseItems.filter((val) => val.category == item.code)
+        );
+      }
+    });
+    return body;
+  }
+  /** 获取响应列表 */
+  get ResponseList() {
+    return (
+      this.state.resData.dictionaryData.filter(
+        (val) => val.categoryCode == "ResponseList"
+      ) || []
+    );
+  }
+  /** 获取严重等级 */
+  get SeverityLevel() {
+    return this.state.resData.severityLevel || [];
+  }
+  /** 获取用户数据 */
+  get userDataList() {
+    return this.state.resData.users.items || [];
+  }
+  /** 获取部门树结构 */
+  get organizationUsersTree() {
+    const org = this.org;
+    /** 递归处理 */
+    function recursion(data: Array<any>) {
+      return data.reduce((prv: any[], cur) => {
+        cur.name = cur.displayName;
+        if (cur.children && cur.children.length > 0) {
+          recursion(cur.children);
+        } else {
+          cur.children = undefined;
+        }
+        prv.push(cur);
+        return prv;
+      }, []);
+    }
+    const data = recursion(this.state.resData.organizationUsersTree);
+    if (org) {
+      const orgData: any[] = [];
+      function filter(items: any[]) {
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (org?.includes(item.id)) {
+            orgData.push(item);
+          } else {
+            item.children && filter(item.children);
+          }
+        }
+      }
+      filter(data);
+      return orgData;
+    }
+    return data;
+  }
+
+  /** 获取部门人员树结构 */
+  get organizationUsersTreeUser() {
+    /** 递归处理 */
+    function recursion(
+      data: Array<{
+        users?: any[];
+        children?: any[];
+        childrenList: any[] | undefined;
+      }>
+    ) {
+      return data.reduce((prv: any[], cur) => {
+        /** 合并部门人员数据 */
+        cur.childrenList = [];
+        if (cur.users) {
+          cur.users.map((item) => {
+            item.name =
+              item.surname || item.name
+                ? `${item.surname}${item.name}`
+                : item.userName;
+            item.childrenList = undefined;
+
+            return item;
+          });
+        }
+        if (cur.children && cur.children.length > 0) {
+          recursion(cur.children);
+        } else {
+          cur.children = undefined;
+        }
+        if (cur.children) {
+          cur.childrenList.push(...cur.children);
+        }
+        if (cur.users) {
+          cur.childrenList.push(...cur.users);
+        }
+
+        prv.push(cur);
+        return prv;
+      }, []);
+    }
+
+    return recursion(this.organizationUsersTree);
+  }
+  @Watch("configJson", { deep: true })
+  watchCongiJson(val: any, old: any) {
+    this.state.configJson = JSON.parse(val);
+    if (val !== old) {
+      for (const key in this.state.configJson) {
+        if (Object.prototype.hasOwnProperty.call(this.state.configJson, key)) {
+          const element = this.state.configJson[key];
+
+          this.$set(this.state.selectVal, key, element.key || "");
+        }
+      }
+    }
+  }
+  //this.state.configJson = JSON.parse(this.configJson);
+}
+</script>
+<style lang="scss" scoped>
+.component-item {
+  width: 100%;
+  + .component-item {
+    margin-top: 10px;
+  }
+}
+.item-origin {
+  border-radius: 50%;
+  border-width: 0px 7px;
+  margin-right: 6px;
+  border-style: solid;
+}
+</style>
+<style lang="scss">
+$primary-color: #4ecc7a;
+.component-item .el-input--suffix .el-input__inner {
+  background: none;
+  height: 32px !important;
+}
+.component-item .is-disabled .el-input__inner {
+  background: #f5f5f5;
+}
+.ht-user-dot {
+  padding: 0;
+  margin: 0;
+  float: left;
+  width: 14px;
+  height: 14px;
+  background: $primary-color;
+  line-height: 34px;
+  margin-top: 10px;
+  border-radius: 10px;
+  margin-right: 4px;
+}
+.ht-user-name {
+  padding: 0;
+  margin: 0;
+  float: left;
+}
+.ht-user-dot-disabled {
+  background: #ccc;
+}
+.ht-user-disabled {
+  color: #ddd;
+}
+</style>