feat(ctr): 新增合同附件列表功能并优化合同创建流程

- 在支出合同和收入合同页面添加查看附件列表功能
- 实现合同创建的多步骤流程，包括合同信息填写和付款信息填写
- 增加表单验证，确保合同信息和付款信息的完整性
- 优化合同类型切换逻辑，支持收入合同和支出合同的创建
- 在合同创建过程中添加临时数据保存功能，防止数据丢失

src/api/ctr/expensesContract/index.ts

@@ -61,3 +61,14 @@ export const delExpensesContract = (id: string | number | Array<string | number>
     method: 'delete'
   });
 };
+/**
+ * 查看支出合同附件列表
+ * @param id
+ */
+export const getFileList = (data) => {
+  return request({
+    url: '/ctr/expensesContract/file/list',
+    method: 'get',
+    params: data
+  })
+}

src/api/ctr/incomeContract/index.ts

@@ -61,3 +61,14 @@ export const delIncomeContract = (id: string | number | Array<string | number>)
     method: 'delete'
   });
 };
+/**
+ * 查看收入合同附件列表
+ * @param id
+ */
+export const getFileList = (data) => {
+  return request({
+    url: '/ctr/incomeContract/file/list',
+    method: 'get',
+    params: data
+  })
+}

src/components/FileList/index.vue

@@ -0,0 +1,56 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="附件列表" width="45%">
+        <el-table :data="fileList" style="width: 100%">
+            <el-table-column prop="fileName" label="文件名" />
+            <el-table-column prop="type" label="操作">
+                <template #default="scope">
+                    <el-button link type="success" @click="viewFile(scope.row)" icon="View">查看文件</el-button>
+                    <el-button link type="primary" @click="downloadFile(scope.row)" icon="download">下载文件</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="dialogVisible = false">
+                    关闭
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+    <el-dialog width="80%" v-model="viewFileVisible" title="查看文件" append-to-body>
+        <iframe :src="fileUrl" frameborder="0" width="100%" height="800"></iframe>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="viewFileVisible = false" type="primary">关闭</el-button>
+            </div>
+        </template>
+    </el-dialog>
+
+
+</template>
+<script setup>
+const { proxy } = getCurrentInstance();
+const dialogVisible = defineModel();
+const props = defineProps(['fileList'])
+const viewFileVisible = ref(false)
+const fileUrl = ref('')
+const downloadFile = async (data) => {
+    // 这里可以添加下载文件的逻辑
+    await proxy?.download(data.fileUrl, {}, data.fileName);
+    proxy?.$message({
+        message: '下载成功',
+        type: 'success'
+    });
+};
+const viewFile = (data) => {
+    // 这里可以添加查看文件的逻辑
+    fileUrl.value = data.fileUrl;
+    viewFileVisible.value = true;
+}
+const adjustIframe = () => {
+    const iframe = document.querySelector('iframe');
+    if (iframe) {
+        iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`;
+    }
+};
+</script>

src/views/ctr/expensesContract/index.vue

@@ -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();
 });

src/views/ctr/incomeContract/index.vue

@@ -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="contractOwner">
-              <el-input v-model="queryParams.contractOwner" placeholder="请输入业主单位" clearable @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.contractOwner" 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" />
@@ -28,25 +30,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:incomeContract:add']">新增</el-button>
+          <!-- <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd"
+              v-hasPermi="['ctr:incomeContract:add']">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['ctr:incomeContract:edit']">修改</el-button>
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
+              v-hasPermi="['ctr:incomeContract:edit']">修改</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['ctr:incomeContract:remove']">删除</el-button>
-          </el-col>
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
+              v-hasPermi="['ctr:incomeContract:remove']">删除</el-button>
+          </el-col> 
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['ctr:incomeContract:export']">导出</el-button>
-          </el-col>
+            <el-button type="warning" plain icon="Download" @click="handleExport"
+              v-hasPermi="['ctr:incomeContract:export']">导出</el-button>
+          </el-col>-->
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="incomeContractList" @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" />
@@ -56,17 +63,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:incomeContract:edit']"></el-button>
+            <!-- <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['ctr:incomeContract:edit']"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['ctr:incomeContract:remove']"></el-button>
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                v-hasPermi="['ctr:incomeContract: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>
@@ -81,7 +94,7 @@
           <el-input v-model="form.contractOwner" 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="请输入合同金额" />
@@ -97,13 +110,14 @@
         </div>
       </template>
     </el-dialog>
+    <FileList v-model="fileListVisible" :fileList="fileList" />
   </div>
 </template>
 
 <script setup name="IncomeContract" lang="ts">
-import { listIncomeContract, getIncomeContract, delIncomeContract, addIncomeContract, updateIncomeContract } from '@/api/ctr/incomeContract';
+import { listIncomeContract, getIncomeContract, delIncomeContract, addIncomeContract, updateIncomeContract, getFileList } from '@/api/ctr/incomeContract';
 import { IncomeContractVO, IncomeContractQuery, IncomeContractForm } from '@/api/ctr/incomeContract/types';
-
+import FileList from '@/components/FileList/index.vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const incomeContractList = ref<IncomeContractVO[]>([]);
@@ -114,10 +128,10 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-
+const fileListVisible = ref(false); // 控制附件列表对话框的显示
 const queryFormRef = ref<ElFormInstance>();
 const incomeContractFormRef = ref<ElFormInstance>();
-
+const fileList = ref<Array<any>>([]); // 文件列表
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -134,7 +148,7 @@ const initFormData: IncomeContractForm = {
   remark: undefined,
 }
 const data = reactive<PageData<IncomeContractForm, IncomeContractQuery>>({
-  form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -176,7 +190,7 @@ const cancel = () => {
 
 /** 表单重置 */
 const reset = () => {
-  form.value = {...initFormData};
+  form.value = { ...initFormData };
   incomeContractFormRef.value?.resetFields();
 }
 
@@ -222,9 +236,9 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
-        await updateIncomeContract(form.value).finally(() =>  buttonLoading.value = false);
+        await updateIncomeContract(form.value).finally(() => buttonLoading.value = false);
       } else {
-        await addIncomeContract(form.value).finally(() =>  buttonLoading.value = false);
+        await addIncomeContract(form.value).finally(() => buttonLoading.value = false);
       }
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
@@ -248,7 +262,18 @@ const handleExport = () => {
     ...queryParams.value
   }, `incomeContract_${new Date().getTime()}.xlsx`)
 }
+// 查看附件列表操作
+const handleShowFileList = async (row: IncomeContractVO) => {
+  console.log(row.id);
 
+  await getFileList({ contractId: row.id }).then(res => {
+    fileList.value = res.rows
+    fileListVisible.value = true;
+  }).catch(() => {
+    proxy?.$modal.error("获取文件列表失败");
+  });
+
+}
 onMounted(() => {
   getList();
 });

src/views/ctr/index.vue

@@ -14,11 +14,13 @@
 
             </template>
             <template v-else-if="active == 1">
+                <h1>{{ contract_type == "income" ? "收入合同" : "支出合同" }}</h1>
                 <template v-if="contract_type == 'income'">
-                    <el-form ref="incomeContractFormRef" :model="form" :rules="rules" label-width="80px">
-                        <el-form-item label="项目名称">
-                            <el-input :model-value="projectName" placeholder="请输入项目ID" disabled />
-                        </el-form-item>
+                    <el-form ref="incomeContractFormRef" :model="form" :rules="incomeContractFormRules"
+                        label-width="80px">
+                        <!-- <el-form-item label="项目名称">
+                            <el-input :model-value="project.name" disabled />
+                        </el-form-item> -->
                         <el-form-item label="合同编号" prop="contractCode">
                             <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
                         </el-form-item>
@@ -35,7 +37,8 @@
                             <editor v-model="form.contractedContent" :min-height="192" />
                         </el-form-item>
                         <el-form-item label="合同金额" prop="amount">
-                            <el-input v-model="form.amount" placeholder="请输入合同金额" />
+                            <el-input v-model="form.amount" placeholder="请输入合同金额"
+                                oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
                         </el-form-item>
                         <el-form-item label="备注" prop="remark">
                             <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -47,10 +50,11 @@
                     </el-form>
                 </template>
                 <template v-else-if="contract_type == 'expenses'">
-                    <el-form ref="expensesContractFormRef" :model="form" :rules="rules" label-width="80px">
-                        <el-form-item label="项目名称">
+                    <el-form ref="expensesContractFormRef" :model="form" :rules="expensesContractFormRules"
+                        label-width="80px">
+                        <!-- <el-form-item label="项目名称">
                             <el-input :model-value="projectName" placeholder="请输入项目ID" disabled />
-                        </el-form-item>
+                        </el-form-item> -->
                         <el-form-item label="合同编号" prop="contractCode">
                             <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
                         </el-form-item>
@@ -67,7 +71,9 @@
                             <editor v-model="form.contractedContent" :min-height="192" />
                         </el-form-item>
                         <el-form-item label="合同金额" prop="amount">
-                            <el-input v-model="form.amount" placeholder="请输入合同金额" />
+                            <el-input
+                                oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
+                                v-model="form.amount" placeholder="请输入合同金额" />
                         </el-form-item>
                         <el-form-item label="招标Id" prop="tenderId">
                             <el-input v-model="form.tenderId" placeholder="请输入招标Id" />
@@ -82,32 +88,40 @@
                     </el-form>
                 </template>
                 <div>
-                    <el-button @click="back">上一步</el-button>
-                    <el-button type="primary" @click="active++">下一步</el-button>
+                    <el-button @click="back(true)">上一步</el-button>
+                    <el-button type="primary" @click="next">下一步</el-button>
                 </div>
             </template>
             <template v-else-if="active == 2">
-                <el-form :model="form" :rules="rules" label-width="120">
+                <h1>{{ contract_type == "income" ? "收入合同" : "支出合同" }}</h1>
+                <el-form :model="form" :rules="payMentRules" label-width="120" ref="payMentRef">
                     <el-form-item label="支付方式" placeholder="请选择支付方式" prop="payType">
                         <el-select v-model="form.payType">
-                            <el-option :value="1">月结算</el-option>
-                            <el-option :value="2">形象节点</el-option>
+                            <el-option :value="1" label="月结算">月结算</el-option>
+                            <el-option :value="2" label="形象节点">形象节点</el-option>
                         </el-select>
                     </el-form-item>
                     <el-form-item label="预付款比例" prop="advancePayRatio">
-                        <el-input v-model="form.advancePayRatio" placeholder="请输入预付款比例" />
+                        <el-input v-model="form.advancePayRatio" placeholder="请输入预付款比例"
+                            oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
                     </el-form-item>
                     <el-form-item label="尾款比例" prop="balancePayRatio">
-                        <el-input v-model="form.balancePayRatio" placeholder="请输入尾款比例" />
+                        <el-input v-model="form.balancePayRatio" placeholder="请输入尾款比例"
+                            oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
                     </el-form-item>
                     <el-form-item label="质保金比例" prop="assuranceDepositRatio;">
-                        <el-input v-model="form.assuranceDepositRatio" placeholder="请输入质保金比例" />
+                        <el-input v-model="form.assuranceDepositRatio" placeholder="请输入质保金比例"
+                            oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
                     </el-form-item>
                     <el-form-item label="付款比例" prop="payRatio">
-                        <el-input v-model="form.payRatio" placeholder="请输入付款比例" />
+                        <el-input v-model="form.payRatio" placeholder="请输入付款比例"
+                            oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
                     </el-form-item>
                     <el-form-item>
-                        <el-button type="success">提交</el-button>
+                        <div>
+                            <el-button @click="back(false)">上一步</el-button>
+                            <el-button type="success" @click="submitForm">提交</el-button>
+                        </div>
                     </el-form-item>
                 </el-form>
             </template>
@@ -117,6 +131,9 @@
 </template>
 <script setup>
 import FileUpload from '@/components/FileUpload';
+import { listExpensesContract, getExpensesContract, delExpensesContract, addExpensesContract, updateExpensesContract } from '@/api/ctr/expensesContract';
+import { listIncomeContract, getIncomeContract, delIncomeContract, addIncomeContract, updateIncomeContract } from '@/api/ctr/incomeContract';
+
 const active = ref(0);
 const contract_type = ref("")
 const form = ref({ payType: 1 })
@@ -127,30 +144,164 @@ const { proxy } = getCurrentInstance();
 const { expenses_contract_type, income_contract_type } = toRefs(
     proxy?.useDict('income_contract_type', 'expenses_contract_type')
 );
-console.log(income_contract_type);
+const fileRef = ref(null);
+const incomeContractFormRef = ref(null);
+const expensesContractFormRef = ref(null);
+const payMentRef = ref(null);
+const incomeContractFormRules = {
+    contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
+    contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
+    contractOwner: [{ required: true, message: '请输入业主单位', trigger: 'blur' }],
+    amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
+    remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
+};
+const expensesContractFormRules = {
+    contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
+    contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
+    contractSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
+    amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
+    tenderId: [{ required: false, message: '请输入招标Id', trigger: 'blur' }],
+    remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
+};
+const payMentRules = {
+    payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
+    advancePayRatio: [{ required: true, message: '请输入预付款比例', trigger: 'blur' }],
+    balancePayRatio: [{ required: true, message: '请输入尾款比例', trigger: 'blur' }],
+    assuranceDepositRatio: [{ required: true, message: '请输入质保金比例', trigger: 'blur' }],
+    payRatio: [{ required: true, message: '请输入付款比例', trigger: 'blur' }],
+};
+
+const project = computed(() => {
+    return JSON.parse(localStorage.getItem("selectedProject"))
+});
 
 const checkContractType = (type) => {
     contract_type.value = type;
     form.value.contract_type = type;
     active.value = 1;
     form.value.step = active.value;
+};
+const onUploadSuccess = (data) => {
+    fileList.value = data
+}
+const back = async (reset) => {
+    if (reset) {
+        await ElMessageBox.confirm('返回上一步将清空目前填写的内容，确定返回？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }).then(() => {
+            resetForm();
+            active.value--;
+        }).catch(() => {
+            return;
+        });
+    } else {
+        active.value--;
+    }
+    form.value.step = active.value;
 
 };
-const projectName = computed(() => {
-    return JSON.parse(localStorage.getItem("selectedProject"))['name']
-});
-const onUploadSuccess = (data) => {
-    console.log(data);
+const next = async () => {
+    if (contract_type.value === 'income') {
+        await incomeContractFormRef.value.validate((valid) => {
+            if (valid) {
+                active.value++;
+            } else {
+                ElMessage.error('请填写完整的收入合同信息');
+            }
+        });
+    } else if (contract_type.value === 'expenses') {
+        await expensesContractFormRef.value.validate((valid) => {
+            if (valid) {
+                active.value++;
+            } else {
+                ElMessage.error('请填写完整的支出合同信息');
+            }
+        });
+    }
+    console.log(active.value);
 
-    data.forEach(item => {
-        // const { name: fileName, url: fileUrl, ossId } = item;
-        // fileList.value.push({ fileName, fileUrl, ossId, contractType: contractType.value });
+    form.value.step = active.value;
+};
+const resetForm = () => {
+    form.value = {
+        payType: 1,
+        contractCode: '',
+        contractType: '',
+        contractOwner: '',
+        contractedContent: '',
+        amount: '',
+        remark: '',
+        advancePayRatio: '',
+        balancePayRatio: '',
+        assuranceDepositRatio: '',
+        payRatio: ''
+    };
+    fileList.value = [];
+    tempFileList.value = [];
+    contract_type.value = '';
+    active.value = 0;
+    setTimeout(() => {
+        localStorage.removeItem("tempContractForm");
 
-        fileList.value.push(item);
+    }, 0);
+};
+const submitForm = async () => {
+    console.log(payMentRef.value);
 
+    await payMentRef.value.validate(async (valid) => {
+        if (valid) {
+            // 提交付款信息逻辑
+            console.log('提交付款信息', form.value, fileList.value);
+            // 这里可以调用API提交数据
+            form.value.projectId = project.value.id;
+            form.value.fileList = fileList.value.map((data) => {
+                return {
+                    ...data,
+                    fileName: data.name,
+                    fileUrl: data.url,
+                }
+            })
+            if (contract_type.value === 'income') {
+                await addIncomeContract({ ...form.value });
+            } else if (contract_type.value === 'expenses') {
+                await addExpensesContract({ ...form.value });
+            }
+            resetForm();
+            ElMessage.success('合同提交成功');
+        } else {
+            ElMessage.error('请填写完整的付款信息');
+        }
     });
+    // if (contract_type.value === 'income') {
+    //     const incomeContractFormRef = ref(null);
+    //     await incomeContractFormRef.value.validate(async (valid) => {
+    //         if (valid) {
+    //             // 提交收入合同逻辑
+    //             console.log('提交收入合同', form.value, fileList.value);
+    //             // 这里可以调用API提交数据
+    //             resetForm();
+    //             ElMessage.success('收入合同提交成功');
+    //         } else {
+    //             ElMessage.error('请填写完整的收入合同信息');
+    //         }
+    //     });
+    // } else if (contract_type.value === 'expenses') {
+    //     const expensesContractFormRef = ref(null);
+    //     await expensesContractFormRef.value.validate(async (valid) => {
+    //         if (valid) {
+    //             // 提交支出合同逻辑
+    //             console.log('提交支出合同', form.value, fileList.value);
+    //             // 这里可以调用API提交数据
+    //             resetForm();
+    //             ElMessage.success('支出合同提交成功');
+    //         } else {
+    //             ElMessage.error('请填写完整的支出合同信息');
+    //         }
+    //     });
+    // }
 }
-const fileRef = ref(null);
 watch(form, (val) => {
     localStorage.setItem("tempContractForm", JSON.stringify({ ...val, fileList: fileList.value }));
 }, { deep: true });
@@ -168,12 +319,10 @@ onMounted(() => {
             const t = JSON.parse(tempForm);
             const { fileList: files, ...rest } = JSON.parse(tempForm);
             form.value = rest;
-            console.log(form.value);
-
             fileList.value = files || [];
             tempFileList.value = files || [];
             contract_type.value = form.value.contract_type;
-            active.value = 1;
+            active.value = form.value.step || 0;
 
         }).catch(() => {
             localStorage.removeItem("tempContractForm");