feat(ctr): 新增合同附件列表功能并优化合同创建流程
- 在支出合同和收入合同页面添加查看附件列表功能 - 实现合同创建的多步骤流程,包括合同信息填写和付款信息填写 - 增加表单验证,确保合同信息和付款信息的完整性 - 优化合同类型切换逻辑,支持收入合同和支出合同的创建 - 在合同创建过程中添加临时数据保存功能,防止数据丢失
This commit is contained in:
		| @ -1,6 +1,7 @@ | ||||
| <template> | ||||
|   <div class="p-2"> | ||||
|     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> | ||||
|     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" | ||||
|       :leave-active-class="proxy?.animate.searchAnimate.leave"> | ||||
|       <div v-show="showSearch" class="mb-[10px]"> | ||||
|         <el-card shadow="hover"> | ||||
|           <el-form ref="queryFormRef" :model="queryParams" :inline="true"> | ||||
| @ -11,7 +12,8 @@ | ||||
|               <el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable @keyup.enter="handleQuery" /> | ||||
|             </el-form-item> | ||||
|             <el-form-item label="供应商" prop="contractSupplier"> | ||||
|               <el-input v-model="queryParams.contractSupplier" placeholder="请输入供应商" clearable @keyup.enter="handleQuery" /> | ||||
|               <el-input v-model="queryParams.contractSupplier" placeholder="请输入供应商" clearable | ||||
|                 @keyup.enter="handleQuery" /> | ||||
|             </el-form-item> | ||||
|             <el-form-item label="合同金额" prop="amount"> | ||||
|               <el-input v-model="queryParams.amount" placeholder="请输入合同金额" clearable @keyup.enter="handleQuery" /> | ||||
| @ -31,25 +33,30 @@ | ||||
|     <el-card shadow="never"> | ||||
|       <template #header> | ||||
|         <el-row :gutter="10" class="mb8"> | ||||
|           <el-col :span="1.5"> | ||||
|             <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['ctr:expensesContract:add']">新增</el-button> | ||||
|           <!-- <el-col :span="1.5"> | ||||
|             <el-button type="primary" plain icon="Plus" @click="handleAdd" | ||||
|               v-hasPermi="['ctr:expensesContract:add']">新增</el-button> | ||||
|           </el-col> | ||||
|           <el-col :span="1.5"> | ||||
|             <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['ctr:expensesContract:edit']">修改</el-button> | ||||
|             <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" | ||||
|               v-hasPermi="['ctr:expensesContract:edit']">修改</el-button> | ||||
|           </el-col> | ||||
|           <el-col :span="1.5"> | ||||
|             <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['ctr:expensesContract:remove']">删除</el-button> | ||||
|           </el-col> | ||||
|             <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" | ||||
|               v-hasPermi="['ctr:expensesContract:remove']">删除</el-button> | ||||
|           </el-col>  | ||||
|           <el-col :span="1.5"> | ||||
|             <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['ctr:expensesContract:export']">导出</el-button> | ||||
|             <el-button type="warning" plain icon="Download" @click="handleExport" | ||||
|               v-hasPermi="['ctr:expensesContract:export']">导出</el-button> | ||||
|           </el-col> | ||||
|           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> | ||||
|         </el-row> | ||||
|         </el-row>--> | ||||
|       </template> | ||||
|  | ||||
|       <el-table v-loading="loading" :data="expensesContractList" @selection-change="handleSelectionChange"> | ||||
|         <el-table-column type="selection" width="55" align="center" /> | ||||
|         <el-table-column label="主键ID" align="center" prop="id" v-if="true" /> | ||||
|         <!-- <el-table-column label="主键ID" align="center" prop="id" v-if="true" /> --> | ||||
|         <el-table-column type="index" width="50" label="序号" /> | ||||
|         <el-table-column label="项目ID" align="center" prop="projectId" /> | ||||
|         <el-table-column label="合同编号" align="center" prop="contractCode" /> | ||||
|         <el-table-column label="合同类型" align="center" prop="contractType" /> | ||||
| @ -60,17 +67,23 @@ | ||||
|         <el-table-column label="备注" align="center" prop="remark" /> | ||||
|         <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | ||||
|           <template #default="scope"> | ||||
|             <el-tooltip content="修改" placement="top"> | ||||
|               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['ctr:expensesContract:edit']"></el-button> | ||||
|             <!-- <el-tooltip content="修改" placement="top"> | ||||
|               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" | ||||
|                 v-hasPermi="['ctr:expensesContract:edit']"></el-button> | ||||
|             </el-tooltip> | ||||
|             <el-tooltip content="删除" placement="top"> | ||||
|               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['ctr:expensesContract:remove']"></el-button> | ||||
|               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" | ||||
|                 v-hasPermi="['ctr:expensesContract:remove']"></el-button> | ||||
|             </el-tooltip> --> | ||||
|             <el-tooltip content="查看附件列表" placement="top"> | ||||
|               <el-button link type="primary" icon="View" @click="handleShowFileList(scope.row)">查看附件列表</el-button> | ||||
|             </el-tooltip> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|       </el-table> | ||||
|  | ||||
|       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> | ||||
|       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" | ||||
|         v-model:limit="queryParams.pageSize" @pagination="getList" /> | ||||
|     </el-card> | ||||
|     <!-- 添加或修改支出合同对话框 --> | ||||
|     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> | ||||
| @ -85,7 +98,7 @@ | ||||
|           <el-input v-model="form.contractSupplier" placeholder="请输入供应商" /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="分包内容"> | ||||
|           <editor v-model="form.contractedContent" :min-height="192"/> | ||||
|           <editor v-model="form.contractedContent" :min-height="192" /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="合同金额" prop="amount"> | ||||
|           <el-input v-model="form.amount" placeholder="请输入合同金额" /> | ||||
| @ -104,12 +117,15 @@ | ||||
|         </div> | ||||
|       </template> | ||||
|     </el-dialog> | ||||
|     <FileList v-model="fileListVisible" :fileList="fileList" /> | ||||
|  | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script setup name="ExpensesContract" lang="ts"> | ||||
| import { listExpensesContract, getExpensesContract, delExpensesContract, addExpensesContract, updateExpensesContract } from '@/api/ctr/expensesContract'; | ||||
| import { listExpensesContract, getExpensesContract, delExpensesContract, addExpensesContract, updateExpensesContract, getFileList } from '@/api/ctr/expensesContract'; | ||||
| import { ExpensesContractVO, ExpensesContractQuery, ExpensesContractForm } from '@/api/ctr/expensesContract/types'; | ||||
| import FileList from '@/components/FileList/index.vue'; | ||||
|  | ||||
| const { proxy } = getCurrentInstance() as ComponentInternalInstance; | ||||
|  | ||||
| @ -121,6 +137,8 @@ const ids = ref<Array<string | number>>([]); | ||||
| const single = ref(true); | ||||
| const multiple = ref(true); | ||||
| const total = ref(0); | ||||
| const fileListVisible = ref(false); // 控制附件列表对话框的显示 | ||||
| const fileList = ref<Array<any>>([]); // 文件列表 | ||||
|  | ||||
| const queryFormRef = ref<ElFormInstance>(); | ||||
| const expensesContractFormRef = ref<ElFormInstance>(); | ||||
| @ -142,7 +160,7 @@ const initFormData: ExpensesContractForm = { | ||||
|   remark: undefined, | ||||
| } | ||||
| const data = reactive<PageData<ExpensesContractForm, ExpensesContractQuery>>({ | ||||
|   form: {...initFormData}, | ||||
|   form: { ...initFormData }, | ||||
|   queryParams: { | ||||
|     pageNum: 1, | ||||
|     pageSize: 10, | ||||
| @ -185,7 +203,7 @@ const cancel = () => { | ||||
|  | ||||
| /** 表单重置 */ | ||||
| const reset = () => { | ||||
|   form.value = {...initFormData}; | ||||
|   form.value = { ...initFormData }; | ||||
|   expensesContractFormRef.value?.resetFields(); | ||||
| } | ||||
|  | ||||
| @ -231,9 +249,9 @@ const submitForm = () => { | ||||
|     if (valid) { | ||||
|       buttonLoading.value = true; | ||||
|       if (form.value.id) { | ||||
|         await updateExpensesContract(form.value).finally(() =>  buttonLoading.value = false); | ||||
|         await updateExpensesContract(form.value).finally(() => buttonLoading.value = false); | ||||
|       } else { | ||||
|         await addExpensesContract(form.value).finally(() =>  buttonLoading.value = false); | ||||
|         await addExpensesContract(form.value).finally(() => buttonLoading.value = false); | ||||
|       } | ||||
|       proxy?.$modal.msgSuccess("操作成功"); | ||||
|       dialog.visible = false; | ||||
| @ -257,7 +275,16 @@ const handleExport = () => { | ||||
|     ...queryParams.value | ||||
|   }, `expensesContract_${new Date().getTime()}.xlsx`) | ||||
| } | ||||
| // 查看附件列表操作 | ||||
| const handleShowFileList = async (row: ExpensesContractVO) => { | ||||
|   await getFileList({ contractId: row.id }).then(res => { | ||||
|     fileList.value = res.rows | ||||
|     fileListVisible.value = true; | ||||
|   }).catch(() => { | ||||
|     proxy?.$modal.error("获取文件列表失败"); | ||||
|   }); | ||||
|  | ||||
| } | ||||
| onMounted(() => { | ||||
|   getList(); | ||||
| }); | ||||
|  | ||||
		Reference in New Issue
	
	Block a user