更新费用管理

src/styles/expense/finReimburse/record.scoped.scss → src/styles/expense/expense.scoped.scss

@@ -1,8 +1,8 @@
-.hc-total-reimbursement {
+.hc-expense-total-title {
     color: #101010;
     font-size: 20px;
 }
-.hac-expense-finReimburse-record-body {
+.hac-expense-record-body {
     position: relative;
     height: 100%;
     display: flex;
@@ -11,9 +11,6 @@
         height: 100%;
         flex: 1;
         padding-right: 24px;
-        .record-form-action-box {
-            position: relative;
-        }
     }
     .record-flow-box {
         position: relative;

src/styles/expense/expense.scss

@@ -0,0 +1,9 @@
+.hac-expense-record-body .record-form-box .hc-card-item-box.hac-bg-grey {
+    background: #f7f7f7;
+}
+.hac-expense-record-body .record-flow-box .el-timeline-item__wrapper {
+    top: -7px;
+}
+.hac-expense-record-body .record-flow-box .el-timeline {
+    padding: 5px;
+}

src/styles/expense/finReimburse/record.scss

@@ -1,9 +0,0 @@
-.hac-expense-finReimburse-record-body .record-form-box .hc-card-item-box.hac-bg-grey {
-    background: #f7f7f7;
-}
-.record-flow-box .el-timeline-item__wrapper {
-    top: -7px;
-}
-.record-flow-box .el-timeline {
-    padding: 5px;
-}

src/views/expense/finReimburse/record.vue

@@ -1,9 +1,9 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="hc-total-reimbursement">报销总额(元)：1520</div>
+            <div class="hc-expense-total-title">报销总额(元)：1520</div>
         </template>
-        <div class="hac-expense-finReimburse-record-body">
+        <div class="hac-expense-record-body">
             <div class="record-form-box">
                 <el-scrollbar>
                     <HcCardItem title="报销明细1" ui="hac-bg-grey">
@@ -207,9 +207,12 @@ const timeLineData = ref([
 </script>
 
 <style scoped lang="scss">
-@import "~src/styles/expense/finReimburse/record.scoped.scss";
+@import "~src/styles/expense/expense.scoped.scss";
+.record-form-action-box {
+    position: relative;
+}
 </style>
 
 <style lang="scss">
-@import "~src/styles/expense/finReimburse/record.scss";
+@import "~src/styles/expense/expense.scss";
 </style>

src/views/expense/invoice/billing.vue

@@ -1,156 +1,218 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
+            <div class="hc-expense-total-title">报销总额(元)：1520</div>
+        </template>
+        <div class="hac-expense-record-body">
+            <div class="record-form-box">
+                <el-scrollbar>
+                    <HcCardItem title="报销明细1" ui="hac-bg-grey">
+                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                            <div class="hc-form-item">
+                                <el-form-item label="所属项目：" prop="key1">
+                                    <el-select block v-model="formModel.key1">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                                <div class="ml-2">
+                                    <el-button type="default" @click="budgetModalShow">
+                                        <HcIcon name="add"/>
+                                        <span>关联预算计划</span>
+                                    </el-button>
+                                </div>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="报销金额(元)：" prop="key2">
+                                    <el-input v-model="formModel.key2" placeholder="请输入报销金额" />
+                                </el-form-item>
+                                <el-form-item label="费用发生日期：" prop="key3">
+                                    <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                                </el-form-item>
+                                <el-form-item label="费用类型：" prop="key4">
+                                    <el-select block v-model="formModel.key4">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                            <el-form-item label="费用说明：">
+                                <el-input type="textarea"
+                                          v-model="formModel.key5"
+                                          :autosize="{ minRows: 3, maxRows: 5 }"
+                                          placeholder="请输入费用说明"
+                                />
+                            </el-form-item>
+                            <el-form-item label="电子发票：">
+                                <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
+                            </el-form-item>
+                            <el-form-item label="附件文件：">
+                                <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcCardItem>
+
+                    <div class="record-form-action-box mt-16">
+                        <el-divider content-position="right" border-style="dashed">
+                            <el-button type="primary" hc-btn>
+                                <HcIcon name="add"/>
+                                <span>添加明细</span>
+                            </el-button>
+                        </el-divider>
+                        <el-form class="mt-16" inline :model="formInline" label-position="top">
+                            <el-form-item label="归属人">
+                                <el-select v-model="formInline.key1">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="是否抵消借款金额">
+                                <el-select v-model="formInline.key2">
+                                    <el-option label="是" value="1" />
+                                    <el-option label="否" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="选择借款项">
+                                <el-select v-model="formInline.key3">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="冲抵后的实际报销金额">
+                                <el-input v-model="formInline.key2" disabled>
+                                    <template #append>元</template>
+                                </el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-scrollbar>
             </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
+            <div class="record-flow-box">
+                <div class="title">流程</div>
+                <div class="content">
+                    <el-scrollbar>
+                        <el-timeline>
+                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
+                                <div class="timeline-title">{{item.title}}</div>
+                                <div class="timeline-section">{{item.section}}</div>
+                            </el-timeline-item>
+                        </el-timeline>
+                    </el-scrollbar>
+                </div>
+                <div class="action">
+                    <el-button type="warning" hc-btn>
+                        <HcIcon name="draft"/>
+                        <span>暂存草稿</span>
+                    </el-button>
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="check-double"/>
+                        <span>提交报销申请</span>
+                    </el-button>
+                </div>
             </div>
-        </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
-            </el-button>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
-            </template>
-        </HcTable>
-
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
+        </div>
+
+        <!--上传控件-->
+        <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>
+
+        <!--关联预算计划-->
+        <HcDialog bgColor="#ffffff" isToBody isTable
+                  title="关联预算计划" widths="80%" saveText="保存"
+                  :show="budgetModal"
+                  @close="budgetCloseClick"
+                  @save="budgetSaveClick"
+        >
+            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
+                <template #action="{row,index}">
+                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
+                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
+                </template>
+            </HcTable>
+        </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
 import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
 
 const router = useRouter()
 
-//项目类型
-const projectType = ref([
-    {name: '二级路', key: '二级路'},
-    {name: '国道', key: '国道'},
-    {name: '水利水电', key: '水利水电'},
-    {name: '市政', key: '市政'},
-])
+//上传配置
+const HcUploadFileRef = ref(null)
+const uploadEchoParams = ref({})
+const uploadFileOptions = {
+    headers: getTokenHeader(),
+}
 
-//搜索表单
-const searchForm = ref({
-    projectType: null, user: null, project: null,
-    current: 1, size: 20, total: 0
+//明细表单
+const formRef = ref(null)
+const formModel = ref({
+    key1: '', key2: '', key3: '', key4: '', key5: '',
 })
+const formRules = {}
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//关联预算计划
+const budgetModal = ref(false)
+const budgetModalShow = () => {
+    budgetModal.value = true
 }
-
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+const budgetCloseClick = () => {
+    budgetModal.value = false
 }
+const budgetSaveClick = () => {
 
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
 }
 
-//获取数据
-const tableLoading = ref(false)
-const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+//关联预算计划表格
+const tableBudgetColumn = [
+    {key: 'key1', name: '任务所属项目'},
+    {key: 'key2', name: '状态',  width: '120', align: 'center'},
+    {key: 'key3', name: '任务描述'},
+    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '100', align: 'center'},
 ]
-const tableData = ref([
-    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+const tableBudgetData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
 ])
 
-const getTableData = () => {
 
+//电子发票
+const formInvoiceClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//预览
-const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+//附件
+const formFileClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//新增预算
-const addRowClick = () => {
-    router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
-    })
-}
+//上传完成
+const HcUploadFileSuccess = (res) => {
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
 }
 
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
-}
+const formInline = ref({})
+const timeLineData = ref([
+    {title: '审批人', section: '部门负责人'},
+    {title: '财务审核', section: '财务'},
+    {title: '最终确认付款人', section: '总经理'},
+    {title: '出纳付款', section: '出纳'},
+    {title: '抄送人', section: '总经理、财务、申请人'},
+])
 </script>
+
+<style scoped lang="scss">
+@import "~src/styles/expense/expense.scoped.scss";
+.record-form-action-box {
+    position: relative;
+}
+</style>
+
+<style lang="scss">
+@import "~src/styles/expense/expense.scss";
+</style>

src/views/expense/invoice/index.vue

@@ -2,18 +2,15 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="归属人" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
+            <div class="w-72 ml-2">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="项目名称" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
                     <HcIcon name="search-2"/>
@@ -28,29 +25,41 @@
             </div>
         </template>
         <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
+            <el-button size="large" type="warning" hc-btn @click="draftsClick">
+                <HcIcon name="draft"/>
+                <span>草稿箱(1)</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
+                <span>新增报销记录</span>
             </el-button>
         </template>
 
         <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
+            <template #key="{row}">
+                <span class="text-blue" @click="rowNameTap(row)">{{row.key}}</span>
             </template>
             <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <el-button size="small" type="primary">撤销</el-button>
             </template>
         </HcTable>
 
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
+
+        <!--草稿箱-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="draftsModal" title="草稿箱(1)" widths="62rem" @close="draftsCloseClick">
+            <el-alert title="3个月内未更新的草稿将被自动删除" type="warning" show-icon />
+            <div style="position: relative;height: calc(100% - 44px);">
+                <HcTable :isIndex="false" :column="tableDraftsColumn" :datas="tableDraftsData">
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary">继续编辑</el-button>
+                        <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                </HcTable>
+            </div>
+        </HcDialog>
     </HcCard>
 </template>
 
@@ -95,14 +104,17 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key', name: '报销编号', width: '120', align: 'center'},
+    {key: 'key1', name: '报销类型', width: '140'},
+    {key: 'key2', name: '项目名称', minWidth: '200'},
+    {key: 'key3', name: '报销金额', width: '160', align: 'center'},
+    {key: 'key4', name: '归属人', width: '140', align: 'center'},
+    {key: 'key5', name: '审批结果', width: '140', align: 'center'},
+    {key: 'key6', name: '审批状态', width: '140', align: 'center'},
+    {key: 'key7', name: '报销时间', width: '160', align: 'center'},
+    {key: 'key8', name: '创建人', width: '140', align: 'center'},
+    {key: 'key9', name: '创建时间', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
@@ -119,38 +131,31 @@ const getTableData = () => {
 
 //预览
 const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+
 }
 
 //新增预算
 const addRowClick = () => {
     router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
+        name: 'expense-finReimburse-record'
     })
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
+//草稿箱
+const draftsModal = ref(false)
+const draftsClick = () => {
+    draftsModal.value = true
 }
-
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
+const draftsCloseClick = () => {
+    draftsModal.value = false
 }
+
+//草稿箱数据
+const tableDraftsColumn = [
+    {key: 'key1', name: '标题'},
+    {key: 'key2', name: '更新时间', width: '200'},
+    {key: 'action', name: '操作', width: '170', align: 'center'},
+]
+const tableDraftsData = ref([{id: 1, key1: 'xxxx', key2: 'xxxx'}, {id: 2, key1: 'xxxx', key2: 'xxxx'}, {id: 3, key1: 'xxxx', key2: 'xxxx'}])
+
 </script>

src/views/expense/loanRequest/index.vue

@@ -2,18 +2,15 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="归属人" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
+            <div class="w-72 ml-2">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="项目名称" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
                     <HcIcon name="search-2"/>
@@ -28,29 +25,41 @@
             </div>
         </template>
         <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
+            <el-button size="large" type="warning" hc-btn @click="draftsClick">
+                <HcIcon name="draft"/>
+                <span>草稿箱(1)</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
+                <span>新增报销记录</span>
             </el-button>
         </template>
 
         <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
+            <template #key="{row}">
+                <span class="text-blue" @click="rowNameTap(row)">{{row.key}}</span>
             </template>
             <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <el-button size="small" type="primary">撤销</el-button>
             </template>
         </HcTable>
 
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
+
+        <!--草稿箱-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="draftsModal" title="草稿箱(1)" widths="62rem" @close="draftsCloseClick">
+            <el-alert title="3个月内未更新的草稿将被自动删除" type="warning" show-icon />
+            <div style="position: relative;height: calc(100% - 44px);">
+                <HcTable :isIndex="false" :column="tableDraftsColumn" :datas="tableDraftsData">
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary">继续编辑</el-button>
+                        <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                </HcTable>
+            </div>
+        </HcDialog>
     </HcCard>
 </template>
 
@@ -95,14 +104,17 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key', name: '报销编号', width: '120', align: 'center'},
+    {key: 'key1', name: '报销类型', width: '140'},
+    {key: 'key2', name: '项目名称', minWidth: '200'},
+    {key: 'key3', name: '报销金额', width: '160', align: 'center'},
+    {key: 'key4', name: '归属人', width: '140', align: 'center'},
+    {key: 'key5', name: '审批结果', width: '140', align: 'center'},
+    {key: 'key6', name: '审批状态', width: '140', align: 'center'},
+    {key: 'key7', name: '报销时间', width: '160', align: 'center'},
+    {key: 'key8', name: '创建人', width: '140', align: 'center'},
+    {key: 'key9', name: '创建时间', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
@@ -119,38 +131,31 @@ const getTableData = () => {
 
 //预览
 const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+
 }
 
 //新增预算
 const addRowClick = () => {
     router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
+        name: 'expense-finReimburse-record'
     })
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
+//草稿箱
+const draftsModal = ref(false)
+const draftsClick = () => {
+    draftsModal.value = true
 }
-
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
+const draftsCloseClick = () => {
+    draftsModal.value = false
 }
+
+//草稿箱数据
+const tableDraftsColumn = [
+    {key: 'key1', name: '标题'},
+    {key: 'key2', name: '更新时间', width: '200'},
+    {key: 'action', name: '操作', width: '170', align: 'center'},
+]
+const tableDraftsData = ref([{id: 1, key1: 'xxxx', key2: 'xxxx'}, {id: 2, key1: 'xxxx', key2: 'xxxx'}, {id: 3, key1: 'xxxx', key2: 'xxxx'}])
+
 </script>

src/views/expense/loanRequest/record.vue

@@ -1,156 +1,218 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
+            <div class="hc-expense-total-title">报销总额(元)：1520</div>
+        </template>
+        <div class="hac-expense-record-body">
+            <div class="record-form-box">
+                <el-scrollbar>
+                    <HcCardItem title="报销明细1" ui="hac-bg-grey">
+                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                            <div class="hc-form-item">
+                                <el-form-item label="所属项目：" prop="key1">
+                                    <el-select block v-model="formModel.key1">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                                <div class="ml-2">
+                                    <el-button type="default" @click="budgetModalShow">
+                                        <HcIcon name="add"/>
+                                        <span>关联预算计划</span>
+                                    </el-button>
+                                </div>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="报销金额(元)：" prop="key2">
+                                    <el-input v-model="formModel.key2" placeholder="请输入报销金额" />
+                                </el-form-item>
+                                <el-form-item label="费用发生日期：" prop="key3">
+                                    <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                                </el-form-item>
+                                <el-form-item label="费用类型：" prop="key4">
+                                    <el-select block v-model="formModel.key4">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                            <el-form-item label="费用说明：">
+                                <el-input type="textarea"
+                                          v-model="formModel.key5"
+                                          :autosize="{ minRows: 3, maxRows: 5 }"
+                                          placeholder="请输入费用说明"
+                                />
+                            </el-form-item>
+                            <el-form-item label="电子发票：">
+                                <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
+                            </el-form-item>
+                            <el-form-item label="附件文件：">
+                                <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcCardItem>
+
+                    <div class="record-form-action-box mt-16">
+                        <el-divider content-position="right" border-style="dashed">
+                            <el-button type="primary" hc-btn>
+                                <HcIcon name="add"/>
+                                <span>添加明细</span>
+                            </el-button>
+                        </el-divider>
+                        <el-form class="mt-16" inline :model="formInline" label-position="top">
+                            <el-form-item label="归属人">
+                                <el-select v-model="formInline.key1">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="是否抵消借款金额">
+                                <el-select v-model="formInline.key2">
+                                    <el-option label="是" value="1" />
+                                    <el-option label="否" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="选择借款项">
+                                <el-select v-model="formInline.key3">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="冲抵后的实际报销金额">
+                                <el-input v-model="formInline.key2" disabled>
+                                    <template #append>元</template>
+                                </el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-scrollbar>
             </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
+            <div class="record-flow-box">
+                <div class="title">流程</div>
+                <div class="content">
+                    <el-scrollbar>
+                        <el-timeline>
+                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
+                                <div class="timeline-title">{{item.title}}</div>
+                                <div class="timeline-section">{{item.section}}</div>
+                            </el-timeline-item>
+                        </el-timeline>
+                    </el-scrollbar>
+                </div>
+                <div class="action">
+                    <el-button type="warning" hc-btn>
+                        <HcIcon name="draft"/>
+                        <span>暂存草稿</span>
+                    </el-button>
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="check-double"/>
+                        <span>提交报销申请</span>
+                    </el-button>
+                </div>
             </div>
-        </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
-            </el-button>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
-            </template>
-        </HcTable>
-
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
+        </div>
+
+        <!--上传控件-->
+        <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>
+
+        <!--关联预算计划-->
+        <HcDialog bgColor="#ffffff" isToBody isTable
+                  title="关联预算计划" widths="80%" saveText="保存"
+                  :show="budgetModal"
+                  @close="budgetCloseClick"
+                  @save="budgetSaveClick"
+        >
+            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
+                <template #action="{row,index}">
+                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
+                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
+                </template>
+            </HcTable>
+        </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
 import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
 
 const router = useRouter()
 
-//项目类型
-const projectType = ref([
-    {name: '二级路', key: '二级路'},
-    {name: '国道', key: '国道'},
-    {name: '水利水电', key: '水利水电'},
-    {name: '市政', key: '市政'},
-])
+//上传配置
+const HcUploadFileRef = ref(null)
+const uploadEchoParams = ref({})
+const uploadFileOptions = {
+    headers: getTokenHeader(),
+}
 
-//搜索表单
-const searchForm = ref({
-    projectType: null, user: null, project: null,
-    current: 1, size: 20, total: 0
+//明细表单
+const formRef = ref(null)
+const formModel = ref({
+    key1: '', key2: '', key3: '', key4: '', key5: '',
 })
+const formRules = {}
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//关联预算计划
+const budgetModal = ref(false)
+const budgetModalShow = () => {
+    budgetModal.value = true
 }
-
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+const budgetCloseClick = () => {
+    budgetModal.value = false
 }
+const budgetSaveClick = () => {
 
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
 }
 
-//获取数据
-const tableLoading = ref(false)
-const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+//关联预算计划表格
+const tableBudgetColumn = [
+    {key: 'key1', name: '任务所属项目'},
+    {key: 'key2', name: '状态',  width: '120', align: 'center'},
+    {key: 'key3', name: '任务描述'},
+    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '100', align: 'center'},
 ]
-const tableData = ref([
-    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+const tableBudgetData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
 ])
 
-const getTableData = () => {
 
+//电子发票
+const formInvoiceClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//预览
-const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+//附件
+const formFileClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//新增预算
-const addRowClick = () => {
-    router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
-    })
-}
+//上传完成
+const HcUploadFileSuccess = (res) => {
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
 }
 
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
-}
+const formInline = ref({})
+const timeLineData = ref([
+    {title: '审批人', section: '部门负责人'},
+    {title: '财务审核', section: '财务'},
+    {title: '最终确认付款人', section: '总经理'},
+    {title: '出纳付款', section: '出纳'},
+    {title: '抄送人', section: '总经理、财务、申请人'},
+])
 </script>
+
+<style scoped lang="scss">
+@import "~src/styles/expense/expense.scoped.scss";
+.record-form-action-box {
+    position: relative;
+}
+</style>
+
+<style lang="scss">
+@import "~src/styles/expense/expense.scss";
+</style>

src/views/expense/outsourcing/index.vue

@@ -2,18 +2,15 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="归属人" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
+            <div class="w-72 ml-2">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="项目名称" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
                     <HcIcon name="search-2"/>
@@ -28,29 +25,41 @@
             </div>
         </template>
         <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
+            <el-button size="large" type="warning" hc-btn @click="draftsClick">
+                <HcIcon name="draft"/>
+                <span>草稿箱(1)</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
+                <span>新增报销记录</span>
             </el-button>
         </template>
 
         <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
+            <template #key="{row}">
+                <span class="text-blue" @click="rowNameTap(row)">{{row.key}}</span>
             </template>
             <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <el-button size="small" type="primary">撤销</el-button>
             </template>
         </HcTable>
 
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
+
+        <!--草稿箱-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="draftsModal" title="草稿箱(1)" widths="62rem" @close="draftsCloseClick">
+            <el-alert title="3个月内未更新的草稿将被自动删除" type="warning" show-icon />
+            <div style="position: relative;height: calc(100% - 44px);">
+                <HcTable :isIndex="false" :column="tableDraftsColumn" :datas="tableDraftsData">
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary">继续编辑</el-button>
+                        <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                </HcTable>
+            </div>
+        </HcDialog>
     </HcCard>
 </template>
 
@@ -95,14 +104,17 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key', name: '报销编号', width: '120', align: 'center'},
+    {key: 'key1', name: '报销类型', width: '140'},
+    {key: 'key2', name: '项目名称', minWidth: '200'},
+    {key: 'key3', name: '报销金额', width: '160', align: 'center'},
+    {key: 'key4', name: '归属人', width: '140', align: 'center'},
+    {key: 'key5', name: '审批结果', width: '140', align: 'center'},
+    {key: 'key6', name: '审批状态', width: '140', align: 'center'},
+    {key: 'key7', name: '报销时间', width: '160', align: 'center'},
+    {key: 'key8', name: '创建人', width: '140', align: 'center'},
+    {key: 'key9', name: '创建时间', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
@@ -119,38 +131,31 @@ const getTableData = () => {
 
 //预览
 const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+
 }
 
 //新增预算
 const addRowClick = () => {
     router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
+        name: 'expense-finReimburse-record'
     })
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
+//草稿箱
+const draftsModal = ref(false)
+const draftsClick = () => {
+    draftsModal.value = true
 }
-
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
+const draftsCloseClick = () => {
+    draftsModal.value = false
 }
+
+//草稿箱数据
+const tableDraftsColumn = [
+    {key: 'key1', name: '标题'},
+    {key: 'key2', name: '更新时间', width: '200'},
+    {key: 'action', name: '操作', width: '170', align: 'center'},
+]
+const tableDraftsData = ref([{id: 1, key1: 'xxxx', key2: 'xxxx'}, {id: 2, key1: 'xxxx', key2: 'xxxx'}, {id: 3, key1: 'xxxx', key2: 'xxxx'}])
+
 </script>

src/views/expense/outsourcing/record.vue

@@ -1,156 +1,218 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
+            <div class="hc-expense-total-title">报销总额(元)：1520</div>
+        </template>
+        <div class="hac-expense-record-body">
+            <div class="record-form-box">
+                <el-scrollbar>
+                    <HcCardItem title="报销明细1" ui="hac-bg-grey">
+                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                            <div class="hc-form-item">
+                                <el-form-item label="所属项目：" prop="key1">
+                                    <el-select block v-model="formModel.key1">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                                <div class="ml-2">
+                                    <el-button type="default" @click="budgetModalShow">
+                                        <HcIcon name="add"/>
+                                        <span>关联预算计划</span>
+                                    </el-button>
+                                </div>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="报销金额(元)：" prop="key2">
+                                    <el-input v-model="formModel.key2" placeholder="请输入报销金额" />
+                                </el-form-item>
+                                <el-form-item label="费用发生日期：" prop="key3">
+                                    <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                                </el-form-item>
+                                <el-form-item label="费用类型：" prop="key4">
+                                    <el-select block v-model="formModel.key4">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                            <el-form-item label="费用说明：">
+                                <el-input type="textarea"
+                                          v-model="formModel.key5"
+                                          :autosize="{ minRows: 3, maxRows: 5 }"
+                                          placeholder="请输入费用说明"
+                                />
+                            </el-form-item>
+                            <el-form-item label="电子发票：">
+                                <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
+                            </el-form-item>
+                            <el-form-item label="附件文件：">
+                                <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcCardItem>
+
+                    <div class="record-form-action-box mt-16">
+                        <el-divider content-position="right" border-style="dashed">
+                            <el-button type="primary" hc-btn>
+                                <HcIcon name="add"/>
+                                <span>添加明细</span>
+                            </el-button>
+                        </el-divider>
+                        <el-form class="mt-16" inline :model="formInline" label-position="top">
+                            <el-form-item label="归属人">
+                                <el-select v-model="formInline.key1">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="是否抵消借款金额">
+                                <el-select v-model="formInline.key2">
+                                    <el-option label="是" value="1" />
+                                    <el-option label="否" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="选择借款项">
+                                <el-select v-model="formInline.key3">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="冲抵后的实际报销金额">
+                                <el-input v-model="formInline.key2" disabled>
+                                    <template #append>元</template>
+                                </el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-scrollbar>
             </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
+            <div class="record-flow-box">
+                <div class="title">流程</div>
+                <div class="content">
+                    <el-scrollbar>
+                        <el-timeline>
+                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
+                                <div class="timeline-title">{{item.title}}</div>
+                                <div class="timeline-section">{{item.section}}</div>
+                            </el-timeline-item>
+                        </el-timeline>
+                    </el-scrollbar>
+                </div>
+                <div class="action">
+                    <el-button type="warning" hc-btn>
+                        <HcIcon name="draft"/>
+                        <span>暂存草稿</span>
+                    </el-button>
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="check-double"/>
+                        <span>提交报销申请</span>
+                    </el-button>
+                </div>
             </div>
-        </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
-            </el-button>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
-            </template>
-        </HcTable>
-
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
+        </div>
+
+        <!--上传控件-->
+        <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>
+
+        <!--关联预算计划-->
+        <HcDialog bgColor="#ffffff" isToBody isTable
+                  title="关联预算计划" widths="80%" saveText="保存"
+                  :show="budgetModal"
+                  @close="budgetCloseClick"
+                  @save="budgetSaveClick"
+        >
+            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
+                <template #action="{row,index}">
+                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
+                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
+                </template>
+            </HcTable>
+        </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
 import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
 
 const router = useRouter()
 
-//项目类型
-const projectType = ref([
-    {name: '二级路', key: '二级路'},
-    {name: '国道', key: '国道'},
-    {name: '水利水电', key: '水利水电'},
-    {name: '市政', key: '市政'},
-])
+//上传配置
+const HcUploadFileRef = ref(null)
+const uploadEchoParams = ref({})
+const uploadFileOptions = {
+    headers: getTokenHeader(),
+}
 
-//搜索表单
-const searchForm = ref({
-    projectType: null, user: null, project: null,
-    current: 1, size: 20, total: 0
+//明细表单
+const formRef = ref(null)
+const formModel = ref({
+    key1: '', key2: '', key3: '', key4: '', key5: '',
 })
+const formRules = {}
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//关联预算计划
+const budgetModal = ref(false)
+const budgetModalShow = () => {
+    budgetModal.value = true
 }
-
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+const budgetCloseClick = () => {
+    budgetModal.value = false
 }
+const budgetSaveClick = () => {
 
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
 }
 
-//获取数据
-const tableLoading = ref(false)
-const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+//关联预算计划表格
+const tableBudgetColumn = [
+    {key: 'key1', name: '任务所属项目'},
+    {key: 'key2', name: '状态',  width: '120', align: 'center'},
+    {key: 'key3', name: '任务描述'},
+    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '100', align: 'center'},
 ]
-const tableData = ref([
-    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+const tableBudgetData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
 ])
 
-const getTableData = () => {
 
+//电子发票
+const formInvoiceClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//预览
-const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+//附件
+const formFileClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//新增预算
-const addRowClick = () => {
-    router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
-    })
-}
+//上传完成
+const HcUploadFileSuccess = (res) => {
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
 }
 
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
-}
+const formInline = ref({})
+const timeLineData = ref([
+    {title: '审批人', section: '部门负责人'},
+    {title: '财务审核', section: '财务'},
+    {title: '最终确认付款人', section: '总经理'},
+    {title: '出纳付款', section: '出纳'},
+    {title: '抄送人', section: '总经理、财务、申请人'},
+])
 </script>
+
+<style scoped lang="scss">
+@import "~src/styles/expense/expense.scoped.scss";
+.record-form-action-box {
+    position: relative;
+}
+</style>
+
+<style lang="scss">
+@import "~src/styles/expense/expense.scss";
+</style>

src/views/expense/paymentRequest/index.vue

@@ -2,18 +2,15 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="归属人" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
+            <div class="w-72 ml-2">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="项目名称" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
                     <HcIcon name="search-2"/>
@@ -28,29 +25,41 @@
             </div>
         </template>
         <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
+            <el-button size="large" type="warning" hc-btn @click="draftsClick">
+                <HcIcon name="draft"/>
+                <span>草稿箱(1)</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
+                <span>新增报销记录</span>
             </el-button>
         </template>
 
         <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
+            <template #key="{row}">
+                <span class="text-blue" @click="rowNameTap(row)">{{row.key}}</span>
             </template>
             <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <el-button size="small" type="primary">撤销</el-button>
             </template>
         </HcTable>
 
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
+
+        <!--草稿箱-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="draftsModal" title="草稿箱(1)" widths="62rem" @close="draftsCloseClick">
+            <el-alert title="3个月内未更新的草稿将被自动删除" type="warning" show-icon />
+            <div style="position: relative;height: calc(100% - 44px);">
+                <HcTable :isIndex="false" :column="tableDraftsColumn" :datas="tableDraftsData">
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary">继续编辑</el-button>
+                        <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                </HcTable>
+            </div>
+        </HcDialog>
     </HcCard>
 </template>
 
@@ -95,14 +104,17 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key', name: '报销编号', width: '120', align: 'center'},
+    {key: 'key1', name: '报销类型', width: '140'},
+    {key: 'key2', name: '项目名称', minWidth: '200'},
+    {key: 'key3', name: '报销金额', width: '160', align: 'center'},
+    {key: 'key4', name: '归属人', width: '140', align: 'center'},
+    {key: 'key5', name: '审批结果', width: '140', align: 'center'},
+    {key: 'key6', name: '审批状态', width: '140', align: 'center'},
+    {key: 'key7', name: '报销时间', width: '160', align: 'center'},
+    {key: 'key8', name: '创建人', width: '140', align: 'center'},
+    {key: 'key9', name: '创建时间', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
@@ -119,38 +131,31 @@ const getTableData = () => {
 
 //预览
 const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+
 }
 
 //新增预算
 const addRowClick = () => {
     router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
+        name: 'expense-finReimburse-record'
     })
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
+//草稿箱
+const draftsModal = ref(false)
+const draftsClick = () => {
+    draftsModal.value = true
 }
-
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
+const draftsCloseClick = () => {
+    draftsModal.value = false
 }
+
+//草稿箱数据
+const tableDraftsColumn = [
+    {key: 'key1', name: '标题'},
+    {key: 'key2', name: '更新时间', width: '200'},
+    {key: 'action', name: '操作', width: '170', align: 'center'},
+]
+const tableDraftsData = ref([{id: 1, key1: 'xxxx', key2: 'xxxx'}, {id: 2, key1: 'xxxx', key2: 'xxxx'}, {id: 3, key1: 'xxxx', key2: 'xxxx'}])
+
 </script>

src/views/expense/paymentRequest/record.vue

@@ -1,156 +1,218 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
+            <div class="hc-expense-total-title">报销总额(元)：1520</div>
+        </template>
+        <div class="hac-expense-record-body">
+            <div class="record-form-box">
+                <el-scrollbar>
+                    <HcCardItem title="报销明细1" ui="hac-bg-grey">
+                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                            <div class="hc-form-item">
+                                <el-form-item label="所属项目：" prop="key1">
+                                    <el-select block v-model="formModel.key1">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                                <div class="ml-2">
+                                    <el-button type="default" @click="budgetModalShow">
+                                        <HcIcon name="add"/>
+                                        <span>关联预算计划</span>
+                                    </el-button>
+                                </div>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="报销金额(元)：" prop="key2">
+                                    <el-input v-model="formModel.key2" placeholder="请输入报销金额" />
+                                </el-form-item>
+                                <el-form-item label="费用发生日期：" prop="key3">
+                                    <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                                </el-form-item>
+                                <el-form-item label="费用类型：" prop="key4">
+                                    <el-select block v-model="formModel.key4">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                            <el-form-item label="费用说明：">
+                                <el-input type="textarea"
+                                          v-model="formModel.key5"
+                                          :autosize="{ minRows: 3, maxRows: 5 }"
+                                          placeholder="请输入费用说明"
+                                />
+                            </el-form-item>
+                            <el-form-item label="电子发票：">
+                                <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
+                            </el-form-item>
+                            <el-form-item label="附件文件：">
+                                <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcCardItem>
+
+                    <div class="record-form-action-box mt-16">
+                        <el-divider content-position="right" border-style="dashed">
+                            <el-button type="primary" hc-btn>
+                                <HcIcon name="add"/>
+                                <span>添加明细</span>
+                            </el-button>
+                        </el-divider>
+                        <el-form class="mt-16" inline :model="formInline" label-position="top">
+                            <el-form-item label="归属人">
+                                <el-select v-model="formInline.key1">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="是否抵消借款金额">
+                                <el-select v-model="formInline.key2">
+                                    <el-option label="是" value="1" />
+                                    <el-option label="否" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="选择借款项">
+                                <el-select v-model="formInline.key3">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="冲抵后的实际报销金额">
+                                <el-input v-model="formInline.key2" disabled>
+                                    <template #append>元</template>
+                                </el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-scrollbar>
             </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
+            <div class="record-flow-box">
+                <div class="title">流程</div>
+                <div class="content">
+                    <el-scrollbar>
+                        <el-timeline>
+                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
+                                <div class="timeline-title">{{item.title}}</div>
+                                <div class="timeline-section">{{item.section}}</div>
+                            </el-timeline-item>
+                        </el-timeline>
+                    </el-scrollbar>
+                </div>
+                <div class="action">
+                    <el-button type="warning" hc-btn>
+                        <HcIcon name="draft"/>
+                        <span>暂存草稿</span>
+                    </el-button>
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="check-double"/>
+                        <span>提交报销申请</span>
+                    </el-button>
+                </div>
             </div>
-        </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
-            </el-button>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
-            </template>
-        </HcTable>
-
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
+        </div>
+
+        <!--上传控件-->
+        <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>
+
+        <!--关联预算计划-->
+        <HcDialog bgColor="#ffffff" isToBody isTable
+                  title="关联预算计划" widths="80%" saveText="保存"
+                  :show="budgetModal"
+                  @close="budgetCloseClick"
+                  @save="budgetSaveClick"
+        >
+            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
+                <template #action="{row,index}">
+                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
+                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
+                </template>
+            </HcTable>
+        </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
 import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
 
 const router = useRouter()
 
-//项目类型
-const projectType = ref([
-    {name: '二级路', key: '二级路'},
-    {name: '国道', key: '国道'},
-    {name: '水利水电', key: '水利水电'},
-    {name: '市政', key: '市政'},
-])
+//上传配置
+const HcUploadFileRef = ref(null)
+const uploadEchoParams = ref({})
+const uploadFileOptions = {
+    headers: getTokenHeader(),
+}
 
-//搜索表单
-const searchForm = ref({
-    projectType: null, user: null, project: null,
-    current: 1, size: 20, total: 0
+//明细表单
+const formRef = ref(null)
+const formModel = ref({
+    key1: '', key2: '', key3: '', key4: '', key5: '',
 })
+const formRules = {}
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//关联预算计划
+const budgetModal = ref(false)
+const budgetModalShow = () => {
+    budgetModal.value = true
 }
-
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+const budgetCloseClick = () => {
+    budgetModal.value = false
 }
+const budgetSaveClick = () => {
 
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
 }
 
-//获取数据
-const tableLoading = ref(false)
-const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+//关联预算计划表格
+const tableBudgetColumn = [
+    {key: 'key1', name: '任务所属项目'},
+    {key: 'key2', name: '状态',  width: '120', align: 'center'},
+    {key: 'key3', name: '任务描述'},
+    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '100', align: 'center'},
 ]
-const tableData = ref([
-    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+const tableBudgetData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
 ])
 
-const getTableData = () => {
 
+//电子发票
+const formInvoiceClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//预览
-const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+//附件
+const formFileClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//新增预算
-const addRowClick = () => {
-    router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
-    })
-}
+//上传完成
+const HcUploadFileSuccess = (res) => {
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
 }
 
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
-}
+const formInline = ref({})
+const timeLineData = ref([
+    {title: '审批人', section: '部门负责人'},
+    {title: '财务审核', section: '财务'},
+    {title: '最终确认付款人', section: '总经理'},
+    {title: '出纳付款', section: '出纳'},
+    {title: '抄送人', section: '总经理、财务、申请人'},
+])
 </script>
+
+<style scoped lang="scss">
+@import "~src/styles/expense/expense.scoped.scss";
+.record-form-action-box {
+    position: relative;
+}
+</style>
+
+<style lang="scss">
+@import "~src/styles/expense/expense.scss";
+</style>

src/views/expense/purchaseRequest/index.vue

@@ -2,18 +2,15 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="归属人" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
+            <div class="w-72 ml-2">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="项目名称" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
                     <HcIcon name="search-2"/>
@@ -28,29 +25,41 @@
             </div>
         </template>
         <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
+            <el-button size="large" type="warning" hc-btn @click="draftsClick">
+                <HcIcon name="draft"/>
+                <span>草稿箱(1)</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
+                <span>新增报销记录</span>
             </el-button>
         </template>
 
         <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
+            <template #key="{row}">
+                <span class="text-blue" @click="rowNameTap(row)">{{row.key}}</span>
             </template>
             <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <el-button size="small" type="primary">撤销</el-button>
             </template>
         </HcTable>
 
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
+
+        <!--草稿箱-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="draftsModal" title="草稿箱(1)" widths="62rem" @close="draftsCloseClick">
+            <el-alert title="3个月内未更新的草稿将被自动删除" type="warning" show-icon />
+            <div style="position: relative;height: calc(100% - 44px);">
+                <HcTable :isIndex="false" :column="tableDraftsColumn" :datas="tableDraftsData">
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary">继续编辑</el-button>
+                        <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                </HcTable>
+            </div>
+        </HcDialog>
     </HcCard>
 </template>
 
@@ -95,14 +104,17 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key', name: '报销编号', width: '120', align: 'center'},
+    {key: 'key1', name: '报销类型', width: '140'},
+    {key: 'key2', name: '项目名称', minWidth: '200'},
+    {key: 'key3', name: '报销金额', width: '160', align: 'center'},
+    {key: 'key4', name: '归属人', width: '140', align: 'center'},
+    {key: 'key5', name: '审批结果', width: '140', align: 'center'},
+    {key: 'key6', name: '审批状态', width: '140', align: 'center'},
+    {key: 'key7', name: '报销时间', width: '160', align: 'center'},
+    {key: 'key8', name: '创建人', width: '140', align: 'center'},
+    {key: 'key9', name: '创建时间', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
@@ -119,38 +131,31 @@ const getTableData = () => {
 
 //预览
 const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+
 }
 
 //新增预算
 const addRowClick = () => {
     router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
+        name: 'expense-finReimburse-record'
     })
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
+//草稿箱
+const draftsModal = ref(false)
+const draftsClick = () => {
+    draftsModal.value = true
 }
-
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
+const draftsCloseClick = () => {
+    draftsModal.value = false
 }
+
+//草稿箱数据
+const tableDraftsColumn = [
+    {key: 'key1', name: '标题'},
+    {key: 'key2', name: '更新时间', width: '200'},
+    {key: 'action', name: '操作', width: '170', align: 'center'},
+]
+const tableDraftsData = ref([{id: 1, key1: 'xxxx', key2: 'xxxx'}, {id: 2, key1: 'xxxx', key2: 'xxxx'}, {id: 3, key1: 'xxxx', key2: 'xxxx'}])
+
 </script>

src/views/expense/purchaseRequest/record.vue

@@ -1,156 +1,218 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
+            <div class="hc-expense-total-title">报销总额(元)：1520</div>
+        </template>
+        <div class="hac-expense-record-body">
+            <div class="record-form-box">
+                <el-scrollbar>
+                    <HcCardItem title="报销明细1" ui="hac-bg-grey">
+                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                            <div class="hc-form-item">
+                                <el-form-item label="所属项目：" prop="key1">
+                                    <el-select block v-model="formModel.key1">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                                <div class="ml-2">
+                                    <el-button type="default" @click="budgetModalShow">
+                                        <HcIcon name="add"/>
+                                        <span>关联预算计划</span>
+                                    </el-button>
+                                </div>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="报销金额(元)：" prop="key2">
+                                    <el-input v-model="formModel.key2" placeholder="请输入报销金额" />
+                                </el-form-item>
+                                <el-form-item label="费用发生日期：" prop="key3">
+                                    <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                                </el-form-item>
+                                <el-form-item label="费用类型：" prop="key4">
+                                    <el-select block v-model="formModel.key4">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                            <el-form-item label="费用说明：">
+                                <el-input type="textarea"
+                                          v-model="formModel.key5"
+                                          :autosize="{ minRows: 3, maxRows: 5 }"
+                                          placeholder="请输入费用说明"
+                                />
+                            </el-form-item>
+                            <el-form-item label="电子发票：">
+                                <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
+                            </el-form-item>
+                            <el-form-item label="附件文件：">
+                                <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcCardItem>
+
+                    <div class="record-form-action-box mt-16">
+                        <el-divider content-position="right" border-style="dashed">
+                            <el-button type="primary" hc-btn>
+                                <HcIcon name="add"/>
+                                <span>添加明细</span>
+                            </el-button>
+                        </el-divider>
+                        <el-form class="mt-16" inline :model="formInline" label-position="top">
+                            <el-form-item label="归属人">
+                                <el-select v-model="formInline.key1">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="是否抵消借款金额">
+                                <el-select v-model="formInline.key2">
+                                    <el-option label="是" value="1" />
+                                    <el-option label="否" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="选择借款项">
+                                <el-select v-model="formInline.key3">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="冲抵后的实际报销金额">
+                                <el-input v-model="formInline.key2" disabled>
+                                    <template #append>元</template>
+                                </el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-scrollbar>
             </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
+            <div class="record-flow-box">
+                <div class="title">流程</div>
+                <div class="content">
+                    <el-scrollbar>
+                        <el-timeline>
+                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
+                                <div class="timeline-title">{{item.title}}</div>
+                                <div class="timeline-section">{{item.section}}</div>
+                            </el-timeline-item>
+                        </el-timeline>
+                    </el-scrollbar>
+                </div>
+                <div class="action">
+                    <el-button type="warning" hc-btn>
+                        <HcIcon name="draft"/>
+                        <span>暂存草稿</span>
+                    </el-button>
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="check-double"/>
+                        <span>提交报销申请</span>
+                    </el-button>
+                </div>
             </div>
-        </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
-            </el-button>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
-            </template>
-        </HcTable>
-
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
+        </div>
+
+        <!--上传控件-->
+        <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>
+
+        <!--关联预算计划-->
+        <HcDialog bgColor="#ffffff" isToBody isTable
+                  title="关联预算计划" widths="80%" saveText="保存"
+                  :show="budgetModal"
+                  @close="budgetCloseClick"
+                  @save="budgetSaveClick"
+        >
+            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
+                <template #action="{row,index}">
+                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
+                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
+                </template>
+            </HcTable>
+        </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
 import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
 
 const router = useRouter()
 
-//项目类型
-const projectType = ref([
-    {name: '二级路', key: '二级路'},
-    {name: '国道', key: '国道'},
-    {name: '水利水电', key: '水利水电'},
-    {name: '市政', key: '市政'},
-])
+//上传配置
+const HcUploadFileRef = ref(null)
+const uploadEchoParams = ref({})
+const uploadFileOptions = {
+    headers: getTokenHeader(),
+}
 
-//搜索表单
-const searchForm = ref({
-    projectType: null, user: null, project: null,
-    current: 1, size: 20, total: 0
+//明细表单
+const formRef = ref(null)
+const formModel = ref({
+    key1: '', key2: '', key3: '', key4: '', key5: '',
 })
+const formRules = {}
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//关联预算计划
+const budgetModal = ref(false)
+const budgetModalShow = () => {
+    budgetModal.value = true
 }
-
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+const budgetCloseClick = () => {
+    budgetModal.value = false
 }
+const budgetSaveClick = () => {
 
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
 }
 
-//获取数据
-const tableLoading = ref(false)
-const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+//关联预算计划表格
+const tableBudgetColumn = [
+    {key: 'key1', name: '任务所属项目'},
+    {key: 'key2', name: '状态',  width: '120', align: 'center'},
+    {key: 'key3', name: '任务描述'},
+    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '100', align: 'center'},
 ]
-const tableData = ref([
-    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+const tableBudgetData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
 ])
 
-const getTableData = () => {
 
+//电子发票
+const formInvoiceClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//预览
-const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+//附件
+const formFileClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//新增预算
-const addRowClick = () => {
-    router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
-    })
-}
+//上传完成
+const HcUploadFileSuccess = (res) => {
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
 }
 
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
-}
+const formInline = ref({})
+const timeLineData = ref([
+    {title: '审批人', section: '部门负责人'},
+    {title: '财务审核', section: '财务'},
+    {title: '最终确认付款人', section: '总经理'},
+    {title: '出纳付款', section: '出纳'},
+    {title: '抄送人', section: '总经理、财务、申请人'},
+])
 </script>
+
+<style scoped lang="scss">
+@import "~src/styles/expense/expense.scoped.scss";
+.record-form-action-box {
+    position: relative;
+}
+</style>
+
+<style lang="scss">
+@import "~src/styles/expense/expense.scss";
+</style>

src/views/expense/vehicleRequest/index.vue

@@ -2,18 +2,15 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="归属人" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
+            <div class="w-72 ml-2">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="项目名称" size="large">
                     <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
                     <HcIcon name="search-2"/>
@@ -28,29 +25,41 @@
             </div>
         </template>
         <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
+            <el-button size="large" type="warning" hc-btn @click="draftsClick">
+                <HcIcon name="draft"/>
+                <span>草稿箱(1)</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
+                <span>新增报销记录</span>
             </el-button>
         </template>
 
         <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
+            <template #key="{row}">
+                <span class="text-blue" @click="rowNameTap(row)">{{row.key}}</span>
             </template>
             <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <el-button size="small" type="primary">撤销</el-button>
             </template>
         </HcTable>
 
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
+
+        <!--草稿箱-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="draftsModal" title="草稿箱(1)" widths="62rem" @close="draftsCloseClick">
+            <el-alert title="3个月内未更新的草稿将被自动删除" type="warning" show-icon />
+            <div style="position: relative;height: calc(100% - 44px);">
+                <HcTable :isIndex="false" :column="tableDraftsColumn" :datas="tableDraftsData">
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary">继续编辑</el-button>
+                        <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                </HcTable>
+            </div>
+        </HcDialog>
     </HcCard>
 </template>
 
@@ -95,14 +104,17 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key', name: '报销编号', width: '120', align: 'center'},
+    {key: 'key1', name: '报销类型', width: '140'},
+    {key: 'key2', name: '项目名称', minWidth: '200'},
+    {key: 'key3', name: '报销金额', width: '160', align: 'center'},
+    {key: 'key4', name: '归属人', width: '140', align: 'center'},
+    {key: 'key5', name: '审批结果', width: '140', align: 'center'},
+    {key: 'key6', name: '审批状态', width: '140', align: 'center'},
+    {key: 'key7', name: '报销时间', width: '160', align: 'center'},
+    {key: 'key8', name: '创建人', width: '140', align: 'center'},
+    {key: 'key9', name: '创建时间', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
@@ -119,38 +131,31 @@ const getTableData = () => {
 
 //预览
 const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+
 }
 
 //新增预算
 const addRowClick = () => {
     router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
+        name: 'expense-finReimburse-record'
     })
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
+//草稿箱
+const draftsModal = ref(false)
+const draftsClick = () => {
+    draftsModal.value = true
 }
-
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
+const draftsCloseClick = () => {
+    draftsModal.value = false
 }
+
+//草稿箱数据
+const tableDraftsColumn = [
+    {key: 'key1', name: '标题'},
+    {key: 'key2', name: '更新时间', width: '200'},
+    {key: 'action', name: '操作', width: '170', align: 'center'},
+]
+const tableDraftsData = ref([{id: 1, key1: 'xxxx', key2: 'xxxx'}, {id: 2, key1: 'xxxx', key2: 'xxxx'}, {id: 3, key1: 'xxxx', key2: 'xxxx'}])
+
 </script>

src/views/expense/vehicleRequest/record.vue

@@ -1,156 +1,218 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="服务类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-48 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
+            <div class="hc-expense-total-title">报销总额(元)：1520</div>
+        </template>
+        <div class="hac-expense-record-body">
+            <div class="record-form-box">
+                <el-scrollbar>
+                    <HcCardItem title="报销明细1" ui="hac-bg-grey">
+                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                            <div class="hc-form-item">
+                                <el-form-item label="所属项目：" prop="key1">
+                                    <el-select block v-model="formModel.key1">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                                <div class="ml-2">
+                                    <el-button type="default" @click="budgetModalShow">
+                                        <HcIcon name="add"/>
+                                        <span>关联预算计划</span>
+                                    </el-button>
+                                </div>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="报销金额(元)：" prop="key2">
+                                    <el-input v-model="formModel.key2" placeholder="请输入报销金额" />
+                                </el-form-item>
+                                <el-form-item label="费用发生日期：" prop="key3">
+                                    <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                                </el-form-item>
+                                <el-form-item label="费用类型：" prop="key4">
+                                    <el-select block v-model="formModel.key4">
+                                        <el-option label="选项1" value="选项1"/>
+                                        <el-option label="选项2" value="选项2"/>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                            <el-form-item label="费用说明：">
+                                <el-input type="textarea"
+                                          v-model="formModel.key5"
+                                          :autosize="{ minRows: 3, maxRows: 5 }"
+                                          placeholder="请输入费用说明"
+                                />
+                            </el-form-item>
+                            <el-form-item label="电子发票：">
+                                <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
+                            </el-form-item>
+                            <el-form-item label="附件文件：">
+                                <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcCardItem>
+
+                    <div class="record-form-action-box mt-16">
+                        <el-divider content-position="right" border-style="dashed">
+                            <el-button type="primary" hc-btn>
+                                <HcIcon name="add"/>
+                                <span>添加明细</span>
+                            </el-button>
+                        </el-divider>
+                        <el-form class="mt-16" inline :model="formInline" label-position="top">
+                            <el-form-item label="归属人">
+                                <el-select v-model="formInline.key1">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="是否抵消借款金额">
+                                <el-select v-model="formInline.key2">
+                                    <el-option label="是" value="1" />
+                                    <el-option label="否" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="选择借款项">
+                                <el-select v-model="formInline.key3">
+                                    <el-option label="选项1" value="1" />
+                                    <el-option label="选项2" value="2" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="冲抵后的实际报销金额">
+                                <el-input v-model="formInline.key2" disabled>
+                                    <template #append>元</template>
+                                </el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-scrollbar>
             </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
+            <div class="record-flow-box">
+                <div class="title">流程</div>
+                <div class="content">
+                    <el-scrollbar>
+                        <el-timeline>
+                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
+                                <div class="timeline-title">{{item.title}}</div>
+                                <div class="timeline-section">{{item.section}}</div>
+                            </el-timeline-item>
+                        </el-timeline>
+                    </el-scrollbar>
+                </div>
+                <div class="action">
+                    <el-button type="warning" hc-btn>
+                        <HcIcon name="draft"/>
+                        <span>暂存草稿</span>
+                    </el-button>
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="check-double"/>
+                        <span>提交报销申请</span>
+                    </el-button>
+                </div>
             </div>
-        </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="updateClick">
-                <HcIcon name="refresh"/>
-                <span>合同回款更新</span>
-            </el-button>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增项目合同信息</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue" @click="rowNameTap(row)">{{row.key1}}</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
-            </template>
-        </HcTable>
-
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
+        </div>
+
+        <!--上传控件-->
+        <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>
+
+        <!--关联预算计划-->
+        <HcDialog bgColor="#ffffff" isToBody isTable
+                  title="关联预算计划" widths="80%" saveText="保存"
+                  :show="budgetModal"
+                  @close="budgetCloseClick"
+                  @save="budgetSaveClick"
+        >
+            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
+                <template #action="{row,index}">
+                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
+                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
+                </template>
+            </HcTable>
+        </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
 import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
 
 const router = useRouter()
 
-//项目类型
-const projectType = ref([
-    {name: '二级路', key: '二级路'},
-    {name: '国道', key: '国道'},
-    {name: '水利水电', key: '水利水电'},
-    {name: '市政', key: '市政'},
-])
+//上传配置
+const HcUploadFileRef = ref(null)
+const uploadEchoParams = ref({})
+const uploadFileOptions = {
+    headers: getTokenHeader(),
+}
 
-//搜索表单
-const searchForm = ref({
-    projectType: null, user: null, project: null,
-    current: 1, size: 20, total: 0
+//明细表单
+const formRef = ref(null)
+const formModel = ref({
+    key1: '', key2: '', key3: '', key4: '', key5: '',
 })
+const formRules = {}
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//关联预算计划
+const budgetModal = ref(false)
+const budgetModalShow = () => {
+    budgetModal.value = true
 }
-
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+const budgetCloseClick = () => {
+    budgetModal.value = false
 }
+const budgetSaveClick = () => {
 
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
 }
 
-//获取数据
-const tableLoading = ref(false)
-const tableColumn = [
-    {key: 'key', name: '合同编号', width: '120', align: 'center'},
-    {key: 'key1', name: '合同名称'},
-    {key: 'key2', name: '合同类型', width: '140', align: 'center'},
-    {key: 'key3', name: '签订时间', width: '160', align: 'center'},
-    {key: 'key4', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'key5', name: '合同已履约回款', width: '140', align: 'center'},
-    {key: 'key6', name: '合同未履约回款', width: '140', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+//关联预算计划表格
+const tableBudgetColumn = [
+    {key: 'key1', name: '任务所属项目'},
+    {key: 'key2', name: '状态',  width: '120', align: 'center'},
+    {key: 'key3', name: '任务描述'},
+    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '100', align: 'center'},
 ]
-const tableData = ref([
-    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
-    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+const tableBudgetData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
 ])
 
-const getTableData = () => {
 
+//电子发票
+const formInvoiceClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//预览
-const rowNameTap = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'view'
-        }
-    })
+//附件
+const formFileClick = () => {
+    HcUploadFileRef.value?.selectFile();
 }
 
-//新增预算
-const addRowClick = () => {
-    router.push({
-        name: 'project-contract-form',
-        query: {type: 'edit'}
-    })
-}
+//上传完成
+const HcUploadFileSuccess = (res) => {
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'project-contract-form',
-        query: {
-            id: row.id,
-            type: 'edit'
-        }
-    })
 }
 
-//合同回款更新
-const updateClick = () => {
-    router.push({
-        name: 'project-contract-update'
-    })
-}
+const formInline = ref({})
+const timeLineData = ref([
+    {title: '审批人', section: '部门负责人'},
+    {title: '财务审核', section: '财务'},
+    {title: '最终确认付款人', section: '总经理'},
+    {title: '出纳付款', section: '出纳'},
+    {title: '抄送人', section: '总经理、财务、申请人'},
+])
 </script>
+
+<style scoped lang="scss">
+@import "~src/styles/expense/expense.scoped.scss";
+.record-form-action-box {
+    position: relative;
+}
+</style>
+
+<style lang="scss">
+@import "~src/styles/expense/expense.scss";
+</style>