|
|
@@ -0,0 +1,356 @@
|
|
|
+<template>
|
|
|
+ <div class="newService">
|
|
|
+ <div class="newService-head flex-wrap">
|
|
|
+ <div class="manageTitle">{{ title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="newService-content flex-wrap">
|
|
|
+ <div class="newService-content-left">
|
|
|
+ <div class="newService-content-left-top">
|
|
|
+ <div class="flex head">
|
|
|
+ <div class="title">角色列表</div>
|
|
|
+ <el-button @click="handleAdd" class="serButton" size="small">新增</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="search">
|
|
|
+ <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" v-model="search">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newService-content-left-bottom">
|
|
|
+ <template v-if="dataList.length">
|
|
|
+ <el-scrollbar ref="scroll" style="height: 100%">
|
|
|
+ <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
|
+ <div v-for="(item,index) in dataList" :key="index" @click.stop="handleClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
|
|
|
+ <div class="left">
|
|
|
+ <span class="txt">{{ item.role_name }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="activeIndex == index" class="right">
|
|
|
+ <span @click.stop="handleError" class="error">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-empty description="暂无数据"></el-empty>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newService-content-right">
|
|
|
+ <div class="newService-content-right-top">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="title">角色信息 {{ dataObj.role_name }}</div>
|
|
|
+ <el-button type="primary" @click="handleSave" :disabled="flag" class="bcButton" size="small">保存</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="demo-form">
|
|
|
+ <el-form :inline="true" :model="formInline" class="flex-wrap">
|
|
|
+ <el-form-item label="角色名称">
|
|
|
+ <el-input style="width:250px" clearable v-model="formInline.role_name" :disabled="activeIndex == null" size="small" placeholder="请输入角色名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="flex1" label="角色描述">
|
|
|
+ <el-input style="width:600px;" clearable v-model="formInline.comment" :disabled="activeIndex == null" size="small" placeholder="请输入角色描述"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: calc(100% - 180px)" class="flex newService-content-right-new">
|
|
|
+ <div class="newService-content-right-bottom contents1 flex1">
|
|
|
+ <div class="newService-content-left-top">
|
|
|
+ <div class="flex head">
|
|
|
+ <div class="title">权限列表</div>
|
|
|
+ </div>
|
|
|
+ <div class="search">
|
|
|
+ <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" :filter-node-method="filterNode" v-model="filterText">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newService-content-left-bottom">
|
|
|
+ <el-scrollbar ref="scroll" style="height: 100%">
|
|
|
+ <div class="newService-content-left-bottom-tree">
|
|
|
+ <el-tree ref="tree" :data="treeData" :props="defaultProps" highlight-current :filter-node-method="filterNode" default-expand-all node-key="auth_id" @node-click="handleNodeClick" :expand-on-click-node="false">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span class="customTxt">{{ node.label }}</span>
|
|
|
+ <span v-show="treeCheckId == data.auth_id" class="customBtn">
|
|
|
+ <span v-if="data.auth_id != 0" class="ym">列授权</span>
|
|
|
+ <span v-if="data.auth_id != 0" class="rm" @click.stop="handleRemove(node, data)">删除</span>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newService-content-right-bottom contents2 flex1">
|
|
|
+ <div class="newService-content-left-top">
|
|
|
+ <div class="flex head">
|
|
|
+ <div class="title">权限列表</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newService-content-left-bottom">
|
|
|
+ <el-scrollbar ref="scroll" style="height: 100%">
|
|
|
+ <el-checkbox-group v-model="checkGroup" size="small">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col v-for="(item,index) in checkArrs" :key="index" :span="8">
|
|
|
+ <el-checkbox :label="item.value" border>{{ item.label }}</el-checkbox>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Table from '@/views/newTable/index.vue'
|
|
|
+import { Query, newData, modifyData, moveData } from "@/api/webApi"
|
|
|
+import { setTree } from '@/utils/validate'
|
|
|
+import pb from '@/layout/mixin/getPublicData'
|
|
|
+import * as _ from 'lodash'
|
|
|
+export default {
|
|
|
+ name: 'NewService',
|
|
|
+ components: { Table },
|
|
|
+ mixins: [pb],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ title: '服务设置',
|
|
|
+ search: '',
|
|
|
+ filterText: '',
|
|
|
+ arrs: [],
|
|
|
+ flag: true,
|
|
|
+ formInline: {
|
|
|
+ role_name: '',
|
|
|
+ comment: ''
|
|
|
+ },
|
|
|
+ activeIndex: null,
|
|
|
+ pageIndex: 0,
|
|
|
+ pageSize: 9999,
|
|
|
+ dataContent: {},
|
|
|
+ queryId: '',
|
|
|
+ dataObj: {},
|
|
|
+ dataType: 'edit',
|
|
|
+ noMore: false,
|
|
|
+ loading: false,
|
|
|
+ treeData: [
|
|
|
+ {
|
|
|
+ auth_name: '中小型机场系统',
|
|
|
+ auth_id: 0,
|
|
|
+ children: [],
|
|
|
+ up_auth_id: -1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ treeCheckId: '',
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'auth_name'
|
|
|
+ },
|
|
|
+ checkGroup: [],
|
|
|
+ checkArrs: new Array(10).fill({ label: '111', value: '111' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dataList () {
|
|
|
+ return this.arrs.filter(data => !this.search || data.role_name.toLowerCase().includes(this.search.toLowerCase()))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ filterText (val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ const { title, qid } = this.$route.meta
|
|
|
+ this.title = title
|
|
|
+ this.queryId = qid
|
|
|
+ this.getQueryList(qid)
|
|
|
+ this.setTreeData()
|
|
|
+ },
|
|
|
+ updated () {
|
|
|
+ this.scrollDown()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取tree数据
|
|
|
+ async setTreeData () {
|
|
|
+ const result = await this.getQuery(SERVICE_ID.sysMenuId)
|
|
|
+ const treeMenu = setTree(result, 'up_auth_id', 'auth_id')
|
|
|
+ this.treeData[0].children = treeMenu
|
|
|
+ },
|
|
|
+ filterNode (value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.auth_name.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ async getQueryList (id) {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ serviceId: id,
|
|
|
+ page: ++this.pageIndex,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ dataContent: this.dataContent,
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ if (returnData.length === 0) {
|
|
|
+ this.pageIndex--;
|
|
|
+ this.noMore = true;
|
|
|
+ }
|
|
|
+ this.arrs.push(...returnData)
|
|
|
+ if (this.dataType == 'add') {
|
|
|
+ const item = this.arrs[this.arrs.length - 1]
|
|
|
+ if (Object.keys(item).length) {
|
|
|
+ this.dataObj = item
|
|
|
+ this.flag = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ } else {
|
|
|
+ this.pageIndex--;
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.pageIndex--;
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ load () {
|
|
|
+ if (!this.noMore) {
|
|
|
+ this.getQueryList(this.queryId);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scrollDown () {
|
|
|
+ if (this.$refs['scroll'] && this.dataType == 'add') {
|
|
|
+ this.$refs['scroll'].wrap.scrollTop = this.$refs['scroll'].wrap.scrollHeight
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetTable () {
|
|
|
+ this.pageIndex = 0;
|
|
|
+ this.noMore = false;
|
|
|
+ this.arrs = [];
|
|
|
+ },
|
|
|
+ //服务列表-新增
|
|
|
+ handleAdd () {
|
|
|
+ this.dataType = 'add'
|
|
|
+ this.flag = false
|
|
|
+ this.dataObj.role_name = '新建角色'
|
|
|
+ this.arrs.push({ role_name: '新建角色' })
|
|
|
+ this.activeIndex = this.arrs.length - 1
|
|
|
+ for (const key in this.formInline) {
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
+ this.formInline[key] = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //服务列表-点击
|
|
|
+ handleClick (item, index) {
|
|
|
+ this.dataType = 'edit'
|
|
|
+ this.dataObj = _.cloneDeep(item)
|
|
|
+ this.formInline = _.cloneDeep(item)
|
|
|
+ this.activeIndex = index
|
|
|
+ this.flag = false
|
|
|
+ },
|
|
|
+ //服务列表-保存
|
|
|
+ handleSave () {
|
|
|
+ if (this.dataObj.role_ID && this.dataType == 'edit') {
|
|
|
+ this.generalDataReception(2, this.formInline)
|
|
|
+ } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].role_ID) {
|
|
|
+ this.formInline.role_ID = this.arrs[this.arrs.length - 1].role_ID
|
|
|
+ this.generalDataReception(2, this.formInline)
|
|
|
+ } else if (this.dataType == 'add') {
|
|
|
+ this.generalDataReception(1, this.formInline)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$message.error('请先选中服务后再操作')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //服务列表-删除
|
|
|
+ handleError () {
|
|
|
+ if (this.dataObj.role_ID && this.dataType == 'edit') {
|
|
|
+ this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.generalDataReception(3, this.dataObj)
|
|
|
+ this.activeIndex = null;
|
|
|
+ this.dataObj = {};
|
|
|
+ for (const key in this.formInline) {
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
+ this.formInline[key] = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.flag = true
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].role_ID) {
|
|
|
+ this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.generalDataReception(3, this.arrs[this.arrs.length - 1])
|
|
|
+ this.activeIndex = null;
|
|
|
+ this.dataObj = {};
|
|
|
+ for (const key in this.formInline) {
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
+ this.formInline[key] = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.flag = true
|
|
|
+ this.dataType = 'edit'
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.arrs.splice(this.activeIndex, 1)
|
|
|
+ this.activeIndex = null
|
|
|
+ this.flag = true
|
|
|
+ this.dataObj = {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //服务列表-增/删/改
|
|
|
+ async generalDataReception (event, data) {
|
|
|
+ try {
|
|
|
+ const params = {
|
|
|
+ serviceId: this.queryId,
|
|
|
+ dataContent: data,
|
|
|
+ event: `${event}`,
|
|
|
+ };
|
|
|
+ const { code } =
|
|
|
+ event == 1
|
|
|
+ ? await newData(params)
|
|
|
+ : event == 2
|
|
|
+ ? await modifyData(params)
|
|
|
+ : await moveData(params);
|
|
|
+ if (code == 0) {
|
|
|
+ this.$message.success("操作成功");
|
|
|
+ this.resetTable();
|
|
|
+ this.getQueryList(this.queryId);
|
|
|
+ } else {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleNodeClick (data) {
|
|
|
+ this.treeCheckId = data.auth_id
|
|
|
+ },
|
|
|
+ handleRemove (node, data) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "./css/index.scss";
|
|
|
+</style>
|
