AdvertiserList.vue 14 KB

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