tb-charge-record-list.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>充值记录-列表</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 所有的 css & js 资源 -->
  9. <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
  10. <link rel="stylesheet" href="../../static/sa.css">
  11. <script src="../../static/kj/vue.min.js"></script>
  12. <script src="../../static/kj/element-ui/index.js"></script>
  13. <script src="../../static/kj/httpVueLoader.js"></script>
  14. <script src="../../static/kj/jquery.min.js"></script>
  15. <script src="../../static/kj/layer/layer.js"></script>
  16. <script src="../../static/sa.js"></script>
  17. <script src="../../static/node_modules/crypto-js/crypto-js.js"></script>
  18. </head>
  19. <body>
  20. <div class="vue-box" style="display: none;" :style="'display: block;'">
  21. <div class="c-panel">
  22. <!-- ------------- 检索参数 ------------- -->
  23. <div class="c-title">检索参数</div>
  24. <el-form ref="form" :model='p' @submit.native.prevent>
  25. <sa-item type="text" name="客户名称" v-model="p.customerName"></sa-item>
  26. <sa-item type="daterange" name="充值时间">
  27. <el-date-picker v-model="p.createTime" type="daterange" align="right" unlink-panels
  28. value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
  29. end-placeholder="结束日期" :picker-options="pickerOptions">
  30. </el-date-picker>
  31. </sa-item>
  32. <sa-item name="复核状态">
  33. <el-select v-model="p.reviewStatus" clearable placeholder="请选择">
  34. <el-option v-for="item in reviewStatusList" :key="item.id" :label="item.name"
  35. :value="item.id">
  36. </el-option>
  37. </el-select>
  38. </sa-item>
  39. <sa-item name="类型">
  40. <el-select v-model="p.type" clearable placeholder="请选择">
  41. <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
  42. </el-option>
  43. </el-select>
  44. </sa-item>
  45. <el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
  46. <sa-item type="fast-btn" show="reset" style="display: inline;"></sa-item>
  47. </el-form>
  48. <!-- ------------- 快捷按钮 ------------- -->
  49. <!-- <sa-item type="fast-btn" show="add,get,delete,export,reset"></sa-item>-->
  50. <!-- ------------- 数据列表 ------------- -->
  51. <el-table class="data-table" ref="data-table" :data="dataList">
  52. <sa-td type="index" name="序号"></sa-td>
  53. <sa-td name="客户名称" prop="customerName" width="220"></sa-td>
  54. <sa-td name="原金额(元)" prop="beforeMoney" not="0"></sa-td>
  55. <sa-td name="实际收款(元)" prop="totalTopupMoney" not="0" width="120"></sa-td>
  56. <sa-td name="优惠金额(元)" prop="discountMoney" not="0" width="120"></sa-td>
  57. <sa-td name="本次充值金额(元)" prop="preTopupMoney" not="0" width="140"></sa-td>
  58. <sa-td name="退款金额(元)" width="120">
  59. <template slot-scope="s">
  60. <span v-if="s.row.refundMoney==0">0</span>
  61. <span v-else style="color: blue;cursor: pointer;text-decoration: underline;" @click="getDetail(s.row)">{{s.row.refundMoney}}</span>
  62. </template>
  63. </sa-td>
  64. <sa-td name="余额(元)" prop="totalMoney" not="0"></sa-td>
  65. <sa-td name="类型" type="enum" prop="type" :jv="{1: '账户充值', 2: '余额退款',3:'异常单退款'}"></sa-td>
  66. <sa-td name="付款方式" prop="payingType" type="enum" :jv="payingTypeObj"></sa-td>
  67. <sa-td name="经办人" prop="chargePeople"></sa-td>
  68. <sa-td name="充值时间" prop="createTime" width="160"></sa-td>
  69. <sa-td name="复核人员" prop="reviewBy"></sa-td>
  70. <sa-td name="说明" prop="remark"></sa-td>
  71. <el-table-column label="操作" fixed="right" width="140px">
  72. <template slot-scope="s">
  73. <el-button class="c-btn" type="success" v-if="sa.isAuth('tb-charge-record-list-print')"
  74. @click="print(s.row)">打印单据</el-button>
  75. <el-button class="c-btn" type="primary"
  76. v-if="s.row.reviewStatus!=1 && sa.isAuth('tb-charge-record-list-review')"
  77. @click="toReview(s.row)">复审</el-button>
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81. <!-- ------------- 分页 ------------- -->
  82. <sa-item type="page" :curr.sync="p.pageNo" :size.sync="p.pageSize" :total="dataCount" @change="f5()">
  83. </sa-item>
  84. </div>
  85. <el-dialog title="退款明细" :visible.sync="refund.visible" width="900">
  86. <el-table :data="refund.list" ref="refundTable" height="100">
  87. <el-table-column prop="customerName" label="企业名称" width=200>
  88. </el-table-column>
  89. <el-table-column prop="no" label="业务单号" width=160>
  90. </el-table-column>
  91. <sa-td name="类型" type="enum" prop="type" :jv="{1: '账户充值', 2: '余额退款',3:'异常单退款'}"></sa-td>
  92. <el-table-column prop="refundMoney" label="金额(元)">
  93. </el-table-column>
  94. <el-table-column prop="refundTime" width="140" label="退款时间">
  95. </el-table-column>
  96. <el-table-column prop="refundBy" label="退款人">
  97. </el-table-column>
  98. <el-table-column prop="remark" label="退款原因">
  99. </el-table-column>
  100. </el-table>
  101. <span slot="footer" class="dialog-footer">
  102. <el-button @click="refund.visible = false">关 闭</el-button>
  103. </span>
  104. </el-dialog>
  105. </div>
  106. <script>
  107. var app = new Vue({
  108. components: {
  109. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  110. "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue'),
  111. },
  112. el: '.vue-box',
  113. data: {
  114. refund:{
  115. visible:false,
  116. list:[],
  117. },
  118. typeList: [
  119. {
  120. id: 0,
  121. name: '全部'
  122. },
  123. {
  124. id: 1,
  125. name: '账户充值'
  126. }, {
  127. id: 2,
  128. name: '余额退款'
  129. } ,{
  130. id: 3,
  131. name: '异常单退款'
  132. }],
  133. p: { // 查询参数
  134. type: 0,
  135. id: '', // 主键
  136. accountId: '', // 客户账户id
  137. customerId: '', // 客户id
  138. customerName: '', // 客户名称
  139. money: '', // 充值金额
  140. payMoney: '', // 支付金额
  141. chargeChannel: '', // 充值渠道
  142. createTime: '', // 充值时间
  143. chargePeople: '', // 充值人
  144. no: '', // 订单号
  145. beforeBalance: '', // 充值前余额
  146. discountMoney: '', // 优惠金额
  147. totalMoney: '',
  148. payingType: '', // 付款方式
  149. remark: '', // 充值说明
  150. preTopupMoney: '',
  151. reviewBy: '',
  152. reviewTime: '', // 复核时间
  153. status: '', // 有效状态,0-无效已删除、1-有效
  154. reviewStatus: '',
  155. salt: '', // 盐
  156. pageNo: 1, // 当前页
  157. pageSize: 10, // 页大小
  158. sortType: 0 // 排序方式
  159. },
  160. pickerOptions: {
  161. shortcuts: [{
  162. text: '最近一周',
  163. onClick(picker) {
  164. const end = new Date();
  165. const start = new Date();
  166. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  167. picker.$emit('pick', [start, end]);
  168. }
  169. }, {
  170. text: '最近一个月',
  171. onClick(picker) {
  172. const end = new Date();
  173. const start = new Date();
  174. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  175. picker.$emit('pick', [start, end]);
  176. }
  177. }, {
  178. text: '最近三个月',
  179. onClick(picker) {
  180. const end = new Date();
  181. const start = new Date();
  182. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  183. picker.$emit('pick', [start, end]);
  184. }
  185. }]
  186. },
  187. reviewStatusList: [{
  188. id: 2,
  189. name: '全部'
  190. },
  191. {
  192. id: 0,
  193. name: '未复核'
  194. },
  195. {
  196. id: 1,
  197. name: '已复核'
  198. }
  199. ],
  200. dataCount: 0,
  201. dataList: [], // 数据集合
  202. payingTypeObj: {
  203. 1: "对公转账",
  204. 2: "微信支付",
  205. 3: "支付宝支付",
  206. 4: "银联支付"
  207. },
  208. },
  209. methods: {
  210. getDetail(data){
  211. Object.assign(this.refund,{
  212. visible:true,
  213. list:[data]
  214. })
  215. },
  216. // 刷新
  217. f5: function() {
  218. sa.ajax('/TbChargeRecord/getList', sa.removeNull(this.p), function(res) {
  219. this.dataList = res.data; // 数据
  220. this.dataCount = res.dataCount; // 数据总数
  221. sa.f5TableHeight(); // 刷新表格高度
  222. }.bind(this));
  223. },
  224. // 新增
  225. add: function(data) {
  226. sa.showIframe('新增数据', 'tb-charge-record-add.html?id=-1', '1000px', '90%');
  227. },
  228. print(data) {
  229. sa.showIframe('打印充值单据', 'print-receipt.html?id=' + data.id, '1000px', '70%');
  230. },
  231. //复审
  232. toReview(data) {
  233. let ss = data.preTopupMoney ? ',充值金额:' + data.preTopupMoney + '元)' : ")";
  234. sa.confirm('您确认对(' + data.customerName + ss + '复审吗?', function() {
  235. sa.ajax('/TbChargeRecord/review?id=' + data.id, function(res) {
  236. sa.ok('复审成功');
  237. this.f5();
  238. sa.f5TableHeight(); // 刷新表格高度
  239. }.bind(this))
  240. }.bind(this));
  241. },
  242. // 删除
  243. del: function(data) {
  244. let ss = data.preTopupMoney ? ',充值金额:' + data.preTopupMoney + '元)' : ")";
  245. sa.confirm('是否删除(' + data.customerName + ss + ',此操作不可撤销', function() {
  246. sa.ajax('/TbChargeRecord/delete?id=' + data.id, function(res) {
  247. sa.arrayDelete(this.dataList, data);
  248. sa.ok('删除成功');
  249. sa.f5TableHeight(); // 刷新表格高度
  250. }.bind(this))
  251. }.bind(this));
  252. },
  253. decrypt(word, keyStr) {
  254. if (!word) {
  255. return;
  256. }
  257. keyStr = keyStr || 'h!f78tr#L3D$2Z0q';
  258. let base64 = CryptoJS.enc.Base64.parse(word);
  259. let src = CryptoJS.enc.Base64.stringify(base64);
  260. let key = CryptoJS.enc.Utf8.parse(keyStr);
  261. let decrypt = CryptoJS.AES.decrypt(src, key, {
  262. mode: CryptoJS.mode.ECB,
  263. padding: CryptoJS.pad.Pkcs7
  264. });
  265. // let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  266. return CryptoJS.enc.Utf8.stringify(decrypt).toString();
  267. },
  268. },
  269. created: function() {
  270. this.f5();
  271. sa.onInputEnter();
  272. }
  273. })
  274. </script>
  275. </body>
  276. </html>