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>
          <el-row>
            <el-input
              style="width: 80%; margin: 0 20px 0 0"
              placeholder="请输入内容"
              v-model="input"
              clearable
            >
            </el-input>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>

          <el-row>
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+新增规格</el-button
            ></el-row
          >
        </div>
        <el-row type="flex" justify="center">
          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row
        >
      </div>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //监控对象数据
      tableData: [],
      //表格属性
      tableProp: {},
      modalConfig: {
        title: "属性",
        show: false,
        width: "80%",
      },
      modalData: {},
      AttributeData:[{
        attributeName:"",
        attributeValue:[]
      }], //
      input: "",
      dynamicTags: [],
      inputVisible: false,
      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(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //添加属性
    addAttribute() {
      console.log("添加属性");
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认修改",
          type: "primary",
          loading: this.isLoading,
          // submit: true,
          handle: () => {},
        },
      ];
    },
  },
  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>