order.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <div class="page-box">
  3. <div class="search-box">
  4. <!-- <el-input placeholder="任务Id"></el-input>&nbsp;&nbsp;-->
  5. <el-button type="primary" icon="el-icon-plus" @click="AddOrder"
  6. >ADD
  7. </el-button>
  8. </div>
  9. <div>
  10. <vxe-table
  11. show-overflow
  12. row-id="id"
  13. :loading="loading1"
  14. :data="tableData1"
  15. >
  16. <vxe-column field="id" title="订单ID" width="80"></vxe-column>
  17. <vxe-column field="name" title="name" sortable></vxe-column>
  18. <vxe-column field="create_time" title="create Time"></vxe-column>
  19. <vxe-column field="run_time" title="是否立即执行">
  20. <template #default="{ row }">
  21. {{ row.run_time ? "是" : "否" }}
  22. </template>
  23. </vxe-column>
  24. <vxe-column field="source" title="数据来源"></vxe-column>
  25. <vxe-column field="status" title="status">
  26. <template #default="{ row }">
  27. {{ orderStatus[row.status || 0] }}
  28. </template>
  29. </vxe-column>
  30. <vxe-column field="Details" title="操作" width="80">
  31. <template #default="{ row }">
  32. <div style="text-align: center">
  33. <i
  34. @click="showDetail(row)"
  35. class="el-icon-info"
  36. style="cursor: pointer"
  37. ></i>
  38. <i
  39. @click="delOrder(row)"
  40. class="el-icon-delete"
  41. style="cursor: pointer"
  42. ></i>
  43. </div>
  44. </template>
  45. </vxe-column>
  46. </vxe-table>
  47. <vxe-pager
  48. :loading="loading1"
  49. :current-page="tablePage1.currentPage"
  50. :page-size="tablePage1.pageSize"
  51. :total="tablePage1.totalResult"
  52. :layouts="[
  53. 'PrevPage',
  54. 'JumpNumber',
  55. 'NextPage',
  56. 'FullJump',
  57. 'Sizes',
  58. 'Total',
  59. ]"
  60. @page-change="handlePageChange1"
  61. >
  62. </vxe-pager>
  63. </div>
  64. <AddDom ref="AddDoms" :reload="findList1"></AddDom>
  65. </div>
  66. </template>
  67. <script>
  68. import axios from "axios";
  69. import { hotTags, getClicks, getBlogs, getOrder } from "@/api";
  70. import { mapState } from "vuex";
  71. import { orderStatus } from "@/utils";
  72. import AddDom from "./add.vue";
  73. export default {
  74. name: "task",
  75. components: { AddDom },
  76. data() {
  77. return {
  78. loading1: false,
  79. orderStatus,
  80. tableData1: [],
  81. tablePage1: {
  82. currentPage: 1,
  83. pageSize: 10,
  84. totalResult: 0,
  85. },
  86. };
  87. },
  88. computed: {
  89. ...mapState({
  90. userInfo: (state) => state.userInfo,
  91. }),
  92. },
  93. created() {
  94. this.findList1();
  95. },
  96. methods: {
  97. async findList1() {
  98. const token = localStorage.getItem("token");
  99. const res = await getOrder({
  100. token,
  101. page: this.tablePage1.currentPage,
  102. pageSize: this.tablePage1.pageSize,
  103. });
  104. console.log(8989, res.data);
  105. this.loading1 = true;
  106. this.tableData1 = res.data.list;
  107. this.tablePage1.totalResult = res.data.total_count;
  108. this.loading1 = false;
  109. // setTimeout(() => {
  110. // const list = [
  111. // {
  112. // completeTime: "not completed",
  113. // createTime: "not created",
  114. // jobId: 795,
  115. // key: 795,
  116. // requestTime: "2023-04-04 21:09:27",
  117. // deleteTime: "2023-04-04 21:09:27",
  118. // status: "waiting",
  119. // },
  120. // {
  121. // completeTime: "not completed",
  122. // createTime: "not created",
  123. // jobId: 795,
  124. // key: 795,
  125. // requestTime: "2023-04-04 21:09:27",
  126. // deleteTime: "2023-04-04 21:09:27",
  127. // status: "success",
  128. // },
  129. // {
  130. // completeTime: "not completed",
  131. // createTime: "not created",
  132. // jobId: 795,
  133. // key: 795,
  134. // requestTime: "2023-04-04 21:09:27",
  135. // deleteTime: "2023-04-04 21:09:27",
  136. // status: "failed",
  137. // },
  138. // ];
  139. // this.loading1 = false;
  140. // this.tablePage1.totalResult = list.length;
  141. // this.tableData1 = list.slice(
  142. // (this.tablePage1.currentPage - 1) * this.tablePage1.pageSize,
  143. // this.tablePage1.currentPage * this.tablePage1.pageSize
  144. // );
  145. // console.log(this.tableData1);
  146. // }, 300);
  147. },
  148. handlePageChange1({ currentPage, pageSize }) {
  149. this.tablePage1.currentPage = currentPage;
  150. this.tablePage1.pageSize = pageSize;
  151. this.findList1();
  152. },
  153. print(row) {
  154. console.log(row);
  155. },
  156. getTag(row) {
  157. if (row.status === "success") {
  158. return "success";
  159. }
  160. if (row.status === "waiting") {
  161. return "info";
  162. }
  163. return "danger";
  164. },
  165. delOrder(row) {
  166. console.log(row);
  167. this.$alert("删除当前订单将清理所有已生成数据!", "提示", {
  168. confirmButtonText: "确定",
  169. callback: (action) => {
  170. console.log(123, action);
  171. },
  172. });
  173. },
  174. showDetail(row) {
  175. this.$router.push({
  176. path: "/result",
  177. query: {
  178. jobId: row.id,
  179. },
  180. });
  181. },
  182. AddOrder() {
  183. this.$refs.AddDoms.show();
  184. },
  185. },
  186. };
  187. </script>
  188. <style lang="less" scoped>
  189. .page-box {
  190. padding: 0 24px;
  191. margin-top: 67px;
  192. height: calc(100vh - 68px);
  193. .search-box {
  194. display: flex;
  195. margin-top: 24px;
  196. padding-top: 24px;
  197. margin-bottom: 24px;
  198. }
  199. .list-box {
  200. //margin-top: 24px;
  201. // box-sizing: border-box;
  202. // height: 300px;
  203. // width: 100%;
  204. }
  205. }
  206. </style>