UserAllocationList.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
  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="8" :sm="8">
  8. <a-form-item label="账号所属人">
  9. <a-select
  10. placeholder="请选择所属人"
  11. showSearch
  12. optionFilterProp="children"
  13. style="width: 100%"
  14. :filterOption="filterOption"
  15. v-model="queryParam.userId"
  16. v-if="userInfo().username == 'admin'"
  17. @search="search"
  18. @focus="getAllUserList"
  19. >
  20. <a-select-option
  21. v-for="appModel in optionsAll"
  22. :key="appModel.userId + new Date().getTime()"
  23. :value="appModel.userId"
  24. >{{ appModel.realName }}</a-select-option
  25. >
  26. </a-select>
  27. <a-input placeholder="请输入所属人" v-model="queryParam.userName" v-else></a-input>
  28. </a-form-item>
  29. </a-col>
  30. <template>
  31. <a-col :md="8" :sm="8">
  32. <a-form-item label="广告主名称">
  33. <a-input placeholder="请输入广告主名称" v-model="queryParam.advertiserName"></a-input>
  34. </a-form-item>
  35. </a-col>
  36. </template>
  37. <a-col :md="8" :sm="8">
  38. <a-form-item label="账户状态">
  39. <a-select placeholder="请选择账户状态" v-model="queryParam.accountStatus">
  40. <a-select-option :value="0">开启</a-select-option>
  41. <a-select-option :value="1">关闭</a-select-option>
  42. </a-select>
  43. </a-form-item>
  44. </a-col>
  45. <a-col :md="8" :sm="8">
  46. <a-form-item label="项目名称">
  47. <a-select
  48. v-model="queryParam.projectId"
  49. showSearch
  50. optionFilterProp="children"
  51. :filterOption="filterOption"
  52. >
  53. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  54. {{
  55. item.mediaId == '1'
  56. ? '头条'
  57. : item.mediaId == '2'
  58. ? '快手'
  59. : item.mediaId == '3'
  60. ? '头条内广'
  61. : '快手内广'
  62. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.projectName }}
  63. </a-select-option>
  64. </a-select>
  65. </a-form-item>
  66. </a-col>
  67. <a-col :md="8" :sm="8">
  68. <a-form-item label="账号id">
  69. <a-input placeholder="请输入账号id" v-model="queryParam.accountId"></a-input>
  70. </a-form-item>
  71. </a-col>
  72. <a-col :md="6" :sm="8">
  73. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  74. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  75. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  76. </span>
  77. </a-col>
  78. </a-row>
  79. </a-form>
  80. </div>
  81. <!-- 操作按钮区域 -->
  82. <br />
  83. <!-- table区域-begin -->
  84. <div>
  85. <a-table
  86. ref="table"
  87. size="middle"
  88. bordered
  89. rowKey="id"
  90. :columns="columns"
  91. :dataSource="dataSource"
  92. :pagination="ipagination"
  93. :loading="loading"
  94. @change="handleTableChange"
  95. >
  96. <span slot="accountStatus" slot-scope="text, record">
  97. <!-- {{ text == 0 ? '启用' : '禁用' }} -->
  98. <a-switch v-model="record.accountStatus == 0 ? true : false" @change="onChangeSwitch(record)" />
  99. </span>
  100. <span slot="deleteComment" slot-scope="text, record">
  101. <!-- {{ text == 0 ? '启用' : '禁用' }} -->
  102. <a-switch v-model="record.deleteComment == 0 ? true : false" @change="deleteCommentChangeSwitch(record)" />
  103. </span>
  104. <span slot="mediaId" slot-scope="text">{{ text == 1 ? '头条' : '快手' }}</span>
  105. <div slot="authName" slot-scope="text, record">
  106. <span>{{ text }}</span>
  107. <a-button size="small" @click="renew(record)" style="float: right" :loading="record.showVideo"> 更新 </a-button>
  108. <!-- showVideo -->
  109. </div>
  110. <span slot="action" slot-scope="text, record">
  111. <!-- <a @click="account(record)">转移项目</a>
  112. <a-divider type="vertical" />
  113. <a @click="project(record)">转让账户</a>
  114. <a-divider type="vertical" /> -->
  115. <a @click="handleEdit(record)">编辑</a>
  116. <a-divider type="vertical" v-show="roleCode == 'admin'" />
  117. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" v-show="roleCode == 'admin'">
  118. <a>删除</a>
  119. </a-popconfirm>
  120. <a-divider type="vertical" />
  121. <a-dropdown :trigger="['click']">
  122. <a class="ant-dropdown-link" @click="e => e.preventDefault()">
  123. 更多 <a-icon type="down" />
  124. </a>
  125. <a-menu slot="overlay">
  126. <a-menu-item key="0">
  127. <a @click="account(record)">转移项目</a>
  128. </a-menu-item>
  129. <a-menu-item key="1">
  130. <a @click="project(record)">转让账户</a>
  131. </a-menu-item>
  132. </a-menu>
  133. </a-dropdown>
  134. </span>
  135. </a-table>
  136. </div>
  137. <!-- table区域-end -->
  138. <!-- 表单区域 -->
  139. <userAllocation-modal ref="modalForm" @ok="modalFormOk"></userAllocation-modal>
  140. <!-- 添加项目成员 -->
  141. <a-modal title="账户转让" v-model="visibleAdd" @ok="handleOkAdd" :confirmLoading="confirmLoading" :width="800">
  142. <a-form :form="form">
  143. <a-form-item
  144. label="转户人"
  145. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  146. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  147. >
  148. <a-select
  149. v-decorator="['transferor']"
  150. showSearch
  151. optionFilterProp="children"
  152. :filterOption="filterOption"
  153. style="width: 100%"
  154. disabled
  155. >
  156. <a-select-option :value="item.userId" v-for="(item, index) of options" :key="index">{{
  157. item.realName
  158. }}</a-select-option>
  159. </a-select>
  160. </a-form-item>
  161. <a-form-item
  162. label="受让人"
  163. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  164. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  165. >
  166. <a-select
  167. v-decorator="['assignee', { rules: [{ required: true, message: '请选择受让人' }] }]"
  168. placeholder="请选择受让人"
  169. showSearch
  170. optionFilterProp="children"
  171. :filterOption="filterOption"
  172. style="width: 100%"
  173. >
  174. <a-select-option :value="item.userId" v-for="(item, index) of options" :key="index">{{
  175. item.realName
  176. }}</a-select-option>
  177. </a-select>
  178. </a-form-item>
  179. <a-form-item
  180. label="转户人绩效截止日期"
  181. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  182. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  183. >
  184. <a-date-picker
  185. v-decorator="['transferorDate', { rules: [{ required: true, message: '请选择转户人绩效截止日期' }] }]"
  186. />
  187. <!-- , { initialValue:moment(new Date(), 'YYYY-MM-DD') } -->
  188. </a-form-item>
  189. <a-form-item
  190. label="受让人绩效开始日期"
  191. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  192. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  193. >
  194. <a-date-picker
  195. v-decorator="['assigneeDate', { rules: [{ required: true, message: '请选择受让人绩效截止日期' }] }]"
  196. />
  197. </a-form-item>
  198. <!--
  199. <a-form-item
  200. label="账号:"
  201. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  202. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  203. v-show="mode == 'login'"
  204. >
  205. <a-input v-model="accountName" placeholder="请输入账户名" />
  206. </a-form-item>
  207. -->
  208. </a-form>
  209. </a-modal>
  210. <a-modal
  211. title="项目转移"
  212. v-model="visibleAccount"
  213. @ok="handleOkAccount"
  214. :confirmLoading="accountLoading"
  215. :width="800"
  216. >
  217. <a-form :form="formAccount">
  218. <a-form-item
  219. label="原项目"
  220. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  221. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  222. >
  223. <a-select
  224. v-decorator="[
  225. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  226. { rules: [{ required: true, message: '请选择项目!' }] },
  227. ]"
  228. showSearch
  229. optionFilterProp="children"
  230. :filterOption="filterOption"
  231. disabled
  232. >
  233. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  234. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  235. item.mediaId == '1'
  236. ? '头条'
  237. : item.mediaId == '2'
  238. ? '快手'
  239. : item.mediaId == '3'
  240. ? '头条内广'
  241. : '快手内广'
  242. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  243. </a-select-option>
  244. </a-select>
  245. </a-form-item>
  246. <a-form-item
  247. label="转移项目"
  248. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  249. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  250. >
  251. <a-select
  252. v-decorator="[
  253. 'projectNewId', // 给表单赋值或拉取表单时,该input对应的key
  254. { rules: [{ required: true, message: '请选择项目!' }] },
  255. ]"
  256. showSearch
  257. optionFilterProp="children"
  258. :filterOption="filterOption"
  259. >
  260. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  261. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  262. item.mediaId == '1'
  263. ? '头条'
  264. : item.mediaId == '2'
  265. ? '快手'
  266. : item.mediaId == '3'
  267. ? '头条内广'
  268. : '快手内广'
  269. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  270. </a-select-option>
  271. </a-select>
  272. </a-form-item>
  273. <!--
  274. <a-form-item
  275. label="账号:"
  276. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  277. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  278. v-show="mode == 'login'"
  279. >
  280. <a-input v-model="accountName" placeholder="请输入账户名" />
  281. </a-form-item>
  282. -->
  283. </a-form>
  284. </a-modal>
  285. </a-card>
  286. </template>
  287. <script>
  288. import UserAllocationModal from './modules/UserAllocationModal'
  289. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  290. import { mapGetters } from 'vuex'
  291. import { httpAction, getAction, deleteAction } from '@/api/manage'
  292. import moment from 'moment'
  293. import { postAction } from '../../../api/manage'
  294. import qs from 'qs'
  295. export default {
  296. name: 'UserAllocationList',
  297. mixins: [JeecgListMixin],
  298. components: {
  299. UserAllocationModal,
  300. },
  301. data() {
  302. return {
  303. description: '账号绑定管理页面',
  304. visibleAdd: false,
  305. visibleAccount: false,
  306. options: [],
  307. optionsAll: [],
  308. dataElse: [],
  309. // 表头
  310. columns: [
  311. {
  312. title: '账号所属人',
  313. align: 'center',
  314. dataIndex: 'userName',
  315. },
  316. {
  317. title: '授权',
  318. align: 'center',
  319. dataIndex: 'accountId',
  320. },
  321. {
  322. title: '广告主名称',
  323. align: 'center',
  324. dataIndex: 'advertiserId_dictText',
  325. },
  326. {
  327. title: '项目名称',
  328. align: 'center',
  329. dataIndex: 'projectId_dictText',
  330. },
  331. // {
  332. // title: '输入账号 --登录',
  333. // align:"center",
  334. // dataIndex: 'accountName'
  335. // },
  336. {
  337. title: '授权名称',
  338. align: 'center',
  339. dataIndex: 'authName',
  340. scopedSlots: {
  341. customRender: 'authName',
  342. },
  343. },
  344. {
  345. title: '平台类型',
  346. align: 'center',
  347. dataIndex: 'mediaId',
  348. scopedSlots: {
  349. customRender: 'mediaId',
  350. },
  351. },
  352. {
  353. title: '预警金额',
  354. align: 'center',
  355. dataIndex: 'warningAmount',
  356. },
  357. {
  358. title: '预警比例',
  359. align: 'center',
  360. dataIndex: 'warningProportion',
  361. },
  362. // accountStatus:0启用;1禁用
  363. {
  364. title: '账户状态',
  365. dataIndex: 'accountStatus',
  366. align: 'center',
  367. scopedSlots: {
  368. customRender: 'accountStatus',
  369. },
  370. },
  371. {
  372. title: '系统名称',
  373. dataIndex: 'systemType',
  374. align: 'center',
  375. },
  376. {
  377. title: '是否开启删评论',
  378. dataIndex: 'deleteComment',
  379. align: 'center',
  380. width:80,
  381. scopedSlots: {
  382. customRender: 'deleteComment',
  383. },
  384. },
  385. {
  386. title: '操作',
  387. dataIndex: 'action',
  388. align: 'center',
  389. width: 160,
  390. scopedSlots: {
  391. customRender: 'action',
  392. },
  393. },
  394. ],
  395. url: {
  396. list: '/ctop/userAllocation/list',
  397. delete: '/ctop/userAllocation/delete',
  398. deleteBatch: '/ctop/userAllocation/deleteBatch',
  399. exportXlsUrl: 'ctop/userAllocation/exportXls',
  400. importExcelUrl: 'ctop/userAllocation/importExcel',
  401. },
  402. confirmLoading: false,
  403. accountLoading: false,
  404. projectId: '',
  405. accountId: '',
  406. mediaId: '',
  407. form: this.$form.createForm(this),
  408. formAccount: this.$form.createForm(this),
  409. roleCode: localStorage.getItem('roleCode'),
  410. dataElse: [],
  411. }
  412. },
  413. computed: {
  414. importExcelUrl: function () {
  415. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  416. },
  417. },
  418. mounted() {
  419. this.getParticipateList()
  420. },
  421. methods: {
  422. renew(item) {
  423. console.log(item)
  424. item.showVideo = true
  425. getAction('/ctop/userAllocation/updateAuthName', { accountId: item.accountId, mediaId: item.mediaId }).then(
  426. (res) => {
  427. if (res.success) {
  428. this.loadData()
  429. } else {
  430. this.$message.error('更新数据失败,请稍后重试!!!')
  431. item.showVideo = false
  432. }
  433. }
  434. )
  435. },
  436. moment,
  437. search(value) {
  438. this.optionsAll = []
  439. if (value != '') {
  440. // this.options = this.list.filter(item => {
  441. // var data = item.realName + ' ' + item.roleName
  442. // return data.toLowerCase().indexOf(value.toLowerCase()) > -1
  443. // })
  444. // this.options = [...this.options]
  445. this.getAllUserList(value)
  446. } else {
  447. this.getAllUserList()
  448. }
  449. },
  450. getAllUserList(value) {
  451. getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
  452. if (res.success) {
  453. this.optionsAll = res.result.list
  454. }
  455. })
  456. },
  457. onChangeSwitch(item) {
  458. var params = {}
  459. params.id = item.id
  460. params.accountStatus = item.accountStatus == 0 ? 1 : 0
  461. httpAction('/ctop/userAllocation/edit', params, 'put').then((res) => {
  462. if (res.success) {
  463. this.loadData()
  464. }
  465. })
  466. },
  467. deleteCommentChangeSwitch(record){
  468. console.log(record)
  469. var params = {}
  470. params.accountId = record.accountId
  471. params.switchType = record.deleteComment ==0 ? 1 : 0
  472. postAction('/ctop/userAllocation/onOrOffDeleteComment', qs.stringify(params)).then((res) => {
  473. if (res.success) {
  474. this.loadData()
  475. }
  476. })
  477. },
  478. getParticipateList() {
  479. getAction('/ctop/projectMember/participateList', {
  480. userId: this.userInfo().id,
  481. }).then((res) => {
  482. if (res.code == 0) {
  483. this.dataElse = res.result
  484. }
  485. })
  486. },
  487. filterOption(input, option) {
  488. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  489. },
  490. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  491. getALLperson() {
  492. getAction('/sys/user/getAllUserListByCompany', {
  493. userId: this.userInfo().id,
  494. }).then((res) => {
  495. if (res.success) {
  496. this.options = res.result
  497. }
  498. })
  499. },
  500. project(item) {
  501. this.visibleAdd = true
  502. this.accountId = item.accountId
  503. this.projectId = item.projectId
  504. setTimeout(() => {
  505. this.form.setFieldsValue({
  506. transferor: item.userId,
  507. })
  508. }, 0)
  509. this.getALLperson()
  510. },
  511. account(item) {
  512. this.visibleAccount = true
  513. this.accountId = item.accountId
  514. this.projectId = item.projectId
  515. this.accountLoading = false
  516. setTimeout(() => {
  517. this.formAccount.setFieldsValue({
  518. projectId: item.projectId,
  519. })
  520. }, 0)
  521. },
  522. handleOkAccount(e) {
  523. this.formAccount.validateFieldsAndScroll((err, values) => {
  524. if (err) {
  525. // 这里做逻辑处理
  526. } else {
  527. this.accountLoading = true
  528. var params = qs.stringify({
  529. projectId: values.projectNewId,
  530. accountId: this.accountId,
  531. })
  532. postAction('/ctop/projectTransferRecord/add', params).then((res) => {
  533. if (res.success) {
  534. this.accountLoading = false
  535. this.visibleAccount = false
  536. this.formAccount.resetFields()
  537. this.loadData()
  538. } else {
  539. this.$message.error(res.message)
  540. }
  541. })
  542. }
  543. })
  544. },
  545. handleOkAdd(e) {
  546. this.form.validateFieldsAndScroll((err, values) => {
  547. if (err) {
  548. // 这里做逻辑处理
  549. } else {
  550. this.confirmLoading = true
  551. var params = {
  552. ...values,
  553. }
  554. params.transferorDate = moment(values.transferorDate).format('YYYY-MM-DD')
  555. params.assigneeDate = moment(values.assigneeDate)
  556. // .add(1, 'day')
  557. .format('YYYY-MM-DD')
  558. params.projectId = this.projectId
  559. params.accountId = this.accountId
  560. params.status = 0
  561. postAction('/ctop/transferAccount/add', params).then((res) => {
  562. if (res.success) {
  563. this.confirmLoading = false
  564. this.visibleAdd = false
  565. this.form.resetFields()
  566. } else {
  567. this.$message.error(res.message)
  568. }
  569. })
  570. }
  571. })
  572. },
  573. },
  574. }
  575. </script>
  576. <style scoped>
  577. @import '~@assets/less/common.less';
  578. </style>