selectRegion.vue 13 KB

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