web/src/components/settings/MemberEdit.vue

<template>
  <el-form :model="form" label-width="auto">
    <el-descriptions
        :title="props.id?'编辑' : '新增'"
        :column="3"
        direction="vertical"
        border
    >
      <el-descriptions-item label="姓名">
        <el-form-item>
          <el-input v-model="form.name"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-form-item>
          <el-input v-model="form.gender"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="年龄">
        <el-form-item>
          <el-input v-model="form.age"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="角色">
        <el-form-item>
          <el-select
              v-model="form.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="form.idCardNumber"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <el-form-item>
          <el-input v-model="form.tel"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="科室">
        <el-form-item>
          <el-select
              v-model="form.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="form.socialMemberCode"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-form-item>
          <el-input v-model="form.memo"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="电子签名">
        <el-form-item>
          <UpLoad v-model="uploadURL" ref="uploadRef" @uploadSuccess="(url)=>{form.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 form = ref<any>({
  name: "", // 姓名
  gender: "", // 性别
  age: "", // 年龄
  idCardNumber: "", // 身份证号
  tel: "", // 手机号
  socialMemberCode: "", // 医保人员代码
  role: "", // 角色
  sectionId: "", // 科室id
  electronicSignature: "", // 电子签名
  memo: '',// 备注
})
const emit = defineEmits(['onSubmit'])
const onSubmit = () => {
  emit('onSubmit')
}

const save = () => {
  if (props.id) {
    post("organization/member/edit", {data: form.value}).then((res) => {
      onSubmit()
      form.value = {}
    })
  } else {
    post("organization/member/add", {data: form.value}).then((res) => {
      onSubmit()
      form.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) => {
    form.value = res
    if(form.value.electronicSignature){
    uploadRef.value?.getImageUrl(form.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>