tire-platform-ui/src/components/price-Library/main.vue

<template>
  <div>
    <el-dialog
      title="出口价格库"
      class="el-dialogDeep"
      :visible.sync="visible"
      width="60%"
      append-to-body
      @closed="closed"
      v-dialog-drag
    >
      <span>
        <avue-crud
          ref="crud"
          :data="data"
          :option="tableOption"
          :page.sync="page"
          :search.sync="search"
          @search-change="searchChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="getList"
          @saveColumn="saveColumn"
          @selection-change="selectionChange"
          :cell-style="cellStyle"
          :table-loading="loading"
        >
          <template slot="cnameSearch">
            <goods-select
              v-model="search.cname"
              :configuration="goodsConfiguration"
            />
          </template>
          <template slot="corpId" slot-scope="{ row }">
            <span>{{ row.corpName }}</span>
          </template>
        </avue-crud>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="importData"
          :disabled="selectionList.length == 0"
          >导 入</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import option from "./configuration/mainList.json";
import { getPricebank, getGoodstype } from "@/api/basicData/customerInquiry";
import { dateFormat } from "@/util/date";
import _ from "lodash";
export default {
  data() {
    return {
      visible: false,
      loading: true,
      data: [],
      search: {},
      tableOption: option,
      height: window.innerHeight - 500,
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      selectionList: [],
      goodsConfiguration: {
        multipleChoices: false,
        multiple: false,
        collapseTags: false,
        placeholder: "请点击右边按钮选择",
        dicData: [],
        clearable: true
      },
      partType: false,
      partreData: false
    };
  },
  props: {},
  filters: {},
  created() {
    getGoodstype(1, 500).then(res => {
      this.findObject(this.tableOption.column, "goodsTypeName").dicData =
        res.data.data.records;
    });
  },
  methods: {
    init(status, partreData) {
      this.partType = status;
      this.partreData = partreData;
      this.visible = true;
      this.getList(this.page, this.search);
    },
    cellStyle() {
      return "padding:0;height:40px;";
    },
    importData() {
      if (this.partreData) {
        if (this.selectionList.length != 1) {
          return this.$message.error("重新选择的时候只能选择一条数据");
        }
      }
      this.visible = false;
      this.$emit("importLibray", this.selectionList, this.partType);
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      if (params.dateValidity) {
        params.dateValidityStart = params.dateValidity[0];
        params.dateValidityEnd = params.dateValidity[1];
      }
      delete params.dateValidity;
      this.getList(this.page, params);
      done();
    },
    getList(page, params) {
      const data = {
        ...params,
        billType: "CG",
        statusTime: dateFormat(new Date(), "yyyy-MM-dd")
      };
      this.loading = true;
      getPricebank(page.currentPage, page.pageSize, data)
        .then(res => {
          this.data = res.data.data.records ? res.data.data.records : [];
          this.page.total = res.data.data.total;
          if (this.page.total > 0) {
            this.tableOption.height = window.innerHeight - 500;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    closed() {
      this.partreData = null;
      this.$refs.crud.toggleSelection();
    }
  },
  watch: {}
};
</script>

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