mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2025-04-05 17:38:01 +08:00
优化vue3代码生成
This commit is contained in:
yubaolee
parent
4dd882cf90
commit
98808a65ea
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
|
||||
* @Description: 代码生成器自动生成动态头部列表
|
||||
* @Copyright (c) 2022 by yubaolee | ahfu~ , All Rights Reserved.
|
||||
* @Description: OpenAuth.Pro代码生成器自动生成
|
||||
* Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
@ -9,50 +9,25 @@
|
||||
<div class="search-box">
|
||||
<el-input @keyup.enter="handleFilter" size="small" class="custom-input w-200" :placeholder="'名称'"
|
||||
v-model="listQuery.key"></el-input>
|
||||
|
||||
<el-button size="small" class="custom-button filter-item" icon="el-icon-search" @click="handleFilter">搜索</el-button>
|
||||
<el-button size="small" class="custom-button filter-item" icon="el-icon-search"
|
||||
@click="handleFilter">搜索</el-button>
|
||||
</div>
|
||||
<permission-btn v-on:btn-event="onBtnClicked"></permission-btn>
|
||||
</sticky>
|
||||
|
||||
<auth-table
|
||||
ref="mainTable"
|
||||
:select-type="'checkbox'"
|
||||
:table-fields="headerList"
|
||||
:data="list"
|
||||
:v-loading="listLoading"
|
||||
@row-click="rowClick"
|
||||
@selection-change="handleSelectionChange"></auth-table>
|
||||
<el-pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:currentPage="listQuery.page"
|
||||
v-model:page-size="listQuery.limit"
|
||||
@current-change="handleCurrentChange" />
|
||||
<auth-table ref="mainTableRef" :select-type="'checkbox'" :table-fields="headerList" :data="list"
|
||||
:v-loading="listLoading" @row-click="rowClick" @selection-change="handleSelectionChange"></auth-table>
|
||||
<el-pagination v-show="total > 0" :total="total" v-model:currentPage="listQuery.page"
|
||||
v-model:page-size="listQuery.limit" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
<el-dialog
|
||||
draggable
|
||||
class="dialog-mini"
|
||||
width="500px"
|
||||
:title="txtDlgTitle[dialogStatus]"
|
||||
v-model="dialogFormVisible">
|
||||
<auth-form
|
||||
ref="dataForm"
|
||||
:rules="rules"
|
||||
:edit-model="true"
|
||||
:form-fields="headerList"
|
||||
:data="temp"
|
||||
<el-dialog draggable class="dialog-mini" width="500px" :title="dialogStatus==0?'新增':'编辑'" v-model="dialogFormVisible">
|
||||
<auth-form ref="dataFormRef" :rules="rules" :edit-model="true" :form-fields="headerList" :data="temp"
|
||||
:col-num="2"></auth-form>
|
||||
<template v-slot:footer>
|
||||
<div>
|
||||
<el-button size="small" @click="dialogFormVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
v-if="dialogStatus == 'create'"
|
||||
type="primary"
|
||||
@click="createData">
|
||||
<el-button size="small" v-if="dialogStatus == 0" type="primary" @click="createData">
|
||||
确认
|
||||
</el-button>
|
||||
<el-button size="small" v-else type="primary" @click="updateData">
|
||||
@ -76,46 +51,35 @@ import Sticky from '@/components/Sticky/index.vue'
|
||||
import permissionBtn from '@/components/PermissionBtn/index.vue'
|
||||
import AuthForm from '../../components/Base/AuthForm.vue'
|
||||
import AuthTable from '../../components/Base/AuthTable.vue'
|
||||
|
||||
const headerList = ref([]) //列表头
|
||||
const multipleSelection = ref([]) //列表checkbox选中的值
|
||||
const list = ref([]) //列表值
|
||||
const total = ref(0) //总条数
|
||||
const listLoading = ref(true) //进度条
|
||||
const dialogFormVisible = ref(false) //是否显示编辑框
|
||||
const dialogStatus = ref('')
|
||||
const dialogStatus = ref(0) //0:新增 1:编辑
|
||||
let temp = reactive({}) //新增（编辑）绑定对话框
|
||||
|
||||
const listQuery = reactive({
|
||||
// 查询条件
|
||||
page: 1,
|
||||
limit: 20,
|
||||
key: undefined,
|
||||
})
|
||||
|
||||
const txtDlgTitle = reactive({
|
||||
//对话框标题
|
||||
update: '编辑',
|
||||
create: '添加',
|
||||
})
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
//组件refs
|
||||
const mainTable = ref(null)
|
||||
const dataForm = ref(null)
|
||||
|
||||
const mainTableRef = ref(null)
|
||||
const dataFormRef = ref(null)
|
||||
onMounted(() => {
|
||||
headerList.value = [
|
||||
{HeaderList}
|
||||
{HeaderList}
|
||||
]
|
||||
getList()
|
||||
})
|
||||
|
||||
const rowClick = function (row) {
|
||||
mainTable.value.clearSelection()
|
||||
mainTable.value.toggleRowSelection(row)
|
||||
mainTableRef.value.clearSelection()
|
||||
mainTableRef.value.toggleRowSelection(row)
|
||||
}
|
||||
const handleSelectionChange = function (val) {
|
||||
multipleSelection.value = val
|
||||
@ -127,27 +91,18 @@ const onBtnClicked = function (domId, callback) {
|
||||
break
|
||||
case 'btnEdit':
|
||||
if (multipleSelection.value.length !== 1) {
|
||||
ElMessage.error({
|
||||
message: '只能选中一个进行编辑',
|
||||
type: 'error',
|
||||
})
|
||||
ElMessage.error('只能选中一个进行编辑')
|
||||
return
|
||||
}
|
||||
handleUpdate(multipleSelection.value[0])
|
||||
break
|
||||
case 'btnDel':
|
||||
if (multipleSelection.value.length < 1) {
|
||||
ElMessage.error({
|
||||
message: '至少删除一个',
|
||||
type: 'error',
|
||||
})
|
||||
ElMessage.error('至少删除一个')
|
||||
return
|
||||
}
|
||||
handleDelete(multipleSelection.value)
|
||||
break
|
||||
case 'btnExport':
|
||||
mainTable.value.exportExcel('资源文件', callback)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
@ -164,22 +119,12 @@ const handleFilter = function () {
|
||||
listQuery.page = 1
|
||||
getList()
|
||||
}
|
||||
const handleSizeChange = function (val) {
|
||||
listQuery.limit = val
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = function (val) {
|
||||
listQuery.page = val
|
||||
getList()
|
||||
}
|
||||
const handleModifyStatus = function (row, disable) {
|
||||
// 模拟修改状态
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
})
|
||||
row.disable = disable
|
||||
}
|
||||
|
||||
const resetTemp = function () {
|
||||
let obj = {}
|
||||
headerList.value.forEach(item => {
|
||||
@ -188,39 +133,30 @@ const resetTemp = function () {
|
||||
Object.assign(temp, obj)
|
||||
}
|
||||
const handleCreate = async function () {
|
||||
// 弹出添加框
|
||||
resetTemp()
|
||||
dialogStatus.value = 'create'
|
||||
dialogStatus.value = 0
|
||||
dialogFormVisible.value = true
|
||||
await nextTick()
|
||||
dataForm.value.clearValidate()
|
||||
dataFormRef.value.clearValidate()
|
||||
}
|
||||
const createData = function () {
|
||||
// 保存提交
|
||||
dataForm.value.validate(() => {
|
||||
dataFormRef.value.validate(() => {
|
||||
{TableName}s.add(temp).then(() => {
|
||||
list.value.unshift(temp)
|
||||
dialogFormVisible.value = false
|
||||
ElNotification({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
type: 'success',
|
||||
duration: 2000,
|
||||
})
|
||||
ElNotification.success('创建成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
const handleUpdate = async function (row) {
|
||||
// 弹出编辑框
|
||||
Object.assign(temp, row) //必需这样赋值才能响应式
|
||||
dialogStatus.value = 'update'
|
||||
dialogStatus.value = 1
|
||||
dialogFormVisible.value = true
|
||||
await nextTick()
|
||||
dataForm.value.clearValidate()
|
||||
dataFormRef.value.clearValidate()
|
||||
}
|
||||
const updateData = function () {
|
||||
// 更新提交
|
||||
dataForm.value.validate(() => {
|
||||
dataFormRef.value.validate(() => {
|
||||
const tempData = Object.assign({}, temp)
|
||||
{TableName}s.update(tempData).then(() => {
|
||||
for (const v of list.value) {
|
||||
@ -231,17 +167,11 @@ const updateData = function () {
|
||||
}
|
||||
}
|
||||
dialogFormVisible.value = false
|
||||
ElNotification({
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
duration: 2000,
|
||||
})
|
||||
ElNotification.success('更新成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
const handleDelete = function (rows) {
|
||||
// 多行删除
|
||||
delrows({TableName}s, rows)
|
||||
delrows({TableName}s, rows, getList)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
|
||||
* @Description: 代码生成器自动生成动态头部列表
|
||||
* @Copyright (c) 2022 by yubaolee | ahfu~ , All Rights Reserved.
|
||||
* @Description: OpenAuth.Pro代码生成器自动生成
|
||||
* Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
@ -9,50 +9,25 @@
|
||||
<div class="search-box">
|
||||
<el-input @keyup.enter="handleFilter" size="small" class="custom-input w-200" :placeholder="'名称'"
|
||||
v-model="listQuery.key"></el-input>
|
||||
|
||||
<el-button size="small" class="custom-button filter-item" icon="el-icon-search" @click="handleFilter">搜索</el-button>
|
||||
<el-button size="small" class="custom-button filter-item" icon="el-icon-search"
|
||||
@click="handleFilter">搜索</el-button>
|
||||
</div>
|
||||
<permission-btn v-on:btn-event="onBtnClicked"></permission-btn>
|
||||
</sticky>
|
||||
|
||||
<auth-table
|
||||
ref="mainTable"
|
||||
:select-type="'checkbox'"
|
||||
:table-fields="headerList"
|
||||
:data="list"
|
||||
:v-loading="listLoading"
|
||||
@row-click="rowClick"
|
||||
@selection-change="handleSelectionChange"></auth-table>
|
||||
<el-pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:currentPage="listQuery.page"
|
||||
v-model:page-size="listQuery.limit"
|
||||
@current-change="handleCurrentChange" />
|
||||
<auth-table ref="mainTableRef" :select-type="'checkbox'" :table-fields="headerList" :data="list"
|
||||
:v-loading="listLoading" @row-click="rowClick" @selection-change="handleSelectionChange"></auth-table>
|
||||
<el-pagination v-show="total > 0" :total="total" v-model:currentPage="listQuery.page"
|
||||
v-model:page-size="listQuery.limit" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
<el-dialog
|
||||
draggable
|
||||
class="dialog-mini"
|
||||
width="500px"
|
||||
:title="txtDlgTitle[dialogStatus]"
|
||||
v-model="dialogFormVisible">
|
||||
<auth-form
|
||||
ref="dataForm"
|
||||
:rules="rules"
|
||||
:edit-model="true"
|
||||
:form-fields="headerList"
|
||||
:data="temp"
|
||||
<el-dialog draggable class="dialog-mini" width="500px" :title="dialogStatus==0?'新增':'编辑'" v-model="dialogFormVisible">
|
||||
<auth-form ref="dataFormRef" :rules="rules" :edit-model="true" :form-fields="headerList" :data="temp"
|
||||
:col-num="2"></auth-form>
|
||||
<template v-slot:footer>
|
||||
<div>
|
||||
<el-button size="small" @click="dialogFormVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
v-if="dialogStatus == 'create'"
|
||||
type="primary"
|
||||
@click="createData">
|
||||
<el-button size="small" v-if="dialogStatus == 0" type="primary" @click="createData">
|
||||
确认
|
||||
</el-button>
|
||||
<el-button size="small" v-else type="primary" @click="updateData">
|
||||
@ -70,48 +45,41 @@ import { onMounted, ref, reactive, nextTick } from 'vue'
|
||||
import * as {TableName}s from '@/api/{TableName}s'
|
||||
import { defaultVal } from '@/utils/index'
|
||||
import { delrows } from '@/utils/delRows.js'
|
||||
import ColumnDefine from '@/interface/columnDefine'
|
||||
//引入组件
|
||||
import Sticky from '@/components/Sticky/index.vue'
|
||||
import permissionBtn from '@/components/PermissionBtn/index.vue'
|
||||
import AuthForm from '../../components/Base/AuthForm.vue'
|
||||
import AuthTable from '../../components/Base/AuthTable.vue'
|
||||
|
||||
const headerList = ref([]) //列表头
|
||||
const multipleSelection = ref([]) //列表checkbox选中的值
|
||||
const list = ref([]) //列表值
|
||||
const total = ref(0) //总条数
|
||||
const listLoading = ref(true) //进度条
|
||||
const dialogFormVisible = ref(false) //是否显示编辑框
|
||||
const dialogStatus = ref('')
|
||||
const dialogStatus = ref(0) //0:新增 1:编辑
|
||||
let temp = reactive({}) //新增（编辑）绑定对话框
|
||||
|
||||
const listQuery = reactive({
|
||||
// 查询条件
|
||||
page: 1,
|
||||
limit: 20,
|
||||
key: undefined,
|
||||
})
|
||||
|
||||
const txtDlgTitle = reactive({
|
||||
//对话框标题
|
||||
update: '编辑',
|
||||
create: '添加',
|
||||
})
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
//组件refs
|
||||
const mainTable = ref(null)
|
||||
const dataForm = ref(null)
|
||||
|
||||
const mainTableRef = ref(null)
|
||||
const dataFormRef = ref(null)
|
||||
onMounted(() => {
|
||||
headerList.value = [
|
||||
{HeaderList}
|
||||
]
|
||||
getList()
|
||||
})
|
||||
|
||||
const rowClick = function (row) {
|
||||
mainTable.value.clearSelection()
|
||||
mainTable.value.toggleRowSelection(row)
|
||||
mainTableRef.value.clearSelection()
|
||||
mainTableRef.value.toggleRowSelection(row)
|
||||
}
|
||||
const handleSelectionChange = function (val) {
|
||||
multipleSelection.value = val
|
||||
@ -123,27 +91,18 @@ const onBtnClicked = function (domId, callback) {
|
||||
break
|
||||
case 'btnEdit':
|
||||
if (multipleSelection.value.length !== 1) {
|
||||
ElMessage.error({
|
||||
message: '只能选中一个进行编辑',
|
||||
type: 'error',
|
||||
})
|
||||
ElMessage.error('只能选中一个进行编辑')
|
||||
return
|
||||
}
|
||||
handleUpdate(multipleSelection.value[0])
|
||||
break
|
||||
case 'btnDel':
|
||||
if (multipleSelection.value.length < 1) {
|
||||
ElMessage.error({
|
||||
message: '至少删除一个',
|
||||
type: 'error',
|
||||
})
|
||||
ElMessage.error('至少删除一个')
|
||||
return
|
||||
}
|
||||
handleDelete(multipleSelection.value)
|
||||
break
|
||||
case 'btnExport':
|
||||
mainTable.value.exportExcel('资源文件', callback)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
@ -167,22 +126,12 @@ const handleFilter = function () {
|
||||
listQuery.page = 1
|
||||
getList()
|
||||
}
|
||||
const handleSizeChange = function (val) {
|
||||
listQuery.limit = val
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = function (val) {
|
||||
listQuery.page = val
|
||||
getList()
|
||||
}
|
||||
const handleModifyStatus = function (row, disable) {
|
||||
// 模拟修改状态
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
})
|
||||
row.disable = disable
|
||||
}
|
||||
|
||||
const resetTemp = function () {
|
||||
let obj = {}
|
||||
headerList.value.forEach(item => {
|
||||
@ -191,39 +140,30 @@ const resetTemp = function () {
|
||||
Object.assign(temp, obj)
|
||||
}
|
||||
const handleCreate = async function () {
|
||||
// 弹出添加框
|
||||
resetTemp()
|
||||
dialogStatus.value = 'create'
|
||||
dialogStatus.value = 0
|
||||
dialogFormVisible.value = true
|
||||
await nextTick()
|
||||
dataForm.value.clearValidate()
|
||||
dataFormRef.value.clearValidate()
|
||||
}
|
||||
const createData = function () {
|
||||
// 保存提交
|
||||
dataForm.value.validate(() => {
|
||||
dataFormRef.value.validate(() => {
|
||||
{TableName}s.add(temp).then(() => {
|
||||
list.value.unshift(temp)
|
||||
dialogFormVisible.value = false
|
||||
ElNotification({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
type: 'success',
|
||||
duration: 2000,
|
||||
})
|
||||
ElNotification.success('创建成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
const handleUpdate = async function (row) {
|
||||
// 弹出编辑框
|
||||
Object.assign(temp, row) //必需这样赋值才能响应式
|
||||
dialogStatus.value = 'update'
|
||||
dialogStatus.value = 1
|
||||
dialogFormVisible.value = true
|
||||
await nextTick()
|
||||
dataForm.value.clearValidate()
|
||||
dataFormRef.value.clearValidate()
|
||||
}
|
||||
const updateData = function () {
|
||||
// 更新提交
|
||||
dataForm.value.validate(() => {
|
||||
dataFormRef.value.validate(() => {
|
||||
const tempData = Object.assign({}, temp)
|
||||
{TableName}s.update(tempData).then(() => {
|
||||
for (const v of list.value) {
|
||||
@ -234,17 +174,11 @@ const updateData = function () {
|
||||
}
|
||||
}
|
||||
dialogFormVisible.value = false
|
||||
ElNotification({
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
duration: 2000,
|
||||
})
|
||||
ElNotification.success('更新成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
const handleDelete = function (rows) {
|
||||
// 多行删除
|
||||
delrows({TableName}s, rows)
|
||||
delrows({TableName}s, rows, getList)
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user