tire-platform-ui/src/components/crop-select/main.vue

<template>
  <div>
    <div style="display:flex">
      <el-select
        size="small"
        v-model="value"
        placeholder="请选择"
        @input="$emit('balabala', value)"
        :disabled="disabled"
        filterable
        clearable
        style="width:100%"
        :multiple="multiple? multiple : false"
        :collapse-tags="collapseTags?collapseTags: false"
        @change="corpChange"
      >
        <el-option
          v-for="item in corpList"
          :key="item.id"
          :label="item.cname"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button
        icon="el-icon-search"
        size="mini"
        :disabled="disabled"
        @click="openDialog()"
      ></el-button>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="corpVisible"
      width="80%"
      top="5vh"
      append-to-body
      @closed="closed"
      class="el-dialogDeep"
      v-dialog-drag
    >
      <span>
        <el-row>
          <el-col :span="4">
            <el-scrollbar>
              <basic-container>
                <avue-tree
                  :option="treeOption"
                  :data="treeData"
                  @node-click="nodeClick"
                  :style="treeStyle"
                />
              </basic-container>
            </el-scrollbar>
          </el-col>
          <el-col :span="20">
            <avue-crud
              :option="tableOption"
              :data="data"
              ref="crud"
              v-model="form"
              :page.sync="page"
              :search.sync="search"
              @search-change="searchChange"
              @search-reset="searchReset"
              @selection-change="selectionChange"
              @on-load="onLoad"
              @tree-load="treeLoad"
              @saveColumn="saveColumn"
              @resetColumn="resetColumn"
              @refresh-change="refreshChange"
              :table-loading="loading"
            >
            </avue-crud>
          </el-col>
        </el-row>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="corpVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="importCorp"
          :disabled="selectionList.length != 1"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import option from "./configuration/mainList.json";
import {
  customerList,
  allCropList,
  getDeptLazyTree
} from "@/api/basicData/customerInformation";
import { getCustomerCode, getCustomerName } from "@/enums/management-type";
export default {
  data() {
    return {
      corpList: [],
      loading: false,
      data: [],
      tableOption: {},
      form: {},
      search: {},
      treeDeptId: "",
      treeDeptName: "",
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      treeOption: {
        nodeKey: "id",
        lazy: true,
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children"
        }
      },
      corpVisible: false,
      selectionList: [],
      title: null,
      treeStyle:'height:'+(window.innerHeight - 315)+'px'
    };
  },
  props: {
    value: String,
    disabled: Boolean,
    cropIndex: Number,
    corpType: String,
    multiple: Boolean,
    collapseTags: Boolean,
  },
  model: {
    prop: "value",
    event: "balabala"
  },
  async created() {
    this.tableOption = await this.getColumnData(this.getColumnName(51), option);
    this.title = getCustomerName(this.corpType);
    allCropList({
      corpType: getCustomerCode(this.corpType)
    }).then(res => {
      this.corpList = res.data.data;
    });
  },
  mounted() {},
  methods: {
    init() {
      this.openDialog();
    },
    openDialog() {
      let _this = this;
      this.treeOption.treeLoad = function(node, resolve) {
        const parentId = node.level === 0 ? 0 : node.data.id;
        getDeptLazyTree({
          parentId: parentId,
          corpType: getCustomerCode(_this.corpType)
        }).then(res => {
          resolve(
            res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              };
            })
          );
        });
      };
      this.corpVisible = true;
    },
    closed() {
      this.$refs.crud.toggleSelection();
    },
    importCorp() {
      this.$emit("balabala", this.selectionList[0].id);
      this.$emit("getCorpData", {
        ...this.selectionList[0],
        index: this.cropIndex
      });
      this.corpVisible = false;
    },
    corpChange(row) {
      this.corpList.forEach(e => {
        if (row == e.id) {
          this.$emit("getCorpData", { ...e, index: this.cropIndex });
        }
      });
    },
    refreshChange() {
      this.onLoad(this.page, this.search);
    },
    onLoad(page, params = { parentId: 0 }) {
      let queryParams = Object.assign({}, params, {
        size: page.pageSize,
        current: page.currentPage,
        corpsTypeId: this.treeDeptId,
        corpType: getCustomerCode(this.corpType)
      });
      this.loading = true;
      customerList(queryParams)
        .then(res => {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          if (this.page.total) {
            this.tableOption.height = window.innerHeight - 350;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.onLoad();
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.onLoad();
    },
    //列表内展开树节点
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      customerList({ parentId: parentId }).then(res => {
        resolve(res.data.data.records);
      });
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.treeDeptId = null;
    },
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    //列保存触发
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(51),
        this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    async resetColumn() {
      this.option = option;
      const inSave = await this.delColumnData(this.getColumnName(51), option);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    }
  }
};
</script>

<style scoped lang="scss"></style>