优化一波生成,加载组件等

This commit is contained in:
吕金泽
2022-03-30 23:54:24 +08:00
parent 2e19ca3493
commit b91328dcc7
35 changed files with 460 additions and 547 deletions
@@ -1,10 +1,10 @@
{
"properties" : { },
"id" : "9bf92d503f4242d39a0f271c577aa3ac",
"name" : "系统管理",
"id" : "55ff62aa20144b7bb5c6dfb5d76c8139",
"name" : "数据管理",
"type" : "component",
"parentId" : "0",
"path" : "sys",
"path" : "/data",
"paths" : [ ],
"options" : [ ]
}
@@ -0,0 +1,10 @@
{
"properties" : { },
"id" : "eb5dbed949de4f50ba4bf59f483252a5",
"name" : "测试生成",
"type" : "component",
"parentId" : "55ff62aa20144b7bb5c6dfb5d76c8139",
"path" : "/test",
"paths" : [ ],
"options" : [ ]
}
@@ -0,0 +1,156 @@
{
"properties" : { },
"id" : "f4ebe91beaef452498879a98556481eb",
"script" : null,
"groupId" : "eb5dbed949de4f50ba4bf59f483252a5",
"name" : "列表",
"createTime" : 1648655132940,
"updateTime" : null,
"lock" : null,
"createBy" : null,
"updateBy" : null,
"path" : "/list",
"description" : null
}
================================
<template>
<mb-list ref="magicList" v-bind="listOptions" />
<mb-dialog ref="formDialog" :title="magicFormTitle" @confirm-click="magicForm.save($event)" width="50%">
<template #content>
<mb-form ref="magicForm" @reload="magicList.reload" v-bind="formOptions" />
</template>
</mb-dialog>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue'
const { proxy } = getCurrentInstance()
const formDialog = ref()
const magicList = ref()
const magicForm = ref()
const magicFormTitle = ref()
const listOptions = reactive({
tools: [{
type: 'add',
permission: 'data:test:save',
click: () => {
magicFormTitle.value = '添加'
formDialog.value.show()
}
}],
table: {
url: '/data/test/list',
where: {
name: {
label: '名字'
},
sex: {
label: '性别'
},
headPortrait: {
label: '头像'
},
remarks: {
label: '备注'
}
},
cols: [
{
field: 'name',
label: '名字'
},
{
dictType: 'sex',
field: 'sex',
label: '性别'
},
{
field: 'headPortrait',
label: '头像'
},
{
field: 'remarks',
label: '备注'
},{
label: '操作',
type: 'btns',
width: 140,
fixed: 'right',
btns: [
{
permission: 'data:test:save',
label: '修改',
type: 'text',
icon: 'ElEdit',
click: (row) => {
magicFormTitle.value = '修改'
formDialog.value.show(() => magicForm.value.getDetail(row.id))
}
}, {
permission: 'data:test:delete',
label: '删除',
type: 'text',
icon: 'ElDelete',
click: (row) => {
proxy.$common.handleDelete({
url: '/data/test/delete',
id: row.id,
done: () => magicList.value.reload()
})
}
}
]
}
]
}
})
const formOptions = reactive({
detail: {
request: {
url: '/data/test/get'
}
},
form: {
request: {
url: "/data/test/save"
},
rows: [{
gutter: 24,
cols: [{
span: 12,
name: 'name',
label: '名字',
component: 'input',
},{
span: 12,
name: 'sex',
label: '性别',
component: 'radio-group',
props: {
type: 'sex'
}
},{
span: 12,
name: 'headPortrait',
label: '头像',
component: 'upload-image',
},{
span: 12,
name: 'remarks',
label: '备注',
component: 'input',
props: {
type: 'textarea'
}
,
}]
}]
}
})
</script>
@@ -1,10 +0,0 @@
{
"properties" : { },
"id" : "6bee7576eea04963a573b21bb657784d",
"name" : "字典管理",
"type" : "component",
"parentId" : "9bf92d503f4242d39a0f271c577aa3ac",
"path" : "dict",
"paths" : [ ],
"options" : [ ]
}
@@ -1,230 +0,0 @@
{
"properties" : { },
"id" : "995e2ee59d574429b8e3da3513c05a43",
"script" : null,
"groupId" : "6bee7576eea04963a573b21bb657784d",
"name" : "列表",
"createTime" : 1648017481335,
"updateTime" : 1648026074180,
"lock" : null,
"createBy" : null,
"updateBy" : null,
"path" : "list",
"description" : null
}
================================
<template>
<div class="app-container">
<mb-search :where="tableOptions.where" @search="reloadTable" />
<el-row class="toolbar-container">
<el-button v-permission="'dict:save'" class="filter-item" type="primary" icon="ElPlus" @click="handleCreate">
添加13asdf
</el-button>
</el-row>
<mb-table ref="table" v-bind="tableOptions" />
<mb-dialog ref="dictDialog" :title="dialogTitle" width="640px" @confirm-click="save($event)">
<template #content>
<el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="80px">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="字典类型" prop="dictType">
<mb-select v-model="temp.dictType" type="dict_type" width="185px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型" prop="type">
<el-input v-model="temp.type" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="排序" prop="sort">
<el-input v-model="temp.sort" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="描述" prop="descRibe">
<el-input v-model="temp.descRibe" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="备注" prop="remarks">
<el-input v-model="temp.remarks" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
</mb-dialog>
</div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue'
const { proxy } = getCurrentInstance()
const tableOptions = reactive({
url: 'dict/list',
page: true,
where: {
type: {
type: 'input',
label: '类型',
value: ''
},
dictType: {
type: 'select',
label: '字典类型',
value: '',
properties: {
'all-option': true,
type: 'dict_type'
}
}
},
cols: [
{
field: 'type',
label: '类型'
},
{
field: 'descRibe',
label: '描述'
},
{
field: 'dictType',
label: '字典类型',
width: 200,
dictType: 'dict_type'
},
{
field: 'remarks',
label: '备注',
width: 200
},
{
field: 'sort',
label: '排序',
width: 100
},
{
label: '操作',
type: 'btns',
width: 220,
fixed: 'right',
btns: [
{
permission: 'dict:save',
label: '修改',
type: 'text',
icon: 'ElEdit',
click: (row) => {
handleUpdate(row)
}
},
{
permission: 'dict:delete',
label: '删除',
type: 'text',
icon: 'ElDelete',
click: (row) => {
proxy.$common.handleDelete({
url: 'dict/delete',
id: row.id,
done: () => {
reloadTable()
proxy.$common.getDictData()
}
})
}
}
]
}
]
})
const dictId = ref('')
const temp = ref(getTemp())
const dialogTitle = ref('')
const rules = reactive({
dictType: [{ required: true, message: '请输入标签', trigger: 'change' }],
type: [{ required: true, message: '请输入类型', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'change' }],
descRibe: [{ required: true, message: '请输入描述', trigger: 'change' }]
})
const table = ref()
const dictDialog = ref()
const dataForm = ref()
function getTemp() {
return {
id: '',
dictType: '',
type: '',
sort: 0,
descRibe: '',
remarks: ''
}
}
function reloadTable() {
table.value.reload()
}
function getSort() {
proxy.$get('/system/dict/sort').then(res => {
temp.value.sort = res.data
})
}
function handleCreate() {
temp.value = getTemp()
getSort()
dialogTitle.value = '添加'
dictDialog.value.show()
nextTick(() => {
dataForm.value.clearValidate()
})
}
function save(d) {
dataForm.value.validate((valid) => {
if (valid) {
d.loading()
proxy.$post('/system/dict/save', temp.value).then((response) => {
d.hideLoading()
temp.value.id = response.data
dictDialog.value.hide()
proxy.$notify({
title: '成功',
message: dialogTitle.value + '成功',
type: 'success',
duration: 2000
})
reloadTable()
proxy.$common.getDictData()
}).catch(() => d.hideLoading())
}
})
}
function handleUpdate(row) {
proxy.$common.objAssign(temp.value, row)
dialogTitle.value = '修改'
dictDialog.value.show()
nextTick(() => {
dataForm.value.clearValidate()
})
}
</script>