|
@@ -1,16 +1,15 @@
|
|
|
<template>
|
|
|
- <v-card class="pa-5 card-box">
|
|
|
- <div class="d-flex justify-space-between">
|
|
|
- <div class="d-flex mb-3">
|
|
|
- <CtTextField class="mr-3" v-model="query.name" v-bind="nameItem"></CtTextField>
|
|
|
- <CtTextField class="mr-3" v-model="query.code" v-bind="codeItem"></CtTextField>
|
|
|
- <Autocomplete v-model="query.status" :item="statusItem"></Autocomplete>
|
|
|
- <v-btn color="primary" class="half-button ml-3" @click="handleSearch">查 询</v-btn>
|
|
|
- <v-btn class="half-button mx-3" variant="outlined" color="primary" @click="handleReset">重 置</v-btn>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <CtFilter :items="formItems" @reset="handleReset" @search="handleSearch">
|
|
|
+ <template #appendBtn>
|
|
|
+ <v-btn class="ml-3 elevation-5" color="primary" @click="handleAdd">
|
|
|
+ <v-icon left>mdi-plus</v-icon>
|
|
|
+ {{ t('common.add') }}
|
|
|
+ </v-btn>
|
|
|
+ </template>
|
|
|
+ </CtFilter>
|
|
|
+
|
|
|
+ <v-card class="pa-5 card-box mt-3">
|
|
|
<CtTable
|
|
|
- class="mt-3"
|
|
|
:items="items"
|
|
|
:headers="headers"
|
|
|
:loading="loading"
|
|
@@ -18,7 +17,7 @@
|
|
|
:total="total"
|
|
|
:page-info="pageInfo"
|
|
|
itemKey="id"
|
|
|
- @add="handleAdd"
|
|
|
+ :isTools="false"
|
|
|
@pageHandleChange="handleChangePage"
|
|
|
>
|
|
|
<template #status="{ item }">
|
|
@@ -84,29 +83,40 @@ const dataItem = ref(null)
|
|
|
const loadingData = ref(false)
|
|
|
const dataPermissionRef = ref()
|
|
|
|
|
|
-const nameItem = ref({
|
|
|
- width: 300,
|
|
|
- clearable: true,
|
|
|
- hireDetails: true,
|
|
|
- label: '角色名称',
|
|
|
- variant: 'outlined',
|
|
|
- density: 'compact',
|
|
|
- color: 'primary',
|
|
|
- placeholder: '请输入角色名称'
|
|
|
+// 检索框
|
|
|
+const formItems = ref({
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'name',
|
|
|
+ value: '',
|
|
|
+ label: '角色名称',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'code',
|
|
|
+ value: '',
|
|
|
+ label: '角色标识',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'autocomplete',
|
|
|
+ key: 'status',
|
|
|
+ value: null,
|
|
|
+ label: '状态',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ items: [],
|
|
|
+ width: 200
|
|
|
+ }
|
|
|
+ ]
|
|
|
})
|
|
|
|
|
|
-const codeItem = ref({
|
|
|
- width: 300,
|
|
|
- clearable: true,
|
|
|
- hireDetails: true,
|
|
|
- label: '角色标识',
|
|
|
- variant: 'outlined',
|
|
|
- density: 'compact',
|
|
|
- color: 'primary',
|
|
|
- placeholder: '请输入角色标识'
|
|
|
-})
|
|
|
-const statusItem = ref({ width: 300, items: [], clearable: true, hireDetails: true, label: '状态', placeholder: '请选择状态' })
|
|
|
-
|
|
|
const query = ref({
|
|
|
name: null,
|
|
|
status: null,
|
|
@@ -118,19 +128,19 @@ const pageInfo = ref({
|
|
|
})
|
|
|
|
|
|
const headers = [
|
|
|
- { title: '角色编号', key: 'id', align: 'left' },
|
|
|
- { title: '角色名称', key: 'name' },
|
|
|
- { title: '角色标识', key: 'code' },
|
|
|
- { title: '显示顺序', key: 'sort', align: 'center' },
|
|
|
- { title: '备注', key: 'remark' },
|
|
|
- { title: '状态', key: 'status', align: 'center' },
|
|
|
- { title: '创建时间', key: 'createTime', value: (e) => formatDate(e.createTime, 'YYYY-MM-DD HH:mm:ss') },
|
|
|
- { title: t('common.actions'), key: 'actions' }
|
|
|
+ { title: '角色编号', key: 'id', align: 'left', sortable: false },
|
|
|
+ { title: '角色名称', key: 'name', sortable: false },
|
|
|
+ { title: '角色标识', key: 'code', sortable: false },
|
|
|
+ { title: '显示顺序', key: 'sort', align: 'center', sortable: false },
|
|
|
+ { title: '备注', key: 'remark', sortable: false },
|
|
|
+ { title: '状态', key: 'status', align: 'center', sortable: false },
|
|
|
+ { title: '创建时间', key: 'createTime', value: (e) => formatDate(e.createTime, 'YYYY-MM-DD HH:mm:ss'), sortable: false },
|
|
|
+ { title: t('common.actions'), key: 'actions', sortable: false }
|
|
|
]
|
|
|
// 字典
|
|
|
const getStatusDict = async () => {
|
|
|
const { data } = await getDict('menduner_status', null)
|
|
|
- statusItem.value.items = data || []
|
|
|
+ formItems.value.options.find(e => e.key === 'status').items = data || []
|
|
|
getPage()
|
|
|
}
|
|
|
// 列表
|
|
@@ -139,7 +149,7 @@ const getPage = async () => {
|
|
|
try {
|
|
|
const res = await getRolePage({ ...pageInfo.value, ...query.value })
|
|
|
items.value = res.list.map(e => {
|
|
|
- e.statusName = statusItem.value.items.find(_e => _e.value === e.status)?.label ?? ''
|
|
|
+ e.statusName = formItems.value.options.find(e => e.key === 'status').items.find(_e => _e.value === e.status)?.label ?? ''
|
|
|
return e
|
|
|
})
|
|
|
total.value = res.total
|
|
@@ -148,18 +158,16 @@ const getPage = async () => {
|
|
|
}
|
|
|
}
|
|
|
// 检索
|
|
|
-const handleSearch = () => {
|
|
|
+const handleSearch = (obj) => {
|
|
|
pageInfo.value.pageNo = 1
|
|
|
+ query.value = obj
|
|
|
getPage()
|
|
|
}
|
|
|
// 重置
|
|
|
-const handleReset = () => {
|
|
|
- query.value = {
|
|
|
- name: null,
|
|
|
- status: null,
|
|
|
- code: null
|
|
|
- }
|
|
|
- handleSearch()
|
|
|
+const handleReset = (obj) => {
|
|
|
+ pageInfo.value.pageNo = 1
|
|
|
+ query.value = obj
|
|
|
+ getPage()
|
|
|
}
|
|
|
// 新增
|
|
|
const handleAdd = () => {
|
|
@@ -234,7 +242,3 @@ const handleSubmitData = async () => {
|
|
|
getStatusDict()
|
|
|
|
|
|
</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-
|
|
|
-</style>
|