web/src/components/member/memberProfile/VipEdit.vue

<template>
  <Mask :width="600" :height="500" :is-show="show" @close="show=false" :title="id?'患者编辑':'患者建档'">
    <div class="content">
      <el-form
          :model="ruleForm"
          label-width="auto"
          :rules="rules"
          ref="ruleFormRef"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="号码" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="输入电话号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="ruleForm.realName" placeholder="输入真实姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio value="男">男</el-radio>
                <el-radio value="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker style="width: 100%" v-model="ruleForm.birthday" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="ruleForm.nation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证码" prop="idcode">
              <el-input v-model="ruleForm.idcode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源" prop="source">
              <el-select
                  v-model="ruleForm.source"
                  placeholder="来源选择"
                  size="default"
                  style="width: 100%"
              >
                <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="地区" prop="area">
          <SelectArea v-model="ruleForm.area" style="width: 100%"></SelectArea>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark"></el-input>
        </el-form-item>
        <div class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitForm">
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </Mask>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue"
import {ElForm, ElFormItem, ElSelect, ElOption, ElRow, ElCol, ElRadioGroup, type FormInstance} from "element-plus";
import SelectArea from "@/components/SelectArea.vue";
import {post} from "@/utils/request.ts";
import Mask from "@/components/common/Mask.vue";
import CloseBtn from "@/components/CloseBtn.vue";
const ruleFormRef = ref<FormInstance>()
const id = ref<any>(null)
const show = ref<boolean>(false)
const emit = defineEmits(['close'])
const close = () => {
  ruleForm.value = {}
  id.value = ''
  show.value = false
  emit('close')
}

// form表单数据
interface RuleForm {
  exp: string
  phone: string
  realName: string
  sex: string
  age: string
  birthday: string
  idCode: string
  source: string
  nation: string
  area: string
  address: string
  remark: string
}
let ruleForm = ref<any>({
  exp: 0,
  phone: '',
  realName: '',
  sex: '',
  age: '',
  birthday: '',
  idCode: '',
  source: '',
  nation: '',
  area: '',
  address: '',
  remark: '',
})
const options = ref<any>([])
const options1 = [
  {
    value: '员工推荐',
    label: '员工推荐',
  },
  {
    value: '顾客推荐',
    label: '顾客推荐'
  },
  {
    value: '线上活动',
    label: '线上活动'
  },
  {
    value: '线下活动',
    label: '线下活动'
  },
  {
    value: '其他',
    label: '其他'
  }
]
const submitForm = async () => {
  let formEl = ruleFormRef.value
  if (!formEl) return
  await formEl.validate((valid:any, fields:any) => {
    if (valid) {
      console.log(ruleForm.value)
      if (ruleForm.value.id){
        post("vip/vip/update", {vipInfo:ruleForm.value}).then((res: any) => {
          close()
        })
      }else {
        post("vip/vip/create", {vipInfo:ruleForm.value}).then((res: any) => {
          close()
        })
      }

    }
  })
}
const levelName = ref('')
const rules = {
  exp: [
    {required: true, message: '请选择患者等级', trigger: 'change'},
  ],
  phone: [
    {required: true, message: '请输入手机号码', trigger: 'blur'},
  ],
  realName: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
  ],
  sex: [
    {required: true, message: '请选择性别', trigger: 'change'},
  ],
  age: [
    {required: true, message: '请输入年龄', trigger: 'blur'},
  ],
  birthday: [
    {required: true, message: '请选择生日', trigger: 'change'},
  ],
}
const init = (_id: any) => {
  id.value = _id
  levelName.value = ''
  show.value = true
  if (!id.value){
    ruleForm.value = {}
    return
  } else {
    post("vip/vip/get", {id: _id}).then((res: any) => {
      ruleForm.value = res
      ruleForm.value.area = JSON.parse(ruleForm.value.area)
      if (!res.levelId) return
      post("vip/vipLevel/get", {levelId: res.levelId}).then((res:any) => {
        levelName.value = res.name
      })
    })
  }


}
const getLevelConfig = ()=>{
  post("vip/vipLevel/list").then((res:any) => {
    options.value = res
  })
}
onMounted(() => {
  getLevelConfig()
})
defineExpose({init})
</script>
<style scoped lang="scss">
.content {
  padding: 20px;
  margin-top: 30px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;

}
</style>