|
@@ -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>
|
|
|
|