123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478 |
- <template>
- <a-card :bordered="false">
- <!-- 查询区域 -->
- <div class="table-page-search-wrapper">
- <a-form layout="inline">
- <a-row :gutter="24">
- <a-col :md="6" :sm="8">
- <a-form-item label="广告主开户主体名称">
- <a-input placeholder="请输入广告主开户主体名称" v-model="queryParam.name"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
- <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
- </span>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <!-- 操作按钮区域 -->
- <!-- <div class="table-operator">
- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
- </div>-->
- <a-tabs @change="callbackTwo" v-model="active">
- <a-tab-pane key="advertiser" tab="广告主列表"></a-tab-pane>
- <a-tab-pane key="product" tab="产品列表">
- <a-tag
- color="blue"
- style="height:30px;line-height:30px;font-size:14px;margin-bottom:20px"
- v-if="queryParam.advertiserId"
- >
- {{advertiserName}}
- <a-icon type="close" @click="clear('advertiserId')" />
- </a-tag>
- </a-tab-pane>
- <a-tab-pane key="project" tab="项目列表">
- <a-tag
- color="blue"
- style="height:30px;line-height:30px;font-size:14px;margin-bottom:20px"
- v-if="queryParam.productId"
- >
- {{advertiserName?advertiserName+' / '+productName:productName}}
- <a-icon type="close" @click="clear('productId')" />
- </a-tag>
- </a-tab-pane>
- <a-button type="primary" slot="tabBarExtraContent" @click="addNew">新增</a-button>
- </a-tabs>
- <div>
- <a-table
- ref="table"
- size="middle"
- bordered
- rowKey="id"
- :columns="columns"
- :dataSource="dataSource"
- :pagination="ipagination"
- :loading="loading"
- @change="handleTableChange"
- >
- <span slot="action" slot-scope="text, record">
- <a @click="handleEdit(record)">编辑</a>
- <a-divider type="vertical" />
- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
- <a>删除</a>
- </a-popconfirm>
- </span>
- <span slot="actionProduct" slot-scope="text, record">
- <a @click="handleEditElse(record,'product')">编辑</a>
- <a-divider type="vertical" />
- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
- <a>删除</a>
- </a-popconfirm>
- </span>
- <span slot="actionProject" slot-scope="text, record">
- <a @click="handleEditElse(record,'project')">编辑</a>
- <a-divider type="vertical" />
- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
- <a>删除</a>
- </a-popconfirm>
- </span>
- <span slot="maxBid" slot-scope="text">{{ text / 1000 }}</span>
- <span slot="maxDeepCpaBid" slot-scope="text">{{ text / 1000 }}</span>
- <a slot="name" slot-scope="text,record" @click="toProduct(record,'product')">{{text}}</a>
- <a slot="productName" slot-scope="text,record" @click="toProduct(record,'project')">{{text}}</a>
- </a-table>
- </div>
- <!-- table区域-begin -->
- <!-- table区域-end -->
- <!-- 表单区域 -->
- <advertiser-modal ref="modalForm" @ok="modalFormOk"></advertiser-modal>
- <product-modal ref="modalFormTwo" @ok="modalFormOk"></product-modal>
- <project-modal ref="modalFormThree" @ok="modalFormOk"></project-modal>
- <j-select-user ref="userForm" @ok="modalFormOk"></j-select-user>
- </a-card>
- </template>
- <script>
- import AdvertiserModal from './modules/AdvertiserModal'
- import productModal from './modules/productModal'
- import ProjectModal from './modules/ProjectModal'
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
- import JTreeSelect from '@/components/jeecg/JTreeSelect'
- import AFormItem from 'ant-design-vue/es/form/FormItem'
- import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
- import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
- import JSelectUser from '@/components/jeecgbiz/JSelectUser'
- import { postAction } from '../../../api/manage'
- import { mapActions, mapGetters } from 'vuex'
- const advertiserColumns = [
- {
- title: '广告主开户主体名称',
- align: 'center',
- dataIndex: 'name',
- scopedSlots: { customRender: 'name' },
- },
- {
- title: '联系人姓名',
- align: 'center',
- dataIndex: 'contact',
- },
- {
- title: '联系人手机',
- align: 'center',
- dataIndex: 'mobile',
- },
- {
- title: '联系人邮箱',
- align: 'center',
- dataIndex: 'email',
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: { customRender: 'action' },
- },
- ]
- const productColumns = [
- {
- title: '产品名',
- align: 'center',
- dataIndex: 'productName',
- scopedSlots: { customRender: 'productName' },
- },
- {
- title: '广告主名称',
- align: 'center',
- dataIndex: 'advertiserId_dictText',
- },
- {
- title: '创建人',
- align: 'center',
- dataIndex: 'userId_dictText',
- },
- {
- title: '行业',
- align: 'center',
- dataIndex: 'industryId_dictText',
- },
- {
- title: '状态',
- align: 'center',
- dataIndex: 'productStatus',
- customRender: function (text) {
- if (text == 0) {
- return '启动'
- } else if (text == 1) {
- return '暂停'
- } else if (text == 2) {
- return '删除'
- }
- },
- },
- {
- title: '操作',
- dataIndex: 'actionProduct',
- align: 'center',
- scopedSlots: { customRender: 'actionProduct' },
- },
- ]
- const projectColumns = [
- {
- title: '项目名称',
- align: 'center',
- dataIndex: 'projectName',
- },
- {
- title: '产品名',
- align: 'center',
- dataIndex: 'productId_dictText',
- },
- {
- title: '广告主名称',
- align: 'center',
- dataIndex: 'advertiserId_dictText',
- },
- {
- title: '最高出价',
- align: 'center',
- dataIndex: 'maxBid',
- scopedSlots: {
- customRender: 'maxBid',
- },
- },
- {
- title: '最高转化出价',
- align: 'center',
- dataIndex: 'maxDeepCpaBid',
- scopedSlots: {
- customRender: 'maxDeepCpaBid',
- },
- },
- {
- title: '供应商',
- align: 'center',
- dataIndex: 'supplierCode_dictText',
- },
- {
- title: '销售',
- align: 'center',
- dataIndex: 'saleId_dictText',
- },
- {
- title: '运营负责人',
- align: 'center',
- dataIndex: 'responsibleId_dictText',
- },
- {
- title: '设计负责人',
- align: 'center',
- dataIndex: 'designResponsibleId_dictText',
- },
- {
- title: '操作',
- dataIndex: 'actionProject',
- align: 'center',
- scopedSlots: {
- customRender: 'actionProject',
- },
- },
- ]
- export default {
- name: 'AdvertiserList',
- mixins: [JeecgListMixin],
- components: {
- AFormItem,
- AdvertiserModal,
- JTreeSelect,
- JSelectUserByDep,
- JSelectDepart,
- JSelectUser,
- productModal,
- ProjectModal,
- },
- data() {
- return {
- departDisabled: false, //是否是我的部门调用该页面
- users: this.userInfo().realname, //用户名称
- departmentId: this.userInfo().departId, //部门id
- description: '广告主信息表管理页面',
- visible: false,
- accountName: '',
- password: '',
- mode: 'login',
- showLogin: true,
- showAuthorization: false,
- authorizationType: 'kuaishou',
- loginType: 'kuaishou',
- form: this.$form.createForm(this),
- active: 'advertiser',
- advertiserName: '',
- advertiserId: '',
- productName: '',
- examinelList: [
- {
- value: '0',
- tab: '广告主列表',
- },
- {
- value: '1',
- tab: '产品列表',
- },
- {
- value: '2',
- tab: '项目列表',
- },
- ],
- // 表头
- columns: advertiserColumns,
- url: {
- list: '/ctop/advertiser/list',
- delete: '/ctop/advertiser/delete',
- deleteBatch: '/ctop/advertiser/deleteBatch',
- exportXlsUrl: 'ctop/advertiser/exportXls',
- importExcelUrl: 'ctop/advertiser/importExcel',
- bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
- bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
- getLoginInfo: '/ctop/bindAccount/getLoginInfo',
- userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
- userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
- },
- }
- },
- computed: {
- importExcelUrl: function () {
- return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
- },
- },
- created() {
- // this.queryParam.userId = this.userInfo().id
- },
- methods: {
- handleEditElse(item, type) {
- if (type == 'product') {
- this.$refs.modalFormTwo.edit(item)
- this.$refs.modalFormTwo.title = '编辑'
- this.$refs.modalFormTwo.disableSubmit = false
- } else if (type == 'project') {
- this.$refs.modalFormThree.edit(item)
- this.$refs.modalFormThree.title = '编辑'
- this.$refs.modalFormThree.disableSubmit = false
- }
- },
- clear(type) {
- this.queryParam.advertiserId = null
- this.advertiserName = ''
- this.queryParam.productId = null
- this.productName = ''
- this.loadData(1)
- },
- addNew() {
- if (this.active == 'advertiser') {
- this.$refs.modalForm.add()
- this.$refs.modalForm.title = '新增'
- this.$refs.modalForm.disableSubmit = false
- } else if (this.active == 'product') {
- if (this.queryParam.advertiserId) {
- this.$refs.modalFormTwo.add({ advertiserId: this.queryParam.advertiserId })
- } else {
- this.$refs.modalFormTwo.add()
- }
- this.$refs.modalFormTwo.title = '新增'
- this.$refs.modalFormTwo.disableSubmit = false
- } else if (this.active == 'project') {
- this.$refs.modalFormThree.add({
- advertiserId: this.queryParam.advertiserId
- ? this.queryParam.advertiserId
- : this.advertiserId
- ? this.advertiserId
- : null,
- productId: this.queryParam.productId,
- })
- this.$refs.modalFormThree.title = '新增'
- this.$refs.modalFormThree.disableSubmit = false
- }
- },
- toProduct(item, key) {
- if (key == 'product') {
- this.queryParam.advertiserId = item.id
- this.advertiserName = item.name
- this.callbackTwo('product')
- } else if (key == 'project') {
- this.queryParam.productId = item.id
- this.productName = item.productName
- this.advertiserId = item.advertiserId
- this.callbackTwo('project')
- }
- },
- callbackTwo(key) {
- this.active = key
- if (key == 'advertiser') {
- this.columns = advertiserColumns
- this.url.list = '/ctop/advertiser/list'
- this.url.delete = '/ctop/advertiser/delete'
- } else if (key == 'product') {
- this.columns = productColumns
- this.url.list = '/ctop/product/list'
- this.url.delete = '/ctop/product/delete'
- } else if (key == 'project') {
- this.columns = projectColumns
- this.url.list = '/ctop/project/list'
- this.url.delete = '/ctop/project/delete'
- }
- this.loadData(1)
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- searchRe() {
- this.queryParam.name = null
- this.queryParam.advertiserId = null
- this.queryParam.productId = null
- this.callbackTwo('advertiser')
- },
- handleSubmit() {
- let params = {}
- params.advertiserId = this.record.id
- params.advertiser_name = this.record.name
- params.userId = this.userInfo().id
- params.userName = this.userInfo().realname
- params.projectId = this.record.projectId
- params.projectName = this.record.projectName
- // 触发表单验证
- this.form.validateFields((err) => {
- if (!err) {
- if (this.mode == 'login') {
- params.accountName = this.accountName
- params.password = this.password
- params.loginType = this.loginType
- if (this.loginType == 'kuaishou') {
- params.mediaId = 2
- } else if (this.loginType == 'bytedance') {
- params.mediaId = 1
- }
- postAction(this.url.bindAccountLoginUrl, params).then((res) => {
- if (res.success) {
- alert('绑定成功')
- this.accountName = ''
- this.password = ''
- this.loginType = ''
- } else {
- alert(res.message)
- }
- })
- }
- // 授权登录
- if (this.mode == 'authorization') {
- params.authorizationType = this.authorizationType
- if (this.authorizationType == 'kuaishou') {
- params.mediaId = 2
- } else if (this.authorizationType == 'bytedance') {
- params.mediaId = 1
- }
- postAction(this.url.bindAuthorizationUrl, params).then((res) => {
- if (res.success) {
- window.open(res.message, '_blank')
- } else {
- alert('绑定失败')
- }
- })
- }
- }
- })
- },
- onChageLogin() {
- console.log(this.mode)
- if (this.mode == 'login') {
- this.showLogin = true
- this.showAuthorization = false
- } else {
- this.showLogin = false
- this.showAuthorization = true
- }
- },
- showModal(record) {
- this.record = record
- this.visible = true
- },
- handleCancel() {
- this.close()
- },
- },
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
|