web/src/components/settings/SectionEdit.vue

<template>
  <Mask :is-show="isShow" @close="exit" :height="570" :title="props.id?'编辑':'新增'" :show-footer="true">
    <div style="padding: 24px">
      <el-form :model="form" label-width="auto">
        <el-descriptions
            :column="4"
            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-cascader :props="{ checkStrictly: true }" v-model="form.caty" :options="options"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="开始日期">
            <el-form-item>
              <div class="demo-date-picker">
                <el-date-picker
                    v-model="form.beginDate"
                    type="date"
                    placeholder="请选择开始日期"
                />
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="结束日期">
            <el-form-item>
              <div class="demo-date-picker">
                <el-date-picker
                    v-model="form.endDate"
                    type="date"
                    placeholder="请选择结束日期"
                />
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="成立时间">
            <el-form-item>
              <div class="demo-date-picker">
                <el-date-picker
                    v-model="form.creationDate"
                    type="date"
                    placeholder="请选择成立时间"
                    :default-value="new Date(2010, 9, 1)"
                />
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="简介">
            <el-form-item>
              <el-input v-model="form.info" type="text" :show-word-limit="true" :clearable="true" :size="'large'"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="负责人姓名">
            <el-form-item>
              <el-input v-model="form.resperName"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="负责人电话">
            <el-form-item>
              <el-input v-model="form.resperTel"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="医疗服务范围">
            <el-form-item>
              <el-input v-model="form.medServScp"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="批准床位数">
            <el-form-item>
              <el-input v-model="form.bedCnt" type="number"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="医保认可床位数量">
            <el-form-item>
              <el-input v-model.number="form.socialBedCnt" type="number"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="医师人数">
            <el-form-item>
              <el-input v-model.number="form.drPsncnt" type="number"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="药师人数">
            <el-form-item>
              <el-input v-model.number="form.pharPsncnt" type="number"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="护士人数">
            <el-form-item>
              <el-input v-model.number="form.nursPsncnt" type="number"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="技术人员人数">
            <el-form-item>
              <el-input v-model.number="form.tecnPsncnt" type="number"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-form-item>
              <el-input v-model="form.memo" type="text" :show-word-limit="true" :clearable="true"/>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </div>
    <template #footer>
      <div class="bottom">
        <el-button type="primary" @click="save()">保存</el-button>
        <el-button @click="exit">取消</el-button>
        <el-button v-if="props.id" @click="deleteDetail" type="danger">删除</el-button>
      </div>
    </template>
  </Mask>

</template>
<script setup lang="ts">
import {defineProps, onMounted, ref} from 'vue'
import {post} from "@/utils/request.ts";
import depts from "@/assets/config/directory/depts.json"
import Mask from "@/components/common/Mask.vue";
import {ElMessage} from "element-plus";

// do not use same name with ref
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
})
const form = ref<any>({
  name: '',
  caty: '',
  beginDate: '',
  endDate: '',
  creationDate: '',
  info: '',
  resperName: '',
  resperTel: '',
  medServScp: '',
  bedCnt: '',
  socialBedCnt: '',
  drPsncnt: '',
  pharPsncnt: '',
  nursPsncnt: '',
  tecnPsncnt: '',
  memo: '',
})
const isShow = ref<any>(false)
const emit = defineEmits(['onSubmit'])
const exit = () => {
  form.value = {}
  isShow.value = false
  emit('onSubmit')
}
const openDialog= () => {
  isShow.value = true
  if (props.id) {
    init(props.id)
  }
}
const save = () => {
  if (props.id) {
    post("organization/section/edit", {data: form.value}).then((res) => {
      exit()
      ElMessage.success('已修改')
    })
  } else {
    post("organization/section/add", {data: form.value}).then((res) => {
      exit()
      ElMessage.success('已添加')
    })
  }
}
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 init = (id: any) => {
  post("organization/section/getById", {id}).then((res: any) => {
    form.value = res
  })

}
const deleteDetail = () => {
  post("organization/section/delete", {id: props.id}).then((res: any) => {
    exit()
    ElMessage.error('已删除');
  })
}
defineExpose({openDialog})
</script>
<style scoped lang="scss">
.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}
</style>