add.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <template>
  2. <div class="expenseReimbursementAddwrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="expenseReimbursementAddcont" >
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="purchaseOrderEdit-back-btn" href="javascript:;" @click="handleBack(0)"><a-icon type="left" /> 返回列表</a>
  8. </template>
  9. </a-page-header>
  10. <a-collapse :activeKey="['1']" class="expenseReimbursementAddcont" v-if="detailData">
  11. <a-collapse-panel key="1" header="基础信息">
  12. <div slot="extra" style="padding: 0 20px; color: #00aaff;" @click.stop="handleEditBase" >
  13. <a-icon type="edit" /> 编辑基础信息
  14. </div>
  15. <a-descriptions :column="{ xs: 2, sm: 3, md: 3}">
  16. <a-descriptions-item label="费用单号">{{ detailData&&detailData.expenseAccountNo || '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="申请人">{{ detailData&&detailData.applyPersonName || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="申请部门">{{ detailData&&detailData.applyDepartmentName || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="费用类型">{{ detailData&&detailData.expenseTypeDictValue || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="费用发生月份">{{ detailData&&detailData.expenseDate?detailData.expenseDate.substring(0, 7) : '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="合计金额">{{ (detailData.applyExpenseTotal || detailData.applyExpenseTotal == 0) ? detailData.applyExpenseTotal+' 元' : '--' }}</a-descriptions-item>
  22. <a-descriptions-item label="状态">{{ detailData&&detailData.stateDictValue || '--' }}</a-descriptions-item>
  23. <a-descriptions-item label="创建时间">{{ detailData&&detailData.createDate || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="审核时间">{{ detailData&&detailData.finishDate || '--' }}</a-descriptions-item>
  25. <a-descriptions-item label="主题" :span="3">{{ detailData&&detailData.title || '--' }}</a-descriptions-item>
  26. <a-descriptions-item label="详细说明" :span="3">{{ detailData&&detailData.content|| '--' }}</a-descriptions-item>
  27. <a-descriptions-item label="附件" :span="3">
  28. <a target="_blank" style="color: #00aaff;text-decoration: underline;margin-right: 15px;" :href="item.filePath" v-for="item in detailData.expenseAccountFilesList" :key="item.id">
  29. {{ item.fileName }}
  30. </a>
  31. </a-descriptions-item>
  32. </a-descriptions>
  33. </a-collapse-panel>
  34. </a-collapse>
  35. <!-- 费用明细 -->
  36. <a-card :bordered="false" size="small" class="expenseReimbursementAddcont" v-if="$route.params.sn">
  37. <div slot="title">
  38. <div style="display: flex;justify-content: space-between;align-items: center;">
  39. <div>费用明细</div>
  40. <div>
  41. <a-button size="small" class="button-info" type="primary" @click="openGuideModal=true">导入费用明细</a-button>
  42. <a-button size="small" class="button-error" type="primary" @click="newExpenseDetail">新增费用明细</a-button>
  43. </div>
  44. </div>
  45. </div>
  46. <a-alert type="info" style="margin-bottom:10px">
  47. <div slot="message">
  48. 共{{ total }}条费用明细,合计金额¥{{ detailData&&detailData.applyExpenseTotal||0 }}元
  49. </div>
  50. </a-alert>
  51. <!-- 列表 -->
  52. <s-table
  53. class="sTable fixPagination"
  54. ref="table"
  55. size="small"
  56. :rowKey="(record) => record.id"
  57. :columns="columns"
  58. :data="loadData"
  59. :defaultLoadData="false"
  60. :showPagination="false"
  61. bordered>
  62. <template slot="action" slot-scope="text,record">
  63. <a-button
  64. size="small"
  65. type="link"
  66. class="button-info"
  67. @click="setProduct(record)"
  68. >设置产品信息</a-button>
  69. <a-button
  70. size="small"
  71. type="link"
  72. class="button-info"
  73. @click="handleEdit(record)"
  74. >编辑</a-button>
  75. <a-button
  76. size="small"
  77. type="link"
  78. class="button-error"
  79. @click="handleDel(record)"
  80. >删除</a-button>
  81. </template>
  82. <!-- 费用承担方 -->
  83. <template slot="fycdf" slot-scope="text,record">
  84. <div v-for="(item,index) in record.detailSplitList" :key="item.id+'-'+index">
  85. {{ item.splitObjName }}
  86. <span v-if="item.childDetailSplit&&item.childDetailSplit.splitObjName">/</span>
  87. {{ item.childDetailSplit?item.childDetailSplit.splitObjName:'' }}: ¥{{ item.childDetailSplit?item.childDetailSplit.splitAmount:item.splitAmount }}
  88. </div>
  89. --
  90. </template>
  91. <!-- 产品信息 -->
  92. <template slot="cpxx" slot-scope="text,record">
  93. <div v-for="item in record.detailProductsList" :key="item.id">
  94. <div v-if="item.productCode">{{ item.productCode }}: ¥{{ item.expense }}</div>
  95. <div v-else-if="item.productBrandName">{{ item.productBrandName }}<span v-if="item.productTypeShowName">/</span>{{ item.productTypeShowName }}: ¥{{ item.expense }}</div>
  96. <div v-else>{{ item.productTypeShowName }}: ¥{{ item.expense }}</div>
  97. </div>
  98. <span v-if="!record.detailProductsList||record.detailProductsList.length==0">--</span>
  99. </template>
  100. </s-table>
  101. </a-card>
  102. </a-spin>
  103. <div class="affix-cont">
  104. <a-button
  105. type="primary"
  106. class="button-primary"
  107. :disabled="spinning"
  108. id="expenseReimbursementAddsubmit-btn"
  109. size="large"
  110. @click="beforeSubmit"
  111. style="padding: 0 60px;">提交</a-button>
  112. </div>
  113. <!-- 费用明细 -->
  114. <epenseDetailModal
  115. :openModal="openEpenseDetailModal"
  116. :expenseAccountSn="$route.params.sn"
  117. :expenseAccountNo="detailData?detailData.expenseAccountNo:''"
  118. :expenseAccountDetailSn="expenseAccountDetailSn"
  119. @ok="epenseDetailOk"
  120. @close="openEpenseDetailModal=false"></epenseDetailModal>
  121. <!-- 产品信息设置 -->
  122. <productInfoModal
  123. ref="productInfo"
  124. :openModal="openProductInfoModal"
  125. :expenseAccountSn="$route.params.sn"
  126. :expenseAccountNo="detailData?detailData.expenseAccountNo:''"
  127. :expenseAccountDetailSn="expenseAccountDetailSn"
  128. @ok="productInfoOk"
  129. @close="openProductInfoModal=false"></productInfoModal>
  130. <!-- 基础信息编辑 -->
  131. <baseDataModal :show="openBaseModal" @close="openBaseModal=false" :itemSn="$route.params.sn" @refashData="refashData"></baseDataModal>
  132. <!-- 导入费用明细 -->
  133. <importGuideModal :openModal="openGuideModal" :params="{expenseAccountSn: $route.params.sn, expenseAccountNo:detailData?detailData.expenseAccountNo:''}" @close="openGuideModal=false" @ok="hanldeImprotOk" />
  134. <!-- 选择审核人员 -->
  135. <chooseDepartUserModal :openModal="openDepartUserModal" @close="openDepartUserModal=false" @submit="handleSubmit"></chooseDepartUserModal>
  136. </div>
  137. </template>
  138. <script>
  139. import { VSelect, Upload, STable } from '@/components'
  140. import epenseDetailModal from './epenseDetailModal.vue'
  141. import productInfoModal from './productInfoModal.vue'
  142. import baseDataModal from './baseDataModal.vue'
  143. import ImportGuideModal from './importGuideModal.vue'
  144. import chooseDepartUserModal from './chooseDepartUserModal.vue'
  145. import { expenseAccountDetail, expenseAcctDetailDelete, expenseAcctDetailFindList, expenseAccountSubmit, expenseInsertImport } from '@/api/expenseManagement.js'
  146. export default {
  147. components: { VSelect, Upload, STable, epenseDetailModal, productInfoModal, baseDataModal, ImportGuideModal, chooseDepartUserModal },
  148. data () {
  149. return {
  150. spinning: false,
  151. detailData: null,
  152. openBaseModal: false,
  153. openGuideModal: false,
  154. openDepartUserModal: false,
  155. openEpenseDetailModal: false, // 费用明细弹框
  156. expenseAccountDetailSn: '',
  157. openProductInfoModal: false, // 产品信息弹框
  158. total: 0,
  159. loadData: parameter => {
  160. const params = Object.assign(parameter, { expenseAccountSn: this.$route.params.sn })
  161. return expenseAcctDetailFindList(params).then(res => {
  162. let data
  163. if (res.status == 200) {
  164. data = res.data
  165. const no = 0
  166. for (var i = 0; i < data.length; i++) {
  167. data[i].no = no + i + 1
  168. }
  169. this.total = data.length
  170. this.disabled = false
  171. this.spinning = false
  172. }
  173. return data
  174. })
  175. },
  176. columns: [
  177. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  178. { title: '记账类型', dataIndex: 'accountTypeDictValue', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
  179. { title: '记账名称', dataIndex: 'accountName', align: 'center', width: '10%', customRender: function (text) { return text || '--' } },
  180. { title: '所属区域', dataIndex: 'subareaNames', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
  181. { title: '所属省份', dataIndex: 'provinceName', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
  182. { title: '所属城市', dataIndex: 'cityName', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
  183. { title: '记账费用', dataIndex: 'expense', align: 'center', width: '10%', customRender: function (text) { return (text == 0 || text) ? text : '--' } },
  184. { title: '费用承担方', scopedSlots: { customRender: 'fycdf' }, align: 'center', width: '20%' },
  185. { title: '产品信息', scopedSlots: { customRender: 'cpxx' }, align: 'center', width: '15%' },
  186. { title: '备注', dataIndex: 'remarks', align: 'center', width: '10%', customRender: function (text) { return text || '--' } },
  187. { title: '操作', scopedSlots: { customRender: 'action' }, width: '100px', align: 'center' }
  188. ]
  189. }
  190. },
  191. methods: {
  192. // 编辑基础信息
  193. handleEditBase (event) {
  194. this.openBaseModal = true
  195. },
  196. refashData () {
  197. this.getDetail(1)
  198. },
  199. // 费用单基础详情
  200. getDetail (type) {
  201. this.spinning = true
  202. this.disabled = true
  203. expenseAccountDetail({ expenseAccountSn: this.$route.params.sn }).then(res => {
  204. if (res.status == 200) {
  205. this.detailData = res.data
  206. if (!type) {
  207. // 获取费用明细列表
  208. this.getExpenseDetailList()
  209. } else {
  210. this.spinning = false
  211. this.disabled = false
  212. }
  213. }
  214. })
  215. },
  216. getExpenseDetailList () {
  217. this.$refs.table.refresh()
  218. },
  219. // 确认导入明细
  220. hanldeImprotOk (obj) {
  221. console.log(obj)
  222. expenseInsertImport(obj).then(res => {
  223. if (res.status == 200) {
  224. this.getDetail(false)
  225. }
  226. })
  227. },
  228. // 新增明细
  229. newExpenseDetail () {
  230. this.expenseAccountDetailSn = ''
  231. this.openEpenseDetailModal = true
  232. },
  233. // 新增明细成功
  234. epenseDetailOk () {
  235. // 刷新列表
  236. this.openEpenseDetailModal = false
  237. this.getDetail(false)
  238. },
  239. // 设置产品
  240. setProduct (row) {
  241. this.openProductInfoModal = true
  242. this.expenseAccountDetailSn = row.expenseAccountDetailSn
  243. this.$refs.productInfo.setBaseData(row)
  244. },
  245. // 新增产品成功
  246. productInfoOk () {
  247. // 刷新列表
  248. this.openProductInfoModal = false
  249. this.getExpenseDetailList()
  250. },
  251. // 编辑明细
  252. handleEdit (row) {
  253. this.openEpenseDetailModal = true
  254. this.expenseAccountDetailSn = row.expenseAccountDetailSn
  255. },
  256. // 删除明细
  257. handleDel (row) {
  258. const _this = this
  259. this.$confirm({
  260. title: '提示',
  261. content: '确认要删除吗?',
  262. centered: true,
  263. closable: true,
  264. onOk () {
  265. _this.spinning = true
  266. expenseAcctDetailDelete({ detailSn: row.expenseAccountDetailSn }).then(res => {
  267. if (res.status == 200) {
  268. _this.$message.success(res.message)
  269. _this.getExpenseDetailList()
  270. _this.spinning = false
  271. } else {
  272. _this.spinning = false
  273. }
  274. })
  275. }
  276. })
  277. },
  278. beforeSubmit () {
  279. if (this.total) {
  280. this.openDepartUserModal = true
  281. } else {
  282. this.$message.info('请新增费用明细')
  283. }
  284. },
  285. // 提交信息
  286. handleSubmit (data) {
  287. this.spinning = true
  288. expenseAccountSubmit({ expenseAccountSn: this.$route.params.sn, ...data }).then(res => {
  289. if (res.status == '200') {
  290. this.$message.success(res.message)
  291. this.handleBack()
  292. }
  293. this.spinning = false
  294. })
  295. },
  296. // 返回
  297. handleBack (data) {
  298. this.$router.push({ name: 'expenseReimbursementList' })
  299. },
  300. pageInit () {
  301. if (this.$route.params.sn) { // 编辑页
  302. this.getDetail()
  303. }
  304. }
  305. },
  306. mounted () {
  307. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  308. this.pageInit()
  309. }
  310. },
  311. activated () {
  312. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  313. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  314. this.pageInit()
  315. }
  316. },
  317. beforeRouteEnter (to, from, next) {
  318. next(vm => {})
  319. }
  320. }
  321. </script>
  322. <style lang="less">
  323. .expenseReimbursementAddwrap{
  324. position: relative;
  325. height: 100%;
  326. padding-bottom: 51px;
  327. box-sizing: border-box;
  328. >.ant-spin-nested-loading{
  329. overflow-y: scroll;
  330. height: 100%;
  331. }
  332. .expenseReimbursementAddcont{
  333. margin-bottom: 10px;
  334. }
  335. .upload{
  336. width: 100%!important;
  337. }
  338. .affix{
  339. .ant-affix{
  340. z-index: 101;
  341. }
  342. }
  343. }
  344. </style>