transferCity.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  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. <style>
  55. .transfer .ant-checkbox-group {
  56. width: 100px;
  57. overflow-x: hidden;
  58. }
  59. .transfer .ant-checkbox-group-item {
  60. display: inline-block;
  61. margin-right: 8px;
  62. width: 100%;
  63. }
  64. </style>
  65. <template>
  66. <div class="transfer">
  67. <div class="transfer-box">
  68. <div class="content-box">
  69. <p class="content-title">省份</p>
  70. <div class="content">
  71. <p>
  72. <input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选
  73. </p>
  74. <p
  75. v-for="(item,index) of province"
  76. :key="item.value"
  77. :class="{backgroundOnly:provinceIndex == index}"
  78. >
  79. <input
  80. class="checkItem"
  81. type="checkbox"
  82. :value="item.value"
  83. :id="item.value"
  84. v-model="checkMatched"
  85. @change="checkOne(item,index)"
  86. />
  87. <span
  88. @click="showCity(item,index)"
  89. style="color:black;display:inline-block;margin-left:5px;width:80%"
  90. >{{item.label}}</span>
  91. </p>
  92. </div>
  93. </div>
  94. <div
  95. class="content-box"
  96. :style="{borderRight:!showClass?'0px':'1px solid #dadfe3'}"
  97. v-show="showCityData"
  98. >
  99. <p class="content-title">城市</p>
  100. <div class="content">
  101. <!-- <p>
  102. <input
  103. type="checkbox"
  104. class="select_all"
  105. @change="checkAllBoxCity"
  106. v-model="checkAllCity"
  107. /> 全选
  108. </p>-->
  109. <p
  110. v-for="(item,index) of city"
  111. :key="item.id"
  112. :class="{backgroundOnly:cityIndex == index}"
  113. >
  114. <input
  115. class="checkItem"
  116. type="checkbox"
  117. :value="item.value"
  118. :id="item.value"
  119. v-model="checkMatchedCity"
  120. @change="checkOneCity(item,index)"
  121. />
  122. {{item.label}}
  123. </p>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="transfer-box" style="width:176px">
  128. <div class="content-box">
  129. <p class="content-title">
  130. 已选
  131. <span
  132. style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
  133. @click="clear"
  134. >清空</span>
  135. </p>
  136. <div class="content">
  137. <p v-for="(item,index) of checkData" :key="index">
  138. {{item.label}}
  139. <!-- <span
  140. style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
  141. @click="detele(item,index)"
  142. >删除</span>-->
  143. </p>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </template>
  149. <script>
  150. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  151. import { getProvince } from '@/api/manage'
  152. import $ from 'jquery'
  153. export default {
  154. name: 'ByteDanceUserOrientationTemplateList',
  155. components: {},
  156. data() {
  157. return {
  158. showClass: false,
  159. showCityData: false,
  160. checkData: [],
  161. checkMatched: [],
  162. province: [],
  163. city: [],
  164. area: [],
  165. CityData: '/ctop/bytedanceAreaInfo/listbycode',
  166. provinceIndex: null,
  167. cityIndex: null,
  168. checkAll: false,
  169. checkMatchedCity: [],
  170. checkAllCity: false,
  171. nowProvince: null
  172. }
  173. },
  174. computed: {},
  175. mounted() {
  176. this.$nextTick(() => {
  177. this.getData()
  178. })
  179. },
  180. methods: {
  181. getData() {
  182. getProvince(this.CityData, { parentCode: '' }).then(res => {
  183. if (res.code == '0') {
  184. // this.province.push(...res.result.records)
  185. this.province = res.result.records.map(item => {
  186. return {
  187. label: item.name,
  188. value: item.id
  189. }
  190. })
  191. }
  192. })
  193. },
  194. showCity(item, index) {
  195. this.city = []
  196. this.showCityData = false
  197. this.showClass = false
  198. this.provinceIndex = index
  199. this.cityIndex = null
  200. this.nowProvince = item
  201. this.checkMatchedCity = []
  202. getProvince(this.CityData, { parentCode: item.value }).then(res => {
  203. if (res.code == '0') {
  204. this.city = res.result.records.map(item => {
  205. return {
  206. label: item.name,
  207. value: item.id
  208. }
  209. })
  210. if (this.checkMatched.indexOf(item.value) != -1) {
  211. this.checkAllCity = true
  212. this.checkMatchedCity = this.city.map(item => {
  213. return item.value
  214. })
  215. } else {
  216. this.checkMatchedCity = this.checkData.map(item => {
  217. return item.value
  218. })
  219. }
  220. // this.city.push(...res.result.records)
  221. this.showCityData = true
  222. }
  223. })
  224. },
  225. checkAllBox() {
  226. this.checkMatched = []
  227. this.checkData = []
  228. if (this.checkAll) {
  229. this.checkMatched = this.province.map(item => {
  230. return item.value
  231. })
  232. this.checkData.push(...this.province)
  233. } else {
  234. this.checkMatched = []
  235. this.checkData = []
  236. this.checkMatchedCity = []
  237. }
  238. this.$emit('update:checkData', this.checkData)
  239. },
  240. checkOne(item, index) {
  241. if (this.checkMatched.indexOf(item.value) == -1) {
  242. var index1 = this.checkData.findIndex(v => v.value === item.value)
  243. this.checkData.splice(index1, 1)
  244. if (this.nowProvince) {
  245. if (this.nowProvince.value == item.value) {
  246. this.checkMatchedCity = []
  247. }
  248. }
  249. } else {
  250. this.checkData.push(item)
  251. var data = []
  252. getProvince(this.CityData, { parentCode: item.value }).then(res => {
  253. if (res.code == '0') {
  254. data = res.result.records.map(item => {
  255. return {
  256. label: item.name,
  257. value: item.id
  258. }
  259. })
  260. for (var i = 0; i < this.checkData.length; i++) {
  261. for (let j = 0; j < data.length; j++) {
  262. if (this.checkData[i].value == data[j].value) {
  263. this.checkData.splice(i, 1)
  264. }
  265. }
  266. }
  267. }
  268. })
  269. if (this.nowProvince) {
  270. if (item.value == this.nowProvince.value) {
  271. this.checkMatchedCity = this.city.map(item => {
  272. return item.value
  273. })
  274. }
  275. }
  276. }
  277. if (this.checkMatched.length == this.province.length) {
  278. this.checkAll = true
  279. } else {
  280. this.checkAll = false
  281. }
  282. this.$emit('update:checkData', this.checkData)
  283. },
  284. checkAllBoxCity() {
  285. this.checkMatchedCity = []
  286. if (this.checkAllCity) {
  287. this.checkMatchedCity = this.city.map(item => {
  288. return item.value
  289. })
  290. this.checkMatched.push(this.nowProvince.value)
  291. this.checkData.push(this.nowProvince)
  292. } else {
  293. this.checkMatchedCity = []
  294. var index = this.checkData.findIndex(v => v.value === this.nowProvince.value)
  295. var index1 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
  296. this.checkData.splice(index, 1)
  297. this.checkMatched.splice(index1, 1)
  298. }
  299. this.$emit('update:checkData', this.checkData)
  300. },
  301. checkOneCity(item, index) {
  302. var allCity = this.checkMatchedCity.filter(v => {
  303. return v.toString().slice(0, 2) == this.nowProvince.value
  304. })
  305. if (allCity.length == this.city.length) {
  306. this.checkMatched.push(this.nowProvince.value)
  307. this.checkData.push(this.nowProvince)
  308. for (var i = 0; i < this.checkMatchedCity.length; i++) {
  309. for (var j = 0; j < this.checkData.length; j++) {
  310. if (
  311. this.checkMatchedCity[i] == this.checkData[j].value &&
  312. this.checkMatchedCity[i].toString().slice(0, 2) == this.nowProvince.value
  313. ) {
  314. this.checkData.splice(j, 1)
  315. j--
  316. }
  317. }
  318. }
  319. }
  320. if (this.checkMatchedCity.indexOf(item.value) != -1) {
  321. if (allCity.length != this.city.length) {
  322. this.checkData.push(item)
  323. }
  324. if (this.checkMatched.length == this.province.length) {
  325. this.checkAll = true
  326. } else {
  327. this.checkAll = false
  328. }
  329. } else {
  330. if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
  331. var index1 = this.checkData.findIndex(v => v.value === this.nowProvince.value)
  332. var index2 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
  333. this.checkData.splice(index1, 1)
  334. this.checkMatched.splice(index2, 1)
  335. this.checkAll = false
  336. var data = this.city.filter(v => {
  337. return v.value != item.value
  338. })
  339. this.checkData.push(...data)
  340. } else {
  341. var index1 = this.checkData.findIndex(v => v.value === item.value)
  342. this.checkData.splice(index1, 1)
  343. }
  344. }
  345. this.$emit('update:checkData', this.checkData)
  346. },
  347. clear() {
  348. this.checkData = []
  349. this.checkMatched = []
  350. this.checkMatchedCity = []
  351. this.checkAll = false
  352. this.$emit('update:checkData', this.checkData)
  353. },
  354. detele(item, index) {
  355. // if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
  356. var index1 = this.checkMatched.findIndex(v => v === item.value)
  357. var index2 = this.checkData.findIndex(v => v.value === item.value)
  358. this.checkData.splice(index2, 1)
  359. this.checkMatched.splice(index1, 1)
  360. this.checkAll = false
  361. // } else {
  362. // }
  363. this.$emit('update:checkData', this.checkData)
  364. }
  365. }
  366. }
  367. </script>