项目报销

src/views/home/task-details.vue

@@ -69,7 +69,7 @@
             </el-button>
         </template>
 
-        <HcDialog :loading="groundsLoading" :show="groundsModal" title="请填写驳回理由" widths="600px" @close="closeGroundsClick" @save="saveGroundsClick">
+        <HcDialog isToBody :loading="groundsLoading" :show="groundsModal" title="请填写驳回理由" widths="600px" @close="closeGroundsClick" @save="saveGroundsClick">
             <el-form ref="formGroundsRef" :model="formGroundsModel" :rules="formGroundsRules" label-width="0" size="large">
                 <el-form-item prop="grounds">
                     <el-input v-model="formGroundsModel.grounds" :autosize="{ minRows: 6, maxRows: 10 }" placeholder="请输入驳回理由" type="textarea"/>

src/views/project/reimburse.vue

@@ -2,23 +2,44 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.annual" block clearable placeholder="选择年度" size="large">
-                    <el-option v-for="item in annuals" :label="item.name" :value="item.key"/>
+                <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.user" block clearable placeholder="报销人" size="large">
+                    <el-option v-for="item in users" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="w-52 ml-2">
+                <el-select v-model="searchForm.project" block clearable placeholder="项目名称" size="large">
+                    <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="ml-4">
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+            </div>
+            <div class="ml-2">
+                <el-button size="large" @click="resetClick">
+                    <HcIcon name="close-circle"/>
+                    <span>重置</span>
+                </el-button>
+            </div>
         </template>
         <template #extra>
-            <el-button size="large" color="#7728F5" hc-btn @click="toBudgetChartClick">
-                <HcIcon name="folder-chart"/>
-                <span>报表查看</span>
-            </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增经营预算</span>
+                <span>新增报销记录</span>
             </el-button>
         </template>
 
-        <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading">
+        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #key1="{row}">
+                <span class="text-blue">{{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>
@@ -28,24 +49,136 @@
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
+
+        <!--报销记录-->
+        <HcDialog isToBody :loading="recordLoading" :show="recordModal" title="报销记录" widths="500px" @close="closeRecordClick" @save="saveRecordClick">
+            <el-form ref="formRecordRef" :model="formRecordModel" :rules="formRecordRules" label-width="auto" size="large">
+                <el-form-item label="报销类型" prop="key1">
+                    <el-select v-model="formRecordModel.key1" block clearable placeholder="报销类型" size="large">
+                        <el-option v-for="item in reimburseType" :label="item.name" :value="item.key"/>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="关联项目" prop="key2">
+                    <el-select v-model="formRecordModel.key2" block clearable placeholder="项目名称" size="large">
+                        <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="关联预算" prop="key3">
+                    <el-button size="default" type="primary" @click="associatedBudgetClick">
+                        <HcIcon name="add"/>
+                        <span>关联预算</span>
+                    </el-button>
+                </el-form-item>
+                <el-form-item label="费用金额" prop="key4">
+                    <el-input v-model="formRecordModel.key4" placeholder="请输入费用金额">
+                        <template #append>元</template>
+                    </el-input>
+                </el-form-item>
+            </el-form>
+        </HcDialog>
+
+        <!--关联预算-->
+        <HcDialog isToBody isTable isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联预算" widths="62rem">
+            <HcTable :isIndex="false" :column="tableBudgetColumn" :datas="tableBudgetData" :loading="tableBudgetLoading">
+                <template #action="{row,index}">
+                    <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
+                        <HcIcon name="link" :line="false"/>
+                        <span>关联</span>
+                    </el-button>
+                    <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
+                        <HcIcon name="link-unlink-m" :line="false"/>
+                        <span>取消</span>
+                    </el-button>
+                </template>
+            </HcTable>
+            <template #leftRowFooter>
+                <el-button size="large" @click="closeRelatedClick">
+                    <HcIcon name="close"/>
+                    <span>取消</span>
+                </el-button>
+                <el-button size="large" type="primary" @click="saveRelatedClick">
+                    <HcIcon name="check"/>
+                    <span>确认关联</span>
+                </el-button>
+            </template>
+            <template #rightRowFooter>
+                <HcPages :pages="searchBudgetForm" @change="pageBudgetChange"/>
+            </template>
+        </HcDialog>
+
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
-import {useRouter} from 'vue-router'
 
-const router = useRouter()
+//项目类型
+const projectType = ref([
+    {name: '二级路', key: '二级路'},
+    {name: '国道', key: '国道'},
+    {name: '水利水电', key: '水利水电'},
+    {name: '市政', key: '市政'},
+])
+
+//报销人
+const users = ref([
+    {name: '张三', key: '张三'},
+    {name: '李四', key: '李四'}
+])
+
+//项目名称
+const projectName = ref([
+    {name: '陈油路', key: '陈油路'},
+    {name: '奉建路', key: '奉建路'}
+])
 
-//年度数据
-const annuals = ref([
-    {name: '2023年', key: '2023'},
-    {name: '2022年', key: '2022'},
-    {name: '2021年', key: '2021'}
+//报销类型
+const reimburseType = ref([
+    {name: '业务招待费', key: '1'},
+    {name: '审计费', key: '2'},
+    {name: '招聘费', key: '3'},
+    {name: '水电费', key: '4'},
+    {name: '税金', key: '5'},
+    {name: '房租', key: '6'},
+    {name: '运杂费', key: '7'},
+    {name: '办公费', key: '8'},
+    {name: '检测费', key: '9'},
+    {name: '设备采购费', key: '10'},
+    {name: '设备维护费', key: '11'},
+    {name: '物业垃圾费', key: '12'},
+    {name: '通讯费', key: '13'},
+    {name: '出差补助', key: '14'},
+    {name: '住宿费', key: '15'},
+    {name: '培训费', key: '16'},
+    {name: '公司车辆使用费', key: '17'},
+    {name: '金融手续费', key: '18'},
+    {name: '交通费', key: '19'},
+    {name: '五险一金', key: '20'},
+    {name: '工资', key: '21'},
+    {name: '项目合作劳务费', key: '22'},
+    {name: '福利费', key: '23'},
+    {name: '技术服务费', key: '24'},
+    {name: '商务佣金', key: '25'},
+    {name: '礼品费', key: '26'},
 ])
 
 //搜索表单
-const searchForm = ref({annual: null, current: 1, size: 20, total: 0})
+const searchForm = ref({
+    projectType: null, user: null, project: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//重置搜索表单
+const resetClick = () => {
+    searchForm.value = {current: 1, size: 20, total: 0}
+}
+
 //分页被点击
 const pageChange = ({current, size}) => {
     searchForm.value.current = current
@@ -56,48 +189,104 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'name', name: '名称'},
-    {key: 'key1', name: '总经营预算', width: '140', align: 'center'},
-    {key: 'key2', name: '年度合同额指标', width: '140', align: 'center'},
-    {key: 'key3', name: '年度利润指标', width: '140', align: 'center'},
-    {key: 'key4', name: '工资支出', width: '140', align: 'center'},
-    {key: 'key5', name: '其它管理支出', width: '140', align: 'center'},
+    {key: 'key', name: '报销编号', width: '90', align: 'center'},
+    {key: 'key1', name: '报销类型', width: '180', align: 'center'},
+    {key: 'key2', name: '报销项目'},
+    {key: 'key3', name: '项目进程', width: '180', align: 'center'},
+    {key: 'key4', name: '报销金额', width: '160', align: 'center'},
+    {key: 'key5', name: '报销人', width: '140', align: 'center'},
+    {key: 'key6', name: '报销时间', width: '160', align: 'center'},
     {key: 'action', name: '操作', width: '130', align: 'center'},
 ]
 const tableData = ref([
-    {id: 1, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 2, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 3, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 4, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 5, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 6, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
+    {id: 1, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
+    {id: 2, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
+    {id: 3, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
 ])
 
 const getTableData = () => {
 
 }
 
+//报销记录弹窗
+const recordLoading = ref(false)
+const recordModal = ref(false)
 
-//编辑预算
+//编辑报销记录
 const editRowClick = (row) => {
-    router.push({
-        name: 'home-budget-form', query: {
-            id: row.id
-        }
-    })
+    recordLoading.value = false
+    recordModal.value = true
 }
 
-//新增预算
+//新增报销记录
 const addRowClick = () => {
-    router.push({
-        name: 'home-budget-form'
-    })
+    recordLoading.value = false
+    recordModal.value = true
+}
+
+//报销记录表单
+const formRecordRef = ref(null)
+const formRecordModel = ref({})
+const formRecordRules = {}
+
+//关闭报销记录
+const closeRecordClick = () => {
+    recordLoading.value = false
+    recordModal.value = false
+}
+
+//提交保存报销记录
+const saveRecordClick = () => {
+    recordLoading.value = false
+    recordModal.value = false
+}
+
+//关联预算弹窗
+const relatedLoading = ref(false)
+const relatedModal = ref(false)
+
+//展开关联预算弹窗
+const associatedBudgetClick = () => {
+    relatedLoading.value = false
+    relatedModal.value = true
+}
+
+//预算分页和搜索
+const searchBudgetForm = ref({current: 1, size: 20, total: 0})
+const pageBudgetChange = ({current, size}) => {
+    searchBudgetForm.value.current = current
+    searchBudgetForm.value.size = size
+}
+
+//预算表格
+const tableBudgetLoading = ref(false)
+const tableBudgetColumn = [
+    {key: 'key', name: '项目环节', width: '160', align: 'center'},
+    {key: 'key1', name: '预算类型', width: '100', align: 'center'},
+    {key: 'key2', name: '任务明细', width: '160', align: 'center'},
+    {key: 'key3', name: '预算金额', width: '120', align: 'center'},
+    {key: 'key4', name: '任务完成标准'},
+    {key: 'key5', name: '投入人员数量', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center'},
+]
+const tableBudgetData = ref([
+    {id: 1, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+    {id: 2, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+    {id: 3, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+    {id: 4, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+])
+
+
+//关闭报销记录
+const closeRelatedClick = () => {
+    relatedLoading.value = false
+    relatedModal.value = false
 }
 
-const toBudgetChartClick = () => {
-    router.push({
-        name: 'home-budget-chart'
-    })
+//提交保存报销记录
+const saveRelatedClick = () => {
+    relatedLoading.value = false
+    relatedModal.value = false
 }
 </script>