labsop_h5/src/view/animal/applicationRemoval/components/turnBack.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"
      >
        <el-row
          class="mb20"
          :gutter="20"
        >
          <el-col :span="24">
            <el-form-item label="是否转回">
              <el-radio-group
                :disabled="state.dialog.type === 'view'"
                v-model="isReturn"
              >
                <el-radio
                  :label="1"
                  size="large"
                >
                  是
                </el-radio>
                <el-radio
                  :label="0"
                  size="large"
                >
                  否
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row class="mb20">
          <el-col :span="24">
            <el-form-item
              label="品种品系"
              prop="categoryId"
            >
              <el-select
                v-model="state.form.categoryId"
                placeholder="请选择"
              >
                <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 v-if="isReturn === 1">
          <el-col :span="24">
            <el-form-item
              label="转回日期"
              prop="returnDate"
            >
              <el-date-picker
                v-model="state.form.returnDate"
                type="date"
                placeholder="请选择时间"
                clearable
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          class="mb20"
          v-if="isReturn === 0"
        >
          <el-col :span="24">
            <el-form-item
              label="未返回动物情况说明"
              prop="notReturnReason"
            >
              <el-input
                v-model="state.form.notReturnReason"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isReturn === 1">
          <el-col :span="24">
            <el-form-item
              label="运输方式"
              prop="returnTransport"
            >
              <el-input
                v-model="state.form.returnTransport"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          class="mb20"
          v-if="isReturn === 1"
        >
          <el-col :span="24">
            <el-form-item
              label="雄性"
              prop="returnMaleNumber"
            >
              <el-input-number
                style="width: 100%"
                placeholder="雄性数量"
                v-model="state.form.returnMaleNumber"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isReturn === 1">
          <el-col :span="24">
            <el-form-item
              label="雌性"
              prop="returnFemaleNumber"
            >
              <el-input-number
                style="width: 100%"
                placeholder="雌性数量"
                v-model="state.form.returnFemaleNumber"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          class="mb20"
          :gutter="20"
        >
          <el-col :span="12">
            <el-form-item
              label="门禁卡是否归还"
              prop="accessCardReturn"
            >
              <el-radio-group v-model="state.form.accessCardReturn">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="info"
            @click="onCancel"
            size="default"
          >
            取 消
          </el-button>
          <el-button
            color="#2c78ff"
            @click="onSubmit()"
            size="default"
          >
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } 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 { TurnBackPayload, TakeawayList } from '/@/constants/pageConstants'
  import { filterFields } from '/@/utils/func'

  const emit = defineEmits(['refresh'])

  const platAnimalCageApplicationApi = usePlatAnimalCageApplicationApi()

  const expertDialogFormRef = ref<FormInstance>()
  const animalTypeList = ref<{ id: string; name: string }[]>([])
  const isReturn = ref<number>(1)

  const rules = reactive<FormRules<TurnBackPayload>>({
    // categoryId: [{ required: true, message: '请选择动物种类', trigger: 'blur' }],
    returnDate: [{ required: true, message: '请选择转出日期', trigger: 'blur' }],

    notReturnReason: [{ required: true, message: '请输入未返回动物情况说明', trigger: 'blur' }],
  })

  const defaultFormFields: TurnBackPayload = {
    takeawayId: 0,
    // categoryId: null,
    returnDate: '',
    returnTransport: '',
    accessCardReturn: 1,
    returnFemaleNumber: 0,
    returnMaleNumber: 0,
    notReturnReason: '',
    takeawayType: '10',
  }

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

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

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

  const openDialog = async (sourceData: TakeawayList) => {
    await getDicts()
    state.dialog.title = '登记转回'
    state.form.takeawayId = sourceData.id
    // state.form.categoryId = animalTypeList.value[0].id
    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 (isReturn.value === 1) {
        if (!state.form.returnMaleNumber && !state.form.returnFemaleNumber) {
          ElMessage.error('请添加雄性或雌性数量！')
          return
        }
      }

      const post = platAnimalCageApplicationApi.createPlatAnimalTakeawayReback
      const [err]: ToResponse = await to(post(filterFields(state.form)))

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

  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>