index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索 -->
  4. <el-form inline size="mini">
  5. <el-form-item label="订单编号:">
  6. <el-input v-model="form.orderCode" placeholder="请输入订单编号" clearable />
  7. </el-form-item>
  8. <el-form-item label="用户账号:">
  9. <el-input v-model="form.userName" placeholder="请输入用户账户" clearable />
  10. </el-form-item>
  11. <el-form-item label="用户手机号:">
  12. <el-input type="number" v-model.number="form.phone" placeholder="请输入用户手机号" clearable />
  13. </el-form-item>
  14. <!-- 流量订单 -->
  15. <span v-if="form.searchType === '2'">
  16. <el-form-item label="SIM卡号:">
  17. <el-input v-model="form.simCode" placeholder="请输入SIM卡号" clearable />
  18. </el-form-item>
  19. <el-form-item label="生效状态">
  20. <el-select v-model="form.flowStatus" placeholder="请选择生效状态">
  21. <el-option v-for="item in flowOptions" :key="item.value" :value="item.value" :label="item.label" />
  22. </el-select>
  23. </el-form-item>
  24. </span>
  25. <!-- 除充值订单 -->
  26. <span v-if="form.searchType !== '3'">
  27. <el-form-item label="商品ID:">
  28. <el-input v-model="form.goodsid" placeholder="请输入商品ID" />
  29. </el-form-item>
  30. <el-form-item label="商品名称:">
  31. <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
  32. </el-form-item>
  33. </span>
  34. <el-form-item label="操作系统" v-else>
  35. <el-select v-model="form.platform" placeholder="请选择操作系统">
  36. <el-option v-for="item in systemOptions" :key="item.value" :value="item.value" :label="item.label" />
  37. </el-select>
  38. </el-form-item>
  39. <!-- 会员订单 -->
  40. <el-form-item v-if="form.searchType === '4'" label="资源平台:">
  41. <el-select v-model="form.platformId" placeholder="请选择资源平台">
  42. <el-option v-for="item in platformIdOptions" :key="item.value" :value="item.value" :label="item.label" />
  43. </el-select>
  44. </el-form-item>
  45. <el-form-item label="支付状态:">
  46. <el-select v-model="form.status" placeholder="请选择订单状态">
  47. <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label" />
  48. </el-select>
  49. </el-form-item>
  50. <el-form-item label="支付方式:">
  51. <el-select v-model="form.payType" placeholder="请选择支付方式">
  52. <el-option v-for="item in payOptions" :key="item.value" :value="item.value" :label="item.label" />
  53. </el-select>
  54. </el-form-item>
  55. <el-form-item label="下单时间:">
  56. <el-date-picker v-model="form.listDate" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
  57. format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" />
  58. </el-form-item>
  59. <el-form-item>
  60. <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
  61. <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
  62. <el-button type="primary" icon="el-icon-download" @click="handleExport"
  63. v-hasPermi="['order:list:export']">导出</el-button>
  64. <el-button type="primary" @click="getDialog" v-hasPermi="['order:list:export']">查看</el-button>
  65. </el-form-item>
  66. </el-form>
  67. <!-- 列表 -->
  68. <el-table :data="tableData" v-loading="loading">
  69. <el-table-column label="订单编号" prop="orderCode" key="orderCode" align="center" />
  70. <el-table-column v-if="form.searchType === '2'" label="第三方订单编号" key="thirdOrderId" align="center">
  71. <template slot-scope="scope">
  72. <span>{{ scope.row.thirdOrderId | empty(scope.row.thirdOrderId) }}</span>
  73. </template>
  74. </el-table-column>
  75. <el-table-column label="商品ID" prop="goodsid" key="goodsid" align="center" />
  76. <el-table-column label="商品名称" prop="goodsName" key="goodsName" align="center" show-overflow-tooltip />
  77. <el-table-column label="订单金额 / 元" prop="amount" key="amount" align="center" :formatter="amountFormatter" />
  78. <el-table-column v-if="form.searchType === '2'" label="SIM卡号" prop="simCode" key="simCode" align="center">
  79. <template slot-scope="scope">
  80. <span>{{ scope.row.simCode | empty(scope.row.simCode) }}</span>
  81. </template>
  82. </el-table-column>
  83. <el-table-column v-if="form.searchType === '1'" label="购买类型" prop="charging" key="charging" align="center"
  84. :formatter="chargingFormatter" />
  85. <el-table-column v-if="form.searchType === '3'" label="订单来源" prop="platform" key="platform" align="center"
  86. :formatter="platformFormatter" />
  87. <el-table-column v-if="form.searchType === '4'" label="栏目" prop="groupId" key="groupId" align="center"
  88. :formatter="groupFormatter" />
  89. <el-table-column v-if="form.searchType === '4'" label="服务时长" prop="expirationTime" key="expirationTime"
  90. align="center" />
  91. <el-table-column v-if="form.searchType === '4'" label="资源平台" prop="platformId" key="platformId" align="center"
  92. :formatter="platformIdFormatter" />
  93. <el-table-column label="下单时间" prop="createTime" key="createTime" align="center" />
  94. <el-table-column label="支付方式" prop="payType" key="payType" align="center" :formatter="payTypeFormatter" />
  95. <el-table-column label="支付状态" prop="status" key="status" align="center" :formatter="statusFormatter" />
  96. <el-table-column label="支付时间" prop="goodsUpdateTime" key="goodsUpdateTime" align="center" />
  97. <el-table-column label="用户账号" prop="userName" key="userName" align="center" />
  98. <el-table-column label="支付流水号" key="payId" align="center">
  99. <template slot-scope="scope">
  100. <span>{{ scope.row.payId | empty(scope.row.payId) }}</span>
  101. </template>
  102. </el-table-column>
  103. <el-table-column v-if="form.searchType === '2'" label="生效状态" prop="flowStatus" key="flowStatus" align="center"
  104. :formatter="flowFormatter" />
  105. <el-table-column v-if="form.searchType === '2'" label="生效时间" key="effectTime" align="center">
  106. <template slot-scope="scope">
  107. <span>{{ scope.row.effectTime | empty(scope.row.effectTime) }}</span>
  108. </template>
  109. </el-table-column>
  110. </el-table>
  111. <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
  112. @pagination="getList" />
  113. <!-- 弹窗 -->
  114. <el-dialog :visible.sync="dialogVisible" title="导出历史" width="1000px">
  115. <el-table :data="dialogTable" v-loading="dialogLoading">
  116. <el-table-column type="index" label="序号" align="center" />
  117. <el-table-column label="任务ID" prop="msgId" align="center" />
  118. <el-table-column label="任务名称" prop="jobName" align="center" />
  119. <el-table-column label="任务类型" prop="jobType" align="center" />
  120. <el-table-column label="导出时间" prop="updateTime" align="center" />
  121. <el-table-column label="操作人" prop="useName" align="center" />
  122. <el-table-column label="操作" align="center">
  123. <template slot-scope="scope">
  124. <el-button type="text" @click="getDownLoad(scope.row)" :disabled="scope.row.status === 1">下载</el-button>
  125. </template>
  126. </el-table-column>
  127. </el-table>
  128. <pagination v-show="dialogTotal > 0" :total="dialogTotal" :page.sync="dialogForm.pageNum"
  129. :limit.sync="dialogForm.pageSize" @pagination="getDialogList" />
  130. </el-dialog>
  131. </div>
  132. </template>
  133. <script>
  134. import { list, dialogList, download, downLoadHistory } from '@/api/order/list'
  135. import { list as sceneList } from '@/api/operation/scene'
  136. import { payTypeMixin, systemMixin } from '@/mixin/index'
  137. export default {
  138. mixins: [payTypeMixin, systemMixin],
  139. data() {
  140. return {
  141. // 遮罩层
  142. loading: false,
  143. dialogLoading: false,
  144. // 表单
  145. form: {
  146. pageNum: 1,
  147. pageSize: 10,
  148. searchType: this.$route.query.searchType
  149. },
  150. // 列表
  151. tableData: [],
  152. // 总数据
  153. total: 0,
  154. // 弹窗
  155. dialogVisible: false,
  156. // 弹窗表单
  157. dialogForm: {
  158. pageNum: 1,
  159. pageSize: 10,
  160. searchType: this.$route.query.searchType
  161. },
  162. // 弹窗列表
  163. dialogTable: [],
  164. // 历史数据
  165. dialogTotal: 0,
  166. // 支付方式
  167. payOptions: [{
  168. value: 1,
  169. label: '微信'
  170. }, {
  171. value: 2,
  172. label: '支付宝'
  173. }],
  174. // 支付状态
  175. statusOptions: [{
  176. value: 1,
  177. label: '待支付'
  178. }, {
  179. value: 2,
  180. label: '支付成功'
  181. }, {
  182. value: 3,
  183. label: '支付失败'
  184. }, {
  185. value: 4,
  186. label: '取消'
  187. }],
  188. // 栏目
  189. sceneOptions: [],
  190. // 生效状态
  191. flowOptions: [{
  192. value: 0,
  193. label: '已生效'
  194. }, {
  195. value: 1,
  196. label: '待生效'
  197. }, {
  198. value: 2,
  199. label: '已失效'
  200. }],
  201. platformIdOptions: [{
  202. value: 6,
  203. label: 'QQ音乐'
  204. }, {
  205. value: 9,
  206. label: '酷狗音乐'
  207. }, {
  208. value: 10,
  209. label: '爱听音乐'
  210. }],
  211. // 时间搜索不超过1个月
  212. selectDate: '',
  213. pickerOptions: {
  214. onPick: ({ maxDate, minDate }) => {
  215. this.selectDate = minDate.getTime()
  216. if (maxDate) {
  217. this.selectDate = ''
  218. }
  219. },
  220. disabledDate: (time) => {
  221. if (this.selectDate !== '') {
  222. const one = 30 * 24 * 3600 * 1000
  223. const minTime = this.selectDate - one
  224. const maxTime = this.selectDate + one
  225. return time.getTime() < minTime || time.getTime() > maxTime
  226. }
  227. }
  228. }
  229. }
  230. },
  231. mounted() {
  232. this.getScene()
  233. this.getList()
  234. this.payOptions.push(this.form.searchType === '3' ? {
  235. value: 3,
  236. label: '苹果支付'
  237. } : {
  238. value: 4,
  239. label: '猫币支付'
  240. })
  241. },
  242. methods: {
  243. // 列表
  244. getList() {
  245. this.loading = true
  246. list(this.form).then(res => {
  247. if (res.code === 0) {
  248. this.tableData = res.data.records
  249. this.total = res.data.total
  250. this.loading = false
  251. }
  252. })
  253. },
  254. // 搜索
  255. getSearch() {
  256. this.form.pageNum = 1
  257. this.getList()
  258. },
  259. // 重置
  260. getRefresh() {
  261. this.form = {
  262. pageNum: 1,
  263. pageSize: 10,
  264. searchType: this.$route.query.searchType
  265. }
  266. this.getList()
  267. },
  268. // 导出
  269. handleExport() {
  270. download(this.form).then(res => {
  271. if (res.code === 0) {
  272. this.$message.success(`${res.data}`)
  273. }
  274. })
  275. },
  276. // 弹窗
  277. getDialog() {
  278. this.dialogVisible = true
  279. this.getDialogList()
  280. },
  281. // 历史列表
  282. getDialogList() {
  283. this.dialogLoading = true
  284. dialogList(this.dialogForm).then(res => {
  285. if (res.code === 0) {
  286. this.dialogTable = res.data.records
  287. this.dialogTotal = res.data.total
  288. this.dialogLoading = false
  289. }
  290. })
  291. },
  292. // 历史下载
  293. getDownLoad(row) {
  294. this.$confirm(`是否下载${row.jobName}?`, '提示', {
  295. type: 'warning'
  296. }).then(() => {
  297. downLoadHistory(row.msgId).then(res => {
  298. if (res.code === 0) {
  299. this.$message.success('下载成功!')
  300. window.location.href = res.data
  301. this.getDialogList()
  302. }
  303. })
  304. }).catch(() => { })
  305. },
  306. // 栏目
  307. getScene() {
  308. sceneList().then(res => {
  309. if (res.code === 0) {
  310. res.data.map(i => {
  311. this.sceneOptions.push({
  312. value: i.id,
  313. label: i.name
  314. })
  315. })
  316. }
  317. })
  318. },
  319. // 字典翻译
  320. payTypeFormatter(row) {
  321. return this.selectDictLabel(this.payOptions, row.payType)
  322. },
  323. statusFormatter(row) {
  324. return this.selectDictLabel(this.statusOptions, row.status)
  325. },
  326. groupFormatter(row) {
  327. return row.groupId === null ? '-' : this.selectDictLabel(this.sceneOptions, row.groupId)
  328. },
  329. chargingFormatter(row) {
  330. return this.selectDictLabel(this.payTypeOptions, row.charging)
  331. },
  332. platformFormatter(row) {
  333. return this.selectDictLabel(this.systemOptions, row.platform)
  334. },
  335. platformIdFormatter(row) {
  336. return row.platformId === null ? '-' : this.selectDictLabel(this.platformIdOptions, row.platformId)
  337. },
  338. flowFormatter(row) {
  339. return row.flowStatus === null ? '-' : this.selectDictLabel(this.flowOptions, row.flowStatus)
  340. },
  341. amountFormatter(row) {
  342. return row.amount.toFixed(2)
  343. }
  344. },
  345. // 过滤器
  346. filters: {
  347. empty(row) {
  348. return !row ? '-' : row
  349. }
  350. }
  351. }
  352. </script>