ソースを参照

广告主授权修改

zhuxinbo 5 年 前
コミット
ed7279c951
1 ファイル変更236 行追加247 行削除
  1. 236 247
      src/views/modules/advertiser/AdvertiserList.vue

+ 236 - 247
src/views/modules/advertiser/AdvertiserList.vue

@@ -1,12 +1,9 @@
 <template>
   <a-card :bordered="false">
-
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form
-        layout="inline">
+      <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>
@@ -20,7 +17,8 @@
                 placeholder="请选择行业"
                 dict="sys_category,name,id"
                 pidField="pid"
-                pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76">
+                pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
+              >
               </j-tree-select>
             </a-form-item>
           </a-col>
@@ -30,7 +28,6 @@
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
             </span>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
@@ -46,12 +43,13 @@
       <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
           <a-menu-item key="1" @click="batchDel">
-            <a-icon type="delete"/>
+            <a-icon type="delete" />
             删除
           </a-menu-item>
         </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作
-          <a-icon type="down"/>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down" />
         </a-button>
       </a-dropdown>
     </div>
@@ -59,8 +57,9 @@
     <!-- 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>项
+        <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>
 
@@ -73,120 +72,120 @@
         :dataSource="dataSource"
         :pagination="ipagination"
         :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
+        :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>
+          <a-divider type="vertical" />
+          <a @click="handleDelete(record)">删除</a>
         </span>
-
       </a-table>
       <a-modal
         title="账号绑定"
         v-model="visible"
         @ok="handleSubmit"
         :width="800"
-        :okButtonProps="{ props: {disabled: false} }"
-        :cancelButtonProps="{ props: {disabled: false} }"
+        :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}}">
+            :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">
+          <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="请输入账户名"/>
+                :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="请输入密码"/>
+                :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}}">
+                :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">
+              <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}}">
+              <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">
+            :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-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">
+              <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}}">
+              <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>
@@ -199,114 +198,110 @@
 </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'},
+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
           }
-        ],
-        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
-
         },
+        {
+          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"]),
-
-
+    }
+  },
+  computed: {
+    importExcelUrl: function() {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+    }
+  },
+  methods: {
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
 
-      handleSubmit() {
-        /*postAction(this.url.getLoginInfo).then((res) => {
+    handleSubmit() {
+      /*postAction(this.url.getLoginInfo).then((res) => {
           if (res.success) {
             alert("绑定成功");
             this.accountName = '';
@@ -316,93 +311,87 @@
             alert("绑定失败");
           }
         });*/
-        let params = {};
-        params.advertiserId = this.record.id;
-        params.advertiser_name = this.record.name;
-        params.userId = this.userInfo().id;
-        params.userName = this.userInfo().username
-        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);
-                }
-              });
+      let params = {}
+      params.advertiserId = this.record.id
+      params.advertiser_name = this.record.name
+      params.userId = this.userInfo().id
+      params.userName = this.userInfo().username
+      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
             }
-            // 授权登录
-            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.bindAccountLoginUrl, params).then(res => {
+              if (res.success) {
+                alert('绑定成功')
+                this.accountName = ''
+                this.password = ''
+                this.loginType = ''
+              } else {
+                alert(res.message)
               }
-              postAction(this.url.bindAuthorizationUrl, params).then((res) => {
-                if (res.success) {
-                  window.open(res.message, '_blank');
-                } 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
+    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(e) {
-      console.log(e);
-      this.visible = false
-    }
-
 
+    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>
+@import '~@assets/less/common.less';
+</style>