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

<template>
  <div>
    <div style="display:flex">
      <slot v-if="slot" name="slot"></slot>
      <span v-else style="width: 100%;">
        <el-select v-if="gysType == 'CK'" 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.code" :value="item.id">
          </el-option>
        </el-select>
        <el-select v-else size="small" v-model="value" placeholder="请选择" @input="$emit('balabala', value)"
          :disabled="disabled" filterable clearable style="width:100%" @clear="clear"
          :multiple="multiple ? multiple : false" :collapse-tags="collapseTags ? collapseTags : false"
          @change="corpChange">
          <template v-if="zhKey">
            <el-option v-for="item in corpList" :key="item.id" :label="label ? item[label] : item.cname"
              :value="item.cname">
            </el-option>
          </template>
          <template v-else>
            <el-option v-for="item in corpList" :key="item.id" :label="label ? item[label] : item.cname"
              :value="item.id">
            </el-option>
          </template>
        </el-select>
      </span>
      <el-button icon="el-icon-search" size="mini" v-if="label != 'shortName'" :disabled="disabled"
        @click="openDialog()"></el-button>
      <el-tooltip effect="dark" content="获取最新资料" placement="top-start">
        <el-button icon="el-icon-refresh" size="mini" v-if="label != 'shortName'" @click="refreshData"
          style="margin-left:0px;"></el-button>
      </el-tooltip>
    </div>
    <el-dialog :title="title" :visible.sync="corpVisible" width="80%" top="5vh" append-to-body @closed="closed"
      class="el-dialogDeep" :close-on-click-modal="false" 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="!multiple && 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,
        pageSizes: [10, 50, 100, 200, 300, 400, 500, 1000]
      },
      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,
    slot: Boolean,
    cropIndex: Number,
    corpType: String,
    multiple: Boolean,
    collapseTags: Boolean,
    gysType: String,
    treeType: String,
    label: String,
    belongtocompany: Number,
    zhKey: Boolean,
  },
  model: {
    prop: "value",
    event: "balabala"
  },
  async created() {
    this.tableOption = await this.getColumnData(this.getColumnName(51), option);
    let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
    this.title = getCustomerName(this.corpType);
    if (!this.slot) {
      allCropList({
        corpType: getCustomerCode(this.corpType),
        adminProfiles: userObj.role_name != "admin" ? userObj.user_id : null,
        corpsTypeName: this.treeType == "CK" ? "货代和物流" : null,
        belongtocompany: this.belongtocompany
      }).then(res => {
        this.corpList = res.data.data;
      });
    }
  },
  mounted() { },
  methods: {
    init() {
      this.openDialog();
    },
    refreshData() {
      if (!this.slot) {
        let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
        allCropList({
          corpType: getCustomerCode(this.corpType),
          adminProfiles: userObj.role_name != "admin" ? userObj.user_id : null,
          corpsTypeName: this.treeType == "CK" ? "货代和物流" : null,
          belongtocompany: this.belongtocompany
        }).then(res => {
          this.corpList = res.data.data;
        });
      }
    },
    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),
          cname: _this.treeType == "CK" ? "货代和物流" : null
        }).then(res => {
          resolve(
            res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              };
            })
          );
        });
      };
      this.corpVisible = true;
    },
    closed() {
      this.$refs.crud.toggleSelection();
    },
    importCorp() {
      if (this.multiple && this.selectionList.length == 0) return this.$message.error('请选择明细')
      this.$emit("balabala", this.selectionList[0].id);
      this.$emit("getCorpData", {
        ...this.selectionList[0],
        index: this.cropIndex
      });
      this.$emit("getCorpList", [...this.selectionList])
      this.corpVisible = false;
    },
    clear() {
      this.$emit("clear");
    },
    corpChange(row) {
      if (!this.multiple) {
        this.corpList.forEach(e => {
          if (row == e.id) {
            this.$emit("getCorpData", { ...e, index: this.cropIndex });
          }
        });
      } else {
        let arr = [];
        row.forEach(item => {
          let obj = { id: item };
          this.$set(obj, 'cname', this.corpList.find(e => e.id == item).cname);
          arr.push(obj)
        })
        this.$nextTick(() => {
          this.$emit('getCorpList', [...arr]);
        })
      }
    },
    refreshChange() {
      this.onLoad(this.page, this.search);
    },
    onLoad(page, params = { parentId: 0 }) {
      let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
      let queryParams = Object.assign({}, params, {
        size: page.pageSize,
        current: page.currentPage,
        corpsTypeId: this.treeDeptId,
        corpType: getCustomerCode(this.corpType),
        adminProfiles: userObj.role_name != "admin" ? userObj.user_id : null,
        corpsTypeName: this.treeType == "CK" ? "货代和物流" : null,
        belongtocompany: this.belongtocompany
      });
      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;
      }
    },
    // 更新数据
    updateData(belongToCompany) {
      let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
      allCropList({
        corpType: getCustomerCode(this.corpType),
        adminProfiles: !userObj.role_name.split(',').some(item => item == 'admin' || item == 'administrator') ? userObj.user_id : null,
        belongtocompany: belongToCompany,
      }).then(res => {
        this.corpList = res.data.data;
      });
    },
  }
};
</script>

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