singleLayerSelecte.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <div class="singleLayersSelecte">
  3. <div class="selectBox">
  4. <div class="selectLeft">
  5. <div class="title">{{title}}</div>
  6. <div class="selectBox1">
  7. <span class="selectLists">
  8. <a-checkbox
  9. :indeterminate="indeterminate"
  10. :checked="checkAll"
  11. @change="onCheckAllChange"
  12. >全选</a-checkbox>
  13. </span>
  14. <a-checkbox-group
  15. v-model="checkedList"
  16. :options="plainOptions"
  17. @change="checkGroupChange"
  18. class="selectList"
  19. ></a-checkbox-group>
  20. </div>
  21. </div>
  22. <div class="selectRight">
  23. <div class="title">
  24. 已选
  25. <a-button class="clearAllBtn" type="link" @click="clearAll">清空</a-button>
  26. </div>
  27. <div class="selectBox1">
  28. <span class="selectListitem" v-for="(item,index) in checkedShowList" :key="index">
  29. {{item}}
  30. <a-icon type="close" id="close" @click="deleteItem(item)" />
  31. </span>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  39. // const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
  40. // const defaultCheckedList = ['Apple', 'Orange'];
  41. export default {
  42. data() {
  43. return {
  44. //选择框
  45. checkedList: [],
  46. checkedShowList: [],
  47. indeterminate: false,
  48. checkAll: false,
  49. plainOptions: [],
  50. valueOptions: [],
  51. }
  52. },
  53. watch: {
  54. checkedList: {
  55. handler(n,o){
  56. this.$emit('getCheckedList', this.checkedList)
  57. },
  58. deep: true,
  59. immediate: true,
  60. },
  61. listArr:{
  62. handler(n,o){
  63. this.plainOptions = this.listArr
  64. this.valueOptions=[];
  65. this.listArr.forEach((item) => {
  66. this.valueOptions.push(item.value)
  67. })
  68. },
  69. deep: true,
  70. immediate: true,
  71. },
  72. checked: {
  73. handler(n, o) {
  74. this.checkedList=[]
  75. this.checkedShowList=[];
  76. this.plainOptions = this.listArr
  77. this.valueOptions=[];
  78. this.listArr.forEach((item) => {
  79. this.valueOptions.push(item.value)
  80. })
  81. if (this.checked.length) {
  82. this.checkedList = this.checked;
  83. // console.log(this.checkedList,this.plainOptions)
  84. this.checkedList.forEach((ele, i) => {
  85. this.plainOptions.forEach((item, index) => {
  86. if (item.value == ele) {
  87. this.checkedShowList.push(item.label)
  88. }
  89. })
  90. })
  91. this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
  92. this.checkAll = this.checkedList.length === this.plainOptions.length
  93. }
  94. },
  95. deep: true,
  96. immediate: true,
  97. },
  98. },
  99. props: ['title', 'listArr', 'checked'],
  100. methods: {
  101. //手机品牌多选的事件
  102. checkGroupChange(checkedList) {
  103. this.checkedShowList = []
  104. // console.log(checkedList)
  105. this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length
  106. this.checkAll = checkedList.length === this.plainOptions.length
  107. checkedList.forEach((ele, i) => {
  108. this.plainOptions.forEach((item, index) => {
  109. if (item.value == ele) {
  110. this.checkedShowList.push(item.label)
  111. }
  112. })
  113. })
  114. // this.$emit('getCheckedList', this.checkedList)
  115. },
  116. onCheckAllChange(e) {
  117. // console.log(e.target.checked,this.valueOptions)
  118. this.checkedList=[];
  119. this.checkedShowList=[];
  120. Object.assign(this, {
  121. checkedList: e.target.checked ? this.valueOptions : [],
  122. indeterminate: false,
  123. checkAll: e.target.checked,
  124. })
  125. this.checkedList.forEach((ele, i) => {
  126. this.plainOptions.forEach((item, index) => {
  127. if (item.value == ele) {
  128. this.checkedShowList.push(item.label)
  129. }
  130. })
  131. })
  132. if (!e.target.checked) {
  133. this.checkedShowList = []
  134. }
  135. // console.log(this.checkedList)
  136. // this.$emit('getCheckedList', this.checkedList)
  137. },
  138. deleteItem(item) {
  139. // console.log(item)
  140. let val = ''
  141. this.plainOptions.forEach((ele, index) => {
  142. if (ele.label == item) {
  143. val = ele.value
  144. }
  145. })
  146. this.checkedList = this.checkedList.filter((element, index) => {
  147. return element != val
  148. })
  149. this.checkedShowList = this.checkedShowList.filter((element, index) => {
  150. return element != item
  151. })
  152. if (this.checkedList.length == 0) {
  153. this.indeterminate = false
  154. this.checkAll = false
  155. }
  156. // this.$emit('getCheckedList', this.checkedList)
  157. },
  158. clearAll() {
  159. this.checkedList = []
  160. this.indeterminate = false
  161. this.checkAll = false
  162. this.checkedShowList = []
  163. // this.$emit('getCheckedList', this.checkedList)
  164. },
  165. },
  166. mounted() {
  167. this.plainOptions = this.listArr
  168. this.valueOptions=[];
  169. this.listArr.forEach((item) => {
  170. this.valueOptions.push(item.value)
  171. })
  172. // if (this.checked.length) {
  173. // this.checkedList = this.checked
  174. // this.checkedList.forEach((ele, i) => {
  175. // this.plainOptions.forEach((item, index) => {
  176. // if (item.value == ele) {
  177. // this.checkedShowList.push(item.label)
  178. // }
  179. // })
  180. // })
  181. // this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
  182. // this.checkAll = this.checkedList.length === this.plainOptions.length
  183. // }else{
  184. // this.checkedList = []
  185. // }
  186. },
  187. }
  188. </script>
  189. <style lang="scss" scoped>
  190. .singleLayersSelecte {
  191. margin-top: 20px;
  192. .selectBox {
  193. display: flex;
  194. .title {
  195. background: #f9f9f9;
  196. font-size: 14px;
  197. font-weight: 700;
  198. padding: 0 15px;
  199. border-bottom: 1px solid #ddd;
  200. text-align: left;
  201. position: relative;
  202. border-radius: 5px 5px 0 0;
  203. .clearAllBtn{
  204. position: absolute;
  205. top: 3px;
  206. right: 0;
  207. }
  208. }
  209. .selectLeft {
  210. width: 40%;
  211. margin-right: 2%;
  212. border: 1px solid #ddd;
  213. border-radius: 5px;
  214. }
  215. .selectRight {
  216. width: 20%;
  217. border: 1px solid #ddd;
  218. border-radius: 5px;
  219. }
  220. .selectBox1 {
  221. height: 250px;
  222. overflow: auto;
  223. .selectList {
  224. display: block;
  225. width: 100%;
  226. // padding: 0 15px;
  227. // padding: 3px 0;
  228. }
  229. .selectLists {
  230. display: block;
  231. width: 100%;
  232. padding: 0 15px;
  233. }
  234. .selectLists:hover {
  235. background-color: rgba(0, 0, 0, 0.1);
  236. }
  237. .selectListitem {
  238. display: block;
  239. height: 25px;
  240. line-height: 25px;
  241. background-color: #eee;
  242. border-radius: 5px;
  243. padding: 0 10px;
  244. margin: 8px 10px;
  245. position: relative;
  246. #close {
  247. font-size: 12px;
  248. position: absolute;
  249. right: 10px;
  250. top: 5px;
  251. cursor: pointer;
  252. }
  253. }
  254. }
  255. }
  256. }
  257. </style>