shujuju/ruoyi-ui/src/components/mutipleSelectPop/index.vue

<template>
  <div class="MutipleSelectPop">
    <div class="dialog_left">
      <div class="left_top">
       <Input
          @on-change="inputchange"
          @on-keydown="inputkeydown"
          search
          @on-search="inputsearch"
          :placeholder="tree.placeholder"
          v-model="tree.search"
        ></Input>
      </div>
      <div class="left_center">
        <div class="complex-spin-fix" v-if="treeLoading">
          <Spin fix>
            <Icon type="ios-loading" size="30" class="demo-spin-icon-load"></Icon>
          </Spin>
        </div>
        <Tree
          :data="treeLists"
          show-checkbox
          ref="Tree"
          :query="tree.search"
          :queryStyle="queryStyle"
          @on-select-change="getSelectedNodes"
          @on-check-change="getCheckedNodes"
        ></Tree>
        <!-- <el-tree
          :props="treeLists"
          show-checkbox
          @check-change="handleCheckChange">
        </el-tree> -->
      </div>
    </div>
    <div class="dialog_center">
      <div class="complex-spin-fix" v-if="tableLoading">
        <Spin fix>
          <Icon type="ios-loading" size="30" class="demo-spin-icon-load"></Icon>
        </Spin>
      </div>
      <div class="dialog_center_top">
        <div class="dialog_center_top_fix">
          <Input
            @on-change="inputchange"
            @on-keydown="inputkeydown"
            search
            @on-search="inputsearch"
            :placeholder="table.placeholder"
            v-model="table.search"
          ></Input>
        </div>
      </div>
      <div>
        <Tabs size="small" @on-click="tabClick" :animated="false">
          <TabPane v-for="(item,key) in TabPaneData" :key="key" :label="item.tab">
            <div class="dialog_center_page">
              <div>
                <Table
                  border
                  :columns="item.columns"
                  ref="Table"
                  :highlight-row="true"
                  :clickTimerTask="300"
                  :height="item.height"
                  @on-select="Onselect"
                  @on-select-cancel="onSelectCancel"
                  @on-select-all="onSelectAll"
                  @on-select-all-cancel="onSelectAllCancel"
                  @on-selection-change="onSelectChange"
                  @on-row-dblclick="rowdbClick"
                  @on-row-click="rowClick"
                  :data="item.list"
                ></Table>
              </div>
              <div class="dialog_p10">
                <Page
                  :total="item.total"
                  :page-size="item.pageSize"
                  :current="item.pageNum"
                  @on-change="pageChange"
                  :page-size-opts="item.pageOptions"
                  show-total
                  size="small"
                />
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
    <div class="dialog-operation" v-if="index === 0">
      <div>
        <Button v-if="isUse" class="operatebtn" type="primary" ghost @click="operationTwo">选择部门</Button>
        <Button class="operatebtn" type="primary" ghost @click="operation">选择人员</Button>
      </div>
    </div>
    <div class="dialog_right">
      <div class="left_top right_top">
        <div>已选中({{resultMessage.total || 0 }})</div>
        <div>
          <i class="el-icon-delete" @click="delecFun"></i>
        </div>
      </div>
      <div class="right_center">
        <ul v-if="resultMessage.list.length>0">
          <li v-for="(item,index) in resultMessage.list" :key="index">
            <p>{{item.string}}</p>
            <i class="iconfont iconbj_delete2" @click="deleteLi(index,item)"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import {
     addGenmutipor,
     addGenmutiporuder,
     addGenmutiportree
    } from "@/api/activiti/definition";
export default {
  name: "Mutiple",
  props: {
    // treedata: {
    //   type: Array,
    //   default() {
    //     return [];
    //   }
    // },
    // componentData: {
    //   type: Array,
    //   default() {
    //     return [];
    //   }
    // },
    resultData: {
      type: Object,
      default() {
        return {};
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    // treeLoading: {
    //   type: Boolean,
    //   default: false
    // },
    // tableLoading: {
    //   type: Boolean,
    //   default: false
    // },
    open: {
      type: Boolean,
      default: false
    },
    icon_delect: {
      type: String,
      default: "iconfont  icon-bj_delete"
    },
    checkedList: {
      type: Array,
      default() {
        return [];
      }
    },
    // tableSearch: {
    //   type: String,
    //   default: ""
    // },
    isUse: {
      type: Boolean,
      default: true
    },
    isMutiple: {
      //是否多选
      type: Boolean,
      default: true
    },
    // isResultShow: {
    //   //result.list是否反显
    //   type: Boolean,
    //   default: true
    // },
    isCallInterface: {
      //用来控制调用接口拿到数据 //也可以理解为弹框关闭状态
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableLoading: false,
      treeLoading: false,
      tree: {
        placeholder: "可搜索店仓/部门",
        search: ""
      },
      table: {
        //表格显示部分搜索
        placeholder: "直接输入人员姓名搜索",
        search: ""
      },
      columns: [],
      treeNewData: [],
      showTree: this.open,
      componentt: [
        {
          tab: "筛选结果",
          columns: [
            { key: "NAME", title: "用户名" },
            { key: "ENAME", title: "用户姓名" }
          ],
          list: [],
          total: 0,
          pageSize: 10,
          pageNum: 1, //当前页码
          pageOptions: [10, 20, 50, 100],
          height: 340
        }
      ],
      resultRightData: {
        total: 0,
        list: []
      },
      templateName: "",
      index: 0,
      queryStyle: {
        color: "#fd6442"
      },
      selectRow: [], //表格选中的数据
      selectDatas: {}, //单行选中
      obj: {} //
    };
  },
  computed: {
    treeLists() {
      // this.treeNewData = this.treedata;
      return this.treeNewData;
    },
    TabPaneData() {
      // let data = Object.assign(this.component, this.componentData);
      // return data;
      if (this.isMutiple) {
        // this.componentt[0].columns.unshift({
        //   type: "selection",
        //   align: "center",
        //   fixed: "left",
        //   width: 30
        // });
      }
      return this.componentt;
    },
    resultMessage() {
      // let data = Object.assign(this.resultRightData, this.resultData);
      return this.resultRightData;
    }
  },
  watch: {
    isCallInterface: {
      handler(newValue, oldValue) {
        if (newValue) {
          //执行请求
          this.componentt[0].pageNum = 1
          this.getTreeData();
          if (this.resultData.list) {
            this.resultRightData = this.deepCopy(this.resultData);
          }
        } else {
          if (this.selectRow.length > 0) {
            this.selectRow = [];
          }
          if (Object.keys(this.selectDatas).length > 0) {
            this.selectDatas = {};
          }
          if (this.table.search) {
            this.table.search = "";
          }
        }
      }
    }
  },
  methods: {
    deepCopy(obj) {
      //兑现深拷贝
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === "object" && obj[key] !== null) {
            result[key] = this.deepCopy(obj[key]); //递归复制
          } else {
            result[key] = obj[key];
          }
        }
      }
      return result;
    },
    getSelectedNodes(val) {
      // if (this.isMutiple) {
      if (val.length > 0) {
        this.obj = {};
        this.saveObj = val[0];
        let self = this;
        let valID = "";
        if (val[0].ID.indexOf(".") !== -1) {
          valID = val[0].ID.split(".")[1];
          valID = parseInt(valID);
        } else {
          valID = parseInt(val[0].ID);
        }

        if (val[0].CP_C_ORGUP_ID === null) {
          //根节点
          this.findUser({});
        } else {
          //当item的TYPE为店仓时
          if (val[0].TYPE === "CP_C_STORE_ID") {
            this.obj.CP_C_STORE_ID = "in(" + valID + ")";
            self.findUser(self.obj);
          }
          //当item的TYPE为供应商时
          //  当item的TYPE为组织时
          if (val[0].TYPE === "CP_C_HRORG_ID") {
            addGenmutipor({ CP_C_ORGUP_ID: valID })
              .then(res => {
                if (res.data.resultCode === 0) {
                  let HRORG = "in ("; //储存键名为CP_C_HRORG_ID对象的ID
                  let STORE = "in ("; //储存键名为CP_C_STORE_ID对象的ID

                  if (
                    res.data.data.CP_C_HRORG &&
                    res.data.data.CP_C_HRORG.length > 0
                  ) {
                    res.data.data.CP_C_HRORG.forEach(item => {
                      HRORG += item.ID + ","; // in 1,2,3,5,6,87,8,6
                    });
                    if (res.data.data.CP_C_HRORG.length > 0) {
                      self.obj.CP_C_HRORG_ID =
                        HRORG.substring(0, HRORG.length - 1) + ")";
                    }
                  }
                  if (
                    res.data.data.CP_C_STORE &&
                    res.data.data.CP_C_STORE.length > 0
                  ) {
                    res.data.data.CP_C_STORE.forEach(item => {
                      STORE += item.ID + ",";
                    });
                    if (res.data.data.CP_C_STORE.length > 0) {
                      self.obj.CP_C_STORE_ID =
                        STORE.substring(0, STORE.length - 1) + ")";
                    }
                  }
                  self.findUser(self.obj);
                } else {
                  this.$Modal.fcError({
                    title: "错误提示",
                    content: res.data.resultMsg
                  });
                }
              });
          }
          // setTimeout(function() {
          //   self.findUser(self.obj);
          // });
        }
      }
      // }
      this.$emit("on-select-tree", val, this);
    },
    getCheckedNodes(obj) {
      this.$emit("on-change-tree", obj, this);
    },
    tabClick(index) {
      this.index = index;
      this.$emit("on-click-tab", index, this);
    },
    pageChange(index) {
      this.$emit("on-change-page", index, this);
      this.componentt[0].pageNum = index;
      let param = Object.assign(this.obj, { page: index, pageSize: 10 });
      if (this.table.search !== "") {
        param.ENAME = this.table.search;
      }
      this.findUser(param);
    },
    pageChangeSize(index) {
      this.$emit("on-change-pageSize", index, this);
      this.componentt[0].pageSize = index;
      let param = Object.assign(this.obj, { page: 1, pageSize: index });
      if (this.table.search !== "") {
        param.ENAME = this.table.search;
      }
      this.findUser(param);
    },
    rowdbClick(row, index) {
      let selectObj = Object.assign({}, row);
      if (!this.isMutiple) {
        selectObj.string = selectObj.ENAME;
        if (this.resultRightData.list) {
          this.resultRightData.list = [];
          this.resultRightData.list.push(selectObj);
        } else {
          this.$set(this.resultRightData, "list", [selectObj]);
        }
      } else {
        let selectObj = Object.assign({ approve_type: 4 }, row);
        selectObj.string = selectObj.ENAME;
        if (this.resultRightData.list && this.resultRightData.list.length > 0) {
          let flagIndex = this.resultRightData.list.findIndex(inner => {
            return (
              selectObj.ID === inner.ID || selectObj.ID === Number(inner.approve_value)
            );
          });
          if (flagIndex === -1) {
            //没有找到相同的就加入
            this.resultRightData.list.push(selectObj);
          } else {
            this.$message({
                      message: selectObj.ENAME + "已经选择过了,请不要重复选择！",
                      type: 'warning'
                    });

          }
        } else {
          this.$set(this.resultRightData, "list", [selectObj]);
        }
      }
      this.resultRightData.total
        ? (this.resultRightData.total = this.resultRightData.list.length)
        : this.$set(
            this.resultRightData,
            "total",
            this.resultRightData.list.length
          );
      this.$emit("getResult", this.resultRightData);
      this.$refs.Table[0].clearCurrentRow();
      this.$emit("on-row-dblclick", row, index, this);
    },
    rowClick(row, index) {
      if (!this.isMutiple) {
        this.selectDatas = Object.assign(this.selectDatas, row);
      }
      this.$emit("on-row-click", row, index, this);
    },
    Onselect(selection, row) {
      if (this.isMutiple) {
        this.componentt[0].list.map(item => {
          if (row.ID === item.ID) {
            item._checked = true;
          }
        });
        this.selectRow = [];
        this.selectRow = selection;
      }

      this.$emit("on-select", selection, row);
    },
    onSelectCancel(selection, row) {
      this.componentt[0].list.map(item => {
        if (row.ID === item.ID) {
          item._checked = false;
        }
      });
      this.selectRow = [];
      this.selectRow = selection;
      this.$emit("on-select-cancel", selection, row);
    },
    onSelectAll(selection) {
      this.selectRow = [];
      this.componentt[0].list.map(item => {
        item._checked = true;
      });
      this.selectRow = selection;
      this.$emit("on-select-all", selection);
    },
    onSelectAllCancel(selection) {
      this.componentt[0].list.map(item => {
        item._checked = false;
      });
      this.selectRow = [];
      this.$emit("on-select-all-cancel", selection);
    },
    onSelectChange(selection) {
      this.$emit("on-select-change", selection);
    },
    inputchange(event) {
      // if(!this.isUse&&!this.isMutiple){
      this.table.search = event.target.value;
      // }
      this.$emit("on-change", event, this);
    },
    inputkeydown(event) {
      this.$emit("on-keydown", event, this);
    },
    inputsearch(event) {
      let param = Object.assign(this.obj, {
        page: 1,
        pageSize: 10,
        ENAME: event
      });
      this.findUser(param);
      this.$emit("on-search", event, this);
    },
    operationTwo() {
      let selectNode = this.$refs.Tree.getCheckedNodes();
      selectNode = selectNode.filter(item => item.title !=='全部')
      if (this.isMutiple) {
        if (selectNode.length > 0) {
          this.resultRightData.total
            ? this.$set(this.resultRightData, "total", this.resultData.total + selectNode.length)
            : this.$set(this.resultRightData, "total", selectNode.length);
          selectNode.map(item => {
            let selectObj = Object.assign({ approve_type: 2 }, item);
            selectObj.string = item.ENAME;
            if (
              this.resultRightData.list &&
              this.resultRightData.list.length > 0
            ) {
              let flagIndex = this.resultRightData.list.findIndex(inner => {
                return item.ID === inner.ID || item.ID === Number(inner.approve_value);
              });
              if (flagIndex === -1) {
                //没有找到相同的就加入
                this.resultRightData.list.push(selectObj);
              } else {
                  this.$message({
                          message:  item.ENAME + "已经选择过了,请不要重复选择！",
                          type: 'warning'
                        });

              }
            } else {
              this.$set(this.resultRightData, "list", [selectObj]);
            }
          });
        } else {
          his.$message({
                  message:"请选择部门！",
                  type: 'warning'
                });
          // this.$Message.warning("请选择部门");
        }
        this.getTreeData();
      }
      if (this.selectRow.length > 0) {
        //选中状态的清除
        this.selectRow = [];
      }
      if (Object.keys(this.selectDatas).length > 0) {
        this.selectDatas = {};
      }
      this.$emit("getResult", this.resultRightData);
      this.$emit("on-transfer-two", selectNode, this);
    },
    operation() {
      if (!this.isMutiple) {
        //单选逻辑
        if (Object.keys(this.selectDatas).length === 0) {
          this.$message({
                    message: '请选择人员',
                    type: 'warning'
                  });
          // this.$Message.warning("请选择人员");
          return;
        }
        this.resultRightData.total
          ? (this.resultRightData.total = 1)
          : this.$set(this.resultRightData, "total", 1);
        let selectObj = Object.assign({}, this.selectDatas);
        selectObj.string = selectObj.ENAME;
        if (this.resultRightData.list) {
          this.resultRightData.list = [];
          this.resultRightData.list.push(selectObj);
        } else {
          this.$set(this.resultRightData, "list", [selectObj]);
        }
      } else {
        //多选逻辑
        if (this.selectRow.length > 0) {
          this.selectRow.map(item => {
            let selectObj = Object.assign({ approve_type: 4 }, item);
            selectObj.string = item.ENAME;
            if (
              this.resultRightData.list &&
              this.resultRightData.list.length > 0
            ) {
              let flagIndex = this.resultRightData.list.findIndex(inner => {
                return item.ID === inner.ID || item.ID === Number(inner.approve_value);
              });
              if (flagIndex === -1) {
                //没有找到相同的就加入
                this.resultRightData.list.push(selectObj);
              } else {
                this.$message({
                          message: item.ENAME + "已经选择过了,请不要重复选择！",
                          type: 'warning'
                        });
                // this.$Message.warning(
                //   item.ENAME + "已经选择过了,请不要重复选择！"
                // );
              }
            } else {
              this.$set(this.resultRightData, "list", [selectObj]);
            }
          });
          this.resultRightData.total
            ? (this.resultRightData.total = this.resultRightData.list.length)
            : this.$set(
                this.resultRightData,
                "total",
                this.resultRightData.list.length
              );
        } else {
          this.$message({
                    message: '请选择人员',
                    type: 'warning'
                  });
          // this.$Message.warning("请选择人员");
        }
      }
      //刷新表格数据
      this.componentt[0].list.map(item => {
        item._checked = false;
      });
      this.componentt[0].list = this.componentt[0].list.concat([]);
      if (this.selectRow.length > 0) {
        //选中状态的清除
        this.selectRow = [];
      }
      if (Object.keys(this.selectDatas).length > 0) {
        this.selectDatas = {};
      }
      this.$emit("getResult", this.resultRightData);
      this.$emit("on-transfer", this);
    },
    deleteLi(index, tem) {
      let selectNode = this.$refs.Tree.getCheckedNodes();
      if (selectNode && selectNode.length > 0) {
        selectNode.map(inItem => {
          if (inItem.ID === tem.ID) {
            this.$refs.Tree.handleCheck({
              checked: false,
              nodeKey: inItem.nodeKey
            });
          }
        });
      }
      let selectrow = this.TabPaneData[0].list; //表格数据
      selectrow.map((row, Index) => {
        if (row.ID === tem.ID) {
          row._checked = false;
        }
      });
      this.resultRightData.list.splice(index, 1);
      this.resultRightData.total = this.resultRightData.list.length;
      this.$emit("getResult", this.resultRightData);
      this.$emit("on-delectli", index, tem, this);
    },
    treeOpen(checked) {
      this.showTree = !checked;
      this.treeNewData.forEach(item => {
        item.expand = !item.expand;
      });
    },
    delecFun() {
      let selectNode = this.$refs.Tree.getCheckedNodes();
      if (selectNode && selectNode.length > 0) {
        selectNode.map(inItem => {
          this.$refs.Tree.handleCheck({
            checked: false,
            nodeKey: inItem.nodeKey
          });
        });
      }
      let selectrow = this.TabPaneData[0].list; //表格数据
      if (selectrow && selectrow.length > 0) {
        selectrow.map((row, Index) => {
          row._checked = false;
        });
      }
      this.$emit("on-deleBtn", this);
      this.resultRightData.total = 0;
      this.resultRightData.list = [];
      this.componentt[0].list.map(item => {
        item._checked = false;
      });
      this.componentt[0].list = this.componentt[0].list.concat([]);
      this.$emit("getResult", this.resultRightData);
    },
    //查找用户信息
    findUser(param) {
      this.tableLoading = true;
      addGenmutiporuder( param).then(res => {
        this.tableLoading = false;
        let data = res;
        if (res.code === 0) {
          if (data.data) {
            this.transferTbody(data.data);
          }
          if (data.datas) {
            this.transferTbody(data.datas);
          }
        }
      });
    },
    //表格体数据转化
    transferTbody(data) {
      this.componentt[0].total = data.totalRowCount;
      this.componentt[0].pageOptions = data.selectrange;
      this.componentt[0].list = [];
      data.row.map(item => {
        let tem = {};
        let temval = {};
        Object.keys(item).map(inner => {
          tem[inner] = item[inner].val;
        });
        temval = Object.assign({}, tem);
        this.componentt[0].list.push(tem);
      });
    },
    //获取树数据
     getTreeData() {
      this.tree_loading = true;
      addGenmutiportree().then(res => {
        this.tree_loading = false;
        if (res.resultCode === 0) {
          console.log(345678)
          this.treeNewData = [];
          let newArr = [];
          let root = {};
          if (res.data.records.length > 0) {
            console.log(3456788)
            res.data.records.forEach(item => {
              let tem = Object.assign(item);
              newArr.push(tem);
              if (
                item["CP_C_ORGUP_ID"] === null ||
                item["CP_C_ORGUP_ID"] === ""
              ) {
                root = Object.assign({}, item);
              }
            });
            this.treeNewData = this.arrayTransTree(newArr, "CP_C_ORGUP_ID");
            console.log(this.treeNewData)
          }
          this.findUser({}); //显示所有的用户
        }
      });
    },

    //改造树数据的结构
    arrayTransTree(list, key) {
      let parent = [];
      let children = [];
      list.map(item => {
        item.expand = false;
        item.title = item.ENAME;
        if (
          !item[key]||
          (item[key].indexOf('.')!==-1&&!item[key].split(".")[1])
        ) {
          //根节点
          parent.push(item);
        } else {
          //有父节点的
          children.push(item);
        }
      });
      if (parent.length < 1) {
        //没有根节点
        let newParent = this.findTreeRootFirstChild(list, key); //拿到一级节点
        let rootArr = newParent.map(item => {
          return item[key];
        });
        let rootTem = Array.from(new Set([...rootArr]));
        if (rootTem.length === 1) {
          parent = [
            {
              CP_C_ORGUP_ID: null,
              ECODE: "00000",
              ENAME: "全部",
              ID: rootTem[0],
              MIXNAME: "[00000]全部",
              ORGTYPE: "IN",
              TYPE: "CP_C_HRORG_ID",
              title:'全部'
            }
          ];
          this.translator(parent, children, key);
          return parent;
        } else {
          this.$message({
                    message: '数据有问题，请检查...',
                    type: 'warning'
                  });
          // this.$Message.warning("数据有问题，请检查...");
          return;
        }
      } else {
        this.translator(parent, children, key);

        return parent;
      }
    },
    translator(parents, children, key) {
      let temp = [];
      children.map(item => {
        //对子节点数据进行深复制，这里只支持部分类型的数据深复制
        let temItem = Object.assign({}, item);
        temp.push(temItem);
      });
      //遍历父节点数据
      parents.map(parent => {
        //遍历子节点数据
        children.map((current, index) => {
          //此时找到父节点对应的一个子节点
          if (current[key] === parent.ID) {
            //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
            temp.splice(index, 1);
            //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
            this.translator([current], temp, key);
            //把找到子节点放入父节点的children属性中
            parent.children
              ? parent.children.push(current)
              : (parent.children = [current]);
          }
        });
      });
    },
    treeTransArray(tree, key) {
      return tree
        .reduce(function iteration(con, item) {
          con.push(item);
          if (item[key] && item[key].length > 0)
            item[key].reduce(iteration, con);
          return con;
        }, [])
        .map(function(item) {
          item[key] = [];
          return item;
        });
    },
    findTreeRootFirstChild(Arr, key) {
      let idArr = [];
      let result = [];
      idArr = Arr.map(item => {
        return item["ID"];
      });
      Arr.map(item => {
        if (!idArr.includes(item[key])) {
          //一级节点的特点是存在父节点 但是已父节点为ID的节点是不存在的
          result.push(item);
        }
      });
      return result;
    },
    handleCheckChange(){
     
    }
  },
  mounted() {
    // if(this.isCallInterface){
    //   this.getTreeData();
    //   if (this.resultData.list) {
    //     this.resultRightData = this.deepCopy(this.resultData);
    //   }
    // }else{
    //    if (this.selectRow.length > 0) {
    //       this.selectRow = [];
    //     }
    //     if (Object.keys(this.selectDatas).length > 0) {
    //       this.selectDatas = {};
    //     }
    //     if (this.table.search) {
    //       this.table.search = "";
    //     }
    // }

  },
  destroyed() {
    if (this.selectRow.length > 0) {
      this.selectRow = [];
    }
    if (Object.keys(this.selectDatas).length > 0) {
      this.selectDatas = {};
    }
    if (this.table.search) {
      this.table.search = "";
    }
  }
};
</script>
<style lang="scss">
.MutipleSelectPop {
  width: 800px;
  display: flex;
  height: 484px;
  position: relative;
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  .complex-spin-fix {
    z-index: 20;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  overflow: hidden;
  .dialog_left {
    width: 170px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #dcdee2;
    border-right: none;
    .left_top {
      height: 32px;
      line-height: 32px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8eaec;
      font-size: 12px;
      color: #575757;
      display: flex;
      input {
        line-height: 32px;
        height: 32px;
      }

      div:first-child {
        flex: 1;
      }
      i {
        margin-right: 10px;
      }
    }
    .left_center {
      flex: 1;
      padding-top: 10px;
      position: relative;
      height: 390px;
      padding-bottom: 10px;
      width: 156px;
      overflow-y: auto;
    }
  }
  .dialog_center {
    width: 400px;
    position: relative;
    height: 484px;
    border: 1px solid #dcdee2;
    border-right: none;
    //box-shadow: 2px -2px 9px @shadow-color;
    padding: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    .dialog_p10 {
      padding: 10px 0;
    }
    .dialog_center_top {
      display: flex;
      line-height: 32px;
      vertical-align: middle;
      box-sizing: border-box;
      .dialog_center_top_fix {
        width: 270px;
        box-sizing: border-box;
        padding-right: 20px;
        input {
          line-height: 32px;
          height: 32px;
        }
      }
    }
  }
  .dialog-operation {
    width: 92px;
    padding: 0px;
    border-left: 1px solid #dcdee2;
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      text-align: center;
      .operatebtn {
        margin-bottom: 10px;
        padding: 8px 12px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  .dialog_right {
    width: 220px;
    padding: 10px;
    border: 1px solid #dcdee2;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    .left_top {
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8eaec;
      font-size: 12px;
      color: #575757;
      display: flex;
      div:first-child {
        flex: 1;
      }
      i {
        margin-right: 10px;
      }
    }
    ul {
      height: 390px;
      overflow: auto;
      li {
        margin-bottom: 4px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f8f8f8;
        border-radius: 2px;
        font-size: 12px;
        p {
          flex: 1;
          line-height: 18px;
          margin-left: 4px;
          box-sizing: border-box;
          border-radius: 4px;
          padding: 4px 6px;
          color: #0f8ee9;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }
  }
  .right_center {
    flex: 1;
    padding-top: 10px;
  }
}
</style>