selectRegion.vue 13 KB

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