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

<template>
  <div>
    <el-dialog
      title="客户信息"
      class="el-dialogDeep"
      :visible.sync="portinfoVisible"
      width="60%"
      append-to-body
      @closed="closed"
      v-dialog-drag
    >
      <span>
        <el-row>
          <el-col :span="5">
            <el-scrollbar>
              <basic-container>
                <avue-tree
                  :option="treeOption"
                  :data="treeData"
                  @node-click="nodeClick"
                />
              </basic-container>
            </el-scrollbar>
          </el-col>
          <el-col :span="19">
            <avue-crud
              :option="tableOption"
              :data="dataList"
              ref="crud"
              v-model="form"
              :page.sync="page"
              @search-change="searchChange"
              @refresh-change="refreshChange"
              @selection-change="selectionChange"
              @on-load="onLoad"
              @tree-load="treeLoad"
              :cell-style="cellStyle"
            >
            </avue-crud>
          </el-col>
        </el-row>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="portinfoVisible = 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,
  getDeptLazyTree
} from "@/api/basicData/customerInformation";

export default {
  data() {
    return {
      loading: true,
      dataList: [],
      tableOption: option,
      form: {},
      search: {},
      treeDeptId: "",
      treeDeptName: "",
      height: window.innerHeight - 500,
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      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"
        }
      },
      portinfoVisible: false,
      selectionList: []
    };
  },
  created() {},
  mounted() {
    option.height = window.innerHeight - 500;
  },
  methods: {
    cellStyle() {
      return "padding:0;height:40px;";
    },
    init() {
      this.portinfoVisible = true;
    },
    closed() {
      this.$refs.crud.toggleSelection();
    },
    importCorp() {
      this.$emit("importCorp", {
        id: this.selectionList[0].id,
        name: this.selectionList[0].cname
      });
      this.portinfoVisible = false;
    },
    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.tableOption.height = window.innerHeight - 500;
        } else {
          this.tableOption.height = window.innerHeight - 200;
        }
      });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    //刷新触发
    refreshChange() {
      this.page = {
        pageSize: 10,
        pagerCount: 1,
        total: 0
      };
    },
    saveColumn(row, column) {
      console.log(row, column);
    },
    //列表内展开树节点
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      customerList({ parentId: parentId }).then(res => {
        resolve(res.data.data.records);
      });
    },
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      console.log(this.treeDeptId);
      this.onLoad(this.page);
    }
  }
};
</script>

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