From c1ae1ffb5e06f50df2cee7f3fcb3aa81135c0fbb Mon Sep 17 00:00:00 2001
From: 2002YJUN <1977201465@qq.com>
Date: Mon, 28 Apr 2025 23:11:39 +0800
Subject: [PATCH] gqy

---
 vue/ExamSelect/index.vue   |  94 +++++++++++++++
 vue/FileUpload/index.vue   |  85 +++++++++++++
 vue/FileUpload/local.vue   | 155 ++++++++++++++++++++++++
 vue/Hamburger/index.vue    |  50 ++++++++
 vue/HeaderSearch/index.vue | 236 +++++++++++++++++++++++++++++++++++++
 vue/MeetRole/index.vue     |  89 ++++++++++++++
 vue/Pagination/index.vue   | 149 +++++++++++++++++++++++
 7 files changed, 858 insertions(+)
 create mode 100644 vue/ExamSelect/index.vue
 create mode 100644 vue/FileUpload/index.vue
 create mode 100644 vue/FileUpload/local.vue
 create mode 100644 vue/Hamburger/index.vue
 create mode 100644 vue/HeaderSearch/index.vue
 create mode 100644 vue/MeetRole/index.vue
 create mode 100644 vue/Pagination/index.vue

diff --git a/vue/ExamSelect/index.vue b/vue/ExamSelect/index.vue
new file mode 100644
index 0000000..5dec7d3
--- /dev/null
+++ b/vue/ExamSelect/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <el-select
+    v-model="currentValue"
+    :multiple="multi"
+    :remote-method="fetchData"
+    filterable
+    remote
+    clearable
+    placeholder="选择或搜索考试"
+    class="filter-item"
+    @change="handlerChange"
+  >
+    <el-option
+      v-for="item in dataList"
+      :key="item.id"
+      :label="item.title"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import { fetchList } from '@/api/exam/exam'
+
+export default {
+  name: 'ExamSelect',
+  props: {
+    // /**
+    //  * 是否允许多选
+    //  */
+    multi: Boolean,
+
+    // /**
+    //  * 当前选中的值
+    //  */
+    value: Array,
+
+    // /**
+    //  * 默认值（这里应该是多余的，因为value已经定义为Array）
+    //  */
+    default: String
+  },
+  data() {
+    return {
+      // /**
+      //  * 下拉选项的数据列表
+      //  */
+      dataList: [],
+
+      // /**
+      //  * 当前选中的值
+      //  */
+      currentValue: []
+    }
+  },
+  watch: {
+    // /**
+    //  * 监听value的变化，当value变化时更新currentValue
+    //  */
+    value: {
+      handler() {
+        this.currentValue = this.value
+      }
+    }
+  },
+  created() {
+    // /**
+    //  * 组件创建时，初始化currentValue并调用fetchData获取数据
+    //  */
+    this.currentValue = this.value
+    this.fetchData()
+  },
+  methods: {
+    // /**
+    //  * 获取考试列表数据
+    //  */
+    fetchData() {
+      fetchList().then(response => {
+        this.dataList = response.data.records
+      })
+    },
+
+    // /**
+    //  * 处理选项变化事件
+    //  * @param e 选中的值
+    //  */
+    handlerChange(e) {
+      console.log(e)
+      this.$emit('change', e)
+      this.$emit('input', e)
+    }
+  }
+}
+</script>
diff --git a/vue/FileUpload/index.vue b/vue/FileUpload/index.vue
new file mode 100644
index 0000000..add6aa3
--- /dev/null
+++ b/vue/FileUpload/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <file-upload-local v-model="fileUrl" :accept="accept" :tips="tips" :list-type="listType" />
+  </div>
+</template>
+
+<script>
+import FileUploadLocal from './local'
+
+export default {
+  name: 'FileUpload',
+  components: { FileUploadLocal },
+  props: {
+    // /**
+    //  * 上传文件的URL
+    //  */
+    value: String,
+
+    // /**
+    //  * 允许上传的文件类型，默认为所有类型
+    //  */
+    accept: {
+      type: String,
+      default: '*'
+    },
+
+    // /**
+    //  * 上传组件的提示信息
+    //  */
+    tips: String,
+
+    // /**
+    //  * 上传组件的列表类型，默认为图片类型
+    //  */
+    listType: {
+      type: String,
+      default: 'picture'
+    }
+  },
+  data() {
+    return {
+      // /**
+      //  * 上传文件的URL
+      //  */
+      fileUrl: ''
+    }
+  },
+  watch: {
+    // /**
+    //  * 监听value的变化，当value变化时调用fillValue方法更新fileUrl
+    //  */
+    value: {
+      handler() {
+        this.fillValue()
+      }
+    },
+
+    // /**
+    //  * 监听fileUrl的变化，当fileUrl变化时，向父组件传递新的fileUrl值
+    //  */
+    fileUrl: {
+      handler() {
+        this.$emit('input', this.fileUrl)
+      }
+    }
+  },
+  mounted() {
+    // 组件挂载时的逻辑（这里目前为空）
+  },
+  created() {
+    // /**
+    //  * 组件创建时，初始化fileUrl
+    //  */
+    this.fillValue()
+  },
+  methods: {
+    // /**
+    //  * 将value值赋给fileUrl
+    //  */
+    fillValue() {
+      this.fileUrl = this.value
+    }
+  }
+}
+</script>
diff --git a/vue/FileUpload/local.vue b/vue/FileUpload/local.vue
new file mode 100644
index 0000000..6a4455b
--- /dev/null
+++ b/vue/FileUpload/local.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="content">
+    <el-upload
+      v-model="fileUrl"
+      :action="server"
+      :accept="accept"
+      :before-remove="beforeRemove"
+      :on-remove="handleRemove"
+      :on-success="handleSuccess"
+      :on-exceed="handleExceed"
+      :drag="listType!=='picture'"
+      :limit="limit"
+      :headers="header"
+      :file-list="fileList"
+      :list-type="listType"
+    >
+      <el-button v-if="listType==='picture'" size="small" type="primary">点击上传</el-button>
+      <i v-if="listType!=='picture'" class="el-icon-upload" />
+      <div v-if="listType!=='picture'" class="el-upload__text">
+        将文件拖到此处，或
+        <em>点击上传</em>
+      </div>
+      <div v-if="tips" slot="tip" class="el-upload__tip">{{ tips }}</div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'FileUploadLocal',
+  components: { FileUploadLocal },
+  props: {
+    // /**
+    //  * 上传文件的URL
+    //  */
+    value: String,
+
+    // /**
+    //  * 允许上传的文件类型
+    //  */
+    accept: String,
+
+    // /**
+    //  * 上传组件的提示信息
+    //  */
+    tips: String,
+
+    // /**
+    //  * 上传组件的列表类型
+    //  */
+    listType: String,
+
+    // /**
+    //  * 允许上传的最大文件数量，默认为1
+    //  */
+    limit: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      // /**
+      //  * 文件上传的服务器地址
+      //  */
+      server: `${process.env.VUE_APP_BASE_API}/common/api/file/upload`,
+
+      // /**
+      //  * 上传文件列表
+      //  */
+      fileList: [],
+
+      // /**
+      //  * 上传文件的URL
+      //  */
+      fileUrl: '',
+
+      // /**
+      //  * 上传请求的头部信息
+      //  */
+      header: {}
+    }
+  },
+  watch: {
+    // /**
+    //  * 监听value的变化，当value变化时调用fillValue方法更新fileUrl和fileList
+    //  */
+    value: {
+      handler() {
+        this.fillValue()
+      }
+    }
+  },
+  created() {
+    // /**
+    //  * 组件创建时，初始化fileUrl和fileList，并设置上传请求的头部信息包含token
+    //  */
+    this.fillValue()
+    this.header = { token: getToken() }
+  },
+  methods: {
+    // /**
+    //  * 将value值赋给fileUrl，并更新fileList
+    //  */
+    fillValue() {
+      this.fileList = []
+      this.fileUrl = this.value
+      if (this.fileUrl) {
+        this.fileList = [{ name: this.fileUrl, url: this.fileUrl }]
+      }
+    },
+
+    // /**
+    //  * 文件超出个数限制时的处理方法
+    //  */
+    handleExceed() {
+      this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
+    },
+
+    // /**
+    //  * 删除文件之前的确认方法
+    //  * @returns {Promise} 确认对话框的Promise对象
+    //  */
+    beforeRemove() {
+      return this.$confirm(`确定移除文件吗？`)
+    },
+
+    // /**
+    //  * 文件列表移除文件时的处理方法
+    //  */
+    handleRemove() {
+      this.$emit('input', '')
+      this.fileList = []
+    },
+
+    // /**
+    //  * 文件上传成功时的处理方法
+    //  * @param {Object} response 服务器返回的响应对象
+    //  */
+    handleSuccess(response) {
+      if (response.code === 1) {
+        this.$message({
+          type: 'error',
+          message: response.msg
+        })
+        this.fileList = []
+        return
+      }
+      this.$emit('input', response.data.url)
+    }
+  }
+}
+</script>
diff --git a/vue/Hamburger/index.vue b/vue/Hamburger/index.vue
new file mode 100644
index 0000000..7394fa9
--- /dev/null
+++ b/vue/Hamburger/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active': isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    // /**
+    //  * 控制汉堡菜单是否处于激活状态，默认为false
+    //  */
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // /**
+    //  * 处理点击事件，触发toggleClick事件
+    //  */
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/vue/HeaderSearch/index.vue b/vue/HeaderSearch/index.vue
new file mode 100644
index 0000000..0f04307
--- /dev/null
+++ b/vue/HeaderSearch/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <div :class="{'show': show}" class="header-search">
+    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <el-select
+      ref="headerSearchSelect"
+      v-model="search"
+      :remote-method="querySearch"
+      filterable
+      default-first-option
+      remote
+      placeholder="Search"
+      class="header-search-select"
+      @change="change"
+    >
+      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
+    </el-select>
+  </div>
+</template>
+
+<script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
+import Fuse from 'fuse.js'
+import path from 'path'
+
+export default {
+  name: 'HeaderSearch',
+  data() {
+    return {
+      // /**
+      //  * 搜索框的值
+      //  */
+      search: '',
+
+      // /**
+      //  * 搜索结果选项列表
+      //  */
+      options: [],
+
+      // /**
+      //  * 搜索池，包含所有可搜索的路由
+      //  */
+      searchPool: [],
+
+      // /**
+      //  * 控制搜索框是否显示
+      //  */
+      show: false,
+
+      // /**
+      //  * Fuse实例，用于模糊搜索
+      //  */
+      fuse: undefined
+    }
+  },
+  computed: {
+    // /**
+    //  * 获取权限路由列表
+    //  * @returns {Array} 权限路由列表
+    //  */
+    routes() {
+      return this.$store.getters.permission_routes
+    }
+  },
+  watch: {
+    // /**
+    //  * 监听路由变化，重新生成搜索池
+    //  */
+    routes() {
+      this.searchPool = this.generateRoutes(this.routes)
+    },
+
+    // /**
+    //  * 监听搜索池变化，初始化Fuse实例
+    //  */
+    searchPool(list) {
+      this.initFuse(list)
+    },
+
+    // /**
+    //  * 监听显示状态变化，添加或移除点击事件监听器
+    //  */
+    show(value) {
+      if (value) {
+        document.body.addEventListener('click', this.close)
+      } else {
+        document.body.removeEventListener('click', this.close)
+      }
+    }
+  },
+  mounted() {
+    // /**
+    //  * 组件挂载后，生成搜索池
+    //  */
+    this.searchPool = this.generateRoutes(this.routes)
+  },
+  methods: {
+    // /**
+    //  * 处理点击事件，切换搜索框显示状态并聚焦搜索框
+    //  */
+    click() {
+      this.show = !this.show
+      if (this.show) {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+      }
+    },
+
+    // /**
+    //  * 处理关闭事件，失焦搜索框并重置选项和显示状态
+    //  */
+    close() {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+      this.options = []
+      this.show = false
+    },
+
+    // /**
+    //  * 处理搜索框值变化事件，跳转到搜索结果对应的路由并重置选项
+    //  * @param {Object} val 选中的搜索结果项
+    //  */
+    change(val) {
+      this.$router.push(val.path)
+      this.search = ''
+      this.options = []
+      this.$nextTick(() => {
+        this.show = false
+      })
+    },
+
+    // /**
+    //  * 初始化Fuse实例，用于模糊搜索
+    //  * @param {Array} list 搜索池列表
+    //  */
+    initFuse(list) {
+      this.fuse = new Fuse(list, {
+        shouldSort: true,
+        threshold: 0.4,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: [{
+          name: 'title',
+          weight: 0.7
+        }, {
+          name: 'path',
+          weight: 0.3
+        }]
+      })
+    },
+
+    // /**
+    //  * 生成可搜索的路由列表，过滤出隐藏路由并生成国际化标题
+    //  * @param {Array} routes 路由列表
+    //  * @param {String} basePath 基础路径，默认为 '/'
+    //  * @param {Array} prefixTitle 前缀标题，默认为空数组
+    //  * @returns {Array} 生成的搜索池列表
+    //  */
+    generateRoutes(routes, basePath = '/', prefixTitle = []) {
+      let res = []
+      for (const router of routes) {
+        // skip hidden router
+        if (router.hidden) { continue }
+        const data = {
+          path: path.resolve(basePath, router.path),
+          title: [...prefixTitle]
+        }
+        if (router.meta && router.meta.title) {
+          data.title = [...data.title, router.meta.title]
+          if (router.redirect !== 'noRedirect') {
+            // only push the routes with title
+            // special case: need to exclude parent router without redirect
+            res.push(data)
+          }
+        }
+        // recursive child routes
+        if (router.children) {
+          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          if (tempRoutes.length >= 1) {
+            res = [...res, ...tempRoutes]
+          }
+        }
+      }
+      return res
+    },
+
+    // /**
+    //  * 执行搜索操作，根据搜索框的值过滤出匹配的选项
+    //  * @param {String} query 搜索框的值
+    //  */
+    querySearch(query) {
+      if (query !== '') {
+        this.options = this.fuse.search(query)
+      } else {
+        this.options = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-search {
+  font-size: 0 !important;
+  .search-icon {
+    cursor: pointer;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+  .header-search-select {
+    font-size: 18px;
+    transition: width 0.2s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+    vertical-align: middle;
+    ::v-deep .el-input__inner {
+      border-radius: 0;
+      border: 0;
+      padding-left: 0;
+      padding-right: 0;
+      box-shadow: none !important;
+      border-bottom: 1px solid #d9d9d9;
+      vertical-align: middle;
+    }
+  }
+  &.show {
+    .header-search-select {
+      width: 210px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>
diff --git a/vue/MeetRole/index.vue b/vue/MeetRole/index.vue
new file mode 100644
index 0000000..99857ea
--- /dev/null
+++ b/vue/MeetRole/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <el-select
+    v-model="values"
+    :remote-method="fetchList"
+    style="width: 100%"
+    multiple
+    filterable
+    remote
+    reserve-keyword
+    clearable
+    automatic-dropdown
+    placeholder="请选择角色"
+    @change="handlerChange"
+  >
+    <el-option
+      v-for="item in list"
+      :key="item.id"
+      :label="item.title"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import { fetchList } from '@/api/sys/role/role'
+
+export default {
+  name: 'MeetRole',
+  props: {
+    /**
+     * 初始选中的角色ID数组
+     */
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      // /**
+      //  * 下拉选项列表
+      //  */
+      list: [],
+
+      // /**
+      //  * 当前选中的角色ID数组
+      //  */
+      values: []
+    }
+  },
+  watch: {
+    // /**
+    //  * 监听外部传入的value属性变化，同步更新内部的values数组
+    //  */
+    value: {
+      handler(newVal) {
+        this.values = newVal
+      },
+      deep: true
+    }
+  },
+  created() {
+    // /**
+    //  * 组件创建后，初始化values数组并获取角色列表
+    //  */
+    this.values = this.value
+    this.fetchList()
+  },
+  methods: {
+    // /**
+    //  * 获取角色列表数据，赋值给list数组
+    //  */
+    fetchList() {
+      fetchList().then(response => {
+        this.list = response.data
+      })
+    },
+
+    // /**
+    //  * 处理选择变化事件，触发外部的change和input事件
+    //  * @param {Array} e 当前选中的角色ID数组
+    //  */
+    handlerChange(e) {
+      this.$emit('change', e)
+      this.$emit('input', e)
+    }
+  }
+}
+</script>
diff --git a/vue/Pagination/index.vue b/vue/Pagination/index.vue
new file mode 100644
index 0000000..0285f08
--- /dev/null
+++ b/vue/Pagination/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <div :class="{'hidden': hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    // /**
+    //  * 总数据条数，必填项
+    //  */
+    total: {
+      required: true,
+      type: Number
+    },
+
+    // /**
+    //  * 当前页码，默认为1
+    //  */
+    page: {
+      type: Number,
+      default: 1
+    },
+
+    // /**
+    //  * 每页显示的数据条数，默认为20
+    //  */
+    limit: {
+      type: Number,
+      default: 20
+    },
+
+    // /**
+    //  * 每页显示的数据条数选项，默认为[10, 20, 30, 50]
+    //  */
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+
+    // /**
+    //  * 分页组件的布局，默认为'total, sizes, prev, pager, next, jumper'
+    //  */
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+
+    // /**
+    //  * 是否启用分页背景，默认为true
+    //  */
+    background: {
+      type: Boolean,
+      default: true
+    },
+
+    // /**
+    //  * 是否在改变页码或每页显示的数据条数时自动滚动到顶部，默认为true
+    //  */
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+
+    // /**
+    //  * 是否隐藏分页组件，默认为false
+    //  */
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    // /**
+    //  * 当前页码，基于外部传入的page属性
+    //  */
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+
+    // /**
+    //  * 每页显示的数据条数，基于外部传入的limit属性
+    //  */
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    // /**
+    //  * 处理每页显示的数据条数变化事件，触发外部的pagination事件
+    //  * @param {Number} val 新的每页显示的数据条数
+    //  */
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+
+    // /**
+    //  * 处理当前页码变化事件，触发外部的pagination事件
+    //  * @param {Number} val 新的当前页码
+    //  */
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+
+.pagination-container.hidden {
+  display: none;
+}
+</style>