feat:优化

This commit is contained in:
wangzenghua 2025-03-25 07:53:09 +01:00
parent 6fc598e35e
commit a7a9d4eead
7 changed files with 100 additions and 95 deletions

View File

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

View File

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

View File

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

View File

@ -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);
};

View File

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

View File

@ -1,48 +1,54 @@
<template> <template>
<div class="custom-page"> <div class="custom-page">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <splitpanes class="default-theme">
<custom-table-tree title="土地用途分类信息" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick"> <pane size="16">
<template #default="{ data }"> <el-col>
<div :class="{ 'text-primary': data.id == treeSelected.id || data.id == treeSelected.pId }"> <custom-table-tree title="土地用途分类信息" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
{{ data.landType }} <template #default="{ data }">
</div> <div :class="{ 'text-primary': data.id == treeSelected.id || data.id == treeSelected.pId }">
</template> {{ data.landType }}
</custom-table-tree> </div>
</el-col> </template>
<el-col :span="20"> </custom-table-tree>
<avue-crud </el-col>
ref="crudRef" </pane>
v-model="state.form" <pane size="84">
v-model:search="state.query" <el-col>
v-model:page="state.pageData" <avue-crud
:table-loading="state.loading" ref="crudRef"
:data="state.data" v-model="state.form"
:option="state.options" v-model:search="state.query"
@refresh-change="refreshChange" v-model:page="state.pageData"
@search-reset="searchChange" :table-loading="state.loading"
@search-change="searchChange" :data="state.data"
@selection-change="selectionChange" :option="state.options"
@current-change="currentChange" @refresh-change="refreshChange"
@size-change="sizeChange" @search-reset="searchChange"
@row-del="rowDel" @search-change="searchChange"
@row-save="rowSave" @selection-change="selectionChange"
@row-update="rowUpdate" @current-change="currentChange"
> @size-change="sizeChange"
<template #menu-left> @row-del="rowDel"
<el-button type="success" icon="download" @click="onExport">导出</el-button> @row-save="rowSave"
</template> @row-update="rowUpdate"
>
<template #menu-left>
<el-button type="success" icon="download" @click="onExport">导出</el-button>
</template>
<template #status="{ row }"> <template #status="{ row }">
<el-tag v-if="row.status == 1" type="success">启用</el-tag> <el-tag v-if="row.status == 1" type="success">启用</el-tag>
<el-tag v-if="row.status == 0" type="danger">禁用</el-tag> <el-tag v-if="row.status == 0" type="danger">禁用</el-tag>
</template> </template>
<template #menu="scope"> <template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" /> <custom-table-operate :actions="state.options.actions" :data="scope" />
</template> </template>
</avue-crud> </avue-crud>
</el-col> </el-col>
</pane>
</splitpanes>
</el-row> </el-row>
</div> </div>
</template> </template>

View File

@ -1,53 +1,49 @@
<template> <template>
<CustomCard> <div class="custom-page">
<div> <el-row :gutter="20">
<el-row :gutter="20"> <splitpanes class="default-theme">
<el-col :span="4"> <pane size="16">
<!-- <el-tree <el-col>
style="max-width: 600px" <custom-table-tree title="行政区域" :data="typeTree" :option="treeOption" @node-click="handleNodeClick" />
:data="typeTree" </el-col>
node-key="areaCode" </pane>
:props="{ children: 'areaChildVOS', label: 'areaName' }" <pane size="84">
@node-click="handleNodeClick" <el-col>
/> --> <avue-crud
<custom-table-tree title="行政区域" :data="typeTree" :option="treeOption" @node-click="handleNodeClick" /> ref="crudRef"
</el-col> v-model="state.form"
<el-col :span="20"> v-model:search="state.query"
<avue-crud v-model:page="state.pageData"
ref="crudRef" :table-loading="state.loading"
v-model="state.form" :data="state.data"
v-model:search="state.query" :option="state.options"
v-model:page="state.pageData" @refresh-change="refreshChange"
:table-loading="state.loading" @search-reset="searchChange"
:data="state.data" @search-change="searchChange"
:option="state.options" @selection-change="selectionChange"
@refresh-change="refreshChange" @current-change="currentChange"
@search-reset="searchChange" @size-change="sizeChange"
@search-change="searchChange" @row-del="rowDel"
@selection-change="selectionChange" >
@current-change="currentChange" <template #menu-left>
@size-change="sizeChange" <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
@row-del="rowDel" <el-button type="success" icon="download" @click="onExport">导出</el-button>
> </template>
<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"> <template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" /> <custom-table-operate :actions="state.options.actions" :data="scope" />
</template> </template>
</avue-crud> </avue-crud>
</el-col> </el-col>
</el-row> </pane>
</div> </splitpanes>
</CustomCard> </el-row>
</div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { useApp } from '@/hooks'; import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config'; import { CRUD_OPTIONS } from '@/config';
import CustomCard from '@/components/CustomCard.vue';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { getRegion } from '@/apis/index'; import { getRegion } from '@/apis/index';
@ -55,9 +51,6 @@ const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp(); const app = useApp();
const UserStore = useUserStore(); const UserStore = useUserStore();
/* --------------- data --------------- */
// #region
const crudRef = ref(null); const crudRef = ref(null);
const state = reactive({ const state = reactive({
loading: false, loading: false,
@ -139,9 +132,6 @@ const infoData = reactive({
name: '', name: '',
}); });
// #endregion
/* --------------- methods --------------- */
const loadData = () => { const loadData = () => {
//state.loading = true; //state.loading = true;
// getAnnualList(state.query) // getAnnualList(state.query)
@ -256,9 +246,4 @@ const onAdd = () => {
crudRef.value && crudRef.value.rowAdd(); crudRef.value && crudRef.value.rowAdd();
}; };
const onExport = () => {}; const onExport = () => {};
// #region
// #endregion
</script> </script>
<style lang="scss" scoped></style>