mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-13 09:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix Bug or esLink formatting

Browse Source
This commit is contained in:
Ah jung
2021-07-22 13:47:44 +08:00
parent f6be8f521e
commit 7f81152793
172 changed files with 10553 additions and 9031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/views/comp/table/columns.ts
View File

@@ -1,72 +1,67 @@
import { h } from 'vue'
import { NAvatar, NButton } from 'naive-ui'
import { h } from 'vue';
import { NAvatar, NButton } from 'naive-ui';
export const columns = [
{
title: 'id',
key: 'id'
{
title: 'id',
key: 'id',
},
{
title: '名称',
key: 'name',
},
{
title: '头像',
key: 'avatar',
render(row) {
return h(NAvatar, {
size: 48,
src: row.avatar,
});
},
{
title: '名称',
key: 'name'
},
{
title: '地址',
key: 'address',
},
{
title: '开始日期',
key: 'beginTime',
},
{
title: '结束日期',
key: 'endTime',
},
{
title: '创建时间',
key: 'date',
},
{
title: '操作',
key: 'actions',
width: 150,
//简单写一下例子，不建议这么写，过段时间，这里封二次封装
render() {
return [
h(
NButton,
{
size: 'small',
type: 'error',
style: 'margin-right:10px',
onClick: () => {},
},
{ default: () => '删除' }
),
h(
NButton,
{
size: 'small',
onClick: () => {},
},
{ default: () => '编辑' }
),
];
},
{
title: '头像',
key: 'avatar',
render(row) {
return h(
NAvatar,
{
size: 48,
src: row.avatar
}
)
}
},
{
title: '地址',
key: 'address'
},
{
title: '开始日期',
key: 'beginTime',
},
{
title: '结束日期',
key: 'endTime',
},
{
title: '创建时间',
key: 'date',
},
{
title: '操作',
key: 'actions',
width: 150,
//简单写一下例子，不建议这么写，过段时间，这里封二次封装
render() {
return [
h(
NButton,
{
size: 'small',
type: 'error',
style: 'margin-right:10px',
onClick: () => {
}
},
{ default: () => '删除' }
),
h(
NButton,
{
size: 'small',
onClick: () => {
}
},
{ default: () => '编辑' }
)
]
}
}
]
},
];

90
src/views/comp/table/list.vue
View File

@@ -1,13 +1,13 @@
<template>
<n-card :bordered="false" class="proCard">
<BasicTable
title="表格列表"
titleTooltip="这是一个提示"
:columns="columns"
:request="loadDataTable"
:row-key="row => row.id"
ref="actionRef"
@update:checked-row-keys="onCheckedRow"
title="表格列表"
titleTooltip="这是一个提示"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
@update:checked-row-keys="onCheckedRow"
>
<template #toolbar>
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -17,49 +17,45 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, ref, h } from 'vue'
import { NTag, NButton, useMessage } from 'naive-ui'
import { BasicTable } from '@/components/Table'
import { getTableList } from '@/api/table/list'
import { columns } from './columns'
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { BasicTable } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { columns } from './columns';
export default defineComponent({
components: { BasicTable },
setup() {
const message = useMessage()
const actionRef = ref()
const state = reactive({
params: {
pageSize: 5,
name: 'xiaoMa'
},
})
const loadDataTable = async (params) => {
const data = await getTableList(params);
return data
}
export default defineComponent({
components: { BasicTable },
setup() {
const actionRef = ref();
const state = reactive({
params: {
pageSize: 5,
name: 'xiaoMa',
},
});
const loadDataTable = async (params) => {
const data = await getTableList(params);
return data;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys)
}
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
console.log(actionRef.value)
actionRef.value.reload()
}
function reloadTable() {
console.log(actionRef.value);
actionRef.value.reload();
}
return {
...toRefs(state),
columns,
actionRef,
loadDataTable,
onCheckedRow,
reloadTable
}
}
})
return {
...toRefs(state),
columns,
actionRef,
loadDataTable,
onCheckedRow,
reloadTable,
};
},
});
</script>
<style lang='less' scoped>
</style>
<style lang="less" scoped></style>

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

@@ -1,41 +1,40 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="上传图片">
上传图片，用于向用户收集图片信息
</n-card>
<n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
</div>
<n-card :bordered="false" class="proCard mt-4">
<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
:label-width="80"
:model="formValue"
:rules="rules"
label-placement="left"
ref="formRef"
class="py-8"
:label-width="80"
:model="formValue"
:rules="rules"
label-placement="left"
ref="formRef"
class="py-8"
>
<n-form-item label="预约姓名" path="name">
<n-input v-model:value="formValue.name" placeholder="输入姓名"/>
<n-input v-model:value="formValue.name" placeholder="输入姓名" />
</n-form-item>
<n-form-item label="预约号码" path="mobile">
<n-input placeholder="电话号码" v-model:value="formValue.mobile"/>
<n-input placeholder="电话号码" v-model:value="formValue.mobile" />
</n-form-item>
<n-form-item label="病例图片" path="images">
<BasicUpload
:action="`${uploadUrl}/v1.0/files`"
:headers="uploadHeaders"
:data="{ type: 0 }"
name="files"
:width="100"
:height="100"
@uploadChange="uploadChange"
v-model:value="formValue.images"
helpText="单个文件不超过2MB，最多只能上传10个文件"/>
:action="`${uploadUrl}/v1.0/files`"
:headers="uploadHeaders"
:data="{ type: 0 }"
name="files"
:width="100"
:height="100"
@uploadChange="uploadChange"
v-model:value="formValue.images"
helpText="单个文件不超过2MB，最多只能上传10个文件"
/>
</n-form-item>
<div style="margin-left:80px">
<div style="margin-left: 80px">
<n-space>
<n-button type="primary" @click="formSubmit">提交预约</n-button>
<n-button @click="resetForm">重置</n-button>
@@ -49,80 +48,80 @@
</template>
<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, } from 'vue'
import { useMessage } from 'naive-ui'
import { BasicUpload } from '@/components/Upload'
import { useGlobSetting } from '@/hooks/setting'
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicUpload } from '@/components/Upload';
import { useGlobSetting } from '@/hooks/setting';
const globSetting = useGlobSetting()
const globSetting = useGlobSetting();
const rules = {
name: {
required: true,
message: '请输入预约姓名',
trigger: 'blur'
},
remark: {
required: true,
message: '请输入预约备注',
trigger: 'blur'
},
images: {
required: true,
type: 'array',
message: '请上传病例图片',
trigger: 'change'
},
}
const rules = {
name: {
required: true,
message: '请输入预约姓名',
trigger: 'blur',
},
remark: {
required: true,
message: '请输入预约备注',
trigger: 'blur',
},
images: {
required: true,
type: 'array',
message: '请上传病例图片',
trigger: 'change',
},
};
export default defineComponent({
components: { BasicUpload },
setup() {
const formRef: any = ref(null)
const message = useMessage()
const { uploadUrl } = globSetting
export default defineComponent({
components: { BasicUpload },
setup() {
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=',
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 formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
message.error('验证失败，请填写完整信息')
}
})
}
function resetForm() {
formRef.value.restoreValidation();
}
function resetForm() {
formRef.value.restoreValidation()
}
function uploadChange(list: string[]) {
state.formValue.images = unref(list);
}
function uploadChange(list: string[]) {
state.formValue.images = unref(list)
}
return {
...toRefs(state),
formRef,
uploadUrl,
rules,
formSubmit,
resetForm,
uploadChange
}
}
})
return {
...toRefs(state),
formRef,
uploadUrl,
rules,
formSubmit,
resetForm,
uploadChange,
};
},
});
</script>

186
src/views/dashboard/console/components/FluxTrend.vue
View File

@@ -2,110 +2,110 @@
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { useECharts } from '@/hooks/web/useECharts';
import { basicProps } from './props';
import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'6:00',
'7:00',
'8:00',
'9:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
],
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
max: 80000,
splitNumber: 4,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
xAxis: {
type: 'category',
boundaryGap: false,
data: [
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
22222, 11111, 4000, 2000, 500, 333, 222, 111,
'6:00',
'7:00',
'8:00',
'9:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
{
smooth: true,
data: [
33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
390, 198, 60, 30, 22, 11,
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#019680',
yAxis: [
{
type: 'value',
max: 80000,
splitNumber: 4,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
},
],
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
data: [
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
22222, 11111, 4000, 2000, 500, 333, 222, 111,
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
},
},
{
smooth: true,
data: [
33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
390, 198, 60, 30, 22, 11,
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#019680',
},
},
],
});
});
});
return { chartRef };
},
});
return { chartRef };
},
});
</script>

44
src/views/dashboard/console/components/Icons.ts
View File

@@ -1,25 +1,25 @@
import {
CaretUpOutlined,
CaretDownOutlined,
UsergroupAddOutlined,
BarChartOutlined,
ShoppingCartOutlined,
AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined
} from '@vicons/antd'
CaretUpOutlined,
CaretDownOutlined,
UsergroupAddOutlined,
BarChartOutlined,
ShoppingCartOutlined,
AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined,
} from '@vicons/antd';
export default {
CaretUpOutlined,
CaretDownOutlined,
UsergroupAddOutlined,
BarChartOutlined,
ShoppingCartOutlined,
AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined
}
CaretUpOutlined,
CaretDownOutlined,
UsergroupAddOutlined,
BarChartOutlined,
ShoppingCartOutlined,
AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined,
};

30
src/views/dashboard/console/components/VisiTab.vue
View File

@@ -3,17 +3,12 @@
<NRow :gutter="24">
<NCol :span="24">
<n-card content-style="padding: 0;" :bordered="false">
<n-tabs
type="line"
size="large"
:tabs-padding="20"
pane-style="padding: 20px;"
>
<n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;">
<n-tab-pane name="流量趋势">
<FluxTrend/>
<FluxTrend />
</n-tab-pane>
<n-tab-pane name="访问量">
<VisitAmount/>
<VisitAmount />
</n-tab-pane>
</n-tabs>
</n-card>
@@ -22,15 +17,14 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import FluxTrend from './FluxTrend.vue'
import VisitAmount from './VisitAmount.vue'
import { defineComponent } from 'vue';
import FluxTrend from './FluxTrend.vue';
import VisitAmount from './VisitAmount.vue';
export default defineComponent({
components: { FluxTrend, VisitAmount },
setup() {
return {};
},
});
export default defineComponent({
components: { FluxTrend, VisitAmount },
setup() {
return {};
},
});
</script>

100
src/views/dashboard/console/components/VisitAmount.vue
View File

@@ -2,60 +2,60 @@
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { basicProps } from './props';
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
},
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
xAxis: {
type: 'category',
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
},
yAxis: {
type: 'value',
max: 8000,
splitNumber: 4,
},
series: [
{
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
type: 'bar',
barMaxWidth: 80,
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
xAxis: {
type: 'category',
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
},
],
yAxis: {
type: 'value',
max: 8000,
splitNumber: 4,
},
series: [
{
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
type: 'bar',
barMaxWidth: 80,
},
],
});
});
});
return { chartRef };
},
});
return { chartRef };
},
});
</script>

20
src/views/dashboard/console/components/props.ts
View File

@@ -1,17 +1,17 @@
import { PropType } from 'vue';
export interface BasicProps {
width: string;
height: string;
width: string;
height: string;
}
export const basicProps = {
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '280px',
},
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '280px',
},
};

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

@@ -1,141 +1,152 @@
<template>
<div class="console">
<!--数据卡片-->
<n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8" :cols="4">
<n-grid-item>
<NCard title="访问量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
<NCard
title="访问量"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<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"/>
<CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
</div>
<div class="py-1 px-1 flex justify-between ">
<div class="py-1 px-1 flex justify-between">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
<CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
<n-icon size="12" style="color: #00ff6f">
<component is="CaretUpOutlined"/>
<component is="CaretUpOutlined" />
</n-icon>
</div>
<div class="text-sn">
周同比
<CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
<CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
<n-icon size="12" style="color: #ffde66">
<component is="CaretDownOutlined"/>
<component is="CaretDownOutlined" />
</n-icon>
</div>
</div>
<template #footer>
<div class="flex justify-between ">
<div class="flex justify-between">
<div class="text-sn"> 总访问量： </div>
<div class="text-sn">
总访问量：
</div>
<div class="text-sn">
<CountTo :startVal="1" :endVal="visits.amount"/>
<CountTo :startVal="1" :endVal="visits.amount" />
</div>
</div>
</template>
</NCard>
</n-grid-item>
<n-grid-item>
<NCard title="销售额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
<NCard
title="销售额"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<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"/>
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
</div>
<div class="py-2 px-2 flex justify-between ">
<div class="py-2 px-2 flex justify-between">
<div class="text-sn flex-1">
<n-progress
type="line"
:percentage="saleroom.degree"
:indicator-placement="'inside'"
processing
type="line"
:percentage="saleroom.degree"
:indicator-placement="'inside'"
processing
/>
</div>
</div>
<template #footer>
<div class="flex justify-between ">
<div class="flex justify-between">
<div class="text-sn"> 总销售额： </div>
<div class="text-sn">
总销售额：
</div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount"/>
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
</div>
</div>
</template>
</NCard>
</n-grid-item>
<n-grid-item>
<NCard title="订单量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
<NCard
title="订单量"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<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"/>
<CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
</div>
<div class="py-1 px-1 flex justify-between ">
<div class="py-1 px-1 flex justify-between">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
<n-icon size="12" style="color: #00ff6f">
<component is="CaretUpOutlined"/>
<component is="CaretUpOutlined" />
</n-icon>
</div>
<div class="text-sn">
周同比
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
<n-icon size="12" style="color: #ffde66">
<component is="CaretDownOutlined"/>
<component is="CaretDownOutlined" />
</n-icon>
</div>
</div>
<template #footer>
<div class="flex justify-between ">
<div class="flex justify-between">
<div class="text-sn"> 转化率： </div>
<div class="text-sn">
转化率：
</div>
<div class="text-sn">
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount"/>
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
</div>
</div>
</template>
</NCard>
</n-grid-item>
<n-grid-item>
<NCard title="成交额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
<NCard
title="成交额"
:segmented="{ content: 'hard', footer: 'hard' }"
size="small"
:bordered="false"
>
<template #header-extra>
<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"/>
<CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
</div>
<div class="py-1 px-1 flex justify-between ">
<div class="py-1 px-1 flex justify-between">
<div class="text-sn">
月同比
<CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
<CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
<n-icon size="12" style="color: #00ff6f">
<component is="CaretUpOutlined"/>
<component is="CaretUpOutlined" />
</n-icon>
</div>
<div class="text-sn">
月同比
<CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
<CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
<n-icon size="12" style="color: #ffde66">
<component is="CaretDownOutlined"/>
<component is="CaretDownOutlined" />
</n-icon>
</div>
</div>
<template #footer>
<div class="flex justify-between ">
<div class="flex justify-between">
<div class="text-sn"> 总成交额： </div>
<div class="text-sn">
总成交额：
</div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="volume.amount"/>
<CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
</div>
</div>
</template>
@@ -146,18 +157,20 @@
<!--导航卡片-->
<div class="mt-4">
<n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8" :cols="8">
<n-grid-item v-for="(item,index) in iconList" :key="index">
<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">
<p class="flex justify-center">
<span>
<n-icon :size="item.size" class="flex-1" :style="{color:`${item.color}`}">
<component :is="item.icon" v-on="item.eventObject || {}"/>
</n-icon>
</span>
<span>
<n-icon :size="item.size" class="flex-1" :style="{ color: `${item.color}` }">
<component :is="item.icon" v-on="item.eventObject || {}" />
</n-icon>
</span>
</p>
<p class="flex justify-center"><span>{{ item.title }}</span></p>
<p class="flex justify-center"
><span>{{ item.title }}</span></p
>
</div>
</template>
</NCard>
@@ -166,128 +179,117 @@
</div>
<!--访问量 | 流量趋势-->
<VisiTab></VisiTab>
<VisiTab />
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
import Icons from './components/Icons'
import VisiTab from './components/VisiTab.vue'
import { CountTo } from '@/components/CountTo/index'
import { getConsoleInfo } from '@/api/dashboard/console'
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import Icons from './components/Icons';
import VisiTab from './components/VisiTab.vue';
import { CountTo } from '@/components/CountTo/index';
import { getConsoleInfo } from '@/api/dashboard/console';
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
}
}
})
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,
};
},
});
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

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

@@ -3,16 +3,14 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent } from 'vue';
export default defineComponent({
components: {},
setup() {
return {}
}
})
export default defineComponent({
components: {},
setup() {
return {};
},
});
</script>
<style lang='less' scoped>
</style>
<style lang="less" scoped></style>

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

@@ -6,11 +6,7 @@
<n-gi>
<div class="flex items-center">
<div>
<n-avatar
circle
:size="64"
:src="schoolboy"
/>
<n-avatar circle :size="64" :src="schoolboy" />
</div>
<div>
<p class="px-4 text-xl">早安，Ah jung，开始您一天的工作吧！</p>
@@ -37,15 +33,32 @@
</n-grid>
</n-card>
</div>
<n-grid class="mt-4" cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9" :cols="2">
<n-grid
class="mt-4"
cols="2 s:1 m:1 l:2 xl:2 2xl:2"
responsive="screen"
:x-gap="12"
:y-gap="9"
:cols="2"
>
<n-gi>
<n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small" title="项目">
<n-card
:segmented="{ content: 'hard' }"
content-style="padding: 0;"
:bordered="false"
size="small"
title="项目"
>
<div class="flex flex-wrap project-card">
<n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
<n-card
size="small"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex">
<span>
<n-icon size="30">
<GithubOutlined/>
<GithubOutlined />
</n-icon>
</span>
<span class="text-lg ml-4">Github</span>
@@ -53,169 +66,159 @@
<div class="flex mt-2 h-10 text-gray-400">
是一个面向开源及私有软件项目的托管平台。
</div>
<div class="flex mt-2 h-10 text-gray-400">
开源君，2021-07-04
</div>
<div class="flex mt-2 h-10 text-gray-400"> 开源君，2021-07-04 </div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
<n-card
size="small"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex">
<span>
<n-icon size="30" style="color: #42b983">
<LogoVue/>
<LogoVue />
</n-icon>
</span>
<span class="text-lg ml-4">Vue</span>
</div>
<div class="flex mt-2 h-10 text-gray-400">
渐进式 JavaScript 框架
</div>
<div class="flex mt-2 h-10 text-gray-400">
学不动也要学，2021-07-04
</div>
<div class="flex mt-2 h-10 text-gray-400"> 渐进式 JavaScript 框架 </div>
<div class="flex mt-2 h-10 text-gray-400"> 学不动也要学，2021-07-04 </div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
<n-card
size="small"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex">
<span>
<n-icon size="30" style="color: #e44c27">
<Html5Outlined/>
<Html5Outlined />
</n-icon>
</span>
<span class="text-lg ml-4">Html5</span>
</div>
<div class="flex mt-2 h-10 text-gray-400">
HTML5是互联网的下一代标准。
</div>
<div class="flex mt-2 h-10 text-gray-400">
撸码也是一种艺术 2021-04-01
</div>
<div class="flex mt-2 h-10 text-gray-400"> HTML5是互联网的下一代标准。 </div>
<div class="flex mt-2 h-10 text-gray-400"> 撸码也是一种艺术 2021-04-01 </div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
<n-card
size="small"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex">
<span>
<n-icon size="30" style="color: #dd0031">
<LogoAngular/>
<LogoAngular />
</n-icon>
</span>
<span class="text-lg ml-4">Angular</span>
</div>
<div class="flex mt-2 h-10 text-gray-400">
现代 Web 开发平台，百万粉丝热捧。
</div>
<div class="flex mt-2 h-10 text-gray-400">
铁粉君 2021-07-04。
</div>
<div class="flex mt-2 h-10 text-gray-400"> 现代 Web 开发平台，百万粉丝热捧。 </div>
<div class="flex mt-2 h-10 text-gray-400"> 铁粉君 2021-07-04。 </div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
<n-card
size="small"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex">
<span>
<n-icon size="30" style="color: #61dafb">
<LogoReact/>
<LogoReact />
</n-icon>
</span>
<span class="text-lg ml-4">React</span>
</div>
<div class="flex mt-2 h-10 text-gray-400">
用于构建用户界面的 JavaScript 库。
</div>
<div class="flex mt-2 h-10 text-gray-400">
技术牛 2021-07-04。
</div>
<div class="flex mt-2 h-10 text-gray-400"> 用于构建用户界面的 JavaScript 库。 </div>
<div class="flex mt-2 h-10 text-gray-400"> 技术牛 2021-07-04。 </div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
<n-card
size="small"
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
hoverable
>
<div class="flex">
<span>
<n-icon size="30">
<LogoJavascript/>
<LogoJavascript />
</n-icon>
</span>
<span class="text-lg ml-4">Js</span>
</div>
<div class="flex mt-2 h-10 text-gray-400">
路是走出来的，而不是空想出来的。
</div>
<div class="flex mt-2 h-10 text-gray-400">
架构组 2021-07-04
</div>
<div class="flex mt-2 h-10 text-gray-400"> 路是走出来的，而不是空想出来的。 </div>
<div class="flex mt-2 h-10 text-gray-400"> 架构组 2021-07-04 </div>
</n-card>
</div>
</n-card>
<n-card :segmented="{ content: 'hard' }" content-style="padding-top: 0;padding-bottom: 0;" :bordered="false"
size="small" title="动态" class="mt-4">
<n-card
:segmented="{ content: 'hard' }"
content-style="padding-top: 0;padding-bottom: 0;"
:bordered="false"
size="small"
title="动态"
class="mt-4"
>
<template #header-extra><a href="javascript:;">更多</a></template>
<n-list>
<n-list-item>
<template #prefix>
<n-avatar
circle
:size="40"
:src="schoolboy"
/>
<n-avatar circle :size="40" :src="schoolboy" />
</template>
<n-thing title="Ah Jung 刚才把工作台页面随便写了一些，凑合能看了！">
<template #description><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template>
<template #description
><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
>
</n-thing>
</n-list-item>
<n-list-item>
<template #prefix>
<n-avatar
circle
:size="40"
:src="schoolboy"
/>
<n-avatar circle :size="40" :src="schoolboy" />
</template>
<n-thing title="Ah Jung 在 开源组 创建了项目 naive-ui-admin？">
<template #description><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template>
<template #description
><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
>
</n-thing>
</n-list-item>
<n-list-item>
<template #prefix>
<n-avatar
circle
:size="40"
:src="schoolboy"
/>
<n-avatar circle :size="40" :src="schoolboy" />
</template>
<n-thing title="@It界风清扬，向naive-ui-admin提交了一个bug，抽时间看看吧！">
<template #description><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template>
<template #description
><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
>
</n-thing>
</n-list-item>
<n-list-item>
<template #prefix>
<n-avatar
circle
:size="40"
:src="schoolboy"
/>
<n-avatar circle :size="40" :src="schoolboy" />
</template>
<n-thing title="技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！">
<template #description><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template>
<template #description
><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
>
</n-thing>
</n-list-item>
<n-list-item>
<template #prefix>
<n-avatar
circle
:size="40"
:src="schoolboy"
/>
<n-avatar circle :size="40" :src="schoolboy" />
</template>
<n-thing title="上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！">
<template #description><p class="text-xs text-gray-500">2021-07-04 20:37:16</p></template>
<template #description
><p class="text-xs text-gray-500">2021-07-04 20:37:16</p></template
>
</n-thing>
</n-list-item>
<n-list-item>
<template #prefix>
<n-avatar
circle
:size="40"
:src="schoolboy"
/>
<n-avatar circle :size="40" :src="schoolboy" />
</template>
<n-thing title="页面切换其实也支持缓存，只是加了过度效果，看起来像是重新渲染了">
<template #description>
<p class="text-gray-400">
<n-input type="text" placeholder="不信，输点文字试试"></n-input>
<n-input type="text" placeholder="不信，输点文字试试" />
</p>
</template>
</n-thing>
@@ -224,56 +227,61 @@
</n-card>
</n-gi>
<n-gi>
<n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small"
title="快捷操作">
<n-card
:segmented="{ content: 'hard' }"
content-style="padding: 0;"
:bordered="false"
size="small"
title="快捷操作"
>
<div class="flex flex-wrap project-card">
<n-card size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center text-gray-500">
<span class="text-center">
<n-icon size="30" style="color: #68c755">
<DashboardOutlined/>
</n-icon>
</span>
<span class="text-center">
<n-icon size="30" style="color: #68c755">
<DashboardOutlined />
</n-icon>
</span>
<span class="text-lx text-center">主控台</span>
</div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center text-gray-500">
<span class="text-center">
<n-icon size="30" style="color: #fab251">
<ProfileOutlined/>
</n-icon>
</span>
<span class="text-center">
<n-icon size="30" style="color: #fab251">
<ProfileOutlined />
</n-icon>
</span>
<span class="text-lx text-center">列表</span>
</div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center text-gray-500">
<span class="text-center">
<n-icon size="30" style="color: #1890ff">
<FileProtectOutlined/>
</n-icon>
</span>
<span class="text-center">
<n-icon size="30" style="color: #1890ff">
<FileProtectOutlined />
</n-icon>
</span>
<span class="text-lx text-center">表单</span>
</div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center text-gray-500">
<span class="text-center">
<n-icon size="30" style="color: #f06b96">
<ApartmentOutlined/>
</n-icon>
</span>
<span class="text-center">
<n-icon size="30" style="color: #f06b96">
<ApartmentOutlined />
</n-icon>
</span>
<span class="text-lx text-center">权限管理</span>
</div>
</n-card>
<n-card size="small" class="cursor-pointer project-card-item" hoverable>
<div class="flex flex-col justify-center text-gray-500">
<span class="text-center">
<n-icon size="30" style="color: #7238d1">
<SettingOutlined/>
</n-icon>
</span>
<span class="text-center">
<n-icon size="30" style="color: #7238d1">
<SettingOutlined />
</n-icon>
</span>
<span class="text-lx text-center">系统管理</span>
</div>
</n-card>
@@ -281,7 +289,7 @@
<div class="flex flex-col justify-center text-gray-500">
<span class="text-center">
<n-icon size="30" color="">
<DashboardOutlined/>
<DashboardOutlined />
</n-icon>
</span>
<span class="text-lx text-center">主控台</span>
@@ -290,7 +298,7 @@
</div>
</n-card>
<n-card :segmented="{ content: 'hard' }" :bordered="false" size="small" class="mt-4">
<img src="~@/assets/images/Business.svg" class="w-full"/>
<img src="~@/assets/images/Business.svg" class="w-full" />
</n-card>
</n-gi>
</n-grid>
@@ -298,55 +306,50 @@
</template>
<script lang="ts">
import schoolboy from '@/assets/images/schoolboy.png';
import {
GithubOutlined,
DashboardOutlined,
ProfileOutlined,
FileProtectOutlined,
SettingOutlined,
ApartmentOutlined,
Html5Outlined
} from '@vicons/antd'
import {
LogoVue,
LogoAngular,
LogoReact,
LogoJavascript
} from '@vicons/ionicons5'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'dashboard_workplace',
components: {
import schoolboy from '@/assets/images/schoolboy.png';
import {
GithubOutlined,
LogoVue,
DashboardOutlined,
ProfileOutlined,
FileProtectOutlined,
SettingOutlined,
ApartmentOutlined,
Html5Outlined,
LogoAngular,
LogoReact,
LogoJavascript
},
setup() {
return {
schoolboy
}
}
})
} 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>
.project-card {
margin-right: -6px;
.project-card {
margin-right: -6px;
&-item {
margin: -1px;
width: 33.333333%
&-item {
margin: -1px;
width: 33.333333%;
}
}
}
</style>

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="text-center">
<img src="~@/assets/images/exception/403.svg" alt=""/>
<img src="~@/assets/images/exception/403.svg" alt="" />
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
@@ -11,38 +11,38 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter()
return {
goHome() {
router.push('/')
}
}
}
})
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.text-center {
h1 {
color: #666;
padding: 20px 0
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="text-center">
<img src="~@/assets/images/exception/404.svg" alt=""/>
<img src="~@/assets/images/exception/404.svg" alt="" />
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
@@ -11,38 +11,38 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter()
return {
goHome() {
router.push('/')
}
}
}
})
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.text-center {
h1 {
color: #666;
padding: 20px 0
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="text-center">
<img src="~@/assets/images/exception/500.svg" alt=""/>
<img src="~@/assets/images/exception/500.svg" alt="" />
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
@@ -11,38 +11,38 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter()
return {
goHome() {
router.push('/')
}
}
}
})
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.text-center {
h1 {
color: #666;
padding: 20px 0
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>

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

@@ -9,35 +9,35 @@
<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
:label-width="80"
:model="formValue"
:rules="rules"
label-placement="left"
ref="formRef"
class="py-8"
:label-width="80"
:model="formValue"
:rules="rules"
label-placement="left"
ref="formRef"
class="py-8"
>
<n-form-item label="预约姓名1" path="name">
<n-input v-model:value="formValue.name" placeholder="输入姓名"/>
<n-input v-model:value="formValue.name" placeholder="输入姓名" />
</n-form-item>
<n-form-item label="预约号码" path="mobile">
<n-input placeholder="电话号码" v-model:value="formValue.mobile"/>
<n-input placeholder="电话号码" v-model:value="formValue.mobile" />
</n-form-item>
<n-form-item label="预约时间" path="datetime">
<n-date-picker type="datetime" v-model:value="formValue.datetime"/>
<n-date-picker type="datetime" v-model:value="formValue.datetime" />
</n-form-item>
<n-form-item label="预约医生" path="doctor">
<n-select
placeholder="请选择预约医生"
:options="doctorList"
v-model:value="formValue.doctor"
placeholder="请选择预约医生"
:options="doctorList"
v-model:value="formValue.doctor"
/>
</n-form-item>
<n-form-item label="预约事项" path="matter">
<n-select
placeholder="请选择预约事项"
:options="matterList"
v-model:value="formValue.matter"
multiple
placeholder="请选择预约事项"
:options="matterList"
v-model:value="formValue.matter"
multiple
/>
</n-form-item>
<n-form-item label="性别" path="sex">
@@ -50,24 +50,25 @@
</n-form-item>
<n-form-item label="预约备注" path="remark">
<n-input
v-model:value="formValue.remark"
type="textarea"
placeholder="请输入预约备注"
v-model:value="formValue.remark"
type="textarea"
placeholder="请输入预约备注"
/>
</n-form-item>
<n-form-item label="图片" path="img">
<BasicUpload
:action="`${uploadUrl}/v1.0/files`"
:headers="uploadHeaders"
:data="{ type: 0 }"
name="files"
:width="100"
:height="100"
@uploadChange="uploadChange"
v-model:value="uploadList"
helpText="单个文件不超过20MB，最多只能上传10个文件"/>
:action="`${uploadUrl}/v1.0/files`"
:headers="uploadHeaders"
:data="{ type: 0 }"
name="files"
:width="100"
:height="100"
@uploadChange="uploadChange"
v-model:value="uploadList"
helpText="单个文件不超过20MB，最多只能上传10个文件"
/>
</n-form-item>
<div style="margin-left:80px">
<div style="margin-left: 80px">
<n-space>
<n-button type="primary" @click="formSubmit">提交预约</n-button>
<n-button @click="resetForm">重置</n-button>
@@ -81,133 +82,133 @@
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, } from 'vue'
import { useMessage } from 'naive-ui'
import { BasicUpload } from '@/components/Upload'
import { useGlobSetting } from '@/hooks/setting'
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicUpload } from '@/components/Upload';
import { useGlobSetting } from '@/hooks/setting';
const globSetting = useGlobSetting()
const globSetting = useGlobSetting();
const matterList = [
{
label: '种牙',
value: 1
},
{
label: '补牙',
value: 2
},
{
label: '根管',
value: 3
}
]
const matterList = [
{
label: '种牙',
value: 1,
},
{
label: '补牙',
value: 2,
},
{
label: '根管',
value: 3,
},
];
const doctorList = [
{
label: '李医生',
value: 1
},
{
label: '黄医生',
value: 2
},
{
label: '张医生',
value: 3
}
]
const doctorList = [
{
label: '李医生',
value: 1,
},
{
label: '黄医生',
value: 2,
},
{
label: '张医生',
value: 3,
},
];
const rules = {
name: {
required: true,
message: '请输入预约姓名',
trigger: 'blur'
},
remark: {
required: true,
message: '请输入预约备注',
trigger: 'blur'
},
mobile: {
required: true,
message: '请输入预约电话号码',
trigger: ['input']
},
datetime: {
required: true,
type: 'number',
message: '请选择预约时间',
trigger: ['blur', 'change'],
},
doctor: {
required: true,
type: 'number',
message: '请选择预约医生',
trigger: 'change'
},
}
const rules = {
name: {
required: true,
message: '请输入预约姓名',
trigger: 'blur',
},
remark: {
required: true,
message: '请输入预约备注',
trigger: 'blur',
},
mobile: {
required: true,
message: '请输入预约电话号码',
trigger: ['input'],
},
datetime: {
required: true,
type: 'number',
message: '请选择预约时间',
trigger: ['blur', 'change'],
},
doctor: {
required: true,
type: 'number',
message: '请选择预约医生',
trigger: 'change',
},
};
export default defineComponent({
components: { BasicUpload },
setup() {
const formRef: any = ref(null)
const message = useMessage()
const { uploadUrl } = globSetting
export default defineComponent({
components: { BasicUpload },
setup() {
const formRef: any = ref(null);
const message = useMessage();
const { uploadUrl } = globSetting;
const defaultValueRef = () => ({
name: '',
mobile: '',
remark: '',
sex: 1,
matter: null,
doctor: null,
datetime: [],
})
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=',
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 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 resetForm() {
formRef.value.restoreValidation()
state.formValue = Object.assign(state.formValue, defaultValueRef())
}
function uploadChange(list: string[]) {
console.log(list);
}
function uploadChange(list: string[]) {
console.log(list)
}
return {
...toRefs(state),
formRef,
uploadUrl,
rules,
doctorList,
matterList,
formSubmit,
resetForm,
uploadChange
}
}
})
return {
...toRefs(state),
formRef,
uploadUrl,
rules,
doctorList,
matterList,
formSubmit,
resetForm,
uploadChange,
};
},
});
</script>

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

@@ -5,7 +5,13 @@
表单除了提交数据，有时也用于显示只读信息。
</n-card>
</div>
<n-card :bordered="false" title="基本信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
<n-card
:bordered="false"
title="基本信息"
class="proCard mt-4"
size="small"
:segmented="{ content: 'hard' }"
>
<n-descriptions label-placement="left" class="py-2">
<n-descriptions-item>
<template #label>收款人姓名</template>
@@ -20,7 +26,13 @@
</n-descriptions-item>
</n-descriptions>
</n-card>
<n-card :bordered="false" title="其它信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
<n-card
:bordered="false"
title="其它信息"
class="proCard mt-4"
size="small"
:segmented="{ content: 'hard' }"
>
<n-descriptions label-placement="left" class="py-2">
<n-descriptions-item>
<template #label>城市</template>
@@ -35,66 +47,72 @@
</n-descriptions-item>
</n-descriptions>
</n-card>
<n-card :bordered="false" title="表格信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
<n-card
:bordered="false"
title="表格信息"
class="proCard mt-4"
size="small"
:segmented="{ content: 'hard' }"
>
<n-table :bordered="false" :single-line="false">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>城市</th>
<th>生日</th>
<th width="150">操作</th>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>城市</th>
<th>生日</th>
<th width="150">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ah jung</td>
<td>男</td>
<td>深圳</td>
<td>1993-11-09</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
<tr>
<td>西门飞雪</td>
<td>男</td>
<td>广州</td>
<td>1991-09-11</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
<tr>
<td>泰坦巨人</td>
<td>男</td>
<td>北京</td>
<td>1990-11-03</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
<tr>
<td>猎魔人</td>
<td>女</td>
<td>上海</td>
<td>1992-03-11</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
<tr>
<td>Ah jung</td>
<td>男</td>
<td>深圳</td>
<td>1993-11-09</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
<tr>
<td>西门飞雪</td>
<td>男</td>
<td>广州</td>
<td>1991-09-11</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
<tr>
<td>泰坦巨人</td>
<td>男</td>
<td>北京</td>
<td>1990-11-03</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
<tr>
<td>猎魔人</td>
<td>女</td>
<td>上海</td>
<td>1992-03-11</td>
<td>
<n-space>
<n-button size="small" type="error">删除</n-button>
<n-button size="small" type="info">查看</n-button>
</n-space>
</td>
</tr>
</tbody>
</n-table>
</n-card>
@@ -102,15 +120,13 @@
</template>
<script>
import { defineComponent, ref } from 'vue'
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return {}
}
})
export default defineComponent({
setup() {
return {};
},
});
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

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

@@ -1,34 +1,36 @@
<template>
<n-form
:label-width="90"
:model="formValue"
:rules="rules"
label-placement="left"
ref="form1Ref"
style="max-width: 500px; margin: 40px auto 0;"
:label-width="90"
:model="formValue"
:rules="rules"
label-placement="left"
ref="form1Ref"
style="max-width: 500px; margin: 40px auto 0"
>
<n-form-item label="付款账户" path="myAccount">
<n-select
placeholder="请选择付款账户"
:options="myAccountList"
v-model:value="formValue.myAccount"
placeholder="请选择付款账户"
:options="myAccountList"
v-model:value="formValue.myAccount"
/>
</n-form-item>
<n-form-item label="收款账户" path="account">
<n-input-group>
<n-select
placeholder="请选择"
:options="accountTypeList"
:style="{ width: '20%' }"
v-model:value="formValue.accountType"
placeholder="请选择"
:options="accountTypeList"
:style="{ width: '20%' }"
v-model:value="formValue.accountType"
/>
<n-input
placeholder="请输入收款账户"
:style="{ width: '80%' }"
v-model:value="formValue.account"
/>
<n-input placeholder="请输入收款账户" :style="{ width: '80%' }" v-model:value="formValue.account"/>
</n-input-group>
</n-form-item>
<n-form-item label="收款人姓名" path="name">
<n-input placeholder="请输入收款人姓名" v-model:value="formValue.name"/>
<n-input placeholder="请输入收款人姓名" v-model:value="formValue.name" />
</n-form-item>
<n-form-item label="转账金额" path="money">
<n-input placeholder="请输入转账金额" v-model:value="formValue.money">
@@ -37,7 +39,7 @@
</template>
</n-input>
</n-form-item>
<div style="margin-left:80px">
<div style="margin-left: 80px">
<n-space>
<n-button type="primary" @click="formSubmit">下一步</n-button>
</n-space>
@@ -46,86 +48,86 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import { defineComponent, ref } from 'vue';
import { useMessage } from 'naive-ui';
const myAccountList = [
{
label: 'NaiveUiAdmin@163.com',
value: 1
},
{
label: 'NaiveUiAdmin@qq.com',
value: 2
},
]
const myAccountList = [
{
label: 'NaiveUiAdmin@163.com',
value: 1,
},
{
label: 'NaiveUiAdmin@qq.com',
value: 2,
},
];
const accountTypeList = [
{
label: '微信',
value: 1
},
{
label: '支付宝',
value: 2
},
]
const accountTypeList = [
{
label: '微信',
value: 1,
},
{
label: '支付宝',
value: 2,
},
];
export default defineComponent({
emits: ['nextStep'],
setup(_, { emit }) {
const form1Ref: any = ref(null)
const message = useMessage()
const current = ref(1)
export default defineComponent({
emits: ['nextStep'],
setup(_, { emit }) {
const form1Ref: any = ref(null);
const message = useMessage();
const current = ref(1);
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'
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',
},
},
account: {
required: true,
message: '请输入收款账户',
trigger: 'blur'
myAccountList,
accountTypeList,
formSubmit() {
form1Ref.value.validate((errors) => {
if (!errors) {
emit('nextStep');
} else {
message.error('验证失败，请填写完整信息');
}
});
},
money: {
required: true,
message: '请输入转账金额',
trigger: 'blur'
resetForm() {
form1Ref.value.restoreValidation();
},
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()
}
}
}
})
};
},
});
</script>

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

@@ -1,11 +1,11 @@
<template>
<n-form
:label-width="90"
:model="formValue"
:rules="rules"
label-placement="left"
ref="form2Ref"
style="max-width: 500px; margin: 40px auto 0;"
:label-width="90"
:model="formValue"
:rules="rules"
label-placement="left"
ref="form2Ref"
style="max-width: 500px; margin: 40px auto 0"
>
<n-form-item label="付款账户" path="myAccount">
<span>NaiveUiAdmin@163.com</span>
@@ -19,11 +19,11 @@
<n-form-item label="转账金额" path="money">
<span>￥1980</span>
</n-form-item>
<n-divider/>
<n-divider />
<n-form-item label="支付密码" path="password">
<n-input type="password" v-model:value="formValue.password"/>
<n-input type="password" v-model:value="formValue.password" />
</n-form-item>
<div style="margin-left:80px">
<div style="margin-left: 80px">
<n-space>
<n-button type="primary" :loading="loading" @click="formSubmit">提交</n-button>
<n-button @click="prevStep">上一步</n-button>
@@ -33,49 +33,49 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import { defineComponent, ref } from 'vue';
import { useMessage } from 'naive-ui';
export default defineComponent({
emits: ['prevStep', 'nextStep'],
setup(_, { emit }) {
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 prevStep() {
emit('prevStep');
}
function formSubmit() {
loading.value = true
form2Ref.value.validate((errors) => {
if (!errors) {
setTimeout(() => {
emit('nextStep')
}, 1500)
} else {
message.error('验证失败，请填写完整信息')
}
})
}
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'
return {
form2Ref,
loading,
formValue: ref({
password: '086611',
}),
rules: {
password: {
required: true,
message: '请输入支付密码',
trigger: 'blur',
},
},
},
prevStep,
formSubmit,
}
}
})
prevStep,
formSubmit,
};
},
});
</script>

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

@@ -32,58 +32,58 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
emits: ['finish', 'prevStep'],
setup(_, { emit }) {
const router = useRouter()
export default defineComponent({
emits: ['finish', 'prevStep'],
setup(_, { emit }) {
const router = useRouter();
function prevStep() {
emit('prevStep')
}
function prevStep() {
emit('prevStep');
}
function finish() {
emit('finish')
}
function finish() {
emit('finish');
}
function toOrderList() {
router.push('/form/step-form')
}
function toOrderList() {
router.push('/form/step-form');
}
return {
prevStep,
finish,
toOrderList
}
}
})
return {
prevStep,
finish,
toOrderList,
};
},
});
</script>
<style lang="less" scoped>
.step-result {
max-width: 560px;
margin: 40px auto 0;
.step-result {
max-width: 560px;
margin: 40px auto 0;
::v-deep(.n-result-content) {
background-color: #fafafa;
padding: 24px 40px;
}
::v-deep(.n-result-content) {
background-color: #fafafa;
padding: 24px 40px;
}
.information {
line-height: 22px;
.information {
line-height: 22px;
.ant-row:not(:last-child) {
margin-bottom: 24px;
.ant-row:not(:last-child) {
margin-bottom: 24px;
}
}
.money {
font-family: 'Helvetica Neue', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 14px;
}
}
.money {
font-family: "Helvetica Neue", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 14px;
}
}
</style>

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

@@ -8,69 +8,60 @@
<n-card :bordered="false" class="proCard mt-4">
<n-space vertical class="steps">
<n-steps :current="currentTab" :status="currentStatus">
<n-step
title="填写转账信息"
description="确保填写正确"
/>
<n-step
title="确认转账信息"
description="确认转账信息"
/>
<n-step
title="完成"
description="恭喜您，转账成功"
/>
<n-step title="填写转账信息" description="确保填写正确" />
<n-step title="确认转账信息" description="确认转账信息" />
<n-step title="完成" description="恭喜您，转账成功" />
</n-steps>
<step1 v-if="currentTab === 1" @nextStep="nextStep"/>
<step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
<step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
<step1 v-if="currentTab === 1" @nextStep="nextStep" />
<step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep" />
<step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish" />
</n-space>
</n-card>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import step1 from './Step1.vue'
import step2 from './Step2.vue'
import step3 from './Step3.vue'
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')
export default defineComponent({
components: { step1, step2, step3 },
setup() {
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
}
function finish() {
currentTab.value = 1;
}
return {
currentTab,
currentStatus,
nextStep,
prevStep,
finish
}
}
})
return {
currentTab,
currentStatus,
nextStep,
prevStep,
finish,
};
},
});
</script>
<style lang="less" scoped>
.steps {
max-width: 750px;
margin: 16px auto;
}
.steps {
max-width: 750px;
margin: 16px auto;
}
</style>

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

@@ -1,77 +1,74 @@
import { h } from 'vue'
import { NAvatar, NButton } from 'naive-ui'
import { h } from 'vue';
import { NAvatar } from 'naive-ui';
export const columns = [
{
title: 'id',
key: 'id'
{
title: 'id',
key: 'id',
},
{
title: '名称',
key: 'name',
},
{
title: '头像',
key: 'avatar',
render(row) {
return h(NAvatar, {
size: 48,
src: row.avatar,
});
},
{
title: '名称',
key: 'name'
},
{
title: '地址',
key: 'address',
auth: ['basic_list'], // 同时根据权限控制是否显示
ifShow: (_column) => {
return true; // 根据业务控制是否显示
},
{
title: '头像',
key: 'avatar',
render(row) {
return h(
NAvatar,
{
size: 48,
src: row.avatar
}
)
}
},
{
title: '地址',
key: 'address',
auth: ['basic_list'], // 同时根据权限控制是否显示
ifShow: (_column) => {
return true; // 根据业务控制是否显示
},
},
{
title: '开始日期',
key: 'beginTime',
},
{
title: '结束日期',
key: 'endTime',
},
{
title: '创建时间',
key: 'date',
},
// {
// title: '操作',
// key: 'actions',
// width: 150,
// //简单写一下例子，不建议这么写，过段时间，这里封二次封装
// render() {
// return [
// h(
// NButton,
// {
// size: 'small',
// type: 'error',
// style: 'margin-right:10px',
// onClick: () => {
// }
// },
// { default: () => '删除' }
// ),
// h(
// NButton,
// {
// size: 'small',
// onClick: () => {
//
// }
// },
// { default: () => '编辑' }
// )
// ]
// }
// }
]
},
{
title: '开始日期',
key: 'beginTime',
},
{
title: '结束日期',
key: 'endTime',
},
{
title: '创建时间',
key: 'date',
},
// {
// title: '操作',
// key: 'actions',
// width: 150,
// //简单写一下例子，不建议这么写，过段时间，这里封二次封装
// render() {
// return [
// h(
// NButton,
// {
// size: 'small',
// type: 'error',
// style: 'margin-right:10px',
// onClick: () => {
// }
// },
// { default: () => '删除' }
// ),
// h(
// NButton,
// {
// size: 'small',
// onClick: () => {
//
// }
// },
// { default: () => '编辑' }
// )
// ]
// }
// }
];

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

@@ -1,18 +1,18 @@
<template>
<n-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="row => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
>
<template #tableTitle>
<n-button type="primary" @click="addTable">
<template #icon>
<n-icon>
<PlusOutlined/>
<PlusOutlined />
</n-icon>
</template>
新建
@@ -23,216 +23,208 @@
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
</template>
<template #action="{ record }">
<TableAction></TableAction>
<template #action>
<TableAction />
</template>
</BasicTable>
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
>
<n-form-item label="名称" path="name">
<n-input placeholder="请输入名称" v-model:value="formParams.name"/>
<n-input placeholder="请输入名称" v-model:value="formParams.name" />
</n-form-item>
<n-form-item label="地址" path="address">
<n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address"/>
<n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address" />
</n-form-item>
<n-form-item label="日期" path="date">
<n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date"/>
<n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date" />
</n-form-item>
</n-form>
<template #action>
<n-space>
<n-button @click="()=> showModal = false">取消</n-button>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
</n-space>
</template>
</n-modal>
</n-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, h } from 'vue'
import { useMessage } from 'naive-ui'
import { BasicTable, TableAction } from '@/components/Table'
import { getTableList } from '@/api/table/list'
import { columns } from './columns'
import { PlusOutlined } from '@vicons/antd'
import { useRouter } from 'vue-router'
import { defineComponent, reactive, toRefs, ref, h } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
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 rules = {
name: {
required: true,
trigger: ['blur', 'input'],
message: '请输入名称',
},
address: {
required: true,
trigger: ['blur', 'input'],
message: '请输入地址',
},
date: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请选择日期',
},
};
export default defineComponent({
components: { BasicTable, PlusOutlined, TableAction },
setup() {
const router = useRouter()
const formRef: any = ref(null)
const message = useMessage()
const actionRef = ref()
const state = reactive({
showModal: false,
formBtnLoading: false,
formParams: {
name: '',
address: '',
date: []
},
params: {
pageSize: 5,
name: 'xiaoMa'
},
actionColumn: {
width: 250,
title: '操作',
dataIndex: 'action',
fixed: 'right',
render(record) {
return h(
TableAction,
{
style: 'button',
actions: [
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
export default defineComponent({
components: { BasicTable, PlusOutlined, TableAction },
setup() {
const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const state = reactive({
showModal: false,
formBtnLoading: false,
formParams: {
name: '',
address: '',
date: [],
},
params: {
pageSize: 5,
name: 'xiaoMa',
},
actionColumn: {
width: 250,
title: '操作',
dataIndex: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
],
dropDownActions: [
{
label: '启用',
key: 'enabled',
// 根据业务控制是否显示: 非enable状态的不显示启用按钮
ifShow: (record) => {
return true;
},
auth: ['basic_list'],
},
],
dropDownActions: [
{
label: '启用',
key: 'enabled',
// 根据业务控制是否显示: 非enable状态的不显示启用按钮
ifShow: () => {
return true;
},
{
label: '禁用',
key: 'disabled',
ifShow: () => {
return true
},
}
],
select:(key) => {
message.info(`您点击了，${key} 按钮`)
}
}
)
}
},
})
},
{
label: '禁用',
key: 'disabled',
ifShow: () => {
return true;
},
},
],
select: (key) => {
message.info(`您点击了，${key} 按钮`);
},
});
},
},
});
function addTable() {
state.showModal = true
}
function addTable() {
state.showModal = true;
}
const loadDataTable = async (params) => {
const data = await getTableList(params);
return data
}
const loadDataTable = async (params) => {
const data = await getTableList(params);
return data;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys)
}
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload()
}
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) {
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 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 handleOpen(record: Recordable) {
console.log('点击了启用', record);
message.info('点击了删除');
}
return {
...toRefs(state),
formRef,
columns,
rules,
actionRef,
confirmForm,
loadDataTable,
onCheckedRow,
reloadTable,
addTable,
handleEdit,
handleDelete,
handleOpen
}
}
})
return {
...toRefs(state),
formRef,
columns,
rules,
actionRef,
confirmForm,
loadDataTable,
onCheckedRow,
reloadTable,
addTable,
handleEdit,
handleDelete,
handleOpen,
};
},
});
</script>
<style lang='less' scoped>
</style>
<style lang="less" scoped></style>

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

@@ -1,11 +1,9 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="基础详情">
基础详情，有时也用于显示只读信息。
</n-card>
<n-card :bordered="false" title="基础详情"> 基础详情，有时也用于显示只读信息。 </n-card>
</div>
<n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
<n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: 'hard' }">
<n-descriptions label-placement="left" class="py-2">
<n-descriptions-item>
<template #label>收款人姓名</template>
@@ -24,15 +22,13 @@
</template>
<script>
import { defineComponent, ref } from 'vue'
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return {}
}
})
export default defineComponent({
setup() {
return {};
},
});
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

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

@@ -4,41 +4,46 @@
<div class="view-account-container">
<div class="view-account-top">
<div class="view-account-top-logo">
<img src="~@/assets/images/account-logo.png" alt=""/>
<img src="~@/assets/images/account-logo.png" alt="" />
</div>
<div class="view-account-top-desc">Naive Ui Admin中台前端/设计解决方案</div>
</div>
<div class="view-account-form">
<n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
<n-form
ref="formRef"
label-placement="left"
size="large"
:model="formInline"
:rules="rules"
>
<n-form-item path="username">
<n-input v-model:value="formInline.username" placeholder="请输入用户名">
<template #prefix>
<n-icon size="18" color="#808695">
<PersonOutline/>
<PersonOutline />
</n-icon>
</template>
</n-input>
</n-form-item>
<n-form-item path="password">
<n-input v-model:value="formInline.password" type="password" show-password-toggle placeholder="请输入密码">
<n-input
v-model:value="formInline.password"
type="password"
show-password-toggle
placeholder="请输入密码"
>
<template #prefix>
<n-icon size="18" color="#808695">
<LockClosedOutline/>
<LockClosedOutline />
</n-icon>
</template>
</n-input>
</n-form-item>
<!-- <n-form-item-->
<!-- path="isCaptcha">-->
<!-- <div class="w-full">-->
<!-- <mi-captcha-->
<!-- width="384"-->
<!-- theme-color="#2d8cf0"-->
<!-- :logo="logo"-->
<!-- @success="onAuthCode"-->
<!-- ></mi-captcha>-->
<!-- </div>-->
<!-- </n-form-item>-->
<n-form-item path="isCaptcha">
<div class="w-full">
<mi-captcha width="384" theme-color="#2d8cf0" :logo="logo" @success="onAuthCode" />
</div>
</n-form-item>
<n-form-item class="default-color">
<div class="flex justify-between">
<div class="flex-initial">
@@ -62,18 +67,18 @@
<div class="flex-initial mx-2">
<a href="javascript:;">
<n-icon size="24" color="#2d8cf0">
<LogoGithub/>
<LogoGithub />
</n-icon>
</a>
</div>
<div class="flex-initial mx-2">
<a href="javascript:;">
<n-icon size="24" color="#2d8cf0">
<LogoFacebook/>
<LogoFacebook />
</n-icon>
</a>
</div>
<div class="flex-initial" style="margin-left:auto">
<div class="flex-initial" style="margin-left: auto">
<a href="javascript:;">注册账号</a>
</div>
</div>
@@ -85,142 +90,143 @@
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5'
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 { defineComponent, reactive, toRefs, ref } from 'vue';
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
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';
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: true
}
})
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()
let loadingMessage
const handleSubmit = (e) => {
e.preventDefault()
formRef.value.validate(async (errors) => {
if (!errors) {
const { username, password } = state.formInline
loadingMessage = 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
}
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: true,
},
});
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 } = 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,
};
},
});
</script>
<style lang="less" scoped>
.view-account {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
&-container {
flex: 1;
padding: 32px 0;
width: 384px;
margin: 0 auto;
}
&-top {
padding: 32px 0;
text-align: center;
&-desc {
font-size: 14px;
color: #808695;
}
}
&-other {
width: 100%;
}
.default-color {
color: #515a6e;
.ant-checkbox-wrapper {
color: #515a6e;
}
}
}
@media (min-width: 768px) {
.view-account {
background-image: url('@/assets/images/login.svg');
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
&-container {
flex: 1;
padding: 32px 0;
width: 384px;
margin: 0 auto;
}
&-top {
padding: 32px 0;
text-align: center;
&-desc {
font-size: 14px;
color: #808695;
}
}
&-other {
width: 100%;
}
.default-color {
color: #515a6e;
.ant-checkbox-wrapper {
color: #515a6e;
}
}
}
.page-account-container {
padding: 32px 0 24px 0;
@media (min-width: 768px) {
.view-account {
background-image: url('@/assets/images/login.svg');
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
}
.page-account-container {
padding: 32px 0 24px 0;
}
}
}
</style>

38
src/views/redirect/index.vue
View File

@@ -1,22 +1,22 @@
<script lang="tsx">
import { defineComponent, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NEmpty } from 'naive-ui'
import { defineComponent, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NEmpty } from 'naive-ui';
export default defineComponent({
name: 'Redirect',
setup(props) {
const route = useRoute()
const router = useRouter()
onBeforeMount(() => {
const { params, query } = route
const { path } = params
router.replace({
path: '/' + (Array.isArray(path) ? path.join('/') : path),
query
})
})
return () => <NEmpty/>
}
})
export default defineComponent({
name: 'Redirect',
setup() {
const route = useRoute();
const router = useRouter();
onBeforeMount(() => {
const { params, query } = route;
const { path } = params;
router.replace({
path: '/' + (Array.isArray(path) ? path.join('/') : path),
query,
});
});
return () => <NEmpty />;
},
});
</script>

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

@@ -7,7 +7,7 @@
<p class="mt-3">
<n-space align="center">
<n-icon size="20" color="#f0a020">
<InfoCircleOutlined/>
<InfoCircleOutlined />
</n-icon>
<span>认证照片不够清晰</span>
<n-button type="info" text>立即修改</n-button>
@@ -16,7 +16,7 @@
<p class="mt-3">
<n-space>
<n-icon size="20" color="#f0a020">
<InfoCircleOutlined/>
<InfoCircleOutlined />
</n-icon>
<span>备注包含敏感字符，并且不能包含政治相关</span>
<n-button type="info" text>立即修改</n-button>
@@ -37,34 +37,34 @@
</n-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { InfoCircleOutlined } from '@vicons/antd'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { InfoCircleOutlined } from '@vicons/antd';
export default defineComponent({
components: { InfoCircleOutlined },
setup() {
const router = useRouter()
return {
goHome() {
router.push('/')
}
}
}
})
export default defineComponent({
components: { InfoCircleOutlined },
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
</script>
<style lang="less" scoped>
.result-box {
width: 72%;
margin: 0 auto;
text-align: center;
padding-top: 5px;
.result-box {
width: 72%;
margin: 0 auto;
text-align: center;
padding-top: 5px;
&-extra {
padding: 24px 40px;
text-align: left;
background: #f8f8f9;
border-radius: 4px;
&-extra {
padding: 24px 40px;
text-align: left;
background: #f8f8f9;
border-radius: 4px;
}
}
}
</style>

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

@@ -1,13 +1,17 @@
<template>
<n-card :bordered="false" class="proCard">
<div class="result-box">
<n-result status="info" title="提示" description="本次提交，将在24小时候内自动转入对方账户，如操作失误，请及时撤回">
<n-result
status="info"
title="提示"
description="本次提交，将在24小时候内自动转入对方账户，如操作失误，请及时撤回"
>
<div class="result-box-extra">
<p>您提交的内容如下：</p>
<p class="mt-3">
<n-space align="center">
<n-icon size="20" color="#18a058">
<CheckCircleOutlined/>
<CheckCircleOutlined />
</n-icon>
<span>转入支付宝账户（189****5426）：￥1980元</span>
<n-button type="info" text>立即撤回</n-button>
@@ -16,7 +20,7 @@
<p class="mt-3">
<n-space>
<n-icon size="20" color="#18a058">
<CheckCircleOutlined/>
<CheckCircleOutlined />
</n-icon>
<span>转入支付宝账户（187****5426）：￥2980元</span>
<n-button type="info" text>立即撤回</n-button>
@@ -37,34 +41,34 @@
</n-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { CheckCircleOutlined } from '@vicons/antd'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { CheckCircleOutlined } from '@vicons/antd';
export default defineComponent({
components: { CheckCircleOutlined },
setup() {
const router = useRouter()
return {
goHome() {
router.push('/')
}
}
}
})
export default defineComponent({
components: { CheckCircleOutlined },
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
</script>
<style lang="less" scoped>
.result-box {
width: 72%;
margin: 0 auto;
text-align: center;
padding-top: 5px;
.result-box {
width: 72%;
margin: 0 auto;
text-align: center;
padding-top: 5px;
&-extra {
padding: 24px 40px;
text-align: left;
background: #f8f8f9;
border-radius: 4px;
&-extra {
padding: 24px 40px;
text-align: left;
background: #f8f8f9;
border-radius: 4px;
}
}
}
</style>

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

@@ -1,7 +1,11 @@
<template>
<n-card :bordered="false" class="proCard">
<div class="result-box">
<n-result status="success" title="操作成功" description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。">
<n-result
status="success"
title="操作成功"
description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。"
>
<div class="result-box-extra">
<p>已提交申请，等待财务部门审核。</p>
</div>
@@ -19,32 +23,32 @@
</n-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter()
return {
goHome() {
router.push('/')
}
}
}
})
export default defineComponent({
setup() {
const router = useRouter();
return {
goHome() {
router.push('/');
},
};
},
});
</script>
<style lang="less" scoped>
.result-box {
width: 72%;
margin: 0 auto;
text-align: center;
padding-top: 5px;
.result-box {
width: 72%;
margin: 0 auto;
text-align: center;
padding-top: 5px;
&-extra {
padding: 24px 40px;
text-align: left;
background: #f8f8f9;
border-radius: 4px;
&-extra {
padding: 24px 40px;
text-align: left;
background: #f8f8f9;
border-radius: 4px;
}
}
}
</style>

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

@@ -1,95 +1,85 @@
<template>
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
<n-grid-item>
<n-form
:label-width="80"
:model="formValue"
:rules="rules"
ref="formRef"
>
<n-form-item label="昵称" path="name">
<n-input v-model:value="formValue.name" placeholder="请输入昵称"/>
</n-form-item>
<n-form-item label="邮箱" path="email">
<n-input placeholder="请输入备案编号" v-model:value="formValue.email"/>
</n-form-item>
<n-form-item label="联系电话" path="mobile">
<n-input placeholder="请输入联系电话" v-model:value="formValue.mobile"/>
</n-form-item>
<n-form-item label="联系地址" path="address">
<n-input
v-model:value="formValue.address"
type="textarea"
placeholder="请输入联系地址"
/>
</n-form-item>
<div>
<n-space>
<n-button type="primary" @click="formSubmit">更新基本信息</n-button>
</n-space>
</div>
</n-form>
</n-grid-item>
</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>
<template>
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
<n-grid-item>
<n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
<n-form-item label="昵称" path="name">
<n-input v-model:value="formValue.name" placeholder="请输入昵称" />
</n-form-item>
<n-form-item label="邮箱" path="email">
<n-input placeholder="请输入备案编号" v-model:value="formValue.email" />
</n-form-item>
<n-form-item label="联系电话" path="mobile">
<n-input placeholder="请输入联系电话" v-model:value="formValue.mobile" />
</n-form-item>
<n-form-item label="联系地址" path="address">
<n-input v-model:value="formValue.address" type="textarea" placeholder="请输入联系地址" />
</n-form-item>
<div>
<n-space>
<n-button type="primary" @click="formSubmit">更新基本信息</n-button>
</n-space>
</div>
</n-form>
</n-grid-item>
</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>

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

@@ -7,7 +7,9 @@
<n-button type="primary" text>修改</n-button>
</template>
<n-thing title="账户密码">
<template #description><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template>
<template #description
><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template
>
</n-thing>
</n-list-item>
<n-list-item>
@@ -15,7 +17,9 @@
<n-button type="primary" text>修改</n-button>
</template>
<n-thing title="绑定手机">
<template #description><span class="text-gray-400">已绑定手机号：+86189****4877</span></template>
<template #description
><span class="text-gray-400">已绑定手机号：+86189****4877</span></template
>
</n-thing>
</n-list-item>
<n-list-item>
@@ -23,7 +27,11 @@
<n-button type="primary" text>设置</n-button>
</template>
<n-thing title="密保问题">
<template #description><span class="text-gray-400">未设置密保问题，密保问题可有效保护账户安全</span></template>
<template #description
><span class="text-gray-400"
>未设置密保问题，密保问题可有效保护账户安全</span
></template
>
</n-thing>
</n-list-item>
<n-list-item>
@@ -31,7 +39,9 @@
<n-button type="primary" text>修改</n-button>
</template>
<n-thing title="个性域名">
<template #description><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template>
<template #description
><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template
>
</n-thing>
</n-list-item>
</n-list>
@@ -40,57 +50,57 @@
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { useMessage } from 'naive-ui'
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'
},
}
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()
export default defineComponent({
setup() {
const formRef: any = ref(null);
const message = useMessage();
const state = reactive({
formValue: {
name: '',
mobile: '',
email: '',
address: '',
const state = reactive({
formValue: {
name: '',
mobile: '',
email: '',
address: '',
},
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
})
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
message.error('验证失败，请填写完整信息')
}
})
}
return {
formRef,
...toRefs(state),
rules,
formSubmit
}
}
})
return {
formRef,
...toRefs(state),
rules,
formSubmit,
};
},
});
</script>

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

@@ -4,10 +4,11 @@
<n-grid-item span="6">
<n-card :bordered="false" size="small" class="proCard">
<n-thing
class="thing-cell"
v-for="item in typeTabList" :key="item.key"
:class="{'thing-cell-on':type===item.key}"
@click="switchType(item)"
class="thing-cell"
v-for="item in typeTabList"
:key="item.key"
:class="{ 'thing-cell-on': type === item.key }"
@click="switchType(item)"
>
<template #header>{{ item.name }}</template>
<template #description>{{ item.desc }}</template>
@@ -16,73 +17,72 @@
</n-grid-item>
<n-grid-item span="18">
<n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
<BasicSetting v-if="type === 1"></BasicSetting>
<SafetySetting v-if="type === 2"></SafetySetting>
<BasicSetting v-if="type === 1" />
<SafetySetting v-if="type === 2" />
</n-card>
</n-grid-item>
</n-grid>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import BasicSetting from "./BasicSetting.vue"
import SafetySetting from "./SafetySetting.vue"
import { defineComponent, reactive, toRefs } from 'vue';
import BasicSetting from './BasicSetting.vue';
import SafetySetting from './SafetySetting.vue';
const typeTabList = [
{
name: '基本设置',
desc: '个人账户信息设置',
key: 1,
},
{
name: '安全设置',
desc: '密码，邮箱等设置',
key: 2,
},
];
export default defineComponent({
components: { BasicSetting, SafetySetting },
setup() {
const state = reactive({
type: 1,
typeTitle: '基本设置',
});
const typeTabList = [
{
name: '基本设置',
desc: '个人账户信息设置',
key: 1
},
{
name: '安全设置',
desc: '密码，邮箱等设置',
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;
}
function switchType(e) {
state.type = e.key
state.typeTitle = e.name
}
return {
...toRefs(state),
switchType,
typeTabList
}
}
})
return {
...toRefs(state),
switchType,
typeTabList,
};
},
});
</script>
<style lang="less" scoped>
.thing-cell {
margin: 0 -16px 10px;
padding: 5px 16px;
.thing-cell {
margin: 0 -16px 10px;
padding: 5px 16px;
&:hover {
background: #f3f3f3;
cursor: pointer
}
}
.thing-cell-on {
background: #f0faff;
color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0
&:hover {
background: #f3f3f3;
cursor: pointer;
}
}
&:hover {
.thing-cell-on {
background: #f0faff;
color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0;
}
&:hover {
background: #f0faff;
}
}
}
</style>

169
src/views/setting/system/BasicSetting.vue
View File

@@ -1,31 +1,21 @@
<template>
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
<n-grid-item>
<n-form
:label-width="80"
:model="formValue"
:rules="rules"
ref="formRef"
>
<n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
<n-form-item label="网站名称" path="name">
<n-input v-model:value="formValue.name" placeholder="请输入网站名称"/>
<n-input v-model:value="formValue.name" placeholder="请输入网站名称" />
</n-form-item>
<n-form-item label="备案编号" path="icpCode">
<n-input placeholder="请输入备案编号" v-model:value="formValue.icpCode"/>
<n-input placeholder="请输入备案编号" v-model:value="formValue.icpCode" />
</n-form-item>
<n-form-item label="联系电话" path="mobile">
<n-input placeholder="请输入联系电话" v-model:value="formValue.mobile"/>
<n-input placeholder="请输入联系电话" v-model:value="formValue.mobile" />
</n-form-item>
<n-form-item label="联系地址" path="address">
<n-input
v-model:value="formValue.address"
type="textarea"
placeholder="请输入联系地址"
/>
<n-input v-model:value="formValue.address" type="textarea" placeholder="请输入联系地址" />
</n-form-item>
<n-form-item label="登录验证码" path="loginCode">
@@ -38,14 +28,18 @@
</n-form-item>
<n-form-item label="网站开启访问" path="systemOpen">
<n-switch size="large" v-model:value="formValue.systemOpen" @update:value="systemOpenChange"/>
<n-switch
size="large"
v-model:value="formValue.systemOpen"
@update:value="systemOpenChange"
/>
</n-form-item>
<n-form-item label="网站关闭提示" path="closeText">
<n-input
v-model:value="formValue.closeText"
type="textarea"
placeholder="请输入网站关闭提示"
v-model:value="formValue.closeText"
type="textarea"
placeholder="请输入网站关闭提示"
/>
</n-form-item>
@@ -60,79 +54,80 @@
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { useDialog, useMessage } from 'naive-ui'
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { useDialog, useMessage } from 'naive-ui';
const rules = {
name: {
required: true,
message: '请输入网站名称',
trigger: 'blur'
},
mobile: {
required: true,
message: '请输入联系电话',
trigger: 'input'
},
}
const rules = {
name: {
required: true,
message: '请输入网站名称',
trigger: 'blur',
},
mobile: {
required: true,
message: '请输入联系电话',
trigger: 'input',
},
};
export default defineComponent({
setup() {
const formRef = ref(null)
const message = useMessage()
const dialog = useDialog()
export default defineComponent({
setup() {
const formRef: any = ref(null);
const message = useMessage();
const dialog = useDialog();
const state = reactive({
formValue: {
name: '',
mobile: '',
icpCode: '',
address: '',
loginCode: 0,
closeText: '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
systemOpen: true
}
})
const state = reactive({
formValue: {
name: '',
mobile: '',
icpCode: '',
address: '',
loginCode: 0,
closeText:
'网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
systemOpen: true,
},
});
function systemOpenChange(value) {
if (!value) {
dialog.warning({
title: '提示',
content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
message.success('操作成功')
},
onNegativeClick: () => {
state.formValue.systemOpen = true
}
})
}
}
function formSubmit(e) {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
message.error('验证失败，请填写完整信息')
function systemOpenChange(value) {
if (!value) {
dialog.warning({
title: '提示',
content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
message.success('操作成功');
},
onNegativeClick: () => {
state.formValue.systemOpen = true;
},
});
}
})
}
}
function resetForm() {
formRef.value.restoreValidation()
}
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
return {
formRef,
...toRefs(state),
rules,
formSubmit,
resetForm,
systemOpenChange
}
}
})
function resetForm() {
formRef.value.restoreValidation();
}
return {
formRef,
...toRefs(state),
rules,
formSubmit,
resetForm,
systemOpenChange,
};
},
});
</script>

88
src/views/setting/system/EmailSetting.vue
View File

@@ -1,31 +1,25 @@
<template>
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
<n-grid-item>
<n-form
:label-width="120"
:model="formValue"
:rules="rules"
ref="formRef"
>
<n-form :label-width="120" :model="formValue" :rules="rules" ref="formRef">
<n-form-item label="发件人邮箱" path="originator">
<n-input v-model:value="formValue.originator" placeholder="请输入发件人邮箱"/>
<n-input v-model:value="formValue.originator" placeholder="请输入发件人邮箱" />
</n-form-item>
<n-form-item label="SMTP服务器地址">
<n-input placeholder="请输入SMTP服务器地址"/>
<n-input placeholder="请输入SMTP服务器地址" />
</n-form-item>
<n-form-item label="SMTP服务器端口">
<n-input placeholder="请输入SMTP服务器端口"/>
<n-input placeholder="请输入SMTP服务器端口" />
</n-form-item>
<n-form-item label="SMTP用户名">
<n-input placeholder="请输入SMTP用户名"/>
<n-input placeholder="请输入SMTP用户名" />
</n-form-item>
<n-form-item label="SMTP密码">
<n-input type="password" placeholder="请输入SMTP密码"/>
<n-input type="password" placeholder="请输入SMTP密码" />
</n-form-item>
<n-form-item label="邮件测试">
@@ -43,43 +37,43 @@
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { useMessage } from 'naive-ui'
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { useMessage } from 'naive-ui';
const rules = {
originator: {
required: true,
message: '请输入发件人邮箱',
trigger: 'blur'
}
}
export default defineComponent({
setup() {
const formRef: any = ref(null)
const message = useMessage()
const rules = {
originator: {
required: true,
message: '请输入发件人邮箱',
trigger: 'blur',
},
};
export default defineComponent({
setup() {
const formRef: any = ref(null);
const message = useMessage();
const state = reactive({
formValue: {
originator: '',
const state = reactive({
formValue: {
originator: '',
},
});
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
})
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
message.error('验证失败，请填写完整信息')
}
})
}
return {
formRef,
...toRefs(state),
rules,
formSubmit
}
}
})
return {
formRef,
...toRefs(state),
rules,
formSubmit,
};
},
});
</script>

296
src/views/setting/system/RevealSetting.vue
View File

@@ -1,32 +1,47 @@
<template>
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
<n-grid-item>
<n-form
:label-width="120"
:model="formValue"
:rules="rules"
ref="formRef"
>
<n-form :label-width="120" :model="formValue" :rules="rules" ref="formRef">
<n-form-item label="商品图片(大)">
<n-space align="center">
<span>宽度：</span>
<n-input v-model:value="formValue.bigWidth" style="width:80px" placeholder="宽度像素"/>
<n-input
v-model:value="formValue.bigWidth"
style="width: 80px"
placeholder="宽度像素"
/>
<span>高度：</span>
<n-input v-model:value="formValue.bigHeight" style="width:80px" placeholder="高度像素"/>
<n-input
v-model:value="formValue.bigHeight"
style="width: 80px"
placeholder="高度像素"
/>
</n-space>
</n-form-item>
<n-form-item label="商品图片(小)">
<n-space align="center">
<span>宽度：</span>
<n-input v-model:value="formValue.smallWidth" style="width:80px" placeholder="宽度像素"/>
<n-input
v-model:value="formValue.smallWidth"
style="width: 80px"
placeholder="宽度像素"
/>
<span>高度：</span>
<n-input v-model:value="formValue.smallHeight" style="width:80px" placeholder="高度像素"/>
<n-input
v-model:value="formValue.smallHeight"
style="width: 80px"
placeholder="高度像素"
/>
</n-space>
</n-form-item>
<n-form-item label="水印透明度" path="watermarkClarity">
<n-input-number v-model:value="formValue.watermarkClarity" :show-button="false" placeholder="请输入水印透明度"/>
<n-input-number
v-model:value="formValue.watermarkClarity"
:show-button="false"
placeholder="请输入水印透明度"
/>
</n-form-item>
<n-form-item label="水印图片" path="watermarkClarity">
@@ -36,28 +51,31 @@
</n-form-item>
<n-form-item label="水印位置" path="watermarkPlace">
<n-select placeholder="请选择价格精确方式"
:options="watermarkPlaceList"
v-model:value="formValue.watermarkPlace"
<n-select
placeholder="请选择价格精确方式"
:options="watermarkPlaceList"
v-model:value="formValue.watermarkPlace"
/>
</n-form-item>
<n-form-item label="价格精确位数" path="pricePreciseNum">
<n-select placeholder="请选择价格精确位数"
:options="pricePreciseNumList"
v-model:value="formValue.pricePreciseNum"
<n-select
placeholder="请选择价格精确位数"
:options="pricePreciseNumList"
v-model:value="formValue.pricePreciseNum"
/>
</n-form-item>
<n-form-item label="价格精确方式" path="pricePrecise">
<n-select placeholder="请选择价格精确方式"
:options="pricePreciseList"
v-model:value="formValue.pricePrecise"
<n-select
placeholder="请选择价格精确方式"
:options="pricePreciseList"
v-model:value="formValue.pricePrecise"
/>
</n-form-item>
<n-form-item label="前台显示市场价" path="isMarketPrice">
<n-switch size="large" v-model:value="formValue.isMarketPrice"/>
<n-switch size="large" v-model:value="formValue.isMarketPrice" />
</n-form-item>
<div>
@@ -71,130 +89,130 @@
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { useDialog, useMessage } from 'naive-ui'
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { useDialog, useMessage } from 'naive-ui';
const rules = {
name: {
required: true,
message: '请输入网站名称',
trigger: 'blur'
},
mobile: {
required: true,
message: '请输入联系电话',
trigger: 'input'
},
}
const watermarkPlaceList = [
{
label: '左上',
value: 1
},
{
label: '右上',
value: 2
},
{
label: '居中',
value: 3
},
{
label: '右下',
value: 4
},
]
const rules = {
name: {
required: true,
message: '请输入网站名称',
trigger: 'blur',
},
mobile: {
required: true,
message: '请输入联系电话',
trigger: 'input',
},
};
const watermarkPlaceList = [
{
label: '左上',
value: 1,
},
{
label: '右上',
value: 2,
},
{
label: '居中',
value: 3,
},
{
label: '右下',
value: 4,
},
];
const pricePreciseNumList = [
{
label: '2位',
value: 1
},
{
label: '3位',
value: 2
},
{
label: '4位',
value: 3
},
]
const pricePreciseList = [
{
label: '四舍五入',
value: 1
},
{
label: '向上取整',
value: 2
},
{
label: '向下取整',
value: 3
},
]
const pricePreciseNumList = [
{
label: '2位',
value: 1,
},
{
label: '3位',
value: 2,
},
{
label: '4位',
value: 3,
},
];
const pricePreciseList = [
{
label: '四舍五入',
value: 1,
},
{
label: '向上取整',
value: 2,
},
{
label: '向下取整',
value: 3,
},
];
export default defineComponent({
setup() {
const formRef: any = ref(null)
const message = useMessage()
const dialog = useDialog()
export default defineComponent({
setup() {
const formRef: any = ref(null);
const message = useMessage();
const dialog = useDialog();
const state = reactive({
formValue: {
bigWidth: '',
bigHeight: '',
smallWidth: '',
smallHeight: '',
watermarkClarity: null,
pricePrecise: 1,
isMarketPrice: true,
pricePreciseNum: null,
}
})
const state = reactive({
formValue: {
bigWidth: '',
bigHeight: '',
smallWidth: '',
smallHeight: '',
watermarkClarity: null,
pricePrecise: 1,
isMarketPrice: true,
pricePreciseNum: null,
},
});
function systemOpenChange(value) {
if (!value) {
dialog.warning({
title: '提示',
content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
message.success('操作成功')
},
onNegativeClick: () => {
state.formValue.systemOpen = true
}
})
}
}
function formSubmit(e) {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
message.error('验证失败，请填写完整信息')
function systemOpenChange(value) {
if (!value) {
dialog.warning({
title: '提示',
content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
message.success('操作成功');
},
onNegativeClick: () => {
state.formValue.systemOpen = true;
},
});
}
})
}
}
function resetForm() {
formRef.value.restoreValidation()
}
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败，请填写完整信息');
}
});
}
return {
formRef,
...toRefs(state),
pricePreciseList,
watermarkPlaceList,
pricePreciseNumList,
rules,
formSubmit,
resetForm,
systemOpenChange
}
}
})
function resetForm() {
formRef.value.restoreValidation();
}
return {
formRef,
...toRefs(state),
pricePreciseList,
watermarkPlaceList,
pricePreciseNumList,
rules,
formSubmit,
resetForm,
systemOpenChange,
};
},
});
</script>

129
src/views/setting/system/system.vue
View File

@@ -4,10 +4,11 @@
<n-grid-item span="6">
<n-card :bordered="false" size="small" class="proCard">
<n-thing
class="thing-cell"
v-for="item in typeTabList" :key="item.key"
:class="{'thing-cell-on':type===item.key}"
@click="switchType(item)"
class="thing-cell"
v-for="item in typeTabList"
:key="item.key"
:class="{ 'thing-cell-on': type === item.key }"
@click="switchType(item)"
>
<template #header>{{ item.name }}</template>
<template #description>{{ item.desc }}</template>
@@ -16,81 +17,79 @@
</n-grid-item>
<n-grid-item span="18">
<n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
<BasicSetting v-if="type === 1"></BasicSetting>
<RevealSetting v-if="type === 2"></RevealSetting>
<EmailSetting v-if="type === 3"></EmailSetting>
<BasicSetting v-if="type === 1" />
<RevealSetting v-if="type === 2" />
<EmailSetting v-if="type === 3" />
</n-card>
</n-grid-item>
</n-grid>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import BasicSetting from "./BasicSetting.vue"
import RevealSetting from "./RevealSetting.vue"
import EmailSetting from "./EmailSetting.vue"
import { defineComponent, reactive, toRefs } from 'vue';
import BasicSetting from './BasicSetting.vue';
import RevealSetting from './RevealSetting.vue';
import EmailSetting from './EmailSetting.vue';
const typeTabList = [
{
name: '基本设置',
desc: '系统常规设置',
key: 1
},
{
name: '显示设置',
desc: '系统显示设置',
key: 2
},
{
name: '邮件设置',
desc: '系统邮件设置',
key: 3
}
]
export default defineComponent({
components: { BasicSetting, RevealSetting, EmailSetting },
setup() {
const router = useRouter()
const state = reactive({
type: 1,
typeTitle: '基本设置'
})
const typeTabList = [
{
name: '基本设置',
desc: '系统常规设置',
key: 1,
},
{
name: '显示设置',
desc: '系统显示设置',
key: 2,
},
{
name: '邮件设置',
desc: '系统邮件设置',
key: 3,
},
];
export default defineComponent({
components: { BasicSetting, RevealSetting, EmailSetting },
setup() {
const state = reactive({
type: 1,
typeTitle: '基本设置',
});
function switchType(e) {
state.type = e.key
state.typeTitle = e.name
}
function switchType(e) {
state.type = e.key;
state.typeTitle = e.name;
}
return {
...toRefs(state),
switchType,
typeTabList
}
}
})
return {
...toRefs(state),
switchType,
typeTabList,
};
},
});
</script>
<style lang="less" scoped>
.thing-cell {
margin: 0 -16px 10px;
padding: 5px 16px;
.thing-cell {
margin: 0 -16px 10px;
padding: 5px 16px;
&:hover {
background: #f3f3f3;
cursor: pointer
}
}
.thing-cell-on {
background: #f0faff;
color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0
&:hover {
background: #f3f3f3;
cursor: pointer;
}
}
&:hover {
.thing-cell-on {
background: #f0faff;
color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0;
}
&:hover {
background: #f0faff;
}
}
}
</style>

175
src/views/system/menu/CreateDrawer.vue
View File

@@ -2,23 +2,23 @@
<n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
<n-drawer-content :title="title" closable>
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="100"
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="100"
>
<n-form-item label="类型" path="type">
<span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
</n-form-item>
<n-form-item label="标题" path="label">
<n-input placeholder="请输入标题" v-model:value="formParams.label"/>
<n-input placeholder="请输入标题" v-model:value="formParams.label" />
</n-form-item>
<n-form-item label="副标题" path="subtitle">
<n-input placeholder="请输入副标题" v-model:value="formParams.subtitle"/>
<n-input placeholder="请输入副标题" v-model:value="formParams.subtitle" />
</n-form-item>
<n-form-item label="路径" path="path">
<n-input placeholder="请输入路径" v-model:value="formParams.path"/>
<n-input placeholder="请输入路径" v-model:value="formParams.path" />
</n-form-item>
<n-form-item label="打开方式" path="openType">
<n-radio-group v-model:value="formParams.openType" name="openType">
@@ -29,10 +29,10 @@
</n-radio-group>
</n-form-item>
<n-form-item label="菜单权限" path="auth">
<n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth"/>
<n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth" />
</n-form-item>
<n-form-item label="隐藏侧边栏" path="hidden">
<n-switch v-model:value="formParams.hidden"/>
<n-switch v-model:value="formParams.hidden" />
</n-form-item>
</n-form>
@@ -42,96 +42,95 @@
<n-button @click="handleReset">重置</n-button>
</n-space>
</template>
</n-drawer-content>
</n-drawer>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch, createVNode, computed, unref } from 'vue'
import { CheckOutlined } from '@vicons/antd'
import { useMessage } from 'naive-ui'
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { useMessage } from 'naive-ui';
const rules = {
label: {
required: true,
message: '请输入标题',
trigger: 'blur'
},
path: {
required: true,
message: '请输入路径',
trigger: 'blur'
}
}
export default defineComponent({
name: 'CreateDrawer',
props: {
title: {
type: String,
default: '添加顶级菜单'
const rules = {
label: {
required: true,
message: '请输入标题',
trigger: 'blur',
},
width: {
type: Number,
default: 450
path: {
required: true,
message: '请输入路径',
trigger: 'blur',
},
},
components: { CheckOutlined },
setup(props, { emit }) {
const message = useMessage()
const formRef: any = ref(null)
const defaultValueRef = () => ({
label: '',
type: 1,
subtitle: '',
openType: 1,
auth: '',
path: '',
hidden: false
})
};
export default defineComponent({
name: 'CreateDrawer',
components: {},
props: {
title: {
type: String,
default: '添加顶级菜单',
},
width: {
type: Number,
default: 450,
},
},
setup() {
const message = useMessage();
const formRef: any = ref(null);
const defaultValueRef = () => ({
label: '',
type: 1,
subtitle: '',
openType: 1,
auth: '',
path: '',
hidden: false,
});
const state = reactive({
isDrawer: false,
subLoading: false,
formParams: defaultValueRef(),
placement: "right",
alertText: '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
})
const state = reactive({
isDrawer: false,
subLoading: false,
formParams: defaultValueRef(),
placement: 'right',
alertText:
'该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
});
function openDrawer(isDrawer) {
state.isDrawer = true
}
function openDrawer() {
state.isDrawer = true;
}
function closeDrawer() {
state.isDrawer = false
}
function closeDrawer() {
state.isDrawer = false;
}
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('添加成功')
handleReset()
closeDrawer()
} else {
message.error('请填写完整信息')
}
})
}
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.success('添加成功');
handleReset();
closeDrawer();
} else {
message.error('请填写完整信息');
}
});
}
function handleReset() {
formRef.value.restoreValidation()
state.formParams = Object.assign(state.formParams, defaultValueRef())
}
function handleReset() {
formRef.value.restoreValidation();
state.formParams = Object.assign(state.formParams, defaultValueRef());
}
return {
...toRefs(state),
formRef,
rules,
formSubmit,
handleReset,
openDrawer,
closeDrawer
}
}
})
return {
...toRefs(state),
formRef,
rules,
formSubmit,
handleReset,
openDrawer,
closeDrawer,
};
},
});
</script>

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

@@ -17,7 +17,7 @@
<template #icon>
<div class="flex items-center">
<n-icon size="14">
<DownOutlined/>
<DownOutlined />
</n-icon>
</div>
</template>
@@ -28,7 +28,7 @@
<template #icon>
<div class="flex items-center">
<n-icon size="14">
<AlignLeftOutlined/>
<AlignLeftOutlined />
</n-icon>
</div>
</template>
@@ -40,32 +40,31 @@
<n-input type="input" v-model:value="pattern" placeholder="输入菜单名称搜索">
<template #suffix>
<n-icon size="18" class="cursor-pointer">
<SearchOutlined/>
<SearchOutlined />
</n-icon>
</template>
</n-input>
<div class="py-3 menu-list">
<template v-if="loading">
<div class="flex items-center justify-center py-4">
<n-spin size="medium"/>
<n-spin size="medium" />
</div>
</template>
<template v-else>
<n-tree
block-line
cascade
checkable
:virtual-scroll="true"
:pattern="pattern"
:data="treeData"
:expandedKeys="expandedKeys"
style="max-height: 650px;overflow: hidden"
@update:selected-keys="selectedTree"
block-line
cascade
checkable
:virtual-scroll="true"
:pattern="pattern"
:data="treeData"
:expandedKeys="expandedKeys"
style="max-height: 650px; overflow: hidden"
@update:selected-keys="selectedTree"
/>
</template>
</div>
</div>
</n-card>
</n-gi>
<n-gi span="2">
@@ -75,32 +74,30 @@
<n-icon size="18">
<FormOutlined />
</n-icon>
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}`:''}}</span>
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
</n-space>
</template>
<n-alert type="info" closable>
从菜单列表选择一项后，进行编辑
</n-alert>
<n-alert type="info" closable> 从菜单列表选择一项后，进行编辑 </n-alert>
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="100"
v-if="isEditMenu"
class="py-4"
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="100"
v-if="isEditMenu"
class="py-4"
>
<n-form-item label="类型" path="type">
<span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
</n-form-item>
<n-form-item label="标题" path="label">
<n-input placeholder="请输入标题" v-model:value="formParams.label"/>
<n-input placeholder="请输入标题" v-model:value="formParams.label" />
</n-form-item>
<n-form-item label="副标题" path="subtitle">
<n-input placeholder="请输入副标题" v-model:value="formParams.subtitle"/>
<n-input placeholder="请输入副标题" v-model:value="formParams.subtitle" />
</n-form-item>
<n-form-item label="路径" path="path">
<n-input placeholder="请输入路径" v-model:value="formParams.path"/>
<n-input placeholder="请输入路径" v-model:value="formParams.path" />
</n-form-item>
<n-form-item label="打开方式" path="openType">
<n-radio-group v-model:value="formParams.openType" name="openType">
@@ -111,11 +108,13 @@
</n-radio-group>
</n-form-item>
<n-form-item label="菜单权限" path="auth">
<n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth"/>
<n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth" />
</n-form-item>
<n-form-item path="auth" style="margin-left: 100px">
<n-space>
<n-button type="primary" :loading="subLoading" @click="formSubmit">保存修改</n-button>
<n-button type="primary" :loading="subLoading" @click="formSubmit"
>保存修改</n-button
>
<n-button @click="handleReset">重置</n-button>
</n-space>
</n-form-item>
@@ -124,145 +123,144 @@
</n-gi>
</n-grid>
<CreateDrawer ref="createDrawerRef" :title="drawerTitle"></CreateDrawer>
<CreateDrawer ref="createDrawerRef" :title="drawerTitle" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, onMounted, computed } from 'vue'
import { useMessage } from 'naive-ui'
import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd'
import { getMenuList } from '@/api/system/menu'
import { getTreeItem } from '@/utils/index'
import CreateDrawer from './CreateDrawer.vue'
import { defineComponent, ref, unref, reactive, toRefs, onMounted, computed } from 'vue';
import { useMessage } from 'naive-ui';
import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd';
import { getMenuList } from '@/api/system/menu';
import { getTreeItem } from '@/utils/index';
import CreateDrawer from './CreateDrawer.vue';
const rules = {
label: {
required: true,
message: '请输入标题',
trigger: 'blur'
},
path: {
required: true,
message: '请输入路径',
trigger: 'blur'
}
}
const rules = {
label: {
required: true,
message: '请输入标题',
trigger: 'blur',
},
path: {
required: true,
message: '请输入路径',
trigger: 'blur',
},
};
export default defineComponent({
components: { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined, CreateDrawer },
setup() {
const formRef: any = ref(null)
const createDrawerRef = ref()
const message = useMessage()
export default defineComponent({
components: { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined, CreateDrawer },
setup() {
const formRef: any = ref(null);
const createDrawerRef = ref();
const message = useMessage();
const isAddSon = computed(() => {
return state.treeItemKey.length ? false : true
})
const isAddSon = computed(() => {
return state.treeItemKey.length ? false : true;
});
const state = reactive({
addMenuOptions: [
{
label: '添加顶级菜单',
key: 'home',
disabled: false
},
{
label: '添加子菜单',
key: 'son',
disabled: isAddSon
},
],
loading: true,
subLoading: false,
isEditMenu: false,
treeData: [],
treeItemKey: [],
treeItemTitle: '',
expandedKeys: [],
formParams: {},
pattern: '',
drawerTitle: ''
})
const state = reactive({
addMenuOptions: [
{
label: '添加顶级菜单',
key: 'home',
disabled: false,
},
{
label: '添加子菜单',
key: 'son',
disabled: isAddSon,
},
],
loading: true,
subLoading: false,
isEditMenu: false,
treeData: [],
treeItemKey: [],
treeItemTitle: '',
expandedKeys: [],
formParams: {},
pattern: '',
drawerTitle: '',
});
function selectAddMenu(key) {
state.drawerTitle = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${ state.treeItemTitle }`
openCreateDrawer()
}
function openCreateDrawer() {
const { openDrawer } = createDrawerRef.value
openDrawer()
}
function selectedTree(keys) {
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 selectAddMenu(key) {
state.drawerTitle = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${state.treeItemTitle}`;
openCreateDrawer();
}
}
function handleReset() {
const treeItem = getTreeItem(unref(state.treeData), state.treeItemKey[0])
state.formParams = Object.assign(state.formParams, treeItem)
}
function openCreateDrawer() {
const { openDrawer } = createDrawerRef.value;
openDrawer();
}
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.error('抱歉，您没有该权限')
function selectedTree(keys) {
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 {
message.error('请填写完整信息')
state.isEditMenu = false;
state.treeItemKey = [];
state.treeItemTitle = '';
}
})
}
function packHandle() {
if (state.expandedKeys.length) {
state.expandedKeys = []
} else {
state.expandedKeys = state.treeData.map(item => item.key)
}
}
function onExpandedKeys(keys) {
// let key = keys[0]
// console.log(state.expandedKeys)
// if(state.expandedKeys.includes(key)){
// state.expandedKeys.splice(state.expandedKeys.findIndex(item => item === key), 1)
// console.log(state.expandedKeys)
// }else{
// state.expandedKeys.push(key)
// }
}
function handleReset() {
const treeItem = getTreeItem(unref(state.treeData), state.treeItemKey[0]);
state.formParams = Object.assign(state.formParams, treeItem);
}
onMounted(async () => {
const treeMenuList = await getMenuList()
state.expandedKeys = treeMenuList.list.map(item => item.key)
state.treeData = treeMenuList.list
state.loading = false
})
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
message.error('抱歉，您没有该权限');
} else {
message.error('请填写完整信息');
}
});
}
return {
...toRefs(state),
createDrawerRef,
formRef,
rules,
selectedTree,
handleReset,
formSubmit,
packHandle,
onExpandedKeys,
selectAddMenu
}
}
})
function packHandle() {
if (state.expandedKeys.length) {
state.expandedKeys = [];
} else {
state.expandedKeys = state.treeData.map((item) => item.key);
}
}
function onExpandedKeys() {
// let key = keys[0]
// console.log(state.expandedKeys)
// if(state.expandedKeys.includes(key)){
// state.expandedKeys.splice(state.expandedKeys.findIndex(item => item === key), 1)
// console.log(state.expandedKeys)
// }else{
// state.expandedKeys.push(key)
// }
}
onMounted(async () => {
const treeMenuList = await getMenuList();
state.expandedKeys = treeMenuList.list.map((item) => item.key);
state.treeData = treeMenuList.list;
state.loading = false;
});
return {
...toRefs(state),
createDrawerRef,
formRef,
rules,
selectedTree,
handleReset,
formSubmit,
packHandle,
onExpandedKeys,
selectAddMenu,
};
},
});
</script>

64
src/views/system/role/columns.ts
View File

@@ -1,36 +1,36 @@
import { h } from 'vue'
import { NTag, NButton } from 'naive-ui'
import { h } from 'vue';
import { NTag } from 'naive-ui';
export const columns = [
{
title: 'id',
key: 'id'
},
{
title: '角色名称',
key: 'name'
},
{
title: '说明',
key: 'explain'
},
{
title: '是否默认角色',
key: 'isDefault',
render(row) {
return h(
NTag,
{
type: row.isDefault ? 'success' : 'error'
},
{
default: () => row.isDefault ? '是' : '否'
}
)
{
title: 'id',
key: 'id',
},
{
title: '角色名称',
key: 'name',
},
{
title: '说明',
key: 'explain',
},
{
title: '是否默认角色',
key: 'isDefault',
render(row) {
return h(
NTag,
{
type: row.isDefault ? 'success' : 'error',
},
{
default: () => (row.isDefault ? '是' : '否'),
}
);
},
{
title: '创建时间',
key: 'create_date'
}
]
},
{
title: '创建时间',
key: 'create_date',
},
];

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

@@ -7,45 +7,42 @@
</div>
<n-card :bordered="false" class="mt-4 proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="row => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
>
<template #tableTitle>
<n-button type="primary">
<template #icon>
<n-icon>
<PlusOutlined/>
<PlusOutlined />
</n-icon>
</template>
添加角色
</n-button>
</template>
<template #action="{ record }">
<TableAction></TableAction>
<template #action>
<TableAction />
</template>
</BasicTable>
</n-card>
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="editRoleTitle">
<div class="py-3 menu-list">
<n-tree
block-line
cascade
checkable
:virtual-scroll="true"
:data="treeData"
:expandedKeys="expandedKeys"
:checked-keys="checkedKeys"
style="max-height: 950px;overflow: hidden"
@update:checked-keys="checkedTree"
block-line
cascade
checkable
:virtual-scroll="true"
:data="treeData"
:expandedKeys="expandedKeys"
:checked-keys="checkedKeys"
style="max-height: 950px; overflow: hidden"
@update:checked-keys="checkedTree"
/>
</div>
<template #action>
@@ -60,215 +57,205 @@
<n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
</n-space>
</template>
</n-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, h, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd'
import { BasicTable, TableAction } from '@/components/Table'
import { getRoleList } from '@/api/system/role'
import { getMenuList } from '@/api/system/menu'
import { columns } from './columns'
import { PlusOutlined } from '@vicons/antd'
import { getTreeAll } from "@/utils";
import { defineComponent, reactive, toRefs, ref, h, onMounted } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { getRoleList } from '@/api/system/role';
import { getMenuList } from '@/api/system/menu';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import { getTreeAll } from '@/utils';
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 rules = {
name: {
required: true,
trigger: ['blur', 'input'],
message: '请输入名称',
},
address: {
required: true,
trigger: ['blur', 'input'],
message: '请输入地址',
},
date: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请选择日期',
},
};
export default defineComponent({
components: { BasicTable, TableAction, PlusOutlined, AlignLeftOutlined },
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: '操作',
dataIndex: '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'],
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: '操作',
dataIndex: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '菜单权限',
onClick: handleMenuAuth.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
auth: ['basic_list'],
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
auth: ['basic_list'],
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 (params) => {
const data = await getRoleList(params);
return data
}
const loadDataTable = async (params) => {
const data = await getRoleList(params);
return data;
};
function onCheckedRow(rowKeys) {
console.log(rowKeys)
}
function onCheckedRow(rowKeys) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload()
}
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()
})
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 handleMenuAuth(record: Recordable) {
state.editRoleTitle = `分配 ${record.name} 的菜单权限`;
state.checkedKeys = record.menu_keys;
state.showModal = true;
}
function checkedTree(keys) {
state.checkedKeys = [state.checkedKeys, ...keys];
}
function packHandle() {
if (state.expandedKeys.length) {
state.expandedKeys = [];
} else {
message.error('请填写完整信息')
state.expandedKeys = state.treeData.map((item) => item.key);
}
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 handleMenuAuth(record: Recordable) {
state.editRoleTitle = `分配 ${ record.name } 的菜单权限`
state.checkedKeys = record.menu_keys
state.showModal = true
}
function checkedTree(keys) {
state.checkedKeys = [state.checkedKeys, ...keys]
}
function packHandle() {
if (state.expandedKeys.length) {
state.expandedKeys = []
} else {
state.expandedKeys = state.treeData.map(item => item.key)
}
}
function checkedAllHandle() {
if (!state.checkedAll) {
state.checkedKeys = getTreeAll(state.treeData)
state.checkedAll = true
} else {
state.checkedKeys = []
state.checkedAll = 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
})
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
}
}
})
return {
...toRefs(state),
formRef,
columns,
rules,
actionRef,
confirmForm,
loadDataTable,
onCheckedRow,
reloadTable,
handleEdit,
handleDelete,
handleOpen,
handleMenuAuth,
checkedTree,
packHandle,
checkedAllHandle,
};
},
});
</script>
<style lang='less' scoped>
</style>
<style lang="less" scoped></style>