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

<template>
  <span class="select-component" style="display:inline-flex;width: 100%;">
    <el-select
        v-model="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="dialogVisible = true"
               :disabled="disabled?disabled:false"></el-button>
  <el-dialog
    v-dialogdrag
      title="导入客户"
      :visible.sync="dialogVisible"
      class="el-dialogDeep"
      append-to-body
      width="80%">
    <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"
                     @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"

export default {
  name: "customerInformation",
  props: {
    disabled: Boolean,
    value: String,
    configuration: Object,
  },
  model: {
    prop: 'value',
    event: 'returnBack'
  },
  data() {
    return {
      form: {},
      dicData: [],
      dialogVisible: false,
      value: '',
      option: 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).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
      },
    }
  },
  created() {
    this.option.searchShow = this.configuration.searchShow ? this.configuration.searchShow : false
    this.remoteMethod()
  },
  methods: {
    changeName(){
      this.$emit('returnBack', this.value)
    },
    //刷新触发
    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.selection = []
      this.$emit('returnBack', this.value)
      this.dialogVisible = false
      this.$emit('receiveList',this.dicData)
    },
    //选中触发
    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.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
      })
      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;
        }
      })
    },
    //树桩列点击展开触发
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      customerList({parentId: parentId}).then(res => {
        resolve(res.data.data.records);
      });
    },
    // 远程模糊查找
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.queryParams = {
          size: 10,
          current: 1,
          cname: query
        }
        customerList(this.queryParams).then(res => {
          this.dicData = res.data.data.records
          this.loading = false;
        });
      } else {
        this.loading = true
        this.queryParams = {
          size: 10,
          current: 1
        }
        customerList(this.queryParams).then(res => {
          this.dicData = res.data.data.records
          this.loading = 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>