|
@@ -0,0 +1,886 @@
|
|
|
+<template>
|
|
|
+ <div class="content-main-manage">
|
|
|
+ <div class="content-top">
|
|
|
+ <div class="content-top-title">当前资源信息</div>
|
|
|
+ <div class="btn-container">
|
|
|
+ <Button icon="ios-add" class="common-add-btn common-add-btn-left" @click="addClick('平级')">新增平级资源</Button>
|
|
|
+ <Button icon="ios-add" class="common-add-btn" @click="addClick('下级')" :disabled="childDisabled">新增下级资源</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Form class="common-form common-form-list" ref="currentMenuList" :model="currentMenuList" :rules="ruleValidate" :label-width="120" inline>
|
|
|
+ <FormItem label="序号" prop="displayOrder" style="width:48%">
|
|
|
+ <div v-show="!isSaveNumber" class="form-item-save">
|
|
|
+ <div class="form-item-init">{{currentMenuList.displayOrder}}</div>
|
|
|
+ <i class='iconfont icon-bianji1' @click="editIconNumber('edit')"></i>
|
|
|
+ </div>
|
|
|
+ <div v-show="isSaveNumber" class="form-item-save">
|
|
|
+ <InputNumber placeholder="请输入1~99,序号越小显示越靠前" :max="99" :min="1" v-model.trim="currentMenuList.displayOrder"></InputNumber>
|
|
|
+ <i class='iconfont icon-baocun2' @click="editIconNumber('save')"></i>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="资源名称" prop="menuName" style="width:48%">
|
|
|
+ <div v-show="!isSaveName" class="form-item-save">
|
|
|
+ <div class="form-item-init">{{currentMenuList.menuName}}</div>
|
|
|
+ <i class='iconfont icon-bianji1' @click="editIconName('edit')"></i>
|
|
|
+ </div>
|
|
|
+ <div v-show="isSaveName" class="form-item-save">
|
|
|
+ <Input placeholder="" v-model.trim="currentMenuList.menuName" maxlength="20" show-word-limit />
|
|
|
+ <i class='iconfont icon-baocun2' @click="editIconName('save')"></i>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="资源类型" prop="resourceType" style="width:48%">
|
|
|
+ <div v-show="!isSaveResoType" class="form-item-save">
|
|
|
+ <div class="form-item-init">{{currentMenuList.resourceTypeName}}</div>
|
|
|
+ <i class='iconfont icon-bianji1' @click="editIconResourceType('edit')"></i>
|
|
|
+ </div>
|
|
|
+ <div v-show="isSaveResoType" class="form-item-save">
|
|
|
+ <Select v-model="currentMenuList.resourceType" placeholder="资源类型">
|
|
|
+ <Option v-for="item in resourceTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
|
+ </Select>
|
|
|
+ <i class='iconfont icon-baocun2' @click="editIconResourceType('save')"></i>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="启用状态" prop="isEnable" style="width:48%;">
|
|
|
+ <div>
|
|
|
+ <i-switch true-color="#57C44F" :true-value="1" :false-value="0" v-model="currentMenuList.isEnable" @mousedown.native="changeSwitch(currentMenuList)">
|
|
|
+ </i-switch>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="URL" prop="linkUrl" style="width:48%">
|
|
|
+ <div v-show="!isSaveUrl" class="form-item-save">
|
|
|
+ <div class="form-item-init">{{currentMenuList.linkUrl}}</div>
|
|
|
+ <i class='iconfont icon-bianji1' @click="editIconUrl('edit')"></i>
|
|
|
+ </div>
|
|
|
+ <div v-show="isSaveUrl" class="form-item-save">
|
|
|
+ <Input placeholder="输入资源地址" v-model="currentMenuList.linkUrl" />
|
|
|
+ <i class='iconfont icon-baocun2' @click="editIconUrl('save')"></i>
|
|
|
+ </div>
|
|
|
+ <!-- <span class="form-item-bot-left" @click="pageJump(currentMenuList)">{{currentMenuList.linkUrl}}</span> -->
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="更新时间" prop="equipmentStatus" style="width:48%">
|
|
|
+ <span class="form-item-bot-right">{{currentMenuList.updateTime}}</span>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ <div class="content-top">
|
|
|
+ <div class="content-top-title">次级资源信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="search-list">
|
|
|
+ <div class="search-left">
|
|
|
+ <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
|
|
|
+ <FormItem label="" prop="resourceType">
|
|
|
+ <Select v-model="tableParams.resourceType" placeholder="资源类型">
|
|
|
+ <Option v-for="item in resourceTypeData" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="" prop="isEnable">
|
|
|
+ <Select v-model="tableParams.isEnable" placeholder="启用状态">
|
|
|
+ <Option v-for="item in isEnableData" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="" prop="keywords">
|
|
|
+ <Input placeholder="输入关键词进行查询" clearable search v-model="tableParams.keywords" />
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="" >
|
|
|
+ <Button type="primary" class="common-btn-search" @click="searchClick">
|
|
|
+ <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
|
|
|
+ </Button>
|
|
|
+ <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
|
|
|
+ <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
|
|
|
+ </Button>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="manage-main-center">
|
|
|
+ <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
|
|
|
+ <template slot="loading">
|
|
|
+ <Loading-animation></Loading-animation>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="action">
|
|
|
+ <Tooltip content="编辑" placement="top">
|
|
|
+ <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
|
|
|
+ </Tooltip>
|
|
|
+ <Tooltip content="删除" placement="top">
|
|
|
+ <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
|
|
|
+ </Tooltip>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+ <div class="common-page">
|
|
|
+ <div class="common-page-total">
|
|
|
+ 共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
|
|
|
+ </div>
|
|
|
+ <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
|
|
|
+ </div>
|
|
|
+ <Modal
|
|
|
+ v-model="showModal"
|
|
|
+ :title="title"
|
|
|
+ width="36"
|
|
|
+ ref="modalGrag"
|
|
|
+ draggable
|
|
|
+ reset-drag-position
|
|
|
+ :mask-closable="false"
|
|
|
+ @on-visible-change="modalChange"
|
|
|
+ class-name="common-modal">
|
|
|
+ <Form class="common-form common-form-modal" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
|
|
|
+ <FormItem label="上级节点:" >
|
|
|
+ <span>{{menuTitle}}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="序号:" prop="displayOrder">
|
|
|
+ <InputNumber :max="99" :min="1" v-model="formOption.displayOrder" placeholder="请输入1~99,序号越小显示越靠前"></InputNumber>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="资源名称:" prop="menuName">
|
|
|
+ <Input v-model.trim="formOption.menuName" maxlength="20" show-word-limit />
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="资源类型:" prop="resourceType">
|
|
|
+ <Select v-model="formOption.resourceType" placeholder="资源类型">
|
|
|
+ <Option v-for="item in resourceTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="图标:" prop="imageUrl">
|
|
|
+ <Input v-model="formOption.imageUrl" maxlength="25" show-word-limit placeholder="请输入图标class名称"/>
|
|
|
+ <div class="common-form-item-text">新增系统中不存在的资源,图标默认名称为icon-caidan</div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="URL:" prop="linkUrl">
|
|
|
+ <Input v-model="formOption.linkUrl" maxlength="25" show-word-limit placeholder="输入资源地址"/>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="启用状态:" prop="isEnable" v-if="title == '新增资源'">
|
|
|
+ <i-switch true-color="#57C44F" v-model="formOption.isEnable" disabled></i-switch>
|
|
|
+ <span style="color: #718EBD;margin-left:6px">关</span>
|
|
|
+ <span style="color: #718EBD;margin-left:12px">(所有新增状态均为关闭,需在列表打开)</span>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ <div slot="footer">
|
|
|
+ <Button @click="modalCancel">取消</Button>
|
|
|
+ <Button type="primary" @click="modalOk('formOption')">确定</Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ <Modal
|
|
|
+ v-model="modalStatus"
|
|
|
+ :title="commonTitle"
|
|
|
+ width="30"
|
|
|
+ ref="modalGrag"
|
|
|
+ draggable
|
|
|
+ reset-drag-position
|
|
|
+ :mask-closable="false"
|
|
|
+ class-name="common-modal">
|
|
|
+ <i :class="'iconfont '+ activeClass" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle!='确认删除'"></i>
|
|
|
+ <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle=='确认删除'"></Icon>
|
|
|
+ <span class="modal-text">{{modalTitle}}</span>
|
|
|
+ <div slot="footer">
|
|
|
+ <Button @click="commonCancel">取消</Button>
|
|
|
+ <Button type="primary" @click="commonOk">确定</Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+const defaultFrom = {parentMenuId: '',menuLevel:'',displayOrder:null,menuName: '',resourceType: '',imageUrl: '',linkUrl: '',isEnable:0}
|
|
|
+export default {
|
|
|
+ name: "ResourceManagementIndex",
|
|
|
+ components:{
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ stationData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ levelNum: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ currentmenuId: [String,Number]
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentMenuList: {},
|
|
|
+ currentParams: {},
|
|
|
+ ruleValidate: {
|
|
|
+ displayOrder: [{
|
|
|
+ required: true,
|
|
|
+ type: 'number',
|
|
|
+ message: '请输入序号',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ menuName: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入资源名称',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ resourceType: [{
|
|
|
+ required: true,
|
|
|
+ type: 'number',
|
|
|
+ message: '请选择资源类型',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ isSaveNumber: false,
|
|
|
+ isSaveName: false,
|
|
|
+ isSaveResoType: false,
|
|
|
+ isSaveUrl: false,
|
|
|
+ showModal: false,
|
|
|
+ isEnableData: [
|
|
|
+ {
|
|
|
+ value: '-1',
|
|
|
+ label: '启用状态'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '启用'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '关闭'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ resourceTypeData: [
|
|
|
+ {
|
|
|
+ value: '-1',
|
|
|
+ label: '资源类型'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '菜单'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '页面'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ resourceTypeList: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '菜单'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '页面'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableParams: {
|
|
|
+ menuId: '',
|
|
|
+ isEnable: '',
|
|
|
+ resourceType: '',
|
|
|
+ keywords: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 6
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ tableTotal: 0,
|
|
|
+ tablePage: 0,
|
|
|
+ rowObj: {},
|
|
|
+ loading: true,
|
|
|
+ isClickOrg: true,
|
|
|
+ isClickmenuId: null,
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ key: 'displayOrder',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '资源名称',
|
|
|
+ key: 'menuName',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '资源类型',
|
|
|
+ key: 'resourceTypeName',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上级节点',
|
|
|
+ key: 'parentMenuName',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'URL',
|
|
|
+ key: 'linkUrl',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '更新时间',
|
|
|
+ align: 'center',
|
|
|
+ key: 'updateTime',
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '启用状态',
|
|
|
+ key: 'isEnable',
|
|
|
+ align: 'center',
|
|
|
+ width: 120,
|
|
|
+ render: (h, params) => {
|
|
|
+ return h('div', [
|
|
|
+ h('i-switch', {
|
|
|
+ props: { value: params.row.isEnable,'true-color': '#57C44F', trueValue:1,falseValue: 0
|
|
|
+ },
|
|
|
+ nativeOn:{
|
|
|
+ "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
|
|
|
+ this.rowObj = params.row
|
|
|
+ this.isClickOrg = false
|
|
|
+ if (params.row.isEnable == 1) {
|
|
|
+ this.commonTitle = '确认关闭'
|
|
|
+ this.activeColor = '#E92E2E'
|
|
|
+ this.activeClass = 'icon-guanbi'
|
|
|
+ this.modalTitle = '关闭后,页面将从系统菜单中消失,已分配的角色资源不可见。请谨慎操作。'
|
|
|
+ this.modalStatus = true
|
|
|
+ } else {
|
|
|
+ this.commonTitle = '确认启用'
|
|
|
+ this.activeColor = '#57C44F'
|
|
|
+ this.activeClass = 'icon-qiyong'
|
|
|
+ this.modalTitle = '请确保开发人员已完成对应配置再启用,否则影响资源显示效果。'
|
|
|
+ this.modalStatus = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ align: 'center',
|
|
|
+ slot: 'action',
|
|
|
+ width: 80,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ modalStatus: false,
|
|
|
+ childDisabled: false,
|
|
|
+ title: '新增资源',
|
|
|
+ commonTitle: "",
|
|
|
+ activeColor: '#E92E2E',
|
|
|
+ activeClass: '',
|
|
|
+ modalTitle: '',
|
|
|
+ formOption: {parentMenuId: '',menuLevel:'',displayOrder:null,menuName: '',resourceType: '',imageUrl: '',linkUrl: '',isEnable:0},
|
|
|
+ menuTitle: '',
|
|
|
+ isMenuAdd: '',// 判断是新增平级还是下级
|
|
|
+ disabledLevel: 0,
|
|
|
+ currentTreeId: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ levelNum: {
|
|
|
+ handler(newValue) {
|
|
|
+ this.disabledLevel = newValue
|
|
|
+ if (this.disabledLevel>=4) {
|
|
|
+ this.childDisabled = true
|
|
|
+ } else {
|
|
|
+ this.childDisabled = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ editIconNumber (title) {
|
|
|
+ if (title == 'edit') {
|
|
|
+ this.isSaveNumber = true
|
|
|
+ } else {
|
|
|
+ let params = this.currentMenuList
|
|
|
+ this.$nextTick(()=> {
|
|
|
+ this.$refs.currentMenuList.validateField('displayOrder',(valid)=> {
|
|
|
+ if (!valid) {
|
|
|
+ this.$post('metroapi/menu/save', params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.isSaveNumber = false
|
|
|
+ this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editIconName (title) {
|
|
|
+ if (title == 'edit') {
|
|
|
+ this.isSaveName = true
|
|
|
+ } else {
|
|
|
+ let params = this.currentMenuList
|
|
|
+ this.$nextTick(()=> {
|
|
|
+ this.$refs.currentMenuList.validateField('menuName',(valid)=> {
|
|
|
+ if (!valid) {
|
|
|
+ this.$post('metroapi/menu/save', params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.isSaveName = false
|
|
|
+ this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editIconResourceType (title) {
|
|
|
+ if (title == 'edit') {
|
|
|
+ this.isSaveResoType = true
|
|
|
+ } else {
|
|
|
+ let params = this.currentMenuList
|
|
|
+ this.$nextTick(()=> {
|
|
|
+ this.$refs.currentMenuList.validateField('resourceType',(valid)=> {
|
|
|
+ if (!valid) {
|
|
|
+ this.$post('metroapi/menu/save', params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.isSaveResoType = false
|
|
|
+ this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editIconUrl (title) {
|
|
|
+ if (title == 'edit') {
|
|
|
+ this.isSaveUrl = true
|
|
|
+ } else {
|
|
|
+ let params = this.currentMenuList
|
|
|
+ this.$post('metroapi/menu/save', params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.isSaveUrl = false
|
|
|
+ this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeSwitch (curObj) {
|
|
|
+ this.isClickmenuId = curObj.menuId
|
|
|
+ this.isClickOrg = true
|
|
|
+ if (curObj.isEnable == 1) {
|
|
|
+ this.commonTitle = '确认关闭'
|
|
|
+ this.activeColor = '#E92E2E'
|
|
|
+ this.activeClass = 'icon-guanbi'
|
|
|
+ this.modalTitle = '关闭后,页面将从系统菜单中消失,已分配的角色资源不可见。请谨慎操作。'
|
|
|
+ this.modalStatus = true
|
|
|
+ } else {
|
|
|
+ this.commonTitle = '确认启用'
|
|
|
+ this.activeColor = '#57C44F'
|
|
|
+ this.activeClass = 'icon-qiyong'
|
|
|
+ this.modalTitle = '请确保开发人员已完成对应配置再启用,否则影响资源显示效果。'
|
|
|
+ this.modalStatus = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rowClassName(row, index) {
|
|
|
+ if (index % 2 == 0) {
|
|
|
+ return "ivu-table-stripe-even";
|
|
|
+ } else {
|
|
|
+ return "ivu-table-stripe-odd";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 分页
|
|
|
+ changePage (val) {
|
|
|
+ this.tableParams.pageNum = val
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ //跳转
|
|
|
+ sizeChange (val) {
|
|
|
+ this.tableParams.pageSize = val
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ // 获取当前资源信息
|
|
|
+ getMenuData (currentMenuId,text) {
|
|
|
+ this.currentTreeId = currentMenuId
|
|
|
+ this.$get('metroapi/menu/queryMenu', {menuId:currentMenuId}).then(res=>{
|
|
|
+ if ( res.httpCode == 1 ){
|
|
|
+ this.currentMenuList = res.data
|
|
|
+ // 编辑当前信息(不是表格里的当前信息) 不走表格接口 text = = 'isTopEditOrg'
|
|
|
+ if (text != 'isTopEditOrg') {
|
|
|
+ this.getTableData(currentMenuId)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取表格数据
|
|
|
+ getTableData (nodeId) {
|
|
|
+ this.tableParams.menuId = nodeId ? nodeId : this.currentTreeId
|
|
|
+ let params = JSON.parse(JSON.stringify(this.tableParams))
|
|
|
+ params.resourceType = params.resourceType == '-1' ? '' : params.resourceType
|
|
|
+ params.isEnable = params.isEnable == '-1'?'': params.isEnable
|
|
|
+ this.loading = true
|
|
|
+ this.$get('metroapi/menu/queryMenu/secondary', params).then(res=>{
|
|
|
+ this.loading = false
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.tableData = res.data.data
|
|
|
+ this.tableTotal = res.data.count
|
|
|
+ if (res.data.data.length==0) {
|
|
|
+ this.tablePage = 0
|
|
|
+ } else {
|
|
|
+ this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
|
|
|
+ }
|
|
|
+ if (res.data.data.length==0 && this.tableParams.pageNum>1) {
|
|
|
+ this.tableParams.pageNum--
|
|
|
+ return this.getTableData()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.tableData = []
|
|
|
+ this.tableTotal = 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchClick () {
|
|
|
+ this.tableParams.pageNum = 1
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ resetClick (name) {
|
|
|
+ this.$refs[name].resetFields()
|
|
|
+ this.tableParams.pageNum = 1
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ addClick (text) {
|
|
|
+ this.isMenuAdd = text
|
|
|
+ this.title = '新增资源'
|
|
|
+ if (this.currentMenuList.menuLevel == 2) {
|
|
|
+ this.menuTitle = text == '平级' ? this.stationData[0].title : this.currentMenuList.menuName
|
|
|
+ } else {
|
|
|
+ this.menuTitle = text == '平级' ? this.currentMenuList.parentMenuName : this.currentMenuList.menuName
|
|
|
+ }
|
|
|
+ if(text == '平级') {
|
|
|
+ this.formOption = JSON.parse(JSON.stringify(defaultFrom))
|
|
|
+ this.formOption.menuLevel = this.currentMenuList.menuLevel
|
|
|
+ this.formOption.parentMenuId = this.currentMenuList.parentMenuId ? this.currentMenuList.parentMenuId : ''
|
|
|
+ this.showModal = true
|
|
|
+ } else {
|
|
|
+ this.formOption.menuLevel = this.currentMenuList.menuLevel + 1
|
|
|
+ this.formOption.parentMenuId = this.currentMenuList.menuId
|
|
|
+ }
|
|
|
+ this.showModal = true
|
|
|
+ },
|
|
|
+ editClick (row) {
|
|
|
+ this.rowObj = row
|
|
|
+ this.formOption = JSON.parse(JSON.stringify(row));
|
|
|
+ this.menuTitle = this.formOption.parentMenuName
|
|
|
+ this.title = '编辑资源'
|
|
|
+ this.showModal = true
|
|
|
+ },
|
|
|
+ delClick (row) {
|
|
|
+ this.rowObj = row
|
|
|
+ this.commonTitle = '确认删除'
|
|
|
+ this.activeColor = '#E92E2E'
|
|
|
+ this.activeClass = ''
|
|
|
+ this.modalTitle = '删除关键资源可能导致系统崩溃,非专业人员请谨慎操作。'
|
|
|
+ this.modalStatus = true
|
|
|
+ },
|
|
|
+ modalChange (modalStatus) {
|
|
|
+ if (!modalStatus) {
|
|
|
+ this.$refs.formOption.resetFields();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalOk (formName) {
|
|
|
+ let params = JSON.parse(JSON.stringify(this.formOption))
|
|
|
+ if (this.title == '新增资源') {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$post('metroapi/menu/save', params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.showModal = false
|
|
|
+ let menuId = null
|
|
|
+ if (this.isMenuAdd == '平级') {
|
|
|
+ menuId = this.currentMenuList.menuId
|
|
|
+ } else {
|
|
|
+ menuId = params.parentMenuId
|
|
|
+ }
|
|
|
+ this.$emit('changeTree',menuId)
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.showModal = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$post('metroapi/menu/save', params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.showModal = false
|
|
|
+ this.$emit('changeTree',this.rowObj.parentMenuId)
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.showModal = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalCancel () {
|
|
|
+ this.showModal = false
|
|
|
+ },
|
|
|
+ commonOk () {
|
|
|
+ if (this.commonTitle == '确认启用') {
|
|
|
+ let params = {
|
|
|
+ isEnable: 1
|
|
|
+ }
|
|
|
+ if (this.isClickOrg) {
|
|
|
+ params.menuId = this.isClickmenuId
|
|
|
+ } else {
|
|
|
+ params.menuId = this.rowObj.menuId
|
|
|
+ }
|
|
|
+ this.getisEnableStatus(params)
|
|
|
+ } else if (this.commonTitle == '确认关闭') {
|
|
|
+ let params = {
|
|
|
+ isEnable:0
|
|
|
+ }
|
|
|
+ if (this.isClickOrg) {
|
|
|
+ params.menuId = this.isClickmenuId
|
|
|
+ } else {
|
|
|
+ params.menuId = this.rowObj.menuId
|
|
|
+ }
|
|
|
+ this.getisEnableStatus(params)
|
|
|
+ } else if (this.commonTitle == '确认删除') {
|
|
|
+ let params = {
|
|
|
+ menuId:this.rowObj.menuId
|
|
|
+ }
|
|
|
+ this.delData(params)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ commonCancel () {
|
|
|
+ this.modalStatus = false
|
|
|
+ },
|
|
|
+ // 启用 关闭/接口
|
|
|
+ getisEnableStatus (params) {
|
|
|
+ this.$post('metroapi/menu/update/enabled',params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ if (params.isEnable == 0) {
|
|
|
+ if (this.isClickOrg) {
|
|
|
+ this.currentMenuList.isEnable = 0
|
|
|
+ } else {
|
|
|
+ this.rowObj.isEnable = 0
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.isClickOrg) {
|
|
|
+ this.currentMenuList.isEnable = 1
|
|
|
+ } else {
|
|
|
+ this.rowObj.isEnable = 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.modalStatus = false
|
|
|
+ } else {
|
|
|
+ if (this.isClickOrg) {
|
|
|
+ this.currentMenuList.isEnable = 0
|
|
|
+ } else {
|
|
|
+ this.rowObj.isEnable = 0
|
|
|
+ }
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delData (params) {
|
|
|
+ this.$get('metroapi/menu/delete', params).then(res=>{
|
|
|
+ if (res.httpCode == 1 ){
|
|
|
+ this.modalStatus = false
|
|
|
+ this.$emit('changeTree',this.rowObj.parentMenuId)
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.info(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="stylus">
|
|
|
+.content-main-manage {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.content-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #173B77;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.content-top-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0185EA;
|
|
|
+ padding-left: 8px;
|
|
|
+ border-left: 3px solid #0185EA;
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+.common-add-btn-left {
|
|
|
+ margin-right: 26px;
|
|
|
+}
|
|
|
+>>> .common-form-list {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+>>> .common-form-list .ivu-form-item{
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+>>> .common-form-list .ivu-form-item-content {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+>>> .common-form-list .iconfont {
|
|
|
+ margin-left: 18px;
|
|
|
+ color: #259FF8;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.form-item-bot-left {
|
|
|
+ color: #0180E1;
|
|
|
+ text-decoration: underline;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.form-item-bot-right {
|
|
|
+ color: #0180E1;
|
|
|
+}
|
|
|
+.form-item-save {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+.form-item-init {
|
|
|
+ border: 1px solid #133263;
|
|
|
+ border-radius: 4px;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 7PX;
|
|
|
+}
|
|
|
+.search-list {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.search-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .ivu-select {
|
|
|
+ width: 150px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .ivu-select-single .ivu-select-selection {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ >>> .ivu-input {
|
|
|
+ width: 180px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ >>> .ivu-date-picker-editor .ivu-input {
|
|
|
+ width: 330px;
|
|
|
+ }
|
|
|
+ >>> .ivu-input-prefix, >>> .ivu-input-suffix {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ >>> .ivu-input-icon {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ >>> .date-picker-main .ivu-date-picker-header {
|
|
|
+ border-bottom: 0.0052083333rem solid #204384;
|
|
|
+ }
|
|
|
+}
|
|
|
+.btn-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.common-form {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.common-form-modal {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.manage-main-center {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.common-table {
|
|
|
+ max-height: 100%;
|
|
|
+}
|
|
|
+>>> .common-table .ivu-table th {
|
|
|
+ height: 51px;
|
|
|
+ }
|
|
|
+ >>> .common-table .ivu-table td {
|
|
|
+ height: 51px;
|
|
|
+ }
|
|
|
+ >>> .common-table .ivu-spin-fix {
|
|
|
+ top: 51px;
|
|
|
+ }
|
|
|
+ >>> .app-table .ivu-spin-fix {
|
|
|
+ height: calc(100vh - 550px);
|
|
|
+ }
|
|
|
+ >>> .ivu-table-tip {
|
|
|
+ background: url('../../../assets/images/noData.png') no-repeat center;
|
|
|
+}
|
|
|
+>>> .app-table .ivu-table-tip {
|
|
|
+ height: calc(100vh - 550px);
|
|
|
+ }
|
|
|
+ >>> .common-table .ivu-table-tip table {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+ >>> .modal-table {
|
|
|
+ overflow: auto !important;
|
|
|
+ }
|
|
|
+ >>> .modal-table .ivu-spin-fix {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ >>> .modal-table .ivu-table-tip {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+.common-page {
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+.common-page-total {
|
|
|
+ color: #fff;
|
|
|
+ padding-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ span {
|
|
|
+ color #409EFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+.ivu-btn.disabled, .ivu-btn.disabled.active, .ivu-btn.disabled:active, .ivu-btn.disabled:focus, .ivu-btn.disabled:hover, .ivu-btn[disabled], .ivu-btn[disabled].active, .ivu-btn[disabled]:active, .ivu-btn[disabled]:focus, .ivu-btn[disabled]:hover, fieldset[disabled] .ivu-btn, fieldset[disabled] .ivu-btn.active, fieldset[disabled] .ivu-btn:active, fieldset[disabled] .ivu-btn:focus, fieldset[disabled] .ivu-btn:hover {
|
|
|
+ color: #e7e7e7;
|
|
|
+ background-color: #a3a3a3;
|
|
|
+ border-color: #a3a3a3;
|
|
|
+}
|
|
|
+.common-form-item-text {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #85A3D4;
|
|
|
+}
|
|
|
+/* 对话框里的input里的placeholder样式修改 */
|
|
|
+/deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
|
|
|
+ color: #718EBD;
|
|
|
+}
|
|
|
+/deep/ .ivu-input::-moz-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{ /* Mozilla Firefox 19+ */
|
|
|
+ color: #718EBD;
|
|
|
+}
|
|
|
+/deep/ .ivu-input::-moz-placeholde, /deep/ .ivu-input-number-input::-webkit-input-placeholderr{ /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #718EBD;
|
|
|
+}
|
|
|
+/deep/ .ivu-input::-ms-input-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{ /* Internet Explorer 10-11 */
|
|
|
+ color: #718EBD;
|
|
|
+}
|
|
|
+</style>
|