Smart_platform_ui/src/components/selectComponent/customerSelect.vue

<template>
  <span class="select-component">
    <el-select
        v-model="value"
        :placeholder="configuration.placeholder"
        style="width: 80%;border-right: none"
        :disabled="disabled?disabled:false"
        :multiple="configuration.multiple?configuration.multiple:false"
        :collapse-tags="configuration.collapseTags?configuration.collapseTags:false">
      <el-option
          v-for="item in configuration.dicData.length !== 0?configuration.dicData:dicData"
          :key="item.id"
          :label="item.cname"
          :value="item.id"
      />
    </el-select>
    <el-button icon="el-icon-edit" @click="dialogVisible = true" :disabled="disabled?disabled:false" style="width: 20%"></el-button>
  <el-dialog
      title="导入客户"
      :visible.sync="dialogVisible"
      class="el-dialogDeep"
      append-to-body
      width="80%">
    <el-row style="margin-top: -5px;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-open="beforeOpen"
                     :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,
      }
    }
  },
  created() {
    this.option.searchShow = this.configuration.searchShow?this.configuration.searchShow:false
  },
  methods: {
    //刷新触发
    refreshChange(){
      this.page = {
        pageSize: 10,
        pagerCount: 5,
        total: 0,
      }
    },
    //确认导出触发
    confirmSelection(){
      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
    },
    //选中触发
    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();
    },
    //新增跳转页面
    beforeOpen(row, index) {
      this.$router.push({
        path: "/detailsPageEdit",
        query: {id: JSON.stringify(row.id)},
      });
    },
    //点击新增时触发
    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
        console.log(res.data.data.total)
        this.page.total = res.data.data.total
        console.log(this.page)
      })
    },
    //树桩列点击展开触发
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      customerList({parentId: parentId}).then(res => {
        resolve(res.data.data.records);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.el-dialogDeep {
  ::v-deep .el-dialog {
    margin: 1vh auto 0 !important;
    padding-bottom: 10px !important;

    .el-dialog__body, .el-dialog__footer {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }
  }
}
</style>