zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重构部分页面的弹窗逻辑

This commit is contained in:
sc 2021-07-09 14:35:15 +08:00
parent 7c575c01cf
commit 4f547ab2f4
10 changed files with 282 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/setting/client/index.vue
View File

@ -32,7 +32,7 @@
</el-main>
</el-container>
<save-dialog ref="saveDialog"></save-dialog>
<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog>
</template>
@ -51,6 +51,7 @@
}
},
methods: {
//增加
add(){
this.$refs.saveDialog.show()
},
@ -93,6 +94,17 @@
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//本地更新数据
handleSuccess(data, mode){
if(mode=='add'){
data.id = new Date().getTime()
this.$refs.table.tableData.unshift(data)
}else if(mode=='edit'){
this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
Object.assign(item, data)
})
}
}
}
}

21
src/views/setting/client/save.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close>
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
<el-form-item label="应用标识" prop="appId">
<el-input v-model="form.appId" clearable></el-input>
</el-form-item>
@ -19,7 +19,7 @@
</el-checkbox-group>
</el-form-item>
<el-form-item label="授权至" prop="exp">
<el-date-picker v-model="form.exp" type="datetime" placeholder="选择日期时间"></el-date-picker>
<el-date-picker v-model="form.exp" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
@ -31,6 +31,7 @@
<script>
export default {
emits: ['success'],
data() {
return {
mode: "add",
@ -38,7 +39,6 @@
add: '新增APP',
edit: '编辑APP'
},
//表单数据
form: {
id:"",
appId: "",
@ -47,7 +47,6 @@
type: [],
exp: ""
},
//验证规则
rules: {
appId:[
{required: true, message: '请输入应用标识'}
@ -59,15 +58,14 @@
{required: true, message: '请输入秘钥'}
],
type:[
{required: true, message: '请选择类型范围'}
{required: true, message: '请选择类型范围', trigger: 'change'}
],
exp:[
{required: true, message: '请选择授权到期日期'}
{required: true, message: '请选择授权到期日期', trigger: 'change'}
]
},
visible: false,
isSaveing: false,
pData: {}
isSaveing: false
}
},
methods: {
@ -85,12 +83,8 @@
var res = await this.$API.user.save.post(this.form);
this.isSaveing = false;
if(res.code == 200){
this.$emit('success', this.form, this.mode)
this.visible = false;
if(this.mode == 'add'){
//
}else if(this.mode == 'edit'){
Object.assign(this.pData, this.form)
}
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
@ -100,7 +94,6 @@
},
//表单注入数据
setData(data){
this.pData = data
this.form.id = data.id
this.form.appId = data.appId
this.form.appName = data.appName

2
src/views/setting/log/index.vue
View File

@ -1,7 +1,7 @@
<template>
<el-container>
<el-aside width="220px">
<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false" @node-click="dicClick">
<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false">
</el-tree>
</el-aside>
<el-container>

104
src/views/setting/role/index.vue
View File

@ -35,21 +35,9 @@
</el-main>
</el-container>
<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="500" destroy-on-close>
<save-dialog ref="saveDialog" :mode="saveMode"></save-dialog>
<template #footer>
<el-button @click="saveDialogVisible=false" >取 消</el-button>
<el-button v-if="saveMode!='show'" type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
</template>
</el-dialog>
<save-dialog ref="saveDialog" @success="handleSaveSuccess"></save-dialog>
<el-dialog title="角色权限设置" v-model="permissionDialogVisible" :width="500" destroy-on-close>
<permission-dialog ref="permissionDialog"></permission-dialog>
<template #footer>
<el-button @click="permissionDialogVisible=false" >取 消</el-button>
<el-button type="primary" @click="savePermission()" :loading="isPermissionSaveing">保 存</el-button>
</template>
</el-dialog>
<permission-dialog ref="permissionDialog"></permission-dialog>
</template>
@ -69,45 +57,27 @@
selection: [],
search: {
keyword: null
},
saveDialogVisible: false,
saveMode: 'add',
titleMap: {
add: "新增",
edit: "编辑",
show: "查看"
},
isSaveing: false,
//权限
permissionDialogVisible: false,
isPermissionSaveing: false
}
}
},
methods: {
//添加
add(){
this.saveMode = 'add';
this.saveDialogVisible = true;
this.$refs.saveDialog.show()
},
//编辑
table_edit(row){
this.saveMode = 'edit';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
this.$refs.saveDialog.show('edit')
this.$refs.saveDialog.setData(row)
},
//查看
table_show(row){
this.saveMode = 'show';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
this.$refs.saveDialog.show('show')
this.$refs.saveDialog.setData(row)
},
//权限设置
permission(){
this.$refs.permissionDialog.show()
},
//删除
async table_del(row, index){
@ -140,36 +110,40 @@
})
},
//提交
saveForm(){
this.$refs.saveDialog.submit(async (formData) => {
this.isSaveing = true;
var res = await this.$API.user.save.post(formData);
this.isSaveing = false;
if(res.code == 200){
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
this.saveDialogVisible = false;
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
})
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//权限设置
permission(){
this.permissionDialogVisible = true;
},
savePermission(){
this.$message.success("操作成功")
this.permissionDialogVisible = false;
},
//搜索
upsearch(){
},
//根据ID获取树结构
filterTree(id){
var target = null;
function filter(tree){
tree.forEach(item => {
if(item.id == id){
target = item
}
if(item.children){
filter(item.children)
}
})
}
filter(this.$refs.table.tableData)
return target
},
//本地更新数据
handleSaveSuccess(data, mode){
//这里新增或编辑后本地改变了值，当然也可以暴力直接刷新表格
//this.$refs.table.tableData.refresh()
if(mode=='add'){
data.id = new Date().getTime()
this.$refs.table.tableData.unshift(data)
}else if(mode=='edit'){
Object.assign(this.filterTree(data.id), data)
}
}
}
}

84
src/views/setting/role/permission.vue
View File

@ -1,40 +1,49 @@
<template>
<el-tabs tab-position="top">
<el-tab-pane label="菜单权限">
<div class="treeMain">
<el-tree ref="menu" node-key="name" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="部门权限">
<div class="treeMain">
<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="类型权限">
<div class="treeMain">
<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="控制台">
<el-form label-width="100px" label-position="left">
<el-form-item label="控制台视图">
<el-select v-model="dashboard" placeholder="请选择">
<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
</el-option>
</el-select>
<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close>
<el-tabs tab-position="top">
<el-tab-pane label="菜单权限">
<div class="treeMain">
<el-tree ref="menu" node-key="name" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="部门权限">
<div class="treeMain">
<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="类型权限">
<div class="treeMain">
<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="控制台">
<el-form label-width="100px" label-position="left">
<el-form-item label="控制台视图">
<el-select v-model="dashboard" placeholder="请选择">
<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
</el-option>
</el-select>
<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<template #footer>
<el-button @click="visible=false" >取 消</el-button>
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
emits: ['success'],
data() {
return {
visible: false,
isSaveing: false,
menu: {
list: [],
checked: ["test", "system", "user", "role"],
@ -60,7 +69,7 @@
value: '0',
label: '数据统计',
views: 'stats'
},
{
value: '1',
@ -76,6 +85,19 @@
this.getType();
},
methods: {
show(){
this.visible = true;
this.form = this.$options.data().form
},
submit(){
this.isSaveing = true;
setTimeout(()=>{
this.isSaveing = false;
this.visible = false;
this.$message.success("操作成功")
this.$emit('success')
},1000)
},
async getMenu(){
var res = await this.$API.menu.list.get();
this.menu.list = res.data;

95
src/views/setting/role/save.vue
View File

@ -1,39 +1,51 @@
<template>
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上级角色" prop="parentId">
<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable></el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="角色名称" prop="label">
<el-input v-model="form.label" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="角色别名" prop="alias">
<el-input v-model="form.alias" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close>
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上级角色" prop="parentId">
<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable></el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="角色名称" prop="label">
<el-input v-model="form.label" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="角色别名" prop="alias">
<el-input v-model="form.alias" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="visible=false" >取 消</el-button>
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
props: {
mode: { type: String, default: "add" }
},
emits: ['success'],
data() {
return {
mode: "add",
titleMap: {
add: '新增',
edit: '编辑',
show: '查看'
},
visible: false,
isSaveing: false,
//表单数据
form: {
id:"",
@ -44,7 +56,7 @@
//验证规则
rules: {
sort: [
{required: true, message: '请输入排序'}
{required: true, message: '请输入排序', trigger: 'change'}
],
label: [
{required: true, message: '请输入角色名称'}
@ -65,18 +77,31 @@
this.getGroup()
},
methods: {
//显示
show(mode='add'){
this.mode = mode;
this.visible = true;
this.form = this.$options.data().form
},
//加载树数据
async getGroup(){
var res = await this.$API.role.select.get();
this.groups = res.data;
},
//表单提交方法
submit(callback){
this.$refs.dialogForm.validate((valid) => {
submit(){
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
callback(this.form)
}else{
return false;
this.isSaveing = true;
var res = await this.$API.user.save.post(this.form);
this.isSaveing = false;
if(res.code == 200){
this.$emit('success', this.form, this.mode)
this.visible = false;
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
}
})
},

13
src/views/setting/task/index.vue
View File

@ -57,7 +57,7 @@
</el-row>
</el-main>
<save-dialog ref="saveDialog"></save-dialog>
<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog>
<el-drawer title="计划任务日志" v-model="logsVisible" :size="600" direction="rtl" destroy-on-close>
<logs></logs>
@ -134,6 +134,17 @@
},
run(task){
this.$message.success(`已成功执行计划任务：${task.title}`)
},
//本地更新数据
handleSuccess(data, mode){
if(mode=='add'){
data.id = new Date().getTime()
this.list.push(data)
}else if(mode=='edit'){
this.list.filter(item => item.id===data.id ).forEach(item => {
Object.assign(item, data)
})
}
}
}
}

12
src/views/setting/task/save.vue
View File

@ -32,7 +32,7 @@
<script>
export default {
inject: ['list'],
emits: ['success'],
data() {
return {
mode: "add",
@ -81,15 +81,7 @@
this.isSaveing = false;
this.visible = false;
this.$message.success("操作成功")
if(this.mode == 'add'){
var newItem = {...this.form}
newItem.id = new Date().getTime()
this.list.push(newItem)
}else if(this.mode == 'edit'){
this.list.filter(item => item.id===this.form.id ).forEach(item => {
Object.assign(item, this.form)
})
}
this.$emit('success', this.form, this.mode)
},1000)
}
})

62
src/views/setting/user/index.vue
View File

@ -55,13 +55,7 @@
</el-container>
</el-container>
<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="500" destroy-on-close>
<save-dialog ref="saveDialog" :mode="saveMode"></save-dialog>
<template #footer>
<el-button @click="saveDialogVisible=false" >取 消</el-button>
<el-button v-if="saveMode!='show'" type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
</template>
</el-dialog>
<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog>
</template>
@ -75,14 +69,6 @@
},
data() {
return {
saveDialogVisible: false,
saveMode: 'add',
titleMap: {
add: "新增",
edit: "编辑",
show: "查看"
},
isSaveing: false,
showGrouploading: false,
groupFilterText: '',
group: [],
@ -104,27 +90,17 @@
methods: {
//添加
add(){
this.saveMode = 'add';
this.saveDialogVisible = true;
this.$refs.saveDialog.show()
},
//编辑
table_edit(row){
this.saveMode = 'edit';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
this.$refs.saveDialog.show('edit')
this.$refs.saveDialog.setData(row)
},
//查看
table_show(row){
this.saveMode = 'show';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
this.$refs.saveDialog.show('show')
this.$refs.saveDialog.setData(row)
},
//删除
async table_del(row, index){
@ -157,21 +133,6 @@
})
},
//提交
saveForm(){
this.$refs.saveDialog.submit(async (formData) => {
this.isSaveing = true;
var res = await this.$API.user.save.post(formData);
this.isSaveing = false;
if(res.code == 200){
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
this.saveDialogVisible = false;
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
})
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
@ -199,6 +160,17 @@
//搜索
upsearch(){
},
//本地更新数据
handleSuccess(data, mode){
if(mode=='add'){
data.id = new Date().getTime()
this.$refs.table.tableData.unshift(data)
}else if(mode=='edit'){
this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
Object.assign(item, data)
})
}
}
}
}

132
src/views/setting/user/save.vue
View File

@ -1,55 +1,65 @@
<template>
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="头像" prop="avatar">
<sc-upload v-model="form.avatar" title="上传头像" :action="uploadUrl"></sc-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" clearable></el-input>
<div v-if="mode=='edit'" class="el-form-item-msg">如不修改密码，可为空</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码" prop="password2">
<el-input v-model="form.password2" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属角色" prop="group">
<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable></el-cascader>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close>
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="头像" prop="avatar">
<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入完整的真实姓名" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" v-if="mode=='add'">
<el-col :span="12">
<el-form-item label="登录密码" prop="password">
<el-input type="password" v-model="form.password" clearable show-password></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码" prop="password2">
<el-input type="password" v-model="form.password2" clearable show-password></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="所属角色" prop="group">
<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="visible=false" >取 消</el-button>
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
props: {
mode: { type: String, default: "add" }
},
emits: ['success'],
data() {
return {
uploadUrl: this.$API.demo.upload.url,
mode: "add",
titleMap: {
add: '新增用户',
edit: '编辑用户',
show: '查看'
},
visible: false,
isSaveing: false,
//表单数据
form: {
id:"",
@ -71,17 +81,20 @@
],
password: [
{required: true, message: '请输入登录密码'},
{validator: () => {
{validator: (rule, value, callback) => {
if (this.form.password2 !== '') {
this.$refs.dialogForm.validateField('password2');
}
callback();
}}
],
password2: [
{required: true, message: '请再次输入密码'},
{validator: (value, callback) => {
{validator: (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
}else{
callback();
}
}}
],
@ -99,23 +112,34 @@
}
},
mounted() {
if(this.mode != 'add'){
this.rules.password = []
this.rules.password2 = []
}
this.getGroup()
},
methods: {
//显示
show(mode='add'){
this.mode = mode;
this.visible = true;
this.form = this.$options.data().form
},
//加载树数据
async getGroup(){
var res = await this.$API.role.select.get();
this.groups = res.data;
},
//表单提交方法
submit(callback){
this.$refs.dialogForm.validate((valid) => {
submit(){
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
callback(this.form)
this.isSaveing = true;
var res = await this.$API.user.save.post(this.form);
this.isSaveing = false;
if(res.code == 200){
this.$emit('success', this.form, this.mode)
this.visible = false;
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
}else{
return false;
}