系统设置操作日期-样式修改

src/views/systemManage/logManage/index.vue

@@ -1,78 +1,53 @@
 <template>
-  <div class="log">
-    <el-form label-width="100" label-position="left" :model="form">
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <el-form-item label="操作人">
-            <el-input v-model="form.operator" placeholder="请输入操作人姓名查找"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="操作时间">
-            <el-date-picker
-              v-model="form.operatingTime"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              @change="timeChange"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="操作功能">
-            <el-select v-model="form.function" placeholder="请选择">
-              <el-option label="工能1" value="1" key="1"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="操作内容">
-            <el-input v-model="form.content" placeholder="请输入"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
-          <el-button type="primary" @click="search">查询</el-button>
-          <el-button plain type="primary" @click="reset">重置</el-button>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-table
-      :data="tableData"
-      height="600"
-      style="margin-top: 24px"
-    >
-      <el-table-column label="操作人" prop="createBy" width="200"></el-table-column  >
-      <el-table-column label="操作时间" prop="createTime" width="240"></el-table-column>
-      <el-table-column label="操作功能" prop="moduleName"></el-table-column>
-      <el-table-column label="操作内容" prop="operationContent"></el-table-column>
-      <el-table-column label="类型" prop="operatorName" width="150"></el-table-column>
-      <el-table-column label="操作" width="150">
-        <template #default="scope">
-          <el-button link type="primary" @click="detail(scope.row)">查看详情</el-button>
+  <div>
+    <PageMain class="vh100">
+      <el-form label-width="100" label-position="left" :model="form">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="操作人">
+              <el-input v-model="form.operator" placeholder="请输入操作人姓名查找"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="操作时间">
+              <el-date-picker v-model="form.operatingTime" type="daterange" range-separator="至" start-placeholder="开始时间"
+                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="timeChange" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="操作功能">
+              <el-select v-model="form.function" placeholder="请选择">
+                <el-option label="工能1" value="1" key="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="操作内容">
+              <el-input v-model="form.content" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button plain type="primary" @click="reset">重置</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+      <ComplexTable :columns="columns" :columnwidth="200" :showIndex="false" :showSelect="false" :pageInfo="pageInfo"
+        :tableData="tableData" @getList="getList">
+        <template v-slot:operation="scope">
+          <el-button type="primary" link @click="detail(scope.operationData)">
+            查看详情
+          </el-button>
         </template>
-      </el-table-column>
-    </el-table>
-    <div class="pagination">
-      <el-pagination
-        v-model:current-page="pages"
-        v-model:page-size="size"
-        :page-sizes="[10, 20, 30, 40]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      ></el-pagination>
-    </div>
+      </ComplexTable>
+    </PageMain>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import api from '@/api'
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
 
 const myRouter = useRouter()
 
@@ -80,15 +55,41 @@ let activeName = ref('first')
 const handleClick = () => {
 
 }
-
-let form = ref({})
-const tableProps = ref({
-  value: "id",
-  label: "name",
-  children: "children",
-  checkStrictly: true,
+interface PageInfo {
+  pageNum: number;
+  pageSize: number;
+  sizes: number[];
+  total: number;
+}
+const pageInfo = ref<PageInfo>({
+  pageNum: 1,
+  pageSize: 10,
+  sizes: [10, 20, 30, 40, 50],
+  total: 0,
 });
-let option = ref([])
+const getList = (item: PageInfo) => {
+  pageInfo.value.pageNum = item.pageNum;
+  pageInfo.value.pageSize = item.pageSize;
+  initData();
+};
+const columns: any = [
+  {
+    prop: "createBy", label: "操作人", width: 200,
+  },
+  {
+    prop: "createTime", label: "操作时间",
+  },
+  {
+    prop: "moduleName", label: "操作功能", width: 200,
+  },
+  {
+    prop: "operationContent", label: "操作内容", width: 200,
+  },
+  {
+    prop: "operatorName", label: "类型", width: 150,
+  },
+]
+let form = ref({})
 const timeChange = (val) => {
 
 }
@@ -107,7 +108,8 @@ const reset = () => {
 
 // 列表
 let tableData = ref([])
-const detail = (row) => {
+const detail = (row: any) => {
+  console.log(row)
   myRouter.push({
     path: '/systemManage/logManage/logDetail',
     query: {
@@ -119,25 +121,15 @@ const detail = (row) => {
 // 分页
 let pages = ref(1)
 let size = ref(10)
-let total = ref(0)
-const handleSizeChange = (size) => {
-  size.value = size
-  initData()
-}
-const handleCurrentChange = (page) => {
-  pages.value = page
-  initData()
-}
-
 const initData = () => {
   api.logApi.list({
-    pages: pages.value,
-    size: size.value,
+    pages: pageInfo.value.pageNum,
+    size: pageInfo.value.pageSize,
     ...form.value
   }).then((res: any) => {
-    if(res.code === 200) {
+    if (res.code === 200) {
       tableData.value = res.data.records
-      total.value = res.data.total
+      pageInfo.value.total = res.data.total
     } else {
       ElMessage({
         message: res.msg,
@@ -153,18 +145,4 @@ onMounted(() => {
 
 </script>
 
-<style scoped lang="scss">
-.log{
-  width: 100%;
-  height: calc(100vh - 120px);
-  background: #FFFFFF;
-  padding: 24px;
-  overflow-y: auto;
-  .pagination{
-    margin-top: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-}
-</style>
+<style scoped lang="scss"></style>