billing.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <HcCard>
  3. <template #header>
  4. <div class="hc-expense-total-title">报销总额(元):1520</div>
  5. </template>
  6. <div class="hac-expense-record-body">
  7. <div class="record-form-box">
  8. <el-scrollbar>
  9. <HcCardItem title="报销明细1" ui="hac-bg-grey">
  10. <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
  11. <div class="hc-form-item">
  12. <el-form-item label="所属项目:" prop="key1">
  13. <el-select block v-model="formModel.key1">
  14. <el-option label="选项1" value="选项1"/>
  15. <el-option label="选项2" value="选项2"/>
  16. </el-select>
  17. </el-form-item>
  18. <div class="ml-2">
  19. <el-button type="default" @click="budgetModalShow">
  20. <HcIcon name="add"/>
  21. <span>关联预算计划</span>
  22. </el-button>
  23. </div>
  24. </div>
  25. <div class="hc-form-item">
  26. <el-form-item label="报销金额(元):" prop="key2">
  27. <el-input v-model="formModel.key2" placeholder="请输入报销金额" />
  28. </el-form-item>
  29. <el-form-item label="费用发生日期:" prop="key3">
  30. <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
  31. </el-form-item>
  32. <el-form-item label="费用类型:" prop="key4">
  33. <el-select block v-model="formModel.key4">
  34. <el-option label="选项1" value="选项1"/>
  35. <el-option label="选项2" value="选项2"/>
  36. </el-select>
  37. </el-form-item>
  38. </div>
  39. <el-form-item label="费用说明:">
  40. <el-input type="textarea"
  41. v-model="formModel.key5"
  42. :autosize="{ minRows: 3, maxRows: 5 }"
  43. placeholder="请输入费用说明"
  44. />
  45. </el-form-item>
  46. <el-form-item label="电子发票:">
  47. <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
  48. </el-form-item>
  49. <el-form-item label="附件文件:">
  50. <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
  51. </el-form-item>
  52. </el-form>
  53. </HcCardItem>
  54. <div class="record-form-action-box mt-16">
  55. <el-divider content-position="right" border-style="dashed">
  56. <el-button type="primary" hc-btn>
  57. <HcIcon name="add"/>
  58. <span>添加明细</span>
  59. </el-button>
  60. </el-divider>
  61. <el-form class="mt-16" inline :model="formInline" label-position="top">
  62. <el-form-item label="归属人">
  63. <el-select v-model="formInline.key1">
  64. <el-option label="选项1" value="1" />
  65. <el-option label="选项2" value="2" />
  66. </el-select>
  67. </el-form-item>
  68. <el-form-item label="是否抵消借款金额">
  69. <el-select v-model="formInline.key2">
  70. <el-option label="是" value="1" />
  71. <el-option label="否" value="2" />
  72. </el-select>
  73. </el-form-item>
  74. <el-form-item label="选择借款项">
  75. <el-select v-model="formInline.key3">
  76. <el-option label="选项1" value="1" />
  77. <el-option label="选项2" value="2" />
  78. </el-select>
  79. </el-form-item>
  80. <el-form-item label="冲抵后的实际报销金额">
  81. <el-input v-model="formInline.key2" disabled>
  82. <template #append>元</template>
  83. </el-input>
  84. </el-form-item>
  85. </el-form>
  86. </div>
  87. </el-scrollbar>
  88. </div>
  89. <div class="record-flow-box">
  90. <div class="title">流程</div>
  91. <div class="content">
  92. <el-scrollbar>
  93. <el-timeline>
  94. <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
  95. <div class="timeline-title">{{item.title}}</div>
  96. <div class="timeline-section">{{item.section}}</div>
  97. </el-timeline-item>
  98. </el-timeline>
  99. </el-scrollbar>
  100. </div>
  101. <div class="action">
  102. <el-button type="warning" hc-btn>
  103. <HcIcon name="draft"/>
  104. <span>暂存草稿</span>
  105. </el-button>
  106. <el-button type="primary" hc-btn>
  107. <HcIcon name="check-double"/>
  108. <span>提交报销申请</span>
  109. </el-button>
  110. </div>
  111. </div>
  112. </div>
  113. <!--上传控件-->
  114. <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>
  115. <!--关联预算计划-->
  116. <HcDialog bgColor="#ffffff" isToBody isTable
  117. title="关联预算计划" widths="80%" saveText="保存"
  118. :show="budgetModal"
  119. @close="budgetCloseClick"
  120. @save="budgetSaveClick"
  121. >
  122. <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
  123. <template #action="{row,index}">
  124. <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
  125. <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
  126. </template>
  127. </HcTable>
  128. </HcDialog>
  129. </HcCard>
  130. </template>
  131. <script setup>
  132. import {ref} from "vue";
  133. import {useRouter} from 'vue-router'
  134. import {getTokenHeader} from "~src/api/request/header";
  135. const router = useRouter()
  136. //上传配置
  137. const HcUploadFileRef = ref(null)
  138. const uploadEchoParams = ref({})
  139. const uploadFileOptions = {
  140. headers: getTokenHeader(),
  141. }
  142. //明细表单
  143. const formRef = ref(null)
  144. const formModel = ref({
  145. key1: '', key2: '', key3: '', key4: '', key5: '',
  146. })
  147. const formRules = {}
  148. //关联预算计划
  149. const budgetModal = ref(false)
  150. const budgetModalShow = () => {
  151. budgetModal.value = true
  152. }
  153. const budgetCloseClick = () => {
  154. budgetModal.value = false
  155. }
  156. const budgetSaveClick = () => {
  157. }
  158. //关联预算计划表格
  159. const tableBudgetColumn = [
  160. {key: 'key1', name: '任务所属项目'},
  161. {key: 'key2', name: '状态', width: '120', align: 'center'},
  162. {key: 'key3', name: '任务描述'},
  163. {key: 'key4', name: '完成指标', width: '120', align: 'center'},
  164. {key: 'action', name: '操作', width: '100', align: 'center'},
  165. ]
  166. const tableBudgetData = ref([
  167. {id: 1, key1: 'xxxx'},
  168. {id: 2, key1: 'xxxx'},
  169. {id: 3, key1: 'xxxx'},
  170. {id: 4, key1: 'xxxx'},
  171. ])
  172. //电子发票
  173. const formInvoiceClick = () => {
  174. HcUploadFileRef.value?.selectFile();
  175. }
  176. //附件
  177. const formFileClick = () => {
  178. HcUploadFileRef.value?.selectFile();
  179. }
  180. //上传完成
  181. const HcUploadFileSuccess = (res) => {
  182. }
  183. const formInline = ref({})
  184. const timeLineData = ref([
  185. {title: '审批人', section: '部门负责人'},
  186. {title: '财务审核', section: '财务'},
  187. {title: '最终确认付款人', section: '总经理'},
  188. {title: '出纳付款', section: '出纳'},
  189. {title: '抄送人', section: '总经理、财务、申请人'},
  190. ])
  191. </script>
  192. <style scoped lang="scss">
  193. @import "~src/styles/expense/expense.scoped.scss";
  194. .record-form-action-box {
  195. position: relative;
  196. }
  197. </style>
  198. <style lang="scss">
  199. @import "~src/styles/expense/expense.scss";
  200. </style>