表格数据组件化
This commit is contained in:
parent
bcd60063f4
commit
200ecb667d
|
|
@ -30,14 +30,6 @@
|
||||||
placeholder="请输入部门名称"
|
placeholder="请输入部门名称"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
<n-form-item label="部门全称:" path="fullname">
|
|
||||||
<n-input
|
|
||||||
v-model:value="form.fullname"
|
|
||||||
clearable
|
|
||||||
:maxlength="20"
|
|
||||||
placeholder="请输入部门全称"
|
|
||||||
/>
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="所属部门:" path="pid">
|
<n-form-item label="所属部门:" path="pid">
|
||||||
<n-select
|
<n-select
|
||||||
v-model:value="form.pid"
|
v-model:value="form.pid"
|
||||||
|
|
@ -135,7 +127,7 @@ export default defineComponent({
|
||||||
row.pid = null
|
row.pid = null
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
title: props.row.name ? '编辑部门' : '添加部门',
|
title: props.row.name ? '修改部门' : '添加部门',
|
||||||
show: props.visible,
|
show: props.visible,
|
||||||
form: Object.assign(data.form, row),
|
form: Object.assign(data.form, row),
|
||||||
negativeText: '取消',
|
negativeText: '取消',
|
||||||
|
|
|
||||||
|
|
@ -35,44 +35,14 @@ import { getDeptList, getDeptAll, deleteDept } from '@/api/system/dept/index.js'
|
||||||
import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
|
import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
|
||||||
import DeptModal from './components/DeptModal.vue'
|
import DeptModal from './components/DeptModal.vue'
|
||||||
import info from './info.js'
|
import info from './info.js'
|
||||||
|
import table from './table.js'
|
||||||
export default {
|
export default {
|
||||||
name: 'MenuPage',
|
name: 'MenuPage',
|
||||||
components: { dataTable, DeptModal, headSearch },
|
components: { dataTable, DeptModal, headSearch },
|
||||||
setup() {
|
setup() {
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
columns: [
|
columns: [
|
||||||
{
|
...table.columns,
|
||||||
title: '部门编号',
|
|
||||||
key: 'code',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '部门名称',
|
|
||||||
key: 'name',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '部门全称',
|
|
||||||
key: 'fullname',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '排序',
|
|
||||||
key: 'sort',
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
key: 'createTime',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '更新时间',
|
|
||||||
key: 'updateTime',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
|
|
|
||||||
|
|
@ -6,24 +6,6 @@ const data = [
|
||||||
placeholder: '请输入部门名称'
|
placeholder: '请输入部门名称'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// {
|
|
||||||
// label: '角色类型',
|
|
||||||
// type: 'select',
|
|
||||||
// key: 'op',
|
|
||||||
// props: {
|
|
||||||
// options: [{
|
|
||||||
// label: 11, value: 1
|
|
||||||
// }]
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: '角色类型',
|
|
||||||
// type: 'date',
|
|
||||||
// key: 'date',
|
|
||||||
// props: {
|
|
||||||
// type: 'date'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default data
|
export default data
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
const table = {
|
||||||
|
columns: [{
|
||||||
|
title: '部门编号',
|
||||||
|
key: 'code',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '部门名称',
|
||||||
|
key: 'name',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排序',
|
||||||
|
key: 'sort',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createTime',
|
||||||
|
align: 'center',
|
||||||
|
minWidth: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新时间',
|
||||||
|
key: 'updateTime',
|
||||||
|
align: 'center',
|
||||||
|
minWidth: 120
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
export default table
|
||||||
|
|
@ -119,7 +119,15 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
form: {},
|
form: {
|
||||||
|
title: '',
|
||||||
|
icon: '',
|
||||||
|
permission: '',
|
||||||
|
path: '',
|
||||||
|
component: '',
|
||||||
|
hide: 0,
|
||||||
|
status: 1
|
||||||
|
},
|
||||||
rules: {
|
rules: {
|
||||||
title: [{
|
title: [{
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -148,8 +156,7 @@ export default defineComponent({
|
||||||
statusOptions: [
|
statusOptions: [
|
||||||
{ key: 1, label: '在用' },
|
{ key: 1, label: '在用' },
|
||||||
{ key: 2, label: '停用' }
|
{ key: 2, label: '停用' }
|
||||||
],
|
]
|
||||||
menuList: []
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const getMenuList = computed(() => {
|
const getMenuList = computed(() => {
|
||||||
|
|
@ -172,7 +179,6 @@ export default defineComponent({
|
||||||
show: props.visible,
|
show: props.visible,
|
||||||
title: props.data.title ? '修改菜单' : '添加菜单',
|
title: props.data.title ? '修改菜单' : '添加菜单',
|
||||||
form: Object.assign(data.form, row),
|
form: Object.assign(data.form, row),
|
||||||
width: 700,
|
|
||||||
negativeText: '取消',
|
negativeText: '取消',
|
||||||
positiveText: '确认'
|
positiveText: '确认'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,110 +28,18 @@
|
||||||
import headSearch from '@/components/Search/index.vue'
|
import headSearch from '@/components/Search/index.vue'
|
||||||
import dataTable from '@/components/DataTable/index.vue'
|
import dataTable from '@/components/DataTable/index.vue'
|
||||||
import MenuModal from './components/MenuModal.vue'
|
import MenuModal from './components/MenuModal.vue'
|
||||||
import TableTags from '@/components/DataTable/tools/Tags.vue'
|
|
||||||
import Action from '@/components/DataTable/tools/Action.vue'
|
import Action from '@/components/DataTable/tools/Action.vue'
|
||||||
import { getMenu, getMenuList, deleteMenu } from '@/api/system/menu/index.js'
|
import { getMenu, getMenuList, deleteMenu } from '@/api/system/menu/index.js'
|
||||||
import { h, ref, unref, reactive, toRefs, onMounted } from 'vue'
|
import { h, ref, unref, reactive, toRefs, onMounted } from 'vue'
|
||||||
import info from './info.js'
|
import info from './info.js'
|
||||||
|
import table from './table.js'
|
||||||
export default {
|
export default {
|
||||||
name: 'MenuPage',
|
name: 'MenuPage',
|
||||||
components: { dataTable, MenuModal, headSearch },
|
components: { dataTable, MenuModal, headSearch },
|
||||||
setup() {
|
setup() {
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
columns: [
|
columns: [
|
||||||
{
|
...table.columns,
|
||||||
title: '菜单标题',
|
|
||||||
key: 'title',
|
|
||||||
align: 'center',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '菜单类型',
|
|
||||||
key: 'type',
|
|
||||||
align: 'center',
|
|
||||||
width: 100,
|
|
||||||
render(row) {
|
|
||||||
return h(TableTags, {
|
|
||||||
data: row.type,
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
key: 0,
|
|
||||||
label: '菜单'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
label: '节点'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '路由地址',
|
|
||||||
key: 'path',
|
|
||||||
align: 'center',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '组件路径',
|
|
||||||
key: 'component',
|
|
||||||
align: 'center',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
key: 'status',
|
|
||||||
align: 'center',
|
|
||||||
width: 100,
|
|
||||||
render(row) {
|
|
||||||
return h(TableTags, {
|
|
||||||
data: row.status,
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
label: '在用'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2,
|
|
||||||
label: '停用'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '排序',
|
|
||||||
key: 'sort',
|
|
||||||
align: 'center',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '是否可见',
|
|
||||||
key: 'hide',
|
|
||||||
align: 'center',
|
|
||||||
width: 100,
|
|
||||||
render(row) {
|
|
||||||
return h(TableTags, {
|
|
||||||
data: row.hide,
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
label: '可见'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2,
|
|
||||||
label: '不可见'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
key: 'createTime',
|
|
||||||
align: 'center',
|
|
||||||
width: 160
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
import { h } from 'vue'
|
||||||
|
import TableTags from '@/components/DataTable/tools/Tags.vue'
|
||||||
|
const table = {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '菜单标题',
|
||||||
|
key: 'title',
|
||||||
|
align: 'center',
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '菜单类型',
|
||||||
|
key: 'type',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return h(TableTags, {
|
||||||
|
data: row.type,
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
key: 0,
|
||||||
|
label: '菜单'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
label: '节点'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '路由地址',
|
||||||
|
key: 'path',
|
||||||
|
align: 'center',
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '组件路径',
|
||||||
|
key: 'component',
|
||||||
|
align: 'center',
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return h(TableTags, {
|
||||||
|
data: row.status,
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
label: '在用'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 2,
|
||||||
|
label: '停用'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排序',
|
||||||
|
key: 'sort',
|
||||||
|
align: 'center',
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否可见',
|
||||||
|
key: 'hide',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return h(TableTags, {
|
||||||
|
data: row.hide,
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
label: '可见'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 2,
|
||||||
|
label: '不可见'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createTime',
|
||||||
|
align: 'center',
|
||||||
|
width: 160
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default table
|
||||||
Loading…
Reference in New Issue