yos_web/src/HDrpManagement/ProductGroupMag/modules/add.vue

<template>
  <div class="inline-16">
    <el-button type="primary" size="small" @click="dialogTableVisible=true" v-if="type == 'add'">新增产品组</el-button>
    <el-button type="text" size="small" @click="editBtn" v-else>编辑</el-button>
    <el-dialog title="新增产品" :visible.sync="dialogTableVisible" width="30%">
      <el-row :gutter="20">
        <el-form label-position="right" ref="form" :rules="rules" inline label-width="100px" :model="form" size="small">
          <el-col :span="24">
            <el-form-item label="产品组名称" prop="groupname">
              <el-input v-model="form.groupname" placeholder="请输入商品组名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="品牌" prop="sa_brandid">
              <el-select v-model="form.sa_brandid" placeholder="请选择品牌">
                <el-option
                  v-for="item in brandData"
                  :key="item.sa_brandid"
                  :label="item.brandname"
                  :value="item.sa_brandid"
                  size="small">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品" prop="itemno">
              <el-select v-model="form.itemno" placeholder="请选择商品">
                <el-option
                  v-for="item in productData"
                  :key="item.itemno"
                  :label="item.itemname"
                  :value="item.itemno"
                  size="small">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="自定义标签" prop="tag" style="margin-bottom:0px; !important">
              <el-tag
                :key="tag"
                v-for="tag in form.tag"
                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">+ New 标签</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <div>
          <el-button @click="dialogTableVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="submit" size="small">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogTableVisible:false,
      /* 当前选择的组 */
      seleteGroup:'',
      inputVisible: false,
      inputValue: '',
      form:{
        sa_brandid:'',
        groupname:'',
        itemno:'',
        tag:[]
      },
      rules:{
        sa_brandid: [
          { required: true, message: '请选择品牌', trigger: 'blur' },
        ],
        groupname: [
          { required: true, message: '请输入商品组名称', trigger: 'blur' },
        ],
        itemno: [
          { required: true, message: '请选择商品', trigger: 'blur' },
        ]
      }
    }
  },
  props:['type','brandData','productData','groupData'],
  watch: {
    
  },
  created() {
    
  },
  methods: {
    submit() {
      this.$refs.form.validate(async val => {
        if(val) {
          let res = await this.$api.requested({
            "id": "20220922164303",
            "version":1,
            "content": {
                "sa_itemgroupid":this.type == 'add' ? 0 : this.groupData.sa_itemgroupid,    
                "sa_brandid":this.form.sa_brandid,
                "groupname":this.form.groupname,
                "itemno":this.form.itemno,
                "tag": this.form.tag
            }
          })
          this.tool.showMessage(res,() => {
            this.$emit('addSuccess')
            this.dialogTableVisible = false
          })
        }
      })
    },
    editBtn() {      
      this.dialogTableVisible = true
      this.seleteGroup = this.groupData
      let temp = JSON.parse(JSON.stringify(this.seleteGroup))
      this.form = {
        sa_brandid:temp.sa_brandid,
        groupname:temp.groupname,
        itemno:temp.itemno,
        tag:temp.tag1
      }
    },
    handleClose(tag) {
      this.form.tag.splice(this.form.tag.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.tag.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}

</script>
<style scoped>
/deep/.el-dialog__body {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}
/deep/.dialog-footer {
  margin-top: 10px !important;
}
/deep/.el-form-item__content {
  width: calc(100% - 100px) !important;
}
/deep/.el-select {
  width: 100% !important;
}
/deep/.el-form-item {
  width: 100% !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
  margin-bottom: 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;
}
</style>