AdvertiserList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  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="6">
  13. <a-form-item label="行业">
  14. <j-tree-select
  15. v-model="queryParam.industryId"
  16. ref="treeSelect"
  17. placeholder="请选择行业"
  18. dict="sys_category,name,id"
  19. pidField="pid"
  20. pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
  21. >
  22. </j-tree-select>
  23. </a-form-item>
  24. </a-col>
  25. <a-col :md="6" :sm="8">
  26. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  27. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  28. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  29. </span>
  30. </a-col>
  31. </a-row>
  32. </a-form>
  33. </div>
  34. <!-- 操作按钮区域 -->
  35. <div class="table-operator">
  36. <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
  37. </div>
  38. <!-- table区域-begin -->
  39. <div>
  40. <a-table
  41. ref="table"
  42. size="middle"
  43. bordered
  44. rowKey="id"
  45. :columns="columns"
  46. :dataSource="dataSource"
  47. :pagination="ipagination"
  48. :loading="loading"
  49. @change="handleTableChange"
  50. >
  51. <span slot="action" slot-scope="text, record">
  52. <a @click="handleEdit(record)">编辑</a>
  53. <a-divider type="vertical" />
  54. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  55. <a>删除</a>
  56. </a-popconfirm>
  57. </span>
  58. </a-table>
  59. <a-modal
  60. title="账号绑定"
  61. v-model="visible"
  62. @ok="handleSubmit"
  63. :width="800"
  64. :okButtonProps="{ props: { disabled: false } }"
  65. :cancelButtonProps="{ props: { disabled: false } }"
  66. >
  67. <a-form>
  68. <a-form-item
  69. label="选择方式"
  70. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  71. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  72. >
  73. <a-radio-group buttonStyle="solid" @change="onChageLogin" v-model="mode">
  74. <a-radio-button value="login">登录</a-radio-button>
  75. <a-radio-button value="authorization">授权</a-radio-button>
  76. </a-radio-group>
  77. </a-form-item>
  78. <a-form-item v-if="showLogin">
  79. <a-form :form="form">
  80. <!-- @submit="loginForm">-->
  81. <a-form-item
  82. label="账号:"
  83. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  84. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  85. >
  86. <a-input v-model="accountName" placeholder="请输入账户名" />
  87. </a-form-item>
  88. <a-form-item
  89. label="密码:"
  90. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  91. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  92. >
  93. <a-input type="password" v-model="password" placeholder="请输入密码" />
  94. </a-form-item>
  95. <a-form-item
  96. label="媒体:"
  97. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  98. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  99. >
  100. <a-radio-group buttonStyle="outline" v-model="loginType">
  101. <a-radio-button value="kuaishou">快手</a-radio-button>
  102. <a-radio-button value="bytedance">头条</a-radio-button>
  103. </a-radio-group>
  104. </a-form-item>
  105. <a-form-item
  106. label="部门分配"
  107. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  108. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  109. v-show="!departDisabled"
  110. >
  111. <j-select-depart v-model="departmentId" :multi="false"></j-select-depart>
  112. </a-form-item>
  113. <a-form-item
  114. label="用户选择"
  115. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  116. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  117. >
  118. <j-select-user-by-dep v-model="users"></j-select-user-by-dep>
  119. </a-form-item>
  120. </a-form>
  121. </a-form-item>
  122. <a-form-item
  123. v-if="showAuthorization"
  124. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  125. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  126. >
  127. <a-form :form="form">
  128. <!--@submit="authorizationForm"-->
  129. <a-form-item
  130. label="媒体:"
  131. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  132. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  133. >
  134. <a-radio-group buttonStyle="outline" v-model="authorizationType">
  135. <a-radio-button value="kuaishou">快手</a-radio-button>
  136. <a-radio-button value="bytedance">头条</a-radio-button>
  137. </a-radio-group>
  138. </a-form-item>
  139. <a-form-item
  140. label="部门分配"
  141. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  142. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  143. v-show="!departDisabled"
  144. >
  145. <j-select-depart v-model="departmentId" :multi="false"></j-select-depart>
  146. </a-form-item>
  147. <a-form-item
  148. label="用户选择"
  149. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  150. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  151. >
  152. <j-select-user-by-dep v-model="users"></j-select-user-by-dep>
  153. </a-form-item>
  154. </a-form>
  155. </a-form-item>
  156. </a-form>
  157. </a-modal>
  158. </div>
  159. <!-- table区域-end -->
  160. <!-- 表单区域 -->
  161. <advertiser-modal ref="modalForm" @ok="modalFormOk"></advertiser-modal>
  162. <j-select-user ref="userForm" @ok="modalFormOk"></j-select-user>
  163. </a-card>
  164. </template>
  165. <script>
  166. import AdvertiserModal from './modules/AdvertiserModal'
  167. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  168. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  169. import AFormItem from 'ant-design-vue/es/form/FormItem'
  170. import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  171. import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  172. import JSelectUser from '@/components/jeecgbiz/JSelectUser'
  173. import { postAction } from '../../../api/manage'
  174. import { mapActions, mapGetters } from 'vuex'
  175. export default {
  176. name: 'AdvertiserList',
  177. mixins: [JeecgListMixin],
  178. components: {
  179. AFormItem,
  180. AdvertiserModal,
  181. JTreeSelect,
  182. JSelectUserByDep,
  183. JSelectDepart,
  184. JSelectUser
  185. },
  186. data() {
  187. return {
  188. departDisabled: false, //是否是我的部门调用该页面
  189. users: this.userInfo().realname, //用户名称
  190. departmentId: this.userInfo().departId, //部门id
  191. description: '广告主信息表管理页面',
  192. visible: false,
  193. accountName: '',
  194. password: '',
  195. mode: 'login',
  196. showLogin: true,
  197. showAuthorization: false,
  198. authorizationType: 'kuaishou',
  199. loginType: 'kuaishou',
  200. form: this.$form.createForm(this),
  201. // 表头
  202. columns: [
  203. {
  204. title: '广告主开户主体名称',
  205. align: 'center',
  206. dataIndex: 'name'
  207. },
  208. {
  209. title: '行业',
  210. align: 'center',
  211. dataIndex: 'industryId'
  212. },
  213. {
  214. title: '联系人姓名',
  215. align: 'center',
  216. dataIndex: 'contact'
  217. },
  218. {
  219. title: '联系人手机',
  220. align: 'center',
  221. dataIndex: 'mobile'
  222. },
  223. {
  224. title: '联系人邮箱',
  225. align: 'center',
  226. dataIndex: 'email'
  227. },
  228. {
  229. title: '销售',
  230. align: 'center',
  231. dataIndex: 'saleName'
  232. },
  233. {
  234. title: '操作',
  235. dataIndex: 'action',
  236. align: 'center',
  237. scopedSlots: { customRender: 'action' }
  238. }
  239. ],
  240. url: {
  241. list: '/ctop/advertiser/list',
  242. delete: '/ctop/advertiser/delete',
  243. deleteBatch: '/ctop/advertiser/deleteBatch',
  244. exportXlsUrl: 'ctop/advertiser/exportXls',
  245. importExcelUrl: 'ctop/advertiser/importExcel',
  246. bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
  247. bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
  248. getLoginInfo: '/ctop/bindAccount/getLoginInfo',
  249. userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
  250. userWithDepart: '/sys/user/userDepartList' // 引入为指定用户查看部门信息需要的url
  251. }
  252. }
  253. },
  254. computed: {
  255. importExcelUrl: function() {
  256. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  257. }
  258. },
  259. created() {
  260. this.queryParam.userId = this.userInfo().id
  261. },
  262. methods: {
  263. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  264. searchRe() {
  265. this.queryParam.name = ''
  266. this.queryParam.industryId = ''
  267. this.loadData()
  268. },
  269. handleSubmit() {
  270. let params = {}
  271. params.advertiserId = this.record.id
  272. params.advertiser_name = this.record.name
  273. params.userId = this.userInfo().id
  274. params.userName = this.userInfo().realname
  275. params.projectId = this.record.projectId
  276. params.projectName = this.record.projectName
  277. // 触发表单验证
  278. this.form.validateFields(err => {
  279. if (!err) {
  280. if (this.mode == 'login') {
  281. params.accountName = this.accountName
  282. params.password = this.password
  283. params.loginType = this.loginType
  284. if (this.loginType == 'kuaishou') {
  285. params.mediaId = 2
  286. } else if (this.loginType == 'bytedance') {
  287. params.mediaId = 1
  288. }
  289. postAction(this.url.bindAccountLoginUrl, params).then(res => {
  290. if (res.success) {
  291. alert('绑定成功')
  292. this.accountName = ''
  293. this.password = ''
  294. this.loginType = ''
  295. } else {
  296. alert(res.message)
  297. }
  298. })
  299. }
  300. // 授权登录
  301. if (this.mode == 'authorization') {
  302. params.authorizationType = this.authorizationType
  303. if (this.authorizationType == 'kuaishou') {
  304. params.mediaId = 2
  305. } else if (this.authorizationType == 'bytedance') {
  306. params.mediaId = 1
  307. }
  308. postAction(this.url.bindAuthorizationUrl, params).then(res => {
  309. if (res.success) {
  310. window.open(res.message, '_blank')
  311. } else {
  312. alert('绑定失败')
  313. }
  314. })
  315. }
  316. }
  317. })
  318. },
  319. onChageLogin() {
  320. console.log(this.mode)
  321. if (this.mode == 'login') {
  322. this.showLogin = true
  323. this.showAuthorization = false
  324. } else {
  325. this.showLogin = false
  326. this.showAuthorization = true
  327. }
  328. },
  329. showModal(record) {
  330. this.record = record
  331. this.visible = true
  332. },
  333. handleCancel() {
  334. this.close()
  335. }
  336. }
  337. }
  338. </script>
  339. <style scoped>
  340. @import '~@assets/less/common.less';
  341. </style>