qgb-process 0.1.52 → 0.1.53

package/src/views/formBuilder/components/newNodeForm.vue

@@ -1,426 +0,0 @@
-<template>
-  <!-- 组件说明：主要处理同人在不同部门的情况 -->
-  <!-- 1.选中其中一个部门的A，不选中其他部门的A -->
-  <!-- 2.已选去重：先选中部门1的A,选择2的A,右侧已选只显示一个A -->
-  <!-- 3.右侧已选取消某一员工，则取消左侧全部该员工的勾选 -->
-  <div>
-    <el-dialog
-      :title="title"
-      :visible.sync="orgVisible"
-      width="600px"
-      append-to-body
-      :before-close="cancel"
-      :close-on-click-modal="false"
-      destroy-on-close
-    >
-      <div class="main-wrapper">
-        <!-- 左侧 -->
-        <div class="main-block">
-          <div class="block-title">选择：</div>
-          <div
-            class="block-card"
-            v-loading="loading"
-          >
-            <!-- 搜索 -->
-            <el-input
-              type="text"
-              clearable
-              placeholder="输入姓名"
-              v-model="searchValue"
-              style="margin-bottom: 10px"
-              size="small"
-            >
-              <i
-                slot="prefix"
-                class="el-input__icon el-icon-search"
-              ></i>
-            </el-input>
-
-            <!-- 选择框 -->
-            <div>
-              <el-tree
-                :data="orgData"
-                class="filter-tree"
-                :props="defaultProps"
-                default-expand-all
-                show-checkbox
-                node-key="uniqueProp"
-                :default-checked-keys="defaultCheck"
-                :filter-node-method="filterNode"
-                @check="handleCheckChange"
-                ref="tree"
-              ></el-tree>
-            </div>
-          </div>
-        </div>
-
-        <!-- 右侧 -->
-        <div class="main-block">
-          <div class="block-title">已选：</div>
-          <div class="block-card block-card-right">
-            <ul
-              class="opt-wrap"
-              id="opt-wrap"
-            >
-              <li
-                v-for="(item, index) in selectedList"
-                :key="index"
-                class="opt"
-                :data-memberNo="item.userId || item.memberNo"
-              >
-                <!-- {{JSON.stringify(item)}} -->
-                <span class="opt-name">{{ item.name || item.userName}}</span>
-                <i class="el-icon-circle-close" @click="deleteOpt(item, index)"></i>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <span
-        slot="footer"
-        class="dialog-footer"
-      >
-        <el-button @click="cancel">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="confirm"
-        >确 认</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import api from "../../../api/apiMemberSelection";
-export default {
-  name: "FlowNodeForm",
-  components: {},
-  props: {
-    type: {
-      type: Number,
-      default: 0
-    },
-    orgVisible: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      isSearching: false,
-      currentSelectedAll: false,
-      searchValue: null,
-      loading: false,
-      orgData: null,
-      selectedList: [],
-      defaultCheck: [],
-      defaultProps: {
-        children: "children",
-        label: "name"
-      }
-    };
-  },
-  computed: {
-    title() {
-      return this.type === 0 ? "请选择审批人" : "请选择抄送人"
-    }
-  },
-  watch: {
-    currentLevelList: {
-      handler(val) {
-        this.generateSelectedList();
-        this.generateCurrentSelectedAll();
-      },
-      deep: true
-    },
-    searchValue: {
-      handler(val) {
-        this.$refs.tree.filter(val);
-      }
-    }
-  },
-  async created() {
-    this.getOrgData()
-  },
-  methods: {
-    // 根据初始化数据匹配已选中列表
-    init(data) {
-      this.selectedList = _.cloneDeep(data)
-      const nos = data.map(item => item.memberNo || item.userId)
-      const iterator = (data) => {
-        data.forEach(item => {
-          if (item.holidayType === 2 && nos.includes(item.memberNo || item.userId)) {
-            this.$refs.tree.setChecked(item.uniqueProp, true)
-          } else if (item.holidayType !== 2 && item.children.length) {
-            iterator(item.children)
-          }
-        })
-      }
-      iterator(this.orgData)
-    },
-
-    // 节点过滤
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    },
-    // 获取组织架构数据
-    async getOrgData() {
-      this.loading = true;
-      const res = await api.getOrgsData();
-      if (res.data.code === 200) {
-        res.data.data.checked = false;
-        this.orgData = this.dataFormatter([res.data.data]);
-        this.currentLevelList = this.orgData;
-        this.loading = false;
-      }
-    },
-    // 数据格式化,合并contacts和children
-    dataFormatter(source) {
-      const itemMap = {};
-      const iterator = (source) => {
-        source.forEach((item) => {
-          if (item.holidayType !== 2) {
-            item.children = item.children.concat(item.contacts);
-            item.uniqueProp = item.id
-            if (item.children.length) {
-              iterator(item.children);
-            }
-          } else {
-            // 为每个叶节点加上唯一属性,uniqueProp
-            if (itemMap[item.memberNo]) {
-              itemMap[item.memberNo] = itemMap[item.memberNo] + 1
-            } else {
-              itemMap[item.memberNo] = 1
-            }
-            item.uniqueProp = item.memberNo + "-" + itemMap[item.memberNo]
-          }
-        });
-      };
-      iterator(source);
-      return source;
-    },
-    // 节点状态改变
-    handleCheckChange(node, checked, boolCheck) {
-      // 判断是选中还是取消选中
-      let isChecked;
-      if (boolCheck === undefined) {
-        const tempNodeUniqueProp = node.uniqueProp
-        isChecked = checked.checkedKeys.includes(tempNodeUniqueProp)
-      } else {
-        isChecked = boolCheck
-      }
-      if (isChecked) {
-        const _selectedNos = this.selectedList.map(item => item.memberNo)
-        const _tempList = this.$refs.tree
-          .getCheckedNodes()
-          .filter(item => item.holidayType === 2)
-          .filter(item => !_selectedNos.includes(item.memberNo))
-        this.selectedList = this.uniqueList(this.selectedList.concat(this.uniqueList(_tempList)))
-      } else {
-        const memberNo = node.memberNo
-        if (memberNo) {
-          const alsoExist = checked.checkedKeys.some(item => item.split("-")[0] === memberNo)
-          if (!alsoExist) {
-            const index = this.selectedList.indexOf(node)
-            this.selectedList.splice(index, 1)
-          }
-        } else {
-          for (let i = 0; i < node.children.length; i++) {
-            this.handleCheckChange(node.children[i], checked, false)
-          }
-        }
-      }
-    },
-    // 对象数组去重(判断memberNo是否相同)
-    uniqueList(data) {
-      const result = []
-      const _map = []
-      data.map(value => {
-        if (!_map.includes(value.memberNo || value.userId)) {
-          result.push(value)
-          _map.push(value.memberNo || value.userId)
-        }
-      })
-      return result
-    },
-    // 生成已选列表,每次节点/全选框状态改变时调用
-    generateSelectedList() {
-      const result = [];
-      const iterator = (source) => {
-        source.forEach((item) => {
-          item.checked && result.push(item);
-          if (item.children) {
-            iterator(item.children);
-          }
-        });
-      };
-      iterator(this.orgData);
-      this.selectedList = result;
-    },
-    // 递归取消所有该员工
-    deleteOpt(opt, index) {
-      this.selectedList.splice(index, 1)
-      const iterator = (data) => {
-        data.forEach(item => {
-          if (item.holidayType === 2 && item.memberNo === opt.memberNo) {
-            this.$refs.tree.setChecked(item.uniqueProp, false)
-          } else if (item.holidayType !== 2 && item.children.length) {
-            iterator(item.children)
-          }
-        })
-      }
-      iterator(this.orgData)
-    },
-    // 取消
-    cancel() {
-      this.$emit("close")
-    },
-    // 确认
-    confirm() {
-      // if (this.selectedList.length === 0) {
-      //   this.$message.warning(this.title);
-      //   return false;
-      // }
-      if (this.selectedList.length > 25) {
-        const tip = this.type === 0 ? "申请人最多选择25人" : "抄送人最多选择25人"
-        this.$message.warning(tip);
-        return false;
-      }
-      const resultParams = {
-        list: this.selectedList,
-        type: this.type
-      }
-      this.$emit("close")
-      this.$emit("confirm", JSON.stringify(resultParams));
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-.opt{
-    .el-icon-circle-close{
-        color: #606266 !important;
-    }
-}
-/deep/ .el-tree {
-  margin-top: 8px;
-  height: 280px;
-  overflow-y: auto;
-}
-ul,
-li {
-  padding: 0;
-  margin: 0;
-}
-.main-wrapper {
-  display: flex;
-  justify-content: space-between;
-}
-.main-block {
-  width: 270px;
-}
-.block-card {
-  border-radius: 5px;
-  padding: 10px;
-  box-sizing: border-box;
-  border: 1px solid #dcdfe6;
-  margin-top: 10px;
-  height: 352px;
-}
-.block-card-right {
-  overflow: auto;
-}
-#bread_wrap {
-  display: flex;
-  padding: 0;
-  font-size: 14px;
-  margin: 0;
-  align-items: center;
-  padding-bottom: 12px;
-  //flex-wrap: wrap;
-}
-.bread-wrapper-inner {
-  display: flex;
-  align-items: center;
-}
-.bread-item {
-  margin-right: 5px;
-  white-space: nowrap;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.bread-item span {
-  cursor: pointer;
-}
-.bread-item:hover span {
-  color: #0286df;
-}
-.bread-item i {
-  margin-left: 5px;
-}
-.bread-item:last-child i {
-  display: none;
-}
-.prev-menu-btn {
-  margin-right: 5px;
-  color: #606266;
-}
-.prev-menu-btn:hover {
-  color: #0286df;
-}
-
-// .select-box{
-//   padding-top: 10px;
-// }
-.select-item-wrapper {
-  height: 220px;
-  overflow: auto;
-}
-.select-item-wrapper.tall {
-  height: 295px;
-}
-.opt {
-  display: flex;
-  align-items: center;
-  //height: 30px;
-  justify-content: flex-start;
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-.opt-avatar {
-  margin-left: 10px;
-  flex-shrink: 0;
-}
-.avatar-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background-color: #0286df;
-  color: #fff;
-  border-radius: 100%;
-}
-.opt-name {
-  width: 100%;
-  flex-shrink: 1;
-  padding-left: 10px;
-}
-.next-level-btn {
-  flex-shrink: 0;
-  margin: 0;
-  padding: 0;
-}
-.el-icon-circle-close {
-  cursor: pointer;
-}
-</style>