tire-platform-ui/src/components/selectComponent/customerSelect.vue

<template>
  <span class="select-component" style="display:inline-flex;width: 100%;">
    <el-select
      v-model.trim="value"
      size="small"
      :placeholder="configuration.placeholder"
      style="border-right: none;width: 100%"
      :disabled="disabled ? disabled : false"
      :multiple="configuration.multiple ? configuration.multiple : false"
      :clearable="configuration.clearable ? configuration.clearable : false"
      :collapse-tags="
        configuration.collapseTags ? configuration.collapseTags : false
      "
      filterable
      remote
      @change="changeName"
      :remote-method="remoteMethod"
    >
      <el-option
        v-for="item in configuration.dicData.length !== 0
          ? dicData.length !== 0
            ? dicData
            : configuration.dicData
          : dicData"
        :key="item.id"
        :label="item.cname"
        :value="item.id"
      />
    </el-select>
    <el-button
      slot="append"
      icon="el-icon-search"
      size="mini"
      @click="open"
      :disabled="disabled ? disabled : false"
    ></el-button>
    <el-dialog
      v-dialogdrag
      title="导入客户"
      :fullscreen="dialogFull"
      :visible.sync="dialogVisible"
      class="el-dialogDeep"
      append-to-body
      width="80%"
    >
      <template slot="title">
        <span class="el-dialog__title">
          <span
            style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"
          ></span>
          导入客户
        </span>
        <div
          style="float: right"
          class="avue-crud__dialog__menu"
          @click="dialogFull ? (dialogFull = false) : (dialogFull = true)"
        >
          <i class="el-icon-full-screen"></i>
        </div>
      </template>
      <el-row style="height: 0">
        <el-col :span="5">
          <div class="box">
            <el-scrollbar>
              <basic-container>
                <avue-tree
                  :option="treeOption"
                  :data="treeData"
                  @node-click="nodeClick"
                />
              </basic-container>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="19">
          <basic-container>
            <avue-crud
              :option="option"
              :data="dataList"
              ref="crud"
              v-model="form"
              :page.sync="page"
              :before-close="beforeClose"
              @search-change="searchChange"
              @search-reset="searchReset"
              @refresh-change="refreshChange"
              @selection-change="selectionChange"
              @on-load="onLoad"
              @saveColumn="saveColumn"
              @tree-load="treeLoad"
            >
            </avue-crud>
          </basic-container>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmSelection"
          :disabled="
            configuration.multipleChoices === true
              ? false
              : selection.length === 1
              ? false
              : true
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </span>
</template>

<script>
import option from "./configuration/mainList.json";
import {
  customerList,
  typeSave,
  deleteDetails,
  getDeptLazyTree
} from "@/api/basicData/customerInformation";
import {
  customerParameter,
  supplierParameter,
  companyParameter
} from "@/enums/management-type";
export default {
  name: "customerInformation",
  props: {
    disabled: Boolean,
    value: String,
    configuration: Object,
    typeData: String
  },
  model: {
    prop: "value",
    event: "returnBack"
  },
  data() {
    return {
      corpType: null,
      dialogFull: false,
      form: {},
      dicData: [],
      dialogVisible: false,
      value: "",
      option: {},
      parentId: 0,
      dataList: [],
      selection: [],
      treeOption: {
        nodeKey: "id",
        lazy: true,
        // treeLoad: function(node, resolve) {
        //   const parentId = (node.level === 0) ? 0 : node.data.id;
        //   getDeptLazyTree({parentId:parentId,corpType:"KH"}).then(res => {
        //     resolve(res.data.data.map(item => {
        //       return {
        //         ...item,
        //         leaf: !item.hasChildren
        //       }
        //     }))
        //   });
        // },
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children"
        }
      },
      page: {
        pageSize: 10,
        pagerCount: 5,
        total: 0
      },
      // 远程模糊查找loading
      loading: false,
      queryParams: {
        size: 10,
        current: 1
      }
    };
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(47), option);
    // this.option.searchShow = this.configuration.searchShow ? this.configuration.searchShow : false
    this.remoteMethod();
  },
  methods: {
    changeName(value) {
      let optionList =
        this.configuration.dicData.length !== 0
          ? this.dicData.length !== 0
            ? this.dicData
            : this.configuration.dicData
          : this.dicData;
      let valueName;
      let data;
      optionList.map(item => {
        if (item.id === this.value) {
          valueName = item.cname;
          data = item;
        }
      });
      this.$emit("returnBack", this.value);
      this.$emit("valueName", valueName);
      this.$emit("getRow", data);
    },
    //刷新触发
    refreshChange() {
      this.page = {
        pageSize: 10,
        pagerCount: 5,
        total: 0
      };
    },
    //确认导出触发
    confirmSelection() {
      this.dicData = [];
      if (this.configuration.multipleChoices === true) {
        let value = [];
        for (let item in this.selection) {
          this.dicData.push({
            id: this.selection[item].id,
            cname: this.selection[item].cname
          });
          value.push(this.selection[item].id);
        }
        this.value = value;
      } else {
        this.dicData.push({
          id: this.selection[0].id,
          cname: this.selection[0].cname
        });
        this.value = this.selection[0].id;
      }
      this.$emit("returnBack", this.value);
      this.$emit("receiveList", this.dicData);
      this.$emit("valueName", this.dicData[0].cname);
      this.$emit("getRow", this.selection[0]);
      this.selection = [];
      this.dialogVisible = false;
    },
    //选中触发
    selectionChange(selection) {
      this.selection = selection;
    },
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    //查询全部
    initData() {
      customerList().then(res => {
        console.log(this.form);
        const column = this.findObject(this.option.column, "parentId");
        column.dicData = res.data.data.records;
      });
    },
    //新增子项触发
    handleAdd(row) {
      this.parentId = row.id;
      const column = this.findObject(this.option.column, "parentId");
      column.value = row.id;
      column.addDisabled = true;
      this.$refs.crud.rowAdd();
    },
    //点击新增时触发
    beforeClose(done) {
      this.parentId = "";
      const column = this.findObject(this.option.column, "parentId");
      column.value = "";
      column.addDisabled = false;
      done();
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      console.log(params);
      this.treeDeptId = "";
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    //搜索重置按钮触发
    searchReset() {
      this.treeDeptId = "";
      this.onLoad(this.page);
    },
    onLoad(page, params = { parentId: 0 }) {
      let queryParams = Object.assign({}, params, {
        size: page.pageSize,
        current: page.currentPage,
        corpsTypeId: this.treeDeptId,
        corpType: this.corpType ? this.corpType : "KH"
      });
      customerList(queryParams).then(res => {
        this.dataList = res.data.data.records;
        this.page.total = res.data.data.total;
        if (this.page.total) {
          this.option.height = window.innerHeight - 500;
        } else {
          this.option.height = window.innerHeight - 200;
        }
      });
    },
    open() {
      if (this.typeData == "KH") {
        this.corpType = customerParameter;
      }
      if (this.typeData == "GYS") {
        this.corpType = supplierParameter;
      }
      if (this.typeData == "GS") {
        this.corpType = companyParameter;
      }
      this.dialogVisible = true;
      let _this = this;
      this.treeOption.treeLoad = function(node, resolve) {
        const parentId = node.level === 0 ? 0 : node.data.id;
        getDeptLazyTree({
          parentId: parentId,
          corpType: _this.corpType ? _this.corpType : "KH"
        }).then(res => {
          resolve(
            res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              };
            })
          );
        });
      };
    },
    //树桩列点击展开触发
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      customerList({
        parentId: parentId,
        corpType: this.corpType ? this.corpType : "KH"
      }).then(res => {
        resolve(res.data.data.records);
      });
    },
    // 远程模糊查找
    remoteMethod(query) {
      if (query) {
        this.loading = true;
        this.queryParams = {
          size: 10,
          current: 1,
          cname: query,
          corpType: this.typeData ? this.corpType : "KH"
        };
        customerList(this.queryParams).then(res => {
          this.dicData = res.data.data.records;
          this.loading = false;
        });
      } else {
        this.loading = true;
        this.queryParams = {
          size: 10,
          current: 1,
          corpType: this.typeData ? this.typeData : "KH"
        };
        customerList(this.queryParams).then(res => {
          this.dicData = [];
          this.configuration.dicData = this.configuration.dicData.concat(
            res.data.data.records
          );
          // this.configuration.dicData = res.data.data.records
          this.removeRepeat();
          this.loading = false;
        });
      }
    },
    // 去重
    removeRepeat() {
      let obj = [];
      this.configuration.dicData = this.configuration.dicData.reduce(
        (current, next) => {
          obj[next.id] ? "" : (obj[next.id] = true && current.push(next));
          return current;
        },
        []
      );
    },
    //列保存触发
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(47),
        this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.el-dialogDeep {
  ::v-deep .el-dialog {
    .el-dialog__body,
    .el-dialog__footer {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }
  }
}
</style>