修改图标，调整字段关联界面

src/api/system/field.ts

@@ -1,10 +1,11 @@
 import request from '@/utils/request'
 
 const url = '/system/field/'
-export const getModelList = () => {
+export const getModelList = (params: { pageNum: number; pageSize: number }) => {
   return request({
     url: url + 'getModelList',
-    method: 'get'
+    method: 'get',
+    params
   })
 }
 

src/assets/styles/sidebar.scss

@@ -4,7 +4,7 @@
     overflow-y: hidden;
     z-index: 1001;
     transition: width 0.28s ease;
-    background-image: var(--base-menu-background);
+    background-color: var(--base-menu-background);
     height: 100%;
     display: flex;
     flex-direction: column;

src/assets/styles/variables.module.scss

@@ -22,10 +22,15 @@ $panGreen: #30b08f;
   --base-login-width: 280px;
 }
 
+$base-menu-background: #324157;
+$base-menu-light-background: #ffffff;
+$base-menu-color: #bfcbd9;
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+
 /***侧边栏深色配置***/
 [data-theme='theme-dark'] {
-  // --base-menu-background: #324157;
-  --base-menu-background: linear-gradient(to right, #243949 0%, #517fa4 100%);
+  --base-menu-background: #324157;
+  // --base-menu-background: linear-gradient(to right, #243949 0%, #517fa4 100%);
   --base-logo-title-color: #ffffff;
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;
@@ -44,3 +49,10 @@ html.cafe {
 html.contrast {
   filter: contrast(2);
 }
+
+:export {
+  menuColor: $base-menu-color;
+  menuLightColor: $base-menu-light-color;
+  menuBackground: $base-menu-background;
+  menuLightBackground: $base-menu-light-background;
+}

src/views/system/rolefields/index.vue

@@ -17,9 +17,15 @@
             <template #header>
               <b>模型</b>
             </template>
-            <el-table ref="modelTable" :data="modelList" height="580" border highlight-current-row @current-change="handleCurrentChange">
+            <el-table ref="modelTable" :data="modelList" border highlight-current-row @current-change="handleCurrentChange">
               <el-table-column prop="fullName" label="模型" />
             </el-table>
+            <pagination
+              v-model:total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :layout="'sizes, pager, jumper'"
+              @pagination="getList" />
           </el-card>
         </el-col>
         <el-col :span="14">
@@ -60,11 +66,22 @@ const goBack = () => {
 }
 const modelTable = ref<InstanceType<typeof ElTable>>()
 const initBtnLoading = ref(false)
+const total = ref(0)
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+})
 const handleInit = async () => {
   initBtnLoading.value = true
-  await initFields()
+  saveBtnLoading.value = true
+  try {
+    await initFields()
+    modal.msgSuccess('初始化完成')
+  } catch (err) {
+    console.error(err)
+  }
   initBtnLoading.value = false
-  modal.msgSuccess('初始化完成')
+  saveBtnLoading.value = false
   getList()
 }
 interface model {
@@ -81,13 +98,18 @@ const modelList = ref<model[]>([])
 const fieldList = ref<field[]>([])
 const getList = async () => {
   cardLoading.value = true
-  const { data } = await getModelList()
-  modelList.value = data
+  try {
+    const { data } = await getModelList(queryParams.value)
+    modelList.value = data.result
+    total.value = data.totalNum
+  } catch (err) {
+    console.error(err)
+  }
   cardLoading.value = false
 }
 
 const currentRow = ref()
-const handleCurrentChange = (val: any) => {
+const handleCurrentChange = async (val: any) => {
   if (val) {
     currentRow.value = val
     handleLoadFieldList()
@@ -106,7 +128,6 @@ const handleLoadFieldList = async () => {
   }
   fieldListLoading.value = false
 }
-
 const fieldListLoading = ref(false)
 const saveBtnLoading = ref(false)
 const handleSave = async () => {
@@ -125,4 +146,14 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.flex {
+  display: flex;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.items-center {
+  align-items: center;
+}
+</style>