From a7a9d4eeadc5de8011d7e99a19f18db801a79b2f Mon Sep 17 00:00:00 2001
From: wangzenghua <1048523306@qq.com>
Date: Tue, 25 Mar 2025 07:53:09 +0100
Subject: [PATCH] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/custom-table-tree/index.vue    |  2 +-
 sub-government-affairs-service/package.json   |  1 +
 sub-government-affairs-service/src/main.js    |  2 +
 .../src/plugins/splitpanes.js                 |  7 ++
 .../src/styles/style.scss                     |  4 +
 .../component/landCassification/index.vue     | 86 +++++++++--------
 .../src/views/dict/component/region/index.vue | 93 ++++++++-----------
 7 files changed, 100 insertions(+), 95 deletions(-)
 create mode 100644 sub-government-affairs-service/src/plugins/splitpanes.js

diff --git a/main/src/components/custom-table-tree/index.vue b/main/src/components/custom-table-tree/index.vue
index b891761..e9125ec 100644
--- a/main/src/components/custom-table-tree/index.vue
+++ b/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: {
diff --git a/sub-government-affairs-service/package.json b/sub-government-affairs-service/package.json
index f8c45b6..9206f9e 100644
--- a/sub-government-affairs-service/package.json
+++ b/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"
   },
diff --git a/sub-government-affairs-service/src/main.js b/sub-government-affairs-service/src/main.js
index e4318cb..67a5008 100644
--- a/sub-government-affairs-service/src/main.js
+++ b/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);
diff --git a/sub-government-affairs-service/src/plugins/splitpanes.js b/sub-government-affairs-service/src/plugins/splitpanes.js
new file mode 100644
index 0000000..dca3790
--- /dev/null
+++ b/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);
+};
diff --git a/sub-government-affairs-service/src/styles/style.scss b/sub-government-affairs-service/src/styles/style.scss
index 5ee6df3..07d6b97 100644
--- a/sub-government-affairs-service/src/styles/style.scss
+++ b/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;
+}
diff --git a/sub-government-affairs-service/src/views/dict/component/landCassification/index.vue b/sub-government-affairs-service/src/views/dict/component/landCassification/index.vue
index 9d5d3c2..37fd670 100644
--- a/sub-government-affairs-service/src/views/dict/component/landCassification/index.vue
+++ b/sub-government-affairs-service/src/views/dict/component/landCassification/index.vue
@@ -1,48 +1,54 @@
 <template>
   <div class="custom-page">
     <el-row :gutter="20">
-      <el-col :span="4">
-        <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 }">
-              {{ data.landType }}
-            </div>
-          </template>
-        </custom-table-tree>
-      </el-col>
-      <el-col :span="20">
-        <avue-crud
-          ref="crudRef"
-          v-model="state.form"
-          v-model:search="state.query"
-          v-model:page="state.pageData"
-          :table-loading="state.loading"
-          :data="state.data"
-          :option="state.options"
-          @refresh-change="refreshChange"
-          @search-reset="searchChange"
-          @search-change="searchChange"
-          @selection-change="selectionChange"
-          @current-change="currentChange"
-          @size-change="sizeChange"
-          @row-del="rowDel"
-          @row-save="rowSave"
-          @row-update="rowUpdate"
-        >
-          <template #menu-left>
-            <el-button type="success" icon="download" @click="onExport">导出</el-button>
-          </template>
+      <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 }">
+                  {{ data.landType }}
+                </div>
+              </template>
+            </custom-table-tree>
+          </el-col>
+        </pane>
+        <pane size="84">
+          <el-col>
+            <avue-crud
+              ref="crudRef"
+              v-model="state.form"
+              v-model:search="state.query"
+              v-model:page="state.pageData"
+              :table-loading="state.loading"
+              :data="state.data"
+              :option="state.options"
+              @refresh-change="refreshChange"
+              @search-reset="searchChange"
+              @search-change="searchChange"
+              @selection-change="selectionChange"
+              @current-change="currentChange"
+              @size-change="sizeChange"
+              @row-del="rowDel"
+              @row-save="rowSave"
+              @row-update="rowUpdate"
+            >
+              <template #menu-left>
+                <el-button type="success" icon="download" @click="onExport">导出</el-button>
+              </template>
 
-          <template #status="{ row }">
-            <el-tag v-if="row.status == 1" type="success">启用</el-tag>
-            <el-tag v-if="row.status == 0" type="danger">禁用</el-tag>
-          </template>
+              <template #status="{ row }">
+                <el-tag v-if="row.status == 1" type="success">启用</el-tag>
+                <el-tag v-if="row.status == 0" type="danger">禁用</el-tag>
+              </template>
 
-          <template #menu="scope">
-            <custom-table-operate :actions="state.options.actions" :data="scope" />
-          </template>
-        </avue-crud>
-      </el-col>
+              <template #menu="scope">
+                <custom-table-operate :actions="state.options.actions" :data="scope" />
+              </template>
+            </avue-crud>
+          </el-col>
+        </pane>
+      </splitpanes>
     </el-row>
   </div>
 </template>
diff --git a/sub-government-affairs-service/src/views/dict/component/region/index.vue b/sub-government-affairs-service/src/views/dict/component/region/index.vue
index bf5c372..aabebdc 100644
--- a/sub-government-affairs-service/src/views/dict/component/region/index.vue
+++ b/sub-government-affairs-service/src/views/dict/component/region/index.vue
@@ -1,53 +1,49 @@
 <template>
-  <CustomCard>
-    <div>
-      <el-row :gutter="20">
-        <el-col :span="4">
-          <!-- <el-tree
-            style="max-width: 600px"
-            :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">
-          <avue-crud
-            ref="crudRef"
-            v-model="state.form"
-            v-model:search="state.query"
-            v-model:page="state.pageData"
-            :table-loading="state.loading"
-            :data="state.data"
-            :option="state.options"
-            @refresh-change="refreshChange"
-            @search-reset="searchChange"
-            @search-change="searchChange"
-            @selection-change="selectionChange"
-            @current-change="currentChange"
-            @size-change="sizeChange"
-            @row-del="rowDel"
-          >
-            <template #menu-left>
-              <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
-              <el-button type="success" icon="download" @click="onExport">导出</el-button>
-            </template>
+  <div class="custom-page">
+    <el-row :gutter="20">
+      <splitpanes class="default-theme">
+        <pane size="16">
+          <el-col>
+            <custom-table-tree title="行政区域" :data="typeTree" :option="treeOption" @node-click="handleNodeClick" />
+          </el-col>
+        </pane>
+        <pane size="84">
+          <el-col>
+            <avue-crud
+              ref="crudRef"
+              v-model="state.form"
+              v-model:search="state.query"
+              v-model:page="state.pageData"
+              :table-loading="state.loading"
+              :data="state.data"
+              :option="state.options"
+              @refresh-change="refreshChange"
+              @search-reset="searchChange"
+              @search-change="searchChange"
+              @selection-change="selectionChange"
+              @current-change="currentChange"
+              @size-change="sizeChange"
+              @row-del="rowDel"
+            >
+              <template #menu-left>
+                <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
+                <el-button type="success" icon="download" @click="onExport">导出</el-button>
+              </template>
 
-            <template #menu="scope">
-              <custom-table-operate :actions="state.options.actions" :data="scope" />
-            </template>
-          </avue-crud>
-        </el-col>
-      </el-row>
-    </div>
-  </CustomCard>
+              <template #menu="scope">
+                <custom-table-operate :actions="state.options.actions" :data="scope" />
+              </template>
+            </avue-crud>
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+  </div>
 </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>