merchant-web/src/views/modules/product/popup/add-stock.vue

<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="100px"
      :modalConfig="modalConfig"
      :modalCols="modalCols"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <obj-table-plus
        v-show="tableData.length > 1"
        style="height: calc(100vh - 120px - 240px)"
        slot="dialog__after"
        ref="oTable"
        :toolbarProp="{}"
        @query="queryTableData"
        v-model="tableData"
        :tableCols="tableCols"
        :tableProp="tableProp"
        :tableEvent="tableEvent"
        :isPagination="false"
        :enableAutoQuery="false"
      >
      </obj-table-plus>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //监控对象数据
      tableData: [],
      //表格属性
      tableProp: {
        height: "auto",
        border: true,
        "auto-resize": false,
        "print-config": {},
      },
      toolbarProp: {},
      tableEvent: {},
      modalConfig: {
        title: "修改库存",
        show: false,
        width: "60%",
      },
      modalData: {},
    };
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
        this.$nextTick(() => {
          this.$refs.oTable.doLayout();
        });
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.modalData = {};
          this.$nextTick(() => {
            this.$refs.oTable.complete(false);
          });
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
      this.tableData = row.productSpecificationList;
      console.log(this.modalData);
    },
  },
  computed: {
    modalCols() {
      if (this.tableData.length == 1) {
        return [
          {
            label: "库存",
            prop: "",
            type: "Input",
            width: "300px",
            rules: { required: true, message: "请输入库存数量" },
            type: "jsx",
            render: () => {
              return (
                <el-input-number
                  v-model={this.modalData.productSpecificationList[0].stockNum}
                  min={0}
                  label="描述文字"
                ></el-input-number>
              );
            },
          },
        ];
      }
    },
    tableCols() {
      return [
        {
          title: "序号",
          type: "seq",
          width: "60px",
          align: "center",
        },
        {
          title: "规格",
          field: "attributeValue",
          align: "center",
        },
        {
          title: "库存",
          field: "salePrice",
          align: "center",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.stockNum}
                  placeholder="请输入数量"
                ></el-input-number>
              </div>
            );
          },
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: debounce(() => {
            this.toggle();
          }, 300),
        },
        {
          label: this.isAdd ? "确认添加" : "确认编辑",
          type: "primary",
          submit: true,
          handle: debounce(() => {
            if (this.tableData.length == 1) {
              this.$api.mer_admin
                .saveProductBase(this.modalData)
                .then((res) => {
                  console.log(res);
                  this.toggle();
                  this.$emit("queryList");
                });
            } else {
              this.modalData.productSpecificationList = this.tableData;
              this.$api.mer_admin
                .saveProductBase(this.modalData)
                .then((res) => {
                  console.log(res);
                  this.toggle();
                  this.$emit("queryList");
                });
            }
            console.log(this.modalData);
          }, 300),
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>