AdvertiserList.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="8">
  8. <a-form-item label="广告主开户主体名称">
  9. <a-input placeholder="请输入广告主开户主体名称" v-model="queryParam.name"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="8">
  13. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  14. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  15. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  16. </span>
  17. </a-col>
  18. </a-row>
  19. </a-form>
  20. </div>
  21. <!-- 操作按钮区域 -->
  22. <!-- <div class="table-operator">
  23. <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
  24. </div>-->
  25. <a-tabs @change="callbackTwo" v-model="active">
  26. <a-tab-pane key="advertiser" tab="广告主列表"></a-tab-pane>
  27. <a-tab-pane key="product" tab="产品列表">
  28. <a-tag
  29. color="blue"
  30. style="height:30px;line-height:30px;font-size:14px;margin-bottom:20px"
  31. v-if="queryParam.advertiserId"
  32. >
  33. {{advertiserName}}
  34. <a-icon type="close" @click="clear('advertiserId')" />
  35. </a-tag>
  36. </a-tab-pane>
  37. <a-tab-pane key="project" tab="项目列表">
  38. <a-tag
  39. color="blue"
  40. style="height:30px;line-height:30px;font-size:14px;margin-bottom:20px"
  41. v-if="queryParam.productId"
  42. >
  43. {{advertiserName?advertiserName+' / '+productName:productName}}
  44. <a-icon type="close" @click="clear('productId')" />
  45. </a-tag>
  46. </a-tab-pane>
  47. <a-button type="primary" slot="tabBarExtraContent" @click="addNew">新增</a-button>
  48. </a-tabs>
  49. <div>
  50. <a-table
  51. ref="table"
  52. size="middle"
  53. bordered
  54. rowKey="id"
  55. :columns="columns"
  56. :dataSource="dataSource"
  57. :pagination="ipagination"
  58. :loading="loading"
  59. @change="handleTableChange"
  60. >
  61. <span slot="action" slot-scope="text, record">
  62. <a @click="handleEdit(record)">编辑</a>
  63. <a-divider type="vertical" />
  64. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  65. <a>删除</a>
  66. </a-popconfirm>
  67. </span>
  68. <span slot="actionProduct" slot-scope="text, record">
  69. <a @click="handleEditElse(record,'product')">编辑</a>
  70. <a-divider type="vertical" />
  71. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  72. <a>删除</a>
  73. </a-popconfirm>
  74. </span>
  75. <span slot="actionProject" slot-scope="text, record">
  76. <a @click="handleEditElse(record,'project')">编辑</a>
  77. <a-divider type="vertical" />
  78. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  79. <a>删除</a>
  80. </a-popconfirm>
  81. </span>
  82. <span slot="maxBid" slot-scope="text">{{ text / 1000 }}</span>
  83. <span slot="maxDeepCpaBid" slot-scope="text">{{ text / 1000 }}</span>
  84. <a slot="name" slot-scope="text,record" @click="toProduct(record,'product')">{{text}}</a>
  85. <a slot="productName" slot-scope="text,record" @click="toProduct(record,'project')">{{text}}</a>
  86. </a-table>
  87. </div>
  88. <!-- table区域-begin -->
  89. <!-- table区域-end -->
  90. <!-- 表单区域 -->
  91. <advertiser-modal ref="modalForm" @ok="modalFormOk"></advertiser-modal>
  92. <product-modal ref="modalFormTwo" @ok="modalFormOk"></product-modal>
  93. <project-modal ref="modalFormThree" @ok="modalFormOk"></project-modal>
  94. <j-select-user ref="userForm" @ok="modalFormOk"></j-select-user>
  95. </a-card>
  96. </template>
  97. <script>
  98. import AdvertiserModal from './modules/AdvertiserModal'
  99. import productModal from './modules/productModal'
  100. import ProjectModal from './modules/ProjectModal'
  101. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  102. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  103. import AFormItem from 'ant-design-vue/es/form/FormItem'
  104. import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  105. import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  106. import JSelectUser from '@/components/jeecgbiz/JSelectUser'
  107. import { postAction } from '../../../api/manage'
  108. import { mapActions, mapGetters } from 'vuex'
  109. const advertiserColumns = [
  110. {
  111. title: '广告主开户主体名称',
  112. align: 'center',
  113. dataIndex: 'name',
  114. scopedSlots: { customRender: 'name' },
  115. },
  116. {
  117. title: '联系人姓名',
  118. align: 'center',
  119. dataIndex: 'contact',
  120. },
  121. {
  122. title: '联系人手机',
  123. align: 'center',
  124. dataIndex: 'mobile',
  125. },
  126. {
  127. title: '联系人邮箱',
  128. align: 'center',
  129. dataIndex: 'email',
  130. },
  131. {
  132. title: '操作',
  133. dataIndex: 'action',
  134. align: 'center',
  135. scopedSlots: { customRender: 'action' },
  136. },
  137. ]
  138. const productColumns = [
  139. {
  140. title: '产品名',
  141. align: 'center',
  142. dataIndex: 'productName',
  143. scopedSlots: { customRender: 'productName' },
  144. },
  145. {
  146. title: '广告主名称',
  147. align: 'center',
  148. dataIndex: 'advertiserId_dictText',
  149. },
  150. {
  151. title: '创建人',
  152. align: 'center',
  153. dataIndex: 'userId_dictText',
  154. },
  155. {
  156. title: '行业',
  157. align: 'center',
  158. dataIndex: 'industryId_dictText',
  159. },
  160. {
  161. title: '状态',
  162. align: 'center',
  163. dataIndex: 'productStatus',
  164. customRender: function (text) {
  165. if (text == 0) {
  166. return '启动'
  167. } else if (text == 1) {
  168. return '暂停'
  169. } else if (text == 2) {
  170. return '删除'
  171. }
  172. },
  173. },
  174. {
  175. title: '操作',
  176. dataIndex: 'actionProduct',
  177. align: 'center',
  178. scopedSlots: { customRender: 'actionProduct' },
  179. },
  180. ]
  181. const projectColumns = [
  182. {
  183. title: '项目名称',
  184. align: 'center',
  185. dataIndex: 'projectName',
  186. },
  187. {
  188. title: '产品名',
  189. align: 'center',
  190. dataIndex: 'productId_dictText',
  191. },
  192. {
  193. title: '广告主名称',
  194. align: 'center',
  195. dataIndex: 'advertiserId_dictText',
  196. },
  197. {
  198. title: '最高出价',
  199. align: 'center',
  200. dataIndex: 'maxBid',
  201. scopedSlots: {
  202. customRender: 'maxBid',
  203. },
  204. },
  205. {
  206. title: '最高转化出价',
  207. align: 'center',
  208. dataIndex: 'maxDeepCpaBid',
  209. scopedSlots: {
  210. customRender: 'maxDeepCpaBid',
  211. },
  212. },
  213. {
  214. title: '供应商',
  215. align: 'center',
  216. dataIndex: 'supplierCode_dictText',
  217. },
  218. {
  219. title: '销售',
  220. align: 'center',
  221. dataIndex: 'saleId_dictText',
  222. },
  223. {
  224. title: '运营负责人',
  225. align: 'center',
  226. dataIndex: 'responsibleId_dictText',
  227. },
  228. {
  229. title: '设计负责人',
  230. align: 'center',
  231. dataIndex: 'designResponsibleId_dictText',
  232. },
  233. {
  234. title: '操作',
  235. dataIndex: 'actionProject',
  236. align: 'center',
  237. scopedSlots: {
  238. customRender: 'actionProject',
  239. },
  240. },
  241. ]
  242. export default {
  243. name: 'AdvertiserList',
  244. mixins: [JeecgListMixin],
  245. components: {
  246. AFormItem,
  247. AdvertiserModal,
  248. JTreeSelect,
  249. JSelectUserByDep,
  250. JSelectDepart,
  251. JSelectUser,
  252. productModal,
  253. ProjectModal,
  254. },
  255. data() {
  256. return {
  257. departDisabled: false, //是否是我的部门调用该页面
  258. users: this.userInfo().realname, //用户名称
  259. departmentId: this.userInfo().departId, //部门id
  260. description: '广告主信息表管理页面',
  261. visible: false,
  262. accountName: '',
  263. password: '',
  264. mode: 'login',
  265. showLogin: true,
  266. showAuthorization: false,
  267. authorizationType: 'kuaishou',
  268. loginType: 'kuaishou',
  269. form: this.$form.createForm(this),
  270. active: 'advertiser',
  271. advertiserName: '',
  272. advertiserId: '',
  273. productName: '',
  274. examinelList: [
  275. {
  276. value: '0',
  277. tab: '广告主列表',
  278. },
  279. {
  280. value: '1',
  281. tab: '产品列表',
  282. },
  283. {
  284. value: '2',
  285. tab: '项目列表',
  286. },
  287. ],
  288. // 表头
  289. columns: advertiserColumns,
  290. url: {
  291. list: '/ctop/advertiser/list',
  292. delete: '/ctop/advertiser/delete',
  293. deleteBatch: '/ctop/advertiser/deleteBatch',
  294. exportXlsUrl: 'ctop/advertiser/exportXls',
  295. importExcelUrl: 'ctop/advertiser/importExcel',
  296. bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
  297. bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
  298. getLoginInfo: '/ctop/bindAccount/getLoginInfo',
  299. userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
  300. userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
  301. },
  302. }
  303. },
  304. computed: {
  305. importExcelUrl: function () {
  306. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  307. },
  308. },
  309. created() {
  310. // this.queryParam.userId = this.userInfo().id
  311. },
  312. methods: {
  313. handleEditElse(item, type) {
  314. if (type == 'product') {
  315. this.$refs.modalFormTwo.edit(item)
  316. this.$refs.modalFormTwo.title = '编辑'
  317. this.$refs.modalFormTwo.disableSubmit = false
  318. } else if (type == 'project') {
  319. this.$refs.modalFormThree.edit(item)
  320. this.$refs.modalFormThree.title = '编辑'
  321. this.$refs.modalFormThree.disableSubmit = false
  322. }
  323. },
  324. clear(type) {
  325. this.queryParam.advertiserId = null
  326. this.advertiserName = ''
  327. this.queryParam.productId = null
  328. this.productName = ''
  329. this.loadData(1)
  330. },
  331. addNew() {
  332. if (this.active == 'advertiser') {
  333. this.$refs.modalForm.add()
  334. this.$refs.modalForm.title = '新增'
  335. this.$refs.modalForm.disableSubmit = false
  336. } else if (this.active == 'product') {
  337. if (this.queryParam.advertiserId) {
  338. this.$refs.modalFormTwo.add({ advertiserId: this.queryParam.advertiserId })
  339. } else {
  340. this.$refs.modalFormTwo.add()
  341. }
  342. this.$refs.modalFormTwo.title = '新增'
  343. this.$refs.modalFormTwo.disableSubmit = false
  344. } else if (this.active == 'project') {
  345. this.$refs.modalFormThree.add({
  346. advertiserId: this.queryParam.advertiserId
  347. ? this.queryParam.advertiserId
  348. : this.advertiserId
  349. ? this.advertiserId
  350. : null,
  351. productId: this.queryParam.productId,
  352. })
  353. this.$refs.modalFormThree.title = '新增'
  354. this.$refs.modalFormThree.disableSubmit = false
  355. }
  356. },
  357. toProduct(item, key) {
  358. if (key == 'product') {
  359. this.queryParam.advertiserId = item.id
  360. this.advertiserName = item.name
  361. this.callbackTwo('product')
  362. } else if (key == 'project') {
  363. this.queryParam.productId = item.id
  364. this.productName = item.productName
  365. this.advertiserId = item.advertiserId
  366. this.callbackTwo('project')
  367. }
  368. },
  369. callbackTwo(key) {
  370. this.active = key
  371. if (key == 'advertiser') {
  372. this.columns = advertiserColumns
  373. this.url.list = '/ctop/advertiser/list'
  374. this.url.delete = '/ctop/advertiser/delete'
  375. } else if (key == 'product') {
  376. this.columns = productColumns
  377. this.url.list = '/ctop/product/list'
  378. this.url.delete = '/ctop/product/delete'
  379. } else if (key == 'project') {
  380. this.columns = projectColumns
  381. this.url.list = '/ctop/project/list'
  382. this.url.delete = '/ctop/project/delete'
  383. }
  384. this.loadData(1)
  385. },
  386. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  387. searchRe() {
  388. this.queryParam.name = null
  389. this.queryParam.advertiserId = null
  390. this.queryParam.productId = null
  391. this.callbackTwo('advertiser')
  392. },
  393. handleSubmit() {
  394. let params = {}
  395. params.advertiserId = this.record.id
  396. params.advertiser_name = this.record.name
  397. params.userId = this.userInfo().id
  398. params.userName = this.userInfo().realname
  399. params.projectId = this.record.projectId
  400. params.projectName = this.record.projectName
  401. // 触发表单验证
  402. this.form.validateFields((err) => {
  403. if (!err) {
  404. if (this.mode == 'login') {
  405. params.accountName = this.accountName
  406. params.password = this.password
  407. params.loginType = this.loginType
  408. if (this.loginType == 'kuaishou') {
  409. params.mediaId = 2
  410. } else if (this.loginType == 'bytedance') {
  411. params.mediaId = 1
  412. }
  413. postAction(this.url.bindAccountLoginUrl, params).then((res) => {
  414. if (res.success) {
  415. alert('绑定成功')
  416. this.accountName = ''
  417. this.password = ''
  418. this.loginType = ''
  419. } else {
  420. alert(res.message)
  421. }
  422. })
  423. }
  424. // 授权登录
  425. if (this.mode == 'authorization') {
  426. params.authorizationType = this.authorizationType
  427. if (this.authorizationType == 'kuaishou') {
  428. params.mediaId = 2
  429. } else if (this.authorizationType == 'bytedance') {
  430. params.mediaId = 1
  431. }
  432. postAction(this.url.bindAuthorizationUrl, params).then((res) => {
  433. if (res.success) {
  434. window.open(res.message, '_blank')
  435. } else {
  436. alert('绑定失败')
  437. }
  438. })
  439. }
  440. }
  441. })
  442. },
  443. onChageLogin() {
  444. console.log(this.mode)
  445. if (this.mode == 'login') {
  446. this.showLogin = true
  447. this.showAuthorization = false
  448. } else {
  449. this.showLogin = false
  450. this.showAuthorization = true
  451. }
  452. },
  453. showModal(record) {
  454. this.record = record
  455. this.visible = true
  456. },
  457. handleCancel() {
  458. this.close()
  459. },
  460. },
  461. }
  462. </script>
  463. <style scoped>
  464. @import '~@assets/less/common.less';
  465. </style>