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

<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <div slot="dialog__content">
        <div v-for="(item, index) in AttributeData" :key="index">
          <el-row>
            <el-input
              style="width: 80%; margin: 0 20px 0 0"
              placeholder="请输入属性"
              v-model="item.attributeName"
              clearable
            >
            </el-input>
            <el-button
              @click="deleteAttribute(index)"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-row>

          <el-row>
            <el-tag
              :key="tag"
              v-for="tag in item.attributeValue"
              closable
              :disable-transitions="false"
              @close="handleClose(index, tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="item.inputVisible"
              v-model="inputValue"
              :ref="`saveTagInput${index}`"
              size="small"
              @keyup.enter.native="handleInputConfirm(index)"
              @blur="handleInputConfirm(index)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(index)"
              >+新增规格</el-button
            ></el-row
          >
        </div>
        <el-row type="flex" justify="center">
          <el-button @click="addAttribute" type="text"
            >+添加其他属性</el-button
          ></el-row
        >
        <obj-table-plus
          slot="dialog__after"
          style="height: 50vh"
          ref="oTable"
          @query="queryTableData"
          v-model="tableData"
          :tableCols="tableCols"
          :tableProp="tableProp"
          :toolbarProp="toolbarProp"
          :tableEvent="tableEvent"
          :enableAutoQuery="false"
        >
          <!-- <div slot="tableTop" class="mb-2">
            <el-button type="primary" size="mini" @click="calculation"
              >计算属性</el-button
            >
          </div> -->
        </obj-table-plus>
      </div>
    </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": {},
        "row-config": { isCurrent: true, isHover: true },
        "highlight-hover-row": true,
        "highlight-current-row": true,
      },
      toolbarProp: {},
      tableEvent: {},
      modalConfig: {
        title: "属性",
        show: false,
        width: "80%",
      },
      modalData: {},
      AttributeData: [
        {
          attributeName: "",
          attributeValue: [],
          inputVisible: false,
        },
      ], //
      input: "",
      dynamicTags: [],
      inputValue: "",
    };
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e.row));
      }
      return {
        add: () => {
          this.modalConfig.title = "属性";
          this.$nextTick(() => {
            this.modalData = {};
            this.$refs.modal.resetFields();
          });
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
    },
    handleClose(index, tag) {
      this.AttributeData[index].attributeValue.splice(
        this.AttributeData[index].attributeValue.indexOf(tag),
        1
      );
    },
    //聚焦
    showInput(index) {
      console.log(index);

      this.AttributeData[index].inputVisible = true;
      this.$nextTick(() => {
        console.log(this.$refs[`saveTagInput${index}`]);
        this.$refs[`saveTagInput${index}`][0].focus();
      });
    },
    handleInputConfirm(index) {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.AttributeData[index].attributeValue.push(inputValue);
      }
      this.AttributeData[index].inputVisible = false;
      this.inputValue = "";
      this.calculation();
    },
    //添加属性
    addAttribute() {
      this.AttributeData.push({
        attributeName: "",
        attributeValue: [],
        inputVisible: false,
      });
      console.log(this.AttributeData);
    },
    //删除属性
    deleteAttribute(index) {
      this.AttributeData.splice(index, 1);
      this.calculation();
    },
    //计算属性
    calculation() {
      let data = [];
      let list = [];
      for (let i = 0; i < this.AttributeData.length; i++) {
        if (i == 0) {
          data = this.AttributeData[i].attributeValue.map((item) => {
            return this.AttributeData[i].attributeName + item;
          });
        } else {
          data.forEach((it) => {
            this.AttributeData[i].attributeValue.forEach((e) => {
              let name = this.AttributeData[i].attributeName;
              list.push(it + "/" + name + e);
            });
          });
          data = list;
          list = [];
        }
      }
      this.tableData = data.map((item) => {
        return {
          attributeValue: item,
          salePrice: "",
          costPrice: "",
          stockNum: "",
        };
      });
      console.log(data);
    },
  },
  computed: {
    tableCols() {
      return [
        { title: "序号", type: "seq", width: "60px", fixed: "left" },
        {
          title: "属性",
          field: "attributeValue",
          align: "center",
          "min-width": "160px",
        },
        {
          title: "价格",
          field: "salePrice",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.salePrice}
                  placeholder="请输入价格"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "成本",
          field: "costPrice",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.costPrice}
                  placeholder="请输入成本"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "库存",
          field: "stockNum",
          align: "center",
          "min-width": "160px",
          type: "jsx",
          render: ({ row }) => {
            return (
              <div>
                <el-input-number
                  min={0}
                  size="small"
                  v-model={row.stockNum}
                  placeholder="请输入库存"
                ></el-input-number>
              </div>
            );
          },
        },
        {
          title: "操作",
          fixed: "right",
          width: "150px",
          type: "jsx",
          align: "center",
          render: (row) => {
            let remove = () => {
              this.tableData.splice(row.$rowIndex, 1);
            };
            return (
              <el-popconfirm onConfirm={remove} title="确认删除？" class="ml-1">
                <el-button type="danger" size="mini" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            );
          },
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认修改",
          type: "primary",
          loading: this.isLoading,
          // submit: true,
          handle: () => {
            let salePrice = ""; //价格范围
            let stockNum = ""; //库存范围
            let minSalePrice = Math.min.apply(
              Math,
              this.tableData.map((item) => {
                return item.salePrice;
              })
            );
            let maxSalePrice = Math.max.apply(
              Math,
              this.tableData.map((item) => {
                return item.salePrice;
              })
            );
            let minStockNum = Math.min.apply(
              Math,
              this.tableData.map((item) => {
                return item.stockNum;
              })
            );
            let maxStockNum = Math.max.apply(
              Math,
              this.tableData.map((item) => {
                return item.stockNum;
              })
            );
            if (minSalePrice == maxSalePrice) {
              salePrice = maxSalePrice;
            } else {
              salePrice = minSalePrice + "~" + maxSalePrice;
            }
            if (minStockNum == maxStockNum) {
              stockNum = maxStockNum;
            } else {
              stockNum = minStockNum + "~" + maxStockNum;
            }

            this.$emit(
              "getSpecs",
              this.tableData,
              this.AttributeData,
              salePrice,
              stockNum
            );
            this.toggle();
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>