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.name"  placeholder="请选择品牌名称" class="item_input" @change="getType">
            <el-option v-for="(item,i) in crudeList" :key="i" :label="item.name" :value="item.number" />
          </el-select>
        </div>
        <div class="item">
          <span class="item_text">品牌编号：</span>
          <el-input v-model="form.number" placeholder="" :readonly="true" class="item_input" clearable />
        </div>
        <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.prodSid" />
          </el-select>
        </div>
        <div class="item">
          <span class="item_text">类别名称：</span>
          <el-input v-model="form.typeList.name" placeholder="" class="item_input" clearable />
        </div>
        </el-card>
  
      </div>
  
    </div>
  </template>
  
  <script>
    import req from '@/api/baseInfo/commodityBrand/index.js'
    export default {
      data() {
        return {
         submitdisabled: false,
          crudeList: [],
          crudeLists: [],
          flowmeterLists: [],
          flowmeterList: [],
          sidlist: [],
          form: {
            name: "",
            number: "",
            prodSid:'',
            typeList:[
              {
                name:'',
                number:''
              }
            ]
          },
          listQuery: {
            current: 1,
            size: 100,
            params: {
                name:''
            },
          },
        }
      },
      created() {
        this.getlist()
        this.getSid()
      },
      methods: {
        saveOrUpdate() {
          // req.save(this.formobj)
          //   .then(resp => {
          //     if (resp.success) {
          //       this.$message({
          //         showClose: true,
          //         type: 'success',
          //         message: resp.msg
          //       })
          //       this.handleReturn("true")
          //     } else {
          //       // 根据resp.code进行异常情况处理
          //     }
          //   })
          //   .catch(() => {})
          console.log(this.form)
          
        },
        handleReturn(isreload) {
          if (isreload === 'true') this.$emit('reloadlist')
          this.form = {
            name: "",
            number: "",
          }
          this.$emit('doback')
        },
        getlist(){
          req.selectList().then((res)=>{
            if (res.success) {
            this.crudeLists = res.data
            for (var i = 0; i < this.crudeLists.length; i++) {

              let item = {
                name: this.crudeLists[i].name,
                number: this.crudeLists[i].number,

              }
              this.crudeList.push(item)
            }

          }
          })
        },
        getType(value) { 
        const choose = this.crudeLists.filter((item) => item.number === value)
        this.form.name = choose[0].name
        this.form.number = value
        console.log(this.form);
        },
        getSid(){
          req.listPages(this.listQuery).then((res)=>{
            this.sidlist = res.data.records
          })
        }
      }
    }
  </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>