|
@@ -0,0 +1,330 @@
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "../account-config.less";
|
|
|
+</style>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="account-config-content">
|
|
|
+ <div class="control-con-header">
|
|
|
+ <a-form
|
|
|
+ class="grid-form"
|
|
|
+ layout="inline"
|
|
|
+ hide-required-mark
|
|
|
+ >
|
|
|
+ <a-row class="grid-form-options">
|
|
|
+ <a-form-item
|
|
|
+ class="grid-form-item"
|
|
|
+ label="账户"
|
|
|
+ :colon="false"
|
|
|
+ >
|
|
|
+ <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false" request="1,3"></acount-search>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="状态">
|
|
|
+ <a-select v-model="searchStatus" style="width: 100px">
|
|
|
+ <a-select-option :value="0">不限</a-select-option>
|
|
|
+ <a-select-option :value="1">开启</a-select-option>
|
|
|
+ <a-select-option :value="2">关闭</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item class="form-handle-btn">
|
|
|
+ <a-button type="primary" html-type="submit" @click="searchClick">查询</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ <a-button type="primary" class="upload-person" @click="addLink">添加</a-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="control-con-table">
|
|
|
+ <a-table
|
|
|
+ ref="table"
|
|
|
+ size="middle"
|
|
|
+ bordered
|
|
|
+ :loading="controlLoading"
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ :pagination="false">
|
|
|
+ <span slot="acountRelax" slot-scope="text, record">
|
|
|
+ <a-switch :checked="record.warningFlag == '1'" @change="handleSwitchChang($event, record)"/>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+
|
|
|
+ <a @click="handleEdit(record)">编辑</a>
|
|
|
+
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ <a-pagination
|
|
|
+ class="pagin-table-class"
|
|
|
+ :total="totalAll"
|
|
|
+ :show-total="total => `共 ${totalAll} 条`"
|
|
|
+ size="small"
|
|
|
+ show-size-changer
|
|
|
+ show-quick-jumper
|
|
|
+ @change="onShowSizeChange"
|
|
|
+ @showSizeChange="onShowSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <a-modal
|
|
|
+ :title="linkTitle"
|
|
|
+ v-if="visible"
|
|
|
+ :visible="visible"
|
|
|
+ :confirm-loading="confirmLoading"
|
|
|
+ :width="850"
|
|
|
+ @ok="handleOk"
|
|
|
+ @cancel="handleCancel">
|
|
|
+ <a-form-model
|
|
|
+ ref="ruleForm"
|
|
|
+ :model="configForm"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-form-model-item label="广告账户">
|
|
|
+ <acount-search style="width: 100%;" :disabled="linkTitle == '修改配置'" :appId.sync="configForm.advertisementacountId" :multiple="false" request="1,3"></acount-search>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="有效触点" prop="linkAddress">
|
|
|
+ <a-input placeholder="请输入链接地址" allow-clear v-model="configForm.linkAddress"/>
|
|
|
+ </a-form-model-item>
|
|
|
+
|
|
|
+ </a-form-model>
|
|
|
+
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
|
|
|
+ import {mapGetters} from 'vuex';
|
|
|
+ import {getAction, postAction,putAction} from '@/api/manage';
|
|
|
+ import {urlAcount} from '../account-config-server.js';
|
|
|
+ export default{
|
|
|
+ name: 'link-configuration',
|
|
|
+ components:{AcountSearch},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ linkTitle:'',
|
|
|
+ visible:false,
|
|
|
+ confirmLoading:false,
|
|
|
+ acountId: undefined,
|
|
|
+ labelCol: {span: 4},
|
|
|
+ wrapperCol: {span: 14},
|
|
|
+ searchStatus:0,
|
|
|
+ controlLoading: true,
|
|
|
+ dataSource: [],
|
|
|
+ configForm:{
|
|
|
+ advertisementacountId:undefined,
|
|
|
+ linkAddress:'',
|
|
|
+ },
|
|
|
+ rules:{
|
|
|
+ linkAddress:[
|
|
|
+ {required: true, message: '请输入', trigger: 'blur'},
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ columns:[
|
|
|
+ {
|
|
|
+ title: '开关',
|
|
|
+ align: 'center',
|
|
|
+ width:80,
|
|
|
+ dataIndex: 'acountRelax',
|
|
|
+ scopedSlots: {customRender: 'acountRelax'}
|
|
|
+ },{
|
|
|
+ title: '项目名称',
|
|
|
+ align: 'center',
|
|
|
+ width:100,
|
|
|
+ dataIndex:'projectName',
|
|
|
+ },{
|
|
|
+ title: '账户名称',
|
|
|
+ align: 'center',
|
|
|
+ width:150,
|
|
|
+ dataIndex:'accountName',
|
|
|
+ },{
|
|
|
+ title: '账户ID',
|
|
|
+ align: 'center',
|
|
|
+ width:150,
|
|
|
+ dataIndex:'accountId',
|
|
|
+ },{
|
|
|
+ title: '第三方点击监测链接',
|
|
|
+ align: 'center',
|
|
|
+ width:350,
|
|
|
+ dataIndex:'actionTrackUrl',
|
|
|
+ },{
|
|
|
+ title: '账户所属人',
|
|
|
+ align: 'center',
|
|
|
+ width:100,
|
|
|
+ dataIndex:'operateUserName',
|
|
|
+ },{
|
|
|
+ title: '状态',
|
|
|
+ align: 'center',
|
|
|
+ width:100,
|
|
|
+ dataIndex:'warningFlag',
|
|
|
+ customRender: function (text) {
|
|
|
+ if (text == 1) {
|
|
|
+ return '开启'
|
|
|
+ } else if (text == 2) {
|
|
|
+ return '关闭'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },{
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ width: '10%',
|
|
|
+ scopedSlots: {customRender: 'action'}
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ totalAll: 0,
|
|
|
+ tablePag: {
|
|
|
+ page: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ createUserId:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.handleInitTable();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapGetters(['userInfo']),
|
|
|
+ // 查询
|
|
|
+ handleInitTable(){
|
|
|
+ let params = {
|
|
|
+ userId: this.userInfo().id,
|
|
|
+ accountId:this.acountId,
|
|
|
+ warningFlag:this.searchStatus == 0 ? '' : this.searchStatus,
|
|
|
+ pageNo: this.tablePag.page,
|
|
|
+ pageSize: this.tablePag.size
|
|
|
+ }
|
|
|
+ getAction(urlAcount + '/bytedance-api/ad/bytedancePlanJobController/selectAccountActionTrackUrlList', params).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+
|
|
|
+ this.controlLoading = false;
|
|
|
+ this.dataSource = res.result.list;
|
|
|
+ this.totalAll = res.result.total;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.controlLoading = false;
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error, 'eeee');
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 新增
|
|
|
+ addLink(){
|
|
|
+ this.configForm.advertisementacountId = undefined;
|
|
|
+ this.configForm.linkAddress = '';
|
|
|
+ this.linkTitle = '添加配置'
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ handleEdit(item){
|
|
|
+ this.linkTitle = '修改配置'
|
|
|
+ this.visible = true;
|
|
|
+ this.createUserId = item.createUserId;
|
|
|
+ this.configForm.advertisementacountId = item.accountId;
|
|
|
+ this.configForm.linkAddress = item.actionTrackUrl;
|
|
|
+ },
|
|
|
+ // 确定
|
|
|
+ handleOk(){
|
|
|
+ if (this.configForm.advertisementacountId) {
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.controlLoading = true;
|
|
|
+ if (this.linkTitle == '添加配置') {
|
|
|
+ let params = {
|
|
|
+ accountId:this.configForm.advertisementacountId,
|
|
|
+ actionTrackUrl:this.configForm.linkAddress,
|
|
|
+ createUserId:this.userInfo().id
|
|
|
+ }
|
|
|
+
|
|
|
+ postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/insertAccountTrackUrl',params).then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.visible = false;
|
|
|
+ this.handleInitTable();
|
|
|
+ this.$message.success('新增成功');
|
|
|
+ }else{
|
|
|
+ this.controlLoading = false;
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error, 'eeee');
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ let params = {
|
|
|
+ accountId:this.configForm.advertisementacountId,
|
|
|
+ actionTrackUrl:this.configForm.linkAddress,
|
|
|
+ createUserId:this.createUserId
|
|
|
+ }
|
|
|
+
|
|
|
+ postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/updAccountActionTrackUrl',params).then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.visible = false;
|
|
|
+ this.handleInitTable();
|
|
|
+ this.$message.success('修改成功');
|
|
|
+ }else{
|
|
|
+ this.controlLoading = false;
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error, 'eeee');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.$message.error('请选择广告账户');
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 开关
|
|
|
+ handleSwitchChang(checked, data){
|
|
|
+ this.controlLoading = true;
|
|
|
+ let params = {
|
|
|
+ accountId:data.accountId,
|
|
|
+ warningFlag:checked?1:2
|
|
|
+ }
|
|
|
+ postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/updAccountActionTrackUrl',params).then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.$message.success(res.message);
|
|
|
+ this.handleInitTable();
|
|
|
+ }else {
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error, 'eeee');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleCancel(){
|
|
|
+ this.configForm.advertisementacountId = undefined;
|
|
|
+ this.configForm.linkAddress = '';
|
|
|
+ this.visible = false;
|
|
|
+ this.controlLoading = false;
|
|
|
+ },
|
|
|
+ searchClick(){
|
|
|
+ this.controlLoading = true;
|
|
|
+ this.tablePag.page = 1;
|
|
|
+ this.handleInitTable();
|
|
|
+
|
|
|
+ },
|
|
|
+ onShowSizeChange(current, pageSize) {
|
|
|
+ this.tablePag = {
|
|
|
+ page: current,
|
|
|
+ size: pageSize
|
|
|
+ };
|
|
|
+ this.controlLoading = true;
|
|
|
+ this.handleInitTable();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|