ProjectMemberList.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007
  1. <style>
  2. .my-project .ant-tabs-nav-scroll {
  3. display: flex;
  4. justify-content: center;
  5. }
  6. .close-account-my-project .ant-modal-footer .ant-btn-primary {
  7. display: none;
  8. }
  9. .only .ant-badge-count {
  10. right: -16px;
  11. }
  12. </style>
  13. <template>
  14. <a-card
  15. :bordered="false"
  16. :tabList="tabListNoTitle"
  17. :activeTabKey="noTitleKey"
  18. @tabChange="(key) => onTabChange(key, 'noTitleKey')"
  19. class="my-project"
  20. >
  21. <!-- 查询区域 -->
  22. <div class="table-page-search-wrapper">
  23. <a-form layout="inline">
  24. <a-row :gutter="24">
  25. <a-col :md="6" :sm="8">
  26. <a-form-item label="项目名称">
  27. <a-input placeholder="请输入项目名称" v-model="keyWord"></a-input>
  28. </a-form-item>
  29. </a-col>
  30. <a-col :md="6" :sm="8">
  31. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  32. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  33. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  34. </span>
  35. </a-col>
  36. </a-row>
  37. </a-form>
  38. </div>
  39. <!-- table区域-begin -->
  40. <div>
  41. <a-table
  42. ref="table"
  43. size="middle"
  44. bordered
  45. rowKey="id"
  46. :columns="columns"
  47. :dataSource="dataSource"
  48. :pagination="ipagination"
  49. :loading="loading"
  50. >
  51. <span slot="maxBid" slot-scope="maxBid">{{ maxBid / 1000 }}</span>
  52. <span slot="mediaId" slot-scope="mediaId">{{
  53. mediaId == 1 ? '头条' : mediaId == 2 ? '快手' : mediaId == 3 ? '头条内广' : '快手内广'
  54. }}</span>
  55. <span slot="action" slot-scope="text, record">
  56. <a @click="handleEdit(record)">{{ noTitleKey == 'myProject' ? '查看成员' : '账号绑定' }}</a>
  57. <a-divider type="vertical" />
  58. <a @click="addParams(record)">{{ noTitleKey == 'myProject' ? '新增人员' : '查看账户' }}</a>
  59. <a-divider type="vertical" v-if="noTitleKey == 'myProject'" />
  60. <a-badge :count="record.needExamine" class="only">
  61. <a
  62. @click="projectLook(record)"
  63. v-if="noTitleKey == 'myProject'"
  64. :disabled="record.needExamine == 0 || record.needExamine == null"
  65. >待办事项</a
  66. >
  67. </a-badge>
  68. </span>
  69. </a-table>
  70. </div>
  71. <!-- table区域-end -->
  72. <!-- 查看项目成员 -->
  73. <a-modal
  74. :maskClosable="false"
  75. :title="title"
  76. v-model="visible"
  77. @ok="handleOk"
  78. width="800px"
  79. class="close-account-my-project"
  80. >
  81. <div style="display: flex; line-height: 50px; flex-wrap: wrap">
  82. <div style="width: 25%; text-align: center" v-for="(item, index) of memberList" :key="index">
  83. <a-tag color="#2db7f5" @close="log(item.id)" closable>
  84. {{ item.userName }}
  85. <a-divider type="vertical" />
  86. {{ item.roleCode | roleCode }}
  87. </a-tag>
  88. </div>
  89. </div>
  90. </a-modal>
  91. <!-- 添加项目成员 -->
  92. <a-modal
  93. :maskClosable="false"
  94. title="添加项目成员"
  95. v-model="visibleAdd"
  96. @ok="handleOkAdd"
  97. :confirmLoading="confirmLoading"
  98. >
  99. <!-- /sys/user/getAllUserList -->
  100. <a-select
  101. v-model="appId"
  102. showSearch
  103. allowClear
  104. mode="multiple"
  105. placeholder="请选择成员"
  106. optionFilterProp="children"
  107. style="width: 100%"
  108. @focus="handleFocus"
  109. @blur="handleBlur"
  110. @change="handleChange"
  111. :filterOption="true"
  112. @search="search"
  113. :maxTagCount="1"
  114. >
  115. <a-select-option
  116. v-for="appModel in options"
  117. :key="appModel.userId + new Date().getTime()"
  118. :value="appModel.userId"
  119. >
  120. {{ appModel.realName }}
  121. &#12288;&#12288;{{ appModel.roleName }}
  122. </a-select-option>
  123. </a-select>
  124. </a-modal>
  125. <!-- 账号绑定 -->
  126. <a-modal
  127. :maskClosable="false"
  128. title="账号绑定"
  129. v-model="visibleBind"
  130. @ok="handleSubmit"
  131. @cancel="handleCancel"
  132. :width="800"
  133. :okButtonProps="{ props: { disabled: false } }"
  134. :cancelButtonProps="{ props: { disabled: false } }"
  135. >
  136. <a-form :form="formEdit">
  137. <a-form-item
  138. label="选择方式"
  139. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  140. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  141. >
  142. <a-radio-group buttonStyle="solid" v-model="mode" @change="onChageLogin">
  143. <a-radio-button value="authorization">授权</a-radio-button>
  144. <a-radio-button value="login">登录</a-radio-button>
  145. </a-radio-group>
  146. </a-form-item>
  147. <div v-if="mode == 'authorization'">
  148. <a-form-item
  149. label="媒体:"
  150. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  151. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  152. >
  153. <a-radio-group buttonStyle="outline" v-model="loginType">
  154. <a-radio-button value="kuaishou">快手</a-radio-button>
  155. <a-radio-button value="bytedance">头条</a-radio-button>
  156. </a-radio-group>
  157. <br />
  158. <span style="color: red" v-if="loginType == 'bytedance'"
  159. >*重要:如存在一户多开情况,请勾选所有子账号进行授权!!!</span
  160. >
  161. </a-form-item>
  162. <a-form-item
  163. label="授权时间:"
  164. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  165. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  166. >
  167. <a-date-picker
  168. v-model="dateValue"
  169. style="width: 180px;"
  170. :allowClear="false"
  171. format="YYYY-MM-DD"
  172. :disabled-date="disabledDate"
  173. @change="handleCostTimeChange"
  174. />
  175. </a-form-item>
  176. <a-form-item
  177. label="开户代理商:"
  178. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  179. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  180. v-if="loginType == 'kuaishou'"
  181. >
  182. <a-radio-group buttonStyle="outline" v-model="id">
  183. <!-- <a-radio-button value="0">否</a-radio-button>
  184. <a-radio-button value="1">是</a-radio-button> -->
  185. <a-radio-button v-for="item in authConfigList" :key="item.id" :value="item.id">{{
  186. item.agentName
  187. }}</a-radio-button>
  188. </a-radio-group>
  189. </a-form-item>
  190. <a-form-item
  191. label="系统类型:"
  192. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  193. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  194. >
  195. <a-radio-group buttonStyle="outline" v-model="systemType">
  196. <a-radio-button value="不限">不限</a-radio-button>
  197. <a-radio-button value="ios">ios</a-radio-button>
  198. <a-radio-button value="android">android</a-radio-button>
  199. <a-radio-button value="4">其他</a-radio-button>
  200. </a-radio-group>
  201. <a-input v-model="systemTypeName" v-if="systemType == '4'" placeholder="请输入系统类型" />
  202. </a-form-item>
  203. <a-form-item
  204. label="预警金额"
  205. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  206. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  207. >
  208. <!-- <a-input v-decorator="['warningAmount', { rules: [{ required: true, message: '请输入预警金额' }] }]" /> -->
  209. <a-input-number
  210. style="width: 50%"
  211. v-decorator="[
  212. 'warningAmount',
  213. { rules: [{ required: true, message: '请输入预警金额' }], initialValue: 5000 },
  214. ]"
  215. />
  216. </a-form-item>
  217. <a-form-item
  218. label="预警比例"
  219. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  220. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  221. >
  222. <a-input-number
  223. :step="0.1"
  224. style="width: 50%"
  225. v-decorator="[
  226. 'warningProportion',
  227. { rules: [{ required: true, message: '请输入预警比例' }], initialValue: 1.5 },
  228. ]"
  229. />
  230. </a-form-item>
  231. </div>
  232. <div v-else>
  233. <a-form-item
  234. label="媒体:"
  235. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  236. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  237. >
  238. <a-radio-group buttonStyle="outline" v-model="loginType">
  239. <a-radio-button value="pangolin">穿山甲</a-radio-button>
  240. </a-radio-group>
  241. </a-form-item>
  242. <a-form-item
  243. label="账号:"
  244. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  245. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  246. v-show="mode == 'login'"
  247. >
  248. <a-input v-model="accountName" placeholder="请输入账户名" />
  249. </a-form-item>
  250. <a-form-item
  251. label="密码:"
  252. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  253. :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
  254. v-show="mode == 'login'"
  255. >
  256. <a-input type="password" v-model="password" placeholder="请输入密码" />
  257. </a-form-item>
  258. </div>
  259. <a-form-item
  260. label="自动投放"
  261. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  262. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  263. >
  264. <a-radio-group
  265. buttonStyle="outline"
  266. v-decorator="[
  267. 'autoDelivery',
  268. { rules: [{ required: true, message: '请选择是否自动投放' }], initialValue: 1 },
  269. ]"
  270. >
  271. <a-radio-button :value="1">允许</a-radio-button>
  272. <a-radio-button :value="3">禁止</a-radio-button>
  273. </a-radio-group>
  274. </a-form-item>
  275. <a-form-item
  276. label="物料同步"
  277. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  278. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  279. >
  280. <checkBoxGroup
  281. :options="[
  282. { label: '不同步', value: 0 },
  283. { label: '应用包', value: 1 },
  284. { label: '人群包', value: 2, disabled:true},
  285. { label: '定向包', value: 3, disabled:true },
  286. ]"
  287. v-decorator="['materialType', { rules: [{ required: true, message: '请选择同步物料' }], initialValue: [0] }]"
  288. @change="changeData"
  289. />
  290. </a-form-item>
  291. </a-form>
  292. </a-modal>
  293. <!-- 查看项目下的账号 -->
  294. <a-modal
  295. :maskClosable="false"
  296. :title="titleAccount"
  297. v-model="visibleAccount"
  298. @ok="handleOk"
  299. width="800px"
  300. class="close-account-my-project"
  301. >
  302. <a-table
  303. ref="table"
  304. size="middle"
  305. bordered
  306. rowKey="id"
  307. :columns="columnsAccount"
  308. :dataSource="dataAccount"
  309. :pagination="ipaginationAccount"
  310. :loading="loadingAccount"
  311. >
  312. <span slot="createTime" slot-scope="createTime">{{ createTime | getDate }}</span>
  313. </a-table>
  314. </a-modal>
  315. <!-- 待办事件审核 -->
  316. <a-modal
  317. :maskClosable="false"
  318. title="待办事件审核"
  319. v-model="projectVisible"
  320. @ok="handleOkProject"
  321. width="800px"
  322. class="close-account-my-project"
  323. :footer="null"
  324. >
  325. <a-table
  326. ref="table"
  327. size="middle"
  328. bordered
  329. rowKey="id"
  330. :columns="columnsProject"
  331. :dataSource="dataProject"
  332. :pagination="ipaginationAccount"
  333. :loading="loadingAccount"
  334. >
  335. <span slot="action" slot-scope="text, record">
  336. <a @click="projectEdit(record, 1)">通过</a>
  337. <a-divider type="vertical" />
  338. <a @click="projectEdit(record, 2)">拒绝</a>
  339. </span>
  340. </a-table>
  341. </a-modal>
  342. </a-card>
  343. </template>
  344. <script>
  345. import moment from 'moment';
  346. import { httpAction, getAction, deleteAction, putAction } from '@/api/manage'
  347. import { mapGetters } from 'vuex'
  348. import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  349. import { JeecgListMixin } from '@/mixins/ipagination'
  350. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  351. const myProjectColumns = [
  352. {
  353. title: '项目名称',
  354. align: 'center',
  355. dataIndex: 'projectName',
  356. },
  357. {
  358. title: '广告主名称',
  359. align: 'center',
  360. dataIndex: 'advertiserId_dictText',
  361. },
  362. {
  363. title: '产品名称',
  364. align: 'center',
  365. dataIndex: 'productId_dictText',
  366. },
  367. {
  368. title: '运营负责人',
  369. align: 'center',
  370. dataIndex: 'responsibleId_dictText',
  371. },
  372. {
  373. title: '设计负责人',
  374. align: 'center',
  375. dataIndex: 'designResponsibleId_dictText',
  376. },
  377. {
  378. title: '媒体类型',
  379. align: 'center',
  380. dataIndex: 'mediaId',
  381. scopedSlots: {
  382. customRender: 'mediaId',
  383. },
  384. },
  385. {
  386. title: '最高出价',
  387. align: 'center',
  388. dataIndex: 'maxBid',
  389. scopedSlots: {
  390. customRender: 'maxBid',
  391. },
  392. },
  393. {
  394. title: '操作',
  395. dataIndex: 'action',
  396. align: 'center',
  397. scopedSlots: {
  398. customRender: 'action',
  399. },
  400. },
  401. ]
  402. const participationColumns = [
  403. {
  404. title: '项目名称',
  405. align: 'center',
  406. dataIndex: 'projectName',
  407. },
  408. {
  409. title: '广告主名称',
  410. align: 'center',
  411. dataIndex: 'advertiserName',
  412. },
  413. {
  414. title: '产品名称',
  415. align: 'center',
  416. dataIndex: 'productName',
  417. },
  418. {
  419. title: '运营负责人',
  420. align: 'center',
  421. dataIndex: 'responsibleName',
  422. },
  423. {
  424. title: '设计负责人',
  425. align: 'center',
  426. dataIndex: 'designResponsibleName',
  427. },
  428. {
  429. title: '媒体类型',
  430. align: 'center',
  431. dataIndex: 'mediaId',
  432. scopedSlots: {
  433. customRender: 'mediaId',
  434. },
  435. },
  436. {
  437. title: '最高出价',
  438. align: 'center',
  439. dataIndex: 'maxBid',
  440. scopedSlots: {
  441. customRender: 'maxBid',
  442. },
  443. },
  444. {
  445. title: '操作',
  446. dataIndex: 'action',
  447. align: 'center',
  448. scopedSlots: {
  449. customRender: 'action',
  450. },
  451. },
  452. ]
  453. export default {
  454. name: 'ProjectMemberList',
  455. components: {
  456. JSelectUserByDep,
  457. checkBoxGroup
  458. },
  459. mixins: [JeecgListMixin],
  460. data() {
  461. return {
  462. moment,
  463. dateValue: '',
  464. authConfigList:[],
  465. title: '',
  466. titleAccount: '',
  467. description: '我的项目',
  468. // 表头
  469. visible: false,
  470. keyWord: '',
  471. mode: 'authorization',
  472. mediaId: '2',
  473. accountName: '',
  474. password: '',
  475. loginType: 'kuaishou',
  476. id: undefined,
  477. formEdit: this.$form.createForm(this),
  478. record: '',
  479. systemType: '不限',
  480. systemTypeName: '',
  481. queryParam: {
  482. projectId: '',
  483. userId: '',
  484. },
  485. projectId: '',
  486. user: '',
  487. tabListNoTitle: [
  488. {
  489. key: 'myProject',
  490. tab: '我管理的',
  491. },
  492. {
  493. key: 'participation',
  494. tab: '我参与的',
  495. },
  496. ],
  497. noTitleKey: 'participation',
  498. columns: participationColumns,
  499. columnsAccount: [
  500. {
  501. title: '账户id',
  502. align: 'center',
  503. dataIndex: 'accountId',
  504. },
  505. {
  506. title: '账户名称',
  507. align: 'center',
  508. dataIndex: 'authName',
  509. },
  510. {
  511. title: '所属人',
  512. align: 'center',
  513. dataIndex: 'userName',
  514. },
  515. {
  516. title: '授权时间',
  517. align: 'center',
  518. dataIndex: 'createTime',
  519. scopedSlots: {
  520. customRender: 'createTime',
  521. },
  522. },
  523. ],
  524. ipaginationAccount: {
  525. current: 1,
  526. pageSize: 10,
  527. // pageSizeOptions: ['10', '20', '30'],
  528. showTotal: (total, range) => {
  529. return range[0] + '-' + range[1] + ' 共' + total + '条'
  530. },
  531. showQuickJumper: true,
  532. // showSizeChanger: true,
  533. total: 0,
  534. onChange: (current) => {
  535. // 切换分页时的回调,
  536. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  537. this.ipaginationAccount.current = current
  538. },
  539. },
  540. loadingAccount: false,
  541. projectVisible: false,
  542. columnsProject: [
  543. {
  544. title: '转让账户',
  545. align: 'center',
  546. dataIndex: 'accountId',
  547. },
  548. {
  549. title: '受让人姓名',
  550. align: 'center',
  551. dataIndex: 'assigneeName',
  552. },
  553. {
  554. title: '转户人姓名',
  555. align: 'center',
  556. dataIndex: 'transferorName',
  557. },
  558. {
  559. title: '受让人绩效开始时间',
  560. align: 'center',
  561. dataIndex: 'assigneeDate',
  562. },
  563. {
  564. title: '转户人绩效结束时间',
  565. align: 'center',
  566. dataIndex: 'transferorDate',
  567. },
  568. {
  569. title: '操作',
  570. dataIndex: 'action',
  571. align: 'center',
  572. scopedSlots: {
  573. customRender: 'action',
  574. },
  575. },
  576. ],
  577. dataProject: [],
  578. dataAccount: [],
  579. dataSource: [],
  580. dataElse: [],
  581. loading: false,
  582. memberList: [],
  583. visibleAdd: false,
  584. member: [],
  585. itemJson: null,
  586. visibleBind: false,
  587. bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
  588. bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
  589. appId: [],
  590. list: [],
  591. options: [],
  592. visibleAccount: false,
  593. confirmLoading: false,
  594. }
  595. },
  596. computed: {
  597. importExcelUrl: function () {
  598. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  599. },
  600. },
  601. filters: {
  602. roleCode(value) {
  603. var state = {
  604. clip: '剪辑',
  605. shot: '拍摄',
  606. plan: '策划',
  607. plane: '平面',
  608. admin: '管理员',
  609. operator: '运营专员',
  610. kuaishouOperationManager: '快手运营经理',
  611. designTeamLeader: '设计组长',
  612. planeLeader: '平面组长',
  613. touTiaoOperationManager: '头条运营经理',
  614. operationAssistant: '运营助理',
  615. }
  616. if (value) {
  617. return state[value]
  618. } else {
  619. return '暂无'
  620. }
  621. },
  622. getDate(value) {
  623. let date = new Date(value)
  624. let y = date.getFullYear()
  625. let MM = date.getMonth() + 1
  626. MM = MM < 10 ? '0' + MM : MM
  627. let d = date.getDate()
  628. d = d < 10 ? '0' + d : d
  629. return y + '-' + MM + '-' + d
  630. },
  631. },
  632. watch: {
  633. 'ipagination.current': function (n, o) {
  634. console.log(n, o)
  635. if (this.noTitleKey == 'participation') {
  636. this.getParticipateList()
  637. } else {
  638. this.getResponsibleList()
  639. }
  640. },
  641. },
  642. methods: {
  643. changeData(data) {
  644. if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
  645. data.splice(
  646. data.findIndex((item) => item == 1),
  647. 1
  648. )
  649. } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
  650. data.splice(0, data.length - 1)
  651. } else if (data.length == 0) {
  652. data.push(1)
  653. }
  654. },
  655. getFormFieldValue(field) {
  656. return this.formEdit.getFieldValue(field)
  657. },
  658. // /ctop/userAllocation/getAccountsByProjectId projectId userId
  659. handleCostTimeChange(date, dateString) {
  660. console.log(dateString, 'dateString');
  661. this.dateValue = dateString;
  662. },
  663. disabledDate(current) {
  664. if (this.loginType == 'kuaishou') {
  665. return current && !(current > moment().subtract(7, 'days'));
  666. }
  667. else if (this.loginType == 'bytedance') {
  668. return false;
  669. }
  670. // TODO 时间限制格式
  671. // return current && !(current > moment().subtract(7, 'days'));
  672. // return current && !(current > (moment().subtract(7, 'days')) && current < moment());
  673. // return false;
  674. },
  675. projectLook(item) {
  676. var params = {}
  677. params.projectId = item.id
  678. params.status = 0
  679. getAction('/ctop/transferAccount/list', params).then((res) => {
  680. if (res.success) {
  681. this.projectVisible = true
  682. this.dataProject = res.result.map((item, index) => {
  683. return {
  684. ...item,
  685. key: index,
  686. }
  687. })
  688. this.ipaginationAccount.total = res.result.length
  689. }
  690. })
  691. },
  692. projectEdit(item, status) {
  693. var params = {}
  694. params.id = item.id
  695. params.status = status
  696. params.auditor = this.userInfo().id
  697. putAction('/ctop/transferAccount/edit', params).then((res) => {
  698. if (res.success) {
  699. this.projectVisible = false
  700. this.getResponsibleList()
  701. }
  702. })
  703. },
  704. handleOkProject() {},
  705. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  706. add(value, key) {
  707. var dataValue = value.split(',')
  708. var dataKey = key.split(',')
  709. var jsonArr = []
  710. for (let i = 0; i < dataValue.length; i++) {
  711. jsonArr.push({
  712. userId: dataKey[i],
  713. userName: dataValue[i],
  714. })
  715. }
  716. this.member = jsonArr
  717. },
  718. log(id) {
  719. deleteAction('/ctop/projectMember/delete', {
  720. id: id,
  721. }).then((res) => {
  722. if (res.success) {
  723. this.getMemberList(this.projectId)
  724. this.$message.success('删除成功')
  725. } else {
  726. this.$message.error(res.message)
  727. }
  728. })
  729. },
  730. onTabChange(key, type) {
  731. this[type] = key
  732. this.keyWord = ''
  733. this.ipagination.current = 1
  734. if (key == 'myProject') {
  735. this.columns = myProjectColumns
  736. this.getResponsibleList()
  737. } else {
  738. this.columns = participationColumns
  739. this.getParticipateList()
  740. }
  741. },
  742. getResponsibleList() {
  743. //我管理的
  744. this.dataSource = []
  745. this.dataElse = []
  746. this.loading = true
  747. getAction('/ctop/project/responsibleListV2', {
  748. userId: this.userInfo().id,
  749. pageSize: this.ipagination.pageSize,
  750. pageNo: this.ipagination.current,
  751. projectName: this.keyWord,
  752. }).then((res) => {
  753. if (res.code == 0) {
  754. this.loading = false
  755. this.dataSource = res.result.records
  756. this.dataElse = res.result.records
  757. this.ipagination.total = res.result.total
  758. }
  759. })
  760. },
  761. getParticipateList() {
  762. //我参与的
  763. this.dataSource = []
  764. this.dataElse = []
  765. this.loading = true
  766. getAction('/ctop/projectMember/participateListV2', {
  767. userId: this.userInfo().id,
  768. pageSize: this.ipagination.pageSize,
  769. pageNo: this.ipagination.current,
  770. projectName: this.keyWord,
  771. }).then((res) => {
  772. if (res.code == 0) {
  773. this.dataSource = res.result.records
  774. this.dataElse = res.result.records
  775. this.ipagination.total = res.result.total
  776. this.loading = false
  777. }
  778. })
  779. },
  780. getMemberList(projectId) {
  781. //成员查看
  782. this.memberList = []
  783. getAction('/ctop/projectMember/getMemberList', {
  784. projectId: projectId,
  785. }).then((res) => {
  786. if (res.code == 0) {
  787. this.visible = true
  788. this.memberList = res.result
  789. }
  790. })
  791. },
  792. handleOk(e) {
  793. this.visible = false
  794. },
  795. handleOkAdd(e) {
  796. var params = {}
  797. params.projectId = this.itemJson.id
  798. params.projectName = this.itemJson.projectName
  799. params.memberArr = this.appId
  800. this.confirmLoading = true
  801. httpAction('/ctop/projectMember/batchAdd', params, 'post').then((res) => {
  802. this.confirmLoading = false
  803. if (res.success) {
  804. this.visibleAdd = false
  805. this.appId = []
  806. this.$message.success('添加成功')
  807. } else {
  808. this.$message.error('添加失败')
  809. }
  810. })
  811. },
  812. getAllUserList(value) {
  813. getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
  814. if (res.success) {
  815. this.list = res.result.list
  816. this.options = res.result.list
  817. }
  818. })
  819. },
  820. addParams(item) {
  821. if (this.noTitleKey == 'myProject') {
  822. this.visibleAdd = true
  823. this.itemJson = item
  824. this.getAllUserList()
  825. } else {
  826. this.visibleAccount = true
  827. this.titleAccount = item.projectName
  828. this.loadingAccount = true
  829. getAction('/ctop/userAllocation/getAccountsByProjectId', {
  830. projectId: item.projectId,
  831. userId: this.userInfo().id,
  832. }).then((res) => {
  833. if (res.success) {
  834. this.dataAccount = res.result
  835. this.loadingAccount = false
  836. this.ipaginationAccount.total = res.result.length
  837. }
  838. })
  839. }
  840. },
  841. handleAdd() {},
  842. handleEdit(item) {
  843. if (this.noTitleKey == 'myProject') {
  844. this.title = item.projectName
  845. this.projectId = item.id
  846. this.getMemberList(item.id)
  847. } else {
  848. this.mode = 'authorization'
  849. this.loginType = item.mediaId == '1' || item.mediaId == '3' ? 'bytedance' : 'kuaishou'
  850. this.record = item
  851. this.visibleBind = true
  852. }
  853. },
  854. handleDelete(id) {},
  855. onChageLogin(e) {
  856. if (this.mode == 'login') {
  857. this.loginType = 'pangolin'
  858. } else {
  859. this.loginType = 'kuaishou'
  860. this.systemType = '不限'
  861. }
  862. },
  863. handleCancel() {
  864. this.visibleBind = false
  865. this.formEdit.resetFields();
  866. },
  867. handleSubmit() {
  868. let params = {}
  869. params.advertiserId = this.record.advertiserId
  870. params.advertiser_name = this.record.advertiserName
  871. params.userId = this.userInfo().id
  872. params.userName = this.userInfo().realname
  873. params.projectId = this.record.projectId
  874. params.projectName = this.record.projectName
  875. params.systemType = this.systemType == '4' ? this.systemTypeName : this.systemType
  876. params.authBeginTime = this.dateValue;
  877. // 触发表单验证
  878. this.formEdit.validateFields((err, values) => {
  879. if (!err) {
  880. params.materialType = values.materialType
  881. params.autoDelivery = values.autoDelivery
  882. if (this.mode == 'login') {
  883. params.accountName = this.accountName
  884. params.password = this.password
  885. params.loginType = this.loginType
  886. httpAction(this.bindAccountLoginUrl, params, 'post').then((res) => {
  887. if (res.success) {
  888. this.$message.success('绑定成功')
  889. this.accountName = ''
  890. this.password = ''
  891. this.loginType = 'kuaishou'
  892. this.visibleBind = false
  893. } else {
  894. this.$message.error(res.message)
  895. }
  896. })
  897. }
  898. // 授权登录
  899. if (this.mode == 'authorization') {
  900. params.authorizationType = this.loginType
  901. if (this.loginType == 'kuaishou') {
  902. params.mediaId = this.mediaId
  903. params.id = this.id
  904. } else if (this.loginType == 'bytedance') {
  905. params.mediaId = 1
  906. }
  907. params.warningAmount = values.warningAmount
  908. params.warningProportion = values.warningProportion
  909. httpAction(this.bindAuthorizationUrl, params, 'post').then((res) => {
  910. if (res.success) {
  911. window.open(res.message, '_blank')
  912. this.visibleBind = false
  913. this.formEdit.resetFields();
  914. } else {
  915. alert('绑定失败')
  916. }
  917. })
  918. }
  919. }
  920. })
  921. },
  922. searchReset() {
  923. this.keyWord = ''
  924. this.ipagination.current = 1
  925. // this.dataSource = this.dataElse
  926. if (this.noTitleKey == 'participation') {
  927. this.getParticipateList()
  928. } else {
  929. this.getResponsibleList()
  930. }
  931. },
  932. searchQuery() {
  933. this.ipagination.current = 1
  934. if (this.noTitleKey == 'participation') {
  935. this.getParticipateList()
  936. } else {
  937. this.getResponsibleList()
  938. }
  939. // this.dataSource = this.dataElse.filter(item => {
  940. // return item.projectName.toLowerCase().indexOf(this.keyWord.toLowerCase()) > -1
  941. // })
  942. },
  943. handleChange(value, options) {
  944. // this.appId = value
  945. },
  946. getElseData(value) {
  947. this.getStatistics()
  948. },
  949. handleBlur() {},
  950. handleFocus() {},
  951. search(value) {
  952. this.options = []
  953. if (value != '') {
  954. // this.options = this.list.filter(item => {
  955. // var data = item.realName + ' ' + item.roleName
  956. // return data.toLowerCase().indexOf(value.toLowerCase()) > -1
  957. // })
  958. // this.options = [...this.options]
  959. this.getAllUserList(value)
  960. } else {
  961. this.getAllUserList()
  962. }
  963. },
  964. getauthConfigList() {
  965. getAction('/auth/oauthConfig/list', {
  966. status: 0,
  967. mediaId: 2,
  968. }).then((res) => {
  969. console.log(res)
  970. this.authConfigList = res.result
  971. if (res.result.length > 0) {
  972. this.id = res.result[0].id
  973. }
  974. })
  975. },
  976. },
  977. mounted() {
  978. this.$nextTick(() => {
  979. this.getParticipateList()
  980. this.getauthConfigList()
  981. })
  982. },
  983. }
  984. </script>
  985. <style scoped>
  986. @import '~@assets/less/common.less';
  987. </style>