123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276 |
- <style lang="scss" scoped>
- .tableBox {
- background-color: #fff;
- margin: 15px 0px;
- padding: 15px 10px;
- .tableTop {
- position: relative;
- padding-bottom: 15px;
- border-bottom: 1px solid #e0e0e0;
- .selectTime {
- margin-right: 20px;
- }
- .add {
- position: absolute;
- top: 0;
- right: 0;
- }
- }
- }
- </style>
- <template>
- <div class="video-report">
- <!-- 报表区域 -->
- <div class="tableBox">
- <div class="tableTop" style="display:flex; justify-content: flex-end;">
- <a-button type="primary" @click="addWhite">添加白名单</a-button>
- </div>
- <a-table
- size="middle"
- :columns="columns"
- :dataSource="data"
- bordered
- id="outTable"
- :pagination="ipagination"
- :loading="loading"
- ref="accountTable"
- >
- <a slot="action" slot-scope="text, records" @click="deleteWhite(records.id)">
- 删除
- </a>
- </a-table>
- </div>
- <a-modal
- v-model="whiteVisible"
- title="添加白名单"
- @ok="whiteListOk"
- @cancel="
- whiteVisible = false
- projectName = ''
- "
- :footer="null"
- width="50%"
- >
- <div class="tableTop" style="margin-bottom:10px;width:300px">
- <a-input-search
- placeholder="请输入项目名称"
- v-model="projectName"
- enter-button
- @search="getWhiteListSearch"
- />
- </div>
- <a-table
- size="middle"
- :columns="columnsWhite"
- :dataSource="dataWhiteList"
- bordered
- :loading="whiteLoading"
- :pagination="ipaginationWhite"
- >
- <a slot="action" slot-scope="text, records" @click="addWhiteOk(records)">
- 添加
- </a>
- </a-table>
- </a-modal>
- </div>
- </template>
- <script>
- import moment from 'moment'
- import { JeecgListMixin } from '@/mixins/ipagination'
- import { getAction, postAction, downFile, downFilePost, deleteAction } from '@/api/manage'
- import { mapGetters } from 'vuex'
- const columnsFixd = [
- {
- title: '项目名称',
- dataIndex: 'projectName',
- align: 'center',
- key: 'projectName',
- scopedSlots: { customRender: 'projectName' }
- },
- {
- title: '操作人',
- align: 'center',
- dataIndex: 'userName'
- },
- {
- title: '操作',
- align: 'center',
- dataIndex: 'action',
- scopedSlots: { customRender: 'action' }
- }
- ]
- const columnsWhite = [
- {
- title: '项目名称',
- dataIndex: 'projectName',
- align: 'center',
- key: 'projectName',
- scopedSlots: { customRender: 'projectName' }
- },
- {
- title: '运营负责人',
- align: 'center',
- dataIndex: 'responsibleId_dictText'
- },
- {
- title: '设计负责人',
- align: 'center',
- dataIndex: 'designResponsibleId_dictText'
- },
- {
- title: '操作',
- align: 'center',
- dataIndex: 'action',
- scopedSlots: { customRender: 'action' }
- }
- ]
- export default {
- data() {
- return {
- columns: [...columnsFixd], //table的表头
- columnsWhite: columnsWhite,
- whiteVisible: false,
- loading: false,
- whiteLoading: false,
- addColumns: [],
- data: [],
- dataWhiteList: [],
- ipagination: {
- current: 1,
- pageSize: 10,
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- // pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- this.handleGetTableList()
- }
- },
- ipaginationWhite: {
- current: 1,
- pageSize: 10,
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- // pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipaginationWhite.current = current
- this.ipaginationWhite.pageSize = pageSize
- this.getWhiteList()
- }
- },
- projectName: '',
- whiteListRul: '/monitor/projectMonitorWhiteList/list'
- }
- },
- watch: {},
- methods: {
- ...mapGetters(['userInfo']),
- handleGetTableList() {
- this.loading = true
- const params = {
- pageSize: this.ipagination.pageSize,
- pageNo: this.ipagination.current
- }
- getAction(this.whiteListRul, params).then(res => {
- this.loading = false
- if (res.success) {
- // let result = res.result
- // this.data.push({ ...result, key: 1 })
- // result.map((item, index) => {
- // item.key = index
- // })
- this.data = res.result.records.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- this.ipagination.total = res.result.total
- } else {
- this.$message.error(res.message)
- this.loading = false
- }
- })
- },
- addWhiteOk(item) {
- postAction('/monitor/projectMonitorWhiteList/add', { projectId: item.id, userId: this.userInfo().id }).then(
- res => {
- if (res.success) {
- this.whiteVisible = false
- this.projectName = ''
- this.handleGetTableList()
- } else {
- this.$message.error(res.message)
- }
- }
- )
- },
- addWhite() {
- this.whiteVisible = true
- this.ipaginationWhite.current = 1
- this.getWhiteList()
- },
- getWhiteListSearch() {
- this.ipaginationWhite.current = 1
- this.getWhiteList()
- },
- getWhiteList() {
- const params = {
- pageNo: this.ipaginationWhite.current,
- pageSize: this.ipaginationWhite.pageSize,
- projectName: this.projectName
- }
- this.whiteLoading = true
- getAction('/ctop/project/getProjectList', params).then(res => {
- this.whiteLoading = false
- if (res.success) {
- this.dataWhiteList = res.result.records.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- this.ipaginationWhite.total = res.result.total
- } else {
- this.$message.error(res.message)
- }
- })
- },
- whiteListOk() {},
- deleteWhite(id) {
- deleteAction('/monitor/projectMonitorWhiteList/delete', { id: id }).then(res => {
- if (res.success) {
- this.handleGetTableList()
- } else {
- this.$message.error(res.message)
- }
- })
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- }
- },
- mounted() {
- this.handleGetTableList()
- }
- }
- </script>
|