singleLayerSelecte.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  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.listArr.forEach((item) => {
  65. this.valueOptions.push(item.value)
  66. })
  67. },
  68. deep: true,
  69. immediate: true,
  70. },
  71. checked: {
  72. handler(n, o) {
  73. this.checkedList=[]
  74. this.checkedShowList=[];
  75. this.plainOptions = this.listArr
  76. this.listArr.forEach((item) => {
  77. this.valueOptions.push(item.value)
  78. })
  79. if (this.checked.length) {
  80. this.checkedList = this.checked;
  81. // console.log(this.checkedList,this.plainOptions)
  82. this.checkedList.forEach((ele, i) => {
  83. this.plainOptions.forEach((item, index) => {
  84. if (item.value == ele) {
  85. this.checkedShowList.push(item.label)
  86. }
  87. })
  88. })
  89. this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
  90. this.checkAll = this.checkedList.length === this.plainOptions.length
  91. }
  92. },
  93. deep: true,
  94. immediate: true,
  95. },
  96. },
  97. props: ['title', 'listArr', 'checked'],
  98. methods: {
  99. //手机品牌多选的事件
  100. checkGroupChange(checkedList) {
  101. this.checkedShowList = []
  102. // console.log(checkedList)
  103. this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length
  104. this.checkAll = checkedList.length === this.plainOptions.length
  105. checkedList.forEach((ele, i) => {
  106. this.plainOptions.forEach((item, index) => {
  107. if (item.value == ele) {
  108. this.checkedShowList.push(item.label)
  109. }
  110. })
  111. })
  112. // this.$emit('getCheckedList', this.checkedList)
  113. },
  114. onCheckAllChange(e) {
  115. // console.log(e.target.checked,this.valueOptions)
  116. Object.assign(this, {
  117. checkedList: e.target.checked ? this.valueOptions : [],
  118. indeterminate: false,
  119. checkAll: e.target.checked,
  120. })
  121. this.checkedList.forEach((ele, i) => {
  122. this.plainOptions.forEach((item, index) => {
  123. if (item.value == ele) {
  124. this.checkedShowList.push(item.label)
  125. }
  126. })
  127. })
  128. if (!e.target.checked) {
  129. this.checkedShowList = []
  130. }
  131. // console.log(this.checkedList)
  132. // this.$emit('getCheckedList', this.checkedList)
  133. },
  134. deleteItem(item) {
  135. // console.log(item)
  136. let val = ''
  137. this.plainOptions.forEach((ele, index) => {
  138. if (ele.label == item) {
  139. val = ele.value
  140. }
  141. })
  142. this.checkedList = this.checkedList.filter((element, index) => {
  143. return element != val
  144. })
  145. this.checkedShowList = this.checkedShowList.filter((element, index) => {
  146. return element != item
  147. })
  148. if (this.checkedList.length == 0) {
  149. this.indeterminate = false
  150. this.checkAll = false
  151. }
  152. // this.$emit('getCheckedList', this.checkedList)
  153. },
  154. clearAll() {
  155. this.checkedList = []
  156. this.indeterminate = false
  157. this.checkAll = false
  158. this.checkedShowList = []
  159. // this.$emit('getCheckedList', this.checkedList)
  160. },
  161. },
  162. mounted() {
  163. this.plainOptions = this.listArr
  164. this.listArr.forEach((item) => {
  165. this.valueOptions.push(item.value)
  166. })
  167. // if (this.checked.length) {
  168. // this.checkedList = this.checked
  169. // this.checkedList.forEach((ele, i) => {
  170. // this.plainOptions.forEach((item, index) => {
  171. // if (item.value == ele) {
  172. // this.checkedShowList.push(item.label)
  173. // }
  174. // })
  175. // })
  176. // this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
  177. // this.checkAll = this.checkedList.length === this.plainOptions.length
  178. // }else{
  179. // this.checkedList = []
  180. // }
  181. },
  182. }
  183. </script>
  184. <style lang="scss" scoped>
  185. .singleLayersSelecte {
  186. margin-top: 20px;
  187. .selectBox {
  188. display: flex;
  189. .title {
  190. background: #f9f9f9;
  191. font-size: 14px;
  192. font-weight: 700;
  193. padding: 0 15px;
  194. border-bottom: 1px solid #ddd;
  195. text-align: left;
  196. position: relative;
  197. border-radius: 5px 5px 0 0;
  198. .clearAllBtn{
  199. position: absolute;
  200. top: 3px;
  201. right: 0;
  202. }
  203. }
  204. .selectLeft {
  205. width: 40%;
  206. margin-right: 2%;
  207. border: 1px solid #ddd;
  208. border-radius: 5px;
  209. }
  210. .selectRight {
  211. width: 20%;
  212. border: 1px solid #ddd;
  213. border-radius: 5px;
  214. }
  215. .selectBox1 {
  216. height: 250px;
  217. overflow: auto;
  218. .selectList {
  219. display: block;
  220. width: 100%;
  221. // padding: 0 15px;
  222. // padding: 3px 0;
  223. }
  224. .selectLists {
  225. display: block;
  226. width: 100%;
  227. padding: 0 15px;
  228. }
  229. .selectLists:hover {
  230. background-color: rgba(0, 0, 0, 0.1);
  231. }
  232. .selectListitem {
  233. display: block;
  234. height: 25px;
  235. line-height: 25px;
  236. background-color: #eee;
  237. border-radius: 5px;
  238. padding: 0 10px;
  239. margin: 8px 10px;
  240. position: relative;
  241. #close {
  242. font-size: 12px;
  243. position: absolute;
  244. right: 10px;
  245. top: 5px;
  246. cursor: pointer;
  247. }
  248. }
  249. }
  250. }
  251. }
  252. </style>