Smart_platform_ui/src/components/part-library/main.vue

<template>
  <div>
    <el-dialog title="配件库" class="el-dialogDeep" :visible.sync="visible" top="5vh" width="80%" append-to-body
      @closed="closed" :close-on-click-modal="false" v-dialog-drag>
      <span>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="选择配件价格库" name="first">
            <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="corpCodeSearch">
                <crop-select v-model="search.corpId" gysType="CK" corpType="GYS"></crop-select>
              </template>
              <template slot="menuLeft">
                <el-button type="primary" size="small" @click.stop="addRow" :disabled="selectionList.length==0">批量选择
                </el-button>
              </template>
            </avue-crud>
          </el-tab-pane>
          <el-tab-pane label="已选择价格库" name="second">
            <avue-crud ref="crud2" :data="pickData" :option="tableOption2" @refresh-change="refreshChange"
              :summary-method="summaryMethod" :cell-style="cellStyle">
              <template slot="goodNumber" slot-scope="{ row }">
                <el-input v-model="row.goodNumber" size="small" @change="priceChange(row)"></el-input>
              </template>
              <template slot="menu" slot-scope="{ row, index }">
                <el-button type="text" size="small" @click.stop="rowDel(row, index)" icon="el-icon-delete">删除
                </el-button>
              </template>
            </avue-crud>
          </el-tab-pane>
        </el-tabs>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="importData" :disabled="pickData.length == 0">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import option from "./configuration/mainList.json";
import tableOption2 from "./configuration/mainList2.json";
import {
  getPricebank,
  getPartTree,
  getGoodstype
} from "@/api/basicData/customerInquiry";
import { dateFormat } from "@/util/date";
import { costCal } from "@/util/calculate";
import _ from "lodash";
import { Switch } from "element-ui";
export default {
  data() {
    return {
      activeName: 'first',
      visible: false,
      loading: true,
      data: [],
      search: {},
      tableOption: option,
      height: window.innerHeight - 500,
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      selectionList: [],
      partType: null,
      pickData: [],
      tableOption2: tableOption2,
    };
  },
  props: {},
  filters: {},
  created() {
    if (localStorage.getItem("roleName") == "贸易") {
      this.findObject(this.tableOption.column, "taxRate").hide = true;
      this.findObject(this.tableOption.column, "taxRate").showColumn = false;
      this.findObject(this.tableOption.column, "price").hide = true;
      this.findObject(this.tableOption.column, "price").showColumn = false;
    }
  },
  methods: {
    init(status, partData) {
      this.partType = status;
      this.pickData = partData ? JSON.parse(partData) : []
      this.visible = true;
      this.getList(this.page, this.search);
    },
    addRow() {
      this.selectionList.forEach(e => {
        this.pickData.push({
          goodId: e.itemId,
          goodTypeId: e.goodTypeId,
          goodTypeName: e.goodsTypeName,
          ename: e.ename,
          corpId: e.corpId,
          corpName: e.corpCode,
          goodName: e.ename,
          price: e.purchaseAmount,
          goodNumber: 1,
          amout: e.purchaseAmount,
          partsCost: costCal(e.price, e.taxRate)
        });
      });
      this.$refs.crud.toggleSelection();
    },
    rowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.pickData.splice(index, 1);
      });
    },
    cellStyle() {
      return "padding:0;height:40px;";
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.search = this.deepClone(params);
      this.getList(this.page, params);
      done();
    },
    refreshChange() {
      this.getList(this.page, this.search);
    },
    getgoodsTypeName(val) {
      let name = null
      switch (val) {
        case 0:
          name = '阀门配件'
          break;
        case 1:
          name = '瓶帽配件'
          break;
        case 2:
          name = '特殊处理'
          break;
        case 3:
          name = '包装方式'
          break;
        case 4:
          name = '特殊颜色'
          break;
        case 5:
          name = '认证'
          break;
        case 6:
          name = '其他'
          break;

      }
      return name
    },
    getList(page, params) {
      let data = {
        ...params,
        billType: "CG",
        goodsTypeName:this.getgoodsTypeName(this.partType),
        statusTime: dateFormat(new Date(), "yyyy-MM-dd")
      };
      let obj = Object.assign(data, this.search);
      this.loading = true;
      getPricebank(page.currentPage, page.pageSize, obj)
        .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 - 350;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    priceChange(row) {
      row.amout = _.multiply(row.price, row.goodNumber)
    },
    importData() {
      this.$emit("importPart", this.pickData, this.partType);
      this.visible = false;
    },
    closed() {
      this.pickData = null;
      this.activeName = 'first';
      this.pickData = [];
      this.$refs.crud.toggleSelection();
    }
  },
  watch: {
  }
};
</script>

<style scoped lang="scss">

</style>