zhangtao
/
restructure
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

表格数据组件化

This commit is contained in:
余菲 2022-05-30 10:38:48 +08:00
parent bcd60063f4
commit 200ecb667d
7 changed files with 146 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/system/dept/components/DeptModal.vue
View File

@ -30,14 +30,6 @@
placeholder="请输入部门名称"
/>
</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-select
v-model:value="form.pid"
@ -135,7 +127,7 @@ export default defineComponent({
row.pid = null
}
return {
title: props.row.name ? '编辑部门' : '添加部门',
title: props.row.name ? '修改部门' : '添加部门',
show: props.visible,
form: Object.assign(data.form, row),
negativeText: '取消',

34
src/views/system/dept/index.vue
View File

@ -35,44 +35,14 @@ import { getDeptList, getDeptAll, deleteDept } from '@/api/system/dept/index.js'
import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
import DeptModal from './components/DeptModal.vue'
import info from './info.js'
import table from './table.js'
export default {
name: 'MenuPage',
components: { dataTable, DeptModal, headSearch },
setup() {
const data = reactive({
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
},
...table.columns,
{
title: '操作',
align: 'center',

18
src/views/system/dept/info.js
View File

@ -6,24 +6,6 @@ const data = [
placeholder: '请输入部门名称'
}
}
// {
// label: '角色类型',
// type: 'select',
// key: 'op',
// props: {
// options: [{
// label: 11, value: 1
// }]
// }
// },
// {
// label: '角色类型',
// type: 'date',
// key: 'date',
// props: {
// type: 'date'
// }
// }
]
export default data

30
src/views/system/dept/table.js Normal file
View File

@ -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

14
src/views/system/menu/components/MenuModal.vue
View File

@ -119,7 +119,15 @@ export default defineComponent({
},
setup(props, { emit }) {
const data = reactive({
form: {},
form: {
title: '',
icon: '',
permission: '',
path: '',
component: '',
hide: 0,
status: 1
},
rules: {
title: [{
required: true,
@ -148,8 +156,7 @@ export default defineComponent({
statusOptions: [
{ key: 1, label: '在用' },
{ key: 2, label: '停用' }
],
menuList: []
]
})
const getMenuList = computed(() => {
@ -172,7 +179,6 @@ export default defineComponent({
show: props.visible,
title: props.data.title ? '修改菜单' : '添加菜单',
form: Object.assign(data.form, row),
width: 700,
negativeText: '取消',
positiveText: '确认'
}

96
src/views/system/menu/index.vue
View File

@ -28,110 +28,18 @@
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import MenuModal from './components/MenuModal.vue'
import TableTags from '@/components/DataTable/tools/Tags.vue'
import Action from '@/components/DataTable/tools/Action.vue'
import { getMenu, getMenuList, deleteMenu } from '@/api/system/menu/index.js'
import { h, ref, unref, reactive, toRefs, onMounted } from 'vue'
import info from './info.js'
import table from './table.js'
export default {
name: 'MenuPage',
components: { dataTable, MenuModal, headSearch },
setup() {
const data = reactive({
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
},
...table.columns,
{
title: '操作',
align: 'center',

101
src/views/system/menu/table.js Normal file
View File

@ -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