123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <template>
- <HcCard>
- <template #header>
- <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="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>
- </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 HcUploadFileRef = ref(null)
- const uploadEchoParams = ref({})
- const uploadFileOptions = {
- headers: getTokenHeader(),
- }
- //明细表单
- const formRef = ref(null)
- const formModel = ref({
- key1: '', key2: '', key3: '', key4: '', key5: '',
- })
- const formRules = {}
- //关联预算计划
- const budgetModal = ref(false)
- const budgetModalShow = () => {
- budgetModal.value = true
- }
- const budgetCloseClick = () => {
- budgetModal.value = false
- }
- const budgetSaveClick = () => {
- }
- //关联预算计划表格
- 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 tableBudgetData = ref([
- {id: 1, key1: 'xxxx'},
- {id: 2, key1: 'xxxx'},
- {id: 3, key1: 'xxxx'},
- {id: 4, key1: 'xxxx'},
- ])
- //电子发票
- const formInvoiceClick = () => {
- HcUploadFileRef.value?.selectFile();
- }
- //附件
- const formFileClick = () => {
- HcUploadFileRef.value?.selectFile();
- }
- //上传完成
- const HcUploadFileSuccess = (res) => {
- }
- 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>
|