Merge remote-tracking branch 'origin/gyj'
This commit is contained in:
@@ -1,3 +1,9 @@
|
||||
import service from "../request.js";
|
||||
const API_BASE_URL = '/config';
|
||||
// 原接口方法已转移至system.js 中
|
||||
|
||||
export function updateAdmin(params) {
|
||||
return service({
|
||||
method: "put",
|
||||
url: '/sys/user/password',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
@@ -6,7 +6,7 @@ const API_BASE_URL = '/user';
|
||||
export function getUserList(query) {
|
||||
return service({
|
||||
method: "get",
|
||||
url: `${API_BASE_URL}`,
|
||||
url: `${API_BASE_URL}/${query.roleld}`,
|
||||
data: query,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="avatar">
|
||||
<img src="../../../assets/images/avart.jpg" alt="avatar" />
|
||||
</div>
|
||||
<span class="username" :style="{ color: themeConfig.footColor }">BIG CUTE</span>
|
||||
<span class="username" :style="{ color: themeConfig.footColor }">超级管理员</span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<!-- <Driver></Driver> -->
|
||||
<fullScreen></fullScreen>
|
||||
<avatar></avatar>
|
||||
<setting></setting>
|
||||
<!-- <setting></setting>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,15 +10,12 @@ import zhCn from "element-plus/es/locale/lang/zh-cn";
|
||||
import directives from "./instruction/index.js";
|
||||
import "element-plus/dist/index.css";
|
||||
import App from "./App.vue";
|
||||
import "./mock/index.js";
|
||||
import * as ELIcons from "@element-plus/icons-vue";
|
||||
|
||||
import VMdEditor from "@kangc/v-md-editor";
|
||||
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
|
||||
import "@kangc/v-md-editor/lib/style/base-editor.css";
|
||||
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
|
||||
|
||||
VMdEditor.use(vuepressTheme);
|
||||
const app = createApp(App);
|
||||
|
||||
// 小图标引用
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import Mock from "mockjs";
|
||||
|
||||
import {
|
||||
UserList,
|
||||
addUserList,
|
||||
listUpdate,
|
||||
LoginInfo,
|
||||
getMenuList,
|
||||
Newslist,
|
||||
orderLists,
|
||||
homeList,
|
||||
noticeLists,
|
||||
cardlists
|
||||
} from "./permission.js";
|
||||
|
||||
Mock.mock("/permission/LoginInfo", "post", LoginInfo);
|
||||
Mock.mock("/permission/getMenuList", "get", getMenuList);
|
||||
Mock.mock("/permission/UserList", "get", UserList);
|
||||
Mock.mock("/permission/addUserList", "post", addUserList);
|
||||
Mock.mock("/permission/listUpdate", "post", listUpdate);
|
||||
Mock.mock("/permission/Newslist", "get", Newslist);
|
||||
Mock.mock("/permission/orderLists", "get", orderLists);
|
||||
Mock.mock("/permission/homeList", "get", homeList);
|
||||
Mock.mock("/permission/noticeLists", "get", noticeLists);
|
||||
Mock.mock("/permission/cardlists", "get", cardlists);
|
||||
@@ -1,9 +1,4 @@
|
||||
// 引入mockjs
|
||||
import Mock from "mockjs";
|
||||
import {
|
||||
options
|
||||
} from "../views/home/options";
|
||||
const Random = Mock.Random;
|
||||
|
||||
export const menuListItem = [
|
||||
{
|
||||
@@ -104,486 +99,7 @@ export const menuListItem = [
|
||||
url: "/edit",
|
||||
icon: "Edit",
|
||||
},
|
||||
{
|
||||
title: "页面管理",
|
||||
url: "/page",
|
||||
icon: "Checked",
|
||||
children: [{
|
||||
title: "表单页",
|
||||
url: "/form",
|
||||
icon: "Checked",
|
||||
children: [{
|
||||
title: "基础表单",
|
||||
url: "/baseForm",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/stepFrom",
|
||||
title: "步骤表单",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/advancedForm",
|
||||
title: "高级表单",
|
||||
icon: "Menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// url: "/system",
|
||||
// title: "表格管理",
|
||||
// icon: "Grid",
|
||||
// children: [{
|
||||
// url: "/Department",
|
||||
// title: "基础表格",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// {
|
||||
// url: "/UserList",
|
||||
// title: "内嵌表格",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// {
|
||||
// url: "/RoleList",
|
||||
// title: "滑动加载",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// {
|
||||
// url: "/MenuList",
|
||||
// title: "可编辑Table",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// {
|
||||
// url: "/importExcel",
|
||||
// title: "导入Excel",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// url: "/goods",
|
||||
// title: "列表页",
|
||||
// icon: "List",
|
||||
// children: [{
|
||||
// url: "/goodCategory",
|
||||
// title: "基础列表",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// {
|
||||
// url: "/cardList",
|
||||
// title: "卡片列表",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// {
|
||||
// url: "/searchList",
|
||||
// title: "搜索列表",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
url: "/ErrorMessage",
|
||||
title: "异常页面",
|
||||
icon: "WarningFilled",
|
||||
children: [{
|
||||
url: "/404",
|
||||
title: "404",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/500",
|
||||
title: "500",
|
||||
icon: "Menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: "图形图表",
|
||||
url: "/echarts",
|
||||
icon: "Histogram",
|
||||
children: [{
|
||||
title: "地图",
|
||||
url: "/echarts/map",
|
||||
icon: "Menu",
|
||||
children: [{
|
||||
url: "/baidumap",
|
||||
title: "百度地图",
|
||||
icon: "Menu",
|
||||
},
|
||||
// {
|
||||
// url: "/gaodemap",
|
||||
// title: "高德地图",
|
||||
// icon: "Menu",
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "雷达图",
|
||||
url: "/radar",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
title: "柱状图",
|
||||
url: "/histogram",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
title: "折线图",
|
||||
url: "/line",
|
||||
icon: "Menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
url: "/able",
|
||||
title: "功能",
|
||||
icon: "HelpFilled",
|
||||
children: [{
|
||||
url: "/watermark",
|
||||
title: "水印",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/countTo",
|
||||
title: "数字动画",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/batchImport",
|
||||
title: "图片上传",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/fileImport",
|
||||
title: "文件上传",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "markdown",
|
||||
icon: "Platform",
|
||||
title: "编辑器",
|
||||
children: [{
|
||||
url: "/wangEditor",
|
||||
title: "富文本编辑器",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/markdown",
|
||||
title: "markdown",
|
||||
icon: "Menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
url: "/strength",
|
||||
title: "密码强度",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/validation",
|
||||
title: "验证组件",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/guide",
|
||||
title: "引导页",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/embedded",
|
||||
title: "内嵌页",
|
||||
icon: "Menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
url: "/directives",
|
||||
title: "自定义指令",
|
||||
icon: "Stamp",
|
||||
children: [{
|
||||
url: "/copy",
|
||||
title: "复制",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/Drag",
|
||||
title: "拖拽",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/debounceDirect",
|
||||
title: "防抖指令",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/throttle",
|
||||
title: "节流指令",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
url: "/longPress",
|
||||
title: "长按指令",
|
||||
icon: "Menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
url: "/flow",
|
||||
title: "图形编辑器",
|
||||
icon: "BrushFilled",
|
||||
//
|
||||
children: [{
|
||||
url: "/flowCat",
|
||||
title: "流程图",
|
||||
icon: "Menu",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
url: "/video",
|
||||
title: "视频播放器",
|
||||
icon: "VideoCameraFilled",
|
||||
//
|
||||
children: [{
|
||||
url: "/video",
|
||||
title: "视频播放器",
|
||||
icon: "Menu",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
url: "/DataReport",
|
||||
title: "数据统计",
|
||||
icon: "TrendCharts",
|
||||
|
||||
children: [{
|
||||
url: "/demo1",
|
||||
title: "项目一",
|
||||
icon: "Menu",
|
||||
}, ],
|
||||
},
|
||||
// {
|
||||
// url: "/material",
|
||||
// title: "素材中心",
|
||||
// icon: "PictureFilled",
|
||||
// children: [{
|
||||
// url: "/materialIndex",
|
||||
// title: "素材管理",
|
||||
// icon: "Menu",
|
||||
// }, ],
|
||||
// },
|
||||
{
|
||||
url: "/user",
|
||||
title: "个人中心",
|
||||
icon: "Avatar",
|
||||
children: [{
|
||||
url: "/user",
|
||||
title: "关于我",
|
||||
icon: "Menu",
|
||||
}, ],
|
||||
},
|
||||
];
|
||||
|
||||
export const LoginInfo = (options) => {
|
||||
console.log(options, "接收post参数");
|
||||
const {
|
||||
username,
|
||||
password
|
||||
} = JSON.parse(options.body);
|
||||
if (username == "admin" && password != "123456") {
|
||||
return {
|
||||
code: "-200",
|
||||
data: {
|
||||
message: "用户不存在",
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
code: "200",
|
||||
data: {
|
||||
user_id: Random.id(),
|
||||
name: Random.cname(),
|
||||
token: Random.guid(),
|
||||
image: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1660064400&t=6fe6057370cbe369654ff2e132d02a37",
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const getMenuList = (options) => {
|
||||
const obj = JSON.parse(options.body);
|
||||
return {
|
||||
code: 200,
|
||||
data: {
|
||||
menuList: menuList,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 用户列表
|
||||
let userList = [];
|
||||
for (let index = 0; index < 50; index++) {
|
||||
let obj = {
|
||||
id: Random.id(),
|
||||
username: Random.cname(),
|
||||
email: Random.email(),
|
||||
date: Random.date(),
|
||||
address: Random.city(true),
|
||||
content: Random.csentence(),
|
||||
};
|
||||
userList.push(obj);
|
||||
}
|
||||
const param2Obj = (url) => {
|
||||
let obj = JSON.parse(url);
|
||||
let page = obj.page;
|
||||
console.log(page);
|
||||
return page;
|
||||
};
|
||||
|
||||
export const UserList = (options) => {
|
||||
const currentPage = param2Obj(options.body);
|
||||
let cameraData = userList.filter((item, index) => {
|
||||
return index >= (currentPage - 1) * 10 && index < currentPage * 10;
|
||||
});
|
||||
return {
|
||||
code: 200,
|
||||
data: {
|
||||
total: userList.length,
|
||||
userList: cameraData,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const addUserList = (options) => {
|
||||
console.log("传过来的数据" + JSON.parse(options.body));
|
||||
let obj = JSON.parse(options.body);
|
||||
obj.id = Random.id();
|
||||
userList.unshift(obj); // 将前台返回来的数据，拼接到数组中。
|
||||
return {
|
||||
data: userList,
|
||||
id: obj.id,
|
||||
};
|
||||
};
|
||||
|
||||
// 数据的修改操作
|
||||
export const listUpdate = (options) => {
|
||||
let obj = JSON.parse(options.body);
|
||||
userList = userList.map((val) => {
|
||||
return val.id == obj.id ? obj : val;
|
||||
});
|
||||
return {
|
||||
data: userList,
|
||||
};
|
||||
};
|
||||
|
||||
export const Newslist = (options) => {
|
||||
let obj = JSON.parse(options.body);
|
||||
let newList = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let item = {
|
||||
title: Random.csentence(5, 8), // Random.csentence( min, max )
|
||||
notifyPic: Random.dataImage("300x250", "mock的图片"), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
|
||||
notifyType: Random.integer(1, 3), //随机生成1-3的Integer
|
||||
isTop: Random.integer(1, 2), //随机生成1-2的Integer
|
||||
createUser: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
|
||||
email: Random.email(),
|
||||
number: '$' + Random.integer(100, 5000) + '.00',
|
||||
createTime: Random.date() + " " + Random.time(),
|
||||
pay_state: '100' + Random.integer(1, 3),
|
||||
};
|
||||
newList.push(item);
|
||||
}
|
||||
return {
|
||||
data: newList,
|
||||
};
|
||||
};
|
||||
export const orderLists = (options) => {
|
||||
let obj = JSON.parse(options.body);
|
||||
let orderList = [];
|
||||
for (let i = 0; i < 60; i++) {
|
||||
let item = {
|
||||
goodsId: i,
|
||||
code: Random.guid(),
|
||||
title: Random.ctitle(4, 5),
|
||||
commodity: "10010" + i,
|
||||
goodsname: Random.cword(2, 6), // Random.csentence( min, max )
|
||||
brand: Random.cword(2, 4),
|
||||
sku: "1ml", // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
|
||||
inventory: Random.integer(10, 100),
|
||||
number: Random.integer(100, 5000), //100到5000的随机整数
|
||||
costPrice: Random.integer(10, 20),
|
||||
amount: Random.integer(100, 200), //100到5000的随机整数
|
||||
itemEdit: false,
|
||||
ItemData: [{
|
||||
address: Random.city(true),
|
||||
email: Random.email(),
|
||||
state: Random.boolean(),
|
||||
salenumber: Random.integer(10, 100),
|
||||
receivable: Random.integer(10, 100),
|
||||
}, ],
|
||||
};
|
||||
orderList.push(item);
|
||||
}
|
||||
|
||||
return {
|
||||
total: 60,
|
||||
data: obj.size == 10 ? orderList.slice(obj.size * obj.page - obj.size, obj.size * obj.page) : orderList,
|
||||
};
|
||||
};
|
||||
|
||||
export const homeList = (options) => {
|
||||
let homeList = [];
|
||||
for (let index = 0; index < 10; index++) {
|
||||
let obj = {
|
||||
name: "限时秒杀",
|
||||
title_id: Random.integer(0, 10) + "id",
|
||||
type: Random.boolean(),
|
||||
number: Random.integer(10, 100),
|
||||
order_number: Random.integer(100, 1000),
|
||||
GWV_number: Random.integer(100, 5000),
|
||||
state: Random.boolean(),
|
||||
};
|
||||
homeList.push(obj);
|
||||
}
|
||||
|
||||
return {
|
||||
data: homeList,
|
||||
};
|
||||
};
|
||||
|
||||
export const noticeLists = (options) => {
|
||||
let noticeLists = [];
|
||||
for (let index = 0; index < 10; index++) {
|
||||
let item = {
|
||||
text: Random.csentence(),
|
||||
};
|
||||
noticeLists.push(item);
|
||||
}
|
||||
return {
|
||||
data: noticeLists,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export const cardlists = (options) => {
|
||||
let obj = JSON.parse(options.body);
|
||||
let cardlists = [];
|
||||
for (let i = 0; i < 50; i++) {
|
||||
let item = {
|
||||
title: Random.csentence(5, 8), // Random.csentence( min, max )
|
||||
user_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
|
||||
email: Random.email(),
|
||||
number: '$' + Random.integer(100, 5000) + '.00',
|
||||
date: Random.date(),
|
||||
pay_state: '100' + Random.integer(1, 3),
|
||||
content: Random.csentence(),
|
||||
|
||||
};
|
||||
cardlists.push(item);
|
||||
}
|
||||
return {
|
||||
data: cardlists,
|
||||
};
|
||||
};
|
||||
@@ -75,26 +75,7 @@ const routerList = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/config",
|
||||
component: Layout,
|
||||
redirect: "config",
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "服务配置",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/config",
|
||||
name: "config",
|
||||
component: () => import("../views/config/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "服务配置",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "/goods",
|
||||
component: Layout,
|
||||
@@ -231,98 +212,6 @@ const routerList = [
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "/form",
|
||||
name: "form",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "表单页",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/baseForm",
|
||||
name: "baseForm",
|
||||
component: () => import("../views/form/baseForm.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "基础表单",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/stepFrom",
|
||||
name: "stepFrom",
|
||||
component: () => import("../views/form/stepFrom.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "分页表单",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/advancedForm",
|
||||
name: "advancedForm",
|
||||
component: () => import("../views/form/advancedForm.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "高级表单",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/system2",
|
||||
name: "system2",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "系统管理",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/Department",
|
||||
name: "Department",
|
||||
component: () => import("../views/system/Department/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "基础表格",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/UserList",
|
||||
name: "UserList",
|
||||
component: () => import("../views/system/UserList/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "内嵌表格",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/RoleList",
|
||||
name: "RoleList",
|
||||
component: () => import("../views/system/RoleList/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "滑动加载",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/MenuList",
|
||||
name: "MenuList",
|
||||
component: () => import("../views/system/MenuList/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "可编辑Table",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/importExcel",
|
||||
name: "importExcel",
|
||||
component: () => import("../views/system/Excel/importExcel.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "Excel",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/ErrorMessage",
|
||||
name: "ErrorMessage",
|
||||
@@ -351,329 +240,7 @@ const routerList = [
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// path: "/goods",
|
||||
// name: "goods",
|
||||
// component: Layout,
|
||||
// meta: {
|
||||
// name: "列表页",
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: "/goodCategory",
|
||||
// name: "goodCategory",
|
||||
// component: () => import("../views/goods/goodCategory.vue"),
|
||||
// meta: {
|
||||
// requiresAuth: true, //有一些页面是否登录才能进去
|
||||
// name: "基础列表",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "/cardList",
|
||||
// name: "cardList",
|
||||
// component: () => import("../views/goods/cardList.vue"),
|
||||
// meta: {
|
||||
// requiresAuth: true, //有一些页面是否登录才能进去
|
||||
// name: "卡片列表",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "/searchList",
|
||||
// name: "searchList",
|
||||
// component: () => import("../views/goods/searchList.vue"),
|
||||
// meta: {
|
||||
// requiresAuth: true, //有一些页面是否登录才能进去
|
||||
// name: "搜索列表",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
path: "/able",
|
||||
name: "able",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "功能",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/watermark",
|
||||
name: "watermark",
|
||||
component: () => import("../views/able/watermark.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "水印",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/countTo",
|
||||
name: "countTo",
|
||||
component: () => import("../views/able/countTo.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "数字动画",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/batchImport",
|
||||
name: "batchImport",
|
||||
component: () => import("../views/able/batchImport.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "图片上传",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/fileImport",
|
||||
name: "fileImport",
|
||||
component: () => import("../views/able/fileImport.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "文件上传",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/wangEditor",
|
||||
name: "wangEditor",
|
||||
component: () => import("../views/able/wangEditor.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "富文本编辑器",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/markdown",
|
||||
name: "markdown",
|
||||
component: () => import("../views/able/markdown.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "markdown",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/strength",
|
||||
name: "strength",
|
||||
component: () => import("../views/able/strength.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "密码强度",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/validation",
|
||||
name: "validation",
|
||||
component: () => import("../views/able/validation.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "验证组件",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/guide",
|
||||
name: "guide",
|
||||
component: () => import("../views/able/guide.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "引导页",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/embedded",
|
||||
name: "embedded",
|
||||
component: () => import("../views/able/embedded.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "内嵌页",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/flow",
|
||||
name: "flow",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "图形编辑器",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/flowCat",
|
||||
name: "flowCat",
|
||||
component: () => import("../views/flow/flowCat.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "流程图",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/echarts",
|
||||
name: "echarts",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "图表",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/baidumap",
|
||||
name: "baidumap",
|
||||
component: () => import("../views/echarts/map/baidumap.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "百度地图",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/gaodemap",
|
||||
name: "gaodemap",
|
||||
component: () => import("../views/echarts/map/gaodemap.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "高德地图",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/histogram",
|
||||
name: "histogram",
|
||||
component: () => import("../views/echarts/histogram.vue"),
|
||||
mate: {
|
||||
requiresAuth: true,
|
||||
name: "柱状图",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/line",
|
||||
name: "line",
|
||||
component: () => import("../views/echarts/line.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "折线图",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/radar",
|
||||
name: "radar",
|
||||
component: () => import("../views/echarts/radar.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "雷达图",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/video",
|
||||
name: "video",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "视频播放器",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/video",
|
||||
name: "video",
|
||||
component: () => import("../views/video/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "视频播放器",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/DataReport",
|
||||
name: "DataReport",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "数据统计",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/demo1",
|
||||
name: "demo1",
|
||||
component: () => import("../views/DataReport/demo1.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "项目一",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/material",
|
||||
name: "material",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "素材管理",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/materialIndex",
|
||||
name: "materialIndex",
|
||||
component: () => import("../views/material/materialIndex.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "素材管理",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/directives",
|
||||
name: "directives",
|
||||
component: Layout,
|
||||
meta: {
|
||||
name: "自定义指令",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/Drag",
|
||||
name: "Drag",
|
||||
component: () => import("../views/directives/Drag.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "拖拽",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/throttle",
|
||||
name: "throttle",
|
||||
component: () => import("../views/directives/throttle.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "节流",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/copy",
|
||||
name: "copy",
|
||||
component: () => import("../views/directives/copy.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "复制",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/debounceDirect",
|
||||
name: "debounceDirect",
|
||||
component: () => import("../views/directives/debounceDirect.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "防抖",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/longPress",
|
||||
name: "longPress",
|
||||
component: () => import("../views/directives/longPress.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "长按指令",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
export default routerList;
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="content-box" style="height: 100%">
|
||||
<iframe
|
||||
src="http://124.221.156.158:3031/#/ScreenPage"
|
||||
frameborder="0"
|
||||
class="full-iframe"
|
||||
></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.full-iframe {
|
||||
// margin-top: 2.5%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
<template>数据统计</template>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<div class="box-card-title">图片上传 🍱🍱🍱🍱🍱</div>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<el-image-viewer v-if="dialogVisible" @close="imageView" style="width: 100px; height: 100px" :url-list="[dialogImageUrl]" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
|
||||
const dialogImageUrl = ref("");
|
||||
const dialogVisible = ref(false);
|
||||
const pictureUpload = ref(null);
|
||||
const fileList = ref([]);
|
||||
const handleRemove = (file) => {
|
||||
console.log(file);
|
||||
};
|
||||
|
||||
const imageView = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const handlePictureCardPreview = (file) => {
|
||||
console.log(file.url);
|
||||
dialogImageUrl.value = file.url;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.el-image-viewer__canvas {
|
||||
img {
|
||||
width: 120px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<div class="box-card-title">数字动画 🍝🍝🍝🍝</div>
|
||||
<div class="number-grow-warp">
|
||||
<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="number">0</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/* 需求说明：
|
||||
1.数字不需要千位符，但是为了防止以后要有 所以加了个参数判断，默认是没有的
|
||||
2.数字整数变动
|
||||
3.组件改为行内元素，能更好的兼容页面样式
|
||||
4.第二次数字变动在上次的数字累加
|
||||
5.添加监听器防止页面不更新的情况
|
||||
*/
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
const time = reactive(6000);
|
||||
const thousandSign = ref(false);
|
||||
const number = ref(997052786868686);
|
||||
const oldValue = ref(6868686);
|
||||
const numberGrow = ref(null);
|
||||
const setNumberGrow = (ele) => {
|
||||
let value = number.value - oldValue.value;
|
||||
let step = (value * 10) / (time * 100);
|
||||
let current = 0;
|
||||
let start = oldValue.value;
|
||||
let t = setInterval(function () {
|
||||
start += step;
|
||||
if (start > number.value) {
|
||||
clearInterval(t);
|
||||
|
||||
start = number.value;
|
||||
t = null;
|
||||
}
|
||||
if (current === start) {
|
||||
return;
|
||||
}
|
||||
current = parseInt(start);
|
||||
oldValue.value = current;
|
||||
if (thousandSign.value) {
|
||||
ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
|
||||
} else {
|
||||
ele.innerHTML = current.toString();
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
|
||||
watch(number.value, (newV, oldV) => {
|
||||
setNumberGrow(numberGrow.value);
|
||||
// gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 });
|
||||
});
|
||||
|
||||
// watch: {
|
||||
// number(n) {
|
||||
// gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
|
||||
// }
|
||||
// }
|
||||
onMounted(() => {
|
||||
setNumberGrow(numberGrow.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.number-grow-warp {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div class="content-box" style="height: 100%">
|
||||
<iframe src="https://cn.bing.com/" frameborder="0" class="full-iframe"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.full-iframe {
|
||||
// margin-top: 2.5%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div class="box-card-title">文件上传 🍱🍱🍱🍱🍱</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
multiple
|
||||
:show-file-list="true"
|
||||
:limit="excelLimit"
|
||||
:http-request="uploadExcel"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="excelUploadSuccess"
|
||||
:on-error="excelUploadError"
|
||||
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处<em>或点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElNotification } from 'element-plus'
|
||||
// 最大文件数
|
||||
const excelLimit = ref(1)
|
||||
// 文件上传
|
||||
const uploadExcel = (param) => {}
|
||||
const beforeExcelUpload = (file) => {
|
||||
const isExcel =
|
||||
file.type === 'application/vnd.ms-excel' ||
|
||||
file.type ===
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isExcel)
|
||||
ElNotification({
|
||||
message: '上传文件只能是 xls / xlsx 格式！',
|
||||
type: 'warning',
|
||||
})
|
||||
if (!isLt5M)
|
||||
ElNotification({
|
||||
message: '上传文件大小不能超过 5MB！',
|
||||
type: 'warning',
|
||||
})
|
||||
return isExcel && isLt5M
|
||||
}
|
||||
|
||||
// 文件数超出提示
|
||||
const handleExceed = () => {
|
||||
ElNotification({
|
||||
message: '最多只能上传一个文件！',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
// 上传错误提示
|
||||
const excelUploadError = () => {
|
||||
ElNotification({
|
||||
message: '导入数据失败，请您重新上传！',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
// 上传成功提示
|
||||
const excelUploadSuccess = () => {
|
||||
ElNotification({
|
||||
message: '导入数据成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.upload-demo {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<div class="box-card-title">引导页 🍮🍯🍳🍔</div>
|
||||
|
||||
<el-button type="primary" @click.prevent.stop="guide">开启指引</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Driver from "driver.js";
|
||||
import "driver.js/dist/driver.min.css";
|
||||
|
||||
const guide = () => {
|
||||
const driver = new Driver({
|
||||
allowClose: false,
|
||||
doneBtnText: "结束",
|
||||
closeBtnText: "关闭",
|
||||
nextBtnText: "下一步",
|
||||
prevBtnText: "上一步",
|
||||
});
|
||||
driver.defineSteps(steps);
|
||||
driver.start();
|
||||
};
|
||||
|
||||
const steps = [
|
||||
{
|
||||
element: "#collapseIcon",
|
||||
popover: {
|
||||
title: "Collapse Icon",
|
||||
description: "Open && Close sidebar",
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "#breadcrumb",
|
||||
popover: {
|
||||
title: "Breadcrumb",
|
||||
description: "Indicate the current page location",
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
element: "#fullscreen",
|
||||
popover: {
|
||||
title: "Full Screen",
|
||||
description: "Full Screen, Exit The Full Screen Page",
|
||||
position: "left",
|
||||
},
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
const setWaterCanvas = (str1, color) => {
|
||||
console.log(color);
|
||||
const id = "1.23452384164.123412415";
|
||||
if (document.getElementById(id) !== null) {
|
||||
document.body.removeChild(document.getElementById(id));
|
||||
}
|
||||
const can = document.createElement("canvas");
|
||||
can.width = 120;
|
||||
can.height = 80;
|
||||
const cans = can.getContext("2d");
|
||||
cans.rotate((-20 * Math.PI) / 180); // 水印旋转角度
|
||||
cans.font = "15px Vedana";
|
||||
cans.fillStyle = color;
|
||||
cans.textAlign = "center";
|
||||
cans.textBaseline = "Middle";
|
||||
cans.fillText(str1, can.width / 2, can.height);
|
||||
const div = document.createElement("div");
|
||||
div.id = id;
|
||||
div.style.pointerEvents = "none";
|
||||
div.style.top = "40px";
|
||||
div.style.left = "0px";
|
||||
div.style.opacity = "0.15";
|
||||
div.style.position = "fixed";
|
||||
div.style.zIndex = "100000";
|
||||
div.style.width = document.documentElement.clientWidth + "px";
|
||||
div.style.height = document.documentElement.clientHeight + "px";
|
||||
div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
|
||||
document.body.appendChild(div);
|
||||
return id;
|
||||
};
|
||||
|
||||
// 创建水印
|
||||
export function setWatermark(str1, color) {
|
||||
let id = setWaterCanvas(str1, color);
|
||||
if (document.getElementById(id) === null) {
|
||||
id = setWaterCanvas(str1, color);
|
||||
}
|
||||
}
|
||||
// 清除水印
|
||||
export function clear() {
|
||||
const id = "1.23452384164.123412415";
|
||||
if (document.getElementById(id) !== null) {
|
||||
document.body.removeChild(document.getElementById(id));
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div class="card-title">markdown编辑器🍬🍬🍬🍭🍭🍭<span @click="gotoUrl">[文档链接]</span></div>
|
||||
<v-md-editor model="text" height="80vh"></v-md-editor>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const text = ref("");
|
||||
const gotoUrl = () => {
|
||||
window.open("https://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D", "_blank");
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-title {
|
||||
padding-bottom: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
span {
|
||||
color: #673ab7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<el-card :shadow="never" class="col-center">
|
||||
<div class="p10">密码强度🍓🍇🍈🍉</div>
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
:model="formLabelAlign"
|
||||
style="width: 460px"
|
||||
>
|
||||
<el-form-item label="请输入密码">
|
||||
<el-input
|
||||
v-model="formLabelAlign.passsword"
|
||||
:prefix-icon="Lock"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码强度">
|
||||
<el-progress
|
||||
v-show="formLabelAlign.passsword"
|
||||
:percentage="percentage"
|
||||
style="width: 460px"
|
||||
:status="status"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
const formLabelAlign = reactive({
|
||||
passsword: '',
|
||||
})
|
||||
|
||||
let percentage = ref(0)
|
||||
let status = ref('exception')
|
||||
|
||||
const checkStrong = (sValue) => {
|
||||
var modes = 0
|
||||
if (sValue.length < 1) return modes
|
||||
if (/\d/.test(sValue)) modes++ //数字
|
||||
if (/[a-z]/.test(sValue)) modes++ //小写
|
||||
if (/[A-Z]/.test(sValue)) modes++ //大写
|
||||
if (/\W/.test(sValue)) modes++ //特殊字符
|
||||
switch (modes) {
|
||||
case 1:
|
||||
return 1
|
||||
break
|
||||
case 2:
|
||||
return 2
|
||||
break
|
||||
case 3:
|
||||
case 4:
|
||||
return sValue.length < 10 ? 3 : 4
|
||||
break
|
||||
}
|
||||
return modes
|
||||
}
|
||||
|
||||
const statusChange = (modes) => {
|
||||
if (modes == 1) {
|
||||
percentage.value = 25
|
||||
status.value = 'exception'
|
||||
} else if (modes == 2) {
|
||||
percentage.value = 50
|
||||
status.value = 'exception'
|
||||
} else if (modes == 3) {
|
||||
percentage.value = 75
|
||||
status.value = 'warning'
|
||||
} else {
|
||||
percentage.value = 100
|
||||
status.value = 'success'
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => formLabelAlign.passsword,
|
||||
(newValue, oldValue) => {
|
||||
let modes = checkStrong(newValue)
|
||||
console.log(modes)
|
||||
statusChange(modes)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@@ -1,278 +0,0 @@
|
||||
<template>
|
||||
<el-card class="clo-center">
|
||||
<div class="p10">验证组件🍨🍨🍨🍧🍧🍧</div>
|
||||
<el-form label-position="left" inline label-width="100px" :model="formLabelAlign">
|
||||
<el-form-item label="请输入验证码" style="margin-right: 0">
|
||||
<el-input v-model="formLabelAlign.code" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="s-canvas">
|
||||
<canvas @click="upDataCode" ref="canvasRef" :width="contentWidth" :height="contentHeight"></canvas></div
|
||||
></el-form-item>
|
||||
</el-form>
|
||||
<div className="sliderContent">
|
||||
<div className="imgDev" style="width: 500px">
|
||||
<canvas id="canvasImg" width="500" height="auto"></canvas>
|
||||
<canvas className="slider" id="sliderBlock" :width="500" :height="280" :style="{ left: sildLeft + 'px' }"></canvas>
|
||||
<!-- <el-slider class="moveSlider" @change="changeValue1" v-model="value1" /> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="moveSlider" :style="{ background: verifyResult ? '#859baa' : '#f7f8fa', color: verifyResult ? '#fff' : '606266' }">
|
||||
{{ verifyResult ? "解锁成功" : "滑动解锁" }}
|
||||
<div class="slider" @mousedown="sliderMove" ref="slider">
|
||||
<el-icon v-if="verifyResult" class="icon-style" style="color: #859baa"><Select /></el-icon>
|
||||
<el-icon v-else class="icon-style"><DArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { DArrowRight, Select } from "@element-plus/icons-vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
const contentWidth = ref(100);
|
||||
const contentHeight = ref(32);
|
||||
const sliderWidth = ref();
|
||||
const sliderHeight = ref();
|
||||
const sildLeft = ref(0);
|
||||
const value1 = ref(0);
|
||||
const sildY = ref();
|
||||
const sildX = ref();
|
||||
const verifyResult = ref(false);
|
||||
const formLabelAlign = reactive({
|
||||
code: "",
|
||||
});
|
||||
const identifyCodes = ref("ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890");
|
||||
const identifyCode = ref("1234");
|
||||
const canvasRef = ref(null);
|
||||
|
||||
// 生成随机数
|
||||
const randomNum = (min, max) => {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
};
|
||||
|
||||
const randomColor = (min, max) => {
|
||||
var r = randomNum(min, max);
|
||||
var g = randomNum(min, max);
|
||||
var b = randomNum(min, max);
|
||||
return "rgb(" + r + "," + g + "," + b + ")";
|
||||
};
|
||||
|
||||
const drawPic = () => {
|
||||
let ctx = canvasRef.value.getContext("2d");
|
||||
ctx.fillStyle = randomColor(180, 230); //填充颜色
|
||||
ctx.fillRect(0, 0, contentWidth.value, contentHeight.value); //填充位置
|
||||
// drawLine(ctx);
|
||||
|
||||
let imgCode = "";
|
||||
// 随机产生字符串，并且随机旋转
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const text = identifyCodes.value[randomNum(0, identifyCodes.value.length)];
|
||||
const deg = randomNum(-30, 30);
|
||||
imgCode += text;
|
||||
ctx.font = randomNum(18, 40) + "px Simhei"; //填充字体
|
||||
ctx.textBaseline = "top";
|
||||
ctx.fillStyle = randomColor(80, 150);
|
||||
drawDot(ctx);
|
||||
ctx.save(); //保存
|
||||
ctx.translate(30 * i + 15, 15);
|
||||
ctx.rotate((deg * Math.PI) / 180); //随机的旋转
|
||||
ctx.fillText(text, -15 + 5, -15); //
|
||||
ctx.restore(); //清除
|
||||
}
|
||||
drawLine(ctx);
|
||||
return imgCode;
|
||||
};
|
||||
|
||||
const drawLine = (ctx) => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
ctx.strokeStyle = randomColor(0, 255);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value));
|
||||
ctx.lineTo(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value));
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
const drawDot = (ctx) => {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
ctx.fillStyle = randomColor(0, 255);
|
||||
ctx.beginPath();
|
||||
ctx.arc(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value), 1, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
drawPic();
|
||||
loadImage();
|
||||
});
|
||||
|
||||
const upDataCode = () => {
|
||||
identifyCode.value = "";
|
||||
makeCode(identifyCodes.value, 4);
|
||||
};
|
||||
const makeCode = (val, l) => {
|
||||
for (let i = 1; i < val.length && i <= l; i++) {
|
||||
identifyCode.value += identifyCodes.value[Math.floor(Math.random() * (identifyCodes.value.length - 0) + 0)];
|
||||
}
|
||||
console.log(identifyCode.value);
|
||||
drawPic();
|
||||
};
|
||||
|
||||
// 拼图
|
||||
const loadImage = () => {
|
||||
//加载图片
|
||||
let mainDom = document.getElementById("canvasImg");
|
||||
let bg = mainDom.getContext("2d");
|
||||
let imgSrc =
|
||||
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F30%2F20200130003214_3GJWF.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663755123&t=0f35d18b29de642d5af549a5ec7062e5";
|
||||
let img = document.createElement("img");
|
||||
img.src = imgSrc;
|
||||
img.onload = () => {
|
||||
mainDom.height = (img.height / img.width) * mainDom.width;
|
||||
bg.drawImage(img, 0, 0, mainDom.width, mainDom.height);
|
||||
let r = 10; //半圆的半径
|
||||
let w = 60; //滑块的宽度
|
||||
let x = randomNum(85, mainDom.width - w - r - 2); //保证缺口完全展示，不会隐藏
|
||||
let y = randomNum(16, mainDom.height - w - r - 2);
|
||||
sildY.value = y;
|
||||
sildX.value = x;
|
||||
bg.lineWidth = 1;
|
||||
bg.strokeStyle = "white";
|
||||
bg.beginPath();
|
||||
bg.moveTo(x, y);
|
||||
//top
|
||||
bg.arc(x + w / 2, y, r, -Math.PI, 0, true);
|
||||
bg.lineTo(x + w, y);
|
||||
//right
|
||||
bg.arc(x + w, y + w / 2, r, 1.5 * Math.PI, 0.5 * Math.PI, false);
|
||||
bg.lineTo(x + w, y + w);
|
||||
//bottom
|
||||
bg.arc(x + w / 2, y + w, r, 0, Math.PI, false);
|
||||
bg.lineTo(x, y + w);
|
||||
//left
|
||||
bg.arc(x, y + w / 2, r, 0.5 * Math.PI, 1.5 * Math.PI, true);
|
||||
bg.lineTo(x, y);
|
||||
bg.stroke();
|
||||
bg.fillStyle = "rgba(0, 0, 0, 0.4)"; //设置背景颜色
|
||||
bg.fill();
|
||||
sliderContent(img);
|
||||
};
|
||||
};
|
||||
|
||||
const sliderContent = (img) => {
|
||||
let r = 10; //半圆的半径
|
||||
let w = 60; //滑块的宽度
|
||||
let mainDom = document.getElementById("sliderBlock");
|
||||
let ctx = mainDom.getContext("2d");
|
||||
//index.store.ts
|
||||
let x = sildLeft.value;
|
||||
let y = sildY.value;
|
||||
let PI = Math.PI;
|
||||
ctx.lineWidth = 1;
|
||||
//绘制
|
||||
ctx.beginPath();
|
||||
//left
|
||||
ctx.moveTo(x, y);
|
||||
//top
|
||||
ctx.arc(x + w / 2, y, r, -PI, 0, true);
|
||||
ctx.lineTo(x + w, y);
|
||||
//right
|
||||
ctx.arc(x + w, y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
|
||||
ctx.lineTo(x + w, y + w);
|
||||
//bottom
|
||||
ctx.arc(x + w / 2, y + w, r, 0, PI, false);
|
||||
ctx.lineTo(x, y + w);
|
||||
//left
|
||||
ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.shadowColor = "black";
|
||||
ctx.stroke();
|
||||
ctx.clip();
|
||||
console.log(img);
|
||||
ctx.drawImage(img, -sildX.value + sildLeft.value, 0, 500, 280);
|
||||
// console.log(ctx)
|
||||
};
|
||||
|
||||
const sliderMove = (event) => {
|
||||
let disX = 0;
|
||||
const iconWidth = 60;
|
||||
const ele = document.querySelector(".moveSlider .slider");
|
||||
const startX = event.clientX || event.touches[0].pageX;
|
||||
const MaxX = 500 - iconWidth;
|
||||
if (verifyResult.value) {
|
||||
return false;
|
||||
}
|
||||
// 开始移动
|
||||
const onMove = (e) => {
|
||||
const endX = e.clientX || e.touches[0].pageX;
|
||||
disX = endX - startX;
|
||||
if (disX <= 0) {
|
||||
disX = 0;
|
||||
}
|
||||
if (disX >= MaxX - iconWidth) {
|
||||
disX = MaxX;
|
||||
}
|
||||
sildLeft.value = disX;
|
||||
ele.style.transition = ".1s all";
|
||||
ele.style.transform = `translateX(${disX}px)`;
|
||||
console.log(ele.style.transform);
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
if (disX > sildX.value - 5 && disX < sildX.value + 5) {
|
||||
verifyResult.value = true;
|
||||
} else {
|
||||
ele.style.transition = ".5s all";
|
||||
ele.style.transform = "translateX(0)";
|
||||
}
|
||||
document.removeEventListener("mousemove", onMove);
|
||||
document.removeEventListener("mouseup", onEnd);
|
||||
};
|
||||
document.addEventListener("mousemove", onMove);
|
||||
document.addEventListener("mouseup", onEnd);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s-canvas {
|
||||
height: 38px;
|
||||
}
|
||||
.s-canvas canvas {
|
||||
margin-top: 1px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.sliderContent {
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
.slider {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.moveSlider {
|
||||
width: 500px;
|
||||
height: 32px;
|
||||
background-color: #f7f8fa;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
position: relative;
|
||||
border: 1px solid #e4e7ed;
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 32px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
.icon-style {
|
||||
margin-top: 6px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card col-center" shadow="never">
|
||||
<span class="box-card-title">富文本编辑器 🍰🍰🍰🍩🍩🍩</span>
|
||||
<div class="wangeditor-box">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
class="editor-txt"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
@onCreated="handleCreated"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||||
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
const editorRef = shallowRef()
|
||||
|
||||
// 内容 HTML
|
||||
const valueHtml = ref('<p>hello</p>')
|
||||
|
||||
// 模拟 ajax 异步获取内容
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
valueHtml.value = '<p>富文本编辑器</p>'
|
||||
}, 1500)
|
||||
})
|
||||
|
||||
const toolbarConfig = {}
|
||||
const editorConfig = { placeholder: '请输入内容...' }
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor // 记录 editor 实例，重要！
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.wangeditor-box {
|
||||
border: 1px solid #f0f2f5;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.editor-txt {
|
||||
height: 75vh !important;
|
||||
overflow-y: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-card shadow="never">
|
||||
<div class="p10">水印组件🍬🍬🍬🍭🍭🍭</div>
|
||||
<el-form :inline="true" ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item
|
||||
label="水印名称"
|
||||
prop="text"
|
||||
:rules="[
|
||||
{ required: true, message: 'age is required' },
|
||||
{ type: 'text', message: '请输入水印名称' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="numberValidateForm.text" type="text" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择水印颜色" prop="color">
|
||||
<el-color-picker v-model="numberValidateForm.color" show-alpha />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(formRef)">创建</el-button>
|
||||
<el-button @click="resetForm(formRef)">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { setWatermark, clear } from "./index.js";
|
||||
|
||||
const numberValidateForm = reactive({
|
||||
text: "",
|
||||
color: "#4060c7",
|
||||
});
|
||||
const submitForm = () => {
|
||||
console.log(numberValidateForm.color);
|
||||
setWatermark(numberValidateForm.text, numberValidateForm.color);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
numberValidateForm.text = "";
|
||||
numberValidateForm.color = "";
|
||||
clear();
|
||||
};
|
||||
</script>
|
||||
@@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in options"
|
||||
:key="item.type"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:align="item.align"
|
||||
show-overflow-tooltip
|
||||
:fixed="item.fixed"
|
||||
>
|
||||
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
||||
<el-icon class="icon-view" @click="ItemView(scope.row)"
|
||||
><View
|
||||
/></el-icon>
|
||||
<el-icon class="icon-edit" @click="editorClick(scope.row)"
|
||||
><Edit
|
||||
/></el-icon>
|
||||
<el-popconfirm
|
||||
confirm-button-text="确认"
|
||||
cancel-button-text="取消"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#626AEF"
|
||||
title="确定要除该服务项目?"
|
||||
@confirm="DeleteItem(index)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon class="icon-dele"><Delete /></el-icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
:page-size="queryData.size"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
class="mt-4"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="`${dialogData.title}服务配置`"
|
||||
:width="dialogWidth"
|
||||
:hide-required-asterisk="dialogData.isView"
|
||||
draggable
|
||||
>
|
||||
<el-form
|
||||
:model="dialogData.FormData"
|
||||
:rules="rules"
|
||||
ref="FormRef"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="配置项目"
|
||||
:label-width="formLabelWidth"
|
||||
prop="title"
|
||||
>
|
||||
<el-input v-model="dialogData.FormData.title" autocomplete="off" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="配置内容" :label-width="formLabelWidth" prop="content">
|
||||
<el-input v-model="dialogData.FormData.content" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit()">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Search,
|
||||
Edit,
|
||||
Delete,
|
||||
UserFilled,
|
||||
InfoFilled,
|
||||
View,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
getConfigList,
|
||||
updateConfig,
|
||||
} from '../../api/modules/config.js'
|
||||
import { options } from './options.js'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getDateTime } from '../../utils'
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const FormRef = ref()
|
||||
const formLabelWidth = '140px'
|
||||
const dialogData = reactive({
|
||||
isView: true,
|
||||
title: '添加',
|
||||
FormData: {
|
||||
title: '',
|
||||
content: '',
|
||||
},
|
||||
})
|
||||
|
||||
const dialogWidth = ref('0')
|
||||
const rules = reactive({
|
||||
content: [{ required: true, message: '请填写配置内容', trigger: 'change' }],
|
||||
})
|
||||
const oldTableData = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
|
||||
const initData = () => {
|
||||
getConfigList(queryData.value).then((res) => {
|
||||
total.value = res.total
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const dialogVisibleShow = () => {
|
||||
dialogData.FormData = {
|
||||
title: '',
|
||||
content: '',
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const onSubmit = () => {
|
||||
FormRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
try {
|
||||
if (dialogData.FormData.id) {
|
||||
updateConfig(dialogData.FormData).then((res) => {
|
||||
console.log('编辑数据成功')
|
||||
console.log(ElMessage)
|
||||
ElMessage({
|
||||
message: '编辑服务项目成功',
|
||||
type: 'success',
|
||||
})
|
||||
// tableData.value = res.data
|
||||
})
|
||||
} else {
|
||||
dialogData.FormData.date = getDateTime('')
|
||||
addGoods(dialogData.FormData)
|
||||
.then((res) => {
|
||||
ElMessage({
|
||||
message: '添加服务项目成功',
|
||||
type: 'success',
|
||||
})
|
||||
dialogData.FormData.id = res.data.data.id
|
||||
tableData.value.unshift(dialogData.FormData)
|
||||
})
|
||||
.catch((err) => {})
|
||||
}
|
||||
dialogVisible.value = false
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const editorClick = (item) => {
|
||||
dialogVisible.value = true
|
||||
|
||||
dialogData.FormData = item
|
||||
console.log(dialogData.FormData)
|
||||
dialogData.isView = false
|
||||
dialogData.title = '编辑'
|
||||
}
|
||||
|
||||
const ItemView = (item) => {
|
||||
dialogVisible.value = true
|
||||
dialogData.FormData = item
|
||||
dialogData.isView = false
|
||||
dialogData.title = ''
|
||||
}
|
||||
|
||||
const DeleteItem = (index) => {
|
||||
console.log(index)
|
||||
tableData.value.splice(index, 1)
|
||||
}
|
||||
const cancelEvent = () => {
|
||||
console.log('cancel!')
|
||||
}
|
||||
const setDialogWidth = () => {
|
||||
console.log(document.body.clientWidth)
|
||||
var val = document.body.clientWidth
|
||||
const def = 800 // 默认宽度
|
||||
if (val < def) {
|
||||
dialogWidth.value = '100%'
|
||||
} else {
|
||||
dialogWidth.value = def + 'px'
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
setDialogWidth()
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
setDialogWidth()
|
||||
})()
|
||||
}
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.henader-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
export const options = [
|
||||
{
|
||||
label: '配置项目',
|
||||
props: 'title',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '配置内容',
|
||||
props: 'content',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
props: 'actions',
|
||||
width: '150',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
}
|
||||
]
|
||||
@@ -1,29 +0,0 @@
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
/* margin-right: 20px; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.material-header {
|
||||
|
||||
padding: 10px;
|
||||
color: #666;
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
|
||||
.tit {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.material-content {
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<el-row style="height: 90vh">
|
||||
<el-col :span="6" style="border-right: 10px solid #f0f2f5">
|
||||
<div class="material-header flx-row">
|
||||
<div class="tit">目录</div>
|
||||
<div>
|
||||
<el-icon><MoreFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="material-header flx-row">
|
||||
<div class="tit">我的文件</div>
|
||||
<div>
|
||||
<el-icon><MoreFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="material-content">
|
||||
<div class="flx-row">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
+92
-131
@@ -1,95 +1,70 @@
|
||||
<template>
|
||||
<el-card>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<el-card>
|
||||
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
|
||||
<el-form-item label="服务项目">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="服务项目"
|
||||
placeholder="请输入服务项目"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-form-item label="订单编号">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="订单编号"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-select v-model="ruleForm" placeholder="订单状态">
|
||||
<el-option label="全部" value="" />
|
||||
<el-form-item label="订单状态">
|
||||
<el-select v-model="isStatus" placeholder="订单状态" style="width: 200px">
|
||||
<el-option label="全部" value=" " />
|
||||
<el-option label="待付款" value="0" />
|
||||
<el-option label="已付款" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-form-item label="维修费用">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="维修费用"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="用户昵称"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearchSubmit">搜索</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
label="编号"
|
||||
prop="userId"
|
||||
prop="id"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -98,16 +73,21 @@
|
||||
|
||||
<el-table-column
|
||||
label="状态"
|
||||
prop="userId"
|
||||
prop="status"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag type="info" v-if="scope.row.status === 0">待服务</el-tag>
|
||||
<el-tag type="warning" v-if="scope.row.status === 1">服务中</el-tag>
|
||||
<el-tag type="danger" v-if="scope.row.status === 2">待付款 </el-tag>
|
||||
<el-tag type="success" v-if="scope.row.status === 3">已完成</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="服务项目"
|
||||
prop="userId"
|
||||
prop="goodsName"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -116,8 +96,7 @@
|
||||
|
||||
<el-table-column
|
||||
label="预约时间"
|
||||
prop="userId"
|
||||
width="120"
|
||||
prop="appointmentTime"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
@@ -125,16 +104,19 @@
|
||||
|
||||
<el-table-column
|
||||
label="维修费用"
|
||||
prop="userId"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ formatPrice(scope.row.amount) }}元
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="微信昵称"
|
||||
prop="name"
|
||||
prop="username"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -149,7 +131,7 @@
|
||||
|
||||
<el-table-column
|
||||
label="下单时间"
|
||||
prop="date"
|
||||
prop="createTime"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -167,14 +149,14 @@
|
||||
|
||||
<el-table-column label="操作" width="280px" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="info" @click="drawer = true">详情</el-button>
|
||||
<el-button type="danger">退款</el-button>
|
||||
<el-button type="info" @click="detail(scope.row)">详情</el-button>
|
||||
<!-- <el-button type="danger">退款</el-button>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
@@ -182,7 +164,7 @@
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction">
|
||||
<el-drawer v-model="drawer">
|
||||
<template #header>
|
||||
<h4>订单详情</h4>
|
||||
</template>
|
||||
@@ -203,7 +185,7 @@
|
||||
订单编号
|
||||
</div>
|
||||
</template>
|
||||
20111116171087
|
||||
{{detailData.id}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
@@ -212,7 +194,7 @@
|
||||
预约时间
|
||||
</div>
|
||||
</template>
|
||||
2024-01-01 12:00:00
|
||||
{{detailData.appointmentTime}}
|
||||
</el-descriptions-item>
|
||||
|
||||
|
||||
@@ -222,7 +204,7 @@
|
||||
预约费用
|
||||
</div>
|
||||
</template>
|
||||
0.00元
|
||||
{{ formatPrice(detailData.goodsPrice) }}元
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
@@ -231,7 +213,7 @@
|
||||
报价费用
|
||||
</div>
|
||||
</template>
|
||||
8102.01元
|
||||
{{ formatPrice(detailData.amount) }}元
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
@@ -240,7 +222,10 @@
|
||||
订单状态
|
||||
</div>
|
||||
</template>
|
||||
未付款
|
||||
<el-tag type="info" v-if="detailData.status === 0">待服务</el-tag>
|
||||
<el-tag type="warning" v-if="detailData.status === 1">服务中</el-tag>
|
||||
<el-tag type="danger" v-if="detailData.status === 2">待付款 </el-tag>
|
||||
<el-tag type="success" v-if="detailData.status === 3">已完成</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
@@ -252,10 +237,10 @@
|
||||
border
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<el-descriptions-item label="微信昵称">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">188****1111</el-descriptions-item>
|
||||
<el-descriptions-item label="微信昵称">{{ detailData.username }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ detailData.mobile }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地址">
|
||||
重庆市南岸区星光花园小区8号楼602
|
||||
{{ detailData.address }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
@@ -268,9 +253,9 @@
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
|
||||
<el-descriptions-item label="名字">张三</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">2024-10-11 15:00:01</el-descriptions-item>
|
||||
<el-descriptions-item label="名字">{{ detailData.surveyorsName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">{{ detailData.surveyorsMobile }}</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">{{ detailData.appointmentTime }}</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
|
||||
@@ -283,14 +268,14 @@
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
|
||||
<el-descriptions-item label="名字">李四</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">2024-10-11 15:00:01</el-descriptions-item>
|
||||
<el-descriptions-item label="名字">{{ detailData.repairerName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">{{ detailData.repairerMobile }}</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">{{ detailData.repairerName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="danger" @click="confirmClick">退款</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
<!-- <el-button type="danger" @click="confirmClick">退款</el-button>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -298,33 +283,17 @@
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as XLSX from 'xlsx'
|
||||
import {
|
||||
Edit,
|
||||
Delete,
|
||||
InfoFilled,
|
||||
View,
|
||||
ArrowDownBold,
|
||||
Plus,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
|
||||
// 示例数据
|
||||
// import {options} from './options.js'
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
import {getOrderList} from "../../api/modules/order";
|
||||
|
||||
const tableData = ref([])
|
||||
const dataList = ref([])
|
||||
const table = ref()
|
||||
const tabclickIndex = ref()
|
||||
const isExpand = ref(false)
|
||||
// 示例数据加载
|
||||
// const exampleData = ref(JSON.parse(JSON.stringify(options)))
|
||||
|
||||
const disabled = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
const formInline = ref({})
|
||||
const registerDate = ref('');
|
||||
|
||||
const searchName = ref('');
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
@@ -333,52 +302,44 @@ const queryData = ref({
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const detailData = ref();
|
||||
|
||||
const isStatus = ref('');
|
||||
|
||||
// 初始化数据
|
||||
const initData = () => {
|
||||
// 示例数据加载
|
||||
// tableData.value = exampleData.value;
|
||||
|
||||
getOrderList(queryData.value).then((res) => {
|
||||
console.log(res.data)
|
||||
tableData.value = res.data.records
|
||||
total.value = res.data.total
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
|
||||
// 格式化价格
|
||||
const formatPrice = (price) => {
|
||||
|
||||
price = price == null ? price = 0 : price;
|
||||
|
||||
return parseFloat(price).toFixed(2);
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
|
||||
|
||||
// 订单详情
|
||||
const detail = (row) => {
|
||||
drawer.value = true
|
||||
detailData.value = { ...row }
|
||||
|
||||
console.log('detailData', detailData.value);
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {
|
||||
}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log('滑动加载')
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = false
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
const onSearchSubmit = ()=> {
|
||||
console.log('点击搜索');
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
+29
-20
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px;">
|
||||
|
||||
<el-form :model="formData" label-width="auto" style="max-width: 600px;">
|
||||
|
||||
<el-form-item label="账号">
|
||||
<span>admin</span>
|
||||
@@ -12,7 +13,7 @@
|
||||
]"
|
||||
label="旧密码">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
v-model="formData.oldPassword"
|
||||
style="width: 240px"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
@@ -20,19 +21,19 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px">
|
||||
<p>留空则不修改账号名，如果账号修改后，旧账号将不能用！</p>
|
||||
</el-alert>
|
||||
<el-form-item label="修改账号">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<!-- <el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px">-->
|
||||
<!-- <p>留空则不修改账号名，如果账号修改后，旧账号将不能用！</p>-->
|
||||
<!-- </el-alert>-->
|
||||
<!-- <el-form-item label="修改账号">-->
|
||||
<!-- <el-input v-model="form.name" />-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px">
|
||||
<p>留空则不修改密码，如果密码修改后，旧密码将不能用！</p>
|
||||
</el-alert>
|
||||
<el-form-item label="新密码">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
v-model="formData.newPassword"
|
||||
style="width: 240px"
|
||||
type="password"
|
||||
placeholder="请输入新密码"
|
||||
@@ -49,21 +50,29 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
import {updateAdmin} from "../../api/modules/config";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
const router = useRouter();
|
||||
|
||||
const formData = reactive({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
|
||||
// 修改密码
|
||||
updateAdmin(formData).then(res => {
|
||||
|
||||
ElMessage({
|
||||
message: '修改成功，请重新登录',
|
||||
type: 'success',
|
||||
});
|
||||
sessionStorage.removeItem("token");
|
||||
router.push("/login");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
style="max-width: 600px;margin-bottom: 20px"
|
||||
placeholder="请输入图片排序"
|
||||
>
|
||||
<template #prepend>序号</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="首页图">
|
||||
@@ -65,7 +64,7 @@
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="userId"
|
||||
prop="sort"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -74,7 +73,7 @@
|
||||
|
||||
<el-table-column label="首页图" align="center">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 600px; height: 50px" :src="scope.row.avatar" :fit="fit" lazy/>
|
||||
<el-image style="width: 600px; height: 50px" :src="scope.row.img" :fit="fit" lazy/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -85,14 +84,7 @@
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
@@ -108,7 +100,7 @@ import {
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
|
||||
import {options} from './options.js'
|
||||
import {getConfigList} from "../../api/modules/system";
|
||||
import {getConfigList, updateSystem} from "../../api/modules/system";
|
||||
import {addFile} from "../../api/modules/upload";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
@@ -139,10 +131,10 @@ const formData = ref({
|
||||
// 初始化数据
|
||||
const initData = () => {
|
||||
|
||||
tableData.value = columnData.value;
|
||||
|
||||
getConfigList(queryData.value).then((res) => {
|
||||
tableData.value = res.data[0]
|
||||
tableData.value = JSON.parse(res.data[0].content);
|
||||
|
||||
console.log('cccc',tableData.value);
|
||||
})
|
||||
}
|
||||
|
||||
@@ -154,9 +146,24 @@ const confirmClick = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
formData.value.img = JSON.stringify(formData.value.img); // 转为字符串
|
||||
let params = {
|
||||
id: 1,
|
||||
content: JSON.stringify(formData.value)
|
||||
};
|
||||
|
||||
console.log('formData', formData)
|
||||
// 更新系统配置
|
||||
updateSystem(params).then((res) => {
|
||||
ElMessage({
|
||||
message: '添加成功',
|
||||
type: 'success',
|
||||
})
|
||||
});
|
||||
drawer.value = false;
|
||||
|
||||
formData.value = {
|
||||
sort: '',
|
||||
img: ''
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="userId"
|
||||
prop="id"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -60,14 +60,14 @@
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="微信昵称"
|
||||
prop="name"
|
||||
prop="nickName"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="注册时间"
|
||||
prop="date"
|
||||
prop="createTime"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -76,7 +76,7 @@
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
@@ -120,24 +120,16 @@ const queryData = ref({
|
||||
|
||||
const initData = () => {
|
||||
|
||||
tableData.value = columnData.value;
|
||||
queryData.value.roleld = 2;
|
||||
|
||||
// 获取用户列表
|
||||
getUserList(queryData.value).then((res) => {
|
||||
|
||||
console.log('用户', res.data);
|
||||
tableData.value = res.data.records;
|
||||
total.value = res.data.total
|
||||
});
|
||||
// orderLists(queryData.value).then((res) => {
|
||||
// console.log(res.data.data)
|
||||
// // total.value = res.data.data.total
|
||||
// tableData.value = res.data.data
|
||||
// })
|
||||
}
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
@@ -148,24 +140,6 @@ const handleCurrentChange = (val) => {
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {
|
||||
}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log('滑动加载')
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = false
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
|
||||
@@ -88,16 +88,10 @@
|
||||
<el-avatar :size="50" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="微信昵称"
|
||||
prop="nickname"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="名字"
|
||||
prop="name"
|
||||
prop="nickName"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -111,7 +105,7 @@
|
||||
/>
|
||||
<el-table-column
|
||||
label="注册时间"
|
||||
prop="date"
|
||||
prop="createTime"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -164,53 +158,22 @@ const queryData = ref({
|
||||
|
||||
const initData = () => {
|
||||
|
||||
tableData.value = columnData.value;
|
||||
queryData.value.roleld = 2;
|
||||
|
||||
// 获取维修工程师列表
|
||||
getUserList(queryData.value).then((res) => {
|
||||
|
||||
console.log('用户', res.data);
|
||||
tableData.value = res.data.records;
|
||||
total.value = res.data.total
|
||||
});
|
||||
|
||||
// orderLists(queryData.value).then((res) => {
|
||||
// console.log(res.data.data)
|
||||
// // total.value = res.data.data.total
|
||||
// tableData.value = res.data.data
|
||||
// })
|
||||
}
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {
|
||||
}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log('滑动加载')
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = false
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
|
||||
@@ -88,16 +88,10 @@
|
||||
<el-avatar :size="50" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="微信昵称"
|
||||
prop="nickname"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="名字"
|
||||
prop="name"
|
||||
prop="nickName"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -111,7 +105,7 @@
|
||||
/>
|
||||
<el-table-column
|
||||
label="注册时间"
|
||||
prop="date"
|
||||
prop="createTime"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -164,53 +158,21 @@ const queryData = ref({
|
||||
|
||||
const initData = () => {
|
||||
|
||||
tableData.value = columnData.value;
|
||||
queryData.value.roleld = 2;
|
||||
|
||||
// 获取勘察工程师列表
|
||||
getUserList(queryData.value).then((res) => {
|
||||
|
||||
console.log('用户', res.data);
|
||||
tableData.value = res.data.records;
|
||||
total.value = res.data.total
|
||||
});
|
||||
}
|
||||
|
||||
// orderLists(queryData.value).then((res) => {
|
||||
// console.log(res.data.data)
|
||||
// // total.value = res.data.data.total
|
||||
// tableData.value = res.data.data
|
||||
// })
|
||||
}
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {
|
||||
}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log('滑动加载')
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = false
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
|
||||
Reference in New Issue
Block a user