123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720 |
- <style>
- .my-project .ant-tabs-nav-scroll {
- display: flex;
- justify-content: center;
- }
- .close-account-my-project .ant-modal-footer .ant-btn-primary {
- display: none;
- }
- .only .ant-badge-count {
- right: -16px;
- }
- </style>
- <template>
- <a-card :bordered="false" :tabList="tabListNoTitle" :activeTabKey="noTitleKey"
- @tabChange="key => onTabChange(key, 'noTitleKey')" class="my-project">
- <!-- 查询区域 -->
- <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="keyWord"></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="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
- </span>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <!-- table区域-begin -->
- <div>
- <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
- :pagination="ipagination" :loading="loading">
- <span slot="maxBid" slot-scope="maxBid">{{ maxBid / 1000 }}</span>
- <span slot="mediaId" slot-scope="mediaId">{{ mediaId == 1 ? '头条' :mediaId == 2? '快手':mediaId == 3?'头条内广':'快手内广' }}</span>
- <span slot="action" slot-scope="text, record">
- <a @click="handleEdit(record)">{{ noTitleKey == 'myProject' ? '查看成员' : '账号绑定' }}</a>
- <a-divider type="vertical" />
- <a @click="addParams(record)">{{ noTitleKey == 'myProject' ? '新增人员' : '查看账户' }}</a>
- <a-divider type="vertical" v-if="noTitleKey == 'myProject'" />
- <a-badge :count="record.needExamine" class="only">
- <a @click="projectLook(record)" v-if="noTitleKey == 'myProject'"
- :disabled="record.needExamine == 0">待办事项</a>
- </a-badge>
- </span>
- </a-table>
- </div>
- <!-- table区域-end -->
- <!-- 查看项目成员 -->
- <a-modal :title="title" v-model="visible" @ok="handleOk" width="800px" class="close-account-my-project">
- <div style="display:flex;line-height:50px;flex-wrap: wrap;">
- <div style="width:25%;text-align:center;" v-for="(item, index) of memberList" :key="index">
- <a-tag color="#2db7f5" @close="log(item.id)" closable>{{ item.userName }}
- <a-divider type="vertical" />
- {{ item.roleCode | roleCode }}</a-tag>
- </div>
- </div>
- </a-modal>
- <!-- 添加项目成员 -->
- <a-modal title="添加项目成员" v-model="visibleAdd" @ok="handleOkAdd" :confirmLoading="confirmLoading">
- <!-- /sys/user/getAllUserList -->
- <a-select v-model="appId" showSearch allowClear mode="multiple" placeholder="请选择成员" optionFilterProp="children"
- style="width: 100%" @focus="handleFocus" @blur="handleBlur" @change="handleChange" :filterOption="true"
- @search="search" :maxTagCount="1">
- <a-select-option v-for="appModel in options" :key="appModel.userId + new Date().getTime()"
- :value="appModel.userId">
- {{ appModel.realName }}
-   {{ appModel.roleName }}</a-select-option>
- </a-select>
- </a-modal>
- <!-- 账号绑定 -->
- <a-modal title="账号绑定" v-model="visibleBind" @ok="handleSubmit" :width="800"
- :okButtonProps="{ props: { disabled: false } }" :cancelButtonProps="{ props: { disabled: false } }">
- <a-form :form="form">
- <a-form-item label="选择方式" :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }">
- <a-radio-group buttonStyle="solid" v-model="mode" @change="onChageLogin">
- <a-radio-button value="authorization">授权</a-radio-button>
- <a-radio-button value="login">登录</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <div v-if="mode=='authorization'">
- <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="是否本代理商开户:" :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }" v-if="loginType == 'kuaishou'">
- <a-radio-group buttonStyle="outline" v-model="agentType">
- <a-radio-button value="0">否</a-radio-button>
- <a-radio-button value="1">是</a-radio-button>
- </a-radio-group>
- </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="systemType">
- <a-radio-button value="不限">不限</a-radio-button>
- <a-radio-button value="ios">ios</a-radio-button>
- <a-radio-button value="android">android</a-radio-button>
- <a-radio-button value="4">其他</a-radio-button>
- </a-radio-group>
- <a-input v-model="systemTypeName" v-if="systemType == '4'" placeholder="请输入系统类型" />
- </a-form-item>
- <a-form-item label="预警金额" :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }">
- <!-- <a-input v-decorator="['warningAmount', { rules: [{ required: true, message: '请输入预警金额' }] }]" /> -->
- <a-input-number style="width:50%" v-decorator="[
- 'warningAmount',
- { rules: [{ required: true, message: '请输入预警金额' }], initialValue: 5000 }
- ]" />
- </a-form-item>
- <a-form-item label="预警比例" :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }">
- <a-input-number :step="0.1" style="width:50%" v-decorator="[
- 'warningProportion',
- { rules: [{ required: true, message: '请输入预警比例' }], initialValue: 1.5 }
- ]" />
- </a-form-item>
- </div>
- <div v-else>
- <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="pangolin">穿山甲</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item label="账号:" :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
- :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }" v-show="mode == 'login'">
- <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 } }" v-show="mode == 'login'">
- <a-input type="password" v-model="password" placeholder="请输入密码" />
- </a-form-item>
- </div>
- </a-form>
- </a-modal>
- <!-- 查看项目下的账号 -->
- <a-modal :title="titleAccount" v-model="visibleAccount" @ok="handleOk" width="800px"
- class="close-account-my-project">
- <a-table ref="table" size="middle" bordered rowKey="id" :columns="columnsAccount" :dataSource="dataAccount"
- :pagination="ipaginationAccount" :loading="loadingAccount">
- <span slot="createTime" slot-scope="createTime">{{ createTime | getDate }}</span>
- </a-table>
- </a-modal>
- <!-- 待办事件审核 -->
- <a-modal title="待办事件审核" v-model="projectVisible" @ok="handleOkProject" width="800px"
- class="close-account-my-project" :footer="null">
- <a-table ref="table" size="middle" bordered rowKey="id" :columns="columnsProject" :dataSource="dataProject"
- :pagination="ipaginationAccount" :loading="loadingAccount">
- <span slot="action" slot-scope="text, record">
- <a @click="projectEdit(record, 1)">通过</a>
- <a-divider type="vertical" />
- <a @click="projectEdit(record, 2)">拒绝</a>
- </span>
- </a-table>
- </a-modal>
- </a-card>
- </template>
- <script>
- import ProjectMemberModal from './modules/ProjectMemberModal'
- import {
- httpAction,
- getAction,
- deleteAction,
- putAction
- } from '@/api/manage'
- import {
- mapGetters
- } from 'vuex'
- import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
- import {
- JeecgListMixin
- } from '@/mixins/ipagination'
- export default {
- name: 'ProjectMemberList',
- components: {
- ProjectMemberModal,
- JSelectUserByDep
- },
- mixins: [JeecgListMixin],
- data() {
- return {
- title: '',
- titleAccount: '',
- description: '我的项目',
- // 表头
- visible: false,
- keyWord: '',
- mode: 'authorization',
- mediaId: '2',
- accountName: '',
- password: '',
- loginType: 'kuaishou',
- agentType: '1',
- form: this.$form.createForm(this),
- record: '',
- systemType: '不限',
- systemTypeName: '',
- queryParam: {
- projectId: '',
- userId: ''
- },
- projectId: '',
- user: '',
- tabListNoTitle: [{
- key: 'myProject',
- tab: '我管理的'
- },
- {
- key: 'participation',
- tab: '我参与的'
- }
- ],
- noTitleKey: 'participation',
- columns: [{
- title: '项目名称',
- align: 'center',
- dataIndex: 'projectName'
- },
- {
- title: '广告主名称',
- align: 'center',
- dataIndex: 'advertiserName'
- },
- {
- title: '运营负责人',
- align: 'center',
- dataIndex: 'responsibleName'
- },
- {
- title: '设计负责人',
- align: 'center',
- dataIndex: 'designResponsibleName'
- },
- {
- title: '媒体类型',
- align: 'center',
- dataIndex: 'mediaId',
- scopedSlots: {
- customRender: 'mediaId'
- }
- },
- {
- title: '最高出价',
- align: 'center',
- dataIndex: 'maxBid',
- scopedSlots: {
- customRender: 'maxBid'
- }
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: {
- customRender: 'action'
- }
- }
- ],
- columnsAccount: [{
- title: '账户id',
- align: 'center',
- dataIndex: 'accountId'
- },
- {
- title: '账户名称',
- align: 'center',
- dataIndex: 'authName'
- },
- {
- title: '所属人',
- align: 'center',
- dataIndex: 'userName'
- },
- {
- title: '授权时间',
- align: 'center',
- dataIndex: 'createTime',
- scopedSlots: {
- customRender: 'createTime'
- }
- }
- ],
- ipaginationAccount: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- total: 0,
- onChange: current => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipaginationAccount.current = current
- }
- },
- loadingAccount: false,
- projectVisible: false,
- columnsProject: [{
- title: '转让账户',
- align: 'center',
- dataIndex: 'accountId'
- },
- {
- title: '受让人姓名',
- align: 'center',
- dataIndex: 'transferorName'
- },
- {
- title: '转户人姓名',
- align: 'center',
- dataIndex: 'assigneeName'
- },
- {
- title: '受让人绩效开始时间',
- align: 'center',
- dataIndex: 'assigneeDate'
- },
- {
- title: '转户人绩效结束时间',
- align: 'center',
- dataIndex: 'transferorDate'
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: {
- customRender: 'action'
- }
- }
- ],
- dataProject: [],
- dataAccount: [],
- dataSource: [],
- dataElse: [],
- loading: false,
- memberList: [],
- visibleAdd: false,
- member: [],
- itemJson: null,
- visibleBind: false,
- bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
- bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
- appId: [],
- list: [],
- options: [],
- visibleAccount: false,
- confirmLoading: false
- }
- },
- computed: {
- importExcelUrl: function () {
- return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
- }
- },
- filters: {
- roleCode(value) {
- var state = {
- clip: '剪辑',
- shot: '拍摄',
- plan: '策划',
- plane: '平面',
- admin: '管理员',
- operator: '运营专员',
- kuaishouOperationManager: '快手运营经理',
- designTeamLeader: '设计组长',
- planeLeader: '平面组长',
- touTiaoOperationManager: '头条运营经理',
- operationAssistant: '运营助理'
- }
- if (value) {
- return state[value]
- } else {
- return '暂无'
- }
- },
- getDate(value) {
- let date = new Date(value)
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- return y + '-' + MM + '-' + d
- }
- },
- methods: {
- // /ctop/userAllocation/getAccountsByProjectId projectId userId
- projectLook(item) {
- var params = {}
- params.projectId = item.id
- params.status = 0
- getAction('/ctop/transferAccount/list', params).then(res => {
- console.log(res)
- if (res.success) {
- this.projectVisible = true
- this.dataProject = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- this.ipaginationAccount.total = res.result.length
- }
- })
- },
- projectEdit(item, status) {
- var params = {}
- params.id = item.id
- params.status = status
- params.auditor = this.userInfo().id
- putAction('/ctop/transferAccount/edit', params).then(res => {
- console.log(res)
- if (res.success) {
- this.projectVisible = false
- this.getResponsibleList()
- }
- })
- },
- handleOkProject() {},
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- add(value, key) {
- var dataValue = value.split(',')
- var dataKey = key.split(',')
- var jsonArr = []
- for (let i = 0; i < dataValue.length; i++) {
- jsonArr.push({
- userId: dataKey[i],
- userName: dataValue[i]
- })
- }
- this.member = jsonArr
- },
- log(id) {
- deleteAction('/ctop/projectMember/delete', {
- id: id
- }).then(res => {
- if (res.success) {
- this.getMemberList(this.projectId)
- this.$message.success('删除成功')
- } else {
- this.$message.error(res.message)
- }
- })
- },
- onTabChange(key, type) {
- console.log(key, type)
- this[type] = key
- this.keyWord = ''
- if (key == 'myProject') {
- this.getResponsibleList()
- } else {
- this.getParticipateList()
- }
- },
- getResponsibleList() {
- //我管理的
- this.dataSource = []
- this.dataElse = []
- this.loading = true
- getAction('/ctop/project/responsibleList', {
- userId: this.userInfo().id
- }).then(res => {
- if (res.code == 0) {
- this.dataSource = res.result
- this.dataElse = res.result
- this.loading = false
- }
- })
- },
- getParticipateList() {
- //我参与的
- this.dataSource = []
- this.dataElse = []
- this.loading = true
- getAction('/ctop/projectMember/participateList', {
- userId: this.userInfo().id
- }).then(res => {
- if (res.code == 0) {
- this.dataSource = res.result
- this.dataElse = res.result
- this.loading = false
- }
- })
- },
- getMemberList(projectId) {
- //成员查看
- this.memberList = []
- getAction('/ctop/projectMember/getMemberList', {
- projectId: projectId
- }).then(res => {
- if (res.code == 0) {
- this.visible = true
- this.memberList = res.result
- }
- })
- },
- handleOk(e) {
- this.visible = false
- },
- handleOkAdd(e) {
- var params = {}
- params.projectId = this.itemJson.id
- params.projectName = this.itemJson.projectName
- params.memberArr = this.appId
- this.confirmLoading = true
- httpAction('/ctop/projectMember/batchAdd', params, 'post').then(res => {
- this.confirmLoading = false
- if (res.success) {
- this.visibleAdd = false
- this.appId = []
- this.$message.success('添加成功')
- } else {
- this.$message.error('添加失败')
- }
- })
- },
- addParams(item) {
- if (this.noTitleKey == 'myProject') {
- this.visibleAdd = true
- this.itemJson = item
- console.log(this.itemJson)
- getAction('/sys/user/getAllUserList', '').then(res => {
- if (res.success) {
- this.list = res.result
- this.options = res.result
- }
- })
- } else {
- this.visibleAccount = true
- this.titleAccount = item.projectName
- this.loadingAccount = true
- getAction('/ctop/userAllocation/getAccountsByProjectId', {
- projectId: item.projectId,
- userId: this.userInfo().id
- }).then(res => {
- if (res.success) {
- this.dataAccount = res.result
- this.loadingAccount = false
- this.ipaginationAccount.total = res.result.length
- }
- })
- }
- },
- handleAdd() {},
- handleEdit(item) {
- if (this.noTitleKey == 'myProject') {
- console.log(item)
- this.title = item.projectName
- this.projectId = item.id
- this.getMemberList(item.id)
- } else {
- this.mode = 'authorization'
- this.loginType = item.mediaId == '1' ? 'bytedance' : 'kuaishou'
- this.record = item
- this.visibleBind = true
- }
- },
- handleDelete(id) {},
- onChageLogin(e) {
- console.log(this.mode)
- if (this.mode == 'login') {
- this.loginType = 'pangolin'
- } else {
- this.loginType = 'kuaishou'
- this.systemType = '不限'
- }
- },
- handleSubmit() {
- let params = {}
- params.advertiserId = this.record.advertiserId
- params.advertiser_name = this.record.advertiserName
- params.userId = this.userInfo().id
- params.userName = this.userInfo().realname
- params.projectId = this.record.projectId
- params.projectName = this.record.projectName
- params.systemType = this.systemType == '4' ? this.systemTypeName : this.systemType
- // 触发表单验证
- this.form.validateFields((err, values) => {
- if (!err) {
- if (this.mode == 'login') {
- params.accountName = this.accountName
- params.password = this.password
- params.loginType = this.loginType
- httpAction(this.bindAccountLoginUrl, params, 'post').then(res => {
- if (res.success) {
- this.$message.success('绑定成功')
- this.accountName = ''
- this.password = ''
- this.loginType = 'kuaishou'
- this.visibleBind = false
- } else {
- this.$message.error(res.message)
- }
- })
- }
- // 授权登录
- if (this.mode == 'authorization') {
- params.authorizationType = this.loginType
- if (this.loginType == 'kuaishou') {
- params.mediaId = this.mediaId
- params.agentType = this.agentType
- } else if (this.loginType == 'bytedance') {
- params.mediaId = 1
- }
- params.warningAmount = values.warningAmount
- params.warningProportion = values.warningProportion
- httpAction(this.bindAuthorizationUrl, params, 'post').then(res => {
- if (res.success) {
- window.open(res.message, '_blank')
- this.visibleBind = false
- } else {
- alert('绑定失败')
- }
- })
- }
- }
- })
- },
- searchReset() {
- this.keyWord = ''
- this.dataSource = this.dataElse
- },
- searchQuery() {
- this.dataSource = this.dataElse.filter(item => {
- return item.projectName.toLowerCase().indexOf(this.keyWord.toLowerCase()) > -1
- })
- },
- handleChange(value, options) {
- console.log(value, options)
- // this.appId = value
- },
- getElseData(value) {
- this.getStatistics()
- },
- handleBlur() {
- console.log('blur')
- },
- handleFocus() {
- console.log('focus')
- if (this.appId.length > 0) {
- this.options = []
- for (let i = 0; i < this.list.length; i++) {
- for (let j = 0; j < this.appId.length; j++) {
- if (this.list[i].userId == this.appId[j]) {
- this.options.push(this.list[i])
- }
- }
- }
- } else {
- this.options = this.list
- }
- },
- search(value) {
- this.options = []
- if (value != '') {
- this.options = this.list.filter(item => {
- var data = item.realName + ' ' + item.roleName
- return data.toLowerCase().indexOf(value.toLowerCase()) > -1
- })
- this.options = [...this.options]
- console.log(this.options)
- } else {
- if (this.appId.length > 0) {
- this.options = []
- for (let i = 0; i < this.list.length; i++) {
- for (let j = 0; j < this.appId.length; j++) {
- if (this.list[i].userId == this.appId[j]) {
- this.options.push(this.list[i])
- }
- }
- }
- } else {
- this.options = this.list
- }
- }
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.getParticipateList()
- })
- }
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
|