mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-13 09:42:27 +08:00
fix Bug or add example
This commit is contained in:
Ah jung
@@ -42,16 +42,31 @@ export const columns = [
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
render(row) {
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
}
|
||||
},
|
||||
{ default: () => '编辑' }
|
||||
)
|
||||
width:150,
|
||||
//简单写一下例子，不建议这么写，过段时间，这里封二次封装
|
||||
render() {
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
type:'error',
|
||||
style:'margin-right:10px',
|
||||
onClick: () => {
|
||||
}
|
||||
},
|
||||
{ default: () => '删除' }
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
}
|
||||
},
|
||||
{ default: () => '编辑' }
|
||||
)
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
|
||||
72
src/views/list/basicList/columns.ts
Normal file
72
src/views/list/basicList/columns.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { h } from 'vue'
|
||||
import { NAvatar, NButton } from 'naive-ui'
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
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: () => '编辑' }
|
||||
)
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
156
src/views/list/basicList/index.vue
Normal file
156
src/views/list/basicList/index.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<ProTable
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="row => row.id"
|
||||
ref="actionRef"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<n-button type="primary" @click="addTable">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<PlusOutlined/>
|
||||
</n-icon>
|
||||
</template>
|
||||
新建
|
||||
</n-button>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
<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"
|
||||
>
|
||||
<n-form-item label="名称" path="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-form-item>
|
||||
<n-form-item label="日期" path="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 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 { ProTable } from '@/components/ProTable'
|
||||
import { getTableList } from '@/api/table/list'
|
||||
import { columns } from './columns'
|
||||
import { PlusOutlined } from '@vicons/antd'
|
||||
|
||||
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: { ProTable, PlusOutlined },
|
||||
setup() {
|
||||
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'
|
||||
},
|
||||
})
|
||||
|
||||
function addTable() {
|
||||
state.showModal = true
|
||||
}
|
||||
|
||||
const loadDataTable = async (params) => {
|
||||
const data = await getTableList(params);
|
||||
return data
|
||||
}
|
||||
|
||||
function onCheckedRow(rowKeys) {
|
||||
console.log(rowKeys)
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
actionRef.value.reload()
|
||||
}
|
||||
|
||||
function confirmForm(e) {
|
||||
e.preventDefault()
|
||||
state.formBtnLoading = true
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
message.success('新建成功')
|
||||
setTimeout(() => {
|
||||
state.showModal = false
|
||||
reloadTable()
|
||||
})
|
||||
} else {
|
||||
message.error('请填写完整信息')
|
||||
}
|
||||
state.formBtnLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
formRef,
|
||||
columns,
|
||||
rules,
|
||||
actionRef,
|
||||
confirmForm,
|
||||
loadDataTable,
|
||||
onCheckedRow,
|
||||
reloadTable,
|
||||
addTable
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
|
||||
</style>
|
||||
95
src/views/setting/account/BasicSetting.vue
Normal file
95
src/views/setting/account/BasicSetting.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<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>
|
||||
96
src/views/setting/account/SafetySetting.vue
Normal file
96
src/views/setting/account/SafetySetting.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<n-grid cols="1" responsive="screen" class="-mt-5">
|
||||
<n-grid-item>
|
||||
<n-list>
|
||||
<n-list-item>
|
||||
<template #suffix>
|
||||
<n-button type="primary" text>修改</n-button>
|
||||
</template>
|
||||
<n-thing title="账户密码">
|
||||
<template #description><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<template #suffix>
|
||||
<n-button type="primary" text>修改</n-button>
|
||||
</template>
|
||||
<n-thing title="绑定手机">
|
||||
<template #description><span class="text-gray-400">已绑定手机号：+86189****4877</span></template>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<template #suffix>
|
||||
<n-button type="primary" text>设置</n-button>
|
||||
</template>
|
||||
<n-thing title="密保问题">
|
||||
<template #description><span class="text-gray-400">未设置密保问题，密保问题可有效保护账户安全</span></template>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<template #suffix>
|
||||
<n-button type="primary" text>修改</n-button>
|
||||
</template>
|
||||
<n-thing title="个性域名">
|
||||
<template #description><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
</n-list>
|
||||
</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>
|
||||
Reference in New Issue
Block a user