VXE Grid 行编辑模式

效果图

<template>
  <div>
    <vxe-modal
      v-model="dlgShow"
      :position="{ top: 30 }"
      width="1200"
      min-width="550"
      min-height="260"
      height="500"
      resize
      size="small"
      show-zoom
      destroy-on-close
      @show="show"
    >
      <template #title>
        <div class="vxe-modal-header-set">
          <div class="header-btn-list">
            <h3 class="header-title">发票明细</h3>
            <div class="btn-wrap-set">
              <vxe-button
                class="btn"
                status="primary"
                content="添加"
                @click="add"
              ></vxe-button>
              <vxe-button
                class="btn"
                status="info"
                @click="close"
                content="取消"
              ></vxe-button>
            </div>
          </div>
        </div>
      </template>
      <vxe-grid
        border
        resizable
        ref="table"
        size="small"
        :loading="loading"
        :columns="tableColumn"
        :data="tableData"
        height="auto"
        :edit-rules="validRules"
        :edit-config="{ trigger: 'manual', mode: 'row' }"
        @edit-closed="editClose"
      >
        <template #fwmc_edit="{ row }">
          <vxe-input v-model="row.fwmc"></vxe-input>
        </template>
        <template #ggxh_edit="{ row }">
          <vxe-input v-model="row.ggxh"></vxe-input>
        </template>
        <template #fpdw_edit="{ row }">
          <vxe-input v-model="row.fpdw"></vxe-input>
        </template>
        <template #fpdj_edit="{ row }">
          <vxe-input type="number" v-model="row.fpdj"></vxe-input>
        </template>
        <template #fpshl_edit="{ row }">
          <vxe-input type="integer" v-model="row.fpshl"></vxe-input>
        </template>
        <template #fpsl_edit="{ row }">
          <vxe-select v-model="row.fpsl" placeholder="请选择" size="small">
            <vxe-option
              v-for="item in shuilOptions"
              :key="item.dictValue"
              :value="item.dictValue"
              :label="item.dictLabel"
            ></vxe-option>
          </vxe-select>
        </template>
        <template #fpsl_default="{ row }">
          <span>{{ row.fpsl }}%</span>
        </template>

        <template #fpse_edit="{ row }">
          <span>{{ row.fpse }}</span>
        </template>
        <template #sjhj_edit="{ row }">
          <span>{{ row.sjhj }}</span>
        </template>
        <template #fpje_edit="{ row }">
          <span>{{ row.fpje }}</span>
        </template>

        <template #operate="{ row }">
          <template v-if="$refs.table.isActiveByRow(row)">
            <vxe-button
              size="mini"
              icon="fa fa-save"
              status="primary"
              title="保存"
              circle
              @click="saveRowEvent(row)"
            ></vxe-button>
            <vxe-button
              size="mini"
              icon="fa vxe-icon--close"
              circle
              title="取消"
              @click="canCelRowEvent(row)"
            ></vxe-button>
          </template>
          <template v-else>
            <vxe-button
              size="mini"
              circle
              icon="fa fa-edit"
              title="编辑"
              @click="editRowEvent(row)"
            ></vxe-button>
            <vxe-button
              size="mini"
              icon="fa fa-trash"
              circle
              title="删除"
              @click="delRowEvent(row)"
            ></vxe-button>
          </template>
        </template>
      </vxe-grid>
    </vxe-modal>
  </div>
</template>
<script>
import {
  listCwfpglmx,
  addCwfpglmx,
  updateCwfpglmx,
  delCwfpglmx,
} from "@/api/erp/cw/cwfpglmx";
import { guid } from "@/utils/tool";

export default {
  name: "wzjxfpmxwin",

  data() {
    return {
      dlgShow: false,
      loading: false,
      editRow: null,
      //发票id
      fpid: "",
      //发票类型
      fplx: "",
      validRules: {
        fwmc: [{ required: true, message: "必须填写" }],
        ggxh: [{ required: true, message: "必须填写" }],
        fpdw: [{ required: true, message: "必须填写" }],
        fpdj: [
          { required: true, message: "必须填写" },
          {
            validator: ({ cellValue }) => {
              return new Promise((resolve, reject) => {
                if (/^\d+(.\d{1,8})?$/.test(cellValue) == false) {
                  reject(new Error("小数位的长度需在1-8之间"));
                } else {
                  resolve();
                }
              });
            },
          },
        ],
        fpshl: [{ required: true, message: "必须填写" }],
        fpsl: [{ required: true, message: "必须填写" }],
      },
      tableColumn: [
        { type: "seq", title: "序号", width: 60, align: "center" },
        {
          field: "fwmc",
          title: "名称",
          align: "left",
          width: 140,
          editRender: {},
          slots: { edit: "fwmc_edit" },
        },
        {
          field: "ggxh",
          title: "规格型号",
          width: 120,
          align: "left",
          showOverflow: "tooltip",
          editRender: {},
          slots: { edit: "ggxh_edit" },
        },
        {
          field: "fpdw",
          title: "单位",
          align: "left",
          width: 100,
          editRender: {},
          slots: { edit: "fpdw_edit" },
        },

        {
          field: "fpshl",
          title: "数量",
          align: "left",
          width: 100,
          editRender: {},
          slots: { edit: "fpshl_edit" },
        },
        {
          field: "fpdj",
          title: "不含税单价",
          align: "left",
          width: 120,
          editRender: {},
          slots: { edit: "fpdj_edit" },
        },
        {
          field: "fpje",
          title: "金额",
          align: "left",
          width: 100,
          editRender: {},
          slots: { edit: "fpje_edit" },
        },
        {
          field: "fpsl",
          title: "税率",
          align: "left",
          width: 100,
          editRender: {},
          slots: { edit: "fpsl_edit", default: "fpsl_default" },
        },
        {
          field: "fpse",
          title: "税额",
          align: "left",
          width: 100,
          editRender: {},
          slots: { edit: "fpse_edit" },
        },
        {
          field: "sjhj",
          title: "税价合计",
          align: "left",
          width: 100,
          editRender: {},
          slots: { edit: "sjhj_edit" },
        },
        { title: "操作", slots: { default: "operate" } },
      ],
      tableData: [],
      shuilOptions: [],
    };
  },
  created() {
    this.getFPSL();
  },
  watch: {
    editRow: {
      handler: function (val) {
        if (val == null) return;
        try {
          this.editRow.fpje = val.fpshl * val.fpdj;
        } catch {
          this.editRow.fpje = 0;
        }
        try {
          let se = (this.editRow.fpje * val.fpsl) / 100;
          this.editRow.fpse = Math.round((se + Number.EPSILON) * 100) / 100;
        } catch {
          this.editRow.fpse = 0;
        }
        try {
          this.editRow.sjhj = this.editRow.fpje + this.editRow.fpse;
        } catch {
          this.editRow.sjhj = 0;
        }
      },
      deep: true,
    },
  },
  methods: {
    async validAllEvent(back) {
      const $table = this.$refs.table;
      const errMap = await $table.validate(true).catch((errMap) => errMap);
      if (errMap) {
        back(false);
      } else {
        back(true);
      }
    },

    getFPSL() {
      this.getDicts("tax_ratio").then((response) => {
        let options = response.data;
        this.shuilOptions = options;
      });
    },
    openDlg(fpid, type) {
      this.fpid = fpid;
      this.fplx = type + "";
      this.editRow = null;
      this.getList();
      this.dlgShow = true;
    },
    close() {
      this.dlgShow = false;
    },
    editClose({ row }) {
      if (this.editRow != null) this.$refs.table.setActiveRow(this.editRow);
    },
    add() {
      this.validAllEvent((ret) => {
        if (ret == false) return;
        if (this.editRow != null) return;
        let row = {
          pkid: guid(),
          fpid: this.fpid,
          fplx: this.fplx,
          fwmc: "",
          ggxh: "",
          fpdw: "",
          fpje: "",
          fpdj: "",
          fpshl: "",
          fpsl: "",
          fpse: "",
          sjhj: "",
          _state: "add",
        };
        this.tableData.push(row);
        this.editRow = row;
        this.$refs.table.setActiveRow(row);
      });
    },
    show() {
      if (this.editRow != null) {
        this.$refs.table.setActiveRow(this.editRow);
      }
    },
    canCelRowEvent(row) {
      this.editRow = null;
      this.$refs.table.clearActived();
      this.getList();
    },
    delRowEvent(row) {
      this.$XModal.confirm("您确定要删除吗？").then((type) => {
        if (type == "confirm") {
          delCwfpglmx(row.pkid)
            .then((response) => {
              this.loading = false;
              this.editRow = null;
              if (response.code == 200) {
                this.$refs.table.remove(row);

                this.$XModal.message({
                  content: response.msg,
                  status: "success",
                });
              } else {
                this.$XModal.message({
                  content: response.msg,
                  status: "error",
                });
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    saveRowEvent() {
      this.validAllEvent((ret) => {
        if (ret == false) return;
        this.loading = true;
        if (this.editRow._state == "add") {
          addCwfpglmx(this.editRow)
            .then((response) => {
              this.loading = false;
              if (response.code == 200) {
                this.editRow = null;
                this.$refs.table.clearActived();
                this.$XModal.message({
                  content: response.msg,
                  status: "success",
                });
              } else {
                this.$XModal.message({
                  content: response.msg,
                  status: "error",
                });
              }
            })
            .finally(() => {
              this.loading = false;
            });
        } else if (this.editRow._state == "edit") {
          updateCwfpglmx(this.editRow)
            .then((response) => {
              this.loading = false;
              if (response.code == 200) {
                this.editRow = null;
                this.$refs.table.clearActived();
                this.$XModal.message({
                  content: response.msg,
                  status: "success",
                });
              } else {
                this.$XModal.message({
                  content: response.msg,
                  status: "error",
                });
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    editRowEvent(row) {
      this.editRow = row;
      this.editRow._state = "edit";
      this.$refs.table.setActiveRow(row);
    },
    getList() {
      this.loading = true;
      listCwfpglmx({
        fpid: this.fpid,
        fplx: this.fplx,
      }).then((response) => {
        this.tableData = response.rows;
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/global.scss";
::v-deep .vxe-modal--wrapper .vxe-modal--content {
  padding: 2px 2px 0px 2px;
}
</style>