feat:优化

main/src/components/custom-table-tree/index.vue

@@ -27,7 +27,7 @@ import { reactive, ref, watch } from 'vue';
 
 const props = defineProps({
   title: { type: String, default: '' },
-  shadow: { type: Boolean, default: true },
+  shadow: { type: Boolean, default: false },
   filter: { type: Boolean, default: false },
   data: { type: Array, default: () => [] },
   option: {

sub-government-affairs-service/package.json

@@ -30,6 +30,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "screenfull": "^6.0.2",
+    "splitpanes": "^4.0.3",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"
   },

sub-government-affairs-service/src/main.js

@@ -19,10 +19,12 @@ import { registerDirective } from './directives';
 import { registerGlobalComponents } from './plugins/globalComponents';
 import { registerElIcons } from './plugins/icon';
 import { registerMicroApps } from './plugins/micro';
+import { registerSplitpanes } from './plugins/splitpanes';
 
 const app = createApp(App);
 app.use(pinia).use(router).use(ElementPlus).use(Avue);
 registerGlobalComponents(app);
 registerElIcons(app);
+registerSplitpanes(app);
 registerDirective(app);
 registerMicroApps(app);

sub-government-affairs-service/src/plugins/splitpanes.js

@@ -0,0 +1,7 @@
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+
+export const registerSplitpanes = (app) => {
+  app.component('Splitpanes', Splitpanes);
+  app.component('Pane', Pane);
+};

sub-government-affairs-service/src/styles/style.scss

@@ -15,3 +15,7 @@
   height: auto;
   max-height: calc(100vh - 130px);
 }
+
+.splitpanes.default-theme .splitpanes__pane {
+  background-color: #fff !important;
+}

sub-government-affairs-service/src/views/dict/component/landCassification/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="custom-page">
     <el-row :gutter="20">
-      <el-col :span="4">
+      <splitpanes class="default-theme">
+        <pane size="16">
+          <el-col>
             <custom-table-tree title="土地用途分类信息" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
               <template #default="{ data }">
                 <div :class="{ 'text-primary': data.id == treeSelected.id || data.id == treeSelected.pId }">
@@ -10,7 +12,9 @@
               </template>
             </custom-table-tree>
           </el-col>
-      <el-col :span="20">
+        </pane>
+        <pane size="84">
+          <el-col>
             <avue-crud
               ref="crudRef"
               v-model="state.form"
@@ -43,6 +47,8 @@
               </template>
             </avue-crud>
           </el-col>
+        </pane>
+      </splitpanes>
     </el-row>
   </div>
 </template>

sub-government-affairs-service/src/views/dict/component/region/index.vue

@@ -1,18 +1,14 @@
 <template>
-  <CustomCard>
+  <div class="custom-page">
-    <div>
     <el-row :gutter="20">
-        <el-col :span="4">
+      <splitpanes class="default-theme">
-          <!-- <el-tree
+        <pane size="16">
-            style="max-width: 600px"
+          <el-col>
-            :data="typeTree"
-            node-key="areaCode"
-            :props="{ children: 'areaChildVOS', label: 'areaName' }"
-            @node-click="handleNodeClick"
-          /> -->
             <custom-table-tree title="行政区域" :data="typeTree" :option="treeOption" @node-click="handleNodeClick" />
           </el-col>
-        <el-col :span="20">
+        </pane>
+        <pane size="84">
+          <el-col>
             <avue-crud
               ref="crudRef"
               v-model="state.form"
@@ -39,15 +35,15 @@
               </template>
             </avue-crud>
           </el-col>
+        </pane>
+      </splitpanes>
     </el-row>
   </div>
-  </CustomCard>
 </template>
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
 import { useApp } from '@/hooks';
 import { CRUD_OPTIONS } from '@/config';
-import CustomCard from '@/components/CustomCard.vue';
 import { useUserStore } from '@/store/modules/user';
 import { getRegion } from '@/apis/index';
 
@@ -55,9 +51,6 @@ const { VITE_APP_BASE_API } = import.meta.env;
 const app = useApp();
 const UserStore = useUserStore();
 
-/* --------------- data --------------- */
-// #region
-
 const crudRef = ref(null);
 const state = reactive({
   loading: false,
@@ -139,9 +132,6 @@ const infoData = reactive({
   name: '',
 });
 
-// #endregion
-
-/* --------------- methods --------------- */
 const loadData = () => {
   //state.loading = true;
   // getAnnualList(state.query)
@@ -256,9 +246,4 @@ const onAdd = () => {
   crudRef.value && crudRef.value.rowAdd();
 };
 const onExport = () => {};
-// #region
-
-// #endregion
 </script>
-
-<style lang="scss" scoped></style>