labsop_h5/src/view/animal/applicationRemoval/components/addEdit.vue

<template>
  <div class="application-dialog-container">
    <el-dialog
      :title="state.dialog.title"
      @close="onCancel"
      :close-on-click-modal="false"
      v-model="state.dialog.isShowDialog"
      width="90%"
    >
      <el-form
        ref="expertDialogFormRef"
        :model="state.form"
        :rules="rules"
        size="default"
        label-width="140px"
        label-position="top"
      >
        <h4 class="mb20 mt8">申请人信息</h4>
        <el-row class="mb20">
          <el-col :span="24">
            <el-form-item
              label="申请人姓名"
              prop="userName"
            >
              <el-input
                v-model="state.form.userName"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="联系电话"
              prop="phone"
            >
              <el-input
                v-model="state.form.phone"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="课题组"
              prop="projectGroupId"
            >
              <el-input
                v-model="state.form.projectGroupName"
                disabled
                placeholder="请选择"
                class="w100"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="科室"
              prop="deptId"
            >
              <el-input
                v-model="state.form.deptName"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <h4 class="mb20 mt20">转出情况</h4>
        <el-row
          class="mb20"
        >
          <el-col :span="24">
            <el-form-item
              label="品种品系"
              prop="categoryId"
            >
              <el-select
                v-model="state.form.categoryId"
                placeholder="请选择"
                :disabled="state.dialog.type === 'detail'"
              >
                <el-option
                  v-for="item in animalTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="转出日期"
              prop="takeawayDate"
            >
              <el-date-picker
                v-model="state.form.takeawayDate"
                type="date"
                placeholder="请选择时间"
                clearable
                value-format="YYYY-MM-DD"
                style="width: 100%"
                :disabled="state.dialog.type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          class="mb20"
        >
          <el-col :span="24">
            <el-form-item
              label="送往地点"
              prop="takeawayAddress"
            >
              <el-input
                v-model="state.form.takeawayAddress"
                placeholder="请输入"
                :disabled="state.dialog.type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="带出原因"
              prop="takeawayReason"
            >
              <el-input
                v-model="state.form.takeawayReason"
                placeholder="请输入"
                :disabled="state.dialog.type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          class="mb20"
        >
          <el-col :span="24">
            <el-form-item
              label="运输方式"
              prop="takeawayTransport"
            >
              <el-input
                v-model="state.form.takeawayTransport"
                placeholder="请输入"
                :disabled="state.dialog.type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="门禁卡序列号"
              prop="accessCardNumber"
            >
              <el-input
                v-model="state.form.accessCardNumber"
                placeholder="请输入"
                :disabled="state.dialog.type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          class="mt10"
        >
          <el-col :span="24">
            <el-form-item
              label="雄性"
              prop="takeawayMaleNumber"
            >
              <el-input-number
                style="width: 100%"
                placeholder="雄性数量"
                v-model="state.form.takeawayMaleNumber"
                :min="0"
                :disabled="state.dialog.type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="雌性"
              prop="takewayFemaleNumber"
            >
              <el-input-number
                style="width: 100%"
                placeholder="雌性数量"
                v-model="state.form.takewayFemaleNumber"
                :min="0"
                :disabled="state.dialog.type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          class="mt10"
        >
          <el-col
            :span="24"
            class="mt30 mb30"
          >
            <el-checkbox
              v-model="safePromiseStatus"
              :disabled="state.dialog.type === 'detail'"
            >
              本人已阅读并同意
              <el-link
                type="primary"
                :underline="false"
                @click="handleReadNotice"
              >
                《实验动物带离须知》
              </el-link>
              内容
            </el-checkbox>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="info"
            @click="onCancel"
            size="default"
          >
            取 消
          </el-button>
          <el-button
            v-if="state.dialog.type !== 'detail'"
            color="#2c78ff"
            @click="onSubmit()"
            size="default"
          >
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="isShowNotice"
      title="实验动物带离须知"
      width="90%"
    >
      <div class="text">
        <p
          class="mb20"
          v-for="item in AnimalRemovalApplicationNotice.split('\n')"
          :key="item"
        >
          {{ item }}
        </p>
      </div>
      <template #footer>
        <el-button
          type="primary"
          @click="isShowNotice = false"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, computed } from 'vue'
  import to from 'await-to-js'
  import { ElMessage } from 'element-plus'
  import type { FormRules, FormInstance } from 'element-plus'

  import { usePlatAnimalCageApplicationApi } from '/@/api/platform/animal'
  import {
    CreateAnimalApplyLeavePayload,
    TakeawayList,
    ActionType,
    AnimalRemovalApplicationNotice,
  } from '/@/constants/pageConstants'
  import { deepClone } from '/@/utils/other'
  import { useUserInfos } from '/@/hooks/useUserInfos'
  import { filterFields } from '/@/utils/func'

  const emit = defineEmits(['refresh'])

  const { userInfos } = useUserInfos()
  const platAnimalCageApplicationApi = usePlatAnimalCageApplicationApi()

  const expertDialogFormRef = ref<FormInstance>()
  const animalTypeList = ref<{ id: string; name: string }[]>([])
  const safePromiseStatus = ref<boolean>(false)
  const isShowNotice = ref<boolean>(false)

  const rules = reactive<FormRules<CreateAnimalApplyLeavePayload>>({
    categoryId: [{ required: true, message: '请选择动物种类', trigger: 'blur' }],
    projectGroupId: [{ required: true, message: '请选择项目组', trigger: 'blur' }],
    takeawayDate: [{ required: true, message: '请选择转出日期', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入申请人姓名', trigger: 'blur' }],
    takeawayAddress: [{ required: true, message: '不能为空', trigger: 'change' }],
    takeawayReason: [{ required: true, message: '不能为空', trigger: 'change' }],
    takeawayTransport: [{ required: true, message: '不能为空', trigger: 'change' }],
  })

  const defaultFormFields: CreateAnimalApplyLeavePayload = {
    accessCardNumber: '',
    categoryId: null,
    projectGroupId: null,
    projectGroupName: '',
    takeawayDate: '',
    takeawayAddress: '',
    takeawayReason: '',
    takeawayTransport: '',
    takewayFemaleNumber: 0,
    takeawayMaleNumber: 0,
    userName: '',
    phone: '',
    deptId: '',
    deptName: '',
  }

  const state = reactive<{
    form: CreateAnimalApplyLeavePayload
    safePromise: boolean
    safeRead: boolean
    dialog: { isShowDialog: boolean; type: string; title: string; submitTxt: string }
  }>({
    form: defaultFormFields,
    safePromise: false,
    safeRead: false,
    dialog: {
      isShowDialog: false,
      type: '',
      title: '',
      submitTxt: '',
    },
  })

  const animalNumber = computed(() => {
    const maleNumber = state.form.takeawayMaleNumber || 0
    const famaleNumber = state.form.takewayFemaleNumber || 0
    return maleNumber + famaleNumber
  })

  const getDicts = async () => {
    const [_, res]: ToResponse = await to(platAnimalCageApplicationApi.getAnimalTypeList({}))

    if (res) {
      animalTypeList.value = res.data
    }
  }

  const openDialog = async (type: ActionType, sourceData?: TakeawayList) => {
    await getDicts()
    state.dialog.type = type
    state.form.userName = userInfos.value.nickName
    state.form.phone = userInfos.value.phone
    state.form.deptName = userInfos.value.deptName
    state.form.projectGroupId = userInfos.value.projectGroup?.id
    state.form.projectGroupName = userInfos.value.projectGroup?.pgName
    state.form.deptName = userInfos.value.deptName

    if (sourceData) {
      state.form = {
        ...state.form,
        ...sourceData,
      }
    }

    if (type === 'add') {
      state.dialog.title = '新增实验动物带离单'
      state.form.categoryId = animalTypeList.value[0].id
    }
    if (type === 'edit') {
      state.dialog.title = '编辑实验动物带离单'
    }
    if (type === 'detail') {
      state.dialog.title = '查看实验动物带离单'
      safePromiseStatus.value = true
    }

    state.dialog.isShowDialog = true
  }

  const closeDialog = () => {
    expertDialogFormRef.value.resetFields()
    state.form = defaultFormFields
    state.dialog.isShowDialog = false
  }

  const onCancel = () => {
    closeDialog()
  }

  const onSubmit = async () => {
    expertDialogFormRef.value.validate(async (valid: boolean) => {
      if (!valid) return

      if (!safePromiseStatus.value) {
        ElMessage.error('请阅读并勾选安全承诺！')
        return
      }

      if (!state.form.takeawayMaleNumber && !state.form.takewayFemaleNumber) {
        ElMessage.error('请添加雄性或雌性数量！')
        return
      }

      const post = platAnimalCageApplicationApi.createAnimalTakeawayApplications
      const [err]: ToResponse = await to(
        post(
          filterFields({
            ...deepClone(state.form),
            deptId: userInfos.value.deptId,
            projectGroupId: state.form.projectGroupId?.toString(),
          }),
        ),
      )

      if (err) return
      ElMessage.success('操作成功')
      closeDialog()
      emit('refresh')
    })
  }

  const handleReadNotice = () => {
    isShowNotice.value = true
  }

  defineExpose({
    openDialog,
  })
</script>
<style lang="scss" scoped>
  .application-dialog-container {
    .el-select {
      width: 100%;
    }
  }
  h4 {
    font-size: 18px;
  }
  ul {
    padding-left: 20px;
  }
  .text {
    p {
      text-indent: 2em;
    }
  }
  .el-upload + .el-button {
    vertical-align: top;
  }
  :deep(.el-checkbox) {
    white-space: pre-wrap;
  }
</style>