hotel-saas-tenant-frontend/src/views/settings/components/modules/waiterForm.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="idCard">
                    <a-input v-model="model.idCard" 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="sex">
<!--              <a-input-number v-model="model.sex" placeholder="请输入性别(0-默认未知,1-男,2-女)" style="width: 100%" />-->
              <j-dict-select-tag v-model="model.sex" placeholder="请选择性别" dictCode="sex"/>
            </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-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-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: 'waiterForm',
      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: '请输入服务员姓名!'},
                  ],
                  idCard: [
                      {required: true, message: '请输入身份证号!'},
                  ],
                  phone: [
                      {required: true, message: '请输入手机号!'},
                  ],
                  sex: [
                      {required: true, message: '请选择服务员性别!'},
                  ],
                  status: [
                      {required: true, message: '请选择服务员是否有效!'},
                  ],
              },
              url: {
                  add: "/business/busWaiter/add",
                  edit: "/business/busWaiter/edit",
                  queryById: "/business/busWaiter/queryById"
              }
          }
      },
      computed: {
          formDisabled() {
              return this.disabled
          },
      },
      created() {
          //备份model原始值
          this.modelDefault = JSON.parse(JSON.stringify(this.model));
      },
      methods: {
          add() {
              //初始化默认值
              this.edit(this.modelDefault);
              this.edit({status: true});
          },
          edit(record) {
              this.model = Object.assign({}, record);
              this.visible = true;
              if (record.status == 1) {
                  this.model.status = true;
              } else {
                  this.model.status = false;
              }

          },
          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';
                      }
                      if (this.model.status) {
                          this.model.status = 1;
                      } else {
                          this.model.status = 0;
                      }
                      httpAction(httpurl, this.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;
                      })
                  }

              })
          },
      }
  }
</script>