基本列表样式

src/components/cus/CusContent.vue

@@ -16,32 +16,32 @@
         <div class="buttons">
           <slot name="buttons"/>
         </div>
-        <div class="filters">
-          <el-dropdown :teleported="false">
-            <div class="tools __hover">
-              <SvgIcon name="cus-content_tools" size="18" color="#666666"/>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="showFieldIn = true" v-if="$slots.fieldIn" style="width: 170px;">
-                  <div class="tools-item">
-                    <SvgIcon name="cus-content_field-in" size="18"/>高级筛选
-                  </div>
-                </el-dropdown-item>
-                <el-dropdown-item @click="showFieldColumn = true">
-                  <div class="tools-item">
-                    <SvgIcon name="cus-content_field-column" size="18"/>字段筛选
-                  </div>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <div class="tools-item" @click="showContentFixed = true">
-                    <SvgIcon name="cus-content_field-fixed" size="18"/>冻结窗格
-                  </div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
+<!--        <div class="filters">-->
+<!--          <el-dropdown :teleported="false">-->
+<!--            <div class="tools __hover">-->
+<!--              <SvgIcon name="cus-content_tools" size="18" color="#666666"/>-->
+<!--            </div>-->
+<!--            <template #dropdown>-->
+<!--              <el-dropdown-menu>-->
+<!--                <el-dropdown-item @click="showFieldIn = true" v-if="$slots.fieldIn" style="width: 170px;">-->
+<!--                  <div class="tools-item">-->
+<!--                    <SvgIcon name="cus-content_field-in" size="18"/>高级筛选-->
+<!--                  </div>-->
+<!--                </el-dropdown-item>-->
+<!--                <el-dropdown-item @click="showFieldColumn = true">-->
+<!--                  <div class="tools-item">-->
+<!--                    <SvgIcon name="cus-content_field-column" size="18"/>字段筛选-->
+<!--                  </div>-->
+<!--                </el-dropdown-item>-->
+<!--                <el-dropdown-item>-->
+<!--                  <div class="tools-item" @click="showContentFixed = true">-->
+<!--                    <SvgIcon name="cus-content_field-fixed" size="18"/>冻结窗格-->
+<!--                  </div>-->
+<!--                </el-dropdown-item>-->
+<!--              </el-dropdown-menu>-->
+<!--            </template>-->
+<!--          </el-dropdown>-->
+<!--        </div>-->
       </div>
       <div id="table" class="table">
         <slot name="table"/>
@@ -205,7 +205,7 @@
         default: '请输入查询关键词'
       },
       full: {
-        required: true,
+        required: false,
         default: false
       }
     },
@@ -313,17 +313,14 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background-color: #F5FBFF;
     box-sizing: border-box;
     .cc-top-slot {
       margin-bottom: 10px;
-      background-color: #FFFFFF;
     }
     .cc-field-out {
-      margin-bottom: 10px;
-      background-color: #FFFFFF;
+      margin-bottom: 12px;
       height: auto;
-      padding: 14px 24px 0 24px;
+      padding: 40px 30px 0 0;
       .field-out-slot {
         flex: 1;
         :deep(.el-form-item) {
@@ -333,19 +330,17 @@
     }
     .cc-center-slot {
       margin-bottom: 10px;
-      background-color: #FFFFFF;
     }
     .cc-bottom {
-      background-color: #FFFFFF;
       flex: 1;
       z-index: 1;
       display: flex;
       flex-direction: column;
-      padding: 12px 16px;
+      padding: 0 30px 0 0;
       .operation {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 12px;
+        margin-bottom: 16px;
         .buttons {
           display: flex;
           :deep(>*) {

src/components/cus/CusFormColumn.vue

@@ -364,7 +364,11 @@ export default defineComponent({
       text-align: right;
       display: flex;
       align-items: center;
-      padding-left: 10px;
+      padding: 0 4px 0 10px;
+      font-size: 16px;
+      font-family: PingFang SC-Medium, PingFang SC;
+      font-weight: 500;
+      color: rgba(255,255,255,0.6);
     }
     .el-form-item__content {
       flex-wrap: unset;
@@ -378,6 +382,15 @@ export default defineComponent({
         font-weight: 400;
         color: #606266;
       }
+      .el-input {
+
+        .el-input__wrapper {
+          background: rgba(54,155,255,0.1);
+          border-radius: 2px;
+          border: 1px solid rgba(54,155,255,0.2);
+          box-shadow: none;
+        }
+      }
     }
   }
 }

src/components/cus/CusSearchButtons.vue

@@ -49,31 +49,28 @@ import {
     justify-content: flex-end;
     margin-bottom: 12px;
     >div {
+      height: 30px;
       margin-right: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 14px;
-      font-family: Microsoft YaHei;
+      font-size: 16px;
+      font-family: PingFang SC-Regular, PingFang SC;
       font-weight: 400;
       box-sizing: border-box;
+      padding: 0 10px;
+      border-radius: 4px;
+      color: #FFFFFF;
+      border: 1px solid rgba(0,133,247,0.5);
       &:last-child {
         margin-right: 0;
       }
     }
     .search {
-      width: 74px;
-      height: 32px;
-      background: #0062E9;
-      border-radius: 4px;
-      color: #FFFFFF;
+      background-color: #0085F7;
     }
     .reset {
-      width: 74px;
-      height: 32px;
-      border: 1px solid #0062E9;
-      border-radius: 4px;
-      color: #3070CF;
+      background-color: rgba(0, 133, 247, 0.2);
     }
     .expand {
       color: #0062E9;

src/components/cus/CusTable.vue

@@ -71,19 +71,12 @@
       </el-table>
     </div>
     <div class="ct-page">
-      <div class="total">
-        <template v-if="$util.isValue(selected?.length)">
-          已选中 {{ selected.length }} 条 /
-        </template>
-        共 {{ total }} 条
-      </div>
       <el-pagination
           v-if="noPage === false"
           ref="ref_tablePage"
           class="__cus-pagination"
           :currentPage="page"
           :page-size="pageSize"
-          background
           :page-sizes="pageSizes"
           :layout="pageLayoutCpt"
           :total="Number(total)"
@@ -168,7 +161,7 @@ import {
       const ref_tablePage = ref();
       const state = reactive({
         tempTableHead: <any>[],
-        pageLayout: ['sizes', 'prev', 'pager', 'next', 'jumper']
+        pageLayout: ['total', 'sizes', 'prev', 'pager', 'next', 'jumper']
       });
       watch(() => props.tableHead, (nVal: any) => {
         formatTableHead(nVal)
@@ -249,8 +242,8 @@ import {
   max-height: 100%;
   display: flex;
   flex-direction: column;
-  $cus-page-height: 32px;
-  $cus-page-mt: 25px;
+  $cus-page-height: 21px;
+  $cus-page-mt: 34px;
   position: relative;
   .cus-table-main {
     width: 100%;
@@ -268,10 +261,6 @@ import {
     color: #999999;
     display: flex;
     justify-content: space-between;
-    .total {
-      display: flex;
-      align-items: center;
-    }
   }
   &.cus-table-normal {
     .cus-table-main {
@@ -282,8 +271,8 @@ import {
           &:after {
           }
         }
-        $borderColor: #FFFFFF;
-        $borderWidth: 2px;
+        $borderColor: rgba(54,155,255,0.2);
+        $borderWidth: 1px;
         //  表格左边框
         &::before, .el-table__border-left-patch {
           display: none;
@@ -308,21 +297,16 @@ import {
                 border-top: $borderWidth solid $borderColor;
                 border-right: none;
                 border-bottom: none;
-                background-color: #F5F5F5;
-                height: 52px;
+                background-color: rgba(0,108,255,0.4);
+                height: 58px;
                 .cell {
                   font-size: 14px;
-                  font-family: 微软雅黑;
+                  font-family: PingFang SC-Regular, PingFang SC;
                   font-weight: 400;
-                  color: #666666;
+                  color: #FFFFFF;
                 }
-              }
-              &:first-child {
-                >th {
-                  border-top: none;
-                  &:first-child {
-                    border-left: none;
-                  }
+                &:last-child {
+                  border-right: $borderWidth solid $borderColor;
                 }
               }
             }
@@ -331,18 +315,34 @@ import {
         .el-table__body-wrapper, .el-table__fixed-body-wrapper {
           .el-table__body {
             .el-table__row {
+              background-color: rgba(0, 108, 255, 0.05);
               >td {
+                border-left: $borderWidth solid $borderColor;
+                border-top: $borderWidth solid $borderColor;
                 border-right: none;
-                border-bottom-color: #F4F4F4;
+                border-bottom: none;
+                background-color: transparent;
+                height: 58px;
                 .cell {
                   font-size: 14px;
-                  font-family: 微软雅黑;
+                  font-family: PingFang SC-Regular, PingFang SC;
                   font-weight: 400;
-                  color: #666666;
+                  color: rgba(255,255,255,0.7);
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   word-break: break-all;
+                  .el-link + .el-link {
+                    margin-left: 10px;
+                  }
+                }
+                &:last-child {
+                  border-right: $borderWidth solid $borderColor;
+                }
+              }
+              &:last-child {
+                >td {
+                  border-bottom: $borderWidth solid $borderColor;
                 }
               }
             }

src/components/cus/cus-form-link/cascader.vue

@@ -4,7 +4,7 @@
        style="width: 100%;"
        v-bind="$attrs"
        v-model="paramVal"
-       :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
+       :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择`"
        :options="options"
        clearable
        filterable

src/components/cus/cus-form-link/date.vue

@@ -5,7 +5,7 @@
       v-bind="$attrs"
       v-model="paramVal"
       clearable
-      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
+      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择`"
       :valueFormat="valueFormatCpt"
       :format="formatCpt"
       unlink-panels

src/components/cus/cus-form-link/datetime.vue

@@ -5,7 +5,7 @@
       v-bind="$attrs"
       v-model="paramVal"
       clearable
-      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
+      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择`"
       :valueFormat="valueFormat"
       :format="format"
       unlink-panels

src/components/cus/cus-form-link/dept.vue

@@ -4,7 +4,7 @@
         style="width: 100%;"
         v-bind="$attrs"
         v-model="paramVal"
-        :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
+        :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择`"
         :data="optionsCpt"
         clearable
         filterable

src/components/cus/cus-form-link/input.vue

@@ -4,7 +4,7 @@
       v-model="paramVal"
       :type="type"
       clearable
-      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请输入${label}`"
+      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请输入`"
       @keyup.enter.native="$emit('emitEnter')"
   >
     <template v-if="$slots.prefix" #prefix>

src/components/cus/cus-form-link/portOfRegistry.vue

@@ -20,7 +20,7 @@
     <el-select
         style="width: calc(100% - 90px - 2px);margin-left: 2px;"
         v-model="paramTwoVal"
-        :placeholder="`请选择${label}`"
+        :placeholder="`请选择`"
         :disabled="!paramOneVal"
         clearable
         filterable

src/components/cus/cus-form-link/residentMooringPoint.vue

@@ -20,7 +20,7 @@
     <el-select
         style="width: calc(100% - 100px - 2px);margin-left: 2px;"
         v-model="paramTwoVal"
-        :placeholder="`请选择${label}`"
+        :placeholder="`请选择`"
         :disabled="!paramOneVal"
         clearable
         filterable

src/components/cus/cus-form-link/select.vue

@@ -4,7 +4,7 @@
         style="width: 100%;"
         v-bind="$attrs"
         v-model="paramVal"
-        :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
+        :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择`"
         clearable
         filterable
         @change="handleChange"

src/components/cus/cus-form-link/time.vue

@@ -4,7 +4,7 @@
       v-bind="$attrs"
       v-model="paramVal"
       clearable
-      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
+      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择`"
       :valueFormat="valueFormat"
       :format="format"
 

src/layout/header/head-com.vue

@@ -49,7 +49,6 @@ export default defineComponent({
     })
     const currentDateCpt = computed(() => {
       let d = ''
-      console.log(new Date(store.state.app.timestamp).getDay())
       switch (new Date(store.state.app.timestamp).getDay()) {
         case 0: d = '星期日'
           break

src/layout/index.vue

@@ -80,11 +80,12 @@ export default defineComponent({
     left: 0;
     z-index: 1;
   }
+  $mt: 91px;
   .layout-main {
     z-index: 2;
-    margin-top: 91px;
+    margin-top: $mt;
     width: 100%;
-    height: calc(100% - 70px);
+    height: calc(100% - #{$mt});
     display: flex;
     .layout-main-sub-menu {
 

src/router/index.ts

@@ -94,7 +94,6 @@ export const initMainRouter = async () => {
         await Promise.all([
             store.dispatch('app/LOAD_USER_INFO'),
         ]).then(async ([{u, r}]) => {
-            console.log(r)
             if (r.some(v => ['ZBY', 'ZBGL'].includes(v.permissionValue))) {
                 setRouters()
             } else {

src/style/cus.scss

@@ -13,7 +13,8 @@
 }
 
 .__normal-page {
-  margin-left: 10px;
+  width: 100%;
+  height: calc(100% - 70px);
   flex: 1;
   display: flex;
   overflow: hidden;
@@ -30,77 +31,106 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin: 0;
+  margin: 0 0 0 auto;
   padding: 0;
   .el-pagination__total {
-    font-size: 14px;
-    font-family: Microsoft YaHei;
+    font-size: 12px;
+    font-family: PingFang SC-Regular, PingFang SC;
     font-weight: 400;
-    color: #999999;
+    color: #FFFFFF;
   }
   .el-pagination__sizes {
-    .el-input {
-      max-width: 100px !important;
-      .el-input__wrapper {
-        padding-left: 8px !important;
-        padding-right: 8px !important;
-        .el-input__inner {
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #999999;
+    margin-left: 8px;
+    width: 64px;
+    .el-select {
+      width: 100%;
+      .el-input {
+        width: 100%;
+        .el-input__wrapper {
+          height: 20px;
+          box-sizing: border-box;
+          padding: 0 6px !important;
+          border: 1px solid #DCDFE5;
+          box-shadow: none !important;
+          .el-input__inner {
+            font-size: 12px;
+            font-family: PingFang SC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 1;
+            height: auto;
+          }
+          .el-input__suffix {
+            display: none;
+          }
         }
       }
     }
   }
   .btn-prev, .btn-next {
     background-color: transparent !important;
-    color: #999999 !important;
+    color: #FFFFFF !important;
+    min-width: auto;
+    &:hover {
+      color: #1CFEFF !important;
+    }
+  }
+  .btn-prev {
+    margin-left: 8px;
   }
   .el-pager {
     .number {
-      font-size: 14px;
-      font-family: Microsoft YaHei;
+      font-size: 12px;
+      font-family: PingFang SC-Regular, PingFang SC;
       font-weight: 400;
-      color: #999999 !important;
-      border: 1px solid #eaeaea;
-      background-color: transparent !important;
+      color: #FFFFFF;
+      min-width: auto;
+      padding: 0 2px;
       &:hover {
-        background-color: #0062e9 !important;
         opacity: 0.75;
-        color: #ffffff !important;
+        color: #1CFEFF !important;
       }
       &.is-active {
-        color: #ffffff !important;
-        background-color: #0062e9 !important;
+        color: #1CFEFF !important;
         opacity: 1;
       }
     }
     .more {
       background-color: transparent !important;
-      color: #999999 !important;
+      font-size: 12px;
+      font-family: PingFang SC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF !important;
       &:hover {
-        color: #0062e9 !important;
+        color: #1CFEFF !important;
       }
     }
   }
-  button:hover {
-    color: #0062e9 !important;
-  }
   .el-pagination__jump {
-    font-size: 14px;
-    font-family: Microsoft YaHei;
+    font-size: 12px;
+    font-family: PingFang SC-Regular, PingFang SC;
     font-weight: 400;
-    color: #999999;
+    color: #FFFFFF;
+    margin-left: 8px;
     .el-input {
+      width: 30px;
+      min-width: unset;
       .el-input__wrapper {
-        padding-left: 2px !important;
-        padding-right: 2px !important;
+        height: 20px;
+        box-sizing: border-box;
+        padding: 0 6px !important;
+        border: 1px solid #DCDFE5;
+        box-shadow: none !important;
         .el-input__inner {
-          font-size: 14px;
-          font-family: Microsoft YaHei;
+          font-size: 12px;
+          font-family: PingFang SC-Regular, PingFang SC;
           font-weight: 400;
-          color: #999999;
+          color: #FFFFFF;
+          line-height: 1;
+          height: auto;
+        }
+        .el-input__suffix {
+          display: none;
         }
       }
     }
@@ -214,48 +244,44 @@
     }
   }
 }
-.__cus-title_1 {
-  width: 100%;
-  height: 32px;
-  font-size: 14px;
-  font-family: PingFang SC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #0062E9;
+
+.__cus-button_submit {
+  background-color: #0085F7;
+  border-radius: 4px;
+  border: 1px solid rgba(0,133,247,0.5);
   display: flex;
   align-items: center;
-  position: relative;
-  padding-left: 10px;
+  justify-content: center;
+  padding: 0 10px;
+  height: 30px;
   box-sizing: border-box;
-  &:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    width: 2px;
-    height: 14px;
-    background-color: #0062E9;
+  font-size: 16px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #FFFFFF;
+  .svg-icon {
+    margin-right: 4px;
   }
 }
-.__cus-title_2 {
-  width: 100%;
-  height: 40px;
-  background: rgba(0,98,233,0.05);
-  font-size: 14px;
-  font-family: PingFang SC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #303133;
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-left: 38px;
-  box-sizing: border-box;
-  &:before {
-    content: '';
-    position: absolute;
-    left: 10px;
-    width: 18px;
-    height: 18px;
-    background-image: url("@/assets/images/cus/cus-title_type2-icon.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
+
+.el-select__popper {
+  background-color: rgba(0,0,0,0.7) !important;
+  border-radius: 0 !important;
+  border-color: transparent !important;
+  .el-popper__arrow::before {
+    background: rgba(0,0,0,0.7) !important;
+    border-color: rgba(0,0,0,0.7) !important;
+  }
+  li {
+    font-size: 14px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    &.selected {
+      font-size: 14px;
+      font-family: PingFang SC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #2EB8FF;
+    }
   }
 }

src/views/system/operation-records/index.vue

@@ -1,4 +1,72 @@
 <template>
+  <div class="__normal-page">
+    <div class="__normal-content">
+      <CusContent
+          v-model:tableHead="tableHead"
+          @handleReset="handleReset"
+          @handleSearch="onSearch"
+      >
+        <template #fieldOut>
+          <CusForm labelWidth="100px" @handleEnter="onSearch">
+            <CusFormColumn
+                label="操作人:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="操作人单位:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="操作模块:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="操作类型:"
+                link="select"
+                static
+                v-model:param="queryForm.shipId"
+                labelKey="label"
+                valueKey="value"
+                :options="[
+                    {label: '类型一', value: '1'},
+                    {label: '类型二', value: '2'},
+                    {label: '类型三', value: '3'},
+                ]"/>
+            <CusFormColumn
+                label="操作对象:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="操作详情:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="操作时间:"
+                link="date"
+                v-model:param="queryForm.shipId"/>
+            <CusSearchButtons
+                @handleReset="handleReset"
+                @handleSearch="onSearch"
+            />
+          </CusForm>
+        </template>
+        <template #buttons>
+          <div class="__cus-button_submit">
+            <SvgIcon name="export" size="16"/>导出
+          </div>
+        </template>
+        <template #table>
+          <CusTable
+              v-loading="loading"
+              ref="ref_cusTable"
+              :tableData="queryResult.tableData"
+              :tableHead="tableHead"
+              :total="queryResult.total"
+              :page="queryPage.pageNum"
+              :pageSize="queryPage.pageSize"
+              @handlePage="handlePage"
+              @handleSort="handleSort"
+          >
+          </CusTable>
+        </template>
+      </CusContent>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -25,9 +93,120 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      //  加载中
+      loading: false,
+      //  查询分页参数
+      queryPage: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      //  查询结果
+      queryResult: {
+        total: 0,
+        tableData: []
+      },
+      //  查询表单参数
+      queryForm: <any>{},
+      //  查询表单参数备份
+      back_queryForm: {},
+      //  查询表格排序
+      querySort: {},
+      //  表格表头
+      tableHead: [
+        {value: "p1", label: "操作人", show: true},
+        {value: "p1", label: "操作人单位", show: true},
+        {value: "p1", label: "设备IP", show: true},
+        {value: "p1", label: "操作模块", show: true},
+        {value: "p1", label: "操作类型", show: true},
+        {value: "p1", label: "操作对象", show: true},
+        {value: "p1", label: "操作详情", show: true},
+        {value: "p1", label: "操作时间", show: true},
+      ],
+    });
+    const ref_cusTable = ref()
+    //  获取字典
+    const initDictionary = () => {
+    }
+    //  查询分页参数改变处理方法
+    const handlePage = ({page, pageSize}: any) => {
+      state.queryPage.pageNum = page
+      state.queryPage.pageSize = pageSize
+      handleSearch(page, pageSize)
+    }
+    //  查询排序参数改变处理方法
+    const handleSort = ({key, value}: any) => {
+      state.querySort = key ? {key: value} : {}
+      handleSearch()
+    }
+    //  重置查询表单方法
+    const handleReset = () => {
+      state.queryForm = {}
+      state.back_queryForm = state.queryForm
+      handleSearch()
+    }
+    //  查询方法
+    const handleSearch = (page = 1, pageSize = 10) => {
+      //  添加分页参数
+      const queryParams: any = {
+        pageNum: page,
+        pageSize: pageSize,
+        sort: {},
+        text: ''
+      }
+      //  添加排序参数
+      for (const [k, v] of Object.entries(state.querySort)) {
+        that.$util.isValue(v) ? (queryParams.sort[k] = v) : null;
+      }
+      //  添加表单参数
+      for (const [k, v] of Object.entries(state.back_queryForm)) {
+        that.$util.isValue(v) ? (queryParams[k] = v) : null;
+      }
+      //  添加复合查询参数
+      state.loading = true
+
+      // mock
+      const arr = []
+      for (let i = 0; i < 77; i++) {
+        arr.push({p1: '阿三顶顶顶顶顶顶顶顶顶顶顶顶顶'})
+      }
+      state.queryResult.tableData = arr
+      state.queryResult.total = arr.length
+      state.loading = false
+      // that.$api.patrolBoatList(that.$util.formatGetParam(queryParams)).then((res: { code: number; rows: never[]; total: number; }) => {
+      //   if (res.code === 200) {
+      //     state.queryResult.tableData = res.rows
+      //     state.queryResult.total = res.total
+      //   }
+      //   setTimeout(() => {
+      //     state.loading = false
+      //   }, 1000)
+      // }).catch(() => {
+      //   setTimeout(() => {
+      //     state.loading = false
+      //   }, 1000)
+      // })
+    }
+    //  点击查询按钮后
+    const onSearch = () => {
+      ref_cusTable.value.resetFilter()
+      state.back_queryForm = state.queryForm
+      state.queryPage.pageNum = 1
+      handleSearch()
+    }
+    onMounted(() => {
+      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
+      initDictionary()
+      handleSearch()
+    })
     return {
-      ...toRefs(state)
+      ref_cusTable,
+      ...toRefs(state),
+      handleSearch,
+      handlePage,
+      handleSort,
+      handleReset,
+      onSearch,
     }
   },
 })