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

<template>
  <div>
    <el-dialog
      title="配件信息"
      :visible.sync="partVisible"
      width="60%"
      append-to-body
      @closed="closed"
      v-dialog-drag
    >
      <span>
        <avue-crud
          ref="crud"
          :data="data"
          :option="tableOption"
          @refresh-change="refreshChange"
          @saveColumn="saveColumn"
          @selection-change="selectionChange"
          :summary-method="summaryMethod"
        >
          <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" @click.stop="rowDel(row, index)"
              >删除</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 }">
            <el-input
              v-if="row.$cellEdit"
              v-model="row.price"
              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.price | micrometerFormat }}</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>
  </div>
</template>

<script>
import option from "./configuration/mainList.json";
import { micrometerFormat } from "@/util/validate";
import _ from "lodash";
export default {
  data() {
    return {
      loading: true,
      data: [],
      tableOption: option,
      height: window.innerHeight - 500,
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      partVisible: false,
      selectionList: [],
      goodsIndex: null,
      amoutSum:0
    };
  },
  props: {
    partList: Array
  },
  filters: {
    micrometerFormat(val) {
      return micrometerFormat(val);
    }
  },
  created() {},
  methods: {
    rePick(row,index){
            this.$message({
        type: "warning",
        message: "正在开发中!"
      });
    },
    priceChange(row) {
      row.amout = _.multiply(
        Number(row.goodNumber ? row.goodNumber : 0),
        Number(row.price ? row.price : 0)
      );
    },
    rowDel(row, index) {
      this.$message({
        type: "success",
        message: "删除成功!"
      });
      this.data.splice(index, 1);
    },
    rowAdd() {
      this.$emit("partOpen", true);
    },
    init(rows, index) {
      this.data = rows;
      this.goodsIndex = index;
      this.partVisible = true;
    },
    closed() {
      this.amoutSum=0
      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;
    },
    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=amountSum
            });
            //数量总计
            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) {
      console.log(arr);
      this.data = arr;
    }
  }
};
</script>

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