FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

需修改表单分页，图标样式

Browse Source
This commit is contained in:
shenyanpei
2021-10-14 15:33:44 +08:00
parent 9af1f4320b
commit 33d711071c
2 changed files with 170 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/navMenu/index.vue
+14 -11
View File
@@ -8,8 +8,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="toggle-btn iconfont" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar"> <div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
<div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div>&#xe647;</div> <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>
<div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
<div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div></div>
<div class="left-tree"> <div class="left-tree">
<el-menu <el-menu
unique-opened unique-opened
@@ -54,13 +56,13 @@
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
<el-menu-item <el-menu-item
:key="index" :key="index"
:index="item.path" :index="item.path"
v-if="item.isChildren && (!item.menuId || $hasPermission(item.menuId))" v-if="item.isChildren && (!item.menuId || $hasPermission(item.menuId))"
> >
<i class="shangqi-icon" :class="item['icon-class']"></i> <i class="shangqi-icon" :class="item['icon-class']"></i>
<span slot="title">{{ item.title }}</span> <span slot="title">{{ item.title }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</el-menu> </el-menu>
</div> </div>
@@ -463,7 +465,7 @@
}, },
computed: { computed: {
logo () { logo () {
return this.isCollapse ? require('assets/images/shangqi/img/logo4.png') : require('assets/images/shangqi/img/logo5.png') return this.isCollapse ? require('assets/images/shangqi/img/logo4.png') : require('assets/images/shangqi/img/logo2.png')
}, },
...mapGetters(['getDynamicTotal', 'isCollapse']) ...mapGetters(['getDynamicTotal', 'isCollapse'])
}, },
@@ -509,7 +511,7 @@
text-align: left; text-align: left;
img { img {
width: 115px; width: 115px;
height: 40px; height: 45px;
} }
} }
} }
@@ -557,6 +559,7 @@
color: #5ea9f6 !important; color: #5ea9f6 !important;
font-weight: bold; font-weight: bold;
} }
.el-menu-item { .el-menu-item {
padding: 0 16px !important; padding: 0 16px !important;
span { span {
src/pages/config/pages/mechanismManage/index.vue
+156 -78
View File
@@ -66,9 +66,9 @@
:header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px', :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
fontWeight: 'bold', height: '48px'}"> fontWeight: 'bold', height: '48px'}">
<el-table-column <el-table-column
prop="account" prop="account"
label="账号" label="账号"
width="100px"> width="100px">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="uname" prop="uname"
@@ -98,15 +98,15 @@
prop="institutionName" prop="institutionName"
label="所属部门"> label="所属部门">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover trigger="hover" placement="top"> <el-popover trigger="hover" placement="top">
{{scope.row.institutionName}} {{ scope.row.institutionName }}
<div slot="reference" class="name-wrapper"> <div slot="reference" class="name-wrapper">
<p v-if="!scope.row.institutionName || scope.row.institutionName.length<15"> <p v-if="!scope.row.institutionName || scope.row.institutionName.length<15">
{{scope.row.institutionName}} {{ scope.row.institutionName }}
</p> </p>
<p v-else> {{scope.row.institutionName.substring(0,15)}}...</p> <p v-else> {{ scope.row.institutionName.substring(0, 15) }}...</p>
</div> </div>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@@ -114,12 +114,12 @@
label="所属岗位"> label="所属岗位">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover trigger="hover" placement="top"> <el-popover trigger="hover" placement="top">
{{scope.row.NameList}} {{ scope.row.NameList }}
<div slot="reference" class="name-wrapper"> <div slot="reference" class="name-wrapper">
<p v-if="!scope.row.institutionName ||scope.row.NameList.length<15"> <p v-if="!scope.row.institutionName ||scope.row.NameList.length<15">
{{scope.row.NameList}} {{ scope.row.NameList }}
</p> </p>
<p v-else> {{scope.row.NameList.substring(0,15)}}...</p> <p v-else> {{ scope.row.NameList.substring(0, 15) }}...</p>
</div> </div>
</el-popover> </el-popover>
</template> </template>
@@ -140,9 +140,15 @@
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<i class="iconfont">&#xe61e;</i> <i class="iconfont">&#xe61e;</i>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '1'" :command="[scope.row, '启用']">启用</el-dropdown-item> <el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '1'" :command="[scope.row, '启用']">
<el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '0'" :command="[scope.row, '禁用']">禁用</el-dropdown-item> 启用
<el-dropdown-item v-btn-permission="'ce2d2b9bb8004e0d9efcabc42a9f354d'" :command="[scope.row, '配置岗位']">配置岗位</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '0'" :command="[scope.row, '禁用']">
禁用
</el-dropdown-item>
<el-dropdown-item v-btn-permission="'ce2d2b9bb8004e0d9efcabc42a9f354d'" :command="[scope.row, '配置岗位']">
配置岗位
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
@@ -155,35 +161,57 @@
</div> </div>
<loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading> <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
<el-drawer <el-drawer
title="配置岗位" class="postPage"
:visible.sync="modalPost" title="配置岗位"
:wrapperClosable="false" :visible.sync="modalPost"
size="800px" :wrapperClosable="false"
@close="resetFormPost" size="800px"
@close="resetFormPost"
> >
<el-form ref="" :model="sarPost" inline>
<el-form-item class="search-item" style="padding-left: 25px">
<el-input v-model="sarPost.name"
size="small"
placeholder="岗位名称查找"
clearable></el-input>
</el-form-item>
<el-form-item label="" class="search-item btn-box">
<el-button class="common-button-primary" type="primary" size="mini" @click="searchPostName"
v-btn-permission="">查询
</el-button>
</el-form-item>
<el-form-item label="" class="search-item btn-box">
<el-button class="common-button-default" @click="resetSelect" size="mini"
v-btn-permission="">清空
</el-button>
</el-form-item>
</el-form>
<el-tree <el-tree
ref="tree2" ref="tree2"
node-key="id" node-key="id"
class="filter-tree" class="filter-tree"
style="height: 100%; overflow: auto;" style="height: 100%; overflow: auto;"
v-if="modalPost" v-if="modalPost"
:props="props" :props="props"
:data="postList" :data="postList"
:default-checked-keys="nodeList" :filter-node-method="filterNode"
highlight-current :default-checked-keys="nodeList"
check-strictly highlight-current
default-expand-all check-strictly
:expand-on-click-node="false" default-expand-all
show-checkbox> :expand-on-click-node="false"
show-checkbox>
</el-tree> </el-tree>
<pagination :page="page" :pageSize="pageSize" :total="total2" @pageChange="pageChange2" @pageSizeChange="pageSizeChange2"></pagination>
<div id="roleFormButton" class="demo-drawer-footer"> <div id="roleFormButton" class="demo-drawer-footer">
<el-button <el-button
size="mini" size="mini"
class="common-button-primary" class="common-button-primary"
icon="el-icon-check" icon="el-icon-check"
type="primary" type="primary"
@click="PostSubmit" @click="PostSubmit"
>确定</el-button> >确定
</el-button>
<el-button size="mini" class="common-button-default" icon="el-icon-close" @click="resetFormPost">取消</el-button> <el-button size="mini" class="common-button-default" icon="el-icon-close" @click="resetFormPost">取消</el-button>
</div> </div>
</el-drawer> </el-drawer>
@@ -193,12 +221,12 @@
<script> <script>
export default { export default {
name: 'MechanismManage', name: 'MechanismManage',
data () { data() {
return { return {
nodeKeyId:'', nodeKeyId: '',
searchForm: { searchForm: {
uname:"", uname: "",
email:"" email: ""
}, },
userId: '', userId: '',
postList: [], postList: [],
@@ -208,6 +236,9 @@ export default {
}, },
nodeList: [], nodeList: [],
modalPost: false, modalPost: false,
sarPost: {
name: "", // 岗位名称
},
filterText: '', // 树结构检索条件 filterText: '', // 树结构检索条件
defaultProps: { defaultProps: {
children: 'children', children: 'children',
@@ -216,6 +247,7 @@ export default {
treeData: [], // 树结构数据 treeData: [], // 树结构数据
page: 1, page: 1,
total: 0, total: 0,
total2: 0,
pageSize: this.$store.getters.userInfo.configContent, pageSize: this.$store.getters.userInfo.configContent,
sideClose: false, sideClose: false,
data: [], // table数据 data: [], // table数据
@@ -233,22 +265,31 @@ export default {
this.page = 1 this.page = 1
this.getData() this.getData()
}, },
resetFormPost () { resetFormPost() {
this.modalPost= false this.modalPost = false
}, },
PostSubmit () { PostSubmit() {
this.$http.postData('sarUser/user/position', { this.$http.postData('sarUser/user/position', {
positionIds: this.$refs.tree2.getCheckedKeys(), positionIds: this.$refs.tree2.getCheckedKeys(),
userId: this.userId userId: this.userId
}, {}, res => { }, {}, res => {
if (res.ok) { if (res.ok) {
this.$message.success('配置岗位成功') this.$message.success('配置岗位成功')
this.modalPost = false this.modalPost = false
this.getData() this.getData()
} }
}) })
}, },
handleCommand (command) { searchPostName() {
this.page = 1;
this.getTree2();
}, // 查询
resetSelect() {
this.sarPost.name = "";
this.getTree2();
}, // 外层清空条件查询
handleCommand(command) {
switch (command[1]) { switch (command[1]) {
case '启用': case '启用':
this.disableFlagEdit(command[0], 0) this.disableFlagEdit(command[0], 0)
@@ -261,29 +302,35 @@ export default {
break break
} }
}, },
getTree2 () {
this.$http.get('sarPosition/position', {}, { getTree2() {
this.$http.get('sarPosition/position', {
current: this.page,
pageSize: this.pageSize,
...this.sarPost,
}, {
_this: this, _this: this,
}, res=> { }, res => {
this.postList = res.data this.postList = res.data.records
this.total2 = res.data.total
}) })
}, },
postsConfigure (row) { postsConfigure(row) {
var arr = [] var arr = []
this.userId = row.userId this.userId = row.userId
row.positions.forEach((item) => { row.positions.forEach((item) => {
arr.push(item.id) arr.push(item.id)
}) })
this.nodeList = arr this.nodeList = arr
this.modalPost= true this.modalPost = true
}, },
disableFlagEdit (row, type) { disableFlagEdit(row, type) {
let json = {} let json = {}
json.userId = row.userId json.userId = row.userId
json.disableFlag = type json.disableFlag = type
this.$http.postData('sarUser/user/disable', json, {}, this.$http.postData('sarUser/user/disable', json, {},
res => { res => {
if (res.ok){ if (res.ok) {
if (type === 0) { if (type === 0) {
this.$message.success('已启用') this.$message.success('已启用')
} else { } else {
@@ -293,18 +340,18 @@ export default {
} }
}) })
}, },
treeCollapse () { treeCollapse() {
this.sideClose = !this.sideClose this.sideClose = !this.sideClose
}, },
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true;
return data.name.indexOf(value) !== -1; return data.name.indexOf(value) !== -1;
}, },
handleNodeClick (data) { handleNodeClick(data) {
this.id = data.id this.id = data.id
this.getData() this.getData()
}, },
getTree () { getTree() {
this.$http.get('SarInstitution/institution', {}, { this.$http.get('SarInstitution/institution', {}, {
_this: this, _this: this,
loading: 'treeLoading' loading: 'treeLoading'
@@ -321,9 +368,9 @@ export default {
console.log(e); console.log(e);
}) })
}, },
getData () { getData() {
this.$http.post('SarInstitution/institution/user', { this.$http.post('SarInstitution/institution/user', {
current:this.page, current: this.page,
size: this.pageSize, size: this.pageSize,
institutionId: this.id, institutionId: this.id,
uname: this.searchForm.uname, uname: this.searchForm.uname,
@@ -347,14 +394,22 @@ export default {
this.total = res.data.total this.total = res.data.total
}) })
}, },
pageChange (page) { pageChange(page) {
this.page = page this.page = page
this.getData() this.getData()
}, },
pageSizeChange (pageSize) { pageSizeChange(pageSize) {
this.pageSize = pageSize this.pageSize = pageSize
this.getData() this.getData()
}, },
pageChange2(page) {
this.page = page
this.getTree2()
},
pageSizeChange2(pageSize) {
this.pageSize = pageSize
this.getTree2()
},
}, },
computed: {}, computed: {},
watch: { watch: {
@@ -362,7 +417,7 @@ export default {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
}, },
}, },
mounted () { mounted() {
// 获取组织结构树 // 获取组织结构树
this.getTree() this.getTree()
this.getTree2() this.getTree2()
@@ -372,47 +427,63 @@ export default {
<style lang="less"> <style lang="less">
@import '~@/assets/styles/mixins'; @import '~@/assets/styles/mixins';
#mechanism-manage { #mechanism-manage {
display: flex; display: flex;
height: 100%; height: 100%;
.tree-close{
.tree{ .tree-close {
.tree {
left: -200px !important; left: -200px !important;
} }
.tree-right{
.tree-right {
width: calc(~'100% - 15px') !important; width: calc(~'100% - 15px') !important;
} }
.side-bar-collapse{
.side-bar-collapse {
background: #5596CC !important; background: #5596CC !important;
color: #FFF; color: #FFF;
} }
} }
.tree-closed { .tree-closed {
width: 15px !important; width: 15px !important;
} }
.postPage {
.pagination {
position: initial;
}
}
.tree-content { .tree-content {
background: #fff; background: #fff;
width: 300px; width: 300px;
position: relative; position: relative;
.tree { .tree {
width: 95%; width: 95%;
position: absolute; position: absolute;
left: 0; left: 0;
} }
.tree-collapse { .tree-collapse {
position: absolute; position: absolute;
right: 0; right: 0;
} }
} }
.tree-right { .tree-right {
overflow-y: hidden; overflow-y: hidden;
padding:0; padding: 0;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.content{
.content {
padding: 0px; padding: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -420,7 +491,8 @@ export default {
flex: auto; flex: auto;
//height: calc(~'100% - 105px - 56px'); //height: calc(~'100% - 105px - 56px');
} }
.pagination{
.pagination {
position: static; position: static;
width: 100% !important; width: 100% !important;
left: 0 !important; left: 0 !important;
@@ -429,25 +501,31 @@ export default {
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
#mechanism-manage{ #mechanism-manage {
height: 100%; height: 100%;
.content { .content {
height: calc(~'100% - 105px - 56px') height: calc(~'100% - 105px - 56px')
} }
/deep/.el-select__tags {
/deep/ .el-select__tags {
overflow-x: hidden; overflow-x: hidden;
} }
/deep/.width-all{
/deep/ .width-all {
width: 100%; width: 100%;
} }
.filter-tree { .filter-tree {
height: calc(~'100% - 50px') height: calc(~'100% - 50px')
} }
.laws-tree{
/deep/.clearable { .laws-tree {
/deep/ .clearable {
top: 20px; top: 20px;
} }
} }
.add-form-item { .add-form-item {
display: flex; display: flex;
} }