payDetailList.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  1. <template>
  2. <div class="custom-tree-container">
  3. <el-row class="handle-box" :gutter="10" style="margin-bottom: 10px">
  4. <el-form
  5. ref="elForm"
  6. :model="search"
  7. :rules="rules"
  8. size="medium"
  9. >
  10. <el-col :span="4">
  11. <el-form-item label="" prop="name" style="margin-bottom: 0">
  12. <el-input
  13. size="small"
  14. v-model="search.name"
  15. :style="{ width: '100%' }"
  16. clearable
  17. placeholder="请输入名称"
  18. />
  19. </el-form-item>
  20. </el-col>
  21. <el-col :span="4">
  22. <el-form-item label="" prop="name" style="margin-bottom: 0">
  23. <el-date-picker
  24. id="datePicker"
  25. v-model="timeValue"
  26. size="small"
  27. type="daterange"
  28. align="right"
  29. unlink-panels
  30. range-separator="-"
  31. start-placeholder="流程开始日期"
  32. end-placeholder="流程结束日期"
  33. value-format="yyyy-MM-dd"
  34. :picker-options="pickerOptions"
  35. @change="pickerChange"
  36. />
  37. </el-form-item>
  38. </el-col>
  39. <el-col :span="16">
  40. <div style="width: auto;float: right">
  41. <el-button class="ch-button-warning" plain size="small" @click="handleReset()"><i
  42. class="el-icon-aim"
  43. />&nbsp;重置
  44. </el-button>
  45. <el-button class="ch-button" size="small" @click="handleSearch()"><i class="el-icon-search"/>&nbsp;搜索
  46. </el-button>
  47. <el-button size="small" type="success" @click="confirmOutput()"><i class="el-icon-download"/>&nbsp;导出
  48. </el-button>
  49. </div>
  50. </el-col>
  51. </el-form>
  52. </el-row>
  53. <el-row class="handle-box">
  54. <el-col :span="24">
  55. <el-table
  56. v-loading="loading"
  57. :cell-style="styleBack"
  58. :data="tableData"
  59. row-class-name="g_table_row"
  60. stripe
  61. fit
  62. style="width: 100%"
  63. >
  64. <el-table-column label="序号" fixed type="index" width="60"/>
  65. <el-table-column label="付款申请单号" fixed prop="form_id" width="175"/>
  66. <el-table-column label="申请人" prop="truename" width="100"/>
  67. <el-table-column label="所在部门" prop="dept_name" width="100"/>
  68. <el-table-column label="流程发起时间" prop="created_at" width="125"/>
  69. <el-table-column label="流程结束时间" prop="last_update_time" width="125"/>
  70. <el-table-column label="关联采购单号" prop="order_no" width="125"/>
  71. <el-table-column label="关联项目名称" prop="pro_name" width="175"/>
  72. <el-table-column label="采购内容" prop="remark" width="170">
  73. <template scope="scope">
  74. <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top">
  75. <div class="chaochuyingcang">{{ scope.row.remark }}</div>
  76. </el-tooltip>
  77. </template>
  78. </el-table-column>
  79. <el-table-column label="付款名称" prop="pay_name" width="125"/>
  80. <el-table-column label="支付金额(元)" prop="pay_money" width="125"/>
  81. <el-table-column label="供应商" prop="biz_name"/>
  82. <el-table-column label="支付方式" prop="pay_type"/>
  83. <el-table-column label="发票号" prop="bill_number" width="200"/>
  84. <el-table-column label="税率%" prop="bill_rate"/>
  85. <el-table-column label="制单日期" prop="createCardTime" width="125"/>
  86. <el-table-column label="实际支付日期" prop="pay_time" width="125"/>
  87. <el-table-column label="当前流程状态" prop="flow_status" width="125"/>
  88. <el-table-column label="发票附件" prop="file_data_ids" min-width="175">
  89. <template scope="scope">
  90. <el-button
  91. style="padding: 0;margin: 0"
  92. v-for="file in scope.row.file_data_ids"
  93. type="text"
  94. @click="downLoadFile(file.id)"
  95. >
  96. {{ file.fileName }}
  97. </el-button>
  98. </template>
  99. </el-table-column>
  100. </el-table>
  101. <div class="table-page">
  102. <el-pagination
  103. :current-page.sync="currentPage"
  104. :page-size="pageSize"
  105. :total="allpage"
  106. background
  107. layout="total, prev, pager, next"
  108. @current-change="handleCurrentChange"
  109. />
  110. </div>
  111. </el-col>
  112. </el-row>
  113. </div>
  114. </template>
  115. <script>
  116. import common from '@/static/utils/common'
  117. import Base from '../base/base'
  118. import BaseData from '../base/baseData'
  119. import BaseDept from '../base/baseDept'
  120. export default {
  121. mixins: [Base, BaseData, BaseDept],
  122. data() {
  123. return {
  124. timeValue: '',
  125. // 查询数据的内容
  126. search: {},
  127. departmentIds: '',
  128. deptAttr: '',
  129. // 通用字典项
  130. AUDIT_TYPE: [],
  131. dc_key: ['PAY_TYPE'],
  132. dc_map: {},
  133. // 列表相关
  134. cusName: '',
  135. auditStatus: '',
  136. auditType: '',
  137. proName: '',
  138. applyBy: '',
  139. tableData: [],
  140. loading: false,
  141. UserMap: {},
  142. // 分页
  143. currentPage: 1,
  144. allpage: 0,
  145. pageSize: 12,
  146. // 弹框相关
  147. currAuditId: '',
  148. dialogVisible: false,
  149. dialogTitle: '新增',
  150. isAdd: true,
  151. detailList: [],
  152. rules: {},
  153. OutData: []
  154. }
  155. },
  156. mounted() {
  157. const _this = this
  158. _this.getData()
  159. this.initDict().then(() => {
  160. if (this.DeptAttrData.length > 0) {
  161. this.deptAttr = this.DeptAttrData[0].value
  162. this.initDepartment({ deptAttr: this.deptAttr })
  163. }
  164. })
  165. },
  166. methods: {
  167. pickerChange: function(val) {
  168. this.search.startTime = val[0]
  169. this.search.endTime = val[1]
  170. },
  171. downLoadFile(id) {
  172. window.open(this.$constant.BASE_URI + '/FileController/download/' + id)
  173. },
  174. styleBack({ row, column, rowIndex, columnIndex }) {
  175. if (row.isFirst == 1) return { backgroundColor: '#FDBABB' }
  176. },
  177. addAttrDept: function() {
  178. if (!this.form.selectDepts) this.form.selectDepts = []
  179. this.form.selectDepts.push({
  180. userId: this.form.id,
  181. attrId: '',
  182. deptAttrs: this.DeptAttrData,
  183. deptId: '',
  184. depts: [],
  185. postIds: []
  186. })
  187. },
  188. dlgOpen: function() {
  189. const _this = this
  190. if (this.form.id) {
  191. this.baseRequest('getById', {
  192. id: this.form.id
  193. }).then((res) => {
  194. if (res.data) {
  195. _this.form.groupId = res.data.groupId
  196. _this.form.username = res.data.username
  197. _this.form.truename = res.data.truename
  198. _this.form.staffCode = res.data.staffCode
  199. _this.form.gender = res.data.gender
  200. _this.form.leader = res.data.leader
  201. _this.form.position = res.data.position
  202. _this.form.posts = res.data.posts ? res.data.posts.split(',') : []
  203. if (_this.form.posts.length) {
  204. _this.initPosition2(_this.form.posts)
  205. }
  206. _this.form.sequenceNo = res.data.sequenceNo
  207. _this.form.phone = res.data.phone
  208. _this.form.secretKey = res.data.secretKey
  209. _this.form.comment = res.data.comment
  210. _this.form.selectDepartment = res.data.department
  211. _this.form.selectDepts = []
  212. _this.userDeptRequest('listByUserId', {
  213. userId: _this.form.id
  214. }).then(resDept => {
  215. if (resDept.data) {
  216. resDept.data.forEach(dept => {
  217. dept.postIds = dept.posts ? dept.posts.split(',') : []
  218. dept.deptAttrs = _this.DeptAttrData
  219. if (dept.attrId) {
  220. dept.depts = _this.TempDepts.filter(tempDept => {
  221. return tempDept.deptAttr === dept.attrId
  222. })
  223. }
  224. _this.form.selectDepts.push(dept)
  225. })
  226. }
  227. // console.log('listByUserId', _this.form.selectDepts)
  228. })
  229. }
  230. }).catch(() => {
  231. })
  232. }
  233. },
  234. handleDeptAttrChange: function(val) {
  235. this.selectDeptNode = this.getDeptDefaultTopNode()
  236. this.deptAttr = val
  237. this.initDepartment({ deptAttr: val })
  238. this.handleSearch()
  239. },
  240. handleDeptNodeClick(data, node, ocx) {
  241. this.departmentIds = data.id
  242. this.getData()
  243. },
  244. handleCloseDept: function() {
  245. this.selectDeptNode = this.getDeptDefaultTopNode()
  246. this.handleSearch()
  247. },
  248. confirmOutput() {
  249. const OutSize = [
  250. { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 },
  251. { wch: 15 }, { wch: 15 }, { wch: 25 }, { wch: 25 }, { wch: 15 }, { wch: 15 }, { wch: 15 }
  252. , { wch: 15 }, { wch: 15 }, { wch: 15 }]
  253. const fileName = '付款申请明细' + new Date().Format('yyyy-MM-dd')
  254. this.$outputXlsxFile(this.OutData, OutSize, fileName)
  255. },
  256. getPostData: function() {
  257. const postData = {
  258. departmentIds: this.departmentIds,
  259. name: this.search.name,
  260. pageNum: this.currentPage,
  261. pageSize: this.pageSize
  262. }
  263. const currUser = this.$common.currUser()
  264. if (currUser && currUser.groupId) {
  265. postData.groupId = common.currUser().groupId
  266. }
  267. if (!this.$common.isAdmin()) {
  268. postData.chargedby = this.$common.currUser().id
  269. }
  270. return postData
  271. },
  272. initOutData: function() {
  273. const _this = this
  274. this.OutData = [[
  275. '付款申请单', '申请人', '所在部门', '流程发起时间', '流程结束时间', '关联采购单号',
  276. '关联项目名称', '采购内容', '付款名称', '支付金额', '供应商'
  277. , '支付方式', '发票号', '税率%', '制单日期', '实际支付日期', '当前流程状态'
  278. ]]
  279. const postData = this.getPostData()
  280. this.baseRequest1('findAllApplyPaymentListByInfo', postData).then((res) => {
  281. try {
  282. if (res.data) {
  283. res.data.forEach(function(item) {
  284. const jsonMap = _this.getItemJson(item)
  285. const jsonArray = [
  286. jsonMap.form_id,
  287. jsonMap.truename,
  288. jsonMap.dept_name,
  289. jsonMap.created_at,
  290. jsonMap.last_update_time,
  291. jsonMap.order_no,
  292. jsonMap.pro_name,
  293. jsonMap.remark,
  294. jsonMap.pay_name,
  295. jsonMap.pay_money,
  296. jsonMap.biz_name,
  297. jsonMap.pay_type,
  298. jsonMap.bill_number,
  299. jsonMap.bill_rate,
  300. jsonMap.createCardTime,
  301. jsonMap.pay_time,
  302. jsonMap.flow_status
  303. ]
  304. console.log(jsonArray)
  305. _this.OutData.push(jsonArray)
  306. })
  307. }
  308. } catch (e) {
  309. }
  310. }).catch(() => {
  311. })
  312. },
  313. async changeStatus(row) {
  314. let status = row.status == 0 ? 2 : row.status == 2 ? 0 : null
  315. this.loading = true
  316. let { data } = await this.baseRequest1('noOrUse', { id: row.id, status })
  317. if (data.code == 200) {
  318. this.loading = false
  319. this.getData()
  320. this.$message.success('状态修改成功')
  321. }
  322. },
  323. async openHolidayDialog(status, row) {
  324. this.$refs.addOrEditHoliiday.setVisible(status, row)
  325. },
  326. handleCurrentChange: function(val) {
  327. this.currentPage = val
  328. this.getData()
  329. },
  330. recallApply: function(row, type) {
  331. const _this = this
  332. _this.$confirm('该流程已经在审核中,撤回后原审核内容将作废确认撤回吗?', '提示', {
  333. confirmButtonText: '确定',
  334. cancelButtonText: '取消',
  335. type: 'warning'
  336. }).then(function() {
  337. const deleting = _this.$notify({
  338. title: '正在撤回,请稍等',
  339. type: 'warning'
  340. })
  341. const postData = {
  342. flowMainid: row.id
  343. }
  344. _this.baseRequest2(
  345. 'FlowMainController',
  346. 'recallApply',
  347. postData).then(res => {
  348. if (res.data.code === 200) {
  349. _this.getData()
  350. deleting.close()
  351. _this.$notify({
  352. title: '撤回成功',
  353. type: 'info'
  354. })
  355. } else {
  356. deleting.close()
  357. _this.dialogVisible = false
  358. _this.$notify({
  359. title: '撤回失败',
  360. type: 'info'
  361. })
  362. }
  363. }).catch((err) => {
  364. deleting.close()
  365. _this.$alert(err)
  366. })
  367. }).catch(function(error) {
  368. console.error(error)
  369. })
  370. },
  371. // 初始化获取数据
  372. getData() {
  373. const _this = this
  374. const postData = {
  375. name: _this.search.name,
  376. startTime: _this.search.startTime,
  377. endTime: this.search.endTime,
  378. pageNum: _this.currentPage,
  379. pageSize: _this.pageSize
  380. }
  381. this.loading = true
  382. _this.baseRequest1('findApplyPaymentListByInfo', postData).then(res => {
  383. if (res.data) {
  384. this.loading = false
  385. _this.tableData = []
  386. res.data.rows.forEach(item => {
  387. item.noUseDate = item.noUseDate ? this.$common.transDate(item.noUseDate) : null
  388. item.restHolidayDate = item.restHolidayDate ? this.$common.transDate(item.restHolidayDate) : null
  389. item.joinDay = item.joinDay ? this.$common.transDate(item.joinDay) : null
  390. item.socialPayDay = item.socialPayDay ? this.$common.transDate(item.socialPayDay) : null
  391. _this.tableData.push(_this.getItemJson(item))
  392. })
  393. _this.allpage = res.data.total
  394. } else {
  395. _this.tableData = []
  396. }
  397. })
  398. this.initOutData()
  399. },
  400. getItemJson(item) {
  401. item.created_at = this.$common.transDate(item.created_at)
  402. item.last_update_time = this.$common.transDate(item.last_update_time)
  403. item.pay_time = this.$common.transDate(item.pay_time)
  404. item.createCardTime = this.$common.transDate(item.createCardTime)
  405. item.flow_status = item.flow_status == 1 ? '审批中' : '结束'
  406. item.xxx = '111'
  407. return item
  408. },
  409. handleSearch: function() {
  410. this.getData()
  411. },
  412. handleReset: function() {
  413. for (const i in this.search) {
  414. if (i !== 'pageNum' && i !== 'pageSize') {
  415. this.search[i] = ''
  416. }
  417. }
  418. this.handleSearch()
  419. },
  420. // 打开流程发起菜单
  421. handleClick(tab, event) {
  422. this.getData()
  423. },
  424. // 请求封装,继承类中调用,必须存在
  425. baseRequest1(opUrl, postData) {
  426. return this.$channel.globleRequest(
  427. 'ApplyPaymentController',
  428. opUrl,
  429. postData,
  430. 'project task'
  431. )
  432. },
  433. baseRequest2(controller, opUrl, postData) {
  434. return this.$channel.globleRequest(
  435. controller,
  436. opUrl,
  437. postData,
  438. 'project task'
  439. )
  440. }
  441. }
  442. }
  443. </script>
  444. <style lang="scss">
  445. .chaochuyingcang {
  446. width: 100%;
  447. white-space: nowrap;
  448. overflow: hidden;
  449. text-overflow: ellipsis;
  450. }
  451. .custom-tree-container .block-l {
  452. /*flex-grow: 2 ;*/
  453. float: left;
  454. width: 20%;
  455. padding: 0 8px 0 0;
  456. }
  457. .custom-tree-container .block-r {
  458. /*flex-grow: 10;*/
  459. float: left;
  460. width: 80%;
  461. /*padding: 0 0 0 8px;*/
  462. }
  463. .holidayRow {
  464. .el-select {
  465. width: 100%;
  466. }
  467. }
  468. .el-dropdown-link {
  469. cursor: pointer;
  470. color: rgba(39, 78, 219, 1);
  471. }
  472. .demonstration {
  473. display: block;
  474. color: #8492a6;
  475. font-size: 14px;
  476. margin-bottom: 20px;
  477. }
  478. .labeldom {
  479. .el-tabs__nav-wrap::after {
  480. background: none;
  481. }
  482. }
  483. .w200px {
  484. width: 200px;
  485. }
  486. </style>
  487. <style scoped>
  488. .ch-input .el-input__inner {
  489. border-radius: 0px;
  490. border-color: #32323a;
  491. }
  492. .ch-input-size {
  493. width: 150px;
  494. }
  495. .ch-button {
  496. borderund-color: #32323a;
  497. color: #fff;
  498. }
  499. .ch-button-warning {
  500. margin-left: 10px;
  501. border-radius: 0px;
  502. border-color: #E75B5B;
  503. background-color: #E75B5B;
  504. color: #fff;
  505. }
  506. </style>