修改表格操作列
This commit is contained in:
guanj
@@ -1,150 +1,150 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader select ref="TableHeaderRef">
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<formTab ref="formTabRef" v-if="show" @Cancels=";(show = false), tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { activateTheme, deleteTheme } from '@/api/system/subject/index'
|
||||
import formTab from './form/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { getTheme } from '@/api/systerm'
|
||||
const configStore = useConfig()
|
||||
defineOptions({
|
||||
name: 'user-boot/function/functionTree'
|
||||
})
|
||||
|
||||
const formTabRef = ref()
|
||||
const TableHeaderRef = ref()
|
||||
const show = ref(false)
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/system-boot/theme/getAllThemes',
|
||||
method: 'GET',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '主题名称' },
|
||||
{ field: 'remark', title: '描述' },
|
||||
{ field: 'logoUrl', title: '主题图标', render: 'image' },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活 ',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.active == 1
|
||||
},
|
||||
click: row => {
|
||||
activateTheme({ id: row.id }).then(res => {
|
||||
ElMessage({
|
||||
message: '激活成功!',
|
||||
type: 'success'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改 ',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
show.value = true
|
||||
setTimeout(() => {
|
||||
formTabRef.value.open({
|
||||
text: '修改主题',
|
||||
row: row
|
||||
})
|
||||
}, 10)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteTheme({ id: row.id }).then(res => {
|
||||
ElMessage({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
getTheme().then(res => {
|
||||
let list: any = [
|
||||
'elementUiPrimary',
|
||||
'tableHeaderBackground',
|
||||
'tableHeaderColor',
|
||||
'tableCurrent',
|
||||
'menuBackground',
|
||||
'menuColor',
|
||||
'menuTopBarBackground',
|
||||
'menuActiveBackground',
|
||||
'menuActiveColor',
|
||||
'headerBarTabColor',
|
||||
'headerBarBackground'
|
||||
]
|
||||
|
||||
window.localStorage.setItem('getTheme', JSON.stringify(res.data))
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
|
||||
}
|
||||
configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
// 新增主题
|
||||
const add = () => {
|
||||
show.value = true
|
||||
setTimeout(() => {
|
||||
formTabRef.value.open({
|
||||
text: '新增主题'
|
||||
})
|
||||
}, 10)
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader select ref="TableHeaderRef">
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<formTab ref="formTabRef" v-if="show" @Cancels=";(show = false), tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { activateTheme, deleteTheme } from '@/api/system/subject/index'
|
||||
import formTab from './form/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { getTheme } from '@/api/systerm'
|
||||
const configStore = useConfig()
|
||||
defineOptions({
|
||||
name: 'user-boot/function/functionTree'
|
||||
})
|
||||
|
||||
const formTabRef = ref()
|
||||
const TableHeaderRef = ref()
|
||||
const show = ref(false)
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/system-boot/theme/getAllThemes',
|
||||
method: 'GET',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '主题名称' },
|
||||
{ field: 'remark', title: '描述' },
|
||||
{ field: 'logoUrl', title: '主题图标', render: 'image' },
|
||||
|
||||
{
|
||||
title: '操作',fixed: 'right',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活 ',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.active == 1
|
||||
},
|
||||
click: row => {
|
||||
activateTheme({ id: row.id }).then(res => {
|
||||
ElMessage({
|
||||
message: '激活成功!',
|
||||
type: 'success'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改 ',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
show.value = true
|
||||
setTimeout(() => {
|
||||
formTabRef.value.open({
|
||||
text: '修改主题',
|
||||
row: row
|
||||
})
|
||||
}, 10)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteTheme({ id: row.id }).then(res => {
|
||||
ElMessage({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
getTheme().then(res => {
|
||||
let list: any = [
|
||||
'elementUiPrimary',
|
||||
'tableHeaderBackground',
|
||||
'tableHeaderColor',
|
||||
'tableCurrent',
|
||||
'menuBackground',
|
||||
'menuColor',
|
||||
'menuTopBarBackground',
|
||||
'menuActiveBackground',
|
||||
'menuActiveColor',
|
||||
'headerBarTabColor',
|
||||
'headerBarBackground'
|
||||
]
|
||||
|
||||
window.localStorage.setItem('getTheme', JSON.stringify(res.data))
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
|
||||
}
|
||||
configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
// 新增主题
|
||||
const add = () => {
|
||||
show.value = true
|
||||
setTimeout(() => {
|
||||
formTabRef.value.open({
|
||||
text: '新增主题'
|
||||
})
|
||||
}, 10)
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user