123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358 |
- <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="6">
- <a-form-item label="行业">
- <j-tree-select
- v-model="queryParam.industryId"
- ref="treeSelect"
- placeholder="请选择行业"
- dict="sys_category,name,id"
- pidField="pid"
- pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
- >
- </j-tree-select>
- </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>
- <!-- table区域-begin -->
- <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>
- </a-table>
- <a-modal
- title="账号绑定"
- v-model="visible"
- @ok="handleSubmit"
- :width="800"
- :okButtonProps="{ props: { disabled: false } }"
- :cancelButtonProps="{ props: { disabled: false } }"
- >
- <a-form>
- <a-form-item
- label="选择方式"
- :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <a-radio-group buttonStyle="solid" @change="onChageLogin" v-model="mode">
- <a-radio-button value="login">登录</a-radio-button>
- <a-radio-button value="authorization">授权</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item v-if="showLogin">
- <a-form :form="form">
- <!-- @submit="loginForm">-->
- <a-form-item
- label="账号:"
- :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <a-input v-model="accountName" placeholder="请输入账户名" />
- </a-form-item>
- <a-form-item
- label="密码:"
- :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <a-input type="password" v-model="password" placeholder="请输入密码" />
- </a-form-item>
- <a-form-item
- label="媒体:"
- :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <a-radio-group buttonStyle="outline" v-model="loginType">
- <a-radio-button value="kuaishou">快手</a-radio-button>
- <a-radio-button value="bytedance">头条</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="部门分配"
- :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
- v-show="!departDisabled"
- >
- <j-select-depart v-model="departmentId" :multi="false"></j-select-depart>
- </a-form-item>
- <a-form-item
- label="用户选择"
- :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <j-select-user-by-dep v-model="users"></j-select-user-by-dep>
- </a-form-item>
- </a-form>
- </a-form-item>
- <a-form-item
- v-if="showAuthorization"
- :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <a-form :form="form">
- <!--@submit="authorizationForm"-->
- <a-form-item
- label="媒体:"
- :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <a-radio-group buttonStyle="outline" v-model="authorizationType">
- <a-radio-button value="kuaishou">快手</a-radio-button>
- <a-radio-button value="bytedance">头条</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="部门分配"
- :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
- v-show="!departDisabled"
- >
- <j-select-depart v-model="departmentId" :multi="false"></j-select-depart>
- </a-form-item>
- <a-form-item
- label="用户选择"
- :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
- >
- <j-select-user-by-dep v-model="users"></j-select-user-by-dep>
- </a-form-item>
- </a-form>
- </a-form-item>
- </a-form>
- </a-modal>
- </div>
- <!-- table区域-end -->
- <!-- 表单区域 -->
- <advertiser-modal ref="modalForm" @ok="modalFormOk"></advertiser-modal>
- <j-select-user ref="userForm" @ok="modalFormOk"></j-select-user>
- </a-card>
- </template>
- <script>
- import AdvertiserModal from './modules/AdvertiserModal'
- 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'
- export default {
- name: 'AdvertiserList',
- mixins: [JeecgListMixin],
- components: {
- AFormItem,
- AdvertiserModal,
- JTreeSelect,
- JSelectUserByDep,
- JSelectDepart,
- JSelectUser
- },
- 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),
- // 表头
- columns: [
- {
- title: '广告主开户主体名称',
- align: 'center',
- dataIndex: 'name'
- },
- {
- title: '行业',
- align: 'center',
- dataIndex: 'industryId'
- },
- {
- title: '联系人姓名',
- align: 'center',
- dataIndex: 'contact'
- },
- {
- title: '联系人手机',
- align: 'center',
- dataIndex: 'mobile'
- },
- {
- title: '联系人邮箱',
- align: 'center',
- dataIndex: 'email'
- },
- {
- title: '销售',
- align: 'center',
- dataIndex: 'saleName'
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: { customRender: 'action' }
- }
- ],
- 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: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- searchRe() {
- this.queryParam.name = ''
- this.queryParam.industryId = ''
- this.loadData()
- },
- 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>
|