gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除废弃文件

Browse Source
This commit is contained in:
zjl 2024-09-25 10:49:51 +08:00
parent 439924715b
commit fec960649e
59 changed files with 12 additions and 7474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
mock/_createProductionServer.ts
View File

@ -1,18 +0,0 @@
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
const modules: any = import.meta.glob('./**/*.ts', { eager: true });
const mockModules: any[] = [];
Object.keys(modules).forEach((key) => {
if (key.includes('/_')) {
return;
}
mockModules.push(...modules[key].default);
});
/**
* Used in a production environment. Need to manually import all modules
*/
export function setupProdMockServer() {
createProdMockServer(mockModules);
}

73
mock/_util.ts
View File

@ -1,73 +0,0 @@
import Mock from 'mockjs';
export function resultSuccess(result, { message = 'ok' } = {}) {
return Mock.mock({
code: 200,
result,
message,
type: 'success',
});
}
export function resultPageSuccess<T = any>(
page: number,
pageSize: number,
list: T[],
{ message = 'ok' } = {},
) {
const pageData = pagination(page, pageSize, list);
return {
...resultSuccess({
page,
pageSize,
pageCount: list.length,
list: pageData,
}),
message,
};
}
export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
return {
code,
result,
message,
type: 'error',
};
}
export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
const offset = (pageNo - 1) * Number(pageSize);
const ret =
offset + Number(pageSize) >= array.length
? array.slice(offset, array.length)
: array.slice(offset, offset + Number(pageSize));
return ret;
}
/**
* @param {Number} times 回调函数需要执行的次数
* @param {Function} callback 回调函数
*/
export function doCustomTimes(times: number, callback: any) {
let i = -1;
while (++i < times) {
callback(i);
}
}
export interface requestParams {
method: string;
body: any;
headers?: { token?: string };
query: any;
}
/**
* @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
*
*/
export function getRequestToken({ headers }: requestParams): string | undefined {
return headers?.token;
}

96
mock/comtemp/article.ts
View File

@ -1,96 +0,0 @@
import { Random } from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_util';
const avatarList = [
'https://img.baidu.com/assets/avatar/avatar-1.jpg',
'https://img.baidu.com/assets/avatar/avatar-2.jpg',
'https://img.baidu.com/assets/avatar/avatar-3.jpg',
'https://img.baidu.com/assets/avatar/avatar-4.jpg',
'https://img.baidu.com/assets/avatar/avatar-5.jpg',
'https://img.baidu.com/assets/avatar/avatar-6.jpg',
];
const coverList = [
'https://img.baidu.com/assets/article/1.jpeg',
'https://img.baidu.com/assets/article/2.jpeg',
'https://img.baidu.com/assets/article/3.jpeg',
'https://img.baidu.com/assets/article/4.jpg',
'https://img.baidu.com/assets/article/5.jpeg',
'https://img.baidu.com/assets/article/6.jpeg',
'https://img.baidu.com/assets/article/7.jpeg',
'https://img.baidu.com/assets/article/8.jpeg',
'https://img.baidu.com/assets/article/9.jpeg',
'https://img.baidu.com/assets/article/10.jpeg',
];
const articleList = (pageSize) => {
const result: any[] = [];
doCustomTimes(pageSize, () => {
result.push({
id: '@integer(10,999999)',
title: Random.csentence(),
tags: getRandomArrayElements(
[
'有限理性',
'智商',
'情绪智力',
'心理理论',
'多动症',
'抑郁症',
'梦的解析',
'催眠',
'投射测验',
'习惯化范式',
],
2,
4,
),
summary: Random.cparagraph(),
avatar: Random.pick(avatarList),
cover: Random.pick(coverList),
author: '@cname()',
collection: Random.natural(10, 999),
like: Random.natural(10, 999),
comment: Random.natural(10, 999),
date: `@date('yyyy-MM-dd')`,
'no|100000-10000000': 100000,
});
});
return result;
};
export default [
{
url: '/api/article/list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 1 } = query;
const list = articleList(Number(pageSize));
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: 60,
itemCount: 60 * Number(pageSize),
list,
});
},
},
];
//从数组中取出指定个数的元素
function getRandomArrayElements(arr, start, end) {
const count = Math.floor(Math.random() * (end - start) + start);
const shuffled = arr.slice(0);
let i = arr.length;
const min = i - count;
let temp: any;
let index: number;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}

34
mock/comtemp/category.ts
View File

@ -1,34 +0,0 @@
import { Random } from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_util';
const categoryList = (pageSize) => {
const result: any[] = [];
doCustomTimes(pageSize, () => {
result.push({
id: '@integer(10,999999)',
'no|100000-10000000': 100000,
name: `分类${Random.cword('零一二三四五六七八九十')}`,
});
});
return result;
};
export default [
//分类列表
{
url: '/api/category/list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 30 } = query;
const list = categoryList(Number(pageSize));
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: 60,
itemCount: 60 * Number(pageSize),
list,
});
},
},
];

52
mock/comtemp/make.ts
View File

@ -1,52 +0,0 @@
import { Random } from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_util';
const avatarList = [
'https://img.baidu.com/assets/avatar/avatar-1.jpg',
'https://img.baidu.com/assets/avatar/avatar-2.jpg',
'https://img.baidu.com/assets/avatar/avatar-3.jpg',
'https://img.baidu.com/assets/avatar/avatar-4.jpg',
'https://img.baidu.com/assets/avatar/avatar-5.jpg',
'https://img.baidu.com/assets/avatar/avatar-6.jpg',
];
const makeList = (pageSize) => {
const result: any[] = [];
doCustomTimes(pageSize, () => {
result.push({
id: '@integer(10,999999)',
doctor: '@cname()',
avatar: Random.pick(avatarList),
subject: Random.pick([
'中医内科',
'中医外科',
'中医儿科',
'中医妇科',
'中医针灸科',
'中医五官科',
'中医骨伤科',
]),
date: Random.datetime(),
});
});
return result;
};
export default [
{
url: '/api/make/list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 1 } = query;
const list = makeList(Number(pageSize));
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: 60,
itemCount: 60 * Number(pageSize),
list,
});
},
},
];

104
mock/comtemp/video.ts
View File

@ -1,104 +0,0 @@
import { Random } from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_util';
const avatargroupList = [
{
name: '张三',
src: 'https://img.baidu.com/assets/avatar/avatar-1.jpg',
},
{
name: '李四',
src: 'https://img.baidu.com/assets/avatar/avatar-2.jpg',
},
{
name: '王五',
src: 'https://img.baidu.com/assets/avatar/avatar-3.jpg',
},
{
name: '赵六',
src: 'https://img.baidu.com/assets/avatar/avatar-4.jpg',
},
{
name: '七仔',
src: 'https://img.baidu.com/assets/avatar/avatar-5.jpg',
},
];
const coverList = [
'https://img.baidu.com/assets/article/1.jpeg',
'https://img.baidu.com/assets/article/2.jpeg',
'https://img.baidu.com/assets/article/3.jpeg',
'https://img.baidu.com/assets/article/4.jpg',
'https://img.baidu.com/assets/article/5.jpeg',
'https://img.baidu.com/assets/article/6.jpeg',
'https://img.baidu.com/assets/article/7.jpeg',
'https://img.baidu.com/assets/article/8.jpeg',
'https://img.baidu.com/assets/article/9.jpeg',
'https://img.baidu.com/assets/article/10.jpeg',
];
const videoList = (pageSize) => {
const result: any[] = [];
doCustomTimes(pageSize, () => {
result.push({
id: '@integer(10,999999)',
title: Random.pick([
'TTT培训-企业内训师（TTT）',
'卓越管理-打造高效执行力',
'卓越领导力-目标管理与计划执行',
'九型人格与管理应用',
'深刻理解激励辅导下属的内涵及价值，并积极有效的改变辅导的观念与...',
'裂变-创新时代卓越领导艺术与实践',
]),
summary: Random.pick([
'帮助企业内部培训师充分认识自己的角色和任务，树立培训师的职业形...',
'向复杂的大型机构客户销售产品和方案的销售方法论',
'分析众多真实、鲜活的挑战性的销售案例，结合客户购买的6个心理周期...',
'了解大客户销售中客户的决策方式，购买特点，行为心理，有针对性地...',
'没有搞不定的订单，只有不会成交的销售。本课程将教给您：用头脑做...',
'精准销售模式是以企业现有销售团队为基础，通过高层推动，重新梳理...',
]),
avatargroup: getRandomArrayElements(avatargroupList, 2, 5),
cover: Random.pick(coverList),
viewingtimes: Random.natural(10, 999),
date: `@date('yyyy-MM-dd')`,
});
});
return result;
};
export default [
{
url: '/api/video/list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 1 } = query;
const list = videoList(Number(pageSize));
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: 60,
itemCount: 60 * Number(pageSize),
list,
});
},
},
];
//从数组中取出指定个数的元素
function getRandomArrayElements(arr, start, end) {
const count = Math.floor(Math.random() * (end - start) + start);
const shuffled = arr.slice(0);
let i = arr.length;
const min = i - count;
let temp: any;
let index: number;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}

44
mock/dashboard/console.ts
View File

@ -1,44 +0,0 @@
import { Random } from 'mockjs';
import { resultSuccess } from '../_util';
const consoleInfo = {
//访问量
visits: {
dayVisits: Random.float(10000, 99999, 2, 2),
rise: Random.float(10, 99),
decline: Random.float(10, 99),
amount: Random.float(99999, 999999, 3, 5),
},
//销售额
saleroom: {
weekSaleroom: Random.float(10000, 99999, 2, 2),
amount: Random.float(99999, 999999, 2, 2),
degree: Random.float(10, 99),
},
//订单量
orderLarge: {
weekLarge: Random.float(10000, 99999, 2, 2),
rise: Random.float(10, 99),
decline: Random.float(10, 99),
amount: Random.float(99999, 999999, 2, 2),
},
//成交额度
volume: {
weekLarge: Random.float(10000, 99999, 2, 2),
rise: Random.float(10, 99),
decline: Random.float(10, 99),
amount: Random.float(99999, 999999, 2, 2),
},
};
export default [
//主控台 卡片数据
{
url: '/api/dashboard/console',
timeout: 1000,
method: 'get',
response: () => {
return resultSuccess(consoleInfo);
},
},
];

153
mock/region/region.ts
View File

@ -1,153 +0,0 @@
import { resultSuccess } from '../_util';
const regionList = [
{
id: 1,
name: '广东省',
parentId: null,
depth: 1,
},
{
id: 2,
name: '江西省',
parentId: null,
depth: 1,
},
{
id: 3,
name: '浙江省',
parentId: null,
depth: 1,
},
];
const subRegionList = [
{
id: 11,
name: '深圳市',
parentId: 1,
depth: 2,
},
{
id: 111,
name: '宝安区',
parentId: 11,
depth: 3,
},
{
id: 112,
name: '南山区',
parentId: 11,
depth: 3,
},
{
id: 22,
name: '广州市',
parentId: 1,
depth: 2,
},
{
id: 221,
name: '花都区',
parentId: 22,
depth: 3,
},
{
id: 222,
name: '白云区',
parentId: 22,
depth: 3,
},
{
id: 33,
name: '萍乡市',
parentId: 2,
depth: 2,
},
{
id: 331,
name: '上栗县',
parentId: 33,
depth: 3,
},
{
id: 332,
name: '安源区',
parentId: 33,
depth: 3,
},
{
id: 44,
name: '宜春市',
parentId: 2,
depth: 2,
},
{
id: 441,
name: '袁州区',
parentId: 44,
depth: 3,
},
{
id: 442,
name: '上高县',
parentId: 44,
depth: 3,
},
{
id: 55,
name: '杭州市',
parentId: 3,
depth: 2,
},
{
id: 551,
name: '上城区',
parentId: 55,
depth: 3,
},
{
id: 552,
name: '下城区',
parentId: 55,
depth: 3,
},
{
id: 66,
name: '温州市',
parentId: 3,
depth: 2,
},
{
id: 661,
name: '龙湾区',
parentId: 66,
depth: 3,
},
{
id: 662,
name: '平阳县',
parentId: 66,
depth: 3,
},
];
export default [
{
url: '/api/area/getParent',
timeout: 1000,
method: 'get',
response: () => {
return resultSuccess(regionList);
},
},
{
url: '/api/area/findByParentId',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { parentId } = query;
return resultSuccess(subRegionList.filter((item) => item.parentId === parseInt(parentId)));
},
},
];

31
mock/select/select.ts
View File

@ -1,31 +0,0 @@
import { resultSuccess } from '../_util';
const classifyList = [
{
label: '新品',
value: 'new',
},
{
label: '爆款',
value: 'hot',
},
{
label: '推荐',
value: 'rec',
},
{
label: '促销',
value: 'promotion',
},
];
export default [
{
url: '/api/classifyList',
timeout: 1000,
method: 'get',
response: () => {
return resultSuccess(classifyList);
},
},
];

151
mock/system/dictionary.ts
View File

@ -1,151 +0,0 @@
import { resultSuccess } from '../_util';
const dictionaryList = [
{
id: '@integer(10,9999)',
label: '预约事项',
key: 'makeMatter',
children: [
{
id: '@integer(10,9999)',
label: '初次预约',
key: 'theMake',
},
{
id: '@integer(10,9999)',
label: '多次预约',
key: 'towMake',
},
],
},
{
id: '@integer(10,9999)',
label: '注册来源',
key: 'registeredSource',
},
];
const dictionaryItems = () => {
return [
{
key: 'registeredSource',
values: [
{
id: '@integer(10,9999)',
value: 'baidu',
label: '百度',
'order|1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
},
{
id: '@integer(10,9999)',
value: 'weibo',
label: '微博',
'order|1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
},
{
id: '@integer(10,9999)',
value: 'weixin',
label: '微信',
'order|1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
},
],
},
{
key: 'theMake',
parentKey: 'makeMatter',
values: [
{
id: '@integer(10,9999)',
value: 'examine',
label: '检查',
'order|1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
},
{
id: '@integer(10,9999)',
value: 'tooth',
label: '拔牙',
'order|1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
},
],
},
{
key: 'towMake',
parentKey: 'makeMatter',
values: [
{
id: '@integer(10,9999)',
value: 'take',
label: '拆线',
'order|1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
},
{
id: '@integer(10,9999)',
value: 'periodontal',
label: '牙周',
'order|1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
},
],
},
];
};
const dictionaryInfo = (_, key: string) => {
const list: any[] = [];
dictionaryItems().forEach((item: any) => {
if (item.key === key || item.parentKey === key) {
list.push(item as any);
}
});
const valuesList: any[] = [];
list.forEach((item: any) => {
item.values.map((values) => {
valuesList.push(values);
});
});
return valuesList;
};
export default [
//字典列表
{
url: '/api/dictionary/list',
timeout: 1000,
method: 'get',
response: () => {
return resultSuccess(dictionaryList);
},
},
//字典详情
{
url: '/api/dictionary/info',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 10, key, keywords } = query;
let list = dictionaryInfo(Number(pageSize), key);
//实现搜索筛选
if (keywords) {
list = list.filter((item) => {
return item.label.indexOf(keywords) != -1;
});
}
const count =
list.length > Number(pageSize) ? Math.ceil(list.length / Number(pageSize)) : list.length;
const itemCount = count > Number(pageSize) ? count * Number(pageSize) : count;
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: count,
itemCount,
list,
});
},
},
];

89
mock/system/menu.ts
View File

@ -1,89 +0,0 @@
import { resultSuccess } from '../_util';
const menuList = () => {
const result: any[] = [
{
label: 'Dashboard',
key: 'dashboard',
type: 1,
subtitle: 'dashboard',
openType: 1,
auth: 'dashboard',
path: '/dashboard',
children: [
{
label: '主控台',
key: 'console',
type: 1,
subtitle: 'console',
openType: 1,
auth: 'console',
path: '/dashboard/console',
},
{
label: '工作台',
key: 'workplace',
type: 1,
subtitle: 'workplace',
openType: 1,
auth: 'workplace',
path: '/dashboard/workplace',
},
],
},
{
label: '表单管理',
key: 'form',
type: 1,
subtitle: 'form',
openType: 1,
auth: 'form',
path: '/form',
children: [
{
label: '基础表单',
key: 'basic-form',
type: 1,
subtitle: 'basic-form',
openType: 1,
auth: 'basic-form',
path: '/form/basic-form',
},
{
label: '分步表单',
key: 'step-form',
type: 1,
subtitle: 'step-form',
openType: 1,
auth: 'step-form',
path: '/form/step-form',
},
{
label: '表单详情',
key: 'detail',
type: 1,
subtitle: 'detail',
openType: 1,
auth: 'detail',
path: '/form/detail',
},
],
},
];
return result;
};
export default [
{
url: '/api/menu/list',
timeout: 1000,
method: 'get',
response: () => {
const list = menuList();
return resultSuccess({
list,
});
},
},
];

46
mock/system/role.ts
View File

@ -1,46 +0,0 @@
import { resultSuccess, doCustomTimes } from '../_util';
function getMenuKeys() {
const keys = ['dashboard', 'console', 'workplace', 'basic-form', 'step-form', 'detail'];
const newKeys: string[] = [];
doCustomTimes(parseInt(Math.random() * 6), () => {
const key: string = keys[Math.floor(Math.random() * keys.length)];
newKeys.push(key);
});
return Array.from(new Set(newKeys));
}
const roleList = (pageSize) => {
const result: any[] = [];
doCustomTimes(pageSize, () => {
result.push({
id: '@integer(10,100)',
name: '@cname()',
explain: '@cname()',
isDefault: '@boolean()',
menu_keys: getMenuKeys(),
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
'status|1': ['normal', 'enable', 'disable'],
});
});
return result;
};
export default [
{
url: '/api/role/list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 10 } = query;
const list = roleList(Number(pageSize));
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: 30,
itemCount: 30 * Number(pageSize),
list,
});
},
},
];

43
mock/table/list.ts
View File

@ -1,43 +0,0 @@
import { Random } from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_util';
const tableList = (pageSize) => {
const result: any[] = [];
doCustomTimes(pageSize, () => {
result.push({
id: '@integer(10,999999)',
'no|100000-10000000': 100000,
name: '@cname()',
avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
address: '@city()',
beginTime: '@datetime',
endTime: '@datetime',
'status|1': [true, false],
date: `@date('yyyy-MM-dd')`,
time: `@time('HH:mm')`,
});
});
return result;
};
export default [
//表格数据列表
{
url: '/api/table/list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 10, name } = query;
const list = tableList(Number(pageSize));
//并非真实，只是为了模拟搜索结果
const count = name ? 30 : 60;
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: count,
itemCount: count * Number(pageSize),
list,
});
},
},
];

269
mock/table/select.ts
View File

@ -1,269 +0,0 @@
import { resultSuccess } from '../_util';
const tableList = (page) => {
return page === 1
? [
{
id: 659962,
no: 6965078,
name: '文洋',
avatar: 'http://dummyimage.com/400x400/79f29b/f27979&text=Joseph',
address: '台北市',
beginTime: '1982-08-20 04:10:02',
endTime: '1975-01-12 02:09:40',
status: false,
date: '1984-11-08',
time: '21:40',
},
{
id: 818440,
no: 2032345,
name: '冯涛',
avatar: 'http://dummyimage.com/400x400/799df2/c0f279&text=Donna',
address: '九龙',
beginTime: '1991-12-29 20:44:54',
endTime: '2002-05-27 12:09:35',
status: false,
date: '1993-11-04',
time: '18:56',
},
{
id: 212788,
no: 9668086,
name: '卢桂英',
avatar: 'http://dummyimage.com/400x400/f279e3/79f2dd&text=Sarah',
address: '毕节市',
beginTime: '2006-02-04 17:37:27',
endTime: '2007-03-13 12:15:59',
status: false,
date: '1984-05-07',
time: '13:47',
},
{
id: 23986,
no: 6841254,
name: '董秀英',
avatar: 'http://dummyimage.com/400x400/f2ba79/9679f2&text=Deborah',
address: '香港岛',
beginTime: '2016-03-28 12:39:23',
endTime: '1990-08-19 05:20:46',
status: true,
date: '1997-04-20',
time: '05:26',
},
{
id: 318041,
no: 1476802,
name: '周秀兰',
avatar: 'http://dummyimage.com/400x400/7ef279/f279a2&text=Laura',
address: '阿里地区',
beginTime: '2016-08-04 23:48:29',
endTime: '2005-05-02 09:28:46',
status: true,
date: '1997-11-14',
time: '13:42',
},
{
id: 228323,
no: 8883045,
name: '吕超',
avatar: 'http://dummyimage.com/400x400/79c5f2/e8f279&text=Linda',
address: '内江市',
beginTime: '1989-02-22 14:08:54',
endTime: '2009-10-30 23:04:49',
status: true,
date: '2016-07-19',
time: '05:51',
},
{
id: 5347,
no: 7551218,
name: '黎丽',
avatar: 'http://dummyimage.com/400x400/d879f2/79f2b4&text=William',
address: '辽源市',
beginTime: '1974-07-29 13:43:47',
endTime: '2012-08-27 23:27:05',
status: true,
date: '1976-07-14',
time: '22:50',
},
{
id: 287642,
no: 4410781,
name: '孙秀兰',
avatar: 'http://dummyimage.com/400x400/f29179/7984f2&text=Gary',
address: '汉中市',
beginTime: '1979-12-06 09:22:28',
endTime: '1972-06-20 02:53:21',
status: false,
date: '1988-01-01',
time: '00:01',
},
{
id: 352276,
no: 1342992,
name: '谢涛',
avatar: 'http://dummyimage.com/400x400/a7f279/f279ca&text=Daniel',
address: '苏州市',
beginTime: '2019-10-29 20:53:32',
endTime: '1977-09-17 01:41:39',
status: true,
date: '1970-06-09',
time: '22:39',
},
{
id: 509832,
no: 8171697,
name: '邵杰',
avatar: 'http://dummyimage.com/400x400/79eef2/f2d379&text=Paul',
address: '巢湖市',
beginTime: '1994-04-07 06:46:03',
endTime: '1974-03-16 01:28:24',
status: false,
date: '1988-11-11',
time: '19:10',
},
]
: [
{
id: 601173,
no: 9911085,
name: '乔涛',
avatar: 'http://dummyimage.com/400x400/79e3f2/f2dd79&text=Jennifer',
address: '阳泉市',
beginTime: '1997-03-14 06:52:04',
endTime: '1989-05-23 13:14:14',
status: false,
date: '1988-12-15',
time: '04:42',
},
{
id: 328638,
no: 720053,
name: '郝明',
avatar: 'http://dummyimage.com/400x400/ba79f2/79f296&text=Anthony',
address: '吴忠市',
beginTime: '1991-09-19 21:15:47',
endTime: '1977-04-04 06:45:09',
status: false,
date: '2014-08-30',
time: '14:41',
},
{
id: 274363,
no: 3776909,
name: '贾洋',
avatar: 'http://dummyimage.com/400x400/f2797e/79a2f2&text=Sandra',
address: '吉安市',
beginTime: '2011-06-06 01:50:26',
endTime: '2000-03-29 13:02:10',
status: true,
date: '1985-11-10',
time: '01:11',
},
{
id: 627841,
no: 4226993,
name: '尹磊',
avatar: 'http://dummyimage.com/400x400/c5f279/f279e8&text=Ruth',
address: '新界',
beginTime: '1972-01-22 02:49:21',
endTime: '1994-12-10 14:33:11',
status: true,
date: '2017-05-29',
time: '18:28',
},
{
id: 853120,
no: 8772153,
name: '尹静',
avatar: 'http://dummyimage.com/400x400/79f2d8/f2b579&text=Lisa',
address: '抚顺市',
beginTime: '2018-10-31 07:40:52',
endTime: '2011-08-24 18:50:10',
status: true,
date: '1984-10-09',
time: '06:00',
},
{
id: 973847,
no: 8594801,
name: '毛涛',
avatar: 'http://dummyimage.com/400x400/9179f2/83f279&text=Maria',
address: '钦州市',
beginTime: '1970-05-10 20:00:00',
endTime: '1986-12-10 12:23:18',
status: true,
date: '1981-01-31',
time: '09:39',
},
{
id: 366765,
no: 9291682,
name: '方秀英',
avatar: 'http://dummyimage.com/400x400/f279a7/79caf2&text=Laura',
address: '昌都地区',
beginTime: '1980-05-12 22:54:51',
endTime: '1998-11-13 16:11:40',
status: true,
date: '1996-02-23',
time: '00:33',
},
{
id: 145082,
no: 4062636,
name: '范艳',
avatar: 'http://dummyimage.com/400x400/edf279/d379f2&text=Angela',
address: '连江县',
beginTime: '2001-03-19 23:58:41',
endTime: '2003-02-02 07:36:33',
status: false,
date: '2018-03-01',
time: '11:44',
},
{
id: 175542,
no: 9194674,
name: '刘秀英',
avatar: 'http://dummyimage.com/400x400/79f2af/f28c79&text=Maria',
address: '唐山市',
beginTime: '2018-05-07 16:06:35',
endTime: '2000-04-26 12:54:37',
status: false,
date: '1999-07-16',
time: '15:37',
},
{
id: 647222,
no: 3466012,
name: '尹艳',
avatar: 'http://dummyimage.com/400x400/7989f2/acf279&text=Brenda',
address: '离岛',
beginTime: '1994-12-25 10:58:49',
endTime: '1978-05-31 23:23:37',
status: false,
date: '2018-10-16',
time: '19:58',
},
];
};
export default [
//表格数据列表
{
url: '/api/table/select',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 3 } = query;
const list = tableList(Number(page));
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: 2,
itemCount: 20,
list,
});
},
},
];

116
mock/user/menus.ts
View File

@ -1,116 +0,0 @@
import { resultSuccess } from '../_util';
//超级管理员
const adminMenusList = [
{
path: '/dashboard',
name: 'Dashboard',
component: 'LAYOUT',
redirect: '/dashboard/console',
meta: {
icon: 'DashboardOutlined',
title: 'Dashboard',
},
children: [
{
path: 'console',
name: 'dashboard_console',
component: '/dashboard/console/console',
meta: {
title: '主控台',
},
},
{
path: 'monitor',
name: 'dashboard_monitor',
component: '/dashboard/monitor/monitor',
meta: {
title: '监控页',
},
},
{
path: 'workplace',
name: 'dashboard_workplace',
component: '/dashboard/workplace/workplace',
meta: {
hidden: true,
title: '工作台',
},
},
],
},
{
path: '/list',
name: 'List',
component: 'LAYOUT',
redirect: '/list/basic-list',
meta: {
icon: 'TableOutlined',
title: '列表页面',
},
children: [
{
path: 'basic-list',
name: 'basic-list',
component: '/list/basicList/index',
meta: {
title: '基础列表',
},
},
],
},
];
//普通管理员
const ordinaryMenusList = [
{
path: '/dashboard',
name: 'Dashboard',
component: 'LAYOUT',
redirect: '/dashboard/console',
meta: {
icon: 'DashboardOutlined',
title: 'Dashboard',
},
children: [
{
path: 'console',
name: 'dashboard_console',
component: '/dashboard/console/console',
meta: {
title: '主控台',
},
},
{
path: 'monitor',
name: 'dashboard_monitor',
component: '/dashboard/monitor/monitor',
meta: {
title: '监控页',
},
},
{
path: 'workplace',
name: 'dashboard_workplace',
component: '/dashboard/workplace/workplace',
meta: {
hidden: true,
title: '工作台',
},
},
],
},
];
export default [
{
url: '/api/menus',
timeout: 1000,
method: 'get',
response: () => {
//此处随机了，为了模拟不同角色权限
const randomNum = Math.floor(Math.random() * 2 + 1);
return randomNum === 1 ? resultSuccess(adminMenusList) : resultSuccess(ordinaryMenusList);
},
},
];

115
mock/user/user.ts
View File

@ -1,115 +0,0 @@
import Mock from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_util';
const Random = Mock.Random;
const token = Random.string('upper', 32, 32);
//超级管理员
const adminPermissions = [
{
label: '主控台',
value: 'dashboard_console',
},
{
label: '监控页',
value: 'dashboard_monitor',
},
{
label: '工作台',
value: 'dashboard_workplace',
},
{
label: '基础列表',
value: 'basic_list',
},
];
//普通管理员
const ordinaryPermissions = [
{
label: '主控台',
value: 'dashboard_console',
},
{
label: '监控页',
value: 'dashboard_monitor',
},
{
label: '工作台',
value: 'dashboard_workplace',
},
];
const adminInfo = {
userId: '1',
username: 'admin',
realName: 'Admin',
avatar: Random.image(),
desc: 'manager',
password: Random.string('upper', 4, 16),
token,
role_type: 1, // 1 超级管理员 2 普通管理员
permissions: [], // 权限集合
};
const userList = (pageSize) => {
const result: any[] = [];
doCustomTimes(pageSize, () => {
result.push({
id: '@integer(10,9999)',
username: '@cname()',
avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
account: 'M086611',
mobile: `188@integer(1000,9999)9999`,
email: '735@integer(1000,9999)02@qq.com',
'gender|1': [1, 2],
'status|1': ['normal', 'disable'],
'role|1': ['普通用户', '推广管理员', '发货管理员', '财务管理员'],
create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
});
});
return result;
};
export default [
{
url: '/api/login',
timeout: 1000,
method: 'post',
response: () => {
return resultSuccess({ token });
},
},
{
url: '/api/index/getUser',
timeout: 1000,
method: 'get',
response: () => {
// const token = getRequestToken(request);
// if (!token) return resultError('Invalid token');
//此处随机了，为了模拟不同角色权限
//const randomNum = Math.floor(Math.random() * 2 + 1);
const randomNum = 1;
adminInfo.permissions = (randomNum === 1 ? adminPermissions : ordinaryPermissions) as never[];
adminInfo.role_type = randomNum;
return resultSuccess(adminInfo);
},
},
{
url: '/api/user_list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 10 } = query;
const list = userList(Number(pageSize));
return resultSuccess({
page: Number(page),
pageSize: Number(pageSize),
pageCount: 60,
itemCount: 60 * Number(pageSize),
list,
});
},
},
];

89
src/views/about/index.vue
View File

@ -1,89 +0,0 @@
<template>
<PageWrapper
title="关于我们"
:content="`${name}是一个基于 vue3，vite2，TypeScript
的中后台解决方案，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。`"
>
<el-card shadow="never" title="项目信息" class="mt-3 proCard" size="small">
<el-descriptions border label-placement="left" class="py-2">
<el-descriptions-item label="版本">
<el-tag type="info"> {{ version }} </el-tag>
</el-descriptions-item>
<el-descriptions-item label="最后编译时间">
<el-tag type="info"> {{ lastBuildTime }} </el-tag>
</el-descriptions-item>
<el-descriptions-item label="文档地址">
<div class="flex items-center">
<a href="https://www.baidu.com" class="py-2" target="_blank">查看文档地址</a>
</div>
</el-descriptions-item>
<el-descriptions-item label="预览地址">
<div class="flex items-center">
<a href="https://pro.baidu.com" class="py-2" target="_blank">查看预览地址</a>
</div>
</el-descriptions-item>
<el-descriptions-item label="Github">
<div class="flex items-center">
<a href="https://www.baidu.com" class="py-2" target="_blank"
>查看Github地址</a
>
</div>
</el-descriptions-item>
<el-descriptions-item label="QQ交流群">
<div class="flex items-center">
<a href="https://jq.qq.com/?_wv=1027&k=xib9dU4C" class="py-2" target="_blank"
>点击链接加入群聊【Naive Admin】</a
>
</div>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card shadow="never" class="mt-3 proCard" size="small">
<template #header>
<div class="card-header">
<span>开发环境依赖</span>
</div>
</template>
<el-descriptions border label-placement="left" class="py-2">
<el-descriptions-item v-for="item in devSchema" :key="item.field" :label="item.field">
{{ item.label }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card shadow="never" class="mt-3 proCard" size="small">
<template #header>
<div class="card-header">
<span>生产环境依赖</span>
</div>
</template>
<el-descriptions border label-placement="left" class="py-2">
<el-descriptions-item v-for="item in schema" :key="item.field" :label="item.field">
{{ item.label }}
</el-descriptions-item>
</el-descriptions>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
export interface schemaItem {
field: string;
label: string;
}
const { pkg, lastBuildTime } = __APP_INFO__;
const { dependencies, devDependencies, name, version } = pkg;
const schema: schemaItem[] = [];
const devSchema: schemaItem[] = [];
Object.keys(dependencies).forEach((key) => {
schema.push({ field: key, label: dependencies[key] });
});
Object.keys(devDependencies).forEach((key) => {
devSchema.push({ field: key, label: devDependencies[key] });
});
</script>

72
src/views/comp/cropper/index.vue
View File

@ -1,72 +0,0 @@
<template>
<PageWrapper
title="图片裁剪示例"
content="适用于，头像上传，图片上传之前需要进行裁剪，简单说就是，需要图片上传并且需要裁剪，就可以用这个组件快速实现，需要真实接口才能进行上传测试！"
>
<el-card shadow="never" class="mt-3 proCard">
<template #header>
<div class="card-header">
<span>圆形裁剪</span>
</div>
</template>
<!--圆形裁剪-->
<Cropper
ref="cropperCircled"
:circled="true"
:src="src"
:uploadApi="upload"
title="圆形头像上传"
/>
<el-space>
<el-button class="mt-3 ml-12" @click="cropperCircledImg">选择图片</el-button>
</el-space>
</el-card>
<el-card shadow="never" class="mt-3 proCard">
<template #header>
<div class="card-header">
<span>矩形裁剪</span>
</div>
</template>
<!--矩形裁剪-->
<Cropper ref="cropperRectangle" :src="src" title="矩形头像上传" />
<el-space>
<el-button class="mt-3 ml-12" @click="cropperRectangleImg">选择图片</el-button>
</el-space>
</el-card>
<el-card shadow="never" class="mt-3 proCard">
<template #header>
<div class="card-header">
<span>自定义内容，选择权交给您</span>
</div>
</template>
<!--圆形裁剪-->
<Cropper ref="cropperCircled" :src="src" :uploadApi="upload" title="矩形头像上传">
<el-button class="mt-3 ml-12" @click="cropperCircledImg">自定义裁剪图片</el-button>
</Cropper>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Cropper } from '@/components/Cropper';
import { upload } from '@/api/common/';
const src = ref('https://img.baidu.com/assets/avatar/avatar-2.jpg');
const cropperCircled = ref();
const cropperRectangle = ref();
function cropperCircledImg() {
cropperCircled.value.openCropper();
}
function cropperRectangleImg() {
cropperRectangle.value.openCropper();
}
</script>
<style lang="scss"></style>

146
src/views/comp/drag/index.vue
View File

@ -1,146 +0,0 @@
<template>
<PageWrapper
title="花式拖拽演示"
content="常用于卡片，事项，预约，流程，计划等，每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~"
>
<el-row :gutter="20" class="mt-3 proCard">
<el-col :span="6">
<el-card title="需求池" size="small" shadow="never">
<template #header>
<div class="card-header">
<span>需求池</span>
<el-tag>月</el-tag>
</div>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="demandList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<el-tag>需求</el-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</el-card>
</el-col>
<el-col :span="6">
<el-card size="small" shadow="never">
<template #header>
<div class="card-header">
<span>开发中</span>
<el-tag type="warning">月</el-tag>
</div>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="exploitList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<el-tag type="warning">开发中</el-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</el-card>
</el-col>
<el-col :span="6">
<el-card size="small" shadow="never">
<template #header>
<div class="card-header">
<span>已完成</span>
<el-tag type="warning">月</el-tag>
</div>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="completeList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<el-tag type="error">已完成</el-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</el-card>
</el-col>
<el-col :span="6">
<el-card size="small" shadow="never">
<template #header>
<div class="card-header">
<span>已验收</span>
<el-tag type="success">月</el-tag>
</div>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="approvedList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<el-tag type="success">已验收</el-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</el-card>
</el-col>
</el-row>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import Draggable from 'vuedraggable';
const demandList = reactive([
{ name: '预约表单页面，能填写预约相关信息', id: 1 },
{ name: '促销活动页面，包含促销广告展示', id: 2 },
{ name: '商品列表，需要一个到货提醒功能', id: 3 },
{ name: '商品需要一个评价功能', id: 4 },
{ name: '商品图片需要提供放大镜', id: 5 },
{ name: '订单需要提供删除到回收站', id: 6 },
{ name: '用户头像上传，需要支持裁剪', id: 7 },
{ name: '据说Vue3.2发布了，setup啥时候支持？', id: 8 },
]);
const exploitList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
const completeList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
const approvedList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
</script>
<style lang="scss" scoped>
.draggable-ul {
width: 100%;
overflow: hidden;
margin-top: -16px;
.draggable-li {
width: 100%;
padding: 16px 10px;
border-bottom: 1px solid var(--n-border-color);
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>

223
src/views/comp/form/basic.vue
View File

@ -1,223 +0,0 @@
<template>
<PageWrapper
title="基础表单"
content="基础表单，用于向用户收集表单信息，并展示 Password 组件使用示例"
>
<el-card shadow="never" class="mt-3 proCard">
<el-row :gutter="20" justify="center" class="py-4">
<el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
<BasicForm
submitButtonText="提交预约"
:gridProps="{ cols: 1 }"
:schemas="schemas"
@submit="handleSubmit"
@reset="handleReset"
>
<template #statusSlot="{ model, field }">
<el-input v-model="model[field]" placeholder="请输入您今天的状态" />
</template>
</BasicForm>
</el-col>
</el-row>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { BasicForm, FormSchema } from '@/components/Form/index';
import { ElMessage } from 'element-plus';
import { getClassifyList } from '@/api/select/select';
const params = {
type: 1,
};
async function loadSelectData(res) {
//这里可以进行数据转换处理
return (await getClassifyList({ ...res, ...params })).map((item, index) => {
return {
...item,
index,
};
});
}
const schemas: FormSchema[] = [
{
field: 'id',
defaultValue: 128,
hidden: true,
},
{
field: 'identity',
defaultValue: '我是一个隐藏字段内容',
hidden: true,
},
{
field: 'name',
component: 'Input',
label: '姓名',
labelMessage: '这是一个提示',
componentProps: {
placeholder: '请输入姓名',
onInput: (e: any) => {
console.log(e);
},
},
rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
},
{
field: 'user.basic.age',
component: 'InputNumber',
label: '年龄',
labelMessage: '这是一个field对象演示',
componentProps: {
placeholder: '请输入年龄',
controlsPosition: 'right',
},
rules: [{ required: true, type: 'number', message: '请输入年龄', trigger: ['blur'] }],
},
{
field: 'mobile',
component: 'Input',
label: '手机',
componentProps: {
placeholder: '请输入手机号码',
onInput: (e: any) => {
console.log(e);
},
},
},
{
field: 'type',
component: 'Select',
label: '类型',
labelMessage: '选择类型会出现预约时间表单',
componentProps: {
placeholder: '请选择类型',
clearable: true,
options: [
{
label: '舒适性',
value: 1,
},
{
label: '经济性',
value: 2,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'classify',
component: 'BasicSelect',
label: '动态分类',
componentProps: {
placeholder: '请选择分类',
request: loadSelectData,
onChange: (e: any) => {
console.log(e);
},
},
rules: [{ required: true, message: '请选择分类', trigger: ['change'] }],
},
{
field: 'makeDate',
component: 'DatePicker',
label: '预约时间',
defaultValue: 1183135260000,
componentProps: {
type: 'date',
onChange: (e: any) => {
console.log(e);
},
},
// 根据 上面选择的类型，获取页面其他逻辑字段 处理显示表单
// 可用字段 schema, values, model, field
hidden: ({ model }) => {
return !model.type;
},
rules: [{ required: true, type: 'number', message: '请选择预约时间', trigger: ['change'] }],
},
{
field: 'makeTime',
component: 'TimePicker',
label: '停留时间',
componentProps: {
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'status',
label: '状态',
//插槽
slot: 'statusSlot',
},
{
field: 'makeProject',
component: 'Checkbox',
label: '预约项目',
componentProps: {
placeholder: '请选择预约项目',
options: [
{
label: '种牙',
value: 1,
},
{
label: '补牙',
value: 2,
},
{
label: '根管',
value: 3,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeSource',
component: 'RadioGroup',
label: '来源',
componentProps: {
options: [
{
label: '网上',
value: 1,
},
{
label: '门店',
value: 2,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
// {
// field: 'password',
// label: '密码',
// slot: 'passwordSlot',
// },
];
function handleSubmit(values: Recordable) {
if (!values) return;
ElMessage.success(JSON.stringify(values));
}
function handleReset(values: Recordable) {
ElMessage.success(JSON.stringify(values));
}
</script>
<style lang="scss" scoped></style>

156
src/views/comp/form/useForm.vue
View File

@ -1,156 +0,0 @@
<template>
<PageWrapper title="基础表单" content="useForm 表单用法，用于向用户收集表单信息 ">
<el-card shadow="never" class="mt-3 proCard">
<el-row :gutter="20" justify="center" class="py-4">
<el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
</el-col>
</el-row>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { BasicForm, useForm, FormSchema } from '@/components/Form/index';
import { ElMessage } from 'element-plus';
const schemas: FormSchema[] = [
{
field: 'id',
defaultValue: 128,
hidden: true,
},
{
field: 'identity',
defaultValue: '我是一个隐藏字段内容',
hidden: true,
},
{
field: 'name',
component: 'Input',
label: '姓名',
labelMessage: '这是一个提示',
componentProps: {
placeholder: '请输入姓名',
onInput: (e: any) => {
console.log(e);
},
},
rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
},
{
field: 'mobile',
component: 'Input',
label: '手机',
componentProps: {
placeholder: '请输入手机号码',
onInput: (e: any) => {
console.log(e);
},
},
},
{
field: 'type',
component: 'Select',
label: '类型',
componentProps: {
placeholder: '请选择类型',
options: [
{
label: '舒适性',
value: 1,
},
{
label: '经济性',
value: 2,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeDate',
component: 'DatePicker',
label: '预约时间',
defaultValue: 1183135260000,
componentProps: {
type: 'date',
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeTime',
component: 'TimePicker',
label: '停留时间',
componentProps: {
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeProject',
component: 'Checkbox',
label: '预约项目',
componentProps: {
placeholder: '请选择预约项目',
options: [
{
label: '种牙',
value: 1,
},
{
label: '补牙',
value: 2,
},
{
label: '根管',
value: 3,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeSource',
component: 'RadioGroup',
label: '来源',
componentProps: {
options: [
{
label: '网上',
value: 1,
},
{
label: '门店',
value: 2,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
];
const [register, {}] = useForm({
submitButtonText: '提交预约',
schemas,
});
function handleSubmit(values: Recordable) {
ElMessage.success(JSON.stringify(values));
}
function handleReset(values: Recordable) {
console.log(values);
}
</script>
<style lang="scss" scoped></style>

272
src/views/comp/modal/index.vue
View File

@ -1,272 +0,0 @@
<template>
<PageWrapper title="模态框">
<template #headerContent
>模态框，用于向用户收集或展示信息，Modal 基于 Dialog 组件，扩展最大化功能
<br />
以下是 useModal 方式，ref
方式，也支持，使用方式和其他组件一致，如：modalRef.value.closeModal()</template
>
<el-card class="mt-3 proCard">
<el-alert title="Modal嵌套Form" type="info">
使用 useModal 进行弹窗展示和操作，并演示了在 Modal 内和 Form 组件，组合使用方法
</el-alert>
<el-divider />
<el-space>
<el-button type="primary" @click="showModal">打开Modal嵌套Form例子</el-button>
</el-space>
<el-divider />
<el-alert title="个性化轻量级" type="info">
使用 useModal 进行弹窗展示和操作，自定义配置，实现轻量级效果，更多配置，请参考文档
</el-alert>
<el-divider />
<el-space>
<el-button type="primary" @click="showLightModal">轻量级确认</el-button>
</el-space>
<el-divider />
<el-alert title="提示" type="info">
组件暴露了，setProps 方法，用于修改组件内部
Props，比如标题，等，具体参考UI框架文档，DialogReactive Properties
</el-alert>
</el-card>
<basicModal @register="modalRegister" ref="modalRef" @ok="okModal">
<template #default>
<BasicForm @register="register" @reset="handleReset" class="basicForm">
<template #statusSlot="{ model, field }">
<el-input v-model="model[field]" placeholder="请输入您今天的状态" />
</template>
</BasicForm>
</template>
</basicModal>
<basicModal @register="lightModalRegister" ref="modalRef" @ok="lightOkModal">
<template #default>
<el-space>
<el-button type="primary" @click="updateTitle">更新标题</el-button>
<el-button type="danger" @click="lightCloseModal">关闭弹窗</el-button>
</el-space>
</template>
</basicModal>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { basicModal, useModal } from '@/components/Modal';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
const schemas: FormSchema[] = [
{
field: 'name',
component: 'Input',
label: '姓名',
labelMessage: '这是一个提示',
rowProps: {
span: 1,
},
componentProps: {
placeholder: '请输入姓名',
onInput: (e: any) => {
console.log(e);
},
},
rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
},
{
field: 'mobile',
component: 'Input',
label: '手机',
componentProps: {
placeholder: '请输入手机号码',
showButton: false,
onInput: (e: any) => {
console.log(e);
},
},
},
{
field: 'type',
component: 'Select',
label: '类型',
rowProps: {
//span: 24,
},
componentProps: {
placeholder: '请选择类型',
options: [
{
label: '舒适性',
value: 1,
},
{
label: '经济性',
value: 2,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeDate',
component: 'DatePicker',
label: '预约时间',
rowProps: {
//span: 24,
},
defaultValue: 1183135260000,
componentProps: {
type: 'date',
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeTime',
component: 'TimePicker',
label: '停留时间',
rowProps: {
//span: 24,
},
componentProps: {
clearable: true,
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeProject',
component: 'Checkbox',
label: '预约项目',
rowProps: {
//span: 24,
},
componentProps: {
placeholder: '请选择预约项目',
options: [
{
label: '种牙',
value: 1,
},
{
label: '补牙',
value: 2,
},
{
label: '根管',
value: 3,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeSource',
component: 'RadioGroup',
label: '来源',
rowProps: {
//span: 24,
},
componentProps: {
options: [
{
label: '网上',
value: 1,
},
{
label: '门店',
value: 2,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'status',
label: '状态',
rowProps: {
//span: 24,
},
//插槽
slot: 'statusSlot',
},
];
const modalRef: any = ref(null);
const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
title: '新增预约',
width: 600,
confirmButText: '提交预约',
});
const [
lightModalRegister,
{
setProps,
openModal: lightOpenModal,
closeModal: lightCloseModal,
setSubLoading: lightSetSubLoading,
},
] = useModal({
title: '确认对话框',
});
const [register, { submit }] = useForm({
labelWidth: 80,
layout: 'horizontal',
submitButtonText: '提交预约',
showActionButtonGroup: false,
schemas,
});
async function okModal() {
const formRes = await submit();
if (formRes) {
closeModal();
ElMessage.success('提交成功');
} else {
ElMessage({
message: '验证失败，请填写完整信息',
type: 'error',
});
setSubLoading(false);
}
}
function lightOkModal() {
lightCloseModal();
lightSetSubLoading();
}
function showLightModal() {
lightOpenModal();
}
function showModal() {
openModal();
}
function handleReset(values: Recordable) {
console.log(values);
}
function updateTitle() {
setProps({ title: '我是一个新的弹窗标题' });
}
</script>
<style lang="scss" scoped>
.n-dialog.basicModalLight {
width: 416px;
padding-top: 26px;
}
</style>

35
src/views/comp/password/index.vue
View File

@ -1,35 +0,0 @@
<template>
<PageWrapper
title="密码强度校验组件"
content="用于常用密码强度设置，通常要求比较严格一点密码适用，验证，灵活配置，脱离 Form
单独使用也可以哦~"
>
<el-card :bordered="false" class="mt-3 proCard">
<el-alert title="基础效果" type="info"> 密码长度，6-32，复杂密码</el-alert>
<Password class="mt-3" />
<el-alert title="设定密码长度" type="info">比如来个，( 12 - 16 个字符 )</el-alert>
<Password :min-length="12" :max-length="16" class="mt-3" />
<el-alert title="简单密码" type="info"
>不需要满足字母、数字及特殊字符两种或以上组合条件
</el-alert>
<Password class="mt-3" :complexity="false" />
<el-alert title="自定义密码强度等级提示语" type="info">
支持4个等级配置，1 - 4 默认4个等级名称分别为： 1. 弱不禁风 2. 平淡无奇 3. 出神入化 4.
登峰造极
</el-alert>
<Password class="mt-3" :level="{ 1: '很Low', 2: '一般Low', 3: '没那么Low', 4: '不Low了' }" />
<el-alert title="再次确认密码" type="info" />
<Password :repeat="true" class="mt-3" />
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { Password } from '@/components/Password';
</script>
<style lang="scss"></style>

215
src/views/comp/qrcode/index.vue
View File

@ -1,215 +0,0 @@
<template>
<PageWrapper
title="二维码组件"
content="二维码组件使用示例，通常用于一些商品、促销活动、或者分享推广二维码展示"
>
<el-row class="mt-3" :gutter="10">
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>基础实例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode :value="qrCodeUrl" />
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>渲染成img标签示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode :value="qrCodeUrl" tag="img" />
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>配置样式示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode
:value="qrCodeUrl"
:options="{
color: { dark: '#55D187' },
}"
/>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>本地logo示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode :value="qrCodeUrl" :logo="LogoImg" />
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>在线logo示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode
:value="qrCodeUrl"
logo="https://naive-ui-admin-docs.vercel.app/logo.png"
:options="{
color: { dark: '#55D187' },
}"
/>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>LOGO配置示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode
:value="qrCodeUrl"
:logo="{
src: 'https://naive-ui-admin-docs.vercel.app/logo.png',
logoSize: 0.2,
borderSize: 0.05,
borderRadius: 50,
bgColor: 'blue',
}"
/>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>下载示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
</div>
<div class="mb-2 qrcode-space">
<el-button type="primary" @click="download"> 下载 </el-button>
</div>
<div class="qrcode-space">
<div class="msg">(在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题)</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>扩展绘制示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode
:value="qrCodeUrl"
:width="200"
:options="{ margin: 5 }"
ref="qrDiyRef"
:logo="LogoImg"
@done="onQrcodeDone"
/>
</div>
<div class="mb-2 qrcode-space">
<el-button type="primary" @click="downloadDiy"> 下载 </el-button>
</div>
<div class="qrcode-space">
<div class="msg">要进行扩展绘制则不能将tag设为img</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" size="small">
<template #header>
<div class="card-header">
<span>配置大小示例</span>
</div>
</template>
<div class="qrcode-space">
<QrCode :value="qrCodeUrl" :width="270" />
</div>
</el-card>
</el-col>
</el-row>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { QrCode, QrCodeActionType } from '@/components/Qrcode/index';
import LogoImg from '@/assets/images/logo.png';
const qrCodeUrl = 'https://www.baidu.com';
const qrRef = ref<Nullable<QrCodeActionType>>(null);
const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
function download() {
const qrEl = unref(qrRef);
if (!qrEl) return;
qrEl.download('img');
}
function downloadDiy() {
const qrEl = unref(qrDiyRef);
if (!qrEl) return;
qrEl.download('Qrcode');
}
function onQrcodeDone({ ctx }: any) {
if (ctx instanceof CanvasRenderingContext2D) {
// 额外绘制
ctx.fillStyle = 'black';
ctx.font = '16px "微软雅黑"';
ctx.textBaseline = 'bottom';
ctx.textAlign = 'center';
ctx.fillText('扫描关注Star点一点', 100, 195, 200);
}
}
</script>
<style lang="scss" scoped>
.el-row {
margin-bottom: 10px;
}
.qrcode-space {
display: flex;
position: relative;
bottom: 0;
transition: bottom 0.4s;
justify-content: center;
&:hover {
bottom: 6px;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>

43
src/views/comp/region/index.vue
View File

@ -1,43 +0,0 @@
<template>
<PageWrapper title="地区" content="地区组件，用于选择省市区，比如填写地址，配送地址，等...">
<el-card :bordered="false" class="mt-3 proCard">
<el-alert title="添加场景" type="info"> 自动加载数据，显示省市区</el-alert>
<Region class="mt-3 Region" @change="regionChange" />
<el-divider />
<el-alert title="回显场景" type="info"> 设置默认值，自动加载数据，并且选中</el-alert>
<Region v-model:value="regionIds" class="mt-3 Region" @change="regionChange" />
<el-divider />
<el-alert title="只显示省市" type="info" />
<Region
v-model:value="regionIds"
:hideArea="true"
class="mt-3 Region"
@change="regionChange"
/>
<el-divider />
<el-alert title="只显示省" type="info" />
<Region :onlyProvince="true" class="mt-3 Region" @change="regionChange" />
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Region } from '@/components/Region';
const regionIds = ref([1, 11, 111]);
//地区变动回调
function regionChange(result) {
console.log(result);
}
</script>
<style lang="scss">
.Region {
width: 320px;
}
</style>

111
src/views/comp/richtext/vue-quill.vue
View File

@ -1,111 +0,0 @@
<template>
<PageWrapper title="富文本" content="富文本，用于展示图文信息，比如商品详情，文章详情等...">
<el-card shadow="never" class="mt-2 proCard">
<QuillEditor
ref="quillEditor"
:options="options"
v-model:content="myContent"
style="height: 350px"
@ready="readyQuill"
class="quillEditor"
/>
<el-space>
<el-button @click="addText">增加文本</el-button>
<el-button @click="addImg">增加图片</el-button>
<el-button @click="getHtml">获取HTML</el-button>
</el-space>
</el-card>
<el-card shadow="never" class="mt-3 proCard" title="HTML 内容">
<el-input
v-model="myContentHtml"
type="textarea"
placeholder="html"
:autosize="{
minRows: 3,
maxRows: 6,
}"
/>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const quillEditor = ref();
const myContent = ref(
'<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>',
);
const myContentHtml = ref(
'<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>',
);
const options = reactive({
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }], // superscript/subscript
[{ indent: '-1' }, { indent: '+1' }], // outdent/indent
[{ direction: 'rtl' }], // text direction
[{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
['clean'],
['image'],
],
},
theme: 'snow',
placeholder: '输入您喜欢的内容吧！',
});
function readyQuill() {
console.log('Quill准备好了');
}
function getHtml() {
myContentHtml.value = getHtmlVal();
}
function addText() {
const html = getHtmlVal() + '新增加的内容';
quillEditor.value.setHTML(html);
}
function addImg() {
const html =
getHtmlVal() +
'<img style="width:100px" src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>';
quillEditor.value.setHTML(html);
}
function getHtmlVal() {
return quillEditor.value.getHTML();
}
onMounted(() => {
quillEditor.value.setHTML(myContent.value);
});
</script>
<style lang="scss">
.ql-toolbar.ql-snow {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #eee;
margin-top: -10px;
}
.ql-container.ql-snow {
border: none;
}
</style>

75
src/views/comp/select/select.vue
View File

@ -1,75 +0,0 @@
<template>
<PageWrapper
title="选择器"
content="扩展选择器组件，用于各种表单选择器，简化使用，内置缓存，可对相同的数据减少http请求，也可手动刷新数据源"
>
<el-card :bordered="false" class="mt-3 proCard">
<el-alert title="基础使用" type="info">
自动加载数据，首次加载缓存，之后同一个KEY不在获取新数据</el-alert
>
<div class="mt-3">
<el-space align="center">
<BasicSelect
ref="basicSelectRef"
v-model="selectValue"
:request="loadSelectData"
@change="handleUpdateValue"
cache
cacheKey="SELECT_CLASSIFY"
><template #action>如果你点开了这个例子，你可能需要它</template></BasicSelect
>
<el-button @click="setSelectData">设置选中值</el-button>
<el-button @click="getSelectValue">获取选中值</el-button>
<el-button @click="getSelectData">获取数据源</el-button>
<el-button @click="refreshSelectData">刷新数据</el-button>
</el-space>
</div>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { getClassifyList } from '@/api/select/select';
import { BasicSelect } from '@/components/Select';
import { ElMessage } from 'element-plus';
const selectValue = ref('hot');
const basicSelectRef = ref();
const params = {
type: 1,
};
async function loadSelectData(res) {
//这里可以进行数据转换处理
return (await getClassifyList({ ...res, ...params })).map((item, index) => {
return {
...item,
index,
};
});
}
function handleUpdateValue(value) {
selectValue.value = value;
ElMessage.success('value: ' + JSON.stringify(value));
}
function refreshSelectData() {
basicSelectRef?.value.fetch();
}
function setSelectData() {
selectValue.value = 'new';
}
function getSelectValue() {
ElMessage.success('value: ' + JSON.stringify(selectValue.value));
}
function getSelectData() {
ElMessage.success('Data: ' + JSON.stringify(basicSelectRef?.value.getData()));
}
</script>
<style lang="scss"></style>

88
src/views/comp/table/CellColumns.ts
View File

@ -1,88 +0,0 @@
import { h } from 'vue';
import { ElAvatar, ElTag } from 'element-plus';
import type { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [
{
label: 'id',
prop: 'id',
},
{
label: '编码',
prop: 'no',
},
{
label: '名称',
prop: 'name',
editComponent: 'Input',
// 默认必填校验
editRule: true,
edit: true,
editCellRender: (value) => {
return h(
ElTag,
{
style: {
marginRight: '6px',
},
type: 'info',
},
{
default: () => value,
},
);
},
},
{
label: '头像',
prop: 'avatar',
render(record) {
return h(ElAvatar, {
size: 48,
src: record.row.avatar,
shape: 'square',
fit: 'fill',
});
},
},
{
label: '地址',
prop: 'address',
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '广东省',
value: 1,
},
{
label: '浙江省',
value: 2,
},
],
},
edit: true,
},
{
label: '开始日期',
prop: 'beginTime',
edit: true,
editComponent: 'DatePicker',
editComponentProps: {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
},
},
{
label: '结束日期',
prop: 'endTime',
},
{
label: '创建时间',
prop: 'date',
},
{
label: '停留时间',
prop: 'time',
},
];

106
src/views/comp/table/basic.vue
View File

@ -1,106 +0,0 @@
<template>
<el-card :bordered="false" class="proCard">
<BasicTable
title="表格列表"
titleTooltip="这是一个提示"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@checked-row-change="onCheckedRow"
>
<template #toolbar>
<el-button type="primary" @click="reloadTable">刷新数据</el-button>
</template>
</BasicTable>
</el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, h } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { columns } from './basicColumns';
import { ElMessage, ElMessageBox } from 'element-plus';
const tableRef = ref();
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
const actionColumn = reactive({
width: 170,
label: '操作',
prop: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction, {
style: 'button',
actions: createActions(record),
});
},
});
function createActions(record) {
return [
{
label: '删除',
type: 'danger',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
type: 'primary',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
},
];
}
const loadDataTable = async (res) => {
return await getTableList({ ...params, ...res });
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
tableRef.value.reload();
}
function handleDelete(record) {
console.log(record);
const { row } = record;
ElMessageBox.confirm(`您想删除${row.name}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
})
.then(() => {
ElMessage.success('删除成功');
})
.catch(() => {});
}
function handleEdit(record) {
console.log(record);
ElMessage.success('您点击了编辑按钮');
}
</script>
<style lang="scss" scoped></style>

66
src/views/comp/table/basicColumns.ts
View File

@ -1,66 +0,0 @@
import { h } from 'vue';
import { ElAvatar, ElTag } from 'element-plus';
import type { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [
{
label: 'id',
prop: 'id',
},
{
label: '编码',
prop: 'no',
},
{
label: '名称',
prop: 'name',
},
{
label: '头像',
prop: 'avatar',
width: 100,
render(record) {
return h(ElAvatar, {
size: 48,
src: record.row.avatar,
shape: 'square',
fit: 'fill',
});
},
},
{
label: '地址',
prop: 'address',
},
{
label: '开始日期',
prop: 'beginTime',
},
{
label: '结束日期',
prop: 'endTime',
},
{
label: '状态',
prop: 'status',
render(record) {
return h(
ElTag,
{
type: record.row.status ? 'success' : 'danger',
},
{
default: () => (record.row.status ? '启用' : '禁用'),
},
);
},
},
{
label: '创建时间',
prop: 'date',
},
{
label: '停留时间',
prop: 'time',
},
];

69
src/views/comp/table/editCell.vue
View File

@ -1,69 +0,0 @@
<template>
<el-card :bordered="false" class="proCard">
<BasicTable
title="表格列表"
titleTooltip="这是一个提示"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
@edit-end="editEnd"
@edit-change="onEditChange"
@checked-row-change="onCheckedRow"
:row-props="rowProps"
>
<template #toolbar>
<el-button type="primary" @click="reloadTable">刷新数据</el-button>
</template>
</BasicTable>
</el-card>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { BasicTable } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { columns } from './CellColumns';
const tableRef = ref();
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
function rowProps(rows) {
return {
style: 'cursor: pointer;',
onclick: function () {
console.log('row点击事件触发');
console.log(rows);
},
};
}
function onEditChange({ column, value, record }) {
if (column.key === 'id') {
record.editValueRefs.name4.value = `${value}`;
}
console.log(column, value, record);
}
const loadDataTable = async (res) => {
return await getTableList({ ...params, ...res });
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
console.log(tableRef.value);
tableRef.value.reload();
}
function editEnd({ value }) {
console.log(value);
}
</script>
<style lang="scss" scoped></style>

117
src/views/comp/table/editRow.vue
View File

@ -1,117 +0,0 @@
<template>
<el-card :bordered="false" class="proCard">
<BasicTable
title="表格列表"
titleTooltip="这是一个提示"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@edit-end="editEnd"
@edit-change="onEditChange"
@checked-row-change="onCheckedRow"
:scroll-x="1590"
>
<template #toolbar>
<el-button type="primary" @click="reloadTable">刷新数据</el-button>
</template>
</BasicTable>
</el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, h } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { columns } from './rowColumns';
const tableRef = ref();
const currentEditKeyRef = ref('');
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
const actionColumn = reactive({
width: 150,
label: '操作',
prop: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction, {
style: 'button',
actions: createActions(record),
});
},
});
function handleEdit(record) {
console.log(record.row);
currentEditKeyRef.value = record.column.prop;
record.row.onEdit?.(true);
}
function handleCancel(record) {
currentEditKeyRef.value = '';
record.row.onEdit?.(false, false);
}
function onEditChange({ column, value, record }) {
if (column.key === 'id') {
record.editValueRefs.name4.value = `${value}`;
}
console.log(column, value, record);
}
async function handleSave(record) {
const pass = await record.row.onEdit?.(false, true);
if (pass) {
currentEditKeyRef.value = '';
}
}
function createActions(record) {
if (!record.row.editable) {
return [
{
label: '编辑',
type: 'primary',
onClick: handleEdit.bind(null, record),
},
];
} else {
return [
{
label: '保存',
type: 'primary',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
onClick: handleCancel.bind(null, record),
},
];
}
}
const loadDataTable = async (res) => {
return await getTableList({ ...params, ...res });
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
console.log(tableRef.value);
tableRef.value.reload();
}
function editEnd({ value }) {
console.log(value);
}
</script>
<style lang="scss" scoped></style>

93
src/views/comp/table/rowColumns.ts
View File

@ -1,93 +0,0 @@
import { h } from 'vue';
import { ElAvatar } from 'element-plus';
import type { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [
{
label: 'id',
prop: 'id',
},
{
label: '编码',
prop: 'no',
},
{
label: '名称',
prop: 'name',
editComponent: 'Input',
editRow: true,
// 默认必填校验
editRule: true,
edit: true,
},
{
label: '头像',
prop: 'avatar',
render(record) {
return h(ElAvatar, {
size: 48,
src: record.row.avatar,
shape: 'square',
fit: 'fill',
});
},
},
{
label: '地址',
prop: 'address',
editRow: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '广东省',
value: 1,
},
{
label: '浙江省',
value: 2,
},
],
},
edit: true,
width: 200,
},
{
label: '开始日期',
prop: 'beginTime',
editRow: true,
edit: true,
width: 260,
editComponent: 'DatePicker',
editComponentProps: {
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
},
{
label: '结束日期',
prop: 'endTime',
width: 160,
},
{
label: '状态',
prop: 'status',
editRow: true,
edit: true,
editComponent: 'Switch',
editValueMap: (value) => {
return value ? '启用' : '禁用';
},
},
{
label: '创建时间',
prop: 'date',
width: 160,
},
{
label: '停留时间',
prop: 'time',
width: 80,
},
];

32
src/views/comp/tableSelect/basicColumns.ts
View File

@ -1,32 +0,0 @@
import { h } from 'vue';
import { ElAvatar } from 'element-plus';
import { BasicColumn } from '@/components/Table/index';
export const columns: BasicColumn[] = [
{
label: 'id',
prop: 'id',
},
{
label: '名称',
prop: 'name',
},
{
label: '头像',
prop: 'avatar',
render(record) {
return h(ElAvatar, {
size: 48,
src: record.row.avatar,
shape: 'square',
fit: 'fill',
style: 'width:48px;height:48px',
class: 'cursor-pointer',
});
},
},
{
label: '地址',
prop: 'address',
},
];

119
src/views/comp/tableSelect/tableSelect.vue
View File

@ -1,119 +0,0 @@
<template>
<PageWrapper
title="表格选择器"
content="选择器增强，用于展示多列数据表格选择器，可实现单选/多选，还能配置表单查询，项目实测，还是挺实用的"
>
<el-card :bordered="false" class="mt-3 proCard">
<el-alert title="单选" type="info"> 这是一个看起来像多选的单选效果，试试看吧 </el-alert>
<div class="mt-3">
<el-space align="center">
<TableSelect
ref="TableSelectRef"
labelField="name"
valueField="id"
placeholder="请选择内容（单选）"
:tableProps="{
rowKey: 'id',
request: loadDataTable,
columns: columns,
}"
@change="tableSelectChange"
/>
</el-space>
</div>
</el-card>
<el-card :bordered="false" class="mt-3 proCard">
<el-alert title="多选" type="info" class="mt-3">
这个看起来，真的像多选，实际也是多选效果哈
</el-alert>
<div class="mt-3">
<el-space align="center">
<TableSelect
ref="TableSelectRef"
labelField="name"
valueField="id"
placeholder="请选择内容（多选）"
:multiple="true"
:tableProps="{
rowKey: 'id',
request: loadDataTable,
columns: columns,
}"
@change="tableSelectChange"
@form-values-change="formChange"
/>
</el-space>
</div>
</el-card>
<el-card :bordered="false" class="mt-3 proCard">
<el-alert title="多选" type="info"> 支持配置表单，搜索查询，多选 </el-alert>
<div class="mt-3">
<el-space align="center">
<TableSelect
ref="TableSelectRef"
labelField="name"
valueField="id"
placeholder="请选择内容（多选）"
:multiple="true"
:formProps="formPropsOption"
:tableProps="{
rowKey: 'id',
request: loadDataTable,
columns: columns,
}"
@change="tableSelectChange"
@form-values-change="formChange"
/>
</el-space>
</div>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { TableSelect } from '@/components/TableSelect';
import { getTableSelectList } from '@/api/table/list';
import { columns } from './basicColumns';
import { FormSchema } from '@/components/Form/index';
const schemas: FormSchema[] = [
{
field: 'name',
labelMessage: '这是一个提示',
component: 'Input',
label: '名称',
componentProps: {
placeholder: '请输入名称',
onInput: (e: any) => {
console.log(e);
},
},
rules: [{ message: '请输入名称', trigger: ['blur'] }],
},
];
const formPropsOption = {
layout: 'horizontal',
colProps: { span: 12 },
schemas,
};
const formParams = ref({});
const loadDataTable = async (res) => {
return await getTableSelectList({ ...formParams.value, ...res });
};
function tableSelectChange(list) {
console.log('list', list);
}
function formChange(values) {
formParams.value = values;
}
</script>
<style lang="scss" scoped></style>

117
src/views/comp/upload/index.vue
View File

@ -1,117 +0,0 @@
<template>
<PageWrapper title="上传图片" content="上传图片，用于向用户收集图片信息">
<el-card shadow="never" :bordered="false" class="mt-3 proCard">
<el-row :gutter="20" justify="center">
<el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
<el-form
:label-width="80"
:model="formValue"
:rules="rules"
label-placement="left"
ref="formRef"
class="py-8"
>
<el-form-item label="预约姓名" prop="name">
<el-input v-model="formValue.name" placeholder="输入姓名" />
</el-form-item>
<el-form-item label="预约号码" prop="mobile">
<el-input placeholder="电话号码" v-model="formValue.mobile" />
</el-form-item>
<el-form-item label="病例图片" prop="images">
<BasicUpload
:action="`${uploadUrl}/api/admin/upload`"
:headers="uploadHeaders"
:data="{ type: 0 }"
v-model:list="fileList"
:limit="1"
@upload-change="uploadChange"
helpText="单个文件不超过2MB，最多只能上传10个文件"
/>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="formSubmit">提交预约</el-button>
<el-button @click="resetForm">重置</el-button>
</el-space>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, unref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { BasicUpload } from '@/components/Upload';
import { useGlobSetting } from '@/hooks/setting';
import { FormRules } from 'element-plus';
const globSetting = useGlobSetting();
const rules: FormRules = {
name: {
required: true,
message: '请输入预约姓名',
trigger: 'blur',
},
remark: {
required: true,
message: '请输入预约备注',
trigger: 'blur',
},
images: {
required: true,
type: 'array',
message: '请上传病例图片',
trigger: 'change',
},
};
const formRef: any = ref(null);
const { uploadUrl } = globSetting;
const fileList = ref([
// {
// name: 'food.jpeg',
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
// },
// {
// name: 'food2.jpeg',
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// },
]);
const formValue = reactive({
name: '',
mobile: '',
//图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
});
const uploadHeaders = reactive({
authorization: 'Bearer Mvixk4yW3Mes8IJykW30BBJFI0c71233ZqG8PBWT',
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
ElMessage.success('验证成功');
} else {
ElMessage.error('验证成功');
}
});
}
function resetForm() {
formRef.value.restoreValidation();
}
function uploadChange(list: string[]) {
console.log('🚀 ~ file: index.vue ~ line 118 ~ uploadChange ~ list', list);
formValue.images = unref(list);
}
</script>

282
src/views/comtemp/search-article/search-article.vue
View File

@ -1,282 +0,0 @@
<template>
<PageWrapper>
<!-- 搜索框 -->
<el-card shadow="hover" :bordered="false" class="custom-box-card">
<h2 class="text-lg">搜索列表（文章）</h2>
<div class="mt-4 text-center">
<el-input
:style="{ width: '320px' }"
v-model="keywords"
placeholder="请输入关键字"
:prefix-icon="Search"
/>
</div>
</el-card>
<!-- 文章部分 start -->
<div class="mt-3 tab1">
<el-card shadow="hover" class="custom-box-card">
<!-- 分类 -->
<div class="p-5">
<el-skeleton :rows="1" :loading="loading" style="width: 100%">
<template #default>
<div class="flex items-start classification justify-between mt-2.5">
<div class="flex-none label">分类: </div>
<div class="flex-grow">
<el-space wrap size="small" :class="!isCollapse ? 'height-limited' : ''">
<el-tag
size="large"
v-for="(item, index) in categoryListData"
:key="index"
@click="selectedHandle(index)"
:class="categoryIndex != index ? 'noSelected' : ''"
>{{ item.name }}</el-tag
>
</el-space>
</div>
<div
class="flex items-center justify-end flex-none cursor-pointer collapse-btn"
:style="`color:var(--el-color-primary-light-1)`"
@click="collapseHandle"
>{{ isCollapse ? '收起' : '展开' }}
<el-icon
><arrow-up-bold class="ml-1" v-if="isCollapse" /><arrow-down-bold
class="ml-1"
v-else /></el-icon
></div>
</div>
</template>
</el-skeleton>
<div class="flex items-start justify-between mt-4 classification">
<div class="flex-none label">作者:</div>
<div class="flex-grow">
<el-select
v-model="selectValue"
multiple
filterable
allow-create
default-first-option
clearable
:reserve-keyword="false"
placeholder="请选择"
:style="{ width: '320px' }"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="flex items-start items-center justify-between mt-4 classification">
<div class="flex-none label">排序:</div>
<div class="flex-grow">
<el-radio-group v-model="radio">
<el-radio :label="1">最新发表</el-radio>
<el-radio :label="2">最多收藏</el-radio>
<el-radio :label="3">最多阅读</el-radio>
</el-radio-group>
</div>
</div>
</div>
</el-card>
<!-- 文章列表 -->
<el-card shadow="hover" class="mt-3 custom-box-card">
<ul class="article-list">
<li
class="flex items-start justify-between"
v-for="item in articleListData"
:key="item.id"
>
<div class="left-box">
<div>
<h3 class="mb-4 text-2xl font-medium">{{ item.title }}</h3>
<el-space class="mb-4">
<el-tag v-for="(tag, i) in item.tags" :key="i" type="info">{{ tag }}</el-tag>
</el-space>
<p class="text-sm leading-6">
{{ item.summary }}
</p>
</div>
<div class="flex items-center mt-2 text-xs" :style="`color:var(--el-color-info)`">
<el-avatar :size="24" :src="item.avatar" />
<span class="ml-2 mr-1">{{ item.author }}</span
>发表于 <span class="ml-1 font-extralight">{{ item.date }}</span>
</div>
<div class="mt-3 font-extralight">
<span
><el-icon class="mr-1 align-middle"><StarOutlined /></el-icon
><b class="text-xs">{{ item.collection }}</b></span
>
<el-divider direction="vertical" />
<span
><el-icon class="mr-1 align-middle"><LikeOutlined /></el-icon
><b class="text-xs">{{ item.like }}</b></span
>
<el-divider direction="vertical" />
<span
><el-icon class="mr-1 align-middle"><CommentOutlined /></el-icon
><b class="text-xs">{{ item.comment }}</b></span
>
</div>
</div>
<div class="thumb"><el-image width="100%" :src="item.cover" /></div>
</li>
</ul>
</el-card>
<!-- 加载更多 -->
<el-card shadow="hover" class="mt-3 text-center custom-box-card">
<el-button :loading="loadingMore" @click="loadMore">加载更多</el-button>
</el-card>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Search, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue';
import { StarOutlined, LikeOutlined, CommentOutlined } from '@vicons/antd';
import { categoryList } from '@/api/comtemp/category';
import { articleList } from '@/api/comtemp/article';
const keywords = ref('');
const loading = ref(true);
const categoryIndex = ref(-1);
const isCollapse = ref(false);
const categoryListData = ref();
const articleListData = ref();
const pageSize = ref(5);
const loadingMore = ref(false);
const selectValue = ref<string[]>([]);
const options = [
{
value: '小马哥',
label: '小马哥',
},
{
value: '啊俊',
label: '啊俊',
},
{
value: 'Jack',
label: 'Jack',
},
{
value: 'Roy',
label: 'Roy',
},
];
const radio = ref(1);
//获取分类列表
async function getCategoryList() {
const res = await categoryList();
categoryListData.value = res && res.list ? res.list : [];
loading.value = false;
}
//分类选中
function selectedHandle(index) {
categoryIndex.value = index;
console.log(categoryIndex.value);
}
//是否展开
function collapseHandle() {
isCollapse.value = !isCollapse.value;
}
//获取文章列表
async function getArticleList() {
const res = await articleList({ pageSize: pageSize.value });
articleListData.value = res && res.list ? res.list : [];
loadingMore.value = false;
}
//加载更多
function loadMore() {
loadingMore.value = true;
pageSize.value = pageSize.value + 5;
getArticleList();
}
onMounted(() => {
//获取分类
getCategoryList();
//获取文章
getArticleList();
});
</script>
<style lang="scss" scoped>
// 卡片定制
.custom-box-card {
border: none;
}
//分类
.classification {
.label,
.collapse-btn {
height: 32px;
font-size: 14px;
line-height: 30px;
}
.label {
width: 60px;
}
.collapse-btn {
width: 60px;
}
.height-limited {
height: 40px;
overflow: hidden;
}
.el-tag {
cursor: pointer;
}
.el-tag.noSelected {
background-color: transparent;
border-color: transparent;
color: var(--el-color-info-lighter);
}
}
//文章
.tab1 {
// 文章列表
.article-list {
li {
padding: 20px 0;
border-bottom: 1px solid var(--el-border-color-base);
.left-box {
max-width: 800px;
}
.thumb {
max-width: 250px;
margin-left: 40px;
.arco-image {
width: 100%;
}
}
}
}
@media (max-width: 767px) {
.article-list {
li {
flex-wrap: wrap-reverse;
.thumb {
margin: 0 auto;
}
}
}
}
}
</style>

283
src/views/comtemp/search-make/search-make.vue
View File

@ -1,283 +0,0 @@
<template>
<PageWrapper>
<!-- 搜索框 -->
<el-card shadow="hover" :bordered="false" class="custom-box-card">
<h2 class="text-lg">搜索列表（预约）</h2>
<div class="mt-4 text-center">
<el-input
:style="{ width: '320px' }"
v-model="keywords"
placeholder="请输入关键字"
:prefix-icon="Search"
/>
</div>
</el-card>
<!-- 预约部分 start -->
<div class="mt-3 tab3">
<el-card shadow="hover" class="mb-2 custom-box-card">
<!-- 分类 -->
<div class="p-5">
<el-skeleton :rows="1" :loading="loading" style="width: 100%">
<template #default>
<div class="flex items-start classification justify-between mt-2.5">
<div class="flex-none label">分类: </div>
<div class="flex-grow">
<el-space wrap size="small" :class="!isCollapse ? 'height-limited' : ''">
<el-tag
size="large"
v-for="(item, index) in categoryListData"
:key="index"
@click="selectedHandle(index)"
:class="categoryIndex != index ? 'noSelected' : ''"
>{{ item.name }}</el-tag
>
</el-space>
</div>
<div
class="flex items-center justify-end flex-none cursor-pointer collapse-btn"
:style="`color:var(--el-color-primary-light-1)`"
@click="collapseHandle"
>{{ isCollapse ? '收起' : '展开' }}
<el-icon
><arrow-up-bold class="ml-1" v-if="isCollapse" /><arrow-down-bold
class="ml-1"
v-else /></el-icon
></div>
</div>
</template>
</el-skeleton>
<div class="flex items-start items-center justify-between mt-4 classification">
<div class="flex-none label">排序:</div>
<div class="flex-grow">
<el-radio-group v-model="radio">
<el-radio :label="1">最新</el-radio>
<el-radio :label="2">最热</el-radio>
</el-radio-group>
</div>
</div>
</div>
</el-card>
<!-- 预约 -->
<el-row :gutter="12" class="list">
<el-col
:xs="12"
:sm="8"
:md="8"
:lg="6"
:xl="4"
v-for="item in makeListData"
:key="item.id"
>
<el-card shadow="hover" class="custom-box-card card">
<div class="flex items-center px-4">
<el-avatar :size="40" :src="item.avatar" />
<span class="ml-2 text-base">{{ item.doctor }} 医师</span>
</div>
<dl class="px-4 my-4 c-gray">
<dt>科室：{{ item.subject }}</dt>
<dd>最后预约时间：{{ item.date }}</dd>
</dl>
<el-divider />
<el-row class="grid-box">
<el-col :span="6">
<el-tooltip content="查看" placement="top" offset="-5">
<div class="wrap"
><a
href="https://www.baidu.com/home"
target="_blank"
class="flex items-center justify-center"
><el-icon><eye-outlined /></el-icon></a
></div>
</el-tooltip>
</el-col>
<el-col :span="6" class="flex items-center justify-center">
<el-tooltip content="导出" placement="top" offset="-5">
<div class="flex items-center justify-center wrap"
><el-icon><export-outlined class="text-base" /></el-icon
></div>
</el-tooltip>
</el-col>
<el-col :span="6" class="flex items-center justify-center">
<el-tooltip content="编辑" placement="top" offset="-5">
<div class="flex items-center justify-center wrap"
><el-icon><edit-outlined class="text-base" /></el-icon
></div>
</el-tooltip>
</el-col>
<el-col :span="6" class="flex items-center justify-center">
<el-dropdown trigger="hover">
<div class="flex items-center justify-center wrap"
><el-icon><delete-outlined class="text-base" /></el-icon
></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>删除</el-dropdown-item>
<el-dropdown-item>隐藏</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<!-- 加载更多 -->
<el-card shadow="hover" class="mt-3 text-center custom-box-card">
<el-button :loading="loadingMore" @click="loadMore">加载更多</el-button>
</el-card>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Search, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue';
import { EyeOutlined, ExportOutlined, EditOutlined, DeleteOutlined } from '@vicons/antd';
import { categoryList } from '@/api/comtemp/category';
import { makeList } from '@/api/comtemp/make';
const keywords = ref('');
const loading = ref(true);
const categoryIndex = ref(-1);
const isCollapse = ref(false);
const categoryListData = ref();
const makeListData = ref();
const pageSize = ref(12);
const loadingMore = ref(false);
const radio = ref(1);
//获取分类列表
async function getCategoryList() {
const res = await categoryList();
categoryListData.value = res && res.list ? res.list : [];
loading.value = false;
}
//分类选中
function selectedHandle(index) {
categoryIndex.value = index;
}
//是否展开
function collapseHandle() {
isCollapse.value = !isCollapse.value;
}
//获取预约列表
async function getMakeList() {
const res = await makeList({ pageSize: pageSize.value });
makeListData.value = res && res.list ? res.list : [];
loadingMore.value = false;
}
//加载更多
function loadMore() {
loadingMore.value = true;
pageSize.value = pageSize.value + 12;
getMakeList();
}
onMounted(() => {
//获取分类
getCategoryList();
//获取预约
getMakeList();
});
</script>
<style lang="scss" scoped>
// 处理栅格
.el-row {
padding-top: 6px;
margin: -6px;
.el-row {
padding-top: 0;
}
}
.el-col {
padding-top: 6px;
padding-bottom: 6px;
}
// 卡片定制
.custom-box-card {
border: none;
}
//分类
.classification {
.label,
.collapse-btn {
height: 32px;
font-size: 14px;
line-height: 30px;
}
.label {
width: 60px;
}
.collapse-btn {
width: 60px;
}
.height-limited {
height: 40px;
overflow: hidden;
}
.el-tag {
cursor: pointer;
}
.el-tag.noSelected {
background-color: transparent;
border-color: transparent;
color: var(--el-color-info-lighter);
}
}
//预约
.tab3 {
.list {
.card :deep(.el-card__body) {
padding: 16px 0 0;
.el-divider {
margin-bottom: 0;
}
.grid-box {
.el-col {
height: 60px;
padding: 8px 0;
.wrap {
position: relative;
width: 100%;
height: 100%;
color: var(--el-color-info-light);
cursor: pointer;
&::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1px;
background-color: var(--el-border-color-base);
}
a {
height: 100%;
color: var(--el-color-info-light);
}
}
&:last-child .wrap {
&::before {
content: none;
}
}
}
}
}
.card:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px;
}
}
}
</style>

223
src/views/comtemp/search-video/search-video.vue
View File

@ -1,223 +0,0 @@
<template>
<PageWrapper>
<!-- 搜索框 -->
<el-card shadow="hover" :bordered="false" class="custom-box-card">
<h2 class="text-lg">搜索列表（视频）</h2>
<div class="mt-4 text-center">
<el-input
:style="{ width: '320px' }"
v-model="keywords"
placeholder="请输入关键字"
:prefix-icon="Search"
/>
</div>
</el-card>
<!-- 视频部分 start -->
<div class="mt-3 tab2">
<el-card shadow="hover" class="custom-box-card">
<!-- 分类 -->
<div class="p-5">
<el-skeleton :rows="1" :loading="loading" style="width: 100%">
<template #default>
<div class="flex items-start classification justify-between mt-2.5">
<div class="flex-none label">分类: </div>
<div class="flex-grow">
<el-space wrap size="small" :class="!isCollapse ? 'height-limited' : ''">
<el-tag
size="large"
v-for="(item, index) in categoryListData"
:key="index"
@click="selectedHandle(index)"
:class="categoryIndex != index ? 'noSelected' : ''"
>{{ item.name }}</el-tag
>
</el-space>
</div>
<div
class="flex items-center justify-end flex-none cursor-pointer collapse-btn"
:style="`color:var(--el-color-primary-light-1)`"
@click="collapseHandle"
>{{ isCollapse ? '收起' : '展开' }}
<el-icon
><arrow-up-bold class="ml-1" v-if="isCollapse" /><arrow-down-bold
class="ml-1"
v-else /></el-icon
></div>
</div>
</template>
</el-skeleton>
<div class="flex items-start items-center justify-between mt-4 classification">
<div class="flex-none label">排序:</div>
<div class="flex-grow">
<el-radio-group v-model="radio">
<el-radio :label="1">最新</el-radio>
<el-radio :label="2">最热</el-radio>
<el-radio :label="3">评分最高</el-radio>
</el-radio-group>
</div>
</div>
</div>
</el-card>
<!-- 视频 -->
<el-row :gutter="12" class="list">
<el-col
:xs="12"
:sm="8"
:md="8"
:lg="6"
:xl="4"
v-for="item in videoListData"
:key="item.id"
>
<el-card shadow="hover" class="custom-box-card">
<el-image :src="item.cover" class="cover" />
<div class="p-3">
<div>
<h3 class="text-base font-bold truncate">{{ item.title }}</h3>
<p class="my-1 text-gray-500 roy-line-2">简介：{{ item.summary }}</p>
</div>
<div class="flex items-center justify-between text-gray-400">
<div>
<el-icon class="mr-1 align-middle"><video-play /></el-icon>
<span class="text-xs">{{ item.viewingtimes }}万</span></div
>
<div class="flex items-center justify-center">
<div v-for="(avatar, i) in item.avatargroup" :key="i">
<el-avatar :size="20" :src="avatar.src" />
</div>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 加载更多 -->
<el-card shadow="hover" class="mt-3 text-center custom-box-card">
<el-button :loading="loadingMore" @click="loadMore">加载更多</el-button>
</el-card>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Search, ArrowUpBold, ArrowDownBold, VideoPlay } from '@element-plus/icons-vue';
import { categoryList } from '@/api/comtemp/category';
import { videoList } from '@/api/comtemp/video';
const keywords = ref('');
const loading = ref(true);
const categoryIndex = ref(-1);
const isCollapse = ref(false);
const categoryListData = ref();
const videoListData = ref();
const pageSize = ref(12);
const loadingMore = ref(false);
const radio = ref(1);
//获取分类列表
async function getCategoryList() {
const res = await categoryList();
categoryListData.value = res && res.list ? res.list : [];
loading.value = false;
}
//分类选中
function selectedHandle(index) {
categoryIndex.value = index;
console.log(categoryIndex.value);
}
//是否展开
function collapseHandle() {
isCollapse.value = !isCollapse.value;
}
//获取视频列表
async function getVideoList() {
const res = await videoList({ pageSize: pageSize.value });
videoListData.value = res && res.list ? res.list : [];
loadingMore.value = false;
}
//加载更多
function loadMore() {
loadingMore.value = true;
pageSize.value = pageSize.value + 12;
getVideoList();
}
onMounted(() => {
//获取分类
getCategoryList();
//获取文章
getVideoList();
});
</script>
<style lang="scss" scoped>
// 处理栅格
.el-row {
padding-top: 6px;
margin: -6px;
.el-row {
padding-top: 0;
}
}
.el-col {
padding-top: 6px;
padding-bottom: 6px;
}
// 卡片定制
.custom-box-card {
border: none;
}
//分类
.classification {
.label,
.collapse-btn {
height: 32px;
font-size: 14px;
line-height: 30px;
}
.label {
width: 60px;
}
.collapse-btn {
width: 60px;
}
.height-limited {
height: 40px;
overflow: hidden;
}
.el-tag {
cursor: pointer;
}
.el-tag.noSelected {
background-color: transparent;
border-color: transparent;
color: var(--el-color-info-lighter);
}
}
//视频
.tab2 {
.list {
margin-top: 0;
:deep(.el-card .el-card__body) {
padding: 0;
p {
height: 42px;
}
}
.card:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px;
}
}
}
</style>

641
src/views/dashboard/monitor/index.vue
View File

@ -1,641 +0,0 @@
<template>
<PageWrapper>
<!--数据卡片-->
<el-row :gutter="12" class="pt-0">
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">访问量</span>
<el-tag class="ml-2" type="success">日</el-tag>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between px-1 py-1">
<CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-3xl" />
</div>
<div class="flex justify-between px-1 py-1">
<div class="text-sm">
日同比
<CountTo :startVal="1" suffix="%" :endVal="info.visits.rise" />
<el-icon :color="`var(--el-color-success)`" size="14"
><ArrowUpOutlined
/></el-icon>
</div>
<div class="text-sm">
周同比
<CountTo :startVal="1" suffix="%" :endVal="info.visits.decline" />
<el-icon :color="`var(--el-color-success)`" size="14"
><ArrowUpOutlined
/></el-icon>
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 总访问量：</div>
<div class="text-sm">
<CountTo :startVal="1" :endVal="info.visits.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">销售额</span>
<el-tag class="ml-2">周</el-tag>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between px-1 py-2">
<CountTo
prefix="￥"
:startVal="1"
:endVal="info.saleroom.weekSaleroom"
class="text-3xl"
/>
</div>
<div class="flex justify-between px-2 py-1">
<div class="flex-1 text-sm">
<el-progress :percentage="70" />
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 总销售额：</div>
<div class="text-sm">
<CountTo prefix="￥" :startVal="1" :endVal="info.saleroom.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">订单量</span>
<el-tag class="ml-2" type="warning">周</el-tag>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between px-1 py-1">
<CountTo :startVal="1" :endVal="info.orderLarge.weekLarge" class="text-3xl" />
</div>
<div class="flex justify-between px-1 py-1">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.rise" />
<el-icon :color="`var(--el-color-danger)`" size="14"
><ArrowDownOutlined
/></el-icon>
</div>
<div class="text-sn">
周同比
<CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.decline" />
<el-icon :color="`var(--el-color-danger)`" size="14"
><ArrowDownOutlined
/></el-icon>
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 转化率：</div>
<div class="text-sm">
<CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">成交额</span>
<el-tag class="ml-2" type="danger">月</el-tag>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between px-1 py-1">
<CountTo
prefix="￥"
:startVal="1"
:endVal="info.volume.weekLarge"
class="text-3xl"
/>
</div>
<div class="flex justify-between px-1 py-1">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="info.volume.rise" />
<el-icon :color="`var(--el-color-success)`" size="14"
><ArrowUpOutlined
/></el-icon>
</div>
<div class="text-sn">
月同比
<CountTo :startVal="1" suffix="%" :endVal="info.volume.decline" />
<el-icon :color="`var(--el-color-danger)`" size="14"
><ArrowDownOutlined
/></el-icon>
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 总成交额：</div>
<div class="text-sm">
<CountTo prefix="￥" :startVal="1" :endVal="info.volume.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
<!--导航卡片-->
<el-row :gutter="12">
<el-col
:xs="24"
:sm="12"
:md="6"
:lg="6"
:xl="3"
v-for="(item, index) in iconList"
:key="index"
>
<el-card shadow="hover" class="custom-box-card">
<el-skeleton :rows="3" :loading="loading" style="width: 100%">
<template #default>
<div class="py-2 cursor-pointer">
<p class="flex justify-center">
<i :style="{ width: '32px', color: item.color, fontSize: `${item.size}px` }">
<component
:is="item.icon"
:style="{ color: item.color, fontSize: `${item.size}px` }"
v-on="item.eventObject || {}"
/>
</i>
</p>
<p class="flex justify-center mb-0"
><span>{{ item.title }}</span></p
>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
<!-- 待办任务和收入来源 -->
<el-row :gutter="12">
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between card-header">
<div class="flex items-center">
<el-icon :size="20" :color="`var(--el-color-warning)`">
<FileDoneOutlined /> </el-icon
><div class="ml-1 text-base">待办任务</div>
</div>
<el-link href="#" target="_blank" type="primary">更多</el-link>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default
><el-table :data="toDoTasks" style="width: 100%">
<el-table-column prop="task" label="任务说明" width="250" />
<el-table-column prop="modular" label="模块" align="center" />
<el-table-column prop="collaborators" label="协作者" header-align="center">
<template #default="scope">
<div class="flex items-center justify-center">
<div v-for="val in scope.row.collaborators" :key="val">
<el-avatar :size="20" :src="val.avatar" />
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="tester" label="测试者" header-align="center">
<template #default="scope">
<div class="flex items-center justify-center">
<div v-for="val in scope.row.tester" :key="val">
<el-avatar :size="20" :src="val.avatar" />
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="isComplete" label="完成度" align="center">
<template #default="scope">
<el-tag :type="scope.row.isComplete ? 'success' : 'danger'">{{
scope.row.isMember ? '是' : '否'
}}</el-tag>
</template>
</el-table-column>
</el-table></template
>
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default><Pie /></template>
</el-skeleton>
<el-table :data="revenue" style="width: 100%">
<el-table-column prop="source" label="来源" />
<el-table-column prop="value" label="收入" sortable align="right" width="80" />
<el-table-column prop="address" label="占比" :formatter="formatter" align="right" />
</el-table>
</el-card>
</el-col>
</el-row>
<!--访问量 | 流量趋势-->
<el-row :gutter="12" class="mb-3">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-card shadow="hover" class="custom-box-card">
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default><VisiTab /></template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import Pie from '../console/components/Pie.vue';
import { getConsoleInfo } from '@/api/dashboard/console';
import VisiTab from '../console/components/VisiTab.vue';
import { CountTo } from '@/components/CountTo/index';
import {
UsergroupAddOutlined,
BarChartOutlined,
ShoppingCartOutlined,
AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined,
FileDoneOutlined,
ArrowUpOutlined,
ArrowDownOutlined,
} from '@vicons/antd';
import { avatarEnum } from '@/enums/avatarEnum';
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
const loading = ref(true);
const info = reactive<any>({
saleroom: {},
orderLarge: {},
visits: {},
volume: {},
});
// 图标列表
const iconList = [
{
icon: UsergroupAddOutlined,
size: '32',
title: '用户',
color: '#69c0ff',
eventObject: {
click: () => {},
},
},
{
icon: BarChartOutlined,
size: '32',
title: '分析',
color: '#69c0ff',
eventObject: {
click: () => {},
},
},
{
icon: ShoppingCartOutlined,
size: '32',
title: '商品',
color: '#ff9c6e',
eventObject: {
click: () => {},
},
},
{
icon: AccountBookOutlined,
size: '32',
title: '订单',
color: '#b37feb',
eventObject: {
click: () => {},
},
},
{
icon: CreditCardOutlined,
size: '32',
title: '票据',
color: '#ffd666',
eventObject: {
click: () => {},
},
},
{
icon: MailOutlined,
size: '32',
title: '消息',
color: '#5cdbd3',
eventObject: {
click: () => {},
},
},
{
icon: TagsOutlined,
size: '32',
title: '标签',
color: '#ff85c0',
eventObject: {
click: () => {},
},
},
{
icon: SettingOutlined,
size: '32',
title: '配置',
color: '#ffc069',
eventObject: {
click: () => {},
},
},
];
onMounted(async () => {
// const res = await getConsoleInfo();
// info.saleroom = res.saleroom;
// info.orderLarge = res.orderLarge;
// info.visits = res.visits;
// info.volume = res.volume;
loading.value = false;
});
//待办任务
const toDoTasks = [
{
id: 1,
task: '支付页面增加飞贷分期的选择',
modular: '支付',
collaborators: [
{
id: 1,
avatar: avatarEnum.avatarImg1,
},
{
id: 2,
avatar: avatarEnum.avatarImg2,
},
{
id: 3,
avatar: avatarEnum.avatarImg3,
},
],
tester: [
{
id: 1,
avatar: avatarEnum.avatarImg4,
},
{
id: 2,
avatar: avatarEnum.avatarImg5,
},
],
isComplete: true,
},
{
id: 2,
task: '新增banner轮播图广告',
modular: '广告',
collaborators: [
{
id: 1,
avatar: avatarEnum.avatarImg2,
},
{
id: 2,
avatar: avatarEnum.avatarImg3,
},
],
tester: [
{
id: 1,
avatar: avatarEnum.avatarImg6,
},
],
isComplete: false,
},
{
id: 3,
task: '开发微信小程序',
modular: '营销',
collaborators: [
{
id: 1,
avatar: avatarEnum.avatarImg5,
},
],
tester: [
{
id: 1,
avatar: avatarEnum.avatarImg1,
},
],
isComplete: false,
},
{
id: 4,
task: '支付页面增加支付宝支付',
modular: '支付',
collaborators: [
{
id: 1,
avatar: avatarEnum.avatarImg1,
},
{
id: 2,
avatar: avatarEnum.avatarImg2,
},
{
id: 3,
avatar: avatarEnum.avatarImg3,
},
],
tester: [
{
id: 1,
avatar: avatarEnum.avatarImg4,
},
{
id: 2,
avatar: avatarEnum.avatarImg5,
},
],
isComplete: true,
},
{
id: 5,
task: '新增弹出框广告增强效果',
modular: '广告',
collaborators: [
{
id: 1,
avatar: avatarEnum.avatarImg2,
},
{
id: 2,
avatar: avatarEnum.avatarImg3,
},
],
tester: [
{
id: 1,
avatar: avatarEnum.avatarImg6,
},
],
isComplete: false,
},
{
id: 6,
task: '新增微信支付',
modular: '支付',
collaborators: [
{
id: 1,
avatar: avatarEnum.avatarImg5,
},
],
tester: [
{
id: 1,
avatar: avatarEnum.avatarImg1,
},
],
isComplete: false,
},
{
id: 7,
task: '新增百度商桥',
modular: '营销',
collaborators: [
{
id: 1,
avatar: avatarEnum.avatarImg6,
},
],
tester: [
{
id: 1,
avatar: avatarEnum.avatarImg2,
},
],
isComplete: false,
},
];
//收入表列描述信息
// const columns = [
// {
// title: '来源',
// dataIndex: 'source',
// },
// {
// title: '收入',
// dataIndex: 'value',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '占比',
// dataIndex: 'answer',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// ];
//收入表
const revenue: any = [
{
id: 1,
source: '互联网',
value: 525,
answer: '',
},
{
id: 2,
source: '实体门店',
value: 305,
answer: '',
},
{
id: 3,
source: '境外',
value: 134,
answer: '',
},
{
id: 4,
source: '其他',
value: 60,
answer: '',
},
];
interface User {
source: string;
value: number;
}
//计算总数
const getTotal = revenue.reduce((a, b) => {
return a + b.value;
}, 0);
//计算百分比
function answerCount(value: number) {
return Math.floor((value / getTotal) * 100) + '%';
}
const formatter = (row: User) => {
return answerCount(row.value);
};
</script>
<style lang="scss" scoped>
// 右侧内容区域背景色
.admin-layout-content-main {
background: var(--el-bg-color);
}
// 处理栅格
.el-row {
padding-top: 6px;
margin: -6px;
.el-row {
padding-top: 0;
}
}
.el-col {
padding-top: 6px;
padding-bottom: 6px;
}
// 卡片定制
.custom-box-card {
border: none;
}
</style>

303
src/views/dashboard/workplace/index.vue
View File

@ -1,303 +0,0 @@
<template>
<PageWrapper>
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">工作台</span>
</div>
</template>
<el-row :gutter="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="flex items-center">
<div>
<el-avatar :size="64" :src="schoolboy" />
</div>
<div>
<p class="px-4 text-xl">早安，Ah jung，开始您一天的工作吧！</p>
<p class="px-4 font-extralight">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="flex justify-end w-full mt-4 sm:mt-0">
<div class="flex flex-col justify-center flex-1 text-center md:text-right">
<span class="text-secondary">项目数</span>
<span class="text-2xl">16</span>
</div>
<div class="flex flex-col justify-center flex-1 text-center md:text-right">
<span class="text-secondary">待办</span>
<span class="text-2xl">3/15</span>
</div>
<div class="flex flex-col justify-center flex-1 text-center md:text-right">
<span class="text-secondary">消息</span>
<span class="text-2xl">35</span>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-row :gutter="12" class="mt-0">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mt-2">
<!-- 项目 -->
<el-card shadow="hover" class="custom-box-card project-card-wrap">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">项目</span>
</div>
</template>
<div class="flex flex-wrap project-card">
<el-card shadow="hover" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-row items-center">
<GithubOutlined class="w-10" />
<span class="ml-4 text-lg">Github</span>
</div>
<div class="flex h-10 mt-2 overflow-hidden font-extralight">
是一个面向开源及私有软件项目的托管平台。
</div>
<div class="flex h-10 mt-2 font-extralight"> 开源君，2021-07-04 </div>
</el-card>
<el-card
shadow="hover"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex items-center">
<TaobaoCircleOutlined class="w-10" style="color: #42b983" />
<span class="ml-4 text-lg">淘宝网</span>
</div>
<div class="flex h-10 mt-2 overflow-hidden font-extralight">
只有你想不到，没有你淘不到
</div>
<div class="flex h-10 mt-2 font-extralight"> 购物天地 2021-04-01</div>
</el-card>
<el-card
shadow="hover"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex items-center">
<Html5Outlined class="w-10" style="color: #e44c27" />
<span class="ml-4 text-lg">Html5</span>
</div>
<div class="flex h-10 mt-2 overflow-hidden font-extralight">
HTML5是互联网的下一代标准。
</div>
<div class="flex h-10 mt-2 font-extralight"> 撸码也是一种艺术 2021-04-01 </div>
</el-card>
<el-card
shadow="hover"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex items-center">
<WeiboCircleOutlined class="w-10" style="color: #dd0031" />
<span class="ml-4 text-lg">微博</span>
</div>
<div class="flex h-10 mt-2 overflow-hidden font-extralight">
分享简短实时信息的社交平台。
</div>
<div class="flex h-10 mt-2 font-extralight"> 分享君 2021-07-04。 </div>
</el-card>
<el-card
shadow="hover"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex items-center">
<QqOutlined class="w-10" style="color: #61dafb" />
<span class="ml-4 text-lg">腾讯QQ</span>
</div>
<div class="flex h-10 mt-2 overflow-hidden font-extralight">
一款基于互联网的即时通信软件。
</div>
<div class="flex h-10 mt-2 font-extralight"> 00后天地 2021-07-04。 </div>
</el-card>
<el-card
shadow="hover"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex items-center">
<AlipayCircleOutlined class="w-10" style="color: #61dafb" />
<span class="ml-4 text-lg">支付宝</span>
</div>
<div class="flex h-10 mt-2 overflow-hidden font-extralight">
致力于为企业和个人提供，简单、安全、快速、支付解决方案。
</div>
<div class="flex h-10 mt-2 font-extralight"> 支付工具 2021-07-04 </div>
</el-card>
</div>
</el-card>
<!-- 动态 -->
<el-card shadow="hover" class="mt-3 custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">动态</span>
</div>
</template>
<ul class="divide-y divide-gray-300 divide-solid">
<li v-for="(item, index) in dynamicList" :key="index" class="flex p-4">
<div>
<el-avatar :size="40" :src="schoolboy" />
</div>
<div class="ml-4">
<p class="text-base">{{ item.title }}</p>
<p class="text-sm font-extralight">{{ item.date }}</p>
</div>
</li>
</ul>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mt-2">
<el-card shadow="hover" class="custom-box-card project-card-wrap">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">快捷操作</span>
</div>
</template>
<div class="flex flex-wrap project-card">
<el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center font-extralight">
<span class="text-center">
<DashboardOutlined class="w-8" style="color: #68c755" />
</span>
<span class="text-center text-lx">主控台</span>
</div>
</el-card>
<el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center font-extralight">
<span class="text-center">
<ProfileOutlined class="w-8" style="color: #fab251" />
</span>
<span class="text-center text-lx">列表</span>
</div>
</el-card>
<el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center font-extralight">
<span class="text-center">
<FileProtectOutlined class="w-8" style="color: #1890ff" />
</span>
<span class="text-center text-lx">表单</span>
</div>
</el-card>
<el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center font-extralight">
<span class="text-center">
<ApartmentOutlined class="w-8" style="color: #f06b96" />
</span>
<span class="text-center text-lx">权限管理</span>
</div>
</el-card>
<el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center font-extralight">
<span class="text-center">
<SettingOutlined class="w-8" style="color: #7238d1" />
</span>
<span class="text-center text-lx">系统管理</span>
</div>
</el-card>
<el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center font-extralight">
<span class="text-center">
<MailOutlined class="w-8" style="color: #5cdbd3" />
</span>
<span class="text-center text-lx">消息</span>
</div>
</el-card>
</div>
</el-card>
<!-- 图片 -->
<el-card shadow="hover" class="mt-3 custom-box-card"
><img src="~@/assets/images/Business.svg" class="w-full"
/></el-card>
</el-col>
</el-row>
</PageWrapper>
</template>
<script lang="ts" setup>
import schoolboy from '@/assets/images/schoolboy.png';
import {
GithubOutlined,
DashboardOutlined,
ProfileOutlined,
FileProtectOutlined,
SettingOutlined,
ApartmentOutlined,
Html5Outlined,
MailOutlined,
TaobaoCircleOutlined,
WeiboCircleOutlined,
QqOutlined,
AlipayCircleOutlined,
} from '@vicons/antd';
const dynamicList = [
{
title: 'Ah Jung 刚才把工作台页面随便写了一些，凑合能看了！',
date: '2021-07-04 22:37:16',
},
{
title: 'Ah Jung 在 开源组 创建了项目 管理员？',
date: '2021-07-04 09:37:16',
},
{
title: '@风清扬，向管理员提交了一个bug，抽时间看看吧！',
date: '2021-07-04 22:37:16',
},
{
title: '技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！',
date: '2021-07-04 09:37:16',
},
{
title: '上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！',
date: '2021-07-04 20:37:16',
},
];
</script>
<style lang="scss" scoped>
// 处理栅格
.el-row {
padding-top: 6px;
margin: -6px;
.el-row {
padding-top: 0;
}
}
.el-col {
padding-top: 6px;
padding-bottom: 6px;
}
// 卡片定制
.custom-box-card {
border: none;
}
.project-card-wrap {
> :deep(.el-card__body) {
padding: 0;
.project-card {
&-item {
width: 33.333333%;
border: none;
border-radius: inherit;
border-right: 1px solid var(--el-border-color-base);
border-bottom: 1px solid var(--el-border-color-base);
&:nth-child(3n) {
border-right: none;
}
&:nth-child(n + 4) {
border-bottom: none;
}
}
}
}
.el-card.is-always-shadow {
box-shadow: none;
}
svg {
display: inline-block;
}
}
</style>

64
src/views/feature/copy/copy.vue
View File

@ -1,64 +0,0 @@
<template>
<PageWrapper title="文本复制" content="文本复制示例，用于常规订单号，编号，快速复制等场景">
<el-card
shadow="never"
title="基本信息"
class="mt-3 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
<el-descriptions label-placement="left" class="py-2">
<el-descriptions-item>
<template #label>收款人姓名</template>
啊俊
</el-descriptions-item>
<el-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</el-descriptions-item>
<el-descriptions-item label="付款类型">支付宝</el-descriptions-item>
<el-descriptions-item label="付款账户">
{{ account }}
<el-button size="small" type="primary" @click="handleAccountCopy">复制</el-button>
</el-descriptions-item>
<el-descriptions-item label="转账金额">
<el-space>
<el-input v-model="money" placeholder="多少都是意" />
<el-button type="primary" @click="handleMoneyCopy">复制</el-button>
</el-space>
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag type="success"> 已到账</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard';
import { ElMessage } from 'element-plus';
const { clipboardRef, copiedRef } = useCopyToClipboard();
const account = ref('NaiveUiAdmin@163.com');
const money = ref(null);
function handleAccountCopy() {
const value = unref(account.value);
clipboardRef.value = value;
if (unref(copiedRef)) {
ElMessage.success(`拷贝成功：${value}`);
}
}
function handleMoneyCopy() {
const value = unref(money.value);
if (!value) {
ElMessage.warning('请输入要复制的内容！');
return;
}
clipboardRef.value = value;
if (unref(copiedRef)) {
ElMessage.success(`拷贝成功：${value}`);
}
}
</script>

56
src/views/feature/download/download.vue
View File

@ -1,56 +0,0 @@
<template>
<PageWrapper title="文件下载" content="文件下载示例，用于各种场景下载文件或者图片">
<el-card shadow="never" class="mt-3 proCard">
<el-alert :show-icon="false" title="后台接口文件流下载" type="info">
<el-button class="mt-2" type="primary" @click="downloadFile">文件流下载</el-button>
</el-alert>
<el-divider />
<el-alert :show-icon="false" title="文件地址下载" type="info">
<el-button class="mt-2" type="primary" @click="downloadFileUrl">文件地址下载</el-button>
</el-alert>
<el-divider />
<el-alert :show-icon="false" title="base64流下载" type="info">
<el-button class="mt-2" type="primary" @click="downloadFileBase64">base64流下载</el-button>
</el-alert>
<el-divider />
<el-alert
:show-icon="false"
title="图片Url下载，如果有跨域问题，需要先处理图片跨域，才能下载"
type="info"
>
<el-button class="mt-2" type="primary" @click="downloadFileImgUrl">图片Url下载</el-button>
</el-alert>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import {
downloadByUrl,
downloadByData,
downloadByBase64,
downloadByOnlineUrl,
} from '@/utils/file/download';
import imgBase64 from './imgBase64';
const getName = new Date().valueOf();
function downloadFile() {
downloadByData('测试下载文件流', `${getName}-file.txt`);
}
function downloadFileUrl() {
downloadByUrl({
url: 'https://naive-ui-admin-docs.vercel.app/logo.png',
target: '_self',
});
}
function downloadFileBase64() {
downloadByBase64(imgBase64, `${getName}.png`);
}
function downloadFileImgUrl() {
downloadByOnlineUrl('https://naive-ui-admin-docs.vercel.app/logo.png', `${getName}.png`);
}
</script>

1
src/views/feature/download/imgBase64.ts
View File

File diff suppressed because one or more lines are too long

205
src/views/feature/excel/choiceExport.vue
View File

@ -1,205 +0,0 @@
<template>
<PageWrapper title="导出示例" content="可以选择导出格式">
<el-card :bordered="false" class="mt-3 proCard">
<BasicTable
title="表格列表"
titleTooltip="这是一个提示"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@checked-row-change="onCheckedRow"
>
<template #toolbar>
<el-button type="primary" @click="openModal">导出数据</el-button>
</template>
</BasicTable>
</el-card>
<basicModal @register="modalRegister" ref="modalRef" @ok="okModal">
<template #default>
<BasicForm
@register="register"
@submit="handleSubmit"
@reset="handleReset"
class="basicForm"
/>
</template>
</basicModal>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, unref, ref, h } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { basicModal, useModal } from '@/components/Modal';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { getTableList } from '@/api/table/list';
import { columns } from '../../comp/table/basicColumns';
import { jsonToSheetXlsx } from '@/components/Excel';
import { ElMessageBox, ElMessage } from 'element-plus';
const schemas: FormSchema[] = [
{
field: 'filename',
component: 'Input',
label: '文件名',
labelMessage: '导出的文件以该名称命名',
componentProps: {
placeholder: '请输入文件名称',
onInput: (e: any) => {
console.log(e);
},
},
rules: [{ required: true, message: '请输入导出的文件名称', trigger: ['blur'] }],
},
{
field: 'bookType',
component: 'Select',
label: '文件类型',
componentProps: {
placeholder: '请选择文件类型',
options: [
{
label: 'xlsx',
value: 'xlsx',
},
{
label: 'html',
value: 'html',
},
{
label: 'csv',
value: 'csv',
},
{
label: 'txt',
value: 'txt',
},
],
onChange: (e: any) => {
console.log(e);
},
},
rules: [{ required: true, message: '请选择文件类型', trigger: ['change'] }],
},
];
const tableRef = ref();
const modalRef = ref();
const tableData = ref();
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
const [modalRegister, { openModal }] = useModal({
title: '导出数据',
});
const [register, { submit }] = useForm({
labelWidth: 120,
layout: 'horizontal',
// submitButtonText: '提交预约',
showActionButtonGroup: false,
schemas,
});
const actionColumn = reactive({
width: 150,
title: '操作',
key: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction, {
style: 'button',
actions: createActions(record),
});
},
});
async function okModal() {
const formRes = await submit();
if (formRes) {
modalRef.value.closeModal();
ElMessage.success('提交成功');
} else {
ElMessage.error('验证失败，请填写完整信息');
modalRef.value.setSubLoading(false);
}
}
function handleReset(values: Recordable) {
console.log(values);
}
function createActions(record) {
return [
{
label: '删除',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
},
];
}
const loadDataTable = async (res) => {
const result = await getTableList({ ...params, ...res });
tableData.value = result.list;
return result;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function handleDelete(record) {
console.log(record);
ElMessageBox.confirm(`您想删除${record.name}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
ElMessage.success('删除成功');
})
.catch(() => {});
}
function handleEdit(record) {
console.log(record);
ElMessage.success('您点击了编辑按钮');
}
function handleSubmit(values: Recordable) {
console.log(values);
// 默认Object.keys(data[0])作为header
const { filename, bookType } = values;
jsonToSheetXlsx({
data: unref(tableData),
filename: `${filename.split('.').shift()}.${bookType}`,
write2excelOpts: {
bookType,
},
});
ElMessage.success(JSON.stringify(values));
}
</script>
<style lang="scss" scoped></style>

139
src/views/feature/excel/jsonExport.vue
View File

@ -1,139 +0,0 @@
<template>
<PageWrapper title="导出示例" content="根据JSON格式的数据进行导出">
<el-card :bordered="false" class="mt-3 proCard">
<BasicTable
title="表格列表"
titleTooltip="这是一个提示"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
:scroll-x="1360"
@checked-row-change="onCheckedRow"
>
<template #toolbar>
<el-space>
<el-button type="primary" @click="customHeader">导出自定义表头</el-button>
<el-button type="primary" @click="defaultHeader">导出默认表头</el-button>
</el-space>
</template>
</BasicTable>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, ref, h, unref } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { columns } from '../../comp/table/basicColumns';
import { jsonToSheetXlsx } from '@/components/Excel';
import { ElMessageBox, ElMessage } from 'element-plus';
const actionRef = ref();
const tableData = ref();
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
const actionColumn = reactive({
width: 150,
title: '操作',
key: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction, {
style: 'button',
actions: createActions(record),
});
},
});
function createActions(record) {
return [
{
label: '删除',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
},
];
}
const loadDataTable = async (res) => {
const result = await getTableList({ ...params, ...res });
tableData.value = result.list;
return result;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function handleDelete(record) {
console.log(record);
ElMessageBox.confirm(`您想删除${record.name}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
ElMessage.success('删除成功');
})
.catch(() => {});
}
function handleEdit(record) {
console.log(record);
ElMessage.success('您点击了编辑按钮');
}
function defaultHeader() {
// 默认Object.keys(data[0])作为header
jsonToSheetXlsx({
data: unref(tableData),
filename: '使用key作为默认表头.xlsx',
});
}
function customHeader() {
jsonToSheetXlsx({
data: unref(tableData),
header: {
id: 'ID',
no: '编码',
name: '名称',
avatar: '头像',
address: '地址',
beginTime: '开始日期',
endTime: '结束时间',
status: '状态',
date: '创建时间',
time: '停留时间',
},
filename: '自定义表头.xlsx',
json2sheetOpts: {
// 指定顺序
//header: ['id', 'no','name','avatar','address','beginTime','endTime','status','date','time'],
},
});
}
</script>
<style lang="scss" scoped></style>

38
src/views/feature/print/print.vue
View File

@ -1,38 +0,0 @@
<template>
<PageWrapper title="打印场景" content="json 打印表格，图片打印">
<el-card shadow="never" class="mt-3 proCard">
<el-space>
<el-button type="primary" @click="jsonPrint">打印表格</el-button>
<el-button type="primary" @click="imagePrint">打印图片</el-button>
</el-space>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import printJS from 'print-js';
function jsonPrint() {
printJS({
printable: [
{ name: '汪伟', email: '735869@gmail.com', phone: '186****5653' },
{ name: '雷秀英', email: '235656452@gmail.com', phone: '135****6536' },
{ name: '邹芳', email: '24586526@gmail.com', phone: '159****5869' },
],
properties: ['name', 'email', 'phone'],
type: 'json',
});
}
function imagePrint() {
printJS({
printable: [
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
'https://element-plus.org/images/guide.png',
],
type: 'image',
header: 'Multiple Images',
imageStyle: 'width:100%;',
});
}
</script>

66
src/views/feature/tags/tagsAction.vue
View File

@ -1,66 +0,0 @@
<template>
<PageWrapper
title="多页签"
content="有些时候，可能要操作多页签标题，比如页面特定交互，详情页面区分，该操作仅限于，当前打开过并且显示的标签"
>
<el-card
shadow="never"
title="多页签操作"
class="mt-3 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
<el-space>
<el-button type="primary" @click="setTabsTitle">更新当前页面标题</el-button>
<el-button type="primary" plain @click="setTabsTitleSpecific">更新指定页面标题</el-button>
<el-button type="danger" @click="closeCurrent">关闭当前页</el-button>
</el-space>
<el-divider content-position="left">设置多页签状态</el-divider>
<el-space>
<el-button type="warning" @click="setTabState('undone')">设置当前页面状态未完成</el-button>
<el-button type="success" @click="setTabState('done')">设置当前页面状态已完成</el-button>
</el-space>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { useTabs } from '@/hooks/web/useTags';
import { ElMessage } from 'element-plus';
const useTagsHooks = useTabs();
function setTabsTitle() {
useTagsHooks.setTitle('货品详情：编码-3695');
ElMessage.success('设置成功');
}
function setTabsTitleSpecific() {
useTagsHooks.setTitle('指定页面标题', { name: '/list/basic-list' });
ElMessage.success('设置成功');
}
function closeCurrent() {
useTagsHooks.closeCurrent();
}
function setTabState(state: string) {
useTagsHooks.setTabState({
state,
dialogOptions: {
content: '页面尚未提交，是否关闭？',
},
});
const msg =
state === 'undone'
? '设置成功，点击当前页标签关闭按钮，试试效果'
: '取消成功，当前页标签，可以正常关闭';
ElMessage.success(msg);
}
//如果需要每次进入页面，都自定义，需要在 onMounted 中调用
onMounted(() => {
//setTabsTitle();
});
</script>

422
src/views/form/advancedForm/advancedForm.vue
View File

@ -1,422 +0,0 @@
<template>
<PageWrapper
title="高级表单"
content="当一次性提交大量数据时，可使用高级表单，根据自身情况选择是否使用 BasicForm
组件，以下布局支持自适应"
>
<el-form
ref="formRef"
:label-width="100"
:model="formValue"
:rules="rules"
label-placement="left"
>
<el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
<template #header>
<div class="card-header">
<span>预约信息</span>
</div>
</template>
<el-row :gutter="20">
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="预约姓名" prop="name">
<el-input v-model="formValue.name" placeholder="输入姓名" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="预约号码" prop="mobile">
<el-input v-model="formValue.mobile" placeholder="电话号码" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="预约时间" prop="datetime">
<el-date-picker class="w-full" v-model="formValue.datetime" type="datetime" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="预约医生" prop="doctor">
<el-select v-model="formValue.doctor" placeholder="请选择预约医生" class="w-full">
<el-option
v-for="item in doctorList"
:key="item.value"
:label="item.label"
:value="item.value"
/></el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="预约事项" prop="matter">
<el-select
v-model="formValue.matter"
multiple
placeholder="请选择预约事项"
class="w-full"
>
<el-option
v-for="item in matterList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="预约备注" prop="remark">
<el-input v-model="formValue.remark" placeholder="请输入预约备注" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="预约备注" prop="remark">
<el-input v-model="formValue.remark" placeholder="请输入预约备注" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="出生日期" prop="dateBirth">
<el-date-picker
class="w-full"
v-model="formValue.dateBirth"
type="datetime"
placeholder="请选择出生日期"
/>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
<template #header>
<div class="card-header">
<span>就诊信息</span>
</div>
</template>
<el-row :gutter="20">
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="过敏史" prop="allergiChistory">
<el-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="既往史" prop="pastHistory">
<el-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="传染史" prop="contagion">
<el-input v-model="formValue.contagion" placeholder="请输入传染史" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="身份证号" prop="idNo">
<el-input v-model="formValue.idNo" placeholder="请输入身份证号" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="介绍人" prop="introducer">
<el-input v-model="formValue.introducer" placeholder="请输入介绍人" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="就诊医生" prop="seeDoctor">
<el-select v-model="formValue.seeDoctor" placeholder="请选择就诊医生" class="w-full">
<el-option
v-for="item in doctorList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="初诊日期" prop="firstDatetime">
<el-date-picker
class="w-full"
v-model="formValue.firstDatetime"
type="datetime"
placeholder="请选择初诊日期"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="近次复诊" prop="subsequent">
<el-date-picker
class="w-full"
v-model="formValue.subsequent"
type="datetime"
placeholder="请选择近次复诊"
/>
</el-form-item>
</el-col>
<!-- <el-col>-->
<!-- <el-form-item label="图片" prop="img">-->
<!-- <BasicUpload-->
<!-- v-model="uploadList"-->
<!-- :action="`${uploadUrl}/v1.0/files`"-->
<!-- :data="{ type: 0 }"-->
<!-- :headers="uploadHeaders"-->
<!-- :height="100"-->
<!-- :width="100"-->
<!-- helpText="单个文件不超过20MB，最多只能上传10个文件"-->
<!-- name="files"-->
<!-- @uploadChange="uploadChange"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
</el-card>
<el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
<template #header>
<div class="card-header">
<span>患者信息</span>
</div>
</template>
<el-row :gutter="20">
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="过敏史" prop="allergiChistory">
<el-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="既往史" prop="pastHistory">
<el-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="传染史" prop="contagion">
<el-input v-model="formValue.contagion" placeholder="请输入传染史" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="身份证号" prop="idNo">
<el-input v-model="formValue.idNo" placeholder="请输入身份证号" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="介绍人" prop="introducer">
<el-input v-model="formValue.introducer" placeholder="请输入介绍人" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="就诊医生" prop="seeDoctor">
<el-select v-model="formValue.seeDoctor" placeholder="请选择就诊医生" class="w-full">
<el-option
v-for="item in doctorList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="初诊日期" prop="firstDatetime">
<el-date-picker
class="w-full"
v-model="formValue.firstDatetime"
type="datetime"
placeholder="请选择初诊日期"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
<el-form-item label="近次复诊" prop="subsequent">
<el-date-picker
class="w-full"
v-model="formValue.subsequent"
type="datetime"
placeholder="请选择近次复诊"
/>
</el-form-item>
</el-col>
<!-- <el-col>-->
<!-- <el-form-item label="图片" prop="img">-->
<!-- <BasicUpload-->
<!-- v-model="uploadList"-->
<!-- :action="`${uploadUrl}/v1.0/files`"-->
<!-- :data="{ type: 0 }"-->
<!-- :headers="uploadHeaders"-->
<!-- :height="100"-->
<!-- :width="100"-->
<!-- helpText="单个文件不超过20MB，最多只能上传10个文件"-->
<!-- name="files"-->
<!-- @uploadChange="uploadChange"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
</el-card>
</el-form>
<template #rightFooter>
<el-space>
<el-button @click="resetForm(formRef)">重置</el-button>
<el-button type="primary" @click="formSubmit(formRef)">提交</el-button>
</el-space>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
// import { BasicUpload } from '@/components/Upload';
// import { useGlobSetting } from '@/hooks/setting';
import type { ElForm } from 'element-plus';
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
// const globSetting = useGlobSetting();
const matterList = [
{
label: '种牙',
value: 1,
},
{
label: '补牙',
value: 2,
},
{
label: '根管',
value: 3,
},
];
const doctorList = [
{
label: '李医生',
value: 1,
},
{
label: '黄医生',
value: 2,
},
{
label: '张医生',
value: 3,
},
];
const rules = {
name: {
required: true,
message: '请输入预约姓名',
trigger: 'blur',
},
remark: {
required: true,
message: '请输入预约备注',
trigger: 'blur',
},
mobile: {
required: true,
message: '请输入预约电话号码',
trigger: ['input'],
},
datetime: {
required: true,
type: 'number',
message: '请选择预约时间',
trigger: ['blur', 'change'],
},
seeDoctor: {
required: true,
type: 'number',
message: '请选择就诊时间',
trigger: ['blur', 'change'],
},
firstDatetime: {
required: true,
type: 'number',
message: '请选择初诊时间',
trigger: ['blur', 'change'],
},
doctor: {
required: true,
type: 'number',
message: '请选择预约医生',
trigger: 'change',
},
};
// const { uploadUrl } = globSetting;
interface IformValue {
name: string;
mobile: string;
remark: string;
sex: number;
matter: number[];
doctor: number;
dateBirth: string;
allergiChistory: string;
pastHistory: string;
contagion: string;
idNo: string;
introducer: string;
seeDoctor: string;
firstDatetime: string;
subsequent: string;
datetime: [];
}
const formValue = reactive<IformValue>({
name: '',
mobile: '',
remark: '',
sex: 1,
matter: [1],
doctor: 1,
dateBirth: '',
allergiChistory: '',
pastHistory: '',
contagion: '',
idNo: '',
subsequent: '',
firstDatetime: '',
seeDoctor: '',
introducer: '',
datetime: [],
});
// const uploadList = ref([
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// ]);
// const uploadHeaders = reactive({
// platform: 'miniPrograms',
// timestamp: new Date().getTime(),
// token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
// });
function formSubmit(formEl: FormInstance | undefined) {
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
console.log('submit!');
ElMessage.success('验证成功');
} else {
ElMessage.error('验证失败，请填写完整信息');
}
});
}
function resetForm(formEl: FormInstance | undefined) {
if (!formEl) return;
formEl.resetFields();
}
// function uploadChange(list: string[]) {
// console.log(list);
// }
</script>

213
src/views/form/basicForm/index.vue
View File

@ -1,213 +0,0 @@
<template>
<PageWrapper
title="基础表单"
content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式。"
>
<el-card shadow="never" class="mt-3 proCard">
<el-row :gutter="20" justify="center">
<el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
<el-form
ref="formRef"
:label-width="80"
:model="formValue"
:rules="rules"
class="py-8"
label-placement="left"
>
<el-form-item label="预约姓名" prop="name">
<el-input v-model="formValue.name" placeholder="输入姓名" clearable />
</el-form-item>
<el-form-item label="预约号码" prop="mobile">
<el-input v-model="formValue.mobile" placeholder="电话号码" clearable />
</el-form-item>
<el-form-item label="预约时间" prop="datetime">
<el-date-picker
v-model="formValue.datetime"
placeholder="请选择预约时间"
type="datetime"
clearable
/>
</el-form-item>
<el-form-item label="预约医生" prop="doctor">
<el-select v-model="formValue.doctor" placeholder="请选择预约医生" clearable>
<el-option
v-for="item in doctorList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="预约事项" prop="matter">
<el-select v-model="formValue.matter" multiple placeholder="请选择预约事项" clearable>
<el-option
v-for="item in matterList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="formValue.sex" name="sex">
<el-space>
<el-radio :value="1">男</el-radio>
<el-radio :value="2">女</el-radio>
</el-space>
</el-radio-group>
</el-form-item>
<el-form-item label="预约备注" prop="remark">
<el-input
v-model="formValue.remark"
placeholder="请输入预约备注"
type="textarea"
clearable
/>
</el-form-item>
<!-- <el-form-item label="图片" prop="img">
<BasicUpload
v-model="uploadList"
:action="`${uploadUrl}/v1.0/files`"
:data="{ type: 0 }"
:headers="uploadHeaders"
:height="100"
:width="100"
helpText="单个文件不超过20MB，最多只能上传10个文件"
name="files"
@uploadChange="uploadChange"
/>
</el-form-item> -->
<el-form-item>
<el-space>
<el-button type="primary" @click="formSubmit(formRef)">提交预约</el-button>
<el-button @click="resetForm(formRef)">重置</el-button>
</el-space>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
</PageWrapper>
</template>
<script lang="ts">
export default {
name: 'BasicForm',
};
</script>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElMessage, FormRules } from 'element-plus';
// import { BasicUpload } from '@/components/Upload';
// import { useGlobSetting } from '@/hooks/setting';
import type { ElForm } from 'element-plus';
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
// const globSetting = useGlobSetting();
const matterList = [
{
label: '种牙',
value: 1,
},
{
label: '补牙',
value: 2,
},
{
label: '根管',
value: 3,
},
];
const doctorList = [
{
label: '李医生',
value: 1,
},
{
label: '黄医生',
value: 2,
},
{
label: '张医生',
value: 3,
},
];
const rules: FormRules = {
name: {
required: true,
message: '请输入预约姓名',
trigger: 'blur',
},
remark: {
required: true,
message: '请输入预约备注',
trigger: 'blur',
},
mobile: {
required: true,
message: '请输入预约电话号码',
trigger: 'blur',
},
datetime: {
required: true,
type: 'date',
message: '请选择预约时间',
trigger: 'change',
},
doctor: {
required: true,
type: 'number',
message: '请选择预约医生',
trigger: 'change',
},
};
// const { uploadUrl } = globSetting;
const formValue = reactive({
name: '',
mobile: '',
remark: '',
sex: 1,
matter: undefined,
doctor: undefined,
datetime: undefined,
});
// const uploadList = ref([
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// ]);
// const uploadHeaders = reactive({
// platform: 'miniPrograms',
// timestamp: new Date().getTime(),
// token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
// });
function formSubmit(formEl: FormInstance | undefined) {
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
console.log('submit!');
ElMessage.success('验证成功');
} else {
ElMessage.error('验证失败，请填写完整信息');
}
});
}
function resetForm(formEl: FormInstance | undefined) {
if (!formEl) return;
formEl.resetFields();
}
// function uploadChange(list: string[]) {
// console.log(list);
// }
</script>

83
src/views/form/detail/index.vue
View File

@ -1,83 +0,0 @@
<template>
<PageWrapper title="表单详情" content="表单除了提交数据，有时也用于显示只读信息。">
<el-card shadow="never" class="mt-3 proCard">
<el-descriptions label-placement="left" class="py-2" title="基本信息">
<el-descriptions-item>
<template #label>收款人姓名</template>
啊俊
</el-descriptions-item>
<el-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</el-descriptions-item>
<el-descriptions-item label="付款类型">支付宝</el-descriptions-item>
<el-descriptions-item label="付款账户">NaiveUiAdmin@163.com</el-descriptions-item>
<el-descriptions-item label="转账金额">￥1980.00</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag type="success"> 已到账</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card shadow="never" class="mt-3 proCard">
<el-descriptions label-placement="left" class="py-2" title="其它信息">
<el-descriptions-item>
<template #label>城市</template>
深圳
</el-descriptions-item>
<el-descriptions-item label="性别">男</el-descriptions-item>
<el-descriptions-item label="邮箱">NaiveUiAdmin@qq.com</el-descriptions-item>
<el-descriptions-item label="地址">广东省深圳市南山区</el-descriptions-item>
<el-descriptions-item label="生日">1991-06-04</el-descriptions-item>
<el-descriptions-item label="认证">
<el-tag type="success"> 已认证</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card
shadow="never"
title="表格信息"
class="mt-3 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" />
<el-table-column prop="gender" label="性别" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="birthday" label="生日" />
<el-table-column fixed="right" label="操作" width="140">
<template #default>
<el-button type="danger" size="small">删除</el-button>
<el-button type="primary" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</PageWrapper>
</template>
<script lang="ts" setup>
const tableData = [
{
name: 'Ah jung',
gender: '男',
address: '深圳',
birthday: '2000-12-09',
},
{
name: '西门飞雪',
gender: '男',
address: '广州',
birthday: '1991-09-11',
},
{
name: '泰坦巨人',
gender: '男',
address: '北京',
birthday: '1990-11-03',
},
{
name: '猎魔人',
gender: '女',
address: '上海',
birthday: '1992-03-11',
},
];
</script>

125
src/views/form/stepForm/Step1.vue
View File

@ -1,125 +0,0 @@
<template>
<el-form
ref="formRef"
:label-width="95"
:model="formValue"
:rules="rules"
label-placement="left"
style="margin: 40px auto 0 0px"
>
<el-form-item label="付款账户" prop="myAccount">
<el-select v-model="formValue.myAccount" class="w-full" placeholder="请选择付款账户">
<el-option
v-for="item in myAccountList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="收款账户" prop="account">
<el-select v-model="formValue.accountType" class="w-1/5 mr-3" placeholder="请选择">
<el-option
v-for="item in accountTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-input v-model="formValue.account" class="flex-1" placeholder="请输入收款账户" />
</el-form-item>
<el-form-item label="收款人姓名" prop="name">
<el-input v-model="formValue.name" placeholder="请输入收款人姓名" />
</el-form-item>
<el-form-item label="转账金额" prop="money">
<el-input v-model="formValue.money" placeholder="请输入转账金额">
<template #prefix>
<span class="text-gray-400">￥</span>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="formSubmit(formRef)">下一步</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { ElForm } from 'element-plus';
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const myAccountList = [
{
label: 'NaiveUiAdmin@163.com',
value: 1,
},
{
label: 'NaiveUiAdmin@qq.com',
value: 2,
},
];
const accountTypeList = [
{
label: '微信',
value: 1,
},
{
label: '支付宝',
value: 2,
},
];
const emit = defineEmits(['nextStep']);
const formValue = ref({
accountType: 1,
myAccount: null,
account: 'xioama@qq.com',
money: '1980',
name: 'Ah jung',
});
const rules = {
name: {
required: true,
message: '请输入收款人姓名',
trigger: 'blur',
},
account: {
required: true,
message: '请输入收款账户',
trigger: 'blur',
},
money: {
required: true,
message: '请输入转账金额',
trigger: 'blur',
},
myAccount: {
required: true,
type: 'number',
message: '请选择付款账户',
trigger: 'change',
},
};
function formSubmit(formEl: FormInstance | undefined) {
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
emit('nextStep');
} else {
ElMessage({
message: '验证失败，请填写完整信息',
type: 'error',
});
}
});
}
</script>

79
src/views/form/stepForm/Step2.vue
View File

@ -1,79 +0,0 @@
<template>
<el-form
ref="formRef"
:label-width="90"
:model="formValue"
:rules="rules"
style="margin: 40px auto 0 0"
>
<el-form-item label="付款账户" prop="myAccount">
<span>NaiveUiAdmin@163.com</span>
</el-form-item>
<el-form-item label="收款账户" prop="account">
<span>NaiveUiAdmin@qq.com</span>
</el-form-item>
<el-form-item label="收款人姓名" prop="name">
<span>Ah jung</span>
</el-form-item>
<el-form-item label="转账金额" prop="money">
<span>￥1980</span>
</el-form-item>
<el-divider />
<el-form-item label="支付密码" prop="password">
<el-input v-model="formValue.password" type="password" />
</el-form-item>
<el-form-item>
<el-space>
<el-button :loading="loading" type="primary" @click="formSubmit(formRef)">提交</el-button>
<el-button @click="prevStep">上一步</el-button>
</el-space>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { ElForm } from 'element-plus';
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const loading = ref(false);
const formValue = ref({
password: '086611',
});
const rules = {
password: {
required: true,
message: '请输入支付密码',
trigger: 'blur',
},
};
const emit = defineEmits(['prevStep', 'nextStep']);
function prevStep() {
emit('prevStep');
}
function formSubmit(formEl: FormInstance | undefined) {
if (!formEl) return;
loading.value = true;
formEl.validate((valid) => {
if (valid) {
setTimeout(() => {
emit('nextStep');
}, 1500);
} else {
ElMessage({
message: '验证失败，请填写完整信息',
type: 'error',
});
}
});
}
</script>

67
src/views/form/stepForm/Step3.vue
View File

@ -1,67 +0,0 @@
<template>
<el-result icon="success" class="step-result" sub-title="预计两小时内到账" title="操作成功">
<template #extra>
<div class="information">
<el-row class="my-1" :gutter="20">
<el-col :span="10">付款账户：</el-col>
<el-col :span="14">NaiveUiAdmin@163.com</el-col>
</el-row>
<el-row class="my-1" :gutter="20">
<el-col :span="10">收款账户：</el-col>
<el-col :span="14">xiaoma@qq.com</el-col>
</el-row>
<el-row class="my-1" :gutter="20">
<el-col :span="10">收款人姓名：</el-col>
<el-col :span="14">啊俊</el-col>
</el-row>
<el-row class="my-1" :gutter="20">
<el-col :span="10">转账金额：</el-col>
<el-col :span="14">￥<span class="money">1980</span> 元</el-col>
</el-row>
</div>
<div class="flex justify-center mt-8">
<el-button class="mr-4" type="primary" @click="finish">再转一笔</el-button>
<el-button @click="prevStep">查看账单</el-button>
</div>
</template>
</el-result>
</template>
<script lang="ts" setup>
const emit = defineEmits(['finish', 'prevStep']);
function prevStep() {
emit('prevStep');
}
function finish() {
emit('finish');
}
</script>
<style lang="scss" scoped>
.step-result {
max-width: 560px;
margin: 20px auto 0;
:deep(.n-result-content) {
background-color: #fafafa;
padding: 24px 40px;
}
.information {
line-height: 22px;
.ant-row:not(:last-child) {
margin-bottom: 24px;
}
}
.money {
font-family: 'Helvetica Neue', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 14px;
}
}
</style>

48
src/views/form/stepForm/stepForm.vue
View File

@ -1,48 +0,0 @@
<template>
<PageWrapper
title="分步表单"
content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
>
<el-card shadow="never" class="mt-3 proCard">
<el-row :gutter="20" justify="center">
<el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
<el-steps align-center :active="currentTab" class="mt-4">
<el-step title="填写转账信息" description="确保填写正确" />
<el-step title="确认转账信息" description="确认转账信息" />
<el-step title="完成转账" description="恭喜您，转账成功" />
</el-steps>
<step1 v-if="currentTab === 1" @next-step="nextStep" />
<step2 v-if="currentTab === 2" @next-step="nextStep" @prev-step="prevStep" />
<step3 v-if="currentTab === 3" @prev-step="prevStep" @finish="finish" />
</el-col>
</el-row>
</el-card>
</PageWrapper>
</template>
<script setup>
import { ref } from 'vue';
import step1 from './Step1.vue';
import step2 from './Step2.vue';
import step3 from './Step3.vue';
const currentTab = ref(1);
function nextStep() {
if (currentTab.value < 3) {
currentTab.value += 1;
}
}
function prevStep() {
if (currentTab.value > 1) {
currentTab.value -= 1;
}
}
function finish() {
currentTab.value = 1;
}
</script>
<style lang="scss" scoped></style>

72
src/views/list/basicList/columns.ts
View File

@ -1,72 +0,0 @@
import { h } from 'vue';
import { ElAvatar, ElTag } from 'element-plus';
export const columns = [
{
type: 'selection',
width: 55,
},
{
label: 'id',
prop: 'id',
// width: 100,
},
{
label: '名称',
prop: 'name',
// width: 100,
},
{
label: '头像',
prop: 'avatar',
// width: 100,
render(record) {
return h(ElAvatar, {
size: 48,
src: record.row.avatar,
shape: 'square',
fit: 'fill',
});
},
},
{
label: '地址',
prop: 'address',
auth: ['basic_list'], // 同时根据权限控制是否显示
// width: 150,
ifShow: (_column) => {
return true; // 根据业务控制是否显示
},
},
{
label: '开始日期',
prop: 'beginTime',
width: 160,
},
{
label: '结束日期',
prop: 'endTime',
width: 160,
},
{
label: '状态',
prop: 'status',
// width: 100,
render(record) {
return h(
ElTag,
{
type: record.row.status ? 'success' : 'danger',
},
{
default: () => (record.row.status ? '启用' : '禁用'),
},
);
},
},
{
label: '创建时间',
prop: 'date',
width: 100,
},
];

336
src/views/list/basicList/index.vue
View File

@ -1,336 +0,0 @@
<template>
<PageWrapper>
<el-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm
@register="register"
@submit="handleSubmit"
@reset="handleReset"
@advanced="formAdvanced"
>
<template #statusSlot="{ model, field }">
<el-input v-model="model[field]" placeholder="请输入" />
</template>
</BasicForm>
</el-card>
<el-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@checked-row-change="onCheckedRow"
:scroll-x="1090"
>
<template #tableTitle>
<el-button type="primary" @click="addTable">
<template #icon>
<el-icon class="el-input__icon">
<PlusOutlined />
</el-icon>
</template>
新建
</el-button>
</template>
<template #toolbar>
<el-button type="primary" @click="reloadTable">刷新数据</el-button>
</template>
</BasicTable>
</el-card>
<el-dialog v-model="showModal" title="新建" width="30%" draggable>
<el-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
>
<el-form-item label="名称" prop="name">
<el-input placeholder="请输入名称" v-model="formParams.name" />
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input type="textarea" placeholder="请输入地址" v-model="formParams.address" />
</el-form-item>
<el-form-item label="日期" prop="date">
<el-date-picker type="datetime" placeholder="请选择日期" v-model="formParams.date" />
</el-form-item>
</el-form>
<template #footer>
<el-space>
<el-button @click="() => (showModal = false)">取消</el-button>
<el-button type="primary" :loading="formBtnLoading" @click="confirmForm">确定</el-button>
</el-space>
</template>
</el-dialog>
</PageWrapper>
</template>
<script lang="ts" setup>
import { h, reactive, ref } from 'vue';
import { ColProps, ElMessage, FormRules } from 'element-plus';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm, FormSchema } from '@/components/Form/index';
import { getTableList } from '@/api/table/list';
import { columns } from './columns';
import { PlusOutlined, DeleteOutlined, FormOutlined } from '@vicons/antd';
import { useRoute } from 'vue-router';
import { renderIcon } from '@/utils';
const rules: FormRules = {
name: [
{
required: true,
trigger: 'blur',
message: '请输入名称',
},
],
address: [
{
required: true,
trigger: 'blur',
message: '请输入地址',
},
],
date: [
{
required: true,
trigger: ['blur', 'change'],
message: '请选择日期',
},
],
};
const schemas: FormSchema[] = [
{
field: 'name',
labelMessage: '这是一个提示',
component: 'Input',
label: '姓名',
componentProps: {
placeholder: '请输入姓名',
onInput: (e: any) => {
console.log(e);
},
},
// rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
},
{
field: 'mobile',
component: 'Input',
label: '手机',
componentProps: {
placeholder: '请输入手机号码',
onInput: (e: any) => {
console.log(e);
},
},
},
{
field: 'type',
component: 'Select',
label: '类型',
componentProps: {
placeholder: '请选择类型',
options: [
{
label: '舒适性',
value: 1,
},
{
label: '经济性',
value: 2,
},
],
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeDate',
component: 'DatePicker',
label: '预约时间',
defaultValue: 1183135260000,
componentProps: {
type: 'date',
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'makeTime',
component: 'TimePicker',
label: '停留时间',
componentProps: {
clearable: true,
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'status',
label: '状态',
//插槽
slot: 'statusSlot',
},
];
const route = useRoute();
const formRef: any = ref(null);
const actionRef = ref();
const showModal = ref(false);
const formBtnLoading = ref(false);
const formParams = reactive({
name: '',
address: '',
date: '',
});
const params = ref({
name: '',
id: route.params.id,
});
const actionColumn = reactive({
width: 300,
label: '操作',
prop: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '删除',
type: 'danger',
size: 'default',
icon: renderIcon(DeleteOutlined),
//Popconfirm 气泡确认框 配置
isConfirm: true,
popConfirm: {
onConfirm: handleDelete.bind(null, record),
onCancel: handleNegative.bind(null, record),
title: '您真的，确定要删除吗？',
confirmButtonText: '确定',
cancelButtonText: '取消',
},
},
{
label: '编辑',
type: 'warning',
size: 'default',
icon: renderIcon(FormOutlined),
onClick: handleEdit.bind(null, record),
},
],
dropDownProps: {
label: '更多',
type: 'primary',
size: 'default',
icon: renderIcon(DeleteOutlined),
// iconPlacement: 'left',
},
dropDownActions: [
{
label: '启用',
size: 'medium',
key: 'enabled',
// 根据业务控制是否显示: 非enable状态的不显示启用按钮
ifShow: () => {
return true;
},
},
{
label: '禁用',
key: 'disabled',
ifShow: () => {
return true;
},
},
],
select: (key) => {
ElMessage.success(`您点击了，${key} 按钮`);
},
});
},
});
const [register, {}] = useForm({
layout: 'horizontal',
colProps: { span: 6 } as ColProps,
schemas,
});
function formAdvanced(status) {
console.log(status);
actionRef.value.redoHeight();
}
function addTable() {
showModal.value = true;
}
const loadDataTable = async (res) => {
return await getTableList({ ...formParams, ...params.value, ...res });
};
function onCheckedRow(rowKeys) {
console.log(rowKeys.value);
}
function reloadTable() {
actionRef.value.reload();
}
function confirmForm() {
if (!formRef.value) return;
formBtnLoading.value = true;
formRef.value.validate((valid) => {
if (valid) {
ElMessage.success('新建成功');
setTimeout(() => {
showModal.value = false;
reloadTable();
});
} else {
formBtnLoading.value = false;
ElMessage.error('请填写完整信息');
}
});
}
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
ElMessage.success('点击了编辑');
//router.push({ name: 'BasicInfo', params: { id: record.id } });
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
ElMessage.success('点击了删除');
}
function handleNegative(record: Recordable) {
console.log('点击了取消', record);
ElMessage.success('点击了取消');
}
function handleSubmit(values: Recordable) {
console.log(values);
params.value = Object.assign(formParams, values) as any;
reloadTable();
}
function handleReset(values: Recordable) {
console.log(values);
}
</script>
<style lang="scss" scoped></style>

37
src/views/list/basicList/info.vue
View File

@ -1,37 +0,0 @@
<template>
<PageWrapper title="基础详情" content="基础详情，有时也用于显示只读信息。">
<el-card shadow="hover" class="mt-3 proCard" size="small">
<el-descriptions label-placement="left" class="py-2">
<el-descriptions-item>
<template #label>收款人姓名</template>
啊俊
</el-descriptions-item>
<el-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</el-descriptions-item>
<el-descriptions-item label="付款类型">支付宝</el-descriptions-item>
<el-descriptions-item label="付款账户">NaiveUiAdmin@163.com</el-descriptions-item>
<el-descriptions-item label="转账金额">￥1980.00</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag type="success"> 已到账</el-tag>
</el-descriptions-item>
</el-descriptions>
<div class="w-full">
<el-space>
<label>测试页面缓存</label>
<el-input v-model="value" placeholder="输入点内容试试" />
</el-space>
</div>
</el-card>
</PageWrapper>
</template>
<script lang="ts">
export default {
name: 'BasicInfo',
};
</script>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref();
</script>
<style lang="scss" scoped></style>

25
src/views/system/user/edit.vue
View File

@ -3,19 +3,18 @@
:before-close="dialogClose">
<el-form ref="formRef" :model="formData" label-width="84px">
<el-form-item label="头像" prop="avatar" :rules="{ required: true, message: '请输上传头像', trigger: 'blur' }">
<!-- <UploadImg @changeFileName="(name)=>formData.avatarName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="user"
:fileSize="20"
:cropper="true"
v-model:image-url="formData.avatar">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> -->
<Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" title="头像上传" @uploadSuccess="uploadSuccess">
<template #avatar>
</template>
</Cropper>
<!-- <UploadImg @changeFileName="(name)=>formData.avatarName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="user"
:fileSize="20"
:cropper="true"
v-model:image-url="formData.avatar">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> -->
<Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" title="头像上传" @uploadSuccess="uploadSuccess">
<template #avatar>
</template>
</Cropper>
</el-form-item>
<div class="flex">
<el-form-item label="账号" prop="username" class="flex-1"