yos_web/src/HManagement/siteManage/custom_option/modules/add.vue

<template>
  <div class="inline-16">
    <el-button type="primary" size="small" @click="show" class="el-icon-plus" :disabled="disabled"> 新增分类明细</el-button>
    <el-dialog append-to-body  :visible.sync="drawer" width="500px" >
      <div slot="title" style="font-size: 15px">
        自定义分类/
        <el-tag size="mini" >{{data.remarks}}</el-tag>
      </div>
      <div>
        <el-row :gutter="20">
          <el-form :model="form"   ref="form" :rules="rules"  size="mini" label-position="right" label-width="90px">
            <el-col :span="20">
              <el-form-item  label="分类名称:" prop="value">
                <el-input type="textarea" autosize v-model="form.value" placeholder="输入分类名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item  label="描述:">
                <el-input type="text" autosize v-model="form.remarks" placeholder="输入描述"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="close" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit"   class="normal-btn-width btn-primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:["data","disabled"],
  data () {
    return {
      drawer:false,
      form:{
        "optiontypeid": '',
        "optiontypemxid":0,
        "isused": "1",
        "value":"",
        "remarks":"",
        "sequence":2
      },
      rules:{
        value:[
          { required: true, message: '请输入标签名', trigger: 'blur'},
        ],
      }
    }
  },
  watch: {
    drawer (val) {
      !val && this.$refs.form.resetFields()
    }
  },
  methods:{
    show(){
      this.drawer = true
      console.log("参数")
      console.log(this.data)
    },
    async onSubmit  () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.form.optiontypeid = this.data.optiontypeid
        const res = await this.$api.requested({ "id": 20220901092601,content:this.form})
        this.tool.showMessage(res,()=>{
          this.drawer = false
          this.$emit('addSuccess')
        })
      });
    },
    close() {
      this.drawer = false
      this.form.remarks = ''
    }
  },
}

</script>
<style scoped>
/deep/.el-dialog {
  transform: translateY(50%);
}
</style>