list.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <a-card size="small" :bordered="false" class="expenseManagementList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="15">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="费用单号">
  9. <a-input id="expenseManagementList-accountExpensesNo" v-model.trim="queryParam.accountExpensesNo" allowClear placeholder="请输入费用单号"/>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <a-form-item label="创建时间">
  14. <a-range-picker v-model="createDate" id="expenseManagementList-creatDate"/>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="6" :sm="24">
  18. <a-form-item label="费用类型">
  19. <a-cascader
  20. @change="changeCostType"
  21. change-on-select
  22. v-model="costType"
  23. :options="costTypeList"
  24. :fieldNames="{ label: 'name', value: 'costTypeSn', children: 'children' }"
  25. id="productInfoList-costType"
  26. placeholder="请选择费用类型"
  27. allowClear />
  28. </a-form-item>
  29. </a-col>
  30. <template v-if="advanced">
  31. <a-col :md="6" :sm="24">
  32. <a-form-item label="单据状态">
  33. <v-select
  34. v-model="queryParam.billStatus"
  35. ref="billStatus"
  36. id="expenseManagementList-billStatus"
  37. code="BILL_STATUS"
  38. placeholder="请选择单据状态"
  39. allowClear></v-select>
  40. </a-form-item>
  41. </a-col>
  42. <a-col :md="6" :sm="24">
  43. <a-form-item label="结算状态">
  44. <v-select
  45. v-model="queryParam.settleState"
  46. ref="billStatus"
  47. id="expenseManagementList-billStatus"
  48. code="FINANCIAL_STATUS"
  49. placeholder="请选择结算状态"
  50. allowClear></v-select>
  51. </a-form-item>
  52. </a-col>
  53. </template>
  54. <a-col :md="6" :sm="24">
  55. <span class="table-page-search-submitButtons">
  56. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="expenseManagementList-refresh">查询</a-button>
  57. <a-button style="margin-left: 8px" @click="resetSearchForm()" :disabled="disabled" id="expenseManagementList-reset">重置</a-button>
  58. <a @click="advanced=!advanced" style="margin-left: 8px">
  59. {{ advanced ? '收起' : '展开' }}
  60. <a-icon :type="advanced ? 'up' : 'down'"/>
  61. </a>
  62. </span>
  63. </a-col>
  64. </a-row>
  65. </a-form>
  66. </div>
  67. <!-- 操作按钮 -->
  68. <div class="table-operator">
  69. <a-button id="expenseManagementList-add" type="primary" class="button-error" @click="handleEdit()">新增</a-button>
  70. </div>
  71. <!-- alert -->
  72. <a-alert type="info" showIcon style="margin-bottom:15px">
  73. <div slot="message">共 <strong>{{ totalData.count }}</strong> 条记录,金额共计 <strong>¥{{ totalData.totalAmount }}</strong></div>
  74. </a-alert>
  75. <!-- 列表 -->
  76. <s-table
  77. class="sTable"
  78. ref="table"
  79. size="default"
  80. :rowKey="(record) => record.id"
  81. :columns="columns"
  82. :data="loadData"
  83. :scroll="{ x: 1120, y: tableHeight }"
  84. bordered>
  85. <!-- 状态 -->
  86. <template slot="state" slot-scope="text, record">
  87. <span>{{ record.state == 1 ? '已启用' : '已禁用' }}</span>
  88. </template>
  89. <!-- 操作 -->
  90. <template slot="action" slot-scope="text, record">
  91. <a-button
  92. size="small"
  93. type="link"
  94. v-if="record.state != 'AUDIT_PASS'"
  95. class="button-primary"
  96. @click="handleEdit(record)"
  97. id="expenseManagement-edit-btn">编辑</a-button>
  98. <a-button
  99. size="small"
  100. type="link"
  101. v-if="record.state != 'AUDIT_PASS'"
  102. class="button-error"
  103. @click="handleDel(record)"
  104. id="expenseManagement-del-btn">删除</a-button>
  105. <a-button
  106. size="small"
  107. type="link"
  108. v-if="record.state == 'AUDIT_PASS'"
  109. class="button-success"
  110. @click="handleDetail(record)"
  111. id="expenseManagement-detail-btn">详情</a-button>
  112. </template>
  113. </s-table>
  114. <!-- 详情 -->
  115. <expense-management-detail-modal :openModal="openModal" :itemId="itemId" @close="openModal=false" />
  116. </a-card>
  117. </template>
  118. <script>
  119. import { STable, VSelect } from '@/components'
  120. import { settleExpenseQuery, delExpense, settleExpenseQuerySum } from '@/api/settleExpense'
  121. import { costTypeAllQuery } from '@/api/costType'
  122. import expenseManagementDetailModal from './detailModal.vue'
  123. import moment from 'moment'
  124. export default {
  125. components: { STable, VSelect, expenseManagementDetailModal },
  126. data () {
  127. return {
  128. tableHeight: 0,
  129. disabled: false, // 查询、重置按钮是否可操作
  130. advanced: false, // 高级搜索 展开/关闭
  131. costTypeList: [], // 费用类型
  132. costType: [],
  133. createDate: [],
  134. // 查询参数
  135. queryParam: {
  136. accountExpensesNo: '',
  137. expensesTypeSn1: '',
  138. expensesTypeSn2: '',
  139. expensesTypeSn3: '',
  140. billStatus: '',
  141. settleState: '',
  142. beginDate: '',
  143. endDate: ''
  144. },
  145. // 汇总
  146. totalData: {
  147. count: 0,
  148. totalAmount: 0
  149. },
  150. // 表头
  151. columns: [
  152. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  153. { title: '费用单号', dataIndex: 'accountExpensesSn', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
  154. { title: '创建时间', dataIndex: 'createDate', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
  155. { title: '费用类型', dataIndex: 'name', align: 'center', customRender: function (text, record) { return [record.expensesTypeName1, record.expensesTypeName2, record.expensesTypeName3].join(' > ') } },
  156. { title: '金额', dataIndex: 'settleAmount', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? ('¥' + text) : '--') } },
  157. { title: '单据状态', dataIndex: 'stateDictValue', width: 110, align: 'center' },
  158. { title: '结算状态', dataIndex: 'settleStateDictValue', width: 110, align: 'center' },
  159. { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center', fixed: 'right' }
  160. ],
  161. // 加载数据方法 必须为 Promise 对象
  162. loadData: parameter => {
  163. this.disabled = true
  164. if (this.tableHeight == 0) {
  165. this.tableHeight = window.innerHeight - 300
  166. }
  167. if (this.createDate.length > 0) {
  168. this.queryParam.beginDate = moment(this.createDate[0]).format('YYYY-MM-DD')
  169. this.queryParam.endDate = moment(this.createDate[1]).format('YYYY-MM-DD')
  170. }
  171. return settleExpenseQuery(Object.assign(parameter, this.queryParam)).then(res => {
  172. const data = res.data
  173. const no = (data.pageNo - 1) * data.pageSize
  174. for (var i = 0; i < data.list.length; i++) {
  175. data.list[i].no = no + i + 1
  176. }
  177. this.disabled = false
  178. // 费用类型
  179. if (this.costTypeList.length == 0) {
  180. this.getCostTypeList()
  181. }
  182. // 汇总
  183. this.totalData.count = data.count
  184. this.settleExpenseQuerySum(Object.assign(parameter, this.queryParam))
  185. return data
  186. })
  187. },
  188. openModal: false, // 查看详情 弹框
  189. itemId: '' // 当前id
  190. }
  191. },
  192. methods: {
  193. // 递归函数
  194. recursionFun (data) {
  195. if (data) {
  196. data.map((item, index) => {
  197. if (item.children && item.children.length == 0) {
  198. delete item.children
  199. } else {
  200. this.recursionFun(item.children)
  201. }
  202. })
  203. }
  204. },
  205. // 获取费用类型数据
  206. getCostTypeList () {
  207. costTypeAllQuery({}).then(res => {
  208. // 递归去除空children
  209. this.recursionFun(res.data)
  210. this.costTypeList = res.data
  211. })
  212. },
  213. // 费用类型 change
  214. changeCostType (val, opt) {
  215. this.queryParam.expensesTypeSn1 = val[0] ? val[0] : ''
  216. this.queryParam.expensesTypeSn2 = val[1] ? val[1] : ''
  217. this.queryParam.expensesTypeSn3 = val[2] ? val[2] : ''
  218. },
  219. // 新增/编辑
  220. handleEdit (row) {
  221. this.$router.push({ name: 'expenseManagementEdit', params: { id: row.id } })
  222. },
  223. // 提交
  224. handleSubmit (row) {
  225. const _this = this
  226. _this.itemId = item.id
  227. _this.$confirm({
  228. title: '提示',
  229. content: '确定要进行提交操作吗?',
  230. centered: true,
  231. onOk () {
  232. // dealerProductTypeDel({ id: _this.itemId }).then(res => {
  233. // if (res.status == 200) {
  234. // _this.$message.success(res.message)
  235. // _this.$refs.table.refresh()
  236. // }
  237. // })
  238. }
  239. })
  240. },
  241. // 详情
  242. handleDetail (row) {
  243. this.itemId = row.id
  244. this.openModal = true
  245. // this.$router.push({ path: `/financialManagement/expenseManagement/detail/${row.id}`})
  246. },
  247. // 审核
  248. handleExamine (row, type) {
  249. const _this = this
  250. this.$confirm({
  251. title: '提示',
  252. content: '操作后不可恢复,确定要进行' + (type == 1 ? ' 通过 ' : ' 不通过 ') + '操作吗?',
  253. centered: true,
  254. onOk () {
  255. // delectRolePower({
  256. // id: row.id
  257. // }).then(res => {
  258. // console.log(res, 'res1111')
  259. // if (res.status == 200) {
  260. // _this.$message.success(res.message)
  261. // _this.$refs.table.refresh()
  262. // }
  263. // })
  264. }
  265. })
  266. },
  267. // 删除
  268. handleDel (row) {
  269. const _this = this
  270. _this.itemId = row.id
  271. _this.$confirm({
  272. title: '提示',
  273. content: '删除后原数据不可恢复,是否删除?',
  274. centered: true,
  275. onOk () {
  276. delExpense({ id: _this.itemId }).then(res => {
  277. if (res.status == 200) {
  278. _this.$message.success(res.message)
  279. _this.$refs.table.refresh()
  280. }
  281. })
  282. }
  283. })
  284. },
  285. // 汇总
  286. settleExpenseQuerySum (params) {
  287. settleExpenseQuerySum(params).then(res => {
  288. this.totalData.totalAmount = res.data.settleAmount || 0
  289. })
  290. },
  291. // 重置
  292. resetSearchForm () {
  293. this.queryParam.accountExpensesNo = ''
  294. this.queryParam.expensesTypeSn1 = ''
  295. this.queryParam.expensesTypeSn2 = ''
  296. this.queryParam.expensesTypeSn3 = ''
  297. this.queryParam.billStatus = ''
  298. this.queryParam.settleState = ''
  299. this.queryParam.beginDate = ''
  300. this.queryParam.endDate = ''
  301. this.costType = []
  302. this.createDate = []
  303. this.$refs.table.refresh(true)
  304. }
  305. }
  306. }
  307. </script>
  308. <style lang="less">
  309. .expenseManagementList-wrap{
  310. .sTable{
  311. margin-top: 15px;
  312. }
  313. }
  314. </style>