添加各种

build/plugins.ts

@@ -12,6 +12,7 @@ import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import { codeInspectorPlugin } from "code-inspector-plugin";
 // import { vitePluginFakeServer } from "vite-plugin-fake-server";
+import vitePluginRequire from "vite-plugin-require"; // 确保导入路径正确
 
 export function getPluginsList(
   VITE_CDN: boolean,
@@ -61,6 +62,12 @@ export function getPluginsList(
     // 打包分析
     lifecycle === "report"
       ? visualizer({ open: true, brotliSize: true, filename: "report.html" })
-      : (null as any)
+      : (null as any),
+    vitePluginRequire.default({
+      // 假设插件接受一个配置对象
+      fileRegex:/(.jsx?|.tsx?|.vue)$/ ,
+      translateType: 'import', // 将 require 转换为 import 语句
+      // 其他可能的选项...
+    })
   ];
 }

package.json

@@ -53,6 +53,7 @@
     "@pureadmin/utils": "^2.6.2",
     "@vueuse/core": "^13.6.0",
     "@vueuse/motion": "^3.0.3",
+    "ali-oss": "^6.23.0",
     "animate.css": "^4.1.1",
     "axios": "^1.11.0",
     "crypto-js": "^4.2.0",
@@ -71,6 +72,7 @@
     "qs": "^6.14.0",
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.6",
+    "vite-plugin-require": "^1.2.14",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1",
     "vue-tippy": "^6.7.1",

src/api/upload.ts

@@ -0,0 +1,12 @@
+import {http} from "@/utils/http";
+import {baseUrlApi} from "@/api/utils";
+
+type Result = {
+    msg: boolean;
+    data: any;
+    code: number;
+};
+
+export const getAliossToken = () => {
+    return http.request<Result>("post", baseUrlApi("/alioss/token"));
+};

src/components/ExportView/index.vue

@@ -54,7 +54,7 @@ import type { FormInstance, FormRules } from "element-plus";
 import { ElMessage } from "element-plus";
 import dayjs from "dayjs";
 
-import { http } from "@/utils/http/index";
+import { http } from "@/utils/http";
 
 // 定义接口
 interface ExportForm {

src/views/testTable/pageTable/index.vue

@@ -1,42 +1,60 @@
 <template>
   <div>
     <PlusPage
-      :columns="tableConfig"
-      :request="getList"
-      :before-search-submit="handleBeforeSearch"
-      :is-card="true"
-      :table="{
-        onSortChange: handleSortChange,
+        :columns="tableConfig"
+        :request="getList"
+        :before-search-submit="handleBeforeSearch"
+        :is-card="true"
+        :table="{
         isSelection: true,
         actionBar: { buttons, type: 'button', width: 240 },
-        adaptive: { offsetBottom: 50 }
+        adaptive: { offsetBottom: 50 },
+        onSortChange: handleSortChange,
+        onSelectionChange: handleSelect,
       }"
-      :defaultPageInfo="{ page: 1, pageSize: 10 }"
-      :defaultPageSizeList="[10, 20, 50, 100]"
+        :defaultPageInfo="{ page: 1, pageSize: 10 }"
+        :defaultPageSizeList="[10, 20, 50, 100]"
     >
+      <template #table-title>
+        <el-row class="button-row">
+          <el-button type="primary" @click="handleCreate"> 添加</el-button>
+          <el-button type="danger" @click="handleBatchDelete"> 批量删除</el-button>
+        </el-row>
+      </template>
       <template #table-toolbar>
         <ExportView
-          title="导出"
-          url="''"
-          file-name="订单列表"
-          :query-params="{}"
+            title="导出"
+            url="''"
+            file-name="订单列表"
+            :query-params="{}"
         />
       </template>
     </PlusPage>
+    <!-- 弹窗编辑 -->
+    <PlusDialogForm
+        v-model:visible="visible"
+        @change="handleChange"
+        @confirm="handleSubmit"
+        @submit-error="handleSubmitError"
+        @reset="handleReset"
+        :form="{ columns, labelPosition: 'top', rules, rowProps: {gutter: 20}, colProps: {span: 12} }"
+        :dialog="{ title: dialogTitle + '用户组', width: 800, confirmLoading }"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineOptions, ref } from "vue";
+import {computed, defineOptions, reactive, ref, toRefs} from "vue";
 import {
   type PageInfo,
   type PlusColumn,
+  type FieldValues,
+  PlusDialogForm,
   PlusPage,
   useTable
 } from "plus-pro-components";
-import { cloneDeep } from "lodash-es";
-import { number } from "echarts";
-
+import {cloneDeep} from "lodash-es";
+import {ElMessage} from "element-plus";
 import ExportView from "@/components/ExportView/index.vue";
 
 defineOptions({
@@ -52,26 +70,26 @@ interface TableRow {
 }
 
 const getList = async (
-  query: PageInfo & {
-    status?: string;
-    name?: string;
-  }
+    query: PageInfo & {
+      status?: string;
+      name?: string;
+    }
 ) => {
-  const { page = 1, pageSize = 20, status, name } = query || {};
+  const {page = 1, pageSize = 20, status, name} = query || {};
   const total = 100;
-  const List = Array.from({ length: total }).map((_, index) => {
+  const List = Array.from({length: total}).map((_, index) => {
     return {
       id: index,
       name: index === 0 ? "name".repeat(99) : index + "name",
       status: String(index % 3),
       tag:
-        index === 1
-          ? "success"
-          : index === 2
-            ? "warning"
-            : index === 3
-              ? "info"
-              : "danger",
+          index === 1
+              ? "success"
+              : index === 2
+                  ? "warning"
+                  : index === 3
+                      ? "info"
+                      : "danger",
       progress: 10,
       rate: index > 3 ? 2 : 3.5,
       switch: index % 2 === 0,
@@ -90,7 +108,7 @@ const getList = async (
   });
 
   const pageList = mockList.filter(
-    (_, index) => index < pageSize * page && index >= pageSize * (page - 1)
+      (_, index) => index < pageSize * page && index >= pageSize * (page - 1)
   );
 
   // 等待2s
@@ -100,7 +118,7 @@ const getList = async (
     }, 500);
   });
 
-  return { data: pageList, success: true, total: mockList.length };
+  return {data: pageList, success: true, total: mockList.length};
 };
 
 // 搜索之前函数
@@ -114,6 +132,7 @@ const handleBeforeSearch = (values: any) => {
   return params;
 };
 
+// 排序函数
 const handleSortChange = (val: object) => {
   console.log("handleSortChange", val);
 };
@@ -130,9 +149,9 @@ const disabledDate = (time: any) => {
     // 当前日期 + one = 7天之后
     const maxTime = choiceDate.value + one;
     return (
-      time.getTime() < minTime || time.getTime() > maxTime
-      // 限制不能选择今天及以后
-      // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
+        time.getTime() < minTime || time.getTime() > maxTime
+        // 限制不能选择今天及以后
+        // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
     );
   } else {
     // 如果没有选择日期，就要限制不能选择今天及以后
@@ -150,8 +169,10 @@ const calendarChange = (obj: any) => {
   if (maxDate) choiceDate.value = null;
 };
 
-const { buttons } = useTable<TableRow[]>();
+const dialogTitle = computed(() => (state.isCreate ? '新增' : '编辑'))
+const {buttons} = useTable<TableRow[]>();
 
+// 表格数据
 const tableConfig: PlusColumn[] = [
   {
     label: "名称",
@@ -193,7 +214,7 @@ const tableConfig: PlusColumn[] = [
     prop: "tag",
     valueType: "tag",
     fieldProps: (value: string) => {
-      return { type: value };
+      return {type: value};
     }
   },
   {
@@ -202,12 +223,12 @@ const tableConfig: PlusColumn[] = [
     valueType: "progress",
     fieldProps: (value: number) => {
       return value === 0
-        ? { status: "exception" }
-        : value > 5
-          ? { status: "warning" }
-          : value > 3
-            ? { status: "success" }
-            : { status: "exception" };
+          ? {status: "exception"}
+          : value > 5
+              ? {status: "warning"}
+              : value > 3
+                  ? {status: "success"}
+                  : {status: "exception"};
     }
   },
   {
@@ -260,6 +281,279 @@ const tableConfig: PlusColumn[] = [
   }
 ];
 
+/*--------------------表单--------------------*/
+
+const dialogVisible = ref(false);
+
+const state = reactive<FieldValues>({
+  status: '0',
+  name: '',
+  rate: 4,
+  isCreate: true,
+  progress: 100,
+  confirmLoading: false,
+  switch: true,
+  time: new Date().toString(),
+  img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+  query: {groupName: ''},
+  currentRow: {},
+  visible: false,
+  detailsVisible: false,
+  isBatch: false,
+  selectedIds: [],
+  form: {
+    groupName: '',
+    remark: '',
+    userGroupId: undefined
+  },
+  rules: {
+    name: [
+      {
+        required: true,
+        message: '请输入',
+        trigger: 'blur'
+      }
+    ]
+  }
+})
+
+const columns: PlusColumn[] = [
+  {
+    label: '名称',
+    width: 120,
+    prop: 'name',
+    valueType: 'copy',
+    tooltip: '名称最多显示6个字符'
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '标签',
+    width: 120,
+    prop: 'tag'
+  },
+  {
+    label: '执行进度',
+    width: 200,
+    prop: 'progress'
+  },
+  {
+    label: '评分',
+    width: 200,
+    prop: 'rate',
+    valueType: 'rate'
+  },
+  {
+    label: '是否显示',
+    width: 100,
+    prop: 'switch',
+    valueType: 'switch'
+  },
+  {
+    label: '图片',
+    prop: 'img',
+    width: 100,
+    valueType: 'img'
+  },
+  {
+    label: '时间',
+    prop: 'time',
+    valueType: 'date-picker'
+  },
+  {
+    label: '数量',
+    prop: 'number',
+    valueType: 'input-number',
+    fieldProps: {precision: 2, step: 2}
+  },
+  {
+    label: '城市',
+    prop: 'city',
+    valueType: 'cascader',
+    options: [
+      {
+        value: '0',
+        label: '陕西',
+        children: [
+          {
+            value: '0-0',
+            label: '西安',
+            children: [
+              {
+                value: '0-0-0',
+                label: '新城区'
+              },
+              {
+                value: '0-0-1',
+                label: '高新区'
+              },
+              {
+                value: '0-0-2',
+                label: '灞桥区'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: '1',
+        label: '山西',
+        children: [
+          {
+            value: '1-0',
+            label: '太原',
+            children: [
+              {
+                value: '1-0-0',
+                label: '小店区'
+              },
+              {
+                value: '1-0-1',
+                label: '古交市'
+              },
+              {
+                value: '1-0-2',
+                label: '万柏林区'
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: '地区',
+    prop: 'place',
+    tooltip: '请精确到门牌号',
+    fieldProps: {
+      placeholder: '请精确到门牌号'
+    }
+  },
+  {
+    label: '要求',
+    prop: 'demand',
+    valueType: 'checkbox',
+    options: [
+      {
+        label: '四六级',
+        value: '0'
+      },
+      {
+        label: '计算机二级证书',
+        value: '1'
+      },
+      {
+        label: '普通话证书',
+        value: '2'
+      }
+    ]
+  },
+  {
+    label: '梦想',
+    prop: 'gift',
+    valueType: 'radio',
+    options: [
+      {
+        label: '诗',
+        value: '0'
+      },
+      {
+        label: '远方',
+        value: '1'
+      }
+    ]
+  },
+  {
+    label: '到期时间',
+    prop: 'endTime',
+    valueType: 'date-picker',
+    fieldProps: {
+      type: 'datetimerange',
+      startPlaceholder: '请选择开始时间',
+      endPlaceholder: '请选择结束时间'
+    }
+  },
+  {
+    label: '说明',
+    prop: 'desc',
+    valueType: 'textarea',
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      autosize: {minRows: 2, maxRows: 4}
+    }
+  }
+]
+
+// 创建
+const handleCreate = (): void => {
+  state.currentRow = {}
+  state.form = {
+    groupName: '',
+    remark: '',
+    userGroupId: undefined
+  }
+  state.isCreate = true
+  state.visible = true
+}
+
+// 批量删除
+const handleBatchDelete = async () => {
+  console.log('批量删除')
+  if (!state.selectedIds.length) {
+    ElMessage.warning('请选择数据！')
+    return
+  }
+  console.log(state.selectedIds)
+}
+// 选择
+const handleSelect = (data: any) => {
+  state.selectedIds = [...data].map(item => item.id)
+}
+const handleChange = (values: FieldValues) => {
+  console.log(values, 'change')
+}
+const handleSubmit = (values: FieldValues) => {
+  console.log(values, 'Submit')
+  confirmLoading.value = true
+  setTimeout(() => {
+    confirmLoading.value = false
+    visible.value = false
+  }, 2000)
+}
+const handleSubmitError = (err: any) => {
+  console.log(err, 'err')
+}
+const handleReset = () => {
+  console.log('handleReset')
+}
+
 buttons.value = [
   {
     // 查看
@@ -287,7 +581,7 @@ buttons.value = [
     text: "删除",
     code: "delete",
     // props v0.1.16 版本新增计算属性支持
-    props: computed(() => ({ type: "danger" })),
+    props: computed(() => ({type: "danger"})),
     confirm: {
       options: {
         draggable: true,
@@ -296,4 +590,6 @@ buttons.value = [
     }
   }
 ];
+
+const {form, confirmLoading, rules, currentRow, visible, detailsVisible} = toRefs(state)
 </script>

src/views/testUpload/upload-oss/index.vue

@@ -1,8 +1,41 @@
 <script setup lang="ts">
+const OSS = require('ali-oss');
+import {onMounted, ref} from "vue";
+import {getAliossToken} from '@/api/upload'
+
 defineOptions({
   name: "UploadOss"
 })
-import { ref } from "vue";
+
+const qiniuConfig = ref({
+  region: 'oss-cn-hangzhou', // OSS所在的区域
+  accessKey: 'your-access-key-id', // Access Key ID
+  secretKey: 'your-access-key-secret', // Access Key Secret
+  bucket: 'loansm' // Bucket名称
+})
+
+onMounted(async () => {
+
+})
+
+const handleGetOssToken = async () => {
+  try {
+    let params = await getAliossToken()
+    console.log(params);
+    if (params && params.code === 200) {
+      let data = params.data
+      qiniuConfig.value.accessKey = data.accessKeyId
+      qiniuConfig.value.secretKey = data.accessKeySecret
+    }
+  } catch (error) {
+    console.error('获取token失败', error);
+  }
+}
+
+
+/*console.log(OSS);
+const clients = new OSS(qiniuConfig);
+console.log(clients);*/
 
 const fileList = ref([
   {
@@ -22,14 +55,15 @@ const fileList = ref([
       <div slot="header" class="clearfix">
         <span>上传组件</span>
       </div>
+      <el-button class="mt-5" @click="handleGetOssToken" type="primary">获取token</el-button>
       <el-upload
-        class="upload-demo"
-        drag
-        action="https://jsonplaceholder.typicode.com/posts/"
-        :on-preview="(file) => { console.log('preview', file); }"
-        :on-remove="(file, fileList) => { console.log('remove', file, fileList); }"
-        :before-remove="(file, fileList) => { return $confirm(`确定移除 ${file.name}？`); }"
-        :file-list="fileList"
+          class="upload-demo mt-5"
+          drag
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :on-preview="(file) => { console.log('preview', file); }"
+          :on-remove="(file, fileList) => { console.log('remove', file, fileList); }"
+          :before-remove="(file, fileList) => { return $confirm(`确定移除 ${file.name}？`); }"
+          :file-list="fileList"
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>