hotel-saas-tenant-frontend/src/views/settings/components/modules/salesPersonForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">
              <a-input v-model="model.workNo" placeholder="请输入编号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入姓名"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="postId">
<!--              <a-input v-model="model.operatorId" placeholder="请选择职务"  ></a-input>-->
              <a-select
                      mode="multiple"
                      v-model="model.postId"
                      placeholder="请选择职务"
                      :allowClear="true"
              >
                <a-select-option :value="item.id" v-for="(item,index) in postList" :key="index">{{ item.itemText }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="关联操作用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operatorId">
<!--              <a-input v-model="model.operatorId" placeholder="请选择关联操作用户"  ></a-input>-->
              <a-select
                      v-model="model.operatorId"
                      placeholder="请选择关联操作用户"
                      :allowClear="true"
              >
                <a-select-option :value="item.id" v-for="(item,index) in userList" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mobile">
              <a-input v-model="model.mobile" placeholder="请输入联系电话"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" placeholder="请输入手机号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="model.address" placeholder="请输入地址"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
              <a-input v-model="model.remarks" placeholder="请输入备注信息"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="是否有效"
                    prop="status">
              <a-switch checkedChildren="有效" unCheckedChildren="无效" v-model="model.status"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'BusSalesPersonForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          workNo: [
            { required: true, message: '请输入编号!'},
          ],
          name: [
            { required: true, message: '请输入姓名!'},
          ],
          phone: [
            { required: true, message: '请输入手机号!'},
          ],
          status: [
            { required: true, message: '请选择服务员是否有效!'},
          ],
        },
        url: {
          add: "/business/busSalesPerson/add",
          edit: "/business/busSalesPerson/edit",
          queryById: "/business/busSalesPerson/queryById"
        },
        userList:[],
        postList:[]
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getHotelPost()
    },
    methods: {
        add () {
            this.edit(this.modelDefault);
            this.edit({status:true });
        },
        edit (record) {
            if (record.status == 1){
                record.status = true;
            }else {
                record.status = false;
            }
            record.postId = record.postIds.split(',');
            this.model = Object.assign({}, record);
            this.visible = true;

        },
        submitForm () {
            const that = this;
            // 触发表单验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    that.confirmLoading = true;
                    let httpurl = '';
                    let method = '';
                    if(!this.model.id){
                        httpurl+=this.url.add;
                        var info = JSON.parse(localStorage.getItem("storeInfo"));
                        this.model.hotelId = info.id;
                        method = 'post';
                    }else{
                        httpurl+=this.url.edit;
                        method = 'put';
                    }
                    var _model = this.model;
                    if (_model.status){
                        _model.status = 1;
                    }else {
                        _model.status = 0;
                    }
                    _model.postIds = this.model.postId.join(",")
                    console.log(_model)
                    this.$delete( _model, 'postId')


                    httpAction(httpurl,_model,method).then((res)=>{
                        if(res.success){
                            that.$message.success(res.message);
                            that.$emit('ok');
                        }else{
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                    })
                }

            })
        },
        getHotelPost(){
            var that = this;
            var param = {
                dictName:'职务'
            }
            // var values = JSON.parse(JSON.stringify(param))
            that.confirmLoading = true;
            getAction('/business/busDictItem/queryList',param).then((res)=>{
                console.log(res)
                if(res.success){
                    if (res.code == 200 && res.result) {
                        this.postList = res.result;
                    }
                }
            }).finally(() => {
                that.confirmLoading = false;
            })
        }
    }
  }
</script>