BindAccountLoginList.vue 5.4 KB

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