123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405 |
- <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="searchReset" 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>
- <!-- <a-button type="primary" icon="download" @click="handleExportXls('广告主信息表')">导出</a-button>-->
- <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
- <!-- @change="handleImportExcel">-->
- <!-- <a-button type="primary" icon="import">导入</a-button>-->
- <!-- </a-upload>-->
- <a-dropdown v-if="selectedRowKeys.length > 0">
- <a-menu slot="overlay">
- <a-menu-item key="1" @click="batchDel">
- <a-icon type="delete"/>
- 删除
- </a-menu-item>
- </a-menu>
- <a-button style="margin-left: 8px"> 批量操作
- <a-icon type="down"/>
- </a-button>
- </a-dropdown>
- </div>
- <!-- table区域-begin -->
- <div>
- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
- selectedRowKeys.length }}</a>项
- <a style="margin-left: 24px" @click="onClearSelected">清空</a>
- </div>
- <a-table
- ref="table"
- size="middle"
- bordered
- rowKey="id"
- :columns="columns"
- :dataSource="dataSource"
- :pagination="ipagination"
- :loading="loading"
- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
- @change="handleTableChange">
- <span slot="action" slot-scope="text, record">
- <a @click="handleEdit(record)">编辑</a>
- <a-divider type="vertical"/>
- <a-dropdown>
- <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
- <a-menu slot="overlay">
- <a-menu-item>
- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
- <a>删除</a>
- </a-popconfirm>
- </a-menu-item>
- <a-menu-item>
- <a @click="showModal(record)">账号绑定</a>
- </a-menu-item>
- </a-menu>
- </a-dropdown>
- </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: '#',
- dataIndex: '',
- key: 'rowIndex',
- width: 60,
- align: 'center',
- customRender: function (t, r, index) {
- return parseInt(index) + 1;
- }
- },
- {
- 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: '操作',
- 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}`;
- }
- },
- methods: {
- ...mapGetters(["nickname", "avatar", "userInfo"]),
- handleSubmit() {
- /*postAction(this.url.getLoginInfo).then((res) => {
- if (res.success) {
- alert("绑定成功");
- this.accountName = '';
- this.password = '';
- this.loginType = '';
- } else {
- alert("绑定失败");
- }
- });*/
- let params = {};
- params.advertiserId = this.record.id;
- params.advertiser_name = this.record.name;
- params.userId = this.userInfo().id;
- params.realName = this.userInfo().realname;
- params.departmentId = this.departmentId;
- params.distributionName = this.users;
- // 触发表单验证
- 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("绑定失败");
- }
- });
- }
- // 授权登录
- 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()
- },
- },
- handleOk(e) {
- console.log(e);
- this.visible = false
- },
- handleCancel(e) {
- console.log(e);
- this.visible = false
- }
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less'
- </style>
|