accountCheckBytedance.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  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%">
  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">
  92. <a-form-item>
  93. <a-switch v-model="shieldBackwardSwitch" />
  94. </a-form-item>
  95. </div>
  96. </div>
  97. <!-- <treeselect
  98. :multiple="multiple"
  99. :disable-branch-nodes="!multiple"
  100. :branch-nodes-first="true"
  101. :options="options"
  102. :load-options="loadOptions"
  103. placeholder="请选择项目"
  104. v-model="value"
  105. :value-consists-of="valueConsistsOf"
  106. :auto-load-root-options="false"
  107. :auto-select-descendants="false"
  108. @select="update"
  109. @input="emitValue"
  110. :limit="2"
  111. :default-options="true"
  112. :limitText="
  113. (count) => {
  114. return '隐藏' + count + '条'
  115. }
  116. "
  117. noChildrenText="该项目下暂无账号"
  118. :noOptionsText="showLoading"
  119. /> -->
  120. <!-- :default-expanded-keys="[2, 3]"
  121. :default-checked-keys="[5]" -->
  122. <el-tree
  123. :data="options"
  124. show-checkbox
  125. node-key="id"
  126. :props="defaultProps"
  127. :load="loadOptions"
  128. lazy
  129. :check-strictly="true"
  130. ref="tree"
  131. >
  132. </el-tree>
  133. </a-modal>
  134. </div>
  135. </template>
  136. <script>
  137. // @open="getParticipateList"
  138. // import the component
  139. import Treeselect from '@riophae/vue-treeselect'
  140. // import the styles
  141. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  142. import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
  143. import { getAction, postAction } from '@/api/manage'
  144. import { mapGetters } from 'vuex'
  145. // We just use `setTimeout()` here to simulate an async operation
  146. // instead of requesting a real API server for demo purpose.
  147. let called = false
  148. export default {
  149. data: () => ({
  150. defaultProps: {
  151. children: 'children',
  152. label: 'label',
  153. id: 'id',
  154. },
  155. shieldBackwardSwitch: true,
  156. showEdit: false,
  157. value: null,
  158. valueConsistsOf: 'LEAF_PRIORITY',
  159. options: [],
  160. showLoading: 'loading...',
  161. }),
  162. props: {
  163. //是否多选
  164. multiple: {
  165. type: Boolean,
  166. default() {
  167. return true
  168. },
  169. },
  170. //判断媒体类型
  171. request: {
  172. type: String,
  173. default() {
  174. return '2,4'
  175. },
  176. },
  177. //一级请求接口
  178. reqUrl: {
  179. type: String,
  180. default() {
  181. return '/ctop/projectMember/participateListByMediaId'
  182. },
  183. },
  184. },
  185. components: {
  186. Treeselect,
  187. },
  188. watch: {
  189. $route(n, o) {},
  190. // appId: {
  191. // handler(n, o) {
  192. // console.log(n)
  193. // if (n.length == 0) {
  194. // if (this.multiple) {
  195. // this.value = []
  196. // } else {
  197. // this.value = ''
  198. // }
  199. // }
  200. // },
  201. // deep: true
  202. // }
  203. },
  204. methods: {
  205. getCheckedKeys() {
  206. console.log(this.$refs.tree.getCheckedKeys())
  207. },
  208. handleOk(e) {
  209. console.log(e)
  210. var data = this.$refs.tree.getCheckedKeys()
  211. var dataArr = data.map(item=>{
  212. return item.split('@')[0]
  213. })
  214. // console.log(dataArr)
  215. this.showEdit = false
  216. this.$emit('synchro', {treeData:dataArr,shieldBackwardSwitch:this.shieldBackwardSwitch})
  217. },
  218. close() {
  219. this.showEdit = false
  220. },
  221. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  222. update(node, id) {
  223. // console.log(node)
  224. getAction('/ctop/userAllocation/getAccountIdListByUserId', {
  225. userId: node.id.split(',')[1],
  226. }).then((res) => {
  227. console.log(res)
  228. // if (res.code == 0) {
  229. // if (res.result.length > 0) {
  230. // node.children = res.result.map((item) => {
  231. // return {
  232. // id: item.accountId,
  233. // label: item.userName + ' ' + item.authName,
  234. // isDisabled: true,
  235. // }
  236. // })
  237. // } else {
  238. // }
  239. // } else {
  240. // new Error('Failed to load options: network error.')
  241. // }
  242. })
  243. },
  244. emitValue() {
  245. // this.$emit('update:appId', this.value)
  246. },
  247. loadOptions(node, resolve) {
  248. // Typically, do the AJAX stuff here.
  249. // Once the server has responded,
  250. // assign children options to the parent node & call the callback.
  251. console.log(node)
  252. var data = []
  253. if (node.level == 1) {
  254. var id = node.key.split('@')[1]
  255. getAction('/ctop/userAllocation/getAccountIdListByUserId', {
  256. userId: id,
  257. }).then((res) => {
  258. console.log(res)
  259. if (res.code == 0) {
  260. if (res.result.length > 0) {
  261. data = res.result.map((item) => {
  262. return {
  263. id: item.accountId,
  264. label:
  265. (item.userName.length == 2
  266. ? item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  267. : item.userName.length == 3
  268. ? item.userName + '\xa0\xa0\xa0\xa0'
  269. : item.userName) +
  270. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  271. item.accountId +
  272. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  273. item.authName,
  274. disabled: true,
  275. }
  276. })
  277. resolve(data)
  278. } else {
  279. data = []
  280. resolve(data)
  281. }
  282. } else {
  283. }
  284. })
  285. } else {
  286. data = []
  287. resolve(data)
  288. }
  289. },
  290. getParticipateList(productId) {d:
  291. //我参与的
  292. // toutiaoParticipateList
  293. this.showEdit = true
  294. getAction('/ctop/userAllocation/getUserIdListByProductId', {
  295. productId: productId,
  296. userId: this.userInfo().id
  297. }).then((res) => {
  298. if (res.code == 0) {
  299. console.log(res)
  300. this.options = res.result.map((item) => {
  301. return {
  302. id: item.accountId+'@'+item.userId,
  303. label: item.userId+'-'+item.projectName,
  304. children: [],
  305. }
  306. })
  307. } else {
  308. this.showLoading = '暂无数据'
  309. }
  310. })
  311. },
  312. },
  313. mounted() {
  314. // this.getParticipateList()
  315. },
  316. }
  317. </script>