Crmeb/admin/src/components/attrFrom/index.vue

<template>
  <div>
    <el-form ref="formDynamic" size="small" :model="formDynamic" v-loading="loading"  :rules="rules" class="attrFrom mb20" label-width="100px" @submit.native.prevent>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="规格名称：" prop="ruleName">
            <el-input  maxlength="20" v-model="formDynamic.ruleName" placeholder="请输入标题名称" />
          </el-form-item>
        </el-col>
        <el-col v-for="(item, index) in formDynamic.ruleValue" :key="index" :span="24" class="noForm">
          <el-form-item>
            <div class="acea-row row-middle"><span class="mr5">{{ item.value }}</span><i class="el-icon-circle-close" @click="handleRemove(index)" /></div>
            <div class="rulesBox">
              <el-tag
                v-for="(j, indexn) in item.detail"
                :key="indexn"
                closable
                size="medium"
                :disable-transitions="false"
                class="mb5 mr10"
                @close="handleClose(item.detail,indexn)"
              >
                {{ j }}
              </el-tag>
              <el-input
                v-if="item.inputVisible"
                ref="saveTagInput"
                v-model="item.detail.attrsVal"
                class="input-new-tag"
                size="small"
                @keyup.enter.native="createAttr(item.detail.attrsVal,index)"
                @blur="createAttr(item.detail.attrsVal,index)"
              />
              <el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+ 添加</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col v-if="isBtn" :span="24" class="mt10" style="padding-left: 0;padding-right: 0;">
          <el-col :span="8">
            <el-form-item label="规格：">
              <el-input v-model="attrsName" placeholder="请输入规格" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格值：">
              <el-input v-model="attrsVal" placeholder="请输入规格值" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" class="mr10" @click="createAttrName">确定</el-button>
            <el-button @click="offAttrName">取消</el-button>
          </el-col>
        </el-col>
        <Spin v-if="spinShow" size="large" fix />
      </el-row>
      <el-button v-if="!isBtn" type="primary" icon="md-add" class="ml40 mt10" @click="addBtn">添加新规格</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-form>
    <span class="footer acea-row">
      <el-button @click="resetForm('formDynamic')">取消</el-button>
      <el-button type="primary" :loading="loadingBtn" @click="handleSubmit('formDynamic')">确 定</el-button>
    </span>
  </div>
</template>

<script>
import { attrCreatApi, attrEditApi } from '@/api/store'
export default {
  name: 'CreatAttr',
  props: {
    currentRow: {
      type: Object,
      default: null
    },
    keyNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loadingBtn: false,
      loading: false,
      dialogVisible: false,
      inputVisible: false,
      inputValue: '',
      spinShow: false,
      grid: {
        xl: 3,
        lg: 3,
        md: 12,
        sm: 24,
        xs: 24
      },
      modal: false,
      index: 1,
      rules: {
        ruleName: [
          { required: true, message: '请输入规格名称', trigger: 'blur' }
        ]
      },
      formDynamic: {
        ruleName: '',
        ruleValue: []
      },
      attrsName: '',
      attrsVal: '',
      isBtn: false,
      results: [],
      result: [],
      ids: 0
    }
  },
  watch: {
    currentRow: {
      handler: function(val, oldVal) {
        this.formDynamic = val
      },
      immediate: true
    },
    keyNum: {
      deep: true,
      handler(val) {
        if( val>0 ) this.clear()
      }
    }
  },
  mounted() {
    this.formDynamic.ruleValue.map(item => {
      this.$set(item, 'inputVisible', false)
    })
  },
  methods: {
    resetForm(formName) {
      this.$msgbox.close()
      this.clear()
      this.$refs[formName].resetFields()
    },
    // 添加按钮
    addBtn() {
      this.isBtn = true
    },
    handleClose(item, index) {
      item.splice(index, 1)
    },
    // 取消
    offAttrName() {
      this.isBtn = false
    },
    // 删除
    handleRemove(index) {
      this.formDynamic.ruleValue.splice(index, 1)
    },
    // 添加规则名称
    createAttrName() {
      if (this.attrsName && this.attrsVal) {
        const data = {
          value: this.attrsName,
          detail: [
            this.attrsVal
          ]
        }
        this.formDynamic.ruleValue.push(data)
        var hash = {}
        this.formDynamic.ruleValue = this.formDynamic.ruleValue.reduce(function(item, next) {
          /* eslint-disable */
            hash[next.value] ? '' : hash[next.value] = true && item.push(next);
            return item
          }, [])
          this.attrsName = '';
          this.attrsVal = '';
          this.isBtn = false;
        } else {
          this.$message.warning('请添加规格名称');
        }
      },
      // 添加属性
      createAttr (num, idx) {
        if (num) {
          this.formDynamic.ruleValue[idx].detail.push(num);
          var hash = {};
          this.formDynamic.ruleValue[idx].detail = this.formDynamic.ruleValue[idx].detail.reduce(function (item, next) {
            /* eslint-disable */
            hash[next] ? '' : hash[next] = true && item.push(next);
            return item
          }, [])
          this.formDynamic.ruleValue[idx].inputVisible = false
        } else {
          this.$message.warning('请添加属性');
        }
      },
    showInput(item) {
      this.$set(item, 'inputVisible', true)
    },
      // 提交
      handleSubmit (name) {
        const data={
          "id": this.currentRow.id || 0,
          "ruleName": this.formDynamic.ruleName,
          "ruleValue": JSON.stringify(this.formDynamic.ruleValue)
        }
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.formDynamic.ruleValue.length === 0) {
              return this.$message.warning('请至少添加一条属性规格！');
            }
            this.loadingBtn = true
            this.loading = true
            setTimeout(() => {
              this.currentRow.id? attrEditApi(data).then(res => {
                this.$message.success('提交成功');
                this.$msgbox.close()
                this.clear();
                this.$emit('getList');
                this.loading = false
                this.loadingBtn = false
              }).catch(() => {
                this.loading = false
                this.loadingBtn = false
              }):attrCreatApi(data).then(res => {
                this.$message.success('提交成功');
                this.$msgbox.close()
                this.$emit('getList');
                this.clear();
                this.loading = false
                this.loadingBtn = false
              }).catch(() => {
                this.loading = false
                this.loadingBtn = false
              })
            }, 1200);
          } else {
            this.loading = false
            this.loadingBtn = false
            return false
          }
        })
      },
      clear () {
        this.$refs['formDynamic'].resetFields();
        this.formDynamic.ruleValue = [];
        this.formDynamic.ruleName=''
        this.isBtn = false;
        this.attrsName = '';
        this.attrsVal = '';
      },
      handleInputConfirm() {
        const inputValue = this.inputValue
        if (inputValue) {
          this.dynamicTags.push(inputValue)
        }
        this.inputVisible = false
        this.inputValue = ''
      }
    }
  }
</script>

<style scoped lang="scss">
  .button-new-tag {
    height: 28px;
    line-height: 26px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .footer{
    justify-content: flex-end;
  }
</style>