add.vue 16 KB

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