AppiumDeviceList.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <template>
  2. <a-card :bordered="false">
  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="IP">
  9. <a-input placeholder="请输入IP" v-model="queryParam.ip"></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.port"></a-input>
  15. </a-form-item>
  16. </a-col>
  17. <template>
  18. <a-col :md="6" :sm="8">
  19. <a-form-item label="状态">
  20. <!-- <a-input placeholder="请输入状态" v-model="queryParam.status"></a-input> -->
  21. <a-select v-model="queryParam.status" allowClear>
  22. <a-select-option value="1">可用</a-select-option>
  23. <a-select-option value="2">任务中</a-select-option>
  24. <a-select-option value="3">不可用</a-select-option>
  25. </a-select>
  26. </a-form-item>
  27. </a-col>
  28. </template>
  29. <a-col :md="6" :sm="8">
  30. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  31. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  32. <a-button
  33. type="primary"
  34. @click="searchReset"
  35. icon="reload"
  36. style="margin-left: 8px"
  37. >重置</a-button>
  38. </span>
  39. </a-col>
  40. </a-row>
  41. </a-form>
  42. </div>
  43. <!-- 操作按钮区域 -->
  44. <!-- <div class="table-operator">
  45. <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
  46. <a-button type="primary" icon="download" @click="handleExportXls('手机设备表')">导出</a-button>
  47. <a-upload
  48. name="file"
  49. :showUploadList="false"
  50. :multiple="false"
  51. :headers="tokenHeader"
  52. :action="importExcelUrl"
  53. @change="handleImportExcel"
  54. >
  55. <a-button type="primary" icon="import">导入</a-button>
  56. </a-upload>
  57. <a-dropdown v-if="selectedRowKeys.length > 0">
  58. <a-menu slot="overlay">
  59. <a-menu-item key="1" @click="batchDel">
  60. <a-icon type="delete" />删除
  61. </a-menu-item>
  62. </a-menu>
  63. <a-button style="margin-left: 8px">
  64. 批量操作
  65. <a-icon type="down" />
  66. </a-button>
  67. </a-dropdown>
  68. </div> -->
  69. <!-- table区域-begin -->
  70. <div>
  71. <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
  72. <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
  73. <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
  74. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  75. </div> -->
  76. <a-table
  77. ref="table"
  78. size="middle"
  79. bordered
  80. rowKey="id"
  81. :columns="columns"
  82. :dataSource="dataSource"
  83. :pagination="ipagination"
  84. :loading="loading"
  85. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  86. @change="handleTableChange"
  87. >
  88. <span slot="status" slot-scope="status">{{status|showStatus}}</span>
  89. <span slot="action" slot-scope="text, record">
  90. <a @click="handleEdit(record)">编辑</a>
  91. <a-divider type="vertical" />
  92. <a-dropdown>
  93. <a class="ant-dropdown-link">
  94. 更多
  95. <a-icon type="down" />
  96. </a>
  97. <a-menu slot="overlay">
  98. <a-menu-item>
  99. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  100. <a>删除</a>
  101. </a-popconfirm>
  102. </a-menu-item>
  103. </a-menu>
  104. </a-dropdown>
  105. </span>
  106. </a-table>
  107. </div>
  108. <!-- table区域-end -->
  109. <!-- 表单区域 -->
  110. <appiumDevice-modal ref="modalForm" @ok="modalFormOk"></appiumDevice-modal>
  111. </a-card>
  112. </template>
  113. <script>
  114. import AppiumDeviceModal from './modules/AppiumDeviceModal'
  115. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  116. export default {
  117. name: 'AppiumDeviceList',
  118. mixins: [JeecgListMixin],
  119. components: {
  120. AppiumDeviceModal
  121. },
  122. data() {
  123. return {
  124. description: '手机设备表管理页面',
  125. // 表头
  126. columns: [
  127. {
  128. title: '#',
  129. dataIndex: '',
  130. key: 'rowIndex',
  131. width: 60,
  132. align: 'center',
  133. customRender: function(t, r, index) {
  134. return parseInt(index) + 1
  135. }
  136. },
  137. {
  138. title: 'IP',
  139. align: 'center',
  140. dataIndex: 'ip'
  141. },
  142. {
  143. title: '端口号',
  144. align: 'center',
  145. dataIndex: 'port'
  146. },
  147. {
  148. title: '状态',
  149. align: 'center',
  150. dataIndex: 'status',
  151. scopedSlots: { customRender: 'status' }
  152. },
  153. {
  154. title: '操作',
  155. dataIndex: 'action',
  156. align: 'center',
  157. scopedSlots: { customRender: 'action' }
  158. }
  159. ],
  160. url: {
  161. list: '/appium/appiumDevice/list',
  162. delete: '/appium/appiumDevice/delete',
  163. deleteBatch: '/appium/appiumDevice/deleteBatch',
  164. exportXlsUrl: 'appium/appiumDevice/exportXls',
  165. importExcelUrl: 'appium/appiumDevice/importExcel'
  166. }
  167. }
  168. },
  169. computed: {
  170. importExcelUrl: function() {
  171. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  172. }
  173. },
  174. filters: {
  175. showStatus: function(value) {
  176. var status = {
  177. 1: '可用',
  178. 2: '任务中',
  179. 3: '不可用'
  180. }
  181. return status[value]
  182. }
  183. },
  184. methods: {}
  185. }
  186. </script>
  187. <style scoped>
  188. @import '~@assets/less/common.less';
  189. </style>