AppiumTaskListCan.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <a-card :bordered="false" class="task-list">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="8">
  8. <a-form-item label="任务名称">
  9. <a-input placeholder="请输入任务名称" v-model="queryParam.jobName"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="8">
  13. <a-form-item label="状态">
  14. <!-- <a-input placeholder="请输入状态" v-model="queryParam.status"></a-input> -->
  15. <a-select v-model="queryParam.status" allowClear>
  16. <a-select-option value="1">可用</a-select-option>
  17. <a-select-option value="2">任务中</a-select-option>
  18. <a-select-option value="3">不可用</a-select-option>
  19. </a-select>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :md="6" :sm="8">
  23. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  24. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  25. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  26. </span>
  27. </a-col>
  28. </a-row>
  29. </a-form>
  30. </div>
  31. <!-- table区域-begin -->
  32. <div>
  33. <a-table
  34. ref="table"
  35. size="middle"
  36. bordered
  37. rowKey="id"
  38. :columns="columns"
  39. :dataSource="dataSource"
  40. :pagination="ipagination"
  41. :loading="loading"
  42. @change="handleTableChange"
  43. @expand="expand"
  44. >
  45. <span slot="status" slot-scope="status">{{ status | showStatus }}</span>
  46. <span slot="action" slot-scope="text, record">
  47. <a @click="start(record)">开始执行</a>
  48. </span>
  49. </a-table>
  50. </div>
  51. <!-- table区域-end -->
  52. <a-modal title="执行设备" :visible="visible" @ok="handleOk" @cancel="handleCancel">
  53. <!-- dataList -->
  54. <a-form :form="form">
  55. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="快手账号选择">
  56. <a-select
  57. v-decorator="[
  58. 'accountId', // 给表单赋值或拉取表单时,该input对应的key
  59. { rules: [{ required: true, message: '请选择快手账号选择!' }] }
  60. ]"
  61. >
  62. <a-select-option :value="item.id" v-for="item of dataList" :key="item.id">
  63. {{ item.accountName }}
  64. </a-select-option>
  65. </a-select>
  66. </a-form-item>
  67. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="创意名称">
  68. <a-input
  69. placeholder="请输入创意名称"
  70. v-decorator="[
  71. 'creativeName', // 给表单赋值或拉取表单时,该input对应的key
  72. { rules: [{ required: true, message: '请输入创意名称!' }] }
  73. ]"
  74. />
  75. </a-form-item>
  76. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="发布人名称">
  77. <a-input
  78. placeholder="请输入发布人名称"
  79. v-decorator="[
  80. 'publishName', // 给表单赋值或拉取表单时,该input对应的key
  81. { rules: [{ required: true, message: '请输入发布人名称!' }] }
  82. ]"
  83. />
  84. </a-form-item>
  85. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="执行次数">
  86. <a-input-number
  87. :min="1"
  88. v-decorator="[
  89. 'num', // 给表单赋值或拉取表单时,该input对应的key
  90. { rules: [{ required: true, message: '请选择执行次数!' }] }
  91. ]"
  92. />
  93. </a-form-item>
  94. </a-form>
  95. </a-modal>
  96. <!-- 表单区域 -->
  97. <appiumTask-modal ref="modalForm" @ok="modalFormOk"></appiumTask-modal>
  98. <appiumTask-item-modal ref="modalItemForm" @ok="modalFormOk"></appiumTask-item-modal>
  99. </a-card>
  100. </template>
  101. <script>
  102. import AppiumTaskModal from './modules/AppiumTaskModal'
  103. import AppiumTaskItemModal from './modules/AppiumTaskItemModal'
  104. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  105. import { getAction, postAction } from '@/api/manage'
  106. import { transformTozTreeFormat } from '@/utils/util.js'
  107. export default {
  108. name: 'AppiumTaskList',
  109. mixins: [JeecgListMixin],
  110. components: {
  111. AppiumTaskModal,
  112. AppiumTaskItemModal
  113. },
  114. data() {
  115. return {
  116. description: '任务表管理页面',
  117. // 表头
  118. visible: false,
  119. detail: null,
  120. labelCol: {
  121. xs: { span: 24 },
  122. sm: { span: 6 }
  123. },
  124. wrapperCol: {
  125. xs: { span: 24 },
  126. sm: { span: 18 }
  127. },
  128. columns: [
  129. {
  130. title: '任务名称',
  131. align: 'center',
  132. dataIndex: 'jobName'
  133. },
  134. {
  135. title: '状态',
  136. align: 'center',
  137. dataIndex: 'status',
  138. scopedSlots: { customRender: 'status' }
  139. },
  140. {
  141. title: '操作',
  142. dataIndex: 'action',
  143. align: 'center',
  144. scopedSlots: { customRender: 'action' }
  145. }
  146. ],
  147. url: {
  148. list: '/ctop/appiumJob/list',
  149. delete: '/appium/appiumTask/delete',
  150. deleteBatch: '/appium/appiumTask/deleteBatch',
  151. exportXlsUrl: 'appium/appiumTask/exportXls',
  152. importExcelUrl: 'appium/appiumTask/importExcel'
  153. },
  154. run: '/appium/crawler/startJob',
  155. appiumDevice: '/ctop/bindAccountLogin/list',
  156. dataList: [],
  157. value: null,
  158. form: this.$form.createForm(this),
  159. jobId: ''
  160. }
  161. },
  162. computed: {
  163. importExcelUrl: function() {
  164. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  165. }
  166. },
  167. filters: {
  168. showStatus: function(value) {
  169. var status = {
  170. 1: '可用',
  171. 2: '任务中',
  172. 3: '不可用'
  173. }
  174. return status[value]
  175. }
  176. },
  177. methods: {
  178. lookDetail(item) {
  179. this.$refs.modalItemForm.edit(item)
  180. this.$refs.modalItemForm.title = '编辑'
  181. this.$refs.modalItemForm.disableSubmit = false
  182. },
  183. handleOk() {
  184. var that = this
  185. this.form.validateFieldsAndScroll((err, values) => {
  186. if (err) {
  187. // 这里做逻辑处理
  188. } else {
  189. var params = values
  190. params.jobId = that.jobId
  191. console.log(params)
  192. postAction(this.run, params).then(res => {
  193. console.log(res)
  194. that.visible = false
  195. this.form.resetFields()
  196. })
  197. }
  198. })
  199. },
  200. handleCancel() {
  201. this.value = null
  202. this.detail = null
  203. this.visible = false
  204. },
  205. start(item) {
  206. this.visible = true
  207. this.jobId = item.id
  208. this.value = null
  209. var param = {}
  210. param.pageNo = 1
  211. param.pageSize = 100
  212. param.loginType = 'kuaishou'
  213. getAction(this.appiumDevice, param).then(res => {
  214. console.log(res.result.records)
  215. if (res.code == 0) {
  216. this.dataList = res.result.records
  217. }
  218. })
  219. },
  220. handleChange(value) {
  221. // this.value = value
  222. },
  223. filterOption(input, option) {
  224. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  225. }
  226. },
  227. mounted() {
  228. this.$nextTick(() => {})
  229. }
  230. }
  231. </script>
  232. <style scoped>
  233. @import '~@assets/less/common.less';
  234. </style>
  235. <style>
  236. .task-list .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
  237. margin: 0;
  238. }
  239. .task-list tr.ant-table-expanded-row td > .ant-table-wrapper {
  240. margin: 0;
  241. }
  242. </style>