refactor:列表样式调整;

src/views/business/extension/index.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="business-extension layout-padding">
-        <div  class="layout-padding-auto layout-padding-view pd15">
+    <div class="business-extension layout-pd">
             延期申请
-        </div>
     </div>
 </template>
 

src/views/business/followUp/index.vue

@@ -1,95 +1,98 @@
 <template>
-    <div class="business-followUp-container layout-padding">
-        <div  class="layout-padding-auto layout-padding-view pd15">
-          <!-- 搜索  -->
-          <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mt15" label-width="100px">
-            <el-row :gutter="10">
-              <el-col :span="8">
-                <el-form-item label="关键字" prop="Keyword">
-                  <el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="queryList" />
+    <div class="business-followUp-container layout-pd">
+      <!-- 搜索  -->
+      <el-card shadow="never">
+        <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mt15" label-width="100px">
+          <el-row :gutter="10">
+            <el-col :span="8">
+              <el-form-item label="关键字" prop="Keyword">
+                <el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="queryList" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="回访状态" prop="AcceptType">
+                <el-select v-model="state.queryParams.AcceptType" placeholder="请选择回访状态" multiple clearable class="w100">
+                  <el-option v-for="item in state.acceptTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <transition name="el-zoom-in-top">
+              <el-col :span="8" v-show="!searchCol">
+                <el-form-item label="受理时间" prop="crTime">
+                  <el-date-picker
+                      v-model="state.queryParams.crTime"
+                      type="datetimerange"
+                      unlink-panels
+                      range-separator="至"
+                      start-placeholder="开始时间"
+                      end-placeholder="结束时间"
+                      :shortcuts="shortcuts"
+                      @change="timeStartChangeCr"
+                      value-format="YYYY-MM-DD[T]HH:mm:ss"
+                  />
                 </el-form-item>
               </el-col>
-              <el-col :span="8">
-                <el-form-item label="回访状态" prop="AcceptType">
-                  <el-select v-model="state.queryParams.AcceptType" placeholder="请选择回访状态" multiple clearable class="w100">
+            </transition>
+            <transition name="el-zoom-in-top">
+              <el-col :span="8" v-show="!searchCol">
+                <el-form-item label="归档时间" prop="exTime">
+                  <el-date-picker
+                      v-model="state.queryParams.exTime"
+                      type="datetimerange"
+                      unlink-panels
+                      range-separator="至"
+                      start-placeholder="开始时间"
+                      end-placeholder="结束时间"
+                      :shortcuts="shortcuts"
+                      @change="timeStartChangeEx"
+                      value-format="YYYY-MM-DD[T]HH:mm:ss"
+                  />
+                </el-form-item>
+              </el-col>
+            </transition>
+            <transition name="el-zoom-in-top">
+              <el-col :span="8" v-show="!searchCol">
+                <el-form-item label="回访时间" prop="exTime">
+                  <el-date-picker
+                      v-model="state.queryParams.exTime"
+                      type="datetimerange"
+                      unlink-panels
+                      range-separator="至"
+                      start-placeholder="开始时间"
+                      end-placeholder="结束时间"
+                      :shortcuts="shortcuts"
+                      @change="timeStartChangeEx"
+                      value-format="YYYY-MM-DD[T]HH:mm:ss"
+                  />
+                </el-form-item>
+              </el-col>
+            </transition>
+            <transition name="el-zoom-in-top">
+              <el-col :span="8" v-show="!searchCol">
+                <el-form-item label="回访方式" prop="AcceptType">
+                  <el-select v-model="state.queryParams.AcceptType" placeholder="请选择回访方式" multiple clearable class="w100">
                     <el-option v-for="item in state.acceptTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <transition name="el-zoom-in-top">
-                <el-col :span="8" v-show="!searchCol">
-                  <el-form-item label="受理时间" prop="crTime">
-                    <el-date-picker
-                        v-model="state.queryParams.crTime"
-                        type="datetimerange"
-                        unlink-panels
-                        range-separator="至"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        :shortcuts="shortcuts"
-                        @change="timeStartChangeCr"
-                        value-format="YYYY-MM-DD[T]HH:mm:ss"
-                    />
-                  </el-form-item>
-                </el-col>
-              </transition>
-              <transition name="el-zoom-in-top">
-                <el-col :span="8" v-show="!searchCol">
-                  <el-form-item label="归档时间" prop="exTime">
-                    <el-date-picker
-                        v-model="state.queryParams.exTime"
-                        type="datetimerange"
-                        unlink-panels
-                        range-separator="至"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        :shortcuts="shortcuts"
-                        @change="timeStartChangeEx"
-                        value-format="YYYY-MM-DD[T]HH:mm:ss"
-                    />
-                  </el-form-item>
-                </el-col>
-              </transition>
-              <transition name="el-zoom-in-top">
-                <el-col :span="8" v-show="!searchCol">
-                  <el-form-item label="回访时间" prop="exTime">
-                    <el-date-picker
-                        v-model="state.queryParams.exTime"
-                        type="datetimerange"
-                        unlink-panels
-                        range-separator="至"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        :shortcuts="shortcuts"
-                        @change="timeStartChangeEx"
-                        value-format="YYYY-MM-DD[T]HH:mm:ss"
-                    />
-                  </el-form-item>
-                </el-col>
-              </transition>
-              <transition name="el-zoom-in-top">
-                <el-col :span="8" v-show="!searchCol">
-                  <el-form-item label="回访方式" prop="AcceptType">
-                    <el-select v-model="state.queryParams.AcceptType" placeholder="请选择回访方式" multiple clearable class="w100">
-                      <el-option v-for="item in state.acceptTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </transition>
-              <el-col :span="8">
-                <div class="flex-end w100">
-                  <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-                  <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-                  <el-button link type="primary" @click="closeSearch">
-                    {{ searchCol ? '展开' : '收起' }}
-                    <SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
-                  </el-button>
-                </div>
-              </el-col>
-            </el-row>
-          </el-form>
+            </transition>
+            <el-col :span="8">
+              <div class="flex-end w100">
+                <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+                <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+                <el-button link type="primary" @click="closeSearch">
+                  {{ searchCol ? '展开' : '收起' }}
+                  <SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+                </el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+      <el-card shadow="never">
           <!-- 功能按钮 -->
           <div class="flex-center-between mb20 mt20">
+            <p class="table-title">信息列表</p>
             <div>
               <el-button type="primary" @click="onTextMessageFollowUp" :disabled="!multipleSelection.length" v-auth="'business:followUp:textMessage'">短信回访</el-button>
             </div>
@@ -163,7 +166,7 @@
               v-model:limit="state.queryParams.PageSize"
               @pagination="queryList"
           />
-        </div>
+      </el-card>
         <!-- 电话回访 -->
       <follow-up-phone ref="followUpPhoneRef" @updateList="queryList" />
     </div>
@@ -251,19 +254,22 @@ const state = reactive(<any>{
 const closeSearch = () => {
   searchCol.value = !searchCol.value;
 };
-// 受理时间
-const timeStartChangeCr = (val: string[]) => {
+const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
   if (val) {
-    state.queryParams.CreationTimeStart = val[0];
-    state.queryParams.CreationTimeEnd = val[1];
+    state.queryParams[startKey] = val[0];
+    state.queryParams[endKey] = val[1];
+  } else {
+    state.queryParams[startKey] = '';
+    state.queryParams[endKey] = '';
   }
 };
+// 受理时间
+const timeStartChangeCr = (val: string[]) => {
+  handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
+};
 // 过期时间
 const timeStartChangeEx = (val: string[]) => {
-  if (val) {
-    state.queryParams.ExpiredTimeStart = val[0];
-    state.queryParams.ExpiredTimeStart = val[1];
-  }
+  handleTimeChange(val, 'ExpiredTimeStart', 'ExpiredTimeEnd');
 };
 // 获取查询条件基础信息
 const getBaseData = async () => {
@@ -332,8 +338,5 @@ const handleSelectionChange = (val: any[]) => {
   .arrow.is-reverse {
     transform: rotateZ(-180deg);
   }
-  .el-table {
-    flex: 1;
-  }
 }
 </style>

src/views/business/order/index.vue

@@ -1,7 +1,6 @@
 <template>
-	<div class="business-order-container layout-padding">
-		<div class="layout-padding-auto layout-padding-view pd20">
-      <div class="flex-column">
+	<div class="business-order-container layout-pd">
+    <el-card shadow="never">
         <el-tabs v-model="state.activeName" @tab-change="handleClick">
           <el-tab-pane :name="item.value" v-for="item in state.tabPaneList" :key="item.value" :label="item.label">
           </el-tab-pane>
@@ -174,15 +173,18 @@
             </el-col>
           </el-row>
         </el-form>
-        <!-- 功能按钮 -->
-        <div class="flex-center-between mb20 mt20">
-          <div>
-            <el-button type="primary" @click="onAddWorkOrder" v-auth="'business:order:add'">
-              <SvgIcon name="ele-Plus" class="mr5" />新建工单
-            </el-button>
-          </div>
+    </el-card>
+    <el-card shadow="never">
+      <!-- 功能按钮 -->
+      <div class="flex-center-between mb20 mt20">
+        <p class="table-title">信息列表</p>
+        <div>
+          <el-button type="primary" @click="onAddWorkOrder" v-auth="'business:order:add'">
+            <SvgIcon name="ele-Plus" class="mr5" />新建工单
+          </el-button>
         </div>
-        <!-- 表格 -->
+      </div>
+      <!-- 表格 -->
         <el-table :data="state.tableList" v-loading="state.loading" row-key="id" @sort-change="sortChange">
           <el-table-column type="index" width="60" label="序号" />
           <!--  sortable="custom" 工单编码排序 -->
@@ -267,20 +269,19 @@
             v-model:limit="state.queryParams.PageSize"
             @pagination="queryList"
         />
-      </div>
-		</div>
+    </el-card>
 		<!-- 工单详情 -->
 		<order-detail ref="OrderDetailRef" @updateList="queryList" />
 	</div>
 </template>
 <script setup lang="ts" name="order">
-import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
+import {defineAsyncComponent, ref, reactive, onMounted, onActivated} from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import type { FormInstance } from 'element-plus';
 import { throttle } from '/@/utils/tools';
 import { auth } from '/@/utils/authFunction';
 import other from '/@/utils/other';
-import { useRouter } from 'vue-router';
+import { useRouter,useRoute } from 'vue-router';
 import { formatDate } from '/@/utils/formatTime';
 import { listBaseData, orderList, hotSpotType, orderDelete } from '/@/api/business/order';
 
@@ -318,10 +319,11 @@ const shortcuts = [
 // 定义变量内容
 const ruleFormRef = ref<RefType>();
 const searchCol = ref(true);
+const route = useRoute();
 const router = useRouter();
 const OrderDetailRef = ref<RefType>();
 const state = reactive(<any>{
-	activeName: 'all',
+	activeName: '0',
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
@@ -352,27 +354,27 @@ const state = reactive(<any>{
 	tabPaneList: [ //
 		{
 			label: '全部工单',
-			value: 'all',
+			value: '0',
 		},
 		{
 			label: '即将超期',
-			value: 'willExpire',
+			value: '1',
 		},
 		{
 			label: '超期件',
-			value: 'expire',
+			value: '2',
 		},
 		{
 			label: '会签件',
-			value: 'sign',
+			value: '3',
 		},
 		{
 			label: '督办件',
-			value: 'supervise',
+			value: '4',
 		},
 		{
 			label: '撤销件',
-			value: 'revoke',
+			value: '5',
 		},
 	],
 	acceptTypeOptions: [], //受理类型
@@ -405,19 +407,22 @@ const getKnowledgeList = () => {
 const closeSearch = () => {
 	searchCol.value = !searchCol.value;
 };
+const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
+  if (val) {
+    state.queryParams[startKey] = val[0];
+    state.queryParams[endKey] = val[1];
+  } else {
+    state.queryParams[startKey] = '';
+    state.queryParams[endKey] = '';
+  }
+};
 // 受理时间
 const timeStartChangeCr = (val: string[]) => {
-	if (val) {
-		state.queryParams.CreationTimeStart = val[0];
-		state.queryParams.CreationTimeEnd = val[1];
-	}
+  handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
 };
 // 过期时间
 const timeStartChangeEx = (val: string[]) => {
-	if (val) {
-		state.queryParams.ExpiredTimeStart = val[0];
-		state.queryParams.ExpiredTimeStart = val[1];
-	}
+  handleTimeChange(val, 'ExpiredTimeStart', 'ExpiredTimeEnd');
 };
 // 获取查询条件基础信息
 const getBaseData = async () => {
@@ -442,7 +447,7 @@ const queryList = () => {
 		Reflect.deleteProperty(request, 'crTime'); // 删除无用的参数
 		Reflect.deleteProperty(request, 'exTime'); // 删除无用的参数
 		switch (state.activeName) {
-			case 'all':
+			case '0':
 				state.loading = true;
 				orderList(request)
 					.then((response: any) => {
@@ -454,7 +459,7 @@ const queryList = () => {
 						state.loading = false;
 					});
 				break;
-			case 'willExpire':
+			case '1':
 				// workflowPaged(state.queryParams)
 				// 	.then((response: any) => {
 				// 		state.tableList = response.result?.items ?? [];
@@ -468,7 +473,7 @@ const queryList = () => {
 				// 		state.loading = false;
 				// 	});
 				break;
-			case 'expire':
+			case '2':
 				// workflowPaged(state.queryParams)
 				// 	.then((response: any) => {
 				// 		state.tableList = response.result?.items ?? [];
@@ -482,7 +487,7 @@ const queryList = () => {
 				// 		state.loading = false;
 				// 	});
 				break;
-			case 'sign':
+			case '3':
 				// workflowPaged(state.queryParams)
 				// 	.then((response: any) => {
 				// 		state.tableList = response.result?.items ?? [];
@@ -496,7 +501,7 @@ const queryList = () => {
 				// 		state.loading = false;
 				// 	});
 				break;
-			case 'supervise':
+			case '4':
 				// workflowPaged(state.queryParams)
 				// 	.then((response: any) => {
 				// 		state.tableList = response.result?.items ?? [];
@@ -510,7 +515,7 @@ const queryList = () => {
 				// 		state.loading = false;
 				// 	});
 				break;
-			case 'revoke':
+			case '5':
 				// workflowPaged(state.queryParams)
 				// 	.then((response: any) => {
 				// 		state.tableList = response.result?.items ?? [];
@@ -545,7 +550,6 @@ const resetQuery = throttle((formEl: FormInstance | undefined) => {
 }, 500);
 // 切换tab 查询列表
 const handleClick = () => {
-  console.log('1')
 	queryList();
 };
 // 新增工单
@@ -588,6 +592,15 @@ const onDeleteOrder = (row: any) => {
 onMounted(async () => {
 	await getBaseData();
 	queryList();
+  if(route.query.tabIndex){
+    state.activeName = route.query.tabIndex as string;
+  }
+  console.log(route)
+});
+onActivated(() => {
+  if(route.query.tabIndex){
+    state.activeName = route.query.tabIndex as string;
+  }
 });
 </script>
 <style scoped lang="scss">
@@ -599,13 +612,5 @@ onMounted(async () => {
 	.arrow.is-reverse {
 		transform: rotateZ(-180deg);
 	}
-  .flex-column {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    .el-table {
-      flex: 1;
-    }
-  }
 }
 </style>

src/views/business/quality/index.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="business-quality layout-padding">
-        <div  class="layout-padding-auto layout-padding-view pd15">
+    <div class="business-quality layout-pd">
             质检管理
-        </div>
     </div>
 </template>
 

src/views/business/release/index.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="business-release-container layout-padding">
-		<div class="layout-padding-auto layout-padding-view pd20">
-			<!-- 搜索  -->
+	<div class="business-release-container layout-pd">
+    <!-- 搜索  -->
+    <el-card shadow="never">
 			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mt15" label-width="100px">
 				<el-row :gutter="10">
 					<el-col :span="8">
@@ -108,51 +108,53 @@
 					</el-col>
 				</el-row>
 			</el-form>
-			<!-- 表格 -->
-			<el-table :data="state.tableList" v-loading="state.loading" row-key="id">
-				<el-table-column type="index" width="60" label="序号" />
-				<!--  sortable="custom" 工单编码排序 -->
-				<el-table-column label="标题" show-overflow-tooltip width="400">
-					<template #default="{ row }">
-						<el-button link type="primary">{{ row.title }}</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column prop="acceptTypeText" label="受理类型" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="expiredTime" label="归档时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="发布状态" show-overflow-tooltip width="100">
-					<template #default="{ row }">
-						<!-- 已发布 -->
-						<span style="color: var(--el-color-info)" v-if="row.status === 0">{{ row.statusText }}</span>
+    </el-card>
+    <el-card shadow="never">
+      <!-- 表格 -->
+      <el-table :data="state.tableList" v-loading="state.loading" row-key="id">
+        <el-table-column type="index" width="60" label="序号" />
+        <!--  sortable="custom" 工单编码排序 -->
+        <el-table-column label="标题" show-overflow-tooltip width="400">
+          <template #default="{ row }">
+            <el-button link type="primary">{{ row.title }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="acceptTypeText" label="受理类型" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="expiredTime" label="归档时间" show-overflow-tooltip width="170">
+          <template #default="{ row }">
+            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发布状态" show-overflow-tooltip width="100">
+          <template #default="{ row }">
+            <!-- 已发布 -->
+            <span style="color: var(--el-color-info)" v-if="row.status === 0">{{ row.statusText }}</span>
             <el-button v-else link v-auth="'business:order:release'" type="primary">发布</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column prop="employeeName" label="发布人" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ row.employeeName + '[' + row.employeeStaffNo + ']' }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="expiredTime" label="发布时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
-		</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="employeeName" label="发布人" show-overflow-tooltip width="170">
+          <template #default="{ row }">
+            <span>{{ row.employeeName + '[' + row.employeeStaffNo + ']' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expiredTime" label="发布时间" show-overflow-tooltip width="170">
+          <template #default="{ row }">
+            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <Empty />
+        </template>
+      </el-table>
+      <!-- 分页 -->
+      <pagination
+          :total="state.total"
+          v-model:page="state.queryParams.PageIndex"
+          v-model:limit="state.queryParams.PageSize"
+          @pagination="queryList"
+      />
+    </el-card>
 		<!-- 工单发布详情 -->
 		<order-release ref="orderReleaseRef" @updateList="queryList" />
 	</div>
@@ -252,19 +254,22 @@ const load = async (node: any, resolve: any) => {
 const closeSearch = () => {
 	searchCol.value = !searchCol.value;
 };
+const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
+  if (val) {
+    state.queryParams[startKey] = val[0];
+    state.queryParams[endKey] = val[1];
+  } else {
+    state.queryParams[startKey] = '';
+    state.queryParams[endKey] = '';
+  }
+};
 // 受理时间
 const timeStartChangeCr = (val: string[]) => {
-	if (val) {
-		state.queryParams.CreationTimeStart = val[0];
-		state.queryParams.CreationTimeEnd = val[1];
-	}
+  handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
 };
 // 过期时间
 const timeStartChangeEx = (val: string[]) => {
-	if (val) {
-		state.queryParams.ExpiredTimeStart = val[0];
-		state.queryParams.ExpiredTimeStart = val[1];
-	}
+  handleTimeChange(val, 'ExpiredTimeStart', 'ExpiredTimeEnd');
 };
 // 获取查询条件基础信息
 const getBaseData = async () => {
@@ -309,8 +314,5 @@ onMounted(async () => {
 	.arrow.is-reverse {
 		transform: rotateZ(-180deg);
 	}
-	.el-table {
-		flex: 1;
-	}
 }
 </style>

src/views/business/screening/index.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="business-screening layout-padding">
-        <div  class="layout-padding-auto layout-padding-view pd15">
-            甄别申请
-        </div>
+    <div class="business-screening layout-pd">
+          甄别申请
     </div>
 </template>
 

src/views/knowledge/knowledge/index.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- 如果需要左右顶格布局参考系统设置字典管理 -->
 	<div class="knowledge-knowledge-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
 			<el-row :gutter="20" class="h100">
@@ -79,7 +80,6 @@
 				</el-col>
 				<el-col :xs="18" :sm="18" :md="18" :lg="20" :xl="20" class="rightContent">
 					<el-scrollbar class="pr10" ref="rightScrollRef">
-						<div class="flex-column">
 							<el-tabs v-model="state.queryParams.Status" @tab-change="handleClick">
 								<el-tab-pane label="全部" name=" "></el-tab-pane>
 								<el-tab-pane :label="v.value" :name="v.key" v-for="(v, i) in state.statusOptions" :key="i"></el-tab-pane>
@@ -266,7 +266,6 @@
 								v-model:limit="state.queryParams.PageSize"
 								@pagination="queryList"
 							/>
-						</div>
 					</el-scrollbar>
 				</el-col>
 			</el-row>
@@ -669,19 +668,9 @@ onMounted(() => {
 		border-right: 1px solid var(--el-border-color);
 		height: 100%;
 	}
-
 	.rightContent {
-		height: 100%;
-		.flex-column {
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-			.el-table {
-				flex: 1;
-			}
-		}
+    height: 100%;
 	}
-
 	:deep(.el-tree-node__content) {
 		height: 40px;
 	}

src/views/knowledge/retrieval/index.vue

@@ -1,43 +1,42 @@
 <template>
-	<div class="layout-padding knowledge-retrieval-container">
-		<div class="layout-padding-auto layout-padding-view pd15">
-			<div class="input-box">
-				<el-input v-model="state.queryParams.Keyword" placeholder="关键词" class="input-with-select" @input="queryList" clearable>
-					<template #prepend>
-						<el-select v-model="state.queryParams.RetrievalType" size="large" placeholder="请选择" style="width: 100px">
-							<el-option v-for="item in state.typeList" :key="item.value" :label="item.label" :value="item.value" class="w1" />
-						</el-select>
-					</template>
-					<template #append>
-						<el-button type="primary" size="large" class="btn" :loading="state.loading" @click="queryList" v-auth="'knowledge:process:query'"
-							>搜索</el-button
-						>
-					</template>
-				</el-input>
-			</div>
-			<el-divider />
-			<el-scrollbar class="flex1">
-				<div v-loading="state.loading">
-					<template v-if="state.retrievalList.length && state.queryParams.Keyword">
-						<div v-for="(v, i) in state.retrievalList" :key="i" class="retrieval-cootent-item" @click="onPreview(v)">
-							<h4 class="mb10">{{ v.title }}</h4>
-							<div class="text-ellipsis2" v-html="queryTitleLight(v.content)"></div>
-						</div>
-					</template>
-					<template v-else>
-						<Empty type="search" description="暂无结果" />
-					</template>
-				</div>
-			</el-scrollbar>
+	<div class="knowledge-retrieval-container layout-pd">
+    <el-card shadow="never">
+      <div class="input-box">
+        <el-input v-model="state.queryParams.Keyword" placeholder="关键词" class="input-with-select" @input="queryList" clearable>
+          <template #prepend>
+            <el-select v-model="state.queryParams.RetrievalType" size="large" placeholder="请选择" style="width: 100px">
+              <el-option v-for="item in state.typeList" :key="item.value" :label="item.label" :value="item.value" class="w1" />
+            </el-select>
+          </template>
+          <template #append>
+            <el-button type="primary" size="large" class="btn" :loading="state.loading" @click="queryList" v-auth="'knowledge:process:query'"
+            >搜索</el-button
+            >
+          </template>
+        </el-input>
+      </div>
+      <el-divider />
+      <div v-loading="state.loading">
+        <template v-if="state.retrievalList.length && state.queryParams.Keyword">
+          <div v-for="(v, i) in state.retrievalList" :key="i" class="retrieval-content-item" @click="onPreview(v)" title="查看详情">
+            <h4 class="mb10">{{ v.title }}</h4>
+            <div class="text-ellipsis2" v-html="queryTitleLight(v.content)"></div>
+          </div>
+        </template>
+        <template v-else>
+          <Empty type="search" description="暂无结果" />
+        </template>
+      </div>
+
+      <!-- 分页 -->
+      <pagination
+          :total="state.total"
+          v-model:page="state.queryParams.PageIndex"
+          v-model:limit="state.queryParams.PageSize"
+          @pagination="queryList"
+      />
+    </el-card>
 
-			<!-- 分页 -->
-			<pagination
-				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
-		</div>
 	</div>
 </template>
 
@@ -47,7 +46,6 @@ import {useRouter} from 'vue-router';
 import {ElMessage} from 'element-plus';
 import {auth} from '/@/utils/authFunction';
 import {knowledgeRetrieval} from '/@/api/knowledge/retrieval';
-import {throttle} from '/@/utils/tools';
 
 const state = reactive<any>({
 	queryParams: {
@@ -93,10 +91,17 @@ const queryTitleLight = (titleInfo: string) => {
       `<span style="color:var(--el-color-danger)">${state.queryParams.Keyword}</span>`
   );
 };
-const queryList = throttle(() => {
+const queryList = () => {
 	if (!auth('knowledge:process:query')) ElMessage.error('抱歉，您没有权限知识检索');
 	else {
+    if(!state.queryParams.Keyword) {
+      state.retrievalList = [];
+      state.total = 0;
+      return;
+    }
 		state.loading = true;
+    state.retrievalList = [];
+    state.total = 0;
 		knowledgeRetrieval(state.queryParams)
 			.then((res: any) => {
 				state.retrievalList = res.result?.items ?? [];
@@ -105,9 +110,11 @@ const queryList = throttle(() => {
 			})
 			.catch(() => {
 				state.loading = false;
+        state.retrievalList = [];
+        state.total = 0;
 			});
 	}
-}, 500);
+}
 </script>
 
 <style scoped lang="scss">
@@ -121,11 +128,7 @@ const queryList = throttle(() => {
 			}
 		}
 	}
-	.flex1 {
-		flex: 1;
-	}
-
-	.retrieval-cootent {
+	.retrieval-content {
 		&-item {
 			border: var(--el-border);
 			border-radius: var(--el-border-radius-base);

src/views/system/config/timeLimit/index.vue

@@ -1,42 +1,42 @@
 <template>
-	<div class="system-timeLimit-container layout-padding">
-		<div class="layout-padding-auto layout-padding-view pd20">
-			<div class="flex-center-between mb20">
-				<p class="table-title">信息列表</p>
-				<div>
-					<el-button type="primary" @click="addTimeLimit" v-waves v-auth="'system:timeLimit:add'">
-						<SvgIcon name="ele-Plus" class="mr5" />新增
-					</el-button>
-				</div>
-			</div>
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading">
-				<el-table-column type="index" width="60" label="序号" />
-				<el-table-column prop="timeLimitName" label="配置名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="workflowName" label="业务名称" show-overflow-tooltip width="130"></el-table-column>
-				<el-table-column prop="morningEnd" label="创建人" show-overflow-tooltip width="130"></el-table-column>
-				<el-table-column prop="afterBegin" label="状态" show-overflow-tooltip width="130"></el-table-column>
-				<el-table-column label="操作" width="250" fixed="right" align="center">
-					<template #default="{row}">
-						<el-button link type="primary" @click="updateTimeLimit(row)" v-auth="'system:timeLimit:edit'" title="修改时效"> 修改 </el-button>
-						<el-button link type="info" @click="detailTimeLimit(row)" v-auth="'system:timeLimit:detail'" title="查看详情"> 查看 </el-button>
-						<el-button link type="danger" @click="deleteTimeLimit(row)" v-auth="'system:timeLimit:delete'" title="删除"> 删除 </el-button>
-						<el-button link type="success" @click="enableTimeLimit(row)" v-auth="'system:timeLimit:enabled'" title="启用"> 启用 </el-button>
-						<el-button link type="danger" @click="disableTimeLimit(row)" v-auth="'system:timeLimit:disabled'" title="禁用"> 禁用 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
-		</div>
+	<div class="system-timeLimit-container layout-pd">
+		<el-card shadow="never">
+      <div class="flex-center-between mb20">
+        <p class="table-title">信息列表</p>
+        <div>
+          <el-button type="primary" @click="addTimeLimit" v-waves v-auth="'system:timeLimit:add'">
+            <SvgIcon name="ele-Plus" class="mr5" />新增
+          </el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <el-table :data="state.tableData" v-loading="state.loading">
+        <el-table-column type="index" width="60" label="序号" />
+        <el-table-column prop="timeLimitName" label="配置名称" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="workflowName" label="业务名称" show-overflow-tooltip width="130"></el-table-column>
+        <el-table-column prop="morningEnd" label="创建人" show-overflow-tooltip width="130"></el-table-column>
+        <el-table-column prop="afterBegin" label="状态" show-overflow-tooltip width="130"></el-table-column>
+        <el-table-column label="操作" width="250" fixed="right" align="center">
+          <template #default="{row}">
+            <el-button link type="primary" @click="updateTimeLimit(row)" v-auth="'system:timeLimit:edit'" title="修改时效"> 修改 </el-button>
+            <el-button link type="info" @click="detailTimeLimit(row)" v-auth="'system:timeLimit:detail'" title="查看详情"> 查看 </el-button>
+            <el-button link type="danger" @click="deleteTimeLimit(row)" v-auth="'system:timeLimit:delete'" title="删除"> 删除 </el-button>
+            <el-button link type="success" @click="enableTimeLimit(row)" v-auth="'system:timeLimit:enabled'" title="启用"> 启用 </el-button>
+            <el-button link type="danger" @click="disableTimeLimit(row)" v-auth="'system:timeLimit:disabled'" title="禁用"> 禁用 </el-button>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <Empty />
+        </template>
+      </el-table>
+      <!-- 分页 -->
+      <pagination
+          :total="state.total"
+          v-model:page="state.queryParams.PageIndex"
+          v-model:limit="state.queryParams.PageSize"
+          @pagination="queryList"
+      />
+    </el-card>
 		<time-limit-add ref="timeLimitAddRef" @updateList="queryList" />
 		<time-limit-edit ref="timeLimitEditRef" @updateList="queryList" />
 		<time-limit-detail ref="timeLimitDetailRef" @updateList="queryList" />
@@ -198,8 +198,5 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .device-tels-container {
-	.el-table {
-		flex: 1;
-	}
 }
 </style>

src/views/system/parameter/index.vue

@@ -1,138 +1,138 @@
 <template>
-	<div class="system-parameter-container layout-padding">
-		<div class="layout-padding-auto layout-padding-view pd100">
-			<el-divider content-position="center"><h4 class="table-title">系统参数设置</h4></el-divider>
-			<el-form :model="state.ruleForm" label-width="200px" ref="ruleFormRef" v-loading="state.loading" class="form">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-for="items in state.data" :key="items.id">
-						<!-- <el-divider content-position="left">{{ items.groupName }}</el-divider> -->
-						<div v-for="item in items.systemSettings" :key="item.id">
-							<el-form-item :label="item.settingName">
-								<!-- 单选框 -->
-								<template v-if="item.valueType === 0">
-									<el-radio-group v-model="item.settingValue" class="ml-4" @change="changeVal($event, item.id)">
-										<el-radio :label="item1.value" v-for="item1 in item.presetValue" :key="item1.value">{{ item1.key }}</el-radio>
-									</el-radio-group>
-								</template>
-								<!-- 多选框 -->
-								<template v-else-if="item.valueType === 1">
-									<el-checkbox-group v-model="item.settingValue" @change="changeVal($event, item.id)">
-										<el-checkbox v-for="item1 in item.presetValue" :key="item1.value" :label="item1.value">{{ item1.key }}</el-checkbox>
-									</el-checkbox-group>
-								</template>
-								<!-- 文本 -->
-								<template v-else-if="item.valueType === 2">
-									<el-input
-										v-model="item.settingValue"
-										:placeholder="'请输入' + item.settingName"
-										class="max-width"
-										@input="changeVal($event, item.id)"
-									/>
-								</template>
-								<!-- 数字 -->
-								<template v-else-if="item.valueType === 3">
-									<el-input-number v-model="item.settingValue" :placeholder="'请输入' + item.settingName" @input="changeVal($event, item.id)" />
-								</template>
-								<!-- 下拉框 -->
-								<template v-else-if="item.valueType === 4">
-									<el-select v-model="item.settingValue" :placeholder="'请选择' + item.settingName" @change="changeVal($event, item.id)">
-										<el-option v-for="item1 in item.presetValue" :key="item1.value" :label="item1.key" :value="item1.value" />
-									</el-select>
-								</template>
-								<!-- 开关 -->
-								<template v-else-if="item.valueType === 5">
-									<el-switch v-model="item.settingValue" @change="changeVal($event, item.id)" />
-								</template>
-								<!-- 时间 -->
-								<template v-else-if="item.valueType === 6">
-									<el-time-select
-										v-model="item.settingValue"
-										start="00:00"
-										step="00:30"
-										end="23:30"
-										:placeholder="'请选择' + item.settingName"
-										@change="changeVal($event, item.id)"
-									/>
-								</template>
-								<!-- 日期 -->
-								<template v-else-if="item.valueType === 7">
-									<el-date-picker
-										v-model="item.settingValue"
-										value-format="YYYY-MM-DD[T]HH:mm:ss"
-										type="date"
-										:placeholder="'请选择' + item.settingName"
-										@change="changeVal($event, item.id)"
-									/>
-								</template>
-								<!-- 日期区间 -->
-								<template v-else-if="item.valueType === 8">
-									<div>
-										<el-date-picker
-											v-model="item.settingValue"
-											value-format="YYYY-MM-DD[T]HH:mm:ss"
-											type="daterange"
-											:placeholder="'请选择' + item.settingName"
-											@change="changeVal($event, item.id)"
-											range-separator="至"
-											start-placeholder="开始日期"
-											end-placeholder="结束日期"
-										/>
-									</div>
-								</template>
-								<!-- 时间区间 -->
-								<template v-else-if="item.valueType === 9">
-									<el-time-select
-										v-model="item.settingValue[0]"
-										:max-time="item.settingValue[1]"
-										placeholder="开始时间"
-										start="00:00"
-										step="00:30"
-										end="23:30"
-										@change="changeVal($event, item.id, 'startTime')"
-									/>
-									<el-time-select
-										v-model="item.settingValue[1]"
-										:min-time="item.settingValue[0]"
-										placeholder="结束时间"
-										start="00:00"
-										step="00:30"
-										end="23:30"
-										@change="changeVal($event, item.id, 'endTime')"
-									/>
-								</template>
-								<!-- 单个图片上传 -->
-								<template v-else-if="item.valueType === 10">
-									<el-upload
-										class="avatar-uploader"
-										accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
-										action=""
-										:show-file-list="false"
-										:on-success="handleAvatarSuccess"
-										:http-request="(file) => uploadImg(file, item.id)"
-										:before-upload="beforeAvatarUpload"
-									>
-										<img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
-										<SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus" size="32px" />
-									</el-upload>
-								</template>
-								<!-- 多个图片上传 -->
-								<template v-else-if="item.valueType === 11">
-									<el-upload
-										v-model:file-list="fileList"
-										accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
-										action=""
-										list-type="picture-card"
-										ref="uploadListRef"
-										:autoUpload="false"
-										:on-change="(file) => uploadImgList(file, fileList, item.id)"
-									>
-										<SvgIcon name="ele-Plus" size="32px" />
-										<template #file="file">
-											<div style="text-align: center" class="w100 h100">
-												<div class="images w100 h100" v-viewer>
-													<img class="w100 h100" :src="file.file.url"  alt=""/>
-												</div>
-												<span class="el-upload-list__item-actions">
+	<div class="system-parameter-container layout-pd">
+      <el-card shadow="never">
+        <el-divider content-position="center"><h4 class="table-title">系统参数设置</h4></el-divider>
+        <el-form :model="state.ruleForm" label-width="200px" ref="ruleFormRef" v-loading="state.loading">
+          <el-row :gutter="35">
+            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-for="items in state.data" :key="items.id">
+              <!-- <el-divider content-position="left">{{ items.groupName }}</el-divider> -->
+              <div v-for="item in items.systemSettings" :key="item.id">
+                <el-form-item :label="item.settingName">
+                  <!-- 单选框 -->
+                  <template v-if="item.valueType === 0">
+                    <el-radio-group v-model="item.settingValue" class="ml-4" @change="changeVal($event, item.id)">
+                      <el-radio :label="item1.value" v-for="item1 in item.presetValue" :key="item1.value">{{ item1.key }}</el-radio>
+                    </el-radio-group>
+                  </template>
+                  <!-- 多选框 -->
+                  <template v-else-if="item.valueType === 1">
+                    <el-checkbox-group v-model="item.settingValue" @change="changeVal($event, item.id)">
+                      <el-checkbox v-for="item1 in item.presetValue" :key="item1.value" :label="item1.value">{{ item1.key }}</el-checkbox>
+                    </el-checkbox-group>
+                  </template>
+                  <!-- 文本 -->
+                  <template v-else-if="item.valueType === 2">
+                    <el-input
+                        v-model="item.settingValue"
+                        :placeholder="'请输入' + item.settingName"
+                        class="max-width"
+                        @input="changeVal($event, item.id)"
+                    />
+                  </template>
+                  <!-- 数字 -->
+                  <template v-else-if="item.valueType === 3">
+                    <el-input-number v-model="item.settingValue" :placeholder="'请输入' + item.settingName" @input="changeVal($event, item.id)" />
+                  </template>
+                  <!-- 下拉框 -->
+                  <template v-else-if="item.valueType === 4">
+                    <el-select v-model="item.settingValue" :placeholder="'请选择' + item.settingName" @change="changeVal($event, item.id)">
+                      <el-option v-for="item1 in item.presetValue" :key="item1.value" :label="item1.key" :value="item1.value" />
+                    </el-select>
+                  </template>
+                  <!-- 开关 -->
+                  <template v-else-if="item.valueType === 5">
+                    <el-switch v-model="item.settingValue" @change="changeVal($event, item.id)" />
+                  </template>
+                  <!-- 时间 -->
+                  <template v-else-if="item.valueType === 6">
+                    <el-time-select
+                        v-model="item.settingValue"
+                        start="00:00"
+                        step="00:30"
+                        end="23:30"
+                        :placeholder="'请选择' + item.settingName"
+                        @change="changeVal($event, item.id)"
+                    />
+                  </template>
+                  <!-- 日期 -->
+                  <template v-else-if="item.valueType === 7">
+                    <el-date-picker
+                        v-model="item.settingValue"
+                        value-format="YYYY-MM-DD[T]HH:mm:ss"
+                        type="date"
+                        :placeholder="'请选择' + item.settingName"
+                        @change="changeVal($event, item.id)"
+                    />
+                  </template>
+                  <!-- 日期区间 -->
+                  <template v-else-if="item.valueType === 8">
+                    <div>
+                      <el-date-picker
+                          v-model="item.settingValue"
+                          value-format="YYYY-MM-DD[T]HH:mm:ss"
+                          type="daterange"
+                          :placeholder="'请选择' + item.settingName"
+                          @change="changeVal($event, item.id)"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                      />
+                    </div>
+                  </template>
+                  <!-- 时间区间 -->
+                  <template v-else-if="item.valueType === 9">
+                    <el-time-select
+                        v-model="item.settingValue[0]"
+                        :max-time="item.settingValue[1]"
+                        placeholder="开始时间"
+                        start="00:00"
+                        step="00:30"
+                        end="23:30"
+                        @change="changeVal($event, item.id, 'startTime')"
+                    />
+                    <el-time-select
+                        v-model="item.settingValue[1]"
+                        :min-time="item.settingValue[0]"
+                        placeholder="结束时间"
+                        start="00:00"
+                        step="00:30"
+                        end="23:30"
+                        @change="changeVal($event, item.id, 'endTime')"
+                    />
+                  </template>
+                  <!-- 单个图片上传 -->
+                  <template v-else-if="item.valueType === 10">
+                    <el-upload
+                        class="avatar-uploader"
+                        accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
+                        action=""
+                        :show-file-list="false"
+                        :on-success="handleAvatarSuccess"
+                        :http-request="(file) => uploadImg(file, item.id)"
+                        :before-upload="beforeAvatarUpload"
+                    >
+                      <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
+                      <SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus" size="32px" />
+                    </el-upload>
+                  </template>
+                  <!-- 多个图片上传 -->
+                  <template v-else-if="item.valueType === 11">
+                    <el-upload
+                        v-model:file-list="fileList"
+                        accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
+                        action=""
+                        list-type="picture-card"
+                        ref="uploadListRef"
+                        :autoUpload="false"
+                        :on-change="(file) => uploadImgList(file, fileList, item.id)"
+                    >
+                      <SvgIcon name="ele-Plus" size="32px" />
+                      <template #file="file">
+                        <div style="text-align: center" class="w100 h100">
+                          <div class="images w100 h100" v-viewer>
+                            <img class="w100 h100" :src="file.file.url"  alt=""/>
+                          </div>
+                          <span class="el-upload-list__item-actions">
 													<span title="预览图片" class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
 														<SvgIcon name="ele-ZoomIn" size="18px" />
 													</span>
@@ -140,20 +140,20 @@
 														<SvgIcon name="ele-Delete" size="18px" />
 													</span>
 												</span>
-											</div>
-										</template>
-									</el-upload>
-								</template>
-							</el-form-item>
-						</div>
-					</el-col>
-				</el-row>
-				<el-form-item>
-					<el-button type="primary" @click="submitForm" :loading="state.loading" v-auth="'system:parameter:edit'">保 存 </el-button>
-					<el-button @click="resetForm" :loading="state.loading" v-auth="'system:parameter:edit'">重 置</el-button>
-				</el-form-item>
-			</el-form>
-		</div>
+                        </div>
+                      </template>
+                    </el-upload>
+                  </template>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm" :loading="state.loading" v-auth="'system:parameter:edit'">保 存 </el-button>
+            <el-button @click="resetForm" :loading="state.loading" v-auth="'system:parameter:edit'">重 置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
 	</div>
 </template>
 
@@ -332,17 +332,9 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .system-parameter-container {
-	.pd100 {
-		padding: 0 10vw;
-	}
 	.max-width {
 		max-width: 214px;
 	}
-	.form {
-		flex: 1;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
 	.avatar-uploader .avatar {
 		width: 178px;
 		height: 178px;

src/views/system/roles/index.vue

@@ -1,75 +1,75 @@
 <template>
-	<div class="system-role-container layout-padding">
-		<div class="layout-padding-auto layout-padding-view pd20">
-			<!-- 通用搜索 -->
-			<transition name="el-zoom-in-bottom" mode="out-in">
-				<el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
-					<el-form-item label="是否删除" prop="IsDeleted">
-						<el-select v-model="state.queryParams.IsDeleted" placeholder="请选择是否删除">
-							<el-option v-for="item in state.isDeletedList" :key="item.value" :label="item.label" :value="item.value" />
-						</el-select>
-					</el-form-item>
-					<el-form-item label="关键字" prop="Keyword">
-						<el-input v-model="state.queryParams.Keyword" placeholder="角色名称/角色编码" clearable @keyup.enter="handleQuery" />
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleQuery" :loading="state.loading" v-waves>
-							<SvgIcon name="ele-Search" class="mr5" />查询
-						</el-button>
-						<el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-					</el-form-item>
-				</el-form>
-			</transition>
-			<div class="flex-center-between mb20">
-				<p class="table-title">信息列表</p>
-				<div>
-					<el-button type="primary" @click="onOpenAddRole" v-waves v-auth="'system:role:add'">
-						<SvgIcon name="ele-Plus" class="mr5" />新增
-					</el-button>
-				</div>
-			</div>
-			<el-table :data="state.tableData.data" v-loading="state.loading" row-key="id">
-				<el-table-column type="index" width="60" label="序号" />
-				<el-table-column prop="displayName" label="角色名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="name" label="角色编码" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="description" label="角色说明" show-overflow-tooltip width="400"></el-table-column>
-				<el-table-column label="人员" show-overflow-tooltip width="80">
-					<template #default="{row}">
-						<el-button title="查看当前角色下的人员" text type="primary" @click="showUserList(row)">{{ row.accountIds.length }}</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column prop="state" label="状态" show-overflow-tooltip width="80"> </el-table-column>
-				<el-table-column prop="lastModificationTime" label="更新时间" show-overflow-tooltip width="170">
-					<template #default="{row}">
-						<span>{{ formatDate(row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" width="260" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onOpenEditRole(row)" title="修改角色信息" v-auth="'system:role:edit'" v-if="!row.isDeleted">
-							修改
-						</el-button>
-						<el-button link type="success" @click="onPermissions(row)" title="分配角色权限" v-auth="'system:role:assign'" v-if="!row.isDeleted">
-							分配权限
-						</el-button>
-						<el-button link type="info" @click="onDataAuth(row)" v-auth="'system:role:dataAuth:query'" title="配置角色数据权限" v-if="!row.isDeleted">
-							数据权限
-						</el-button>
-						<el-button link type="danger" @click="onRowDel(row)" v-auth="'system:role:edit'" title="删除角色" v-if="!row.isDeleted"> 删除 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.tableData.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
-		</div>
+	<div class="system-role-container layout-pd">
+    <el-card shadow="never">
+      <!-- 通用搜索 -->
+      <el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
+        <el-form-item label="是否删除" prop="IsDeleted">
+          <el-select v-model="state.queryParams.IsDeleted" placeholder="请选择是否删除">
+            <el-option v-for="item in state.isDeletedList" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="关键字" prop="Keyword">
+          <el-input v-model="state.queryParams.Keyword" placeholder="角色名称/角色编码" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery" :loading="state.loading" v-waves>
+            <SvgIcon name="ele-Search" class="mr5" />查询
+          </el-button>
+          <el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card shadow="never">
+      <div class="flex-center-between mb20">
+        <p class="table-title">信息列表</p>
+        <div>
+          <el-button type="primary" @click="onOpenAddRole" v-waves v-auth="'system:role:add'">
+            <SvgIcon name="ele-Plus" class="mr5" />新增
+          </el-button>
+        </div>
+      </div>
+      <el-table :data="state.tableData.data" v-loading="state.loading" row-key="id">
+        <el-table-column type="index" width="60" label="序号" />
+        <el-table-column prop="displayName" label="角色名称" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="name" label="角色编码" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="description" label="角色说明" show-overflow-tooltip width="400"></el-table-column>
+        <el-table-column label="人员" show-overflow-tooltip width="80">
+          <template #default="{row}">
+            <el-button title="查看当前角色下的人员" text type="primary" @click="showUserList(row)">{{ row.accountIds.length }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="state" label="状态" show-overflow-tooltip width="80"> </el-table-column>
+        <el-table-column prop="lastModificationTime" label="更新时间" show-overflow-tooltip width="170">
+          <template #default="{row}">
+            <span>{{ formatDate(row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="260" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="onOpenEditRole(row)" title="修改角色信息" v-auth="'system:role:edit'" v-if="!row.isDeleted">
+              修改
+            </el-button>
+            <el-button link type="success" @click="onPermissions(row)" title="分配角色权限" v-auth="'system:role:assign'" v-if="!row.isDeleted">
+              分配权限
+            </el-button>
+            <el-button link type="info" @click="onDataAuth(row)" v-auth="'system:role:dataAuth:query'" title="配置角色数据权限" v-if="!row.isDeleted">
+              数据权限
+            </el-button>
+            <el-button link type="danger" @click="onRowDel(row)" v-auth="'system:role:edit'" title="删除角色" v-if="!row.isDeleted"> 删除 </el-button>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <Empty />
+        </template>
+      </el-table>
+      <!-- 分页 -->
+      <pagination
+          :total="state.tableData.total"
+          v-model:page="state.queryParams.PageIndex"
+          v-model:limit="state.queryParams.PageSize"
+          @pagination="queryList"
+      />
+    </el-card>
 		<role-add ref="roleAddRef" @updateList="handleQuery" />
 		<role-edit ref="roleEditRef" @updateList="handleQuery" />
 		<role-permission ref="rolePermissionRef" @updateList="handleQuery" />

src/views/system/user/index.vue

@@ -32,7 +32,6 @@
 				<!-- 右侧表格 -->
 				<el-col :xs="18" :sm="18" :md="18" :lg="20" :xl="20" class="rightContent">
 					<el-scrollbar class="pr10" ref="rightScrollRef">
-						<div class="flex-column">
 							<el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
 								<el-form-item label="关键字" prop="Keyword">
 									<el-input v-model="state.queryParams.Keyword" placeholder="姓名/电话号码" clearable @keyup.enter="handleQuery" />
@@ -96,7 +95,6 @@
 								v-model:limit="state.queryParams.PageSize"
 								@pagination="getList"
 							/>
-						</div>
 					</el-scrollbar>
 				</el-col>
 			</el-row>
@@ -284,14 +282,6 @@ onActivated(() => {});
 
 	.rightContent {
 		height: 100%;
-		.flex-column {
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-			.el-table {
-				flex: 1;
-			}
-		}
 	}
 
 	:deep(.el-tree-node__content) {