表格模版
This commit is contained in:
仲么了
@@ -1,2 +1,2 @@
|
||||
dialog 弹框标准模版
|
||||
表格模版参照 /views/userList/index.vue
|
||||
dialog 弹框标准模版
|
||||
table 表格模版
|
||||
|
||||
155
src/template/table.vue
Normal file
155
src/template/table.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<!-- 表头 -->
|
||||
<TableHeader date-picker>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- 表格 -->
|
||||
<Table ref="tableRef" />
|
||||
<!-- 弹框 -->
|
||||
<PopupEdit ref="popupEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide, defineOptions } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import PopupEdit from './dialog.vue'
|
||||
|
||||
// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
|
||||
defineOptions({
|
||||
name: 'auth/userlist'
|
||||
})
|
||||
const popupEdit = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/list',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '用户名称', field: 'name', minWidth: '130' },
|
||||
{ title: '登录名', field: 'loginName', minWidth: '130' },
|
||||
{ title: '角色', field: 'roleName', minWidth: '130' },
|
||||
{ title: '部门', field: 'deptName', minWidth: '200' },
|
||||
{ title: '电话', field: 'phoneShow', minWidth: '100' },
|
||||
{ title: '注册时间', field: 'registerTime', minWidth: '130' },
|
||||
{ title: '登录时间', field: 'loginTime', minWidth: '130' },
|
||||
{ title: '类型', field: 'casualUserName', minWidth: '80' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
width: '100',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
2: 'warning',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
5: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '注销',
|
||||
1: '正常',
|
||||
2: '锁定',
|
||||
3: '待审核',
|
||||
4: '休眠',
|
||||
5: '密码过期'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改密码',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Lock',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
|
||||
},
|
||||
click: row => {}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '注销',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-SwitchButton',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1 && row.state !== 3
|
||||
},
|
||||
click: row => {}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.deptName = item.deptName || '/'
|
||||
item.phoneShow = item.phone || '/'
|
||||
item.roleName = item.role.length ? item.role : '/'
|
||||
switch (item.casualUser) {
|
||||
case 0:
|
||||
item.casualUserName = '临时用户'
|
||||
break
|
||||
case 1:
|
||||
item.casualUserName = '长期用户'
|
||||
break
|
||||
default:
|
||||
item.casualUserName = '/'
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchState = 1
|
||||
tableStore.table.params.casualUser = -1
|
||||
tableStore.table.params.orderBy = ''
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const addUser = () => {
|
||||
popupEdit.value.open('新增用户')
|
||||
}
|
||||
</script>
|
||||
@@ -30,7 +30,7 @@ import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
|
||||
import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
|
||||
import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
|
||||
|
||||
const activeName = ref('6')
|
||||
const activeName = ref('1')
|
||||
const height = mainHeight(84)
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,155 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
|
||||
<TableHeader date-picker>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon='Plus' type='primary' @click='addUser'>添加</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref='tableRef' />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide, defineOptions } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import PopupEdit from './popupEdit.vue'
|
||||
|
||||
// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
|
||||
defineOptions({
|
||||
name: 'auth/userlist'
|
||||
})
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/list',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '用户名称', field: 'name', minWidth: '130' },
|
||||
{ title: '登录名', field: 'loginName', minWidth: '130' },
|
||||
{ title: '角色', field: 'roleName', minWidth: '130' },
|
||||
{ title: '部门', field: 'deptName', minWidth: '200' },
|
||||
{ title: '电话', field: 'phoneShow', minWidth: '100' },
|
||||
{ title: '注册时间', field: 'registerTime', minWidth: '130' },
|
||||
{ title: '登录时间', field: 'loginTime', minWidth: '130' },
|
||||
{ title: '类型', field: 'casualUserName', minWidth: '80' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
width: '100',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
2: 'warning',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
5: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '注销',
|
||||
1: '正常',
|
||||
2: '锁定',
|
||||
3: '待审核',
|
||||
4: '休眠',
|
||||
5: '密码过期'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改密码',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Lock',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
|
||||
},
|
||||
click: row => {
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '注销',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-SwitchButton',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1 && row.state !== 3
|
||||
},
|
||||
click: row => {
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.deptName = item.deptName || '/'
|
||||
item.phoneShow = item.phone || '/'
|
||||
item.roleName = item.role.length ? item.role : '/'
|
||||
switch (item.casualUser) {
|
||||
case 0:
|
||||
item.casualUserName = '临时用户'
|
||||
break
|
||||
case 1:
|
||||
item.casualUserName = '长期用户'
|
||||
break
|
||||
default:
|
||||
item.casualUserName = '/'
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchState = 1
|
||||
tableStore.table.params.casualUser = -1
|
||||
tableStore.table.params.orderBy = ''
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const addUser = () => {
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
@@ -32,7 +32,7 @@ defineOptions({
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(82)
|
||||
const activeName = ref('2')
|
||||
const activeName = ref('3')
|
||||
watch(
|
||||
() => router.currentRoute.value.query.lineId,
|
||||
(newLineId, oldLineId) => {
|
||||
|
||||
Reference in New Issue
Block a user