{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\components\\RightToolbar\\index.vue?vue&type=style&index=0&id=38ed449c&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\components\\RightToolbar\\index.vue","mtime":1787567871517},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\css-loader\\dist\\cjs.js","mtime":1787309792478},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1787309794547},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\postcss-loader\\src\\index.js","mtime":1787309793084},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCjo6di1kZWVwIC5lbC10cmFuc2Zlcl9fYnV0dG9uIHsNCiAgYm9yZGVyLXJhZGl1czogNTAlOw0KICBwYWRkaW5nOiAxMnB4Ow0KICBkaXNwbGF5OiBibG9jazsNCiAgbWFyZ2luLWxlZnQ6IDBweDsNCn0NCjo6di1kZWVwIC5lbC10cmFuc2Zlcl9fYnV0dG9uOmZpcnN0LWNoaWxkIHsNCiAgbWFyZ2luLWJvdHRvbTogMTBweDsNCn0NCi5jaGVjay1saW5lIHsNCiAgd2lkdGg6IDkwJTsNCiAgaGVpZ2h0OiAxcHg7DQogIGJhY2tncm91bmQtY29sb3I6ICNjY2M7DQogIG1hcmdpbjogM3B4IGF1dG87DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6OA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/RightToolbar","sourcesContent":["<template>\r\n  <div class=\"top-right-btn\" :style=\"style\">\r\n    <el-row>\r\n      <el-tooltip class=\"item\" effect=\"dark\" :content=\"showSearch ? '隐藏搜索' : '显示搜索'\" placement=\"top\" v-if=\"search\">\r\n        <el-button size=\"mini\" circle icon=\"el-icon-search\" @click=\"toggleSearch()\" />\r\n      </el-tooltip>\r\n      <el-tooltip class=\"item\" effect=\"dark\" content=\"刷新\" placement=\"top\">\r\n        <el-button size=\"mini\" circle icon=\"el-icon-refresh\" @click=\"refresh()\" />\r\n      </el-tooltip>\r\n      <el-tooltip class=\"item\" effect=\"dark\" content=\"显隐列\" placement=\"top\" v-if=\"Object.keys(columns).length > 0\">\r\n        <el-button size=\"mini\" circle icon=\"el-icon-menu\" @click=\"showColumn()\" v-if=\"showColumnsType == 'transfer'\"/>\r\n        <el-dropdown trigger=\"click\" :hide-on-click=\"false\" style=\"padding-left: 12px\" v-if=\"showColumnsType == 'checkbox'\">\r\n          <el-button size=\"mini\" circle icon=\"el-icon-menu\" />\r\n          <el-dropdown-menu slot=\"dropdown\">\r\n            <!-- 全选/反选 按钮 -->\r\n            <el-dropdown-item>\r\n              <el-checkbox :indeterminate=\"isIndeterminate\" v-model=\"isChecked\" @change=\"toggleCheckAll\"> 列展示 </el-checkbox>\r\n            </el-dropdown-item>\r\n            <div class=\"check-line\"></div>\r\n            <template v-for=\"(item, key) in columns\">\r\n              <el-dropdown-item :key=\"key\">\r\n                <el-checkbox v-model=\"item.visible\" @change=\"checkboxChange($event, key)\" :label=\"item.label\" />\r\n              </el-dropdown-item>\r\n            </template>\r\n          </el-dropdown-menu>\r\n        </el-dropdown>\r\n      </el-tooltip>\r\n    </el-row>\r\n    <el-dialog :title=\"title\" :visible.sync=\"open\" append-to-body>\r\n      <el-transfer\r\n        :titles=\"['显示', '隐藏']\"\r\n        v-model=\"value\"\r\n        :data=\"transferData\"\r\n        @change=\"dataChange\"\r\n      ></el-transfer>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport cache from '@/plugins/cache'\r\n\r\nexport default {\r\n  name: \"RightToolbar\",\r\n  data() {\r\n    return {\r\n      // 显隐数据\r\n      value: [],\r\n      // 弹出层标题\r\n      title: \"显示/隐藏\",\r\n      // 是否显示弹出层\r\n      open: false\r\n    }\r\n  },\r\n  props: {\r\n    /* 是否显示检索条件 */\r\n    showSearch: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    /* 显隐列信息（数组格式、对象格式） */\r\n    columns: {\r\n      type: [Array, Object],\r\n      default: () => ({})\r\n    },\r\n    /* 是否显示检索图标 */\r\n    search: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    /* 显隐列类型（transfer穿梭框、checkbox复选框） */\r\n    showColumnsType: {\r\n      type: String,\r\n      default: \"checkbox\"\r\n    },\r\n    /* 右外边距 */\r\n    gutter: {\r\n      type: Number,\r\n      default: 10\r\n    },\r\n    /* 列显隐状态记忆的 localStorage key（传入则启用记忆，不传则不记忆） */\r\n    storageKey: {\r\n      type: String,\r\n      default: \"\"\r\n    }\r\n  },\r\n  computed: {\r\n    style() {\r\n      const ret = {}\r\n      if (this.gutter) {\r\n        ret.marginRight = `${this.gutter / 2}px`\r\n      }\r\n      return ret\r\n    },\r\n    isChecked: {\r\n      get() {\r\n        return Array.isArray(this.columns) ? this.columns.every((col) => col.visible) : Object.values(this.columns).every((col) => col.visible)\r\n      },\r\n      set() {}\r\n    },\r\n    isIndeterminate() {\r\n      return Array.isArray(this.columns) ? this.columns.some((col) => col.visible) && !this.isChecked : Object.values(this.columns).some((col) => col.visible) && !this.isChecked\r\n    },\r\n    transferData() {\r\n      if (Array.isArray(this.columns)) {\r\n        return this.columns.map((item, index) => ({ key: index, label: item.label }))\r\n      } else {\r\n        return Object.keys(this.columns).map((key, index) => ({ key: index, label: this.columns[key].label }))\r\n      }\r\n    }\r\n  },\r\n  created() {\r\n    // 如果传入了 storageKey，从 localStorage 恢复列显隐状态\r\n    if (this.storageKey) {\r\n      try {\r\n        const saved = cache.local.getJSON(this.storageKey)\r\n        if (saved && typeof saved === 'object') {\r\n          if (Array.isArray(this.columns)) {\r\n            this.columns.forEach((col, index) => {\r\n              if (saved[index] !== undefined) col.visible = saved[index]\r\n            })\r\n          } else {\r\n            Object.keys(this.columns).forEach(key => {\r\n              if (saved[key] !== undefined) this.columns[key].visible = saved[key]\r\n            })\r\n          }\r\n        }\r\n      } catch (e) {}\r\n    }\r\n    if (this.showColumnsType == 'transfer') {\r\n      // transfer穿梭显隐列初始默认隐藏列\r\n      if (Array.isArray(this.columns)) {\r\n        for (let item in this.columns) {\r\n          if (this.columns[item].visible === false) {\r\n            this.value.push(parseInt(item))\r\n          }\r\n        }\r\n      } else {\r\n        Object.keys(this.columns).forEach((key, index) => {\r\n          if (this.columns[key].visible === false) {\r\n            this.value.push(index)\r\n          }\r\n        })\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    // 搜索\r\n    toggleSearch() {\r\n      let el = this.$el\r\n      let formEl = null\r\n      while ((el = el.parentElement) && el !== document.body) {\r\n        if ((formEl = el.querySelector('.el-form'))) break\r\n      }\r\n      if (!formEl) return this.$emit('update:showSearch', !this.showSearch)\r\n      this._animateSearch(formEl, this.showSearch)\r\n    },\r\n    // 搜索栏动画\r\n    _animateSearch(el, isHide) {\r\n      const DURATION = 260\r\n      const TRANSITION = 'max-height 0.25s ease, opacity 0.2s ease'\r\n      const clear = () => Object.assign(el.style, { transition: '', maxHeight: '', opacity: '', overflow: '' })\r\n      Object.assign(el.style, { overflow: 'hidden', transition: '' })\r\n      if (isHide) {\r\n        Object.assign(el.style, { maxHeight: el.scrollHeight + 'px', opacity: '1', transition: TRANSITION })\r\n        requestAnimationFrame(() => Object.assign(el.style, { maxHeight: '0', opacity: '0' }))\r\n        setTimeout(() => { this.$emit('update:showSearch', false); clear() }, DURATION)\r\n      } else {\r\n        this.$emit('update:showSearch', true)\r\n        this.$nextTick(() => {\r\n          Object.assign(el.style, { maxHeight: '0', opacity: '0' })\r\n          requestAnimationFrame(() => requestAnimationFrame(() => {\r\n            Object.assign(el.style, { transition: TRANSITION, maxHeight: el.scrollHeight + 'px', opacity: '1' })\r\n          }))\r\n          setTimeout(clear, DURATION)\r\n        })\r\n      }\r\n    },\r\n    // 刷新\r\n    refresh() {\r\n      this.$emit(\"queryTable\")\r\n    },\r\n    // 右侧列表元素变化\r\n    dataChange(data) {\r\n      if (Array.isArray(this.columns)) {\r\n        for (let item in this.columns) {\r\n          const key = this.columns[item].key\r\n          this.columns[item].visible = !data.includes(key)\r\n        }\r\n      } else {\r\n        Object.keys(this.columns).forEach((key, index) => {\r\n          this.columns[key].visible = !data.includes(index)\r\n        })\r\n      }\r\n      this.saveStorage()\r\n    },\r\n    // 打开显隐列dialog\r\n    showColumn() {\r\n      this.open = true\r\n    },\r\n    // 单勾选\r\n    checkboxChange(event, key) {\r\n      if (Array.isArray(this.columns)) {\r\n        this.columns.filter(item => item.key == key)[0].visible = event\r\n      } else {\r\n        this.columns[key].visible = event\r\n      }\r\n      this.saveStorage()\r\n    },\r\n    // 切换全选/反选\r\n    toggleCheckAll() {\r\n      const newValue = !this.isChecked\r\n      if (Array.isArray(this.columns)) {\r\n        this.columns.forEach((col) => (col.visible = newValue))\r\n      } else {\r\n        Object.values(this.columns).forEach((col) => (col.visible = newValue))\r\n      }\r\n      this.saveStorage()\r\n    },\r\n    // 将当前列显隐状态持久化到 localStorage\r\n    saveStorage() {\r\n      if (!this.storageKey) return\r\n      try {\r\n        let state = {}\r\n        if (Array.isArray(this.columns)) {\r\n          this.columns.forEach((col, index) => { state[index] = col.visible })\r\n        } else {\r\n          Object.keys(this.columns).forEach(key => { state[key] = this.columns[key].visible })\r\n        }\r\n        cache.local.setJSON(this.storageKey, state)\r\n      } catch (e) {}\r\n    }\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .el-transfer__button {\r\n  border-radius: 50%;\r\n  padding: 12px;\r\n  display: block;\r\n  margin-left: 0px;\r\n}\r\n::v-deep .el-transfer__button:first-child {\r\n  margin-bottom: 10px;\r\n}\r\n.check-line {\r\n  width: 90%;\r\n  height: 1px;\r\n  background-color: #ccc;\r\n  margin: 3px auto;\r\n}\r\n</style>\r\n"]}]}