accountCheckBytedance.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  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. this.showEdit = false
  212. this.$emit('synchro', {treeData:data,shieldBackwardSwitch:this.shieldBackwardSwitch})
  213. },
  214. close() {
  215. this.showEdit = false
  216. },
  217. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  218. update(node, id) {
  219. // console.log(node)
  220. getAction('/ctop/userAllocation/getAccountIdListByUserId', {
  221. userId: node.id.split(',')[1],
  222. }).then((res) => {
  223. console.log(res)
  224. // if (res.code == 0) {
  225. // if (res.result.length > 0) {
  226. // node.children = res.result.map((item) => {
  227. // return {
  228. // id: item.accountId,
  229. // label: item.userName + ' ' + item.authName,
  230. // isDisabled: true,
  231. // }
  232. // })
  233. // } else {
  234. // }
  235. // } else {
  236. // new Error('Failed to load options: network error.')
  237. // }
  238. })
  239. },
  240. emitValue() {
  241. // this.$emit('update:appId', this.value)
  242. },
  243. loadOptions(node, resolve) {
  244. // Typically, do the AJAX stuff here.
  245. // Once the server has responded,
  246. // assign children options to the parent node & call the callback.
  247. console.log(node)
  248. var data = []
  249. if (node.level == 1) {
  250. var id = node.label
  251. getAction('/ctop/userAllocation/getAccountIdListByUserId', {
  252. userId: id,
  253. }).then((res) => {
  254. console.log(res)
  255. if (res.code == 0) {
  256. if (res.result.length > 0) {
  257. data = res.result.map((item) => {
  258. return {
  259. id: item.accountId,
  260. label:
  261. (item.userName.length == 2
  262. ? item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  263. : item.userName.length == 3
  264. ? item.userName + '\xa0\xa0\xa0\xa0'
  265. : item.userName) +
  266. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  267. item.accountId +
  268. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  269. item.authName,
  270. disabled: true,
  271. }
  272. })
  273. resolve(data)
  274. } else {
  275. data = []
  276. resolve(data)
  277. }
  278. } else {
  279. }
  280. })
  281. } else {
  282. data = []
  283. resolve(data)
  284. }
  285. },
  286. getParticipateList(projectId) {
  287. //我参与的
  288. // toutiaoParticipateList
  289. this.showEdit = true
  290. getAction('/ctop/userAllocation/getUserIdListByProjectId', {
  291. projectId: projectId,
  292. }).then((res) => {
  293. if (res.code == 0) {
  294. console.log(res)
  295. this.options = res.result.map((item) => {
  296. return {
  297. id: item.accountId,
  298. label: item.userId,
  299. children: [],
  300. }
  301. })
  302. } else {
  303. this.showLoading = '暂无数据'
  304. }
  305. })
  306. },
  307. },
  308. mounted() {
  309. // this.getParticipateList()
  310. },
  311. }
  312. </script>