公章管理台账表单样式修改

client/src/views/OaSystem/officeCenter/gzglPage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="officialSealSetting">
+  <div class="oa-sys-list-view">
     <div class="searchBox">
       <el-form :inline="true" :model="formData" class="demo-form-inline">
         <el-form-item label="申请人:">
@@ -17,15 +17,7 @@
       </el-form>
     </div>
     <div class="tableBox">
-      <el-table
-        :data="tableData"
-        style="width: 100%; height: 100%"
-        :header-cell-style="{
-          background: '#E5F0FB',
-          color: '#233755',
-          height: '50px'
-        }"
-      >
+      <TableLayout :is-loading="loading" :data="list">
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column label="申请人" prop="userNickname" width="80" />
         <el-table-column label="所在部门" align="center" prop="deptName" />
@@ -54,17 +46,18 @@
             </div>
           </template>
         </el-table-column>
-      </el-table>
-    </div>
-    <div class="pageBox">
-      <el-pagination
-        v-model:current-page="pageNo"
-        :page-size="10"
-        background
-        layout="total, prev, pager, next, jumper"
-        :total="total"
-        @current-change="handleCurrentChange"
-      />
+      </TableLayout>
+
+      <div class="pageBox">
+        <el-pagination
+          v-model:current-page="formData.pageNo"
+          :page-size="10"
+          background
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -74,14 +67,13 @@ import DeptSelect from '@/components/DeptSelect/index.vue'
 import request from '@/config/axios'
 import { DICT_TYPE } from '@/utils/dict'
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import TableLayout from '../../oaViews/layout/TableLayout.vue'
+
 defineOptions({ name: 'OfficialSeal' })
 
-const pageNo = ref<number>(1)
-const tableData = ref<any>([])
-const total = ref<number>()
-const router = useRouter()
 const formData = ref<{
+  pageNo: number
+  pageSize: number
   deptId: string
   userNickname: string
   deptName: string
@@ -89,6 +81,8 @@ const formData = ref<{
   officialSealApplyReason: string
   officialSealUseType: string
 }>({
+  pageNo: 1,
+  pageSize: 15,
   deptId: '',
   userNickname: '',
   deptName: '',
@@ -102,32 +96,35 @@ const deptOnChange = (id) => {
   formData.value.deptId = id
 }
 
-const operateClick = (row: any) => {
-  router.push({
-    path: '/officialSealDetail',
-    query: { id: row.projectId, contractId: row.id }
-  })
-}
-
-const queryListByPage = async (): Promise<void> => {
-  const urlApi = `/officialSealUse/page`
-  const sendData = {
-    pageNo: pageNo.value,
-    pageSize: 10,
-    ...formData
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryListByPage = async () => {
+  loading.value = true
+  try {
+    const urlApi = `/officialSealUse/page`
+    const sendData = {
+      ...formData
+    }
+    const result = await request.get({ url: urlApi, params: sendData._rawValue }, '/business')
+    list.value = result['list']
+    total.value = result['total']
+    console.log(list.value)
+    loading.value = false
+  } catch (error) {
+    loading.value = false
   }
-  const result = await request.get({ url: urlApi, params: sendData._rawValue }, '/business')
-  tableData.value = result['list']
-  total.value = result['total']
 }
 
-queryListByPage()
 const onSearchHandle = (): void => {
-  pageNo.value = 1
   queryListByPage()
 }
-const handleCurrentChange = (page: number): void => {
-  pageNo.value = page
+const handleCurrentChange = (): void => {
   queryListByPage()
 }
+
+/** 初始化 */
+onMounted(() => {
+  queryListByPage()
+})
 </script>