add.vue 17 KB

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