h5-service-web/src/views/bbfc/addPeople.vue

<template>
    <div>
      <xy-dialog ref="dialog"
                 :is-show.sync="isShow"
                 type="form"
                 :title="type === 'add' ? '新增人员' : '编辑人员'"
                 :form="form"
                 :rules="rules"
                 @submit="submit">
            <template v-slot:name>
                <div class="xy-table-item">
                  <div class="xy-table-item-label">
                    名称 ：
                  </div>
                  <div class="xy-table-item-content">
                    <el-input v-model="form.name"
                              clearable
                              placeholder="请输入名称"
                              style="width: 300px;"
                              ></el-input>
                  </div>
                </div>
        </template>
            <template v-slot:mobile>
                <div class="xy-table-item">
                  <div class="xy-table-item-label">
                    手机号 ：
                  </div>
                  <div class="xy-table-item-content">
                    <el-input v-model="form.mobile"
                              clearable
                              placeholder="请输入手机号"
                              style="width: 300px;"
                              ></el-input>
                  </div>
                </div>
        </template>
            <template v-slot:address>
                <div class="xy-table-item">
                  <div class="xy-table-item-label">
                    地址 ：
                  </div>
                  <div class="xy-table-item-content">
                    <el-input type="textarea"
                              :autosize="{minRows:2}"
                              v-model="form.address"
                              clearable
                              placeholder="请输入地址"
                              style="width: 300px;"
                              ></el-input>
                  </div>
                </div>
        </template>
            <template v-slot:score>
                <div class="xy-table-item">
                  <div class="xy-table-item-label">
                    最高分 ：
                  </div>
                  <div class="xy-table-item-content">
                    <el-input-number v-model="form.score"
                                     clearable
                                     placeholder="请输入最高分"
                                     style="width: 300px;"
                                     :controls="false"
                                    ></el-input-number>
                  </div>
                </div>
        </template>
            <template v-slot:pid>
                <div class="xy-table-item">
                  <div class="xy-table-item-label">
                    是否中奖 ：
                  </div>
                  <div class="xy-table-item-content">
                    <el-input v-model="form.pid"
                              clearable
                              placeholder="请输入是否中奖"
                              style="width: 300px;"
                              ></el-input>
                  </div>
                </div>
        </template>
      </xy-dialog>
    </div>
  </template>

  <script>
    import {
      show,
      save
    } from '@/api/activity/activityUser';
    export default {
      props:{
      },
      data() {
        return {
          isShow: false,
          id: '',
          type: '',



          form: {
              name: "",
              mobile: "",
              address: "",
              score: "",
              pid: "",
          },
          rules: {
          }
        }
      },
      methods: {
        show(){
          this.isShow = true;
        },
        hidden(){
          this.isShow = false;
        },
        init(){
           for (let key in this.form) {
             if (this.form[key] instanceof Array) {
               this.form[key] = [];
             } else {
               this.form[key] = "";
             }
           }
           this.$refs["dialog"].clearValidate();
        },
        setId(id) {
          if(typeof id == "number") {
            this.id = id;
          }else {
            console.error("error typeof id: " + typeof id)
          }
        },
        getId() {
          return this.id;
        },
        setType(type = 'add') {
          let types = ['add','editor']
          if(types.includes(type)) {
            this.type = type;
          }else{
            console.warn("Unknown type: " + type)
          }
        },
        setForm(key = [], value = []) {
          if(key instanceof Array) {
            key.forEach((key,index) => {
              this.form[key] = value[index] ?? "";
            })
          }
          if(typeof key === "string"){
            this.form[key] = value
          }
          if(!key){
            this.init()
          }
        },


        async getDetail() {
          const res = await show({ id:this.id })
          this.$integrateData(this.form, res)
        },

        submit() {
          if(this.type === 'add'){
            if(this.form.hasOwnProperty('id')){
              delete this.form.id
            }
          }
          if (this.type === 'editor') {
            Object.defineProperty(this.form, 'id', {
              value: this.id,
              enumerable: true,
              configurable: true,
              writable: true
            })
          }
          this.form.activity_list_id = 10;
          save(this.form).then(res => {
            this.$message({
              type: 'success',
              message: this.type === 'add' ? '新增人员' : '编辑人员' + '成功'
            });
            this.isShow = false
            this.$emit('refresh')
          })
        }
      },
      watch: {
        isShow(val) {
          if (val) {
            if (this.type === 'editor') {
              this.getDetail()
            }
          } else {
            this.id = ''
            this.type = ''
            this.init();
            this.$refs['dialog'].clearValidate();
            delete this.form.id
          }
        },
      }
    }
  </script>

  <style scoped lang="scss">
    ::v-deep .el-input__inner {
      text-align: left;
    }

  </style>