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

UP

This commit is contained in:
sc 2021-05-14 15:57:58 +08:00
parent a7a71595f1
commit 741a54b6a5
11 changed files with 613 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/json/dic_info.json Normal file
View File

@ -0,0 +1,43 @@
{
"code": 200,
"count": 4,
"data": [
{
"id": "100",
"key": "1",
"name": "发布通知",
"yx": 1
},
{
"id": "101",
"key": "2",
"name": "批转通知",
"yx": 1
},
{
"id": "102",
"key": "3",
"name": "转发通知",
"yx": 1
},
{
"id": "103",
"key": "4",
"name": "指示通知",
"yx": 0
},
{
"id": "104",
"key": "5",
"name": "任免通知",
"yx": 0
},
{
"id": "105",
"key": "6",
"name": "事务通知",
"yx": 1
}
],
"message": ""
}

39
public/json/dic_list.json Normal file
View File

@ -0,0 +1,39 @@
{
"code": 200,
"count": 4,
"data": [
{
"id": "1",
"code": "notice",
"name": "通知类型"
},
{
"id": "2",
"code": "sex",
"name": "性别"
},
{
"id": "3",
"code": "menuCategory",
"name": "菜单类型"
},
{
"id": "4",
"code": "userType",
"name": "用户类型",
"children": [
{
"id": "41",
"code": "userTypePC",
"name": "Desktop"
},
{
"id": "42",
"code": "userTypeAPP",
"name": "Mobile"
}
]
}
],
"message": ""
}

16
public/json/login.json
View File

@ -199,14 +199,6 @@
},
"component": "setting/role"
},
{
"path": "/setting/menu",
"name": "menu",
"meta": {
"title": "菜单管理"
},
"component": "setting/menu"
},
{
"path": "/setting/dic",
"name": "dic",
@ -215,6 +207,14 @@
},
"component": "setting/dic"
},
{
"path": "/setting/menu",
"name": "menu",
"meta": {
"title": "菜单管理"
},
"component": "setting/menu"
},
{
"path": "/setting/client",
"name": "client",

16
src/api/index.js
View File

@ -56,6 +56,22 @@ const api = {
}
}
},
dic: {
list: {
url: `${config.API_URL}/json/dic_list.json`,
name: "字典列表",
get: async function(){
return await http.get(this.url);
}
},
info: {
url: `${config.API_URL}/json/dic_info.json`,
name: "字典明细",
get: async function(params){
return await http.get(this.url, params);
}
}
},
demo: {
select: {
url: `${config.API_URL}/json/select.json`,

15
src/components/scTable/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="scTable" ref="scTableMain" v-loading="loading">
<div class="scTable-table">
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" stripe @selection-change="selectionChange">
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange">
<slot></slot>
<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
<template #default="scope">
@ -19,8 +19,8 @@
</el-table>
</div>
<div class="scTable-page">
<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
<div class="scTable-do">
<el-pagination background :small="true" :layout="paginationLayout" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
<div class="scTable-do" v-if="!hideDo">
<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
<el-popover placement="top" title="设置" :width="500" trigger="click">
<template #reference>
@ -45,7 +45,11 @@
apiObj: { type: Object, default: () => {} },
data: { type: Object, default: () => {} },
rowKey: { type: String, default: "" },
column: { type: Object, default: () => {} }
column: { type: Object, default: () => {} },
hideDo: { type: Boolean, default: false },
stripe: { type: Boolean, default: false },
highlightCurrentRow: { type: Boolean, default: false },
paginationLayout: { type: String, default: "total, prev, pager, next, jumper" },
},
watch: {
//监听从props里拿到值了
@ -134,6 +138,9 @@
//转发原装方法&事件
selectionChange(selection){
this.$emit('selection-change', selection)
},
currentChange(selection){
this.$emit('current-change', selection)
}
}
}

1
src/style/fix.less
View File

@ -16,3 +16,4 @@
.el-popconfirm__main {margin: 14px 0;}
.el-card__header {border-bottom: 0}
.el-tree-node__content {height:36px;}
.el-input-number__decrease, .el-input-number__increase {top:2px;}

88
src/views/setting/dic/dic.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="编码" prop="code">
<el-input v-model="form.code" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<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-col :span="12">
<el-form-item label="上级字典" prop="parentId">
<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
props: {
mode: { type: String, default: "add" }
},
data() {
return {
form: {
id:"",
name: "",
code: "",
parentId: ""
},
rules: {
code: [
{required: true, message: '请输入编码'}
],
name: [
{required: true, message: '请输入字典名称'}
]
},
dic: [],
dicProps: {
value: "id",
label: "name",
checkStrictly: true
}
}
},
mounted() {
this.getDic()
},
methods: {
//获取字典列表
async getDic(){
var res = await this.$API.dic.list.get();
this.dic = res.data;
},
//表单提交方法
submit(callback){
this.$refs.dialogForm.validate((valid) => {
if (valid) {
callback(this.form)
}else{
return false;
}
})
},
//表单注入数据
setData(data){
this.form.id = data.id
this.form.name = data.name
this.form.code = data.code
this.form.parentId = data.parentId
//可以和上面一样单个注入，也可以像下面一样直接合并进去
//Object.assign(this.form, data)
}
}
}
</script>
<style>
</style>

186
src/views/setting/dic/index.vue Normal file
View File

@ -0,0 +1,186 @@
<template>
<el-container>
<el-aside width="300px" v-loading="showDicloading">
<el-container>
<el-header>
<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
</el-header>
<el-main class="nopadding">
<el-tree ref="dic" node-key="id" :data="dicList" :props="dicProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
<template #default="{node, data}">
<span class="custom-tree-node">
<span class="label">{{ node.label }}</span>
<span class="code">{{ data.code }}</span>
<span class="do">
<i class="el-icon-edit" @click.stop="dicEdit(data)"></i>
<i class="el-icon-delete" @click.stop="dicDel(node, data)"></i>
</span>
</span>
</template>
</el-tree>
</el-main>
<el-footer style="height:51px;">
<el-button type="primary" size="mini" icon="el-icon-plus" style="width: 100%;" @click="addDic">字典分类</el-button>
</el-footer>
</el-container>
</el-aside>
<el-container class="is-vertical">
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus"></el-button>
<el-button type="danger" plain icon="el-icon-delete" disabled></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="listApi" stripe :paginationLayout="'prev, pager, next'">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="名称" prop="name" width="150"></el-table-column>
<el-table-column label="键值" prop="key" width="150"></el-table-column>
<el-table-column label="是否有效" prop="yx" width="100">
<template #default="scope">
<i v-if="scope.row.yx==1" class="el-icon-success" style="color: #67C23A;"></i>
<i v-if="scope.row.yx==0" class="el-icon-remove" style="color: #DCDFE6;"></i>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-container>
<el-dialog :title="titleMap[dicMode]" v-model="dicDialogVisible" :width="600" destroy-on-close>
<dic-dialog ref="dicDialog" :mode="dicMode"></dic-dialog>
<template #footer>
<el-button @click="dicDialogVisible=false" >取 消</el-button>
<el-button type="primary" @click="saveDic()" :loading="isDicSaveing">保 存</el-button>
</template>
</el-dialog>
</template>
<script>
import dicDialog from './dic'
export default {
name: 'dic',
components: {
dicDialog
},
data() {
return {
showDicloading: true,
dicDialogVisible: false,
isDicSaveing: false,
dicMode: 'add',
titleMap: {
add: "新增",
edit: "编辑",
show: "查看"
},
dicList: [],
dicFilterText: '',
dicProps: {
label: 'name'
},
nowDic: null,
listApi: this.$API.dic.info,
}
},
watch: {
dicFilterText(val) {
this.$refs.dic.filter(val);
}
},
mounted() {
this.getDic()
},
methods: {
//加载树数据
async getDic(){
var res = await this.$API.dic.list.get();
this.showDicloading = false;
this.dicList = res.data;
},
//树过滤
dicFilterNode(value, data){
if (!value) return true;
var targetText = data.name + data.code;
return targetText.indexOf(value) !== -1;
},
//树增加
addDic(){
this.dicMode = 'add';
this.dicDialogVisible = true;
},
//编辑树
dicEdit(data){
this.dicMode = 'edit';
this.dicDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.dicDialog.setData(data)
})
},
saveDic(){
this.$refs.dicDialog.submit(async (formData) => {
this.isDicSaveing = true;
var res = await this.$API.user.save.post(formData);
this.isDicSaveing = false;
if(res.code == 200){
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
if(this.dicMode == 'add'){
var demoID = (Math.random() * (500 - 400 + 1) | 0) + 400;
formData.id = demoID;
this.dicList.push(formData);
}
if(this.dicMode == 'edit'){
//
}
this.dicDialogVisible = false;
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
})
},
//树点击事件
dicClick(data){
this.nowDic = data;
var params = {
code: data.code
}
this.$refs.table.upData(params)
},
//删除树
dicDel(node, data){
this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
type: 'warning'
}).then(() => {
this.showDicloading = true;
//这里应该改为异步请求接口
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
this.dicList = [...this.dicList]
this.showDicloading = false;
this.$message.success("操作成功")
}).catch(() => {
})
}
}
}
</script>
<style scoped>
.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
.custom-tree-node .code {font-size: 12px;color: #409eff;background: #ecf5ff;padding: 2px 5px;border-radius: 3px;}
.custom-tree-node .do {display: none;}
.custom-tree-node .do i {margin-left:5px;color: #999;padding:5px;}
.custom-tree-node .do i:hover {color: #333;}
.custom-tree-node:hover .code {display: none;}
.custom-tree-node:hover .do {display: inline-block;}
</style>

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

@ -2,8 +2,8 @@
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
<el-button type="primary" plain :disabled="selection.length==0">权限设置</el-button>
</div>
<div class="right-panel">
@ -15,33 +15,44 @@
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="角色名称" prop="label" width="250"></el-table-column>
<el-table-column label="别名" prop="alias" width="150"></el-table-column>
<el-table-column label="排序" prop="progress" width="150"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="140">
<template #default="scope">
<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
<template #reference>
<el-button type="text" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="600" 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>
</template>
<script>
import saveDialog from './save'
export default {
name: 'role',
components: {
saveDialog
},
data() {
return {
apiObj: this.$API.role.list,
@ -49,10 +60,88 @@
search: {
keyword: null
},
saveDialogVisible: false,
saveMode: 'add',
titleMap: {
add: "新增",
edit: "编辑",
show: "查看"
},
isSaveing: false,
}
},
methods: {
//添加
add(){
this.saveMode = 'add';
this.saveDialogVisible = true;
},
//编辑
table_edit(row){
this.saveMode = 'edit';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
},
//查看
table_show(row){
this.saveMode = 'show';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
},
//删除
async table_del(row, index){
var reqData = {id: row.id}
var res = await this.$API.user.del.post(reqData);
if(res.code == 200){
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
this.$refs.table.tableData.splice(index, 1);
this.$message.success("删除成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
},
//批量删除
async batch_del(){
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
type: 'warning'
}).then(() => {
const loading = this.$loading();
this.selection.forEach(item => {
this.$refs.table.tableData.forEach((itemI, indexI) => {
if (item.id === itemI.id) {
this.$refs.table.tableData.splice(indexI, 1)
}
})
})
loading.close();
this.$message.success("操作成功")
}).catch(() => {
})
},
//提交
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;

99
src/views/setting/role/save.vue Normal file
View File

@ -0,0 +1,99 @@
<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>
<div class="el-form-item-msg">如不选择任意上级，系统默认为最顶级角色</div>
</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>
<script>
export default {
props: {
mode: { type: String, default: "add" }
},
data() {
return {
//表单数据
form: {
id:"",
label: "",
alias: "",
parentId: ""
},
//验证规则
rules: {
sort: [
{required: true, message: '请输入排序'}
],
label: [
{required: true, message: '请输入角色名称'}
],
alias: [
{required: true, message: '请输入角色别名'}
]
},
//所需数据选项
groups: [],
groupsProps: {
value: "id",
checkStrictly: true
}
}
},
mounted() {
this.getGroup()
},
methods: {
//加载树数据
async getGroup(){
var res = await this.$API.role.select.get();
this.groups = res.data;
},
//表单提交方法
submit(callback){
this.$refs.dialogForm.validate((valid) => {
if (valid) {
callback(this.form)
}else{
return false;
}
})
},
//表单注入数据
setData(data){
this.form.id = data.id
this.form.label = data.label
this.form.alias = data.alias
this.form.parentId = data.parentId
//可以和上面一样单个注入，也可以像下面一样直接合并进去
//Object.assign(this.form, data)
}
}
}
</script>
<style>
</style>

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

@ -14,7 +14,7 @@
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
<el-button type="primary" plain :disabled="selection.length==0">分配角色</el-button>
<el-button type="primary" plain :disabled="selection.length==0">密码重置</el-button>
</div>
@ -26,7 +26,7 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="ID" prop="id" width="50"></el-table-column>
<el-table-column label="登录账号" prop="userName" width="150"></el-table-column>
@ -133,6 +133,25 @@
this.$alert(res.message, "提示", {type: 'error'})
}
},
//批量删除
async batch_del(){
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
type: 'warning'
}).then(() => {
const loading = this.$loading();
this.selection.forEach(item => {
this.$refs.table.tableData.forEach((itemI, indexI) => {
if (item.id === itemI.id) {
this.$refs.table.tableData.splice(indexI, 1)
}
})
})
loading.close();
this.$message.success("操作成功")
}).catch(() => {
})
},
//提交
saveForm(){
this.$refs.saveDialog.submit(async (formData) => {