transfer.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <style scoped>
  2. .transfer {
  3. display: flex;
  4. }
  5. .transfer .transfer-box {
  6. /* width: 350px; */
  7. height: 250px;
  8. border: 1px solid #dadfe3;
  9. display: flex;
  10. overflow-x: auto;
  11. overflow-y: hidden;
  12. box-sizing: border-box;
  13. margin-right: 25px;
  14. }
  15. .content-box {
  16. min-width: 174px;
  17. width: 100%;
  18. height: 100%;
  19. border-right: 1px solid #dadfe3;
  20. }
  21. .content-box .content-title {
  22. width: 100%;
  23. background: #f8f9fa;
  24. border-bottom: 1px solid #dadfe3;
  25. padding: 5px 15px;
  26. font-size: 16px;
  27. font-weight: 700;
  28. line-height: 30px;
  29. }
  30. .content-box .content {
  31. width: 100%;
  32. height: 85%;
  33. overflow: auto;
  34. }
  35. .content-box .content p:hover {
  36. background: #edf1f5;
  37. cursor: pointer;
  38. }
  39. .content-box .content p:hover span {
  40. display: inline-block;
  41. }
  42. .content-box .content p span {
  43. display: none;
  44. }
  45. p {
  46. padding: 5px;
  47. margin-bottom: 0;
  48. border-bottom: 1px solid #f2f2f2;
  49. }
  50. .backgroundOnly {
  51. background: #edf1f5;
  52. }
  53. </style>
  54. <template>
  55. <div class="transfer">
  56. <div class="transfer-box">
  57. <div class="content-box">
  58. <p class="content-title">省份</p>
  59. <div class="content">
  60. <p
  61. v-for="(item,index) of province"
  62. :key="item.id"
  63. @click="showCity(item,index)"
  64. :class="{backgroundOnly:provinceIndex == index}"
  65. >{{item.name}}</p>
  66. </div>
  67. </div>
  68. <div
  69. class="content-box"
  70. :style="{borderRight:!showClass?'0px':'1px solid #dadfe3'}"
  71. v-show="showCityData"
  72. >
  73. <p class="content-title">城市</p>
  74. <div class="content">
  75. <p
  76. v-for="(item,index) of city"
  77. :key="item.id"
  78. @click="showRegion(item.code,index)"
  79. :class="{backgroundOnly:cityIndex == index}"
  80. >{{item.name}}</p>
  81. </div>
  82. </div>
  83. <div class="content-box" v-show="showClass" style="border-right:0px">
  84. <p class="content-title">区域</p>
  85. <div class="content">
  86. <!-- <p @click="allCheck">{{checkAll?"√":""}}全选</p> -->
  87. <p
  88. v-for="item of area"
  89. :key="item.id"
  90. @click="add(item)"
  91. :class="{backgroundOnly:checkMatched.indexOf( item.id )!=-1}"
  92. >{{item.name}}</p>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="transfer-box" style="width:176px">
  97. <div class="content-box">
  98. <p class="content-title">
  99. 已选
  100. <span
  101. style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
  102. @click="clear"
  103. >清空</span>
  104. </p>
  105. <div class="content">
  106. <p v-for="(item,index) of checkData" :key="index">
  107. {{item.name}}
  108. <span
  109. style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
  110. @click="detele(index)"
  111. >删除</span>
  112. </p>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </template>
  118. <script>
  119. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  120. import { getProvince } from '@/api/manage'
  121. export default {
  122. name: 'ByteDanceUserOrientationTemplateList',
  123. components: {},
  124. data() {
  125. return {
  126. showClass: false,
  127. showCityData: false,
  128. checkData: [],
  129. checkMatched: [],
  130. province: [],
  131. city: [],
  132. area: [],
  133. CityData: '/ctop/bytedanceAreaInfo/listbycode',
  134. provinceIndex: null,
  135. cityIndex: null,
  136. checkAll: false,
  137. arr: []
  138. }
  139. },
  140. computed: {},
  141. mounted() {
  142. this.$nextTick(() => {
  143. this.getData()
  144. })
  145. },
  146. methods: {
  147. getData() {
  148. getProvince(this.CityData, { parentCode: '' }).then(res => {
  149. if (res.code == '0') {
  150. this.province.push(...res.result.records)
  151. }
  152. })
  153. },
  154. showCity(item, index) {
  155. this.city = []
  156. this.showCityData = false
  157. this.showClass = false
  158. this.provinceIndex = index
  159. this.cityIndex = null
  160. // if (item.name == '北京') {
  161. // this.city.push(item)
  162. // this.showCityData = true
  163. // } else {
  164. getProvince(this.CityData, { parentCode: item.code }).then(res => {
  165. if (res.code == '0') {
  166. this.city.push(...res.result.records)
  167. this.showCityData = true
  168. }
  169. })
  170. // }
  171. },
  172. showRegion(item, index) {
  173. this.area = []
  174. this.cityIndex = index
  175. getProvince(this.CityData, { parentCode: item }).then(res => {
  176. if (res.code == '0') {
  177. console.log(res)
  178. this.area.push(...res.result.records)
  179. this.arr = res.result.records
  180. this.showClass = true
  181. }
  182. })
  183. },
  184. add(item) {
  185. if (this.checkMatched.indexOf(item.id) != -1) {
  186. var index = this.checkData.findIndex(v => v.id === item.id)
  187. this.checkData.splice(index, 1)
  188. this.checkMatched.splice(index, 1)
  189. this.$emit('update:checkData', this.checkData)
  190. } else {
  191. this.checkData.push(item)
  192. this.checkMatched.push(item.id)
  193. this.$emit('update:checkData', this.checkData)
  194. }
  195. },
  196. allCheck() {
  197. this.checkAll = !this.checkAll
  198. if (this.checkAll) {
  199. this.checkData.push(...this.area)
  200. var dataId = this.area.map(item => {
  201. return item.id
  202. })
  203. this.checkMatched.push(...dataId)
  204. } else {
  205. this.checkData.splice(this.checkData.length - this.arr.length, this.arr.length)
  206. this.checkMatched.splice(this.checkData.length - this.arr.length, this.arr.length)
  207. }
  208. },
  209. clear() {
  210. this.checkData = []
  211. this.checkMatched = []
  212. this.checkAll = false
  213. this.$emit('update:checkData', this.checkData)
  214. },
  215. detele(index) {
  216. this.checkData.splice(index, 1)
  217. this.checkMatched.splice(index, 1)
  218. this.$emit('update:checkData', this.checkData)
  219. }
  220. }
  221. }
  222. </script>