组件表格封装完成

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnType": true,
   "editor.formatOnSave": true,
   "[vue]": {
-    "editor.defaultFormatter": "Vue.volar"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.tabSize": 2,
   "editor.formatOnPaste": true,

src/api/utils.ts

@@ -2,9 +2,9 @@
  * @Author: Gui
  * @Date: 2023-03-08 11:24:34
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2025-02-07 16:18:12
+ * @LastEditTime: 2025-02-17 11:39:44
  * @Description: kxs files
  * @filePath:
  */
-// export const environment = "development";
-export const environment = "production";
+export const environment = "development";
+// export const environment = "production";

src/components/OmageTable/index.vue

@@ -1,41 +1,258 @@
 <!--
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
- * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2025-02-11 18:03:18
+ * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
+ * @LastEditTime: 2025-02-14 15:48:40
  * @Description: kxs files
  * @filePath: 
 -->
 <script setup lang="ts">
+import { ref } from "vue";
+interface ColumnsType {
+  hide: Function;
+  slot: string;
+  cellRenderer: Function;
+  formatter: Function;
+  type: string;
+  index: number | Function;
+  label: string;
+  columnKey: string;
+  prop: string;
+  width: string | number;
+  minWidth: string | number;
+  fixed: string | boolean;
+  headerRenderer: Function;
+  sortable: boolean | string;
+  sortMethod: Function;
+  sortBy: Function | string | object;
+  sortOrders: object;
+  resizable: boolean;
+  formatterTable: Function;
+  showOverflowTooltip: boolean | object;
+  align: string;
+  headerAlign: string;
+  className: string;
+  labelClassName: string;
+  selectable: Function;
+  reserveSelection: boolean;
+  filters: Array<{ text: string; value: string }>;
+  filterPlacement: string;
+  filterClassName: string;
+  filterMultiple: boolean;
+  filterMethod: Function;
+  filteredValue: object;
+  tooltipFormatter: Function;
+}
 const props = defineProps({
-  "row-key": {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: String || Number,
+    default: null
+  },
+  maxHeight: {
+    type: String || Number,
+    default: null
+  },
+  stripe: {
+    type: Boolean,
+    default: true
+  },
+  border: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    default: "default"
+  },
+  fit: {
+    type: Boolean,
+    default: true
+  },
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  highlightCurrentRow: {
+    type: Boolean,
+    default: false
+  },
+  currentRowKey: {
+    type: String || Number,
+    default: null
+  },
+  rowClassName: {
+    type: Function || String,
+    default: null
+  },
+  rowStyle: {
+    type: Function || Object,
+    default: null
+  },
+  cellClassName: {
+    type: Function || String,
+    default: null
+  },
+  cellStyle: {
+    type: Function || Object,
+    default: null
+  },
+  headerRowClassName: {
+    type: Function || String,
+    default: null
+  },
+  headerRowStyle: {
+    type: Function || Object,
+    default: null
+  },
+  headerCellClassName: {
+    type: Function || String,
+    default: null
+  },
+  headerCellStyle: {
+    type: Object,
+    default: () => {
+      return {
+        background: "var(--el-table-row-hover-bg-color)",
+        color: "var(--el-text-color-primary)"
+      };
+    }
+  },
+  rowKey: {
     type: String,
     default: ""
   },
-  "align-whole": {
+  emptyText: {
     type: String,
-    default: "left"
+    default: ""
   },
-  loading: {
+  defaultExpandAll: {
     type: Boolean,
     default: false
   },
-  size: {
+  expandRowKeys: {
+    type: Boolean,
+    default: null
+  },
+  defaultSort: {
+    type: Object,
+    default: () => {
+      return { prop: "date", order: "descending" };
+    }
+  },
+  tooltipEffect: {
     type: String,
-    default: "default"
+    default: "dark"
   },
-  data: {
-    type: Array,
-    default: () => []
+  tooltipOptions: {
+    type: Object,
+    default: () => {
+      return {
+        enterable: true,
+        placement: "top",
+        showArrow: true,
+        hideAfter: 200,
+        popperOptions: { strategy: "fixed" }
+      };
+    }
+  },
+  appendFilterPanelTo: {
+    type: String,
+    default: null
+  },
+  showSummary: {
+    type: Boolean,
+    default: false
+  },
+  sumText: {
+    type: String,
+    default: "Sum"
+  },
+  summaryMethod: {
+    type: Function,
+    default: null
+  },
+  spanMethod: {
+    type: Function,
+    default: null
+  },
+  selectOnIndeterminate: {
+    type: Boolean,
+    default: true
+  },
+  indent: {
+    type: Number,
+    default: 16
+  },
+  lazy: {
+    type: Boolean,
+    default: false
+  },
+  load: {
+    type: Function,
+    default: null
+  },
+  treeProps: {
+    type: Object,
+    default: () => {
+      return {
+        hasChildren: "hasChildren",
+        children: "children",
+        checkStrictly: false
+      };
+    }
+  },
+  tableLayout: {
+    type: String,
+    default: "fixed"
+  },
+  scrollbarAlwaysOn: {
+    type: Boolean,
+    default: false
+  },
+  showOverflowTooltip: {
+    type: Object,
+    default: null
+  },
+  flexible: {
+    type: Boolean,
+    default: false
+  },
+  scrollbarTabindex: {
+    type: String || Number,
+    default: null
+  },
+  allowDragLastColumn: {
+    type: Boolean,
+    default: false
+  },
+  tooltipFormatter: {
+    type: Function,
+    default: null
+  },
+  alignWhole: {
+    type: String,
+    default: "center"
+  },
+  loading: {
+    type: Boolean,
+    default: false
   },
   columns: {
-    type: Array,
+    type: Array<ColumnsType>,
     default: () => []
   },
   checkList: {
     type: Array,
     default: () => []
   },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
   pagination: {
     type: Object,
     default: () => {
@@ -54,36 +271,249 @@ const props = defineProps({
   paginationSmall: {
     type: Boolean,
     default: true
-  },
-  "header-cell-style": {
-    type: Object,
-    default: () => {
-      return {
-        background: "var(--el-table-row-hover-bg-color)",
-        color: "var(--el-text-color-primary)"
-      };
-    }
   }
 });
-const emit = defineEmits(["size-change", "selection-change", "current-change"]);
+const emit = defineEmits([
+  "select",
+  "select-all",
+  "selection-change",
+  "cell-mouse-enter",
+  "cell-mouse-leave",
+  "cell-click",
+  "cell-dblclick",
+  "cell-contextmenu",
+  "row-click",
+  "row-contextmenu",
+  "row-dblclick",
+  "header-click",
+  "header-contextmenu",
+  "sort-change",
+  "filter-change",
+  "table-current-change",
+  "header-dragend",
+  "expand-change",
+  "scroll",
+  "size-change",
+  "current-change"
+]);
 const handleSizeChange = val => {
   emit("size-change", val);
 };
 const handleCurrentChange = val => {
   emit("current-change", val);
 };
-// emits("selection-change");
+const handleSelectAll = val => {
+  emit("select-all", val);
+};
+const handleSelect = val => {
+  emit("select", val);
+};
+const handleSelectionChange = val => {
+  emit("selection-change", val);
+};
+const handleCellMouseEnter = val => {
+  emit("cell-mouse-enter", val);
+};
+const handleCellMouseLeave = val => {
+  emit("cell-mouse-leave", val);
+};
+const handleCellClick = val => {
+  emit("cell-click", val);
+};
+const handleCellDBLClick = val => {
+  emit("cell-dblclick", val);
+};
+const handleCellContextmenu = val => {
+  emit("cell-contextmenu", val);
+};
+const handleRowClick = val => {
+  emit("row-click", val);
+};
+const handleRowContextmenu = val => {
+  emit("row-contextmenu", val);
+};
+const handleRowDBLclick = val => {
+  emit("row-dblclick", val);
+};
+const handleHeaderClick = val => {
+  emit("header-click", val);
+};
+const handleHeaderContextmenu = val => {
+  emit("header-contextmenu", val);
+};
+const handleSortChange = val => {
+  emit("sort-change", val);
+};
+const handleFilterChange = val => {
+  emit("filter-change", val);
+};
+const handleTableCurrentChange = val => {
+  emit("table-current-change", val);
+};
+const handleHeaderDragend = val => {
+  emit("header-dragend", val);
+};
+const handleExpandChange = val => {
+  emit("expand-change", val);
+};
+const handleScroll = val => {
+  emit("scroll", val);
+};
+props.columns.forEach(element => {
+  element.formatterTable = element.cellRenderer
+    ? (row, column, index) => {
+        return element.cellRenderer({
+          row,
+          column,
+          index,
+          props: { size: props.size }
+        });
+      }
+    : element.formatter
+    ? row => {
+        return element.formatter(row);
+      }
+    : null;
+});
+const tableRef = ref();
+
+defineExpose(
+  new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        return tableRef.value?.[prop];
+      },
+      has(_target, prop) {
+        return prop in tableRef.value;
+      }
+    }
+  )
+);
 </script>
 <script></script>
 <template>
-  <el-table :data="data" stripe style="width: 100%" row-key>
-    <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label" />
+  <el-table
+    :data="data"
+    :height="height"
+    :max-height="maxHeight"
+    :stripe="stripe"
+    :border="border"
+    :size="size"
+    :fit="fit"
+    :show-header="showHeader"
+    :highlight-current-row="highlightCurrentRow"
+    :current-row-key="currentRowKey"
+    :row-class-name="rowClassName"
+    :row-style="rowStyle"
+    :cell-class-name="cellClassName"
+    :cell-style="cellStyle"
+    :header-row-class-name="headerRowClassName"
+    :header-row-style="headerRowStyle"
+    :header-cell-class-name="headerCellClassName"
+    :header-cell-style="headerCellStyle"
+    :row-key="rowKey"
+    :empty-text="emptyText"
+    :default-expand-all="defaultExpandAll"
+    :expand-row-keys="expandRowKeys"
+    :default-sort="defaultSort"
+    :tooltip-effect="tooltipEffect"
+    :tooltip-options="tooltipOptions"
+    :append-filter-panel-to="appendFilterPanelTo"
+    :show-summary="showSummary"
+    :sum-text="sumText"
+    :summary-method="summaryMethod"
+    :span-method="spanMethod"
+    :select-on-indeterminate="selectOnIndeterminate"
+    :indent="indent"
+    :lazy="lazy"
+    :load="load"
+    :tree-props="treeProps"
+    :table-layout="tableLayout"
+    :scrollbar-always-on="scrollbarAlwaysOn"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :flexible="flexible"
+    :scrollbar-tabindex="scrollbarTabindex"
+    :allow-drag-last-column="allowDragLastColumn"
+    :tooltip-formatter="tooltipFormatter"
+    v-loading="loading"
+    style="width: 100%"
+    @select="handleSelect"
+    @select-all="handleSelectAll"
+    @selection-change="handleSelectionChange"
+    @cell-mouse-enter="handleCellMouseEnter"
+    @cell-mouse-leave="handleCellMouseLeave"
+    @cell-click="handleCellClick"
+    @cell-dblclick="handleCellDBLClick"
+    @cell-contextmenu="handleCellContextmenu"
+    @row-click="handleRowClick"
+    @row-contextmenu="handleRowContextmenu"
+    @row-dblclick="handleRowDBLclick"
+    @header-click="handleHeaderClick"
+    @header-contextmenu="handleHeaderContextmenu"
+    @sort-change="handleSortChange"
+    @filter-change="handleFilterChange"
+    @current-change="handleTableCurrentChange"
+    @header-dragend="handleHeaderDragend"
+    @expand-change="handleExpandChange"
+    @scroll="handleScroll"
+    ref="tableRef"
+  >
+    <template #append> <slot name="append" /> </template>
+    <template #empty> <slot name="empty" /> </template>
+
+    <template v-for="(item, index) in columns" :key="index">
+      <el-table-column
+        v-if="!item.hide || !item.hide({ checkList })"
+        :type="item.type"
+        :index="item.index"
+        :label="item.label"
+        :column-key="item.columnKey"
+        :prop="item.prop"
+        :width="item.width"
+        :min-width="item.minWidth"
+        :fixed="item.fixed"
+        :render-header="item.headerRenderer"
+        :sortable="item.sortable"
+        :sort-method="item.sortMethod"
+        :sort-by="item.sortBy"
+        :sort-orders="item.sortOrders"
+        :sort-resizable="item.resizable"
+        :formatter="item.formatterTable"
+        :show-overflow-tooltip="item.showOverflowTooltip"
+        :align="item.align || alignWhole"
+        :header-align="item.headerAlign"
+        :class-name="item.className"
+        :label-class-name="item.labelClassName"
+        :selectable="item.selectable"
+        :reserve-selection="item.reserveSelection"
+        :filters="item.filters"
+        :filter-placement="item.filterPlacement"
+        :filter-class-name="item.filterClassName"
+        :filter-multiple="item.filterMultiple"
+        :filter-method="item.filterMethod"
+        :filtered-value="item.filteredValue"
+        :tooltip-formatter="item.tooltipFormatter"
+      >
+        <template v-slot="{ row }">
+          <slot name="operation" :row="row" v-if="item.slot == 'operation'" />
+        </template>
+      </el-table-column>
+    </template>
   </el-table>
   <div class="flex justify-end mb-4 mt-4">
-    <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
-      :page-sizes="pagination.pageSizes" :size="size" :disabled="disabled" :background="background"
-      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
-      @current-change="handleCurrentChange" />
+    <el-pagination
+      :current-page="pagination.currentPage"
+      :page-sizes="pagination.pageSizes"
+      :page-size="pagination.pageSize"
+      :size="size"
+      :disabled="disabled"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
   </div>
 </template>
 <style></style>

src/main.ts

@@ -2,7 +2,7 @@
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2025-02-11 16:34:48
+ * @LastEditTime: 2025-02-12 16:45:30
  * @Description: kxs files
  * @filePath:
  */

src/views/app/appTracking/hook.tsx

@@ -0,0 +1,209 @@
+import {
+  reactive,
+  onMounted,
+  ref,
+  ElMessage,
+  ElMessageBox,
+  http,
+  getGroupUrl,
+  RegularVerification,
+  verification,
+  PaginationProps
+} from "@/utils/importUsed";
+// 表单实例
+const ruleFormRef = ref();
+export function useAppBottomNavs() {
+  // 接口列表实例
+  let UrlList = reactive(null);
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+  });
+  const form = reactive({
+    // kind: "creater", // 分类
+    appVersion: "", // 上报版本号
+    userTag: "", // 用户标识
+    pageTitle: "", // 页面标题
+    pageUrl: "", // 页面地址
+    deviceSize: "", // 设备尺寸
+    reportType: "" // 上报类型
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 30,
+    currentPage: 1,
+    background: true,
+    pageSizes: [10, 30, 50, 100]
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+    {
+      label: "页面标题",
+      prop: "pageTitle",
+      minWidth: 200
+    },
+    {
+      label: "页面地址",
+      prop: "pageUrl",
+      minWidth: 200
+    },
+    {
+      label: "用户系统信息",
+      prop: "userSysInfo",
+      minWidth: 200
+    },
+    {
+      label: "设备尺寸",
+      prop: "deviceSize",
+      minWidth: 200
+    },
+    {
+      label: "上报类型",
+      prop: "reportType",
+      minWidth: 200
+    },
+    {
+      label: "上报数据",
+      prop: "reportData",
+      minWidth: 200
+    },
+    {
+      label: "用户标识",
+      prop: "userTag",
+      minWidth: 200
+    },
+    {
+      label: "创建时间",
+      prop: "createTime",
+      minWidth: 200
+    },
+    {
+      label: "ID",
+      prop: "id",
+      minWidth: 200
+    }
+
+    // {
+    //   label: "操作",
+    //   fixed: "right",
+    //   width: 200,
+    //   slot: "operation"
+    // }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  async function onSearch(formEl) {
+    // 表单校验拦截
+    if (!formEl) return;
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        //表单校验成功回调
+        console.log("submit!");
+        // 状态调整为加载中
+        loading.value = true;
+        // 调用接口（需动态生成接口）
+        const { status, msg, data }: any = await http.Request({
+          method: "get",
+          url: "https://test-app-manager.kexiaoshuang.com/v1/api/AppReportRecord/getAppReportRecordList",
+          // method: UrlList.kxsConfigServer.appBottomNavslist.method,
+          // url: UrlList.kxsConfigServer.appBottomNavslist.url,
+          params: {
+            ...form,
+            pageSize: pagination.pageSize,
+            pageNum: pagination.currentPage
+          }
+        });
+        dataList.value = data.records;
+        pagination.total = data.total;
+        setTimeout(() => {
+          loading.value = false;
+        }, 500);
+      } else {
+        //表单校验失败回调
+        ElMessage({
+          message: "请输入完整信息",
+          type: "error"
+        });
+      }
+    });
+  }
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(`是否删除该app底部导航? `, "提示", {
+      confirmButtonText: "删除",
+      cancelButtonText: "取消",
+      type: "warning"
+    }).then(async () => {
+      const { status, msg }: any = await http.Request({
+        method: UrlList.kxsConfigServer.appBottomNavsdelete.method,
+        url: UrlList.kxsConfigServer.appBottomNavsdelete.url,
+        params: String(row.id)
+      });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef.value);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    });
+  }
+
+  // 分类选项数据
+  const kindOptionList = [{ label: "创客版", id: "creater" }];
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    kindOptionList,
+    ruleFormRef,
+    handleDelete
+  };
+}

src/views/app/appTracking/index.vue

@@ -0,0 +1,155 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "AppBottomNavs"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { useAppBottomNavs } from "./hook";
+import { http } from "@/utils/http";
+import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed";
+import Search from "@iconify-icons/ep/search";
+import Addicon from "@iconify-icons/ep/document-add";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import More from "@iconify-icons/ep/more-filled";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  handleAdd,
+  handleUpdate,
+  kindOptionList,
+  handleDelete
+} = useAppBottomNavs();
+</script>
+
+<template lang="pug">
+.main
+  div
+    //- 搜索表格组件条件
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      :inline="true",
+      :model="form",
+      class="w-[99/100]"
+      ref="ruleFormRef"
+      :rules="rules"
+    )
+      el-form-item(label="分类", prop="kind")
+        el-select(
+          v-model="form.kind",
+          placeholder="请选择分类",
+          clearable,
+        )
+          el-option(:label="item.label", :value="item.id" v-for="(item,index) in kindOptionList")
+      el-form-item(label='版本号' prop="appVersion")
+        el-input(v-model='form.appVersion' autocomplete='off'
+          placeholder="请输入版本号")
+      el-form-item(label='用户标识' prop="userTag")
+        el-input(v-model='form.userTag' autocomplete='off'
+          placeholder="请输入用户标识")
+      el-form-item(label='页面标题' prop="pageTitle")
+        el-input(v-model='form.pageTitle' autocomplete='off'
+          placeholder="请输入页面标题")
+      el-form-item(label='页面地址' prop="pageUrl")
+        el-input(v-model='form.pageUrl' autocomplete='off'
+          placeholder="请输入页面地址")
+      el-form-item(label='设备尺寸' prop="deviceSize")
+        el-input(v-model='form.deviceSize' autocomplete='off'
+          placeholder="请输入设备尺寸")
+      el-form-item(label='上报类型' prop="reportType")
+        el-input(v-model='form.reportType' autocomplete='off'
+          placeholder="请输入上报类型")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    PureTableBar(title="app底部导航", @refresh="onSearch(ruleFormRef)" )
+      //- template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" ) 同步配置至新版本
+
+      template(v-slot="{ size, checkList }")
+        pure-table( 
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['update'])"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['delete'])"
+            ) 删除
+
+                    
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/app/fileUpdateInfo/hook.tsx

@@ -92,8 +92,8 @@ export function useFileUpdateInfo() {
   }
   // 选择表格项
   function handleSelectionChange(val) {
-    console.log(`SelectionChange: ${val}`);
-    onSearch(ruleFormRef.value);
+    console.log(`SelectionChange:`, val);
+    // onSearch(ruleFormRef.value);
   }
   // 搜索列表
   async function onSearch(formEl) {
@@ -200,6 +200,7 @@ export function useFileUpdateInfo() {
   const editUpdateVisible = ref(false);
   const editUpdateFormData = ref({});
   function handleUpdate(row) {
+    console.log("[ row ] >", row);
     editUpdateVisible.value = true;
     // 表格数据赋值
     editUpdateFormData.value = row;