WithIconSelect.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <script setup lang="ts">
  2. import type { DropdownInstance } from 'element-plus'
  3. import type { IconDropdownItem } from '@/types/dataAnalysis'
  4. import { onMounted, ref, reactive, watch } from 'vue'
  5. import { initLoadResouce } from '@/utils/resource'
  6. import { useCommonStore } from '@/stores/useCommon'
  7. const { selectInfo, tempMultipleChioce, saveSelectInfo, saveTempMultipleChioce } = useCommonStore()
  8. interface DropdownInfo {
  9. isRadio?: boolean // 是否是单选
  10. slectInfo: Array<IconDropdownItem>
  11. }
  12. // props
  13. const props = withDefaults(defineProps<DropdownInfo>(), {
  14. isRadio: true
  15. })
  16. /**
  17. * @description: 初始化选择信息
  18. * @return {*}
  19. */
  20. const selectBaseInfo = reactive<Array<IconDropdownItem>>(
  21. JSON.parse(JSON.stringify(props.slectInfo))
  22. )
  23. // 判断是不是通过确认框关闭的。主要服务于多选的情况
  24. // 原理是因为点击确认关闭的话,确认事件会先触发,然后再触发关闭事件
  25. // 由此来去判断是否需要把多选框的信息恢复
  26. const isConfimClose = ref<Boolean>(false)
  27. // emits
  28. const emits = defineEmits(['changePf'])
  29. // 下拉框
  30. const dropDownRef = ref<DropdownInstance>()
  31. // 资源的加载路径
  32. const resourceInfo: Record<string, string> = selectBaseInfo.reduce(
  33. (acc, item) => {
  34. acc[item.value] = item.icon
  35. return acc
  36. },
  37. {} as Record<string, string>
  38. )
  39. // 使用blob的资源路径信息
  40. const blobUrlInfo = reactive<Record<string, string>>({})
  41. // 备份信息
  42. const backupInfo = reactive<Array<IconDropdownItem>>([])
  43. /**
  44. * @description: 确认选择
  45. * 这里主要用于多选的情况使用,对于单选,即使点击确认按钮也不会有二次请求,因为seleinfo没有改变
  46. * @return {*}
  47. */
  48. const confirmSelect = () => {
  49. isConfimClose.value = true // 通过确认事件关闭
  50. Object.assign(backupInfo, JSON.parse(JSON.stringify(selectBaseInfo)))
  51. dropDownRef.value?.handleClose()
  52. if (props.isRadio) return
  53. // 去把state的数据更新一下
  54. tempMultipleChioce.pf = selectBaseInfo.filter((item) => item.isSelected).map((item) => item.value)
  55. saveTempMultipleChioce() // 保存到本地
  56. }
  57. /**
  58. * @description: 取消选择,当取消选择后,需要恢复到原来的状态
  59. * @return {*}
  60. */
  61. const cancleSelect = () => {
  62. dropDownRef.value?.handleClose()
  63. Object.assign(selectBaseInfo, backupInfo)
  64. }
  65. /**
  66. * @description: 下拉框出现与消失的处理
  67. * @param {*} state 展示状态,值为true或者false,代表打开或者关闭
  68. * @return {*}
  69. */
  70. const dropdownVis = (state: boolean) => {
  71. if (state) {
  72. // 打开的时候,需要备份一下当前选择
  73. Object.assign(backupInfo, JSON.parse(JSON.stringify(selectBaseInfo)))
  74. } else {
  75. // 关闭的时候,如果一个都没有选中,那么就需要把备份的信息恢复回去
  76. // 这里只针对于多选情况,因为单选的逻辑中不存在一个都没有选中的情况,因为无法取消已经选中
  77. // 而多选的情况下,因为即使可以取消,也不会立即改变selectInfo中的信息,只有点击了确认按钮才会改变,所以这里只需要恢复props的selectinfo就行了
  78. // 不是点击确认按钮关闭的多选框,且是多选按钮,也需要恢复
  79. if (!selectBaseInfo.find((item) => item.isSelected) || (!isConfimClose.value && !props.isRadio))
  80. Object.assign(selectBaseInfo, backupInfo)
  81. if (isConfimClose.value) isConfimClose.value = false // 把状态重置
  82. }
  83. }
  84. /**
  85. * @description: 选择事件,当目前可以选择或者是这个选项已经被选中的时候,就允许改变他的状态
  86. * @param {*} item 当前的选项信息
  87. * @return {*}
  88. */
  89. const selectPf = (item: any) => {
  90. if (props.isRadio) {
  91. selectInfo.pf = []
  92. selectInfo.pf.push(item.value)
  93. saveSelectInfo() // 选择之后保存到本地一次
  94. } else {
  95. // 多选就取反就行
  96. item.isSelected = !item.isSelected
  97. }
  98. }
  99. /**
  100. * @description: 同步selectinfo的信息到页面上
  101. * @return {*}
  102. */
  103. const syncSelectInfo = () => {
  104. selectBaseInfo.forEach((item) => {
  105. item.isSelected = selectInfo.pf.includes(item.value)
  106. })
  107. }
  108. /**
  109. * @description: 同步tempMultipleChioce的信息到页面上
  110. * @return {*}
  111. */
  112. const syncTempMultipleChioce = () => {
  113. selectBaseInfo.forEach((item) => {
  114. item.isSelected = tempMultipleChioce.pf.includes(item.value)
  115. })
  116. }
  117. /**
  118. * @description: 监听selectinfo的变化,然后同步到页面上
  119. * @return {*}
  120. */
  121. const watchSelectPf = watch(
  122. () => selectInfo.pf,
  123. () => {
  124. syncSelectInfo()
  125. },
  126. { deep: true }
  127. )
  128. /**
  129. * @description: 监听tempMultipleChioce的变化,然后同步到页面上
  130. * @return {*}
  131. */
  132. const watchTempMultipleChioce = watch(
  133. () => tempMultipleChioce.pf,
  134. () => {
  135. syncTempMultipleChioce()
  136. },
  137. { deep: true }
  138. )
  139. /**
  140. * @description: 根据本地保存的方案信息,去初始化selectinfo的信息
  141. * @return {*}
  142. */
  143. const initSelectInfo = () => {
  144. if (props.isRadio) {
  145. watchTempMultipleChioce() // 如果是单选进来的,在这儿把多选的事件取消掉
  146. syncSelectInfo() // 同步一下数据
  147. } else {
  148. watchSelectPf() // 与上面同理
  149. syncTempMultipleChioce() // 同理
  150. }
  151. }
  152. // 去加载一下本地的信息
  153. initSelectInfo()
  154. onMounted(() => {
  155. // 去加载所有需要的资源
  156. initLoadResouce(resourceInfo).then((data) => {
  157. Object.assign(blobUrlInfo, data)
  158. })
  159. })
  160. </script>
  161. <template>
  162. <div>
  163. <el-dropdown
  164. trigger="click"
  165. @visible-change="dropdownVis"
  166. :hide-on-click="props.isRadio"
  167. ref="dropDownRef"
  168. >
  169. <span class="displayBox">
  170. <div class="displayIcon">
  171. <span class="iconItem" v-for="item in selectBaseInfo">
  172. <el-image
  173. v-if="item.isSelected"
  174. style="width: 20px; height: 20px; margin-right: 5px"
  175. :src="blobUrlInfo[item.value]"
  176. :fit="'cover'"
  177. />
  178. </span>
  179. </div>
  180. <el-icon class="el-icon--right">
  181. <arrow-down />
  182. </el-icon>
  183. </span>
  184. <template #dropdown>
  185. <el-dropdown-menu>
  186. <el-dropdown-item
  187. v-for="item in selectBaseInfo"
  188. :key="item.value"
  189. :value="item.value"
  190. @click="selectPf(item)"
  191. >
  192. <el-image
  193. style="width: 20px; height: 20px; margin-right: 5px"
  194. :src="blobUrlInfo[item.value]"
  195. :fit="'cover'"
  196. />
  197. <!-- 禁用掉原生的点击事件,自己实现点击 -->
  198. <el-checkbox v-model="item.isSelected" size="small" @click.native.prevent="return" />
  199. </el-dropdown-item>
  200. </el-dropdown-menu>
  201. <span class="btnGroup">
  202. <el-button class="btnItem" size="small" type="primary" @click="confirmSelect"
  203. >确认</el-button
  204. >
  205. <el-button class="btnItem" size="small" @click="cancleSelect">取消</el-button>
  206. </span>
  207. </template>
  208. </el-dropdown>
  209. </div>
  210. </template>
  211. <style scoped>
  212. .displayBox {
  213. display: flex;
  214. align-items: center;
  215. }
  216. .displayIcon {
  217. display: flex;
  218. align-items: center;
  219. }
  220. .btnGroup {
  221. display: flex;
  222. justify-content: center;
  223. }
  224. .btnItem {
  225. margin-right: 4px;
  226. margin-left: 4px;
  227. }
  228. .disabledSelect {
  229. cursor: not-allowed !important;
  230. }
  231. </style>