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

<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <div slot="dialog__content">
        <el-alert class="Example" title="需要注意的事项" type="info">
          <template slot="title">
            <el-form label-width="80px">
              <el-form-item label="示例：">
                <div class="iconSize">属性名称：温度</div>
                <div class="iconSize">属性内容：常温；冷饮</div>
                <div class="iconSize">顾客下单时可选择【常温】 或 【冷饮】</div>
              </el-form-item>
            </el-form>
          </template>
        </el-alert>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="属性名称：" prop="name">
            <el-input
              style="width: 80%"
              placeholder="请输入属性名称"
              v-model="ruleForm.name"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="属性内容：" prop="value">
            <el-tag
              :key="tag"
              v-for="tag in ruleForm.value"
              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-form-item>
        </el-form>
      </div>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "属性",
        show: false,
        width: "80%",
      },
      modalData: {},
      inputValue: "",
      inputVisible: false,
      ruleForm: {
        name: "",
        value: [],
      },
      rules: {
        name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
        value: [
          {
            required: true,
            message: "请输入属性内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  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.ruleForm.resetFields();
          });
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
    },
    handleClose(tag) {
      this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
    },
    //聚焦
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.ruleForm.value.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认修改",
          type: "primary",
          loading: this.isLoading,
          // submit: true,
          handle: () => {
            this.$refs.ruleForm.validate((valid) => {
              if (valid) {
                this.$emit("getAttribute", this.ruleForm);
                this.toggle();
              }
            });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.Example {
  margin: 0 0 20px 20px;
  width: 80%;
}
.iconSize {
  font-size: 15px;
  //   padding: 3px;
}
.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>