supervise/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/baseInfo/commodityFily/commodity.vue

<template>
  <div>

    <div class="tab-header webtop">
      <!-- 标题 -->
      <div>添加商品</div>
      <!-- start 添加修改按钮 -->
      <div>
        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>

    <div class="listconadd">

      <el-card class="box-card" >
     <div class="item">
        <span class="item_text">品牌名称：</span>
        <el-select v-model="form.prodSid"  placeholder="" class="item_input" >
          <el-option v-for="(item,i) in sidlist" :key="i" :label="item.name" :value="item.sid" />
        </el-select>
      </div>
      <div class="item">
        <span class="item_text">商品名称：</span>
          <el-input v-model="form.name" placeholder="" class="item_input" clearable />
      </div>
      <div class="item">
        <span class="item_text">商品编码：</span>
        <el-input v-model="form.number" placeholder=""  class="item_input" clearable />
      </div>
      
      <div class="item" >
        <span style="font-size: 18px;margin-left: 90px;padding-right: 10px;">添加类别：</span> 
        <el-button  @click="caozuo"  type="primary">操作</el-button>
      </div>
    </el-card>
    </div>
    <el-dialog title="添加商品类别" :visible.sync="entry" width="60%">
     <el-form ref="form" :inline="true" :model="form"  label-width="80px">
        <div v-for="(item, index) in form.typeList" :key="index">
          <el-form-item
            label="商品类别"
            :prop="'typeList.' + index + '.name'"
            for="inputID"
          >
            <el-input id="inputID" v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item
            label="类别编码"
            :prop="'typeList.' + index + '.number'"
            for="inputIDs"
          >
          <el-input id="inputIDs" v-model="item.number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="index+1 == form.typeList.length" @click="addItem(item,index)"  size="small" type="primary">增加</el-button>
            <el-button v-if="index !== 0" @click="deleteItem(item, index)"  size="small" type="danger">删除</el-button>
          </el-form-item>
        </div>

        <div style="margin-top: 20px;margin-left: 40px; ">
            <el-button type="primary" @click="trues()">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import req from '@/api/baseInfo/commodityBrand/index.js'
  export default {
    data() {
      return {
       submitdisabled: false,
       entry: false,
        sidlist: [],
        form: {
          name: "",
          number: "",
          prodSid:'',
          typeList:[{
            name: "",
            number: ""
          }]
        },
        arry: {
          name:'',
          number:''
        },
        listQuery: {
          current: 1,
          size: 100,
          params: {
              name:''
          },
        }
      }
    },
    created() {
      this.getlist()
    },
    methods: {
      saveOrUpdate() {
        let arrlist=this.form.typeList
        let lastlist=arrlist.slice(-1)
        if(this.form.name && this.form.number && this.form.prodSid){
          if(lastlist[0].name && lastlist[0].number){
          req.saveList(this.form)
          .then(resp => {
            if (resp.success) {
              this.$message({
                showClose: true,
                type: 'success',
                message: resp.msg
              })
              this.handleReturn("true")
            } else {
              // 根据resp.code进行异常情况处理
            }
          })
          .catch(() => {})
            this.form= {
            name: "",
            number: "",
            prodSid:'',
            typeList:[{
              name: "",
              number: ""
            }]
            }
          }else{
            this.$alert('检测到您未输入类别内容，请输入或删除', '提示信息', {
             confirmButtonText: '确定',
             callback: action => {
              this.entry=true
          }
        });
          }
        }else{
          this.$message({
          message: '请检查内容是否填写',
          type: 'warning'
        });
        }
      },
      handleReturn(isreload) {
        if (isreload === 'true') this.$emit('reloadlist')
        this.$emit('doback')
      },
      getlist(){
        req.selectList().then((res)=>{
          if (res.success) {
          this.sidlist = res.data
        }
        })
      },
      addItem(item) {
        if(item.name && item.number){
          this.form.typeList.push({
           name: "",
           number: ""
         });
        }else{
          this.$message({
          message: '请输入内容后在添加',
          type: 'warning'
        });
        }

    },
    sure(form) {
      console.log(this.form.typeList.length, "length");
      this.$refs[form].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteItem(item, index) {
      this.form.typeList.splice(index, 1);
      console.log(this.form.typeList, "删除");
    },
    caozuo(){
      this.entry=true
    },
    trues(){
      this.entry=false
      console.log(this.form);
    }
    }
  }
</script>
<style lang="scss">
  .box-card {
    margin-left: 60px;
    margin-right: 60px;
    min-width: 70%;
    margin-top: 20px;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 15px;
      height: 40px;
      line-height: 40px;
      .item_text {
        flex: 0.8;
        font-size: 18px;
        text-align: right;
      }

      .item_input {
        flex: 4;
        font-size: 16px;
        margin-left: 10px;
        margin-right: 80px;
      }

      .item_left_input {
        width: 20%;
      }

      .item_left_text {
        height: 30px;
        margin-left: 20px;
        line-height: 30px;
        color: #018AD2;
        padding: 0px 15px;
        border: 1.5px solid #018AD2;
        border-radius: 5px;

      }

      .item_right {
        flex: 1;
        justify-items: center;

        .item_right_list_text {
          font-size: 16px;
        }

        .item_right_list_delect {
          color: #5E94FF;
          margin-left: 20px;
          font-size: 16px;
          text-decoration: underline;
        }
      }

    }

  }
</style>