mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-14 10:12:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

支持 Vue 3.2.x 语法升级为，script setup

Browse Source
This commit is contained in:
xiaoma
2021-08-14 14:35:42 +08:00
parent d3f7fa0f9e
commit 905984367c
71 changed files with 2362 additions and 2116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@
<n-card
:bordered="false"
title="项目信息"
class="proCard mt-4"
class="mt-4 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
@@ -54,7 +54,7 @@
<n-card
:bordered="false"
title="开发环境依赖"
class="proCard mt-4"
class="mt-4 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
@@ -68,7 +68,7 @@
<n-card
:bordered="false"
title="生产环境依赖"
class="proCard mt-4"
class="mt-4 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
@@ -81,40 +81,24 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
export interface schemaItem {
field: string;
label: string;
}
export default defineComponent({
setup() {
const { pkg, lastBuildTime } = __APP_INFO__;
const { dependencies, devDependencies, name, version } = pkg;
const { pkg, lastBuildTime } = __APP_INFO__;
const { dependencies, devDependencies, name, version } = pkg;
const schema: schemaItem[] = [];
const devSchema: schemaItem[] = [];
const schema: schemaItem[] = [];
const devSchema: schemaItem[] = [];
Object.keys(dependencies).forEach((key) => {
schema.push({ field: key, label: dependencies[key] });
});
Object.keys(dependencies).forEach((key) => {
schema.push({ field: key, label: dependencies[key] });
});
Object.keys(devDependencies).forEach((key) => {
devSchema.push({ field: key, label: devDependencies[key] });
});
return {
lastBuildTime,
dependencies,
devDependencies,
name,
version,
schema,
devSchema,
};
},
Object.keys(devDependencies).forEach((key) => {
devSchema.push({ field: key, label: devDependencies[key] });
});
</script>

162
src/views/comp/drag/index.vue Normal file
View File

@@ -0,0 +1,162 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="拖拽"> 常用于卡片，事项，预约，流程，计划等， </n-card>
</div>
<n-alert title="花式拖拽演示" type="info" class="mt-4">
每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~
</n-alert>
<n-grid
cols="1 s:2 m:3 l:4 xl:4 2xl:4"
class="mt-4 proCard"
responsive="screen"
:x-gap="12"
:y-gap="8"
>
<n-grid-item>
<NCard
title="需求池"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<n-tag type="info">月</n-tag>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="demandList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<n-tag type="info">需求</n-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</NCard>
</n-grid-item>
<n-grid-item>
<NCard
title="开发中"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<n-tag type="info">月</n-tag>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="exploitList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<n-tag type="warning">开发中</n-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</NCard>
</n-grid-item>
<n-grid-item>
<NCard
title="已完成"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<n-tag type="info">月</n-tag>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="completeList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<n-tag type="error">已完成</n-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</NCard>
</n-grid-item>
<n-grid-item>
<NCard
title="已验收"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<n-tag type="info">月</n-tag>
</template>
<Draggable
class="draggable-ul"
animation="300"
:list="approvedList"
group="people"
itemKey="name"
>
<template #item="{ element }">
<div class="cursor-move draggable-li">
<n-tag type="success">已验收</n-tag><span class="ml-2">{{ element.name }}</span>
</div>
</template>
</Draggable>
</NCard>
</n-grid-item>
</n-grid>
</div>
</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="less" scoped>
.draggable-ul {
width: 100%;
overflow: hidden;
margin-top: -16px;
.draggable-li {
width: 100%;
padding: 16px 10px;
color: #333;
border-bottom: 1px solid #efeff5;
}
}
</style>

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

@@ -3,13 +3,15 @@
<div class="n-layout-page-header">
<n-card :bordered="false" title="基础表单"> 基础表单，用于向用户收集表单信息 </n-card>
</div>
<n-card :bordered="false" class="proCard mt-4">
<n-card :bordered="false" class="mt-4 proCard">
<div class="BasicForm">
<BasicForm
submitButtonText="提交预约"
layout="horizontal"
:gridProps="{ cols: 1 }"
:schemas="schemas"
@submit="handleSubmit"
@reset="handleReset"
>
<template #statusSlot="{ model, field }">
<n-input v-model:value="model[field]" />
@@ -20,12 +22,11 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicForm, FormSchema } from '@/components/Form/index';
<script lang="ts" setup>
import { BasicForm } from '@/components/Form/index';
import { useMessage } from 'naive-ui';
const schemas: FormSchema[] = [
const schemas = [
{
field: 'name',
component: 'NInput',
@@ -149,29 +150,16 @@
},
];
export default defineComponent({
components: { BasicForm },
setup() {
const formRef: any = ref(null);
const message = useMessage();
const message = useMessage();
function handleSubmit(values: Recordable) {
console.log(values);
message.success(JSON.stringify(values));
}
function handleSubmit(values: Recordable) {
console.log(values);
message.success(JSON.stringify(values));
}
function handleReset(values: Recordable) {
console.log(values);
}
return {
schemas,
formRef,
handleSubmit,
handleReset,
};
},
});
function handleReset(values: Recordable) {
console.log(values);
}
</script>
<style lang="less" scoped>

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

@@ -3,7 +3,7 @@
<div class="n-layout-page-header">
<n-card :bordered="false" title="基础表单"> useForm 表单，用于向用户收集表单信息 </n-card>
</div>
<n-card :bordered="false" class="proCard mt-4">
<n-card :bordered="false" class="mt-4 proCard">
<div class="BasicForm">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<template #statusSlot="{ model, field }">
@@ -15,12 +15,11 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
<script lang="ts" setup>
import { BasicForm, useForm } from '@/components/Form/index';
import { useMessage } from 'naive-ui';
const schemas: FormSchema[] = [
const schemas = [
{
field: 'name',
component: 'NInput',
@@ -165,43 +164,25 @@
},
];
export default defineComponent({
components: { BasicForm },
setup() {
const formRef: any = ref(null);
const message = useMessage();
const message = useMessage();
const [register, { setFieldsValue }] = useForm({
gridProps: { cols: 1 },
collapsedRows: 3,
labelWidth: 120,
layout: 'horizontal',
submitButtonText: '提交预约',
schemas,
});
function setName() {
setFieldsValue({ name: '小马哥' });
}
function handleSubmit(values: Recordable) {
console.log(values);
message.success(JSON.stringify(values));
}
function handleReset(values: Recordable) {
console.log(values);
}
return {
register,
formRef,
handleSubmit,
handleReset,
setName,
};
},
const [register, {}] = useForm({
gridProps: { cols: 1 },
collapsedRows: 3,
labelWidth: 120,
layout: 'horizontal',
submitButtonText: '提交预约',
schemas,
});
function handleSubmit(values: Recordable) {
console.log(values);
message.success(JSON.stringify(values));
}
function handleReset(values: Recordable) {
console.log(values);
}
</script>
<style lang="less" scoped>

114
src/views/comp/richtext/vue-quill.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="富文本">
富文本，用于展示图文信息，比如商品详情，文章详情等...
</n-card>
</div>
<n-card :bordered="false" class="mt-4 proCard">
<QuillEditor
ref="quillEditor"
:options="options"
v-model:content="myContent"
style="height: 350px"
@ready="readyQuill"
class="quillEditor"
/>
<template #footer>
<n-space>
<n-button @click="addText">增加文本</n-button>
<n-button @click="addImg">增加图片</n-button>
<n-button @click="getHtml">获取HTML</n-button>
</n-space>
</template>
</n-card>
<n-card :bordered="false" class="mt-4 proCard" title="HTML 内容">
<n-input
v-model:value="myContentHtml"
type="textarea"
placeholder="html"
:autosize="{
minRows: 3,
maxRows: 6,
}"
/>
</n-card>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } 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();
}
</script>
<style lang="less">
.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>

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

@@ -18,105 +18,90 @@
</n-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, h } from 'vue';
<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 { useDialog, useMessage } from 'naive-ui';
export default defineComponent({
components: { BasicTable },
setup() {
const message = useMessage();
const dialog = useDialog();
const actionRef = ref();
const state = reactive({
params: {
pageSize: 5,
name: 'xiaoMa',
},
actionColumn: {
width: 150,
title: '操作',
key: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction, {
style: 'button',
actions: createActions(record),
});
},
},
const message = useMessage();
const dialog = useDialog();
const actionRef = 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: '删除',
icon: 'ic:outline-delete-outline',
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 (params) => {
const data = await getTableList(params);
return data;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload();
}
function handleDelete(record) {
console.log(record);
dialog.info({
title: '提示',
content: `您想删除${record.name}`,
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
message.success('删除成功');
},
onNegativeClick: () => {},
});
}
function handleEdit(record) {
console.log(record);
message.success('您点击了编辑按钮');
}
return {
...toRefs(state),
columns,
actionRef,
loadDataTable,
onCheckedRow,
reloadTable,
};
},
});
function createActions(record) {
return [
{
label: '删除',
icon: 'ic:outline-delete-outline',
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) => {
return await getTableList({...res,...params});
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload();
}
function handleDelete(record) {
console.log(record);
dialog.info({
title: '提示',
content: `您想删除${record.name}`,
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
message.success('删除成功');
},
onNegativeClick: () => {},
});
}
function handleEdit(record) {
console.log(record);
message.success('您点击了编辑按钮');
}
</script>
<style lang="less" scoped></style>

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

@@ -19,100 +19,41 @@
</n-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, h } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { BasicTable } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { columns } from './CellColumns';
export default defineComponent({
components: { BasicTable },
setup() {
const actionRef = ref();
const currentEditKeyRef = ref('');
const state = reactive({
params: {
pageSize: 5,
name: 'xiaoMa',
},
});
function handleEdit(record) {
currentEditKeyRef.value = record.key;
record.onEdit?.(true);
}
function handleCancel(record: EditRecordRow) {
currentEditKeyRef.value = '';
record.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: EditRecordRow) {
const pass = await record.onEdit?.(false, true);
if (pass) {
currentEditKeyRef.value = '';
}
}
function createActions(record) {
if (!record.editable) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
];
} else {
return [
{
label: '保存',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
onClick: handleCancel.bind(null, record),
},
];
}
}
const loadDataTable = async (params) => {
const data = await getTableList(params);
return data;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
console.log(actionRef.value);
actionRef.value.reload();
}
function editEnd({ record, index, key, value }) {
console.log(value);
}
return {
...toRefs(state),
columns,
actionRef,
loadDataTable,
onCheckedRow,
reloadTable,
editEnd,
onEditChange,
};
},
const actionRef = ref();
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
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({ ...res, ...params });
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
console.log(actionRef.value);
actionRef.value.reload();
}
function editEnd({ record, index, key, value }) {
console.log(value);
}
</script>
<style lang="less" scoped></style>

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

@@ -11,7 +11,7 @@
@edit-end="editEnd"
@edit-change="onEditChange"
@update:checked-row-keys="onCheckedRow"
:scroll-x="1510"
:scroll-x="1590"
>
<template #toolbar>
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -20,113 +20,95 @@
</n-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, h } from 'vue';
<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';
export default defineComponent({
components: { BasicTable },
setup() {
const actionRef = ref();
const currentEditKeyRef = ref('');
const state = reactive({
params: {
pageSize: 5,
name: 'xiaoMa',
},
actionColumn: {
width: 150,
title: '操作',
key: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction, {
style: 'button',
actions: createActions(record),
});
},
},
const actionRef = ref();
const currentEditKeyRef = 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 handleEdit(record) {
currentEditKeyRef.value = record.key;
record.onEdit?.(true);
}
function handleCancel(record: EditRecordRow) {
currentEditKeyRef.value = '';
record.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: EditRecordRow) {
const pass = await record.onEdit?.(false, true);
if (pass) {
currentEditKeyRef.value = '';
}
}
function createActions(record) {
if (!record.editable) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
];
} else {
return [
{
label: '保存',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
onClick: handleCancel.bind(null, record),
},
];
}
}
const loadDataTable = async (params) => {
const data = await getTableList(params);
return data;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
console.log(actionRef.value);
actionRef.value.reload();
}
function editEnd({ record, index, key, value }) {
console.log(value);
}
return {
...toRefs(state),
columns,
actionRef,
loadDataTable,
onCheckedRow,
reloadTable,
editEnd,
onEditChange,
};
},
});
function handleEdit(record) {
currentEditKeyRef.value = record.key;
record.onEdit?.(true);
}
function handleCancel(record) {
currentEditKeyRef.value = '';
record.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.onEdit?.(false, true);
if (pass) {
currentEditKeyRef.value = '';
}
}
function createActions(record) {
if (!record.editable) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
];
} else {
return [
{
label: '保存',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
onClick: handleCancel.bind(null, record),
},
];
}
}
const loadDataTable = async (res) => {
return await getTableList({ ...res, ...params });
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
console.log(actionRef.value);
actionRef.value.reload();
}
function editEnd({ record, index, key, value }) {
console.log(value);
}
</script>
<style lang="less" scoped></style>

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

@@ -59,7 +59,7 @@ export const columns = [
key: 'beginTime',
editRow: true,
edit: true,
width: 160,
width: 240,
editComponent: 'NDatePicker',
editComponentProps: {
type: 'datetime',

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

@@ -3,7 +3,7 @@
<div class="n-layout-page-header">
<n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
</div>
<n-card :bordered="false" class="proCard mt-4">
<n-card :bordered="false" class="mt-4 proCard">
<n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
<n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
<n-form
@@ -47,8 +47,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
<script lang="ts" setup>
import { ref, unref, reactive } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicUpload } from '@/components/Upload';
import { useGlobSetting } from '@/hooks/setting';
@@ -74,54 +74,38 @@
},
};
export default defineComponent({
components: { BasicUpload },
setup() {
const formRef: any = ref(null);
const message = useMessage();
const { uploadUrl } = globSetting;
const formRef: any = ref(null);
const message = useMessage();
const { uploadUrl } = globSetting;
const state = reactive({
formValue: {
name: '',
mobile: '',
//图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
},
uploadHeaders: {
platform: 'miniPrograms',
timestamp: new Date().getTime(),
token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
},
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
function resetForm() {
formRef.value.restoreValidation();
}
function uploadChange(list: string[]) {
state.formValue.images = unref(list);
}
return {
...toRefs(state),
formRef,
uploadUrl,
rules,
formSubmit,
resetForm,
uploadChange,
};
},
const formValue = reactive({
name: '',
mobile: '',
//图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
});
const uploadHeaders = reactive({
platform: 'miniPrograms',
timestamp: new Date().getTime(),
token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
function resetForm() {
formRef.value.restoreValidation();
}
function uploadChange(list: string[]) {
formValue.images = unref(list);
}
</script>

351
src/views/dashboard/console/console.vue
View File

@@ -13,30 +13,40 @@
<n-tag type="success">日</n-tag>
</template>
<div class="py-1 px-1 flex justify-between">
<CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
<n-skeleton v-if="loading" :width="100" size="medium" />
<CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
</div>
<div class="py-1 px-1 flex justify-between">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
<n-icon size="12" color="#00ff6f">
<component is="CaretUpOutlined" />
</n-icon>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
日同比
<CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
<n-icon size="12" color="#00ff6f">
<component is="CaretUpOutlined" />
</n-icon>
</template>
</div>
<div class="text-sn">
周同比
<CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
<n-icon size="12" color="#ffde66">
<component is="CaretDownOutlined" />
</n-icon>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
周同比
<CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
<n-icon size="12" color="#ffde66">
<component is="CaretDownOutlined" />
</n-icon>
</template>
</div>
</div>
<template #footer>
<div class="flex justify-between">
<div class="text-sn"> 总访问量： </div>
<div class="text-sn">
<CountTo :startVal="1" :endVal="visits.amount" />
</div>
<n-skeleton v-if="loading" text :repeat="2" />
<template v-else>
<div class="text-sn"> 总访问量： </div>
<div class="text-sn">
<CountTo :startVal="1" :endVal="visits.amount" />
</div>
</template>
</div>
</template>
</NCard>
@@ -52,7 +62,14 @@
<n-tag type="info">周</n-tag>
</template>
<div class="py-1 px-1 flex justify-between">
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
<n-skeleton v-if="loading" :width="100" size="medium" />
<CountTo
v-else
prefix="￥"
:startVal="1"
:endVal="saleroom.weekSaleroom"
class="text-3xl"
/>
</div>
<div class="py-2 px-2 flex justify-between">
<div class="text-sn flex-1">
@@ -66,10 +83,13 @@
</div>
<template #footer>
<div class="flex justify-between">
<div class="text-sn"> 总销售额： </div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
</div>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
<div class="text-sn"> 总销售额： </div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
</div>
</template>
</div>
</template>
</NCard>
@@ -85,30 +105,40 @@
<n-tag type="warning">周</n-tag>
</template>
<div class="py-1 px-1 flex justify-between">
<CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
<n-skeleton v-if="loading" :width="100" size="medium" />
<CountTo v-else :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
</div>
<div class="py-1 px-1 flex justify-between">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
<n-icon size="12" color="#00ff6f">
<component is="CaretUpOutlined" />
</n-icon>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
日同比
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
<n-icon size="12" color="#00ff6f">
<component is="CaretUpOutlined" />
</n-icon>
</template>
</div>
<div class="text-sn">
周同比
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
<n-icon size="12" color="#ffde66">
<component is="CaretDownOutlined" />
</n-icon>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
周同比
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
<n-icon size="12" color="#ffde66">
<component is="CaretDownOutlined" />
</n-icon>
</template>
</div>
</div>
<template #footer>
<div class="flex justify-between">
<div class="text-sn"> 转化率： </div>
<div class="text-sn">
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
</div>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
<div class="text-sn"> 转化率： </div>
<div class="text-sn">
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
</div>
</template>
</div>
</template>
</NCard>
@@ -124,30 +154,40 @@
<n-tag type="error">月</n-tag>
</template>
<div class="py-1 px-1 flex justify-between">
<CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
<n-skeleton v-if="loading" :width="100" size="medium" />
<CountTo v-else prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
</div>
<div class="py-1 px-1 flex justify-between">
<div class="text-sn">
月同比
<CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
<n-icon size="12" color="#00ff6f">
<component is="CaretUpOutlined" />
</n-icon>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
月同比
<CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
<n-icon size="12" color="#00ff6f">
<component is="CaretUpOutlined" />
</n-icon>
</template>
</div>
<div class="text-sn">
月同比
<CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
<n-icon size="12" color="#ffde66">
<component is="CaretDownOutlined" />
</n-icon>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
月同比
<CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
<n-icon size="12" color="#ffde66">
<component is="CaretDownOutlined" />
</n-icon>
</template>
</div>
</div>
<template #footer>
<div class="flex justify-between">
<div class="text-sn"> 总成交额： </div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
</div>
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
<div class="text-sn"> 总成交额： </div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
</div>
</template>
</div>
</template>
</NCard>
@@ -160,7 +200,8 @@
<n-grid-item v-for="(item, index) in iconList" :key="index">
<NCard content-style="padding-top: 0;" size="small" :bordered="false">
<template #footer>
<div class="cursor-pointer">
<n-skeleton v-if="loading" size="medium" />
<div class="cursor-pointer" v-else>
<p class="flex justify-center">
<span>
<n-icon :size="item.size" class="flex-1" :color="item.color">
@@ -182,113 +223,115 @@
<VisiTab />
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import Icons from './components/Icons';
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getConsoleInfo } from '@/api/dashboard/console';
import VisiTab from './components/VisiTab.vue';
import { CountTo } from '@/components/CountTo/index';
import { getConsoleInfo } from '@/api/dashboard/console';
import {
CaretUpOutlined,
CaretDownOutlined,
UsergroupAddOutlined,
BarChartOutlined,
ShoppingCartOutlined,
AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined,
} from '@vicons/antd';
export default defineComponent({
components: { ...Icons, VisiTab, CountTo },
setup() {
const state = reactive({
cardHeaderStyle: {
'border-bottom': '1px solid #eee',
'font-size': '16px',
},
visits: {},
saleroom: {},
orderLarge: {},
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 { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
state.visits = visits;
state.saleroom = saleroom;
state.orderLarge = orderLarge;
state.volume = volume;
});
return {
...toRefs(state),
iconList,
};
const cardHeaderStyle = ref({ 'border-bottom': '1px solid #eee', 'font-size': '16px' });
const loading = ref(true);
const visits = ref({});
const saleroom = ref({});
const orderLarge = ref({});
const volume = ref({});
// 图标列表
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 { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
visits.value = visits;
saleroom.value = saleroom;
orderLarge.value = orderLarge;
volume.value = volume;
loading.value = false;
});
</script>

11
src/views/dashboard/monitor/monitor.vue
View File

@@ -2,15 +2,6 @@
<div>监控台</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
components: {},
setup() {
return {};
},
});
</script>
<script lang="ts" setup></script>
<style lang="less" scoped></style>

26
src/views/dashboard/workplace/workplace.vue
View File

@@ -298,7 +298,7 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import schoolboy from '@/assets/images/schoolboy.png';
import {
GithubOutlined,
@@ -310,30 +310,6 @@
Html5Outlined,
} from '@vicons/antd';
import { LogoVue, LogoAngular, LogoReact, LogoJavascript } from '@vicons/ionicons5';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'DashboardWorkplace',
components: {
GithubOutlined,
LogoVue,
DashboardOutlined,
ProfileOutlined,
FileProtectOutlined,
SettingOutlined,
ApartmentOutlined,
Html5Outlined,
LogoAngular,
LogoReact,
LogoJavascript,
},
setup() {
return {
schoolboy,
};
},
});
</script>
<style lang="less" scoped>

18
src/views/exception/403.vue
View File

@@ -10,20 +10,12 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
const router = useRouter();
function goHome() {
router.push('/');
}
</script>
<style lang="less" scoped>

18
src/views/exception/404.vue
View File

@@ -10,20 +10,12 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
const router = useRouter();
function goHome() {
router.push('/');
}
</script>
<style lang="less" scoped>

18
src/views/exception/500.vue
View File

@@ -10,20 +10,12 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
const router = useRouter();
function goHome() {
router.push('/');
}
</script>
<style lang="less" scoped>

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

@@ -81,8 +81,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
<script lang="ts" setup>
import { ref, unref, reactive } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicUpload } from '@/components/Upload';
import { useGlobSetting } from '@/hooks/setting';
@@ -149,66 +149,46 @@
},
};
export default defineComponent({
components: { BasicUpload },
setup() {
const formRef: any = ref(null);
const message = useMessage();
const { uploadUrl } = globSetting;
const formRef: any = ref(null);
const message = useMessage();
const { uploadUrl } = globSetting;
const defaultValueRef = () => ({
name: '',
mobile: '',
remark: '',
sex: 1,
matter: null,
doctor: null,
datetime: [],
});
const state = reactive({
formValue: defaultValueRef(),
//图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
uploadList: [
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
],
uploadHeaders: {
platform: 'miniPrograms',
timestamp: new Date().getTime(),
token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
},
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
function resetForm() {
formRef.value.restoreValidation();
state.formValue = Object.assign(state.formValue, defaultValueRef());
}
function uploadChange(list: string[]) {
console.log(list);
}
return {
...toRefs(state),
formRef,
uploadUrl,
rules,
doctorList,
matterList,
formSubmit,
resetForm,
uploadChange,
};
},
const defaultValueRef = () => ({
name: '',
mobile: '',
remark: '',
sex: 1,
matter: null,
doctor: null,
datetime: [],
});
let formValue = reactive(defaultValueRef());
const uploadList = ref([
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
]);
const uploadHeaders = reactive({
platform: 'miniPrograms',
timestamp: new Date().getTime(),
token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
function resetForm() {
formRef.value.restoreValidation();
formValue = Object.assign(unref(formValue), defaultValueRef());
}
function uploadChange(list: string[]) {
console.log(list);
}
</script>

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

@@ -8,7 +8,7 @@
<n-card
:bordered="false"
title="基本信息"
class="proCard mt-4"
class="mt-4 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
@@ -29,7 +29,7 @@
<n-card
:bordered="false"
title="其它信息"
class="proCard mt-4"
class="mt-4 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
@@ -50,7 +50,7 @@
<n-card
:bordered="false"
title="表格信息"
class="proCard mt-4"
class="mt-4 proCard"
size="small"
:segmented="{ content: 'hard' }"
>
@@ -119,14 +119,6 @@
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return {};
},
});
</script>
<script setup></script>
<style lang="less" scoped></style>

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

@@ -47,8 +47,8 @@
</n-form>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref, defineEmits } from 'vue';
import { useMessage } from 'naive-ui';
const myAccountList = [
@@ -73,61 +73,50 @@
},
];
export default defineComponent({
emits: ['nextStep'],
setup(_, { emit }) {
const form1Ref: any = ref(null);
const message = useMessage();
const current = ref(1);
const emit = defineEmits(['nextStep']);
return {
form1Ref,
current,
formValue: ref({
accountType: 1,
myAccount: null,
account: 'xioama@qq.com',
money: '1980',
name: 'Ah jung',
}),
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',
},
},
myAccountList,
accountTypeList,
formSubmit() {
form1Ref.value.validate((errors) => {
if (!errors) {
emit('nextStep');
} else {
message.error('验证失败，请填写完整信息');
}
});
},
resetForm() {
form1Ref.value.restoreValidation();
},
};
},
const form1Ref: any = ref(null);
const message = useMessage();
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() {
form1Ref.value.validate((errors) => {
if (!errors) {
emit('nextStep');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
</script>

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

@@ -32,50 +32,41 @@
</n-form>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref, defineEmits } from 'vue';
import { useMessage } from 'naive-ui';
const form2Ref: any = ref(null);
const message = useMessage();
const loading = ref(false);
export default defineComponent({
emits: ['prevStep', 'nextStep'],
setup(_, { emit }) {
const form2Ref: any = ref(null);
const message = useMessage();
const loading = ref(false);
function prevStep() {
emit('prevStep');
}
function formSubmit() {
loading.value = true;
form2Ref.value.validate((errors) => {
if (!errors) {
setTimeout(() => {
emit('nextStep');
}, 1500);
} else {
message.error('验证失败，请填写完整信息');
}
});
}
return {
form2Ref,
loading,
formValue: ref({
password: '086611',
}),
rules: {
password: {
required: true,
message: '请输入支付密码',
trigger: 'blur',
},
},
prevStep,
formSubmit,
};
},
const formValue = ref({
password: '086611',
});
const rules = {
password: {
required: true,
message: '请输入支付密码',
trigger: 'blur',
},
};
const emit = defineEmits(['prevStep', 'nextStep']);
function prevStep() {
emit('prevStep');
}
function formSubmit() {
loading.value = true;
form2Ref.value.validate((errors) => {
if (!errors) {
setTimeout(() => {
emit('nextStep');
}, 1500);
} else {
message.error('验证失败，请填写完整信息');
}
});
}
</script>

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

@@ -31,34 +31,17 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
<script lang="ts" setup>
import { defineEmits } from 'vue';
export default defineComponent({
emits: ['finish', 'prevStep'],
setup(_, { emit }) {
const router = useRouter();
const emit = defineEmits(['finish', 'prevStep']);
function prevStep() {
emit('prevStep');
}
function prevStep() {
emit('prevStep');
}
function finish() {
emit('finish');
}
function toOrderList() {
router.push('/form/step-form');
}
return {
prevStep,
finish,
toOrderList,
};
},
});
function finish() {
emit('finish');
}
</script>
<style lang="less" scoped>

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

@@ -5,7 +5,7 @@
将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
</n-card>
</div>
<n-card :bordered="false" class="proCard mt-4">
<n-card :bordered="false" class="mt-4 proCard">
<n-space vertical class="steps" justify="center">
<n-steps :current="currentTab" :status="currentStatus">
<n-step title="填写转账信息" description="确保填写正确" />
@@ -20,43 +20,30 @@
</div>
</template>
<script>
<script setup>
import { defineComponent, ref } from 'vue';
import step1 from './Step1.vue';
import step2 from './Step2.vue';
import step3 from './Step3.vue';
export default defineComponent({
components: { step1, step2, step3 },
setup() {
const currentTab = ref(1);
const currentStatus = ref('process');
const currentTab = ref(1);
const currentStatus = ref('process');
function nextStep() {
if (currentTab.value < 3) {
currentTab.value += 1;
}
}
function nextStep() {
if (currentTab.value < 3) {
currentTab.value += 1;
}
}
function prevStep() {
if (currentTab.value > 1) {
currentTab.value -= 1;
}
}
function prevStep() {
if (currentTab.value > 1) {
currentTab.value -= 1;
}
}
function finish() {
currentTab.value = 1;
}
return {
currentTab,
currentStatus,
nextStep,
prevStep,
finish,
};
},
});
function finish() {
currentTab.value = 1;
}
</script>
<style lang="less" scoped>

70
src/views/iframe/index.vue
View File

@@ -5,55 +5,45 @@
</div>
</n-spin>
</template>
<script lang="ts">
import { defineComponent, ref, unref, onMounted, nextTick } from 'vue';
<script lang="ts" setup>
import { ref, unref, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
name: 'IFrame',
setup() {
const currentRoute = useRoute();
const loading = ref(false);
const frameRef = ref<HTMLFrameElement | null>(null);
const frameSrc = ref<string>('');
const currentRoute = useRoute();
const loading = ref(false);
const frameRef = ref<HTMLFrameElement | null>(null);
const frameSrc = ref<string>('');
if (unref(currentRoute.meta)?.frameSrc) {
frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
}
if (unref(currentRoute.meta)?.frameSrc) {
frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
}
function hideLoading() {
loading.value = false;
}
function hideLoading() {
loading.value = false;
}
function init() {
nextTick(() => {
const iframe = unref(frameRef);
if (!iframe) return;
const _frame = iframe as any;
if (_frame.attachEvent) {
_frame.attachEvent('onload', () => {
hideLoading();
});
} else {
iframe.onload = () => {
hideLoading();
};
}
function init() {
nextTick(() => {
const iframe = unref(frameRef);
if (!iframe) return;
const _frame = iframe as any;
if (_frame.attachEvent) {
_frame.attachEvent('onload', () => {
hideLoading();
});
} else {
iframe.onload = () => {
hideLoading();
};
}
});
}
onMounted(() => {
loading.value = true;
init();
});
return {
loading,
frameRef,
frameSrc,
};
},
onMounted(() => {
loading.value = true;
init();
});
</script>
<style lang="less" scoped>

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

@@ -61,11 +61,11 @@
</n-card>
</template>
<script lang="ts">
import { defineComponent, h, reactive, ref, toRefs } from 'vue';
<script lang="ts" setup>
import { h, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { BasicForm, useForm } from '@/components/Form/index';
import { getTableList } from '@/api/table/list';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
@@ -90,7 +90,7 @@
},
};
const schemas: FormSchema[] = [
const schemas = [
{
field: 'name',
labelMessage: '这是一个提示',
@@ -214,164 +214,134 @@
},
];
export default defineComponent({
// eslint-disable-next-line vue/no-unused-components
components: { BasicTable, PlusOutlined, TableAction, BasicForm },
setup() {
const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const state = reactive({
showModal: false,
formBtnLoading: false,
formParams: {},
params: {
pageSize: 5,
name: 'xiaoMa',
},
actionColumn: {
width: 220,
title: '操作',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '删除',
icon: 'ic:outline-delete-outline',
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'],
},
],
dropDownActions: [
{
label: '启用',
key: 'enabled',
// 根据业务控制是否显示: 非enable状态的不显示启用按钮
ifShow: () => {
return true;
},
},
{
label: '禁用',
key: 'disabled',
ifShow: () => {
return true;
},
},
],
select: (key) => {
message.info(`您点击了，${key} 按钮`);
},
});
const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const showModal = ref(false);
const formBtnLoading = ref(false);
const formParams = reactive({
name: '',
address: '',
date: null,
});
const params = ref({
pageSize: 5,
name: 'xiaoMa',
});
const actionColumn = reactive({
width: 220,
title: '操作',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '删除',
icon: 'ic:outline-delete-outline',
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'],
},
],
dropDownActions: [
{
label: '启用',
key: 'enabled',
// 根据业务控制是否显示: 非enable状态的不显示启用按钮
ifShow: () => {
return true;
},
},
{
label: '禁用',
key: 'disabled',
ifShow: () => {
return true;
},
},
],
select: (key) => {
message.info(`您点击了，${key} 按钮`);
},
});
const [register, {}] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
function addTable() {
state.showModal = true;
}
const loadDataTable = async (res) => {
let params = {
...res,
...state.formParams,
};
return await getTableList(params);
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload();
}
function confirmForm(e) {
e.preventDefault();
state.formBtnLoading = true;
formRef.value.validate((errors) => {
if (!errors) {
message.success('新建成功');
setTimeout(() => {
state.showModal = false;
reloadTable();
});
} else {
message.error('请填写完整信息');
}
state.formBtnLoading = false;
});
}
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
router.push({ name: 'basic-info', params: { id: record.id } });
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
message.info('点击了删除');
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
message.info('点击了删除');
}
function handleSubmit(values: Recordable) {
console.log(values);
state.formParams = values;
reloadTable();
}
function handleReset(values: Recordable) {
console.log(values);
}
return {
...toRefs(state),
formRef,
columns,
rules,
actionRef,
register,
confirmForm,
loadDataTable,
onCheckedRow,
reloadTable,
addTable,
handleEdit,
handleDelete,
handleOpen,
handleSubmit,
handleReset,
};
},
});
const [register, {}] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
function addTable() {
showModal.value = true;
}
const loadDataTable = async (res) => {
return await getTableList({...res, ...formParams, ...params.value});
};
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload();
}
function confirmForm(e) {
e.preventDefault();
formBtnLoading.value = true;
formRef.value.validate((errors) => {
if (!errors) {
message.success('新建成功');
setTimeout(() => {
showModal.value = false;
reloadTable();
});
} else {
message.error('请填写完整信息');
}
formBtnLoading.value = false;
});
}
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
router.push({ name: 'basic-info', params: { id: record.id } });
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
message.info('点击了删除');
}
function handleSubmit(values: Recordable) {
console.log(values);
reloadTable();
}
function handleReset(values: Recordable) {
console.log(values);
}
</script>
<style lang="less" scoped></style>

148
src/views/login/index.vue
View File

@@ -50,7 +50,7 @@
<n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
</div>
<div class="flex-initial order-last">
<a href="javascript:;">忘记密码</a>
<a href="javascript:">忘记密码</a>
</div>
</div>
</n-form-item>
@@ -65,21 +65,21 @@
<span>其它登录方式</span>
</div>
<div class="flex-initial mx-2">
<a href="javascript:;">
<a href="javascript:">
<n-icon size="24" color="#2d8cf0">
<LogoGithub />
</n-icon>
</a>
</div>
<div class="flex-initial mx-2">
<a href="javascript:;">
<a href="javascript:">
<n-icon size="24" color="#2d8cf0">
<LogoFacebook />
</n-icon>
</a>
</div>
<div class="flex-initial" style="margin-left: auto">
<a href="javascript:;">注册账号</a>
<a href="javascript:">注册账号</a>
</div>
</div>
</n-form-item>
@@ -89,95 +89,83 @@
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { useMessage } from 'naive-ui';
import { ResultEnum } from '@/enums/httpEnum';
import logo from '@/assets/images/logo.png';
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
interface FormState {
username: string;
password: string;
}
export default defineComponent({
components: { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook },
setup() {
const formRef = ref();
const message = useMessage();
const state = reactive({
loading: false,
autoLogin: true,
formInline: {
username: 'admin',
password: '123456',
isCaptcha: false,
},
});
const rules = {
username: { required: true, message: '请输入用户名', trigger: 'blur' },
password: { required: true, message: '请输入密码', trigger: 'blur' },
isCaptcha: {
required: true,
type: 'boolean',
trigger: 'change',
message: '请点击按钮进行验证码校验',
validator: (_, value) => value === true,
},
};
const userStore = useUserStore();
const formRef = ref();
const message = useMessage();
const loading = ref(false);
const autoLogin = ref(true);
const router = useRouter();
const route = useRoute();
const handleSubmit = (e) => {
e.preventDefault();
formRef.value.validate(async (errors) => {
if (!errors) {
const { username, password } = state.formInline;
message.loading('登录中...');
state.loading = true;
const params: FormState = {
username,
password,
};
const { code, message: msg } = await userStore.login(params);
if (code == ResultEnum.SUCCESS) {
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
message.success('登录成功！');
router.replace(toPath).then((_) => {
if (route.name == 'login') {
router.replace('/');
}
});
} else {
message.info(msg || '登录失败');
}
} else {
message.error('请填写完整信息，并且进行验证码校验');
}
});
};
function onAuthCode() {
state.formInline.isCaptcha = true;
}
return {
...toRefs(state),
formRef,
rules,
logo,
handleSubmit,
onAuthCode,
};
},
const formInline = reactive({
username: 'admin',
password: '123456',
isCaptcha: false,
});
const rules = {
username: { required: true, message: '请输入用户名', trigger: 'blur' },
password: { required: true, message: '请输入密码', trigger: 'blur' },
isCaptcha: {
required: true,
type: 'boolean',
trigger: 'change',
message: '请点击按钮进行验证码校验',
validator: (_, value) => value === true,
},
};
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const handleSubmit = (e) => {
e.preventDefault();
formRef.value.validate(async (errors) => {
if (!errors) {
const { username, password } = formInline;
message.loading('登录中...');
loading.value = true;
const params: FormState = {
username,
password,
};
const { code, message: msg } = await userStore.login(params);
if (code == ResultEnum.SUCCESS) {
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
message.success('登录成功！');
router.replace(toPath).then((_) => {
if (route.name == 'login') {
router.replace('/');
}
});
} else {
message.info(msg || '登录失败');
}
} else {
message.error('请填写完整信息，并且进行验证码校验');
}
});
};
const onAuthCode = () => {
formInline.isCaptcha = true;
}
</script>
<style lang="less" scoped>

19
src/views/result/fail.vue
View File

@@ -36,22 +36,15 @@
</div>
</n-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { InfoCircleOutlined } from '@vicons/antd';
export default defineComponent({
components: { InfoCircleOutlined },
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
const router = useRouter();
function goHome() {
router.push('/');
}
</script>
<style lang="less" scoped>
.result-box {

19
src/views/result/info.vue
View File

@@ -40,22 +40,15 @@
</div>
</n-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { CheckCircleOutlined } from '@vicons/antd';
export default defineComponent({
components: { CheckCircleOutlined },
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
const router = useRouter();
function goHome() {
router.push('/');
}
</script>
<style lang="less" scoped>
.result-box {

18
src/views/result/success.vue
View File

@@ -22,20 +22,14 @@
</div>
</n-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
const router = useRouter();
function goHome() {
router.push('/');
}
</script>
<style lang="less" scoped>
.result-box {

52
src/views/setting/account/BasicSetting.vue
View File

@@ -28,8 +28,8 @@
</n-grid>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
const rules = {
@@ -49,37 +49,23 @@
trigger: 'input',
},
};
const formRef: any = ref(null);
const message = useMessage();
export default defineComponent({
setup() {
const formRef: any = ref(null);
const message = useMessage();
const state = reactive({
formValue: {
name: '',
mobile: '',
email: '',
address: '',
},
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
return {
formRef,
...toRefs(state),
rules,
formSubmit,
};
},
const formValue = reactive({
name: '',
mobile: '',
email: '',
address: '',
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
</script>

56
src/views/setting/account/SafetySetting.vue
View File

@@ -49,58 +49,4 @@
</n-grid>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { useMessage } from 'naive-ui';
const rules = {
name: {
required: true,
message: '请输入昵称',
trigger: 'blur',
},
email: {
required: true,
message: '请输入邮箱',
trigger: 'blur',
},
mobile: {
required: true,
message: '请输入联系电话',
trigger: 'input',
},
};
export default defineComponent({
setup() {
const formRef: any = ref(null);
const message = useMessage();
const state = reactive({
formValue: {
name: '',
mobile: '',
email: '',
address: '',
},
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
return {
formRef,
...toRefs(state),
rules,
formSubmit,
};
},
});
</script>
<script lang="ts" setup></script>

28
src/views/setting/account/account.vue
View File

@@ -24,8 +24,8 @@
</n-grid>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import BasicSetting from './BasicSetting.vue';
import SafetySetting from './SafetySetting.vue';
@@ -41,26 +41,14 @@
key: 2,
},
];
export default defineComponent({
components: { BasicSetting, SafetySetting },
setup() {
const state = reactive({
type: 1,
typeTitle: '基本设置',
});
function switchType(e) {
state.type = e.key;
state.typeTitle = e.name;
}
const type = ref(1);
const typeTitle = ref('基本设置');
return {
...toRefs(state),
switchType,
typeTabList,
};
},
});
function switchType(e) {
type.value = e.key;
typeTitle.value = e.name;
}
</script>
<style lang="less" scoped>
.thing-cell {

215
src/views/system/menu/menu.vue
View File

@@ -124,8 +124,8 @@
<CreateDrawer ref="createDrawerRef" :title="drawerTitle" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, onMounted, computed } from 'vue';
<script lang="ts" setup>
import { ref, unref, reactive, onMounted, computed } from 'vue';
import { useMessage } from 'naive-ui';
import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd';
import { getMenuList } from '@/api/system/menu';
@@ -145,127 +145,104 @@
},
};
export default defineComponent({
components: { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined, CreateDrawer },
setup() {
const formRef: any = ref(null);
const createDrawerRef = ref();
const message = useMessage();
const formRef: any = ref(null);
const createDrawerRef = ref();
const message = useMessage();
const isAddSon = computed(() => {
return !state.treeItemKey.length;
});
let treeItemKey = ref([]);
const addMenuOptions = ref([
{
label: '添加顶级菜单',
key: 'home',
disabled: false,
},
{
label: '添加子菜单',
key: 'son',
disabled: isAddSon,
},
]);
let expandedKeys = ref([]);
const treeItemKey: string[] = reactive([]);
const treeData = ref([]);
const expandedKeys: string[] = reactive([]);
const loading = ref(true);
const subLoading = ref(false);
const isEditMenu = ref(false);
const treeItemTitle = ref('');
const pattern = ref('');
const drawerTitle = ref('');
const treeData: string[] = reactive([]);
const state = reactive({
loading: true,
subLoading: false,
isEditMenu: false,
treeItemTitle: '',
formParams: {
type: 1,
label: '',
subtitle: '',
path: '',
auth: '',
openType: 1,
},
pattern: '',
drawerTitle: '',
treeItemKey,
expandedKeys,
treeData,
});
function selectAddMenu(key: string) {
state.drawerTitle = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${state.treeItemTitle}`;
openCreateDrawer();
}
function openCreateDrawer() {
const { openDrawer } = createDrawerRef.value;
openDrawer();
}
function selectedTree(keys: string[]) {
if (keys.length) {
const treeItem = getTreeItem(unref(state.treeData), keys[0]);
state.treeItemKey = keys;
state.treeItemTitle = treeItem.label;
state.formParams = Object.assign(state.formParams, treeItem);
state.isEditMenu = true;
} else {
state.isEditMenu = false;
state.treeItemKey = [];
state.treeItemTitle = '';
}
}
function handleReset() {
const treeItem = getTreeItem(unref(state.treeData), state.treeItemKey[0]);
state.formParams = Object.assign(state.formParams, treeItem);
}
function formSubmit() {
formRef.value.validate((errors: boolean) => {
if (!errors) {
message.error('抱歉，您没有该权限');
} else {
message.error('请填写完整信息');
}
});
}
function packHandle() {
if (state.expandedKeys.length) {
state.expandedKeys = [];
} else {
state.expandedKeys = state.treeData.map((item: any) => item.key);
}
}
onMounted(async () => {
const treeMenuList = await getMenuList();
state.expandedKeys = treeMenuList.list.map((item) => item.key);
state.treeData = treeMenuList.list;
state.loading = false;
});
function onExpandedKeys(keys: string[]) {
state.expandedKeys = keys;
}
return {
...toRefs(state),
addMenuOptions,
createDrawerRef,
formRef,
rules,
selectedTree,
handleReset,
formSubmit,
packHandle,
onExpandedKeys,
selectAddMenu,
};
},
const isAddSon = computed(() => {
return !treeItemKey.value.length;
});
const addMenuOptions = ref([
{
label: '添加顶级菜单',
key: 'home',
disabled: false,
},
{
label: '添加子菜单',
key: 'son',
disabled: isAddSon,
},
]);
let formParams = reactive({
type: 1,
label: '',
subtitle: '',
path: '',
auth: '',
openType: 1,
});
function selectAddMenu(key: string) {
drawerTitle.value = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${treeItemTitle.value}`;
openCreateDrawer();
}
function openCreateDrawer() {
const { openDrawer } = createDrawerRef.value;
openDrawer();
}
function selectedTree(keys) {
if (keys.length) {
const treeItem = getTreeItem(unref(treeData), keys[0]);
treeItemKey.value = keys;
treeItemTitle.value = treeItem.label;
formParams = Object.assign(formParams, treeItem);
isEditMenu.value = true;
} else {
isEditMenu.value = false;
treeItemKey.value = [];
treeItemTitle.value = '';
}
}
function handleReset() {
const treeItem = getTreeItem(unref(treeData), treeItemKey[0]);
formParams = Object.assign(formParams, treeItem);
}
function formSubmit() {
formRef.value.validate((errors: boolean) => {
if (!errors) {
message.error('抱歉，您没有该权限');
} else {
message.error('请填写完整信息');
}
});
}
function packHandle() {
if (expandedKeys.value.length) {
expandedKeys.value = [];
} else {
expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
}
}
onMounted(async () => {
const treeMenuList = await getMenuList();
formParams = treeMenuList.list.map((item) => item.key);
treeData.value = treeMenuList.list;
loading.value = false;
});
function onExpandedKeys(keys) {
expandedKeys.value = keys;
}
</script>

297
src/views/system/role/role.vue
View File

@@ -61,8 +61,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, h, onMounted } from 'vue';
<script lang="ts" setup>
import { reactive, ref, unref, h, onMounted } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { getRoleList } from '@/api/system/role';
@@ -70,191 +70,144 @@
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import { getTreeAll } from '@/utils';
import { useRouter } from 'vue-router';
const rules = {
name: {
required: true,
trigger: ['blur', 'input'],
message: '请输入名称',
},
address: {
required: true,
trigger: ['blur', 'input'],
message: '请输入地址',
},
date: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请选择日期',
const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const showModal = ref(false);
const formBtnLoading = ref(false);
const checkedAll = ref(false);
const editRoleTitle = ref('');
const treeData = ref([]);
const expandedKeys = ref([]);
const checkedKeys = ref(['console', 'step-form']);
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
const actionColumn = reactive({
width: 250,
title: '操作',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '菜单权限',
onClick: handleMenuAuth.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
},
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
],
});
},
});
const loadDataTable = async (res: any) => {
let _params = {
...res,
...unref(params),
};
return await getRoleList(_params);
};
export default defineComponent({
components: { BasicTable, TableAction, PlusOutlined },
setup() {
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const state = reactive({
showModal: false,
formBtnLoading: false,
checkedAll: false,
editRoleTitle: '',
treeData: [],
expandedKeys: [],
checkedKeys: ['console', 'step-form'],
formParams: {
name: '',
address: '',
date: [],
},
params: {
pageSize: 5,
name: 'xiaoMa',
},
actionColumn: {
width: 250,
title: '操作',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '菜单权限',
onClick: handleMenuAuth.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
},
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
],
});
},
},
});
function onCheckedRow(rowKeys: any[]) {
console.log(rowKeys);
}
const loadDataTable = async (params) => {
const data = await getRoleList(params);
return data;
};
function reloadTable() {
actionRef.value.reload();
}
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload();
}
function confirmForm(e) {
e.preventDefault();
state.formBtnLoading = true;
formRef.value.validate((errors) => {
if (!errors) {
message.success('新建成功');
setTimeout(() => {
state.showModal = false;
reloadTable();
});
} else {
message.error('请填写完整信息');
}
state.formBtnLoading = false;
function confirmForm(e: any) {
e.preventDefault();
formBtnLoading.value = true;
formRef.value.validate((errors) => {
if (!errors) {
message.success('新建成功');
setTimeout(() => {
showModal.value = false;
reloadTable();
});
} else {
message.error('请填写完整信息');
}
formBtnLoading.value = false;
});
}
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
router.push({ name: 'basic-info', params: { id: record.id } });
}
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
router.push({ name: 'basic-info', params: { id: record.id } });
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
message.info('点击了删除');
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
message.info('点击了删除');
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
message.info('点击了删除');
}
function handleMenuAuth(record: Recordable) {
editRoleTitle.value = `分配 ${record.name} 的菜单权限`;
checkedKeys.value = record.menu_keys;
showModal.value = true;
}
function handleMenuAuth(record: Recordable) {
state.editRoleTitle = `分配 ${record.name} 的菜单权限`;
state.checkedKeys = record.menu_keys;
state.showModal = true;
}
function checkedTree(keys) {
checkedKeys.value = [checkedKeys.value, ...keys];
}
function checkedTree(keys) {
state.checkedKeys = [state.checkedKeys, ...keys];
}
function packHandle() {
if (expandedKeys.value.length) {
expandedKeys.value = [];
} else {
expandedKeys.value = treeData.value.map((item: any) => item.key) as [];
}
}
function packHandle() {
if (state.expandedKeys.length) {
state.expandedKeys = [];
} else {
state.expandedKeys = state.treeData.map((item) => item.key);
}
}
function checkedAllHandle() {
if (!checkedAll.value) {
checkedKeys.value = getTreeAll(treeData.value);
checkedAll.value = true;
} else {
checkedKeys.value = [];
checkedAll.value = false;
}
}
function checkedAllHandle() {
if (!state.checkedAll) {
state.checkedKeys = getTreeAll(state.treeData);
state.checkedAll = true;
} else {
state.checkedKeys = [];
state.checkedAll = false;
}
}
onMounted(async () => {
const treeMenuList = await getMenuList();
state.expandedKeys = treeMenuList.list.map((item) => item.key);
state.treeData = treeMenuList.list;
});
return {
...toRefs(state),
formRef,
columns,
rules,
actionRef,
confirmForm,
loadDataTable,
onCheckedRow,
reloadTable,
handleEdit,
handleDelete,
handleOpen,
handleMenuAuth,
checkedTree,
packHandle,
checkedAllHandle,
};
},
onMounted(async () => {
const treeMenuList = await getMenuList();
expandedKeys.value = treeMenuList.list.map((item) => item.key);
treeData.value = treeMenuList.list;
});
</script>