This commit is contained in:
wangzenghua 2025-01-25 02:57:42 +00:00
parent eaffe7571a
commit 6bb2e359da
9 changed files with 21 additions and 373 deletions

View File

@ -3,8 +3,8 @@
"baseUrl": ".",
"jsx": "preserve",
"paths": {
"@/*": ["src/*"],
},
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"],
"exclude": ["node_modules", "dist"]
}

View File

@ -3,7 +3,7 @@
* @Author: zenghua.wang
* @Date: 2023-06-20 11:48:41
* @LastEditors: zenghua.wang
* @LastEditTime: 2025-01-23 16:13:59
* @LastEditTime: 2025-01-25 10:49:41
*/
import { createRouter, createWebHistory } from 'vue-router';
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
@ -50,7 +50,7 @@ export const constantRoutes = [
* @Title notFoundRouter(找不到路由)
*/
export const notFoundRouter = {
path: '/sub-government-affairs-service/:pathMatch(.*)',
path: '/:pathMatch(.*)',
name: 'notFound',
redirect: '/404',
};

View File

@ -1,37 +1,19 @@
import Layout from '@/layouts/index.vue';
export default [
{
path: '/demo',
name: 'demo',
component: Layout,
redirect: '/demo-table',
meta: { title: '案例管理', icon: 'icon-test' },
children: [
{
path: '/demo-table',
component: () => import('@/views/demo/table.vue'),
name: 'table',
meta: { title: '列表', icon: 'Document' },
},
{
path: '/demo-echart',
component: () => import('@/views/demo/echart.vue'),
name: 'echart',
meta: { title: '图表', icon: 'Document' },
},
{
path: '/demo-svg',
component: () => import('@/views/demo/svg.vue'),
name: 'svg',
meta: { title: 'svg图标', icon: 'Document' },
},
{
path: '/demo-editor',
component: () => import('@/views/demo/editor.vue'),
name: 'editor',
meta: { title: '富文本编辑器', icon: 'Document' },
},
],
},
// {
// path: '/demo',
// name: 'demo',
// component: Layout,
// redirect: '/demo-table',
// meta: { title: '案例管理', icon: 'icon-test' },
// children: [
// {
// path: '/demo-table',
// component: () => import('@/views/demo/table.vue'),
// name: 'table',
// meta: { title: '列表', icon: 'Document' },
// },
// ],
// },
];

View File

@ -1,52 +0,0 @@
const colors = ['#4db6ac', '#ffb74d', '#64b5f6', '#e57373', '#9575cd', '#a1887f', '#90a4ae', '#4dd0e1', '#81c784', '#ff8a65'];
export const getData = (() => {
let dottedBase = +new Date();
const barDataSource = [];
const barMultiData = [];
const barLineData = [];
const barLineColors = [];
for (let i = 0; i < 20; i++) {
let obj = { name: '', value: 0 };
const date = new Date((dottedBase += 1000 * 3600 * 24));
obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
obj.value = Math.random() * 200;
barDataSource.push(obj);
}
for (let j = 0; j < 2; j++) {
for (let i = 0; i < 20; i++) {
let obj = { name: '', value: 0, type: 2010 + j + '' };
const date = new Date(dottedBase + 1000 * 3600 * 24 * i);
obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
obj.value = Math.random() * 200;
barMultiData.push(obj);
}
}
const pieData = [
{ value: 335, name: '客服电话' },
{ value: 310, name: '奥迪官网' },
{ value: 234, name: '媒体曝光' },
{ value: 135, name: '质检总局' },
{ value: 105, name: '其他' },
];
const radarData = [
{ value: 75, name: '政治', type: '文综', max: 100 },
{ value: 65, name: '历史', type: '文综', max: 100 },
{ value: 55, name: '地理', type: '文综', max: 100 },
{ value: 74, name: '化学', type: '文综', max: 100 },
{ value: 38, name: '物理', type: '文综', max: 100 },
{ value: 88, name: '生物', type: '文综', max: 100 },
];
for (let j = 0; j < 2; j++) {
for (let i = 0; i < 15; i++) {
let obj = { name: '', value: 0, type: 2010 + j + '', seriesType: j >= 1 ? 'line' : 'bar' };
const date = new Date(dottedBase + 1000 * 3600 * 24 * i);
obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
obj.value = Math.random() * 200;
barLineData.push(obj);
}
barLineColors.push(colors[j]);
}
return { barDataSource, barMultiData, pieData, barLineData, barLineColors, radarData };
})();

View File

@ -1,23 +0,0 @@
<template>
<div class="p-4">
<el-card :bordered="false" style="height: 100%">
<el-tabs v-model="activeKey" class="demo-tabs" @tab-click="tabChange">
<el-tab-pane label="柱状图" name="1">
<custom-echart-bar :chart-data="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }" />
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { getData } from './chartdemo.data';
const activeKey = ref('1');
const { barDataSource } = getData;
//tab
function tabChange(key) {
console.log('切换的key:', key);
}
</script>

View File

@ -1,11 +0,0 @@
<template>
<div style="width: 800px">
<custom-rich-editor :value="state.richText" :read-only="false" />
</div>
</template>
<script setup name="editor">
import { reactive } from 'vue';
const state = reactive({
richText: `<p>这是一个富文本编辑器</p>`,
});
</script>

View File

@ -1,5 +0,0 @@
<template>
<div>svg</div>
<svg-icon name="tree" class-name="icon" size="20" title="tree" />
</template>
<script setup name="table"></script>

View File

@ -1,243 +0,0 @@
<template>
<div class="custom-page">
<avue-crud
v-model="state.form"
v-model:search="state.query"
v-model:page="state.page"
:table-loading="state.loading"
:data="state.data"
:option="state.options"
@refresh-change="refreshChange"
@search-reset="searchChange"
@search-change="searchChange"
@on-load="loadData"
@sort-change="sortChange"
@selection-change="selectionChange"
@row-click="rowClick"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #menu-left>
<el-button type="danger" @click="onDel">批量删除</el-button>
</template>
<template #menu-right>
<el-button type="success" icon="download">导出</el-button>
</template>
<template #key-search="{ column }">
<el-input v-model="state.query[column.prop]" placeholder="请输入关键字" />
</template>
<template #pic="{ row, index }"> {{ row.pic }}-{{ index }} </template>
<template #pic-form="{ column, value }">
<!-- {{ column }}---{{ value }} -->
<el-upload
class="custom-form__uploader"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:show-file-list="false"
:on-success="() => {}"
:before-upload="() => {}"
>
<img v-if="column.pic" :src="column.pic" class="custom-form__uploader__img" />
<el-icon v-else class="custom-form__uploader__icon"><Plus /></el-icon>
</el-upload>
</template>
</avue-crud>
</div>
</template>
<script setup>
// https://avuejs.com/crud/crud-doc.html
import { reactive } from 'vue';
import { useApp } from '@/hooks';
import { sleep } from '@/utils';
const app = useApp();
const state = reactive({
loading: false,
query: {},
form: {},
selection: [],
options: {
// height: 300,
index: true,
selection: true,
// selectionWidth: 100,
align: 'center',
headerAlign: 'center',
// border: true,
// stripe: true,
gridBtn: false,
// printBtn: true,
// excelBtn: true,
defaultSort: {
prop: 'datetime',
order: 'descending',
},
column: [
{
label: '关键字',
prop: 'key',
hide: false,
display: false,
search: true,
searchRules: [
{
required: true,
message: '请输入',
trigger: 'blur',
},
],
},
{
label: '姓名',
prop: 'name',
width: 200,
fixed: true,
search: true,
searchRules: [
{
required: true,
message: '请输入姓名',
trigger: 'blur',
},
],
},
{
label: '性别',
prop: 'sex',
type: 'select',
search: true,
filters: true,
dicData: [
{
label: '男',
value: 1,
},
{
label: '女',
value: 2,
},
],
filterMethod: (value, row, column) => {
return row.sex === value;
},
},
{ label: '日期', prop: 'datetime', type: 'datetime', sortable: true, width: 200 },
{
label: '日期范围',
prop: 'datetimerange',
type: 'datetimerange',
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
hide: true,
width: 200,
},
{
label: '网络字典',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code',
},
dicFlag: true,
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
},
{ label: '地址', prop: 'address', type: 'textarea', rows: 2, overHidden: true, span: 24, width: 200 },
{ label: '图片', prop: 'pic', type: 'upload', slot: true, formslot: true },
],
},
page: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
});
const loadData = async () => {
state.loading = true;
await sleep(500);
state.data = [
{ id: 1, name: '张三', sex: 1, datetime: '2014-12-01 12:00:00', address: '云南省昆明市经开区', code: '530128' },
{ id: 2, name: '李四', sex: 2, datetime: '2025-01-01 12:34:00', address: '云南省昆明市经开区' },
{ id: 3, name: '张三', sex: 1, datetime: '2024-12-01 14:00:00', address: '云南省昆明市经开区云南省昆明市经开区' },
{ id: 4, name: '李四', sex: 2, datetime: '2025-12-01 15:00:00', address: '云南省昆明市经开区' },
];
state.page = {
total: 20,
currentPage: 1,
pageSize: 10,
};
state.loading = false;
};
loadData();
//
const sortChange = (val) => {
console.log('sort==', val);
// app.$message.success(JSON.stringify(val));
};
//
const selectionChange = (rows) => {
console.log('selectionChange=', rows);
state.selection = rows;
};
//
const searchChange = (params, done) => {
console.log('search==', params);
if (done) done();
state.query = params;
state.page.currentPage = 1;
loadData();
app.$message.success('搜索成功');
};
//
const refreshChange = () => {
loadData();
app.$message.success('刷新成功');
};
// row
const rowClick = (row, event, column) => {
app.$message.success(JSON.stringify(row));
};
//
const rowSave = (row, done, loading) => {
// loading.value = true;
console.log('add=', row);
};
//
const rowUpdate = (row, index, done, loading) => {
// loading.value = true;
// done(row);
console.log('update=', row);
};
//
const rowDel = (row, index, done) => {
app
.$confirm(`您确定要删除?`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
console.log('del=', row);
})
.catch(() => {});
};
const onDel = () => {};
</script>

View File

@ -1,6 +1,6 @@
<template>
<div style="width: 100%; height: 100%">
<div>sub-admin</div>
<div>运营服务</div>
</div>
</template>
<script setup name="home"></script>