web/src/components/settings/MemberEdit.vue

<template>
  <el-form :model="userInfo" label-width="auto" :rules="rules" ref="ruleFormRef">
    <el-descriptions
        title="基本信息"
        :column="3"
        direction="vertical"
        border
    >
      <el-descriptions-item label="账号">
        <el-form-item prop="username">
          <el-input v-model="userInfo.username"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="密码">
        <el-form-item prop="password">
          <el-input v-model="userInfo.password"  show-password/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="用户名">
        <el-form-item>
          <el-input v-model="userInfo.name"/>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
  <el-form :model="memberInfo" label-width="auto">
    <el-descriptions
        title="扩展信息"
        :column="3"
        direction="vertical"
        border
    >
      <el-descriptions-item label="姓名">
        <el-form-item>
          <el-input v-model="memberInfo.name"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-form-item>
          <el-input v-model="memberInfo.gender"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="年龄">
        <el-form-item>
          <el-input v-model="memberInfo.age"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <el-form-item>
          <el-input v-model="memberInfo.tel"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="角色">
        <el-form-item>
          <el-select
              v-model="memberInfo.role"
              placeholder="选择角色"
              size="large"
          >
            <el-option
                v-for="item in roleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        <el-form-item>
          <el-input v-model="memberInfo.idCardNumber"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="科室">
        <el-form-item>
          <el-select
              v-model="memberInfo.sectionId"
              placeholder="选择科室"
          >
            <el-option
                v-for="item in sectionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="医保人员代码">
        <el-form-item>
          <el-input v-model="memberInfo.socialMemberCode"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-form-item>
          <el-input v-model="memberInfo.memo"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="电子签名">
        <el-form-item>
          <UpLoad v-model="uploadURL" ref="uploadRef" @uploadSuccess="(url)=>{memberInfo.electronicSignature=url}"></UpLoad>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
    <div class="demo-button">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button @click="onSubmit">取消</el-button>
      <el-button v-if="props.id" type="danger" @click="deleteDetail">删除</el-button>
    </div>
  </el-form>
</template>
<script setup lang="ts">
import {defineProps, defineEmits, ref, onMounted} from 'vue'
import {post} from "@/utils/request.ts";
import {loadConfig} from "@/utils/config.ts";
import depts from "@/assets/config/directory/depts.json"
import UpLoad from "@/components/UpLoad.vue";
import {ElMessage} from 'element-plus'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
})
const roleList = [
  {
    value: 1,
    label: '医生',
  },
  {
    value: 2,
    label: '护士',
  },
  {
    value: 3,
    label: '检验技师',
  },
  {
    value: 4,
    label: '理疗师',
  },
  {
    value: 5,
    label: '医生助手',
  },
  {
    value: 6,
    label: '检查技师',
  },
  {
    value: 7,
    label: '管理员',
  },
  {
    value: 8,
    label: '其他',
  },
]
const memberInfo = ref<any>({
  name: "", // 姓名
  gender: "", // 性别
  age: "", // 年龄
  idCardNumber: "", // 身份证号
  tel: "", // 手机号
  socialMemberCode: "", // 医保人员代码
  role: "", // 角色
  sectionId: "", // 科室id
  electronicSignature: "", // 电子签名
  memo: '',// 备注
  password: "",
})
const userInfo= ref<any>({
  username: "", // 账号
  name: "",
  password: "",
})
const rules= {
  username: [
    {required: true, message: '请输入账号', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
 }
const emit = defineEmits(['onSubmit'])
const onSubmit = () => {
  emit('onSubmit')
}
const ruleFormRef= ref<any>('')
const save = () => {
  ruleFormRef.value.validate((valid: any) => {
    if (valid) {
      if (props.id) {
        post("organization/member/edit", {data: memberInfo.value}).then((res) => {
          onSubmit()
          memberInfo.value = {}
          userInfo.value = {}
        })
      } else {
        post("organization/member/add", {data: memberInfo.value}).then((res) => {
          onSubmit()
          memberInfo.value = {}
        })
      }
    }
  })

}
const options = Object.entries(depts).map(([key, value]) => {
  if (typeof value === 'string') {
    return {value: key, label: value};
  } else {
    return {
      value: key,
      label: value.name,
      children: Object.entries(value.children).map(([childKey, childValue]) => ({
        value: childKey,
        label: childValue,
      })),
    };
  }
});
const uploadRef = ref<any>('')
const init = (id: any) => {
  post("organization/member/getById", {id}).then((res: any) => {
    memberInfo.value = res
    if(memberInfo.value.electronicSignature){
    uploadRef.value?.getImageUrl(memberInfo.value.electronicSignature)
    }
  })
}
const uploadURL = ref('')
const imageURL= ref('')
onMounted(() => {
  loadConfig().then((res: any) => {
    uploadURL.value = res.base_url + "file/upload";
  })
  list()
})
const sectionList = ref<any>([])
const list = () => {
  post('organization/section/allList').then((res: any) => {
    sectionList.value = res
  })
}
const deleteDetail = () => {
  post("organization/member/delete", {id: props.id}).then((res: any) => {
    onSubmit()
    ElMessage.error('已删除');
  })
}
defineExpose({init})
</script>
<style scoped>
.demo-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>