UserAllocationList.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  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="mediaId" slot-scope="text">{{ text == 1 ? '头条' : '快手' }}</span>
  101. <div slot="authName" slot-scope="text, record">
  102. <span>{{ text }}</span>
  103. <a-button size="small" @click="renew(record)" style="float: right" :loading="record.showVideo"> 更新 </a-button>
  104. <!-- showVideo -->
  105. </div>
  106. <span slot="action" slot-scope="text, record">
  107. <a @click="account(record)">转移项目</a>
  108. <a-divider type="vertical" />
  109. <a @click="project(record)">转让账户</a>
  110. <a-divider type="vertical" />
  111. <a @click="handleEdit(record)">编辑</a>
  112. <a-divider type="vertical" v-show="roleCode == 'admin'" />
  113. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" v-show="roleCode == 'admin'">
  114. <a>删除</a>
  115. </a-popconfirm>
  116. </span>
  117. </a-table>
  118. </div>
  119. <!-- table区域-end -->
  120. <!-- 表单区域 -->
  121. <userAllocation-modal ref="modalForm" @ok="modalFormOk"></userAllocation-modal>
  122. <!-- 添加项目成员 -->
  123. <a-modal title="账户转让" v-model="visibleAdd" @ok="handleOkAdd" :confirmLoading="confirmLoading" :width="800">
  124. <a-form :form="form">
  125. <a-form-item
  126. label="转户人"
  127. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  128. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  129. >
  130. <a-select
  131. v-decorator="['transferor']"
  132. showSearch
  133. optionFilterProp="children"
  134. :filterOption="filterOption"
  135. style="width: 100%"
  136. disabled
  137. >
  138. <a-select-option :value="item.userId" v-for="(item, index) of options" :key="index">{{
  139. item.realName
  140. }}</a-select-option>
  141. </a-select>
  142. </a-form-item>
  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="['assignee', { rules: [{ required: true, message: '请选择受让人' }] }]"
  150. placeholder="请选择受让人"
  151. showSearch
  152. optionFilterProp="children"
  153. :filterOption="filterOption"
  154. style="width: 100%"
  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-date-picker
  167. v-decorator="['transferorDate', { rules: [{ required: true, message: '请选择转户人绩效截止日期' }] }]"
  168. />
  169. <!-- , { initialValue:moment(new Date(), 'YYYY-MM-DD') } -->
  170. </a-form-item>
  171. <a-form-item
  172. label="受让人绩效开始日期"
  173. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  174. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  175. >
  176. <a-date-picker
  177. v-decorator="['assigneeDate', { rules: [{ required: true, message: '请选择受让人绩效截止日期' }] }]"
  178. />
  179. </a-form-item>
  180. <!--
  181. <a-form-item
  182. label="账号:"
  183. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  184. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  185. v-show="mode == 'login'"
  186. >
  187. <a-input v-model="accountName" placeholder="请输入账户名" />
  188. </a-form-item>
  189. -->
  190. </a-form>
  191. </a-modal>
  192. <a-modal
  193. title="项目转移"
  194. v-model="visibleAccount"
  195. @ok="handleOkAccount"
  196. :confirmLoading="accountLoading"
  197. :width="800"
  198. >
  199. <a-form :form="formAccount">
  200. <a-form-item
  201. label="原项目"
  202. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  203. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  204. >
  205. <a-select
  206. v-decorator="[
  207. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  208. { rules: [{ required: true, message: '请选择项目!' }] },
  209. ]"
  210. showSearch
  211. optionFilterProp="children"
  212. :filterOption="filterOption"
  213. disabled
  214. >
  215. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  216. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  217. item.mediaId == '1'
  218. ? '头条'
  219. : item.mediaId == '2'
  220. ? '快手'
  221. : item.mediaId == '3'
  222. ? '头条内广'
  223. : '快手内广'
  224. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  225. </a-select-option>
  226. </a-select>
  227. </a-form-item>
  228. <a-form-item
  229. label="转移项目"
  230. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  231. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  232. >
  233. <a-select
  234. v-decorator="[
  235. 'projectNewId', // 给表单赋值或拉取表单时,该input对应的key
  236. { rules: [{ required: true, message: '请选择项目!' }] },
  237. ]"
  238. showSearch
  239. optionFilterProp="children"
  240. :filterOption="filterOption"
  241. >
  242. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  243. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  244. item.mediaId == '1'
  245. ? '头条'
  246. : item.mediaId == '2'
  247. ? '快手'
  248. : item.mediaId == '3'
  249. ? '头条内广'
  250. : '快手内广'
  251. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  252. </a-select-option>
  253. </a-select>
  254. </a-form-item>
  255. <!--
  256. <a-form-item
  257. label="账号:"
  258. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  259. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  260. v-show="mode == 'login'"
  261. >
  262. <a-input v-model="accountName" placeholder="请输入账户名" />
  263. </a-form-item>
  264. -->
  265. </a-form>
  266. </a-modal>
  267. </a-card>
  268. </template>
  269. <script>
  270. import UserAllocationModal from './modules/UserAllocationModal'
  271. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  272. import { mapGetters } from 'vuex'
  273. import { httpAction, getAction, deleteAction } from '@/api/manage'
  274. import treeSelect from './modules/Treeselect'
  275. import moment from 'moment'
  276. import { postAction } from '../../../api/manage'
  277. import qs from 'qs'
  278. export default {
  279. name: 'UserAllocationList',
  280. mixins: [JeecgListMixin],
  281. components: {
  282. UserAllocationModal,
  283. treeSelect,
  284. },
  285. data() {
  286. return {
  287. description: '账号绑定管理页面',
  288. visibleAdd: false,
  289. visibleAccount: false,
  290. options: [],
  291. optionsAll: [],
  292. dataElse: [],
  293. // 表头
  294. columns: [
  295. {
  296. title: '账号所属人',
  297. align: 'center',
  298. dataIndex: 'userName',
  299. },
  300. {
  301. title: '授权',
  302. align: 'center',
  303. dataIndex: 'accountId',
  304. },
  305. {
  306. title: '广告主名称',
  307. align: 'center',
  308. dataIndex: 'advertiserId_dictText',
  309. },
  310. {
  311. title: '项目名称',
  312. align: 'center',
  313. dataIndex: 'projectId_dictText',
  314. },
  315. // {
  316. // title: '输入账号 --登陆',
  317. // align:"center",
  318. // dataIndex: 'accountName'
  319. // },
  320. {
  321. title: '授权名称',
  322. align: 'center',
  323. dataIndex: 'authName',
  324. scopedSlots: {
  325. customRender: 'authName',
  326. },
  327. },
  328. {
  329. title: '平台类型',
  330. align: 'center',
  331. dataIndex: 'mediaId',
  332. scopedSlots: {
  333. customRender: 'mediaId',
  334. },
  335. },
  336. {
  337. title: '预警金额',
  338. align: 'center',
  339. dataIndex: 'warningAmount',
  340. },
  341. {
  342. title: '预警比例',
  343. align: 'center',
  344. dataIndex: 'warningProportion',
  345. },
  346. // accountStatus:0启用;1禁用
  347. {
  348. title: '账户状态',
  349. dataIndex: 'accountStatus',
  350. align: 'center',
  351. scopedSlots: {
  352. customRender: 'accountStatus',
  353. },
  354. },
  355. {
  356. title: '系统名称',
  357. dataIndex: 'systemType',
  358. align: 'center',
  359. },
  360. {
  361. title: '操作',
  362. dataIndex: 'action',
  363. align: 'center',
  364. scopedSlots: {
  365. customRender: 'action',
  366. },
  367. },
  368. ],
  369. url: {
  370. list: '/ctop/userAllocation/list',
  371. delete: '/ctop/userAllocation/delete',
  372. deleteBatch: '/ctop/userAllocation/deleteBatch',
  373. exportXlsUrl: 'ctop/userAllocation/exportXls',
  374. importExcelUrl: 'ctop/userAllocation/importExcel',
  375. },
  376. confirmLoading: false,
  377. accountLoading: false,
  378. projectId: '',
  379. accountId: '',
  380. mediaId: '',
  381. form: this.$form.createForm(this),
  382. formAccount: this.$form.createForm(this),
  383. roleCode: localStorage.getItem('roleCode'),
  384. dataElse: [],
  385. }
  386. },
  387. computed: {
  388. importExcelUrl: function () {
  389. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  390. },
  391. },
  392. mounted() {
  393. this.getParticipateList()
  394. },
  395. methods: {
  396. renew(item) {
  397. console.log(item)
  398. item.showVideo = true
  399. getAction('/ctop/userAllocation/updateAuthName', { accountId: item.accountId, mediaId: item.mediaId }).then(
  400. (res) => {
  401. if (res.success) {
  402. this.loadData()
  403. } else {
  404. this.$message.error('更新数据失败,请稍后重试!!!')
  405. item.showVideo = false
  406. }
  407. }
  408. )
  409. },
  410. moment,
  411. search(value) {
  412. this.optionsAll = []
  413. if (value != '') {
  414. // this.options = this.list.filter(item => {
  415. // var data = item.realName + ' ' + item.roleName
  416. // return data.toLowerCase().indexOf(value.toLowerCase()) > -1
  417. // })
  418. // this.options = [...this.options]
  419. this.getAllUserList(value)
  420. } else {
  421. this.getAllUserList()
  422. }
  423. },
  424. getAllUserList(value) {
  425. getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
  426. if (res.success) {
  427. this.optionsAll = res.result.list
  428. }
  429. })
  430. },
  431. onChangeSwitch(item) {
  432. var params = {}
  433. params.id = item.id
  434. params.accountStatus = item.accountStatus == 0 ? 1 : 0
  435. httpAction('/ctop/userAllocation/edit', params, 'put').then((res) => {
  436. if (res.success) {
  437. this.loadData()
  438. }
  439. })
  440. },
  441. getParticipateList() {
  442. getAction('/ctop/projectMember/participateList', {
  443. userId: this.userInfo().id,
  444. }).then((res) => {
  445. if (res.code == 0) {
  446. this.dataElse = res.result
  447. }
  448. })
  449. },
  450. filterOption(input, option) {
  451. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  452. },
  453. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  454. getALLperson() {
  455. getAction('/sys/user/getAllUserListByCompany', {
  456. userId: this.userInfo().id,
  457. }).then((res) => {
  458. if (res.success) {
  459. this.options = res.result
  460. }
  461. })
  462. },
  463. project(item) {
  464. this.visibleAdd = true
  465. this.accountId = item.accountId
  466. this.projectId = item.projectId
  467. setTimeout(() => {
  468. this.form.setFieldsValue({
  469. transferor: item.userId,
  470. })
  471. }, 0)
  472. this.getALLperson()
  473. },
  474. account(item) {
  475. this.visibleAccount = true
  476. this.accountId = item.accountId
  477. this.projectId = item.projectId
  478. this.accountLoading = false
  479. setTimeout(() => {
  480. this.formAccount.setFieldsValue({
  481. projectId: item.projectId,
  482. })
  483. }, 0)
  484. },
  485. handleOkAccount(e) {
  486. this.formAccount.validateFieldsAndScroll((err, values) => {
  487. if (err) {
  488. // 这里做逻辑处理
  489. } else {
  490. this.accountLoading = true
  491. var params = qs.stringify({
  492. projectId: values.projectNewId,
  493. accountId: this.accountId,
  494. })
  495. postAction('/ctop/projectTransferRecord/add', params).then((res) => {
  496. if (res.success) {
  497. this.accountLoading = false
  498. this.visibleAccount = false
  499. this.formAccount.resetFields()
  500. this.loadData()
  501. } else {
  502. this.$message.error(res.message)
  503. }
  504. })
  505. }
  506. })
  507. },
  508. handleOkAdd(e) {
  509. this.form.validateFieldsAndScroll((err, values) => {
  510. if (err) {
  511. // 这里做逻辑处理
  512. } else {
  513. this.confirmLoading = true
  514. var params = {
  515. ...values,
  516. }
  517. params.transferorDate = moment(values.transferorDate).format('YYYY-MM-DD')
  518. params.assigneeDate = moment(values.assigneeDate)
  519. // .add(1, 'day')
  520. .format('YYYY-MM-DD')
  521. params.projectId = this.projectId
  522. params.accountId = this.accountId
  523. params.status = 0
  524. postAction('/ctop/transferAccount/add', params).then((res) => {
  525. if (res.success) {
  526. this.confirmLoading = false
  527. this.visibleAdd = false
  528. this.form.resetFields()
  529. } else {
  530. this.$message.error(res.message)
  531. }
  532. })
  533. }
  534. })
  535. },
  536. },
  537. }
  538. </script>
  539. <style scoped>
  540. @import '~@assets/less/common.less';
  541. </style>