whitelist.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <style lang="scss" scoped>
  2. .tableBox {
  3. background-color: #fff;
  4. margin: 15px 0px;
  5. padding: 15px 10px;
  6. .tableTop {
  7. position: relative;
  8. padding-bottom: 15px;
  9. border-bottom: 1px solid #e0e0e0;
  10. .selectTime {
  11. margin-right: 20px;
  12. }
  13. .add {
  14. position: absolute;
  15. top: 0;
  16. right: 0;
  17. }
  18. }
  19. }
  20. </style>
  21. <template>
  22. <div class="video-report">
  23. <!-- 报表区域 -->
  24. <div class="tableBox">
  25. <div class="tableTop" style="display:flex; justify-content: flex-end;">
  26. <a-button type="primary" @click="addWhite">添加白名单</a-button>
  27. </div>
  28. <a-table
  29. size="middle"
  30. :columns="columns"
  31. :dataSource="data"
  32. bordered
  33. id="outTable"
  34. :pagination="ipagination"
  35. :loading="loading"
  36. ref="accountTable"
  37. >
  38. <a slot="action" slot-scope="text, records" @click="deleteWhite(records.id)">
  39. 删除
  40. </a>
  41. </a-table>
  42. </div>
  43. <a-modal
  44. v-model="whiteVisible"
  45. title="添加白名单"
  46. @ok="whiteListOk"
  47. @cancel="
  48. whiteVisible = false
  49. projectName = ''
  50. "
  51. :footer="null"
  52. width="50%"
  53. >
  54. <div class="tableTop" style="margin-bottom:10px;width:300px">
  55. <a-input-search
  56. placeholder="请输入项目名称"
  57. v-model="projectName"
  58. enter-button
  59. @search="getWhiteListSearch"
  60. />
  61. </div>
  62. <a-table
  63. size="middle"
  64. :columns="columnsWhite"
  65. :dataSource="dataWhiteList"
  66. bordered
  67. :loading="whiteLoading"
  68. :pagination="ipaginationWhite"
  69. >
  70. <a slot="action" slot-scope="text, records" @click="addWhiteOk(records)">
  71. 添加
  72. </a>
  73. </a-table>
  74. </a-modal>
  75. </div>
  76. </template>
  77. <script>
  78. import moment from 'moment'
  79. import { JeecgListMixin } from '@/mixins/ipagination'
  80. import { getAction, postAction, downFile, downFilePost, deleteAction } from '@/api/manage'
  81. import { mapGetters } from 'vuex'
  82. const columnsFixd = [
  83. {
  84. title: '项目名称',
  85. dataIndex: 'projectName',
  86. align: 'center',
  87. key: 'projectName',
  88. scopedSlots: { customRender: 'projectName' }
  89. },
  90. {
  91. title: '操作人',
  92. align: 'center',
  93. dataIndex: 'userName'
  94. },
  95. {
  96. title: '操作',
  97. align: 'center',
  98. dataIndex: 'action',
  99. scopedSlots: { customRender: 'action' }
  100. }
  101. ]
  102. const columnsWhite = [
  103. {
  104. title: '项目名称',
  105. dataIndex: 'projectName',
  106. align: 'center',
  107. key: 'projectName',
  108. scopedSlots: { customRender: 'projectName' }
  109. },
  110. {
  111. title: '运营负责人',
  112. align: 'center',
  113. dataIndex: 'responsibleId_dictText'
  114. },
  115. {
  116. title: '设计负责人',
  117. align: 'center',
  118. dataIndex: 'designResponsibleId_dictText'
  119. },
  120. {
  121. title: '操作',
  122. align: 'center',
  123. dataIndex: 'action',
  124. scopedSlots: { customRender: 'action' }
  125. }
  126. ]
  127. export default {
  128. data() {
  129. return {
  130. columns: [...columnsFixd], //table的表头
  131. columnsWhite: columnsWhite,
  132. whiteVisible: false,
  133. loading: false,
  134. whiteLoading: false,
  135. addColumns: [],
  136. data: [],
  137. dataWhiteList: [],
  138. ipagination: {
  139. current: 1,
  140. pageSize: 10,
  141. showTotal: (total, range) => {
  142. return range[0] + '-' + range[1] + ' 共' + total + '条'
  143. },
  144. showQuickJumper: true,
  145. // showSizeChanger: true,
  146. // pageSizeOptions: ['10', '30', '50'],
  147. total: 0,
  148. onChange: (current, pageSize) => {
  149. // 切换分页时的回调,
  150. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  151. this.ipagination.current = current
  152. this.ipagination.pageSize = pageSize
  153. this.handleGetTableList()
  154. }
  155. },
  156. ipaginationWhite: {
  157. current: 1,
  158. pageSize: 10,
  159. showTotal: (total, range) => {
  160. return range[0] + '-' + range[1] + ' 共' + total + '条'
  161. },
  162. showQuickJumper: true,
  163. // showSizeChanger: true,
  164. // pageSizeOptions: ['10', '30', '50'],
  165. total: 0,
  166. onChange: (current, pageSize) => {
  167. // 切换分页时的回调,
  168. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  169. this.ipaginationWhite.current = current
  170. this.ipaginationWhite.pageSize = pageSize
  171. this.getWhiteList()
  172. }
  173. },
  174. projectName: '',
  175. whiteListRul: '/monitor/projectMonitorWhiteList/list'
  176. }
  177. },
  178. watch: {},
  179. methods: {
  180. ...mapGetters(['userInfo']),
  181. handleGetTableList() {
  182. this.loading = true
  183. const params = {
  184. pageSize: this.ipagination.pageSize,
  185. pageNo: this.ipagination.current
  186. }
  187. getAction(this.whiteListRul, params).then(res => {
  188. this.loading = false
  189. if (res.success) {
  190. // let result = res.result
  191. // this.data.push({ ...result, key: 1 })
  192. // result.map((item, index) => {
  193. // item.key = index
  194. // })
  195. this.data = res.result.records.map((item, index) => {
  196. return {
  197. ...item,
  198. key: index
  199. }
  200. })
  201. this.ipagination.total = res.result.total
  202. } else {
  203. this.$message.error(res.message)
  204. this.loading = false
  205. }
  206. })
  207. },
  208. addWhiteOk(item) {
  209. postAction('/monitor/projectMonitorWhiteList/add', { projectId: item.id, userId: this.userInfo().id }).then(
  210. res => {
  211. if (res.success) {
  212. this.whiteVisible = false
  213. this.projectName = ''
  214. this.handleGetTableList()
  215. } else {
  216. this.$message.error(res.message)
  217. }
  218. }
  219. )
  220. },
  221. addWhite() {
  222. this.whiteVisible = true
  223. this.ipaginationWhite.current = 1
  224. this.getWhiteList()
  225. },
  226. getWhiteListSearch() {
  227. this.ipaginationWhite.current = 1
  228. this.getWhiteList()
  229. },
  230. getWhiteList() {
  231. const params = {
  232. pageNo: this.ipaginationWhite.current,
  233. pageSize: this.ipaginationWhite.pageSize,
  234. projectName: this.projectName
  235. }
  236. this.whiteLoading = true
  237. getAction('/ctop/project/getProjectList', params).then(res => {
  238. this.whiteLoading = false
  239. if (res.success) {
  240. this.dataWhiteList = res.result.records.map((item, index) => {
  241. return {
  242. ...item,
  243. key: index
  244. }
  245. })
  246. this.ipaginationWhite.total = res.result.total
  247. } else {
  248. this.$message.error(res.message)
  249. }
  250. })
  251. },
  252. whiteListOk() {},
  253. deleteWhite(id) {
  254. deleteAction('/monitor/projectMonitorWhiteList/delete', { id: id }).then(res => {
  255. if (res.success) {
  256. this.handleGetTableList()
  257. } else {
  258. this.$message.error(res.message)
  259. }
  260. })
  261. },
  262. filterOption(input, option) {
  263. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  264. }
  265. },
  266. mounted() {
  267. this.handleGetTableList()
  268. }
  269. }
  270. </script>