add.vue 15 KB

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