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

<template>
  <div>
    <el-dialog
      title="配件信息"
      :visible.sync="partVisible"
      width="80%"
      top="5vh"
      append-to-body
      @closed="closed"
      class="el-dialogDeep"
      v-dialog-drag
    >
      <span>
        <avue-crud
          ref="crud"
          :data="data"
          :option="tableOption"
          @refresh-change="refreshChange"
          @saveColumn="saveColumn"
          @selection-change="selectionChange"
          :summary-method="summaryMethod"
          :cell-style="cellStyle"
        >
          <template slot="menuLeft">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click.stop="rowAdd"
              >选择</el-button
            >
          </template>
          <template slot="menu" slot-scope="{ row, index }">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              @click.stop="rowEdit(row, index)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click.stop="rowDel(row, index)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
          <template slot="goodName" slot-scope="{ row, index }">
            <el-button
              size="small"
              type="text"
              style="padding:4px 10px;float:left"
              @click="rePick(row, index)"
              >选择</el-button
            >
            <span> {{ row.goodName }}</span>
          </template>
          <template slot="goodNumber" slot-scope="{ row }">
            <el-input
              v-if="row.$cellEdit"
              v-model="row.goodNumber"
              size="small"
              oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
              @change="priceChange(row)"
            ></el-input>
            <span v-else>{{ row.goodNumber }}</span>
          </template>
          <template slot="price" slot-scope="{ row }">
            <span>{{ row.price | micrometerFormat }}</span>
          </template>
          <template slot="corpId" slot-scope="{ row }">
            <span>{{ row.corpName }}</span>
          </template>
        </avue-crud>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="partVisible = false">取 消</el-button>
        <el-button type="primary" @click="importPart">确 定</el-button>
      </span>
    </el-dialog>
    <price-library ref="library" @librayToPart="librayToPart" />
  </div>
</template>

<script>
import option from "./configuration/mainList.json";
import { micrometerFormat } from "@/util/validate";
import priceLibrary from "@/components/price-Library/main";
import { delItem } from "@/api/exportTrade/part";
import _ from "lodash";
export default {
  data() {
    return {
      loading: true,
      data: [],
      tableOption: option,
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      partVisible: false,
      selectionList: [],
      goodsIndex: null,
      amoutSum: 0,
      partreData: null
    };
  },
  components: {
    priceLibrary
  },
  props: {
    partList: Array
  },
  filters: {
    micrometerFormat(val) {
      return micrometerFormat(val);
    }
  },
  created() {
    this.tableOption.height = window.innerHeight - 350;
  },
  methods: {
    cellStyle() {
      return "padding:0;height:40px;";
    },
    rePick(row, index) {
      this.partreData = {
        ...row,
        index: index
      };
      this.$refs.library.init(true, this.partreData);
    },
    rowCorpData(row) {
      this.data[row.index].corpName = row.cname;
    },
    priceChange(row) {
      row.amout = Number(
        _.multiply(
          Number(row.goodNumber ? row.goodNumber : 0),
          Number(row.price ? row.price : 0)
        )
      ).toFixed(2);
    },
    rowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          delItem(row.id)
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.data.splice(index, 1);
            })
            .finally(() => {
              this.$emit(
                "importPart",
                this.data,
                this.amoutSum,
                this.goodsIndex
              );
            });
        } else {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.data.splice(index, 1);
        }
      });
    },
    rowEdit(row, index) {
      if (row.$cellEdit == true) {
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    rowAdd() {
      this.$refs.library.init(true);
    },
    init(index) {
      // this.data = rows;
      this.goodsIndex = index;
      this.partVisible = true;
    },
    closed() {
      this.amoutSum = 0;
      this.partreData = null;
      this.$refs.crud.toggleSelection();
      this.$emit("partClosed");
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    importPart() {
      this.$emit("importPart", this.data, this.amoutSum, this.goodsIndex);
      this.partVisible = false;
    },
    librayToPart(rows, partreData) {
      this.partreData = partreData;
      console.log(this.partreData);
      if (this.partreData) {
        rows.forEach(e => {
          this.data.forEach((item, index) => {
            if (index == this.partreData.index) {
              item.goodId = e.itemId;
              item.goodTypeId = e.goodTypeId;
              item.goodTypeName = e.goodsTypeName;
              item.corpId = e.corpId;
              item.corpName = e.corpName;
              item.goodName = e.cname;
              item.price = e.purchaseAmount;
              item.goodNumber = this.partreData.goodNumber;
              item.amout = _.multiply(
                Number(
                  this.partreData.goodNumber ? this.partreData.goodNumber : 0
                ),
                Number(e.purchaseAmount ? e.purchaseAmount : 0)
              );
              item.$cellEdit = true;
            }
          });
        });
      } else {
        rows.forEach(e => {
          this.data.push({
            goodId: e.itemId,
            goodTypeId: e.goodTypeId,
            goodTypeName: e.goodsTypeName,
            corpId: e.corpId,
            corpName: e.corpName,
            goodName: e.cname,
            price: e.purchaseAmount,
            goodNumber: 1,
            amout: e.purchaseAmount,
            $cellEdit: true
          });
        });
      }
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    refreshChange() {
      this.getList(this.page, this.search);
    },
    saveColumn(row, column) {
      console.log(row, column);
    },
    summaryMethod({ columns, data }) {
      const sums = [];
      if (columns.length > 0) {
        columns.forEach((item, index) => {
          sums[0] = "合计";
          if (item.property == "goodNumber" || item.property == "amout") {
            let qtySum = 0;
            let amountSum = 0;
            this.amoutSum = 0;
            data.forEach(e => {
              qtySum = _.add(qtySum, Number(e.goodNumber));
              amountSum = _.add(amountSum, Number(e.amout));
              this.amoutSum = Number(amountSum).toFixed(2);
            });
            //数量总计
            if (item.property == "goodNumber") {
              sums[index] = qtySum ? qtySum.toFixed(2) : "0.00";
            }
            //金额总计
            if (item.property == "amout") {
              sums[index] = micrometerFormat(amountSum);
            }
          }
        });
      }
      return sums;
    }
  },
  watch: {
    partList: function(arr) {
      this.data = this.deepClone(arr);
    }
  }
};
</script>

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