| | |
| | | <template> |
| | | <div> |
| | | <!-- <div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;">--> |
| | | <div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;" :style="{height:mainHeight+'px'}"> |
| | | <div> |
| | | <div class="body" :style="{height:mainHeight+'px'}"> |
| | | <div style="padding: 10px 5px 0 0"> |
| | | <el-form |
| | | ref="form" |
| | | :model="form" |
| | |
| | | > |
| | | <div class="elForm"> |
| | | <el-form-item label="角色编码" style=" display: flex;"> |
| | | <el-input v-model="form.RoleCode" placeholder="请输入" style="width: calc(100%-30px)" /> |
| | | <el-input v-model="form.RoleCode" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="角色名称" style=" display: flex;"> |
| | | <el-input v-model="form.RoleName" placeholder="请输入" style="width: calc(100%-30px)" /> |
| | | <el-input v-model="form.RoleName" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="角色类型" style=" display: flex;"> |
| | | <el-select v-model="form.RoleTypeCode" filterable style="width: calc(100%-30px)" placeholder="请选择"> |
| | | <el-select |
| | | v-model="form.RoleTypeCode" |
| | | :popper-append-to-body="false" |
| | | filterable |
| | | style="width: 200px" |
| | | placeholder="请选择" |
| | | > |
| | | <!-- @focus="getRoleTypeSearch2"--> |
| | | <el-option |
| | | v-for="item in RoleTypeCodeArr2" |
| | | :key="item.roletype_code" |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="创建人员" style=" display: flex;"> |
| | | <el-input v-model="form.UserName" style="width: calc(100%-30px)" placeholder="请输入" /> |
| | | <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="display: flex;align-items: start;margin-top: 5px;"> |
| | |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | <div style="margin-bottom: 20px;display: flex; z-index: 2"> |
| | | <el-divider /> |
| | | <div style="margin-left: 10px;display: flex"> |
| | | <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button> |
| | | <el-button type="primary" icon="el-icon-setting" @click="settingButton">设置</el-button> |
| | | <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button> |
| | | <!-- <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>--> |
| | | </div> |
| | | |
| | | <div style="display: flex;border: 1px solid #eee"> |
| | | <el-divider /> |
| | | <div class="elTableDiv"> |
| | | <el-table |
| | | :data="tableData" |
| | | border |
| | | |
| | | stripe |
| | | :height="tableHeight+'px'" |
| | | :style="{width: 100+'%',height:tableHeight+'px'}" |
| | | highlight-current-row |
| | | :header-cell-style="this.$headerCellStyle" |
| | |
| | | <el-table-column |
| | | prop="description" |
| | | label="角色描述" |
| | | show-overflow-tooltip |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | |
| | | prop="lm_date" |
| | | label="创建时间" |
| | | sortable="custom" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="lm_date" |
| | |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="operationClass"> |
| | | <el-button type="text" @click="edit('edit',row)">修改</el-button> |
| | | <el-button type="text" @click="edit('edit',row)">编辑</el-button> |
| | | <el-button type="text" @click="del(row)">删除</el-button> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | <!-- 新增修改对话框--> |
| | | <el-dialog |
| | | :title="operation==='add'?'添加':'修改'" |
| | | :title="operation==='add'?'新增':'编辑'" |
| | | :visible.sync="dialogVisible" |
| | | width="50%" |
| | | width="800px" |
| | | top="15vh" |
| | | :close-on-click-modal="false" |
| | | @closed="handleClose" |
| | | @close="handleClose" |
| | | > |
| | | <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px"> |
| | | <el-form-item label="角色编码" prop="RoleCode"> |
| | | <el-input v-model="dialogForm.RoleCode" :disabled="operation!=='add'" style="width: 220px" /> |
| | | <el-input v-model="dialogForm.RoleCode" :disabled="operation!=='add'" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="角色名称" prop="RoleName"> |
| | | <el-input v-model="dialogForm.RoleName" style="width: 220px" /> |
| | | <el-input v-model="dialogForm.RoleName" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item prop="RoleTypeCode" label="角色类型"> |
| | | <el-select |
| | | v-model="dialogForm.RoleTypeCode" |
| | | filterable |
| | | style="width: 220px" |
| | | :popper-append-to-body="false" |
| | | style="width: 200px" |
| | | placeholder="请选择" |
| | | > |
| | | <el-option |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="角色描述" prop="description"> |
| | | <el-input v-model="dialogForm.description" type="textarea" style="width: 220px" /> |
| | | <el-input v-model="dialogForm.description" type="textarea" style="width: 200px" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | |
| | | </el-dialog> |
| | | <!-- 设置按钮对话框--> |
| | | <el-dialog |
| | | title="角色类型" |
| | | title="设置" |
| | | :visible.sync="settingDialogVisible" |
| | | width="50%" |
| | | width="800px" |
| | | top="15vh" |
| | | :close-on-click-modal="false" |
| | | class="settingDialogVisible" |
| | | @closed="handleCloseSetting" |
| | | @close="handleCloseSetting" |
| | | > |
| | | <div style="margin-bottom: 20px;display: flex"> |
| | |
| | | <el-table |
| | | :data="RoleTypeCodeArr" |
| | | border |
| | | height="300" |
| | | highlight-current-row |
| | | :style="{width: 100+'%',height:tableHeight-300+'px'}" |
| | | :header-cell-style="this.$headerCellStyle" |
| | | :cell-style="this.$cellStyle" |
| | | @sort-change="sortChangeOfSetting" |
| | | > |
| | | <!-- :style="{width: 100+'%',height:tableHeight-300+'px'}"--> |
| | | |
| | | <!-- <el-table-column--> |
| | | <!-- type="selection"--> |
| | | <!-- width="50"--> |
| | |
| | | <el-table-column |
| | | width="50" |
| | | label="序号" |
| | | type="index" |
| | | prop="RowNum" |
| | | /> |
| | | <el-table-column |
| | | prop="roletype_code" |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作"> |
| | | |
| | | <template slot-scope="{row}"> |
| | | <div class="operationClass"> |
| | | <el-button v-if="row.isVisible===0" type="text" @click="delSetting(row)">删除</el-button> |
| | |
| | | <el-button v-if="row.isVisible===1" type="text" @click="formSettingCancel(row)">取消</el-button> |
| | | </div> |
| | | </template> |
| | | <!-- <template v-for="item in RoleTypeCodeArr" slot-scope="{row}">--> |
| | | <!-- <div :key="item.roletype_code" class="operationClass">--> |
| | | <!-- <el-button v-if="item.isVisible" type="text" @click="formSettingSave(row)">保存</el-button>--> |
| | | <!-- <el-button v-if="item.isVisible" type="text" @click="formSettingCancel(row)">取消</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!--分页--> |
| | |
| | | <el-dialog |
| | | title="角色关联用户" |
| | | :visible.sync="userDialogVisible" |
| | | width="90%" |
| | | width="1500px" |
| | | :close-on-click-modal="false" |
| | | top="15vh" |
| | | :fullscreen="isFullscreen" |
| | | class="userDialogVisible" |
| | | @closed="handleCloseUser" |
| | | @close="handleCloseUser" |
| | |
| | | <div style="display: flex;min-height: 50px"> |
| | | <el-form ref="dialogFormUser" inline :model="dialogFormUser" label-width="80px"> |
| | | <el-form-item label="用户编码"> |
| | | <el-input v-model="dialogFormUser.usercode" class="userDialogVisibleInput" style="width: 220px" /> |
| | | <el-input v-model="dialogFormUser.usercode" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="用户名称"> |
| | | <el-input v-model="dialogFormUser.username" class="userDialogVisibleInput" style="width: 220px" /> |
| | | <el-input v-model="dialogFormUser.username" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="所属组织"> |
| | | <el-cascader |
| | | ref="dialogCascaderUser" |
| | | key="cascaderKey" |
| | | filterable |
| | | popper-class="elCascader" |
| | | :append-to-body="false" |
| | | :options="StuOrgArr" |
| | | :props="defaultProps" |
| | | class="userDialogVisibleInput" |
| | | style="width: 220px;" |
| | | style="width: 200px;" |
| | | |
| | | @change="dialogCascaderChange" |
| | | /> |
| | | |
| | | <!-- @focus="getUserOrganization"--> |
| | | </el-form-item> |
| | | <el-form-item label="关联角色"> |
| | | <el-select |
| | | v-model="dialogFormUser.isrole" |
| | | filterable |
| | | style="width: 220px" |
| | | :popper-append-to-body="false" |
| | | style="width: 200px" |
| | | placeholder="请选择" |
| | | class="userDialogVisibleInput" |
| | | > |
| | | <el-option |
| | | v-for="item in roleArr" |
| | |
| | | :data="dialogFormUserTable" |
| | | border |
| | | highlight-current-row |
| | | :style="{width: 100+'%',height:tableHeight-300+'px'}" |
| | | height="300" |
| | | :header-cell-style="this.$headerCellStyle" |
| | | :cell-style="this.$cellStyle" |
| | | :row-key="getRowKey" |
| | |
| | | <el-dialog |
| | | title="角色关联权限" |
| | | :visible.sync="dialogVisibleRight" |
| | | width="50%" |
| | | width="800px" |
| | | top="15vh" |
| | | :fullscreen="isFullscreen" |
| | | :close-on-click-modal="false" |
| | | class="dialogVisibleRight" |
| | | @closed="handleCloseRight" |
| | | @close="handleCloseRight" |
| | |
| | | } from '@/api/jcsz' |
| | | import { getCookie } from '@/utils/auth' |
| | | import $ from 'jquery' |
| | | import clearAllChildren from '@/utils/global' |
| | | |
| | | const SER_HZ = /^[\u4e00-\u9fa5]+$/ |
| | | export default { |
| | | name: 'Zzjg', |
| | | name: 'JSQD', |
| | | components: { |
| | | Pagination |
| | | }, |
| | |
| | | // } |
| | | // } |
| | | return { |
| | | isFullscreen: false, |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | form: { |
| | |
| | | // 获取所属组织 |
| | | async getUserOrganization() { |
| | | const { data: res } = await UserOrganization() |
| | | this.StuOrgArr = res |
| | | this.StuOrgArr = clearAllChildren(res) |
| | | }, |
| | | // 排序改变时 |
| | | sortChange({ column, prop, order }) { |
| | |
| | | // 获取页面高度 |
| | | getHeight() { |
| | | this.$nextTick(() => { |
| | | this.mainHeight = window.innerHeight - 200 |
| | | console.log(window.innerHeight) |
| | | console.log(window.innerHeight) |
| | | this.mainHeight = window.innerHeight - 250 |
| | | this.tableHeight = this.mainHeight - 100 |
| | | // this.isFullscreen = window.innerHeight < 800 |
| | | }) |
| | | }, |
| | | /* 设置模块*/ |
| | |
| | | this.RoleTypeCodeArr.splice(index, 1) |
| | | } |
| | | }) |
| | | this.getRoleTypeSearch2() |
| | | }, |
| | | // 设置对话框取消事件 |
| | | settingDialogVisibleCancel() { |
| | |
| | | }, |
| | | // 添加按钮 |
| | | addSetting() { |
| | | const data = { roletype_code: '', roletype_name: '', isVisible: 1 } |
| | | let number = Math.random() * Math.random()// 作为删除时的标识符 |
| | | number = number === 0 ? (10 + Math.random()) : number |
| | | const data = { roletype_code: '', roletype_name: '', isVisible: 1, number: number } |
| | | this.RoleTypeCodeArr.unshift(data) |
| | | }, |
| | | // 删除按钮 |
| | |
| | | } |
| | | const res = await RoleTypeAdd([data]) |
| | | if (res.code === '200') { |
| | | this.$message.success('添加成功!') |
| | | this.$message.success('保存成功!') |
| | | await this.getRoleTypeSearch() |
| | | } |
| | | }, |
| | | // 设置表单取消事件 |
| | | formSettingCancel(row) { |
| | | this.RoleTypeCodeArr.forEach((item, index) => { |
| | | if (item.isVisible === 1) { |
| | | if (item.isVisible === 1 && item.number === row.number) { |
| | | this.RoleTypeCodeArr.splice(index, 1) |
| | | } |
| | | }) |
| | |
| | | this.dialogFormUser.orgcode = '' |
| | | this.dialogFormUser.isrole = '' |
| | | this.$refs.dialogCascaderUser.checkedValue = '' |
| | | this.getRoleAssociationUser() |
| | | }, |
| | | |
| | | /* 角色关联权限对话框部分*/ |
| | |
| | | const rightPCArrFlag = res[0][0].flag |
| | | const rightAPPArrFlag = res[1][0].flag |
| | | |
| | | let waitFlag = false// 回显等待是否放行 |
| | | |
| | | // 1.第一种情况PC和APP都一次都没选中时 PC未选中,APP未选中 |
| | | if (rightPCArrFlag === 'N' && rightAPPArrFlag === 'N') { |
| | | pcIsSelected1 = true |
| | | this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code |
| | | } |
| | | |
| | | // 2.第二种情况PC已选中,APP未选中 |
| | | if (rightPCArrFlag === 'Y' && rightAPPArrFlag === 'N') { |
| | | pcIsSelected1 = true |
| | | pcIsSelected2 = true |
| | | setTimeout(() => { |
| | | this.$nextTick(() => { |
| | | $('input:checkbox').eq(0).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | }, 10) |
| | | |
| | | const interval = setInterval(() => { |
| | | if ($("input[name='PC']").length > 0) { |
| | | waitFlag = true |
| | | } |
| | | if (waitFlag) { |
| | | clearInterval(interval) |
| | | this.$nextTick(() => { |
| | | $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | } |
| | | }, 100) |
| | | |
| | | this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code |
| | | } |
| | | |
| | | // 3.第三种情况PC未选中,APP已选中 |
| | | if (rightPCArrFlag === 'N' && rightAPPArrFlag === 'Y') { |
| | | appIsSelected1 = true |
| | | appIsSelected2 = true |
| | | setTimeout(() => { |
| | | this.$nextTick(() => { |
| | | $('input:checkbox').eq(1).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | }, 10) |
| | | |
| | | const interval = setInterval(() => { |
| | | if ($("input[name='APP']").length > 0) { |
| | | waitFlag = true |
| | | } |
| | | if (waitFlag) { |
| | | clearInterval(interval) |
| | | this.$nextTick(() => { |
| | | $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | } |
| | | }, 100) |
| | | |
| | | this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightAPPArr[0].code |
| | | } |
| | | // 4.第四种情况PC已选中,APP已选中 |
| | |
| | | pcIsSelected2 = true |
| | | appIsSelected1 = false |
| | | appIsSelected2 = true |
| | | setTimeout(() => { |
| | | this.$nextTick(() => { |
| | | $('input:checkbox').eq(0).prop('checked', true)// 自定义单选框回显 |
| | | $('input:checkbox').eq(1).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | }, 10) |
| | | |
| | | const interval = setInterval(() => { |
| | | if ($("input[name='PC']").length > 0) { |
| | | waitFlag = true |
| | | } |
| | | if (waitFlag) { |
| | | clearInterval(interval) |
| | | this.$nextTick(() => { |
| | | $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | } |
| | | }, 100) |
| | | |
| | | this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code |
| | | } |
| | | this.dialogFormRight.rightOperationArr.push({ |
| | |
| | | const currentCode = this.dialogFormRight.rightCurrentCode// 权限操作端code |
| | | // 1.第一种情况 半叶为零 全叶为零 |
| | | if (checkedKeys.length === 0 && halfCheckedKeys.length === 0) { |
| | | console.log('1.第一种情况 半叶为零 全叶为零') |
| | | console.log('1.第一种情况 半叶为零 全叶为零1111') |
| | | this.dialogFormRight.rightOperationArr.forEach((item, index) => { |
| | | if (item.code === currentCode) { |
| | | item.isSelected2 = false |
| | | |
| | | this.$nextTick(() => { |
| | | $('input:checkbox').eq(index).prop('checked', false)// 自定义单选框回显 |
| | | if (item.name === 'PC') { |
| | | $("input[name='PC']").eq(0).prop('checked', false)// 自定义单选框回显 |
| | | } |
| | | if (item.name === 'APP') { |
| | | $("input[name='APP']").eq(0).prop('checked', false)// 自定义单选框回显 |
| | | } |
| | | // $("input[name='APP']").eq(0).prop('checked', false)// 自定义单选框回显 |
| | | // $('input:checkbox').eq(index).prop('checked', false)// 自定义单选框回显 |
| | | }) |
| | | } |
| | | }) |
| | |
| | | if (item.code === currentCode) { |
| | | item.isSelected2 = true |
| | | this.$nextTick(() => { |
| | | $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显 |
| | | if (item.name === 'PC') { |
| | | $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | } |
| | | if (item.name === 'APP') { |
| | | $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | } |
| | | // $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | } |
| | | }) |
| | |
| | | if (item.code === currentCode) { |
| | | item.isSelected2 = true |
| | | this.$nextTick(() => { |
| | | $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显 |
| | | if (item.name === 'PC') { |
| | | $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | } |
| | | if (item.name === 'APP') { |
| | | $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显 |
| | | } |
| | | // $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显 |
| | | }) |
| | | } |
| | | }) |
| | |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | border: 1px solid $main_color; |
| | | //border: 1px solid $main_color; |
| | | border: none; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | ::v-deep .el-button--info{ |
| | | ::v-deep .el-button--primary:hover { |
| | | border: none; |
| | | } |
| | | |
| | | ::v-deep .el-button--info { |
| | | //background-color: $main_color !important; |
| | | height: 30px; |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | input[type=checkbox]:checked::after { |
| | | content: "✓"; |
| | | //content: "√"; |
| | | //content: "✓"; |
| | | content: "√"; |
| | | color: #fff; |
| | | font-size: 12px; |
| | | font-weight: bold; |
| | | background-color: $main_color; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .userDialogVisible { |
| | | ::v-deep .userDialogVisibleInput { |
| | | //width:calc(100% - 30px) !important; |
| | | } |
| | | |
| | | //::v-deep .el-form-item { |
| | | // width:calc(100% - 30px) !important; |
| | | //} |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked .el-radio__inner { |
| | |
| | | ::v-deep .el-input__inner { |
| | | height: 30px; |
| | | line-height: 30px; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-table .caret-wrapper { |
| | |
| | | margin: 10px 30px 0px 0; |
| | | } |
| | | |
| | | .elForm { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | width: 85%; |
| | | flex-wrap: wrap; |
| | | .body ::v-deep .el-divider { |
| | | border: 1px solid #eee; |
| | | width: 99%; |
| | | margin: 10px auto; |
| | | } |
| | | |
| | | .body ::v-deep .el-form-item { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-select .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-select-dropdown__item.selected { |
| | | color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-textarea__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | </style> |
| | | <style lang="scss"> |
| | | .elCascader { |
| | | //.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path { |
| | | // color: #42b983 ; |
| | | //} |
| | | .el-cascader-node.is-selectable.in-checked-path { |
| | | color: #42b983; |
| | | } |
| | | |
| | | .el-radio__input.is-checked .el-radio__inner { |
| | | background-color: #42b983; |
| | | border-color: #42b983; |
| | | } |
| | | |
| | | .el-radio__input.is-checked .el-radio__inner:hover { |
| | | border-color: #42b983; |
| | | } |
| | | |
| | | .el-input__inner { |
| | | border-color: #42b983 !important; |
| | | } |
| | | |
| | | } |
| | | </style> |