添加图片显示

src/components/TableSelect/index.tsx

@@ -4,14 +4,14 @@ import { ElMessageBox } from "element-plus";
  * @Author: Gui
  * @Date: 2023-10-10 11:13:51
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-09-30 18:07:52
+ * @LastEditTime: 2024-10-08 14:54:02
  * @Description: kxs files
  * @filePath:
  */
 export const tableSelect = (option) => {
-  let lastSelectValue = option.scope.row[option.mode]
+  let lastSelectValue = option.scope.row[option.fields]
   const sexChange = ({ row }, show) => {
-    option.list.value[option.list.value.findIndex(item => row.id == item.id)].isSelectChange = show;
+    option.dataList.value[option.dataList.value.findIndex(item => row.id == item.id)].isSelectChange = show;
   }
  return <div>
     {
@@ -19,10 +19,10 @@ export const tableSelect = (option) => {
       <el-select
         class="!w-[100px]"
         size="small"
-        v-model={option.scope.row[option.mode]}
+        v-model={option.scope.row[option.fields]}
         placeholder="请选择修改项"
         onChange={() => { 
-          option.tips ?
+          option.isTip ?
             ElMessageBox.confirm(
               `是否调整当前属性? `,
               "提示",
@@ -32,16 +32,16 @@ export const tableSelect = (option) => {
                 type: "warning"
               }
             ).then(async () => {
-              lastSelectValue = option.scope.row[option.mode];
+              lastSelectValue = option.scope.row[option.fields];
               sexChange(option.scope as any, false)
               option.callback(option.scope as any)
             }).catch(() => {
-              option.scope.row[option.mode] = lastSelectValue;
+              option.scope.row[option.fields] = lastSelectValue;
               sexChange(option.scope as any, false)
-            }) : () => {
+            }) : (() => {
               sexChange(option.scope as any, false);
               option.callback(option.scope as any)
-            };
+            })();
         }}
         >
         {option.mapList.map((item: any) => (
@@ -51,11 +51,11 @@ export const tableSelect = (option) => {
       :
         <el-tag
           size={option.scope.props.size}
-          type={option.mapList.find(item => item.id === option.scope.row[option.mode])?.type}
-          effect={option.mapList.find(item => item.id === option.scope.row[option.mode])?.effect}
+          type={option.mapList.find(item => item.id === option.scope.row[option.fields])?.type}
+          effect={option.mapList.find(item => item.id === option.scope.row[option.fields])?.effect}
           onClick={() =>sexChange(option.scope as any, true)}
       >
-        {option.mapList.find(item => item.id === option.scope.row[option.mode])?.label}
+        {option.mapList.find(item => item.id === option.scope.row[option.fields])?.label}
       </el-tag>
     }
   </div>

src/components/TableSort/index.tsx

@@ -4,14 +4,16 @@ import { ElMessageBox } from "element-plus";
  * @Author: Gui
  * @Date: 2023-10-10 11:13:51
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-09-30 18:05:09
+ * @LastEditTime: 2024-10-08 14:54:50
  * @Description: kxs files
  * @filePath:
  */
 export const tableSort = (option) => {
-  let lastSelectValue = option.scope.row[option.mode]
+  let lastSelectValue = option.scope.row[option.fields]
   const sortChange = ({ row }, show) => {
-    option.list.value[option.list.value.findIndex(item => row.id == item.id)].isSortChange = show;
+    console.log({ row }, show);
+    
+    option.dataList.value[option.dataList.value.findIndex(item => row.id == item.id)].isSortChange = show;
   }
  return <div>
     {
@@ -21,9 +23,9 @@ export const tableSort = (option) => {
          size="small"
          class="!w-[120px]"
          min="0"
-         v-model={option.scope.row[option.mode]}
-        onChange={() => { 
-          option.tips ?
+         v-model={option.scope.row[option.fields]}
+         onChange={() => { 
+          option.isTip ?
             ElMessageBox.confirm(
               `是否调整当前属性? `,
               "提示",
@@ -33,21 +35,21 @@ export const tableSort = (option) => {
                 type: "warning"
               }
             ).then(async () => {
-              lastSelectValue = option.scope.row[option.mode];
+              lastSelectValue = option.scope.row[option.fields];
               sortChange(option.scope as any, false)
               option.callback(option.scope as any)
             }).catch(() => {
-              option.scope.row[option.mode] = lastSelectValue;
+              option.scope.row[option.fields] = lastSelectValue;
               sortChange(option.scope as any, false)
-            }) : () => {
+            }) : (() => {
               sortChange(option.scope as any, false);
               option.callback(option.scope as any)
-            };
+            })();
         }}
         >
       </el-input-number>
        :
-       <div onClick={() =>sortChange(option.scope as any, true)}>{ option.scope.row[option.mode] }</div> 
+       <div onClick={() =>sortChange(option.scope as any, true)}>{ option.scope.row[option.fields] }</div> 
     }
   </div>
 };

src/utils/importUsed.ts

@@ -2,7 +2,7 @@
  * @Author: guicheng 1625811865@qq.com
  * @Date: 2024-06-21 11:11:08
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-09-29 10:38:34
+ * @LastEditTime: 2024-10-08 14:57:24
  * @FilePath: /admin-skb/src/utils/importUsed.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -22,6 +22,7 @@ import { type PaginationProps } from "@pureadmin/table";
 import { hasAuth } from "@/router/utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { usePublicHooks } from "@/utils/switchStyle";
+import { getConfig } from "@/config";
 
 export {
   inject,
@@ -43,5 +44,6 @@ export {
   verification,
   PaginationProps,
   hasAuth,
-  PureTableBar
+  PureTableBar,
+  getConfig
 };

src/views/Template/template/hook.tsx

@@ -1,6 +1,6 @@
 import { tableSelect } from "@/components/TableSelect";
 import { tableSort } from "@/components/TableSort";
-import { reactive, onMounted, ref, usePublicHooks, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps, hasAuth } from "@/utils/importUsed"
+import { reactive, onMounted, ref, usePublicHooks, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps, hasAuth, getConfig } from "@/utils/importUsed"
 // 接口列表实例
 const UserUrl = ref(null)
 const { switchStyle } = usePublicHooks();
@@ -61,8 +61,8 @@ export function useUser() {
   ]);
   // 表格数据列表
   const dataList:any = ref([
-    { sort:0, id: 1, status:false,sex:1, name:'角色名称1', rank:3, dept:"行政部", post:["人事专员", "行政主管"]},
-    { sort:1, id: 2, status:true,sex:0, name:'角色名称2', rank:9, dept:"运营部", post:["数据分析", "运营专员", "运营主管"] }
+    { sort:0, id: 1, status:false,sex:1, name:'角色名称1', rank:3, dept:"行政部", post:["人事专员", "行政主管"], header:'kxs_new/KXS_ADMIN/2024-09-04/8ca30206-680f-48ef-aa07-8629cc83739fbf051c698ffdea8a.png'},
+    { sort:1, id: 2, status:true,sex:0, name:'角色名称2', rank:9, dept:"运营部", post:["数据分析", "运营专员", "运营主管"], header:'kxs_new/KXS_ADMIN/2024-09-04/8ca30206-680f-48ef-aa07-8629cc83739fbf051c698ffdea8a.png' }
   ]);
   // 页面加载状态
   const loading = ref(false);
@@ -157,6 +157,21 @@ export function useUser() {
         })
       )
     },
+    {
+      label: "封面图",
+      minWidth: 100,
+      formatter: ({ header }) => {
+        return (<div style="text-align: center;">
+          <el-image
+            fit="cover"
+            preview-teleported={true}
+            src={getConfig().UploadUrl + '/' + header}
+            preview-src-list={Array.of(getConfig().UploadUrl + '/' + header)}
+            class="w-[50px] h-[50px] align-middle"
+          />
+        </div>)
+      }
+    },
     {
       label: "部门",
       minWidth: 130,