srdb-ui3.10/src/views/reporting/RepTemplate/components/Write.vue

<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { getCategory } from '@/api/reporting/RepTemplate/RepTemplate';
import { transfDictList } from '@/utils';
import { REPORTING_STATUS_LIST } from '../constants';
import { getLoginNameByUserInfo } from '@/utils/auth';

const session_loginName = getLoginNameByUserInfo();

const { required } = useValidator()
let fileData = null;
let tName = null;
let createTime = null;
let updateTime = null;
const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  },
  actionType: {
    type: String,
    default: 'add'
  }
})

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

const formSchema = reactive<FormSchema[]>([
  {
    field: 'tId',
    label: '编号',
    component: 'Input',
    hidden: true
  },
  {
    field: 'tCategory',
    label: '报告分类',
    component: 'Select',
    componentProps:{
      style:{width:'100%'}
    },
    optionApi:  async () => {
      const res = await getCategory({ paramName: 'reportingType_param', systemCode: 'ordb' });
      return transfDictList(res.body.result);
    },
    value: '1',
      formItemProps: {
      rules: [required()],
    },
  },
  {
    field: 'createUser',
    label: '编写人',
    component: 'Input',
    componentProps: {
      
    },
    formItemProps: {
      rules: [required()],
    },
  },
  {
    field: 'tVersion',
    label: '报告版本',
    component: 'Input',
    componentProps: {
      
    },
    formItemProps: {
      rules: [required()],
    },
  },
  {
    field: 'tStatus',
    label: '报告状态',
    component: 'Select',
    componentProps: {
      options:REPORTING_STATUS_LIST,
      style:{width:'100%'}

    },

    value:'1',
    formItemProps: {
      rules: [required()],
    },
  },
  {
    field: 'tDescription',
    label: '报告描述',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      type: 'textarea'
    },
  },
  {
    field: 'file',
    label: '报告模版',
    component: 'Upload',
    colProps: { span: 24 },
    componentProps: {
      limit: 1,
      drag:true,
      accept:".docx",
      action: null,
      autoUpload:false,
      fileList:[],
      beforeRemove: (uploadFile) => {
        return ElMessageBox.confirm(`是否取消上传${uploadFile.name}模板文件 ?`).then(
          () => true,
          () => false
        )
      },
      onExceed: () => {
        ElMessage.warning("上传模板失败,当前已有模板,只能上传一个模板")
      },
      onSuccess:() => {
        ElMessage.success("上传成功")
      },
      slots: {
        default: () =><div class="el-upload"><i class="el-icon-upload"></i><br/><h1 class="el-upload__text">拖拽报告模版到这里...<br/>或<em>上传报告模版</em></h1></div>,
        tip: () => <div class="el-upload__tip">docx文件</div>,
        file:(file)=>{
          fileData = file.file.raw;
          tName=file.file.name;
        }
      },
      style:{
        width:"100%",
      }
      
    },
  }
])

const rules = reactive({
  //file:[required()],//报告模版

})

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    formData.file = fileData;
    formData.tName = tName;
    formData.uploadUser=session_loginName;
    let time = new Date()

    //新增
    if(props.actionType=='add'){
      formData.createTime=time.toLocaleString();
    }
    //编辑
    else{
      formData.updateTime=time.toLocaleString();
    }
    return formData
  }
}

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  submit
})
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
</template>