accountCheckBytedance.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. <style lang="scss" scoped>
  2. .select-project {
  3. width: 50%;
  4. }
  5. .row-item {
  6. display: flex;
  7. justify-content: flex-start;
  8. align-items: center;
  9. }
  10. .row-item:last-of-type {
  11. margin-bottom: 0;
  12. }
  13. .row-item .hint-item {
  14. width: 24px;
  15. min-width: 24px;
  16. align-self: flex-start;
  17. line-height: 20px;
  18. height: 20px;
  19. margin-top: 9px;
  20. }
  21. .row-item .label-item {
  22. position: relative;
  23. align-items: flex-start;
  24. align-self: flex-start;
  25. line-height: 20px;
  26. height: 20px;
  27. margin-top: 10px;
  28. width: 140px;
  29. // min-width: 80px;
  30. .text-item {
  31. font-size: 14px;
  32. width: 120px;
  33. }
  34. }
  35. .row-item .required-item {
  36. width: 4px;
  37. height: 4px;
  38. border-radius: 2px;
  39. background: #f45858;
  40. position: absolute;
  41. right: 10px;
  42. top: 50%;
  43. transform: translateY(-50%);
  44. }
  45. .row-item .input-item {
  46. min-width: 480px;
  47. position: relative;
  48. // height: 35px;
  49. .tip {
  50. font-size: 12px;
  51. color: tomato;
  52. }
  53. .inventory-tags-lists-header {
  54. background-color: #F8F9FA;
  55. border: 1px solid #E4E9ED;
  56. height: 36px;
  57. line-height: 33px;
  58. border-radius: 4px 4px 0 0;
  59. font-weight: bold;
  60. display: flex;
  61. }
  62. .inventory-tags-lists-container {
  63. border: 1px solid #E4E9ED;
  64. margin-top: -1px;
  65. height: 100%;
  66. padding: 4px 0px;
  67. border-radius: 0 0 4px 4px;
  68. }
  69. .inventory-tags-lists-item {
  70. width: 100%;
  71. height: 37px;
  72. line-height: 37px;
  73. padding-left: 12px;
  74. padding-right: 12px;
  75. display: flex;
  76. font-size: 14px;
  77. color: #333;
  78. }
  79. }
  80. </style>
  81. <template>
  82. <div class="select-project">
  83. <a-modal title="账户选择" v-model="showEdit" @ok="handleOk" @cancel="close" width="80%" :confirm-loading="confirmLoading">
  84. <!-- <span style="margin-bottom:15px">是否同步快手主页</span> -->
  85. <div class="row-item">
  86. <div class="hint-item"></div>
  87. <div class="label-item">
  88. <div class="text-item">是否同步快手主页</div>
  89. <!-- <div class="required-item"></div> -->
  90. </div>
  91. <div class="input-item" v-if="showEdit">
  92. <a-form-item>
  93. <a-switch v-model="shieldBackwardSwitch" />
  94. </a-form-item>
  95. </div>
  96. </div>
  97. <div class="row-item">
  98. <div class="hint-item"></div>
  99. <div class="label-item">
  100. <div class="text-item">是否同步全部账户</div>
  101. <!-- <div class="required-item"></div> -->
  102. </div>
  103. <div class="input-item" v-if="showEdit">
  104. <a-form-item>
  105. <a-switch v-model="isMultiagent" />
  106. </a-form-item>
  107. </div>
  108. </div>
  109. <!-- <treeselect
  110. :multiple="multiple"
  111. :disable-branch-nodes="!multiple"
  112. :branch-nodes-first="true"
  113. :options="options"
  114. :load-options="loadOptions"
  115. placeholder="请选择项目"
  116. v-model="value"
  117. :value-consists-of="valueConsistsOf"
  118. :auto-load-root-options="false"
  119. :auto-select-descendants="false"
  120. @select="update"
  121. @input="emitValue"
  122. :limit="2"
  123. :default-options="true"
  124. :limitText="
  125. (count) => {
  126. return '隐藏' + count + '条'
  127. }
  128. "
  129. noChildrenText="该项目下暂无账号"
  130. :noOptionsText="showLoading"
  131. /> -->
  132. <!-- :default-expanded-keys="[2, 3]"
  133. :default-checked-keys="[5]" -->
  134. <el-tree
  135. :data="options"
  136. show-checkbox
  137. node-key="id"
  138. :props="defaultProps"
  139. :load="loadOptions"
  140. lazy
  141. :check-strictly="true"
  142. ref="tree"
  143. @check="update"
  144. >
  145. </el-tree>
  146. </a-modal>
  147. </div>
  148. </template>
  149. <script>
  150. // @open="getParticipateList"
  151. // import the component
  152. import Treeselect from '@riophae/vue-treeselect'
  153. // import the styles
  154. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  155. import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
  156. import { getAction, postAction } from '@/api/manage'
  157. import { mapGetters } from 'vuex'
  158. // We just use `setTimeout()` here to simulate an async operation
  159. // instead of requesting a real API server for demo purpose.
  160. function tqFun(qcArr1) {
  161. var tempArr = []
  162. function bbFun(qcArr) {
  163. for (var i = 0; i < qcArr.length; i++) {
  164. if (qcArr[i] instanceof Array) {
  165. bbFun(qcArr[i])
  166. } else {
  167. tempArr.push(qcArr[i])
  168. }
  169. }
  170. return tempArr
  171. }
  172. return bbFun(qcArr1)
  173. }
  174. let called = false
  175. export default {
  176. data: () => ({
  177. defaultProps: {
  178. children: 'children',
  179. label: 'label',
  180. id: 'id',
  181. },
  182. shieldBackwardSwitch: false,
  183. isMultiagent:false,
  184. showEdit: false,
  185. value: null,
  186. valueConsistsOf: 'LEAF_PRIORITY',
  187. options: [],
  188. showLoading: 'loading...',
  189. confirmLoading:false
  190. }),
  191. props: {
  192. //是否多选
  193. multiple: {
  194. type: Boolean,
  195. default() {
  196. return true
  197. },
  198. },
  199. //判断媒体类型
  200. request: {
  201. type: String,
  202. default() {
  203. return '2,4'
  204. },
  205. },
  206. //一级请求接口
  207. reqUrl: {
  208. type: String,
  209. default() {
  210. return '/ctop/projectMember/participateListByMediaId'
  211. },
  212. },
  213. },
  214. components: {
  215. Treeselect,
  216. },
  217. watch: {
  218. $route(n, o) {},
  219. // appId: {
  220. // handler(n, o) {
  221. // console.log(n)
  222. // if (n.length == 0) {
  223. // if (this.multiple) {
  224. // this.value = []
  225. // } else {
  226. // this.value = ''
  227. // }
  228. // }
  229. // },
  230. // deep: true
  231. // }
  232. },
  233. methods: {
  234. getCheckedKeys() {
  235. console.log(this.$refs.tree.getCheckedKeys())
  236. },
  237. handleOk(e) {
  238. this.confirmLoading = true
  239. var data = this.$refs.tree.getCheckedNodes()
  240. if(!this.isMultiagent){
  241. var dataArr = data.map(item=>{
  242. return {
  243. accountId:item.id.split('@')[0],
  244. userName:item.id.split('@')[2],
  245. userId:item.id.split('@')[1],
  246. }
  247. })
  248. }else{
  249. var dataArr = data.map(item=>{
  250. return item.children.map(c=>{
  251. return {
  252. accountId:c.id,
  253. userId:item.id.split('@')[1],
  254. }
  255. })
  256. })
  257. dataArr = tqFun(dataArr)
  258. }
  259. // console.log(dataArr)
  260. this.showEdit = false
  261. this.$emit('synchro', {treeData:dataArr,shieldBackwardSwitch:this.shieldBackwardSwitch,isMultiagent:this.isMultiagent})
  262. },
  263. close() {
  264. // this.$refs.tree.setCheckedKeys([])
  265. this.shieldBackwardSwitch = false
  266. this.isMultiagent = false
  267. this.showEdit = false
  268. },
  269. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  270. update(node, id) {
  271. console.log(node,node.children)
  272. this.$nextTick(()=>{
  273. if(node.children.length>0){
  274. }else{
  275. getAction('/ctop/userAllocation/getAccountIdListByUserId', {
  276. userId: node.id.split('@')[1],
  277. }).then((res) => {
  278. console.log(res)
  279. node.children = []
  280. if (res.code == 0) {
  281. if (res.result.length > 0&&node.children.length == 0) {
  282. node.children = res.result.map((item) => {
  283. return {
  284. id: item.accountId,
  285. label:
  286. (item.userName.length == 2
  287. ? item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  288. : item.userName.length == 3
  289. ? item.userName + '\xa0\xa0\xa0\xa0'
  290. : item.userName) +
  291. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  292. item.accountId +
  293. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  294. item.authName,
  295. disabled: true,
  296. children:null
  297. }
  298. })
  299. } else {
  300. node.children = null
  301. }
  302. } else {
  303. }
  304. })
  305. }
  306. })
  307. },
  308. emitValue() {
  309. // this.$emit('update:appId', this.value)
  310. },
  311. loadOptions(node, resolve) {
  312. // Typically, do the AJAX stuff here.
  313. // Once the server has responded,
  314. // assign children options to the parent node & call the callback.
  315. console.log(node)
  316. var data = []
  317. if (node.level == 1) {
  318. var id = node.key.split('@')[1]
  319. getAction('/ctop/userAllocation/getAccountIdListByUserId', {
  320. userId: id,
  321. }).then((res) => {
  322. console.log(res)
  323. if (res.code == 0) {
  324. if (res.result.length > 0) {
  325. data = res.result.map((item) => {
  326. return {
  327. id: item.accountId,
  328. label:
  329. (item.userName.length == 2
  330. ? item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  331. : item.userName.length == 3
  332. ? item.userName + '\xa0\xa0\xa0\xa0'
  333. : item.userName) +
  334. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  335. item.accountId +
  336. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  337. item.authName,
  338. disabled: true,
  339. }
  340. })
  341. node.children = data
  342. console.log(node.children)
  343. resolve(data)
  344. } else {
  345. data = []
  346. resolve(data)
  347. }
  348. } else {
  349. }
  350. })
  351. } else {
  352. data = []
  353. resolve(data)
  354. }
  355. },
  356. getParticipateList(productId) {d:
  357. //我参与的
  358. // toutiaoParticipateList
  359. this.confirmLoading = false
  360. this.showEdit = true
  361. getAction('/ctop/userAllocation/getUserIdListByProductId', {
  362. productId: productId,
  363. userId: this.userInfo().id
  364. }).then((res) => {
  365. if (res.code == 0) {
  366. this.options = res.result.map((item) => {
  367. return {
  368. id: item.accountId+'@'+item.userId+'@'+item.userName,
  369. label: item.userId+'-'+item.projectName,
  370. children: [],
  371. }
  372. })
  373. } else {
  374. this.showLoading = '暂无数据'
  375. }
  376. })
  377. },
  378. },
  379. mounted() {
  380. // this.getParticipateList()
  381. },
  382. }
  383. </script>