museums-ui/src/views/museums/specimenoutbound/OutboundForm/InitiativeProcessInstance.vue

<template>
  <Dialog
    v-model="dialogVisible"
    title="修改申请"
    width="800"
    ref="initiativeFormRef"
    v-loading="formLoading">
    <!-- 编辑表单 -->
<div v-if="formType !== 'view'">
  <div style="margin-bottom: 20px;color: red;font-size: 20px">
    申请驳回原因：{{outboundData.processInstanceId}}
  </div>
  <div v-if="someType !== 'view'">
  <el-form
    ref="initiativeFormRef"
    :model="outboundData"
    :rules="formRules"
    label-width="140px"
    v-loading="formLoading"
    v-if="outboundData"

  >
    <div style="margin-bottom: 20px;margin-left: 70px;font-size: 18px; font-weight: bold">请重新申请</div>


    <!--        点击添加的时候扩展一栏，即formData.specimenNumber的长度+1-->
    <el-button type="primary"
               style="float: right"
               @click="removeSpecimenNumber">-</el-button>
    <el-button type="primary"
               style="float: right"
               @click="addSpecimenNumber">+</el-button>
    <el-form-item label="标本编号"  prop="number" label-width="150px">
      <el-input v-model="outboundData.number[0]" placeholder="请输入标本编号" label-width="150px"/>
    </el-form-item>
    <el-form-item
      v-for="(item, index) in outboundData.number.slice(1)"
      :key="index"
      :label="`标本编号 ${index + 2}`"
      prop="number"
      label-width="150px"
    >
      <el-input v-model="outboundData.number[index + 1]" placeholder="请输入标本编号" />
    </el-form-item>
    <el-form-item label="申请人或申请单位"  prop="applicantName" label-width="150px">
      <el-input v-model="outboundData.applicantName" placeholder="请输入申请人或申请单位" label-width="150px"/>
    </el-form-item>
    <el-form-item label="申请日期" prop="applicationDate" label-width="150px">
      <el-date-picker
        v-model="outboundData.applicationDate"
        type="date"
        value-format="x"
        placeholder="选择申请日期"
      />
    </el-form-item>
    <el-form-item label="申请出库的用途" prop="applicationUsage" label-width="150px">
      <el-input v-model="outboundData.applicationUsage" placeholder="请输入申请出库的用途" label-width="150px"/>
    </el-form-item>
    <el-form-item label="附件上传" prop="attachments" label-width="150px">
      <UploadImg v-model="outboundData.attachments" />
    </el-form-item>
    <el-form-item label="预计领取日期" prop="outgoingTime" label-width="150px">
      <el-date-picker
        v-model="outboundData.expectedCollectionTime"
        type="date"
        value-format="x"
        placeholder="选择领取日期"
      />
    </el-form-item>
    <el-form-item label="退还日期" prop="returnDate" label-width="150px">
      <el-date-picker
        v-model="outboundData.returnDate"
        type="date"
        value-format="x"
        placeholder="选择退还日期"
        label-width="150px"
      />
    </el-form-item>
  </el-form>
  </div>
</div>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

</template>


<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";

import {SpecimenOutboundApi, SpecimenOutboundVO} from '@/api/museums/specimenoutbound'
// import {useRoute} from 'vue-router';
import { useI18n } from 'vue-i18n';
defineOptions({name: 'InitiativeProcessInstance'})
const formLoading = ref(false) // 表单的加载中
const dialogVisible = ref(false) // 弹窗的是否展示
const formType = ref('')
 // const {query} = useRoute() // 查询参数
const someType = ref('')
// 国际化和消息提示
const { t } = useI18n();
const message = useMessage();



const formRef = ref() // 表单 Ref
const initiativeFormRef = ref() // 表单 Ref
const outboundData = ref({
  id: undefined,
  infoId: undefined,
  chineseName: [],
  number: [''],
  applicantName: undefined,
  applicationDate: undefined,
  applicationUsage: undefined,
  attachments: undefined,
  status: undefined,
  remarks: undefined,
  processInstanceId: undefined,
  operator: undefined,
  outgoingTime: undefined,
  returner: undefined,
  receiver: undefined,
  returnDate: undefined,
  specimenCondition: undefined,
  sampleStatus: undefined,
  expectedCollectionTime:undefined,

})
const formRules = reactive({
  infoId: [{ required: true, message: '关联到总表中的标本ID不能为空', trigger: 'blur' }],
  chineseName: [{ required: true, message: '中文名称不能为空', trigger: 'blur' }],
  number: [{ required: true, message: '申请出库的标本编号不能为空', trigger: 'blur' }],
  applicantName: [{ required: true, message: '申请人或申请单位不能为空', trigger: 'blur' }],
  applicationUsage: [{ required: true, message: '申请出库的用途不能为空', trigger: 'blur' }],
  returnDate: [{ required: true, message: '退还日期不能为空', trigger: 'blur' }],
  expectedCollectionTime: [{ required: true, message: '预计领取日期不能为空', trigger: 'blur' }]
})


/**增减标本编号**/
const addSpecimenNumber = () => {
  outboundData.value.number.push(''); // 向数组中添加一个新的空字符串
};
const removeSpecimenNumber = () => {
  if (outboundData.value.number.length > 0) { // 确保至少保留一个输入框
    outboundData.value.number.pop(); // 从数组中移除最后一个元素
  }
};


/** 打开弹窗 */
// let formData= ref(null)
const open = async (type: string, id?: number) => {

  dialogVisible.value = true
  formType.value = type
  resetForm();
  if (id) {
    formLoading.value = true
    try {
      if (type === 'view' || type === 'someType') {
        let res = await SpecimenOutboundApi.getSpecimenOutbound(id);
        // console.log(res)
        outboundData.value = res
      }
    } finally {
      formLoading.value = false
    }
  }
}
  defineExpose({open}) // 提供 open 方法，用于打开弹窗




/** 提交表单 */
const emit = defineEmits(['success'])
  const submitForm = async () => {
    // 校验表单
    await formRef.value.validate()
    // 提交请求
    formLoading.value = true;
    try {
      const data = outboundData.value as unknown as SpecimenOutboundVO
      console.log(data)
       if  (formType.value === 'someType') {
          await SpecimenOutboundApi.alterSpecimenOutbound(data);
          message.success(t('修改出库申请成功'));
        }
        dialogVisible.value = false;
        emit('success')
      } finally {
        formLoading.value = false;

      }
  };

/** 标本搜索选择 */

// 重置表单的方法
const resetForm = () => {
  outboundData.value = {
    id: undefined,
    infoId: undefined,
    chineseName: undefined,
    number: undefined,
    applicantName: undefined,
    applicationDate: undefined,
    applicationUsage: undefined,
    attachments: undefined,
    status: undefined,
    remarks: undefined,
    processInstanceId: undefined,
    operator: undefined,
    outgoingTime: undefined,
    returner: undefined,
    receiver: undefined,
    returnDate: undefined,
    specimenCondition: undefined,
    sampleStatus: undefined
  }
    initiativeFormRef.value?.resetFields();
  }///


// const handleClose = (index: number) => {
//   outboundData.specimenNumber.value.splice(index, 1); // 删除指定索引的标签
// };
//
// const handleInputEnter = () => {
//   if (specimenNumber.value.trim() !== '') {
//     outboundData.specimenNumber.value.push(specimenNumber.value); // 添加新的标本编号
//     specimenNumber.value = ''; // 清空输入框
//   }
// };


// // 在组件加载时获取数据
onMounted(async () => {

  console.log(1)
   // await fetchData()
  await submitForm()

})


</script>