Commit 040bb8aa authored by 周远喜's avatar 周远喜

产品发布成功。

parent d9d6b1f3
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false" :label-width="90">
<Row>
<FormItem label="类型" prop="typeid">
<Select v-model="formValidate.typeid" placeholder="请选择" style="width:240px;">
<Option v-for="(item,index) in alltype " :key="item.index" :value="item.value">{{item.label}}</Option>
</Select>
</FormItem>
</Row>
<Row>
<FormItem label="名称" prop="name">
<Input v-model="formValidate.name" style="width:240px;"></Input>
</FormItem>
</Row>
<Row>
<FormItem label="描述" prop="description">
<Input v-model="formValidate.description" style="width:240px;"></Input>
</FormItem>
</Row>
<!-- <FormItem label="编号" prop="number">
<Input v-model="formValidate.number" number></Input>
</FormItem> -->
</Form>
</template>
<script>
export default {
name:'addDictionary',
props:['alltype'],
data(){
return {
formValidate:{typeid:'',name:'',description:''},
ruleValidate:{
name:[{required: true}],
// number:[{required: true,type:'number'}],
typeid:[{required: true}]
}
}
}
}
</script>
<style scoped>
.ivu-form-item {width:48%;display:inline-block;}
.ivu-form-item:nth-child(odd) {
margin-left: 10px
}
</style>
\ No newline at end of file
<template>
<div>
<div class="contentRight">
<label>类型:</label>
<Select v-model="model1" @on-change="change" placeholder="请选择" style="width: 200px">
<Option v-for="(item,index) in selectdata" :key="item.index" :value="item.value">{{item.label}}</Option>
</Select>
<div style="float:right" class="paddingbtn">
<Button type="primary" @click="add('formValidate')">新增</Button>
<!-- <Button type="primary" @click="edit">编辑</Button>
<Button type="primary" @click="del">删除</Button> -->
</div>
<tb :tbPro="tbPro" ref="table" v-on:rowclick="rowclick" class="margin-top-10"></tb>
</div>
<Modal v-model="modal1" title="新增字典数据" :width="440" :mask-closable="false"
:loading="myloading"
ok-text="保存" cancel-text="取消" @on-ok="ok('formValidate')" @on-cancel='cancel'
>
<add-dictionary ref="datadictionary" :alltype="selectdata"></add-dictionary>
<!-- <div slot="footer" style="text-align:center">
<Button type="primary" @click="ok('formValidate')">保存</Button>
<Button
type="primary"
style="border-color: rgb(204, 204, 204);background-color:white;color:black"
@click="cancel"
>取消</Button>
</div> -->
</Modal>
<myconfirm ref="mysel" v-on:confirmok="okmysel" v-on:confirmcancel="cancelmysel"></myconfirm>
</div>
</template>
<script>
import tb from '../roleManagent/components/tb'
import addDictionary from './components/add'
import myconfirm from '../../processDesign/productTree/components/myconfirm'
import service from '@/plugins/request'
export default {
components:{tb,addDictionary,myconfirm},
data(){
return {
myloading:true,
model1:'',
modal1:false,
isEdit:false,
formValidate1:{},
keyid:0,
clickdata:{},
//xia la
selectdata:[
{
value:'产品类型',
label:'产品类型'
},
{
value:'产品分类',
label:'产品分类'
},
{
value:'工艺类型',
label:'工艺类型'
},
{
value:'工艺阶段',
label:'工艺阶段'
},
{
value:'产品型号',
label:'产品型号'
},
],
//表格数据和属性
tbPro:{
height:"",
isBorder: true,
stripe: true,//斑马纹
highlight:true,//高亮显示
columns: [
{
type: 'index',
width: 60,
align: 'center'
},
{
title: '名称',
key: 'name'
},
{
title: '描述',
key: 'description'
},
{
title: '编码',
key: 'code'
},
{
title: '操作',
key: 'action',
align: 'center',
width:400,
render: (h, params) => {
return h('div', [
h(
'span',
{
props: {
type: 'text',
ghost:true
},
style: {
color: '#249E91',
marginRight:"5px",
cursor:"pointer"
},
on: {
click: () => {
this.edit(params)
}
}
},
'编辑'
),
h(
'span',
{
props: {
type: 'text',
ghost:true
},
style: {
color: '#F56C6C',
marginRight:"5px",
cursor:"pointer"
},
on: {
click: () => {
this.del(params)
}
}
},
'删除'
)
])
}
}
],
data: [
]
}
}
},
created(){
var url=`${systemUrl}/DictionaryType/GetPaged`
service.get(`${url}`).then(response=>{
//console.log(response.result.items)
this.selectdata=response.result.items
this.model1=this.selectdata[0].value
this.loaddata(this.model1)
});
this.tbPro.height = window.innerHeight - 180;
},
mounted(){
window.onresize = () => {
return (() => {
this.tbPro.height = window.innerHeight - 180;
})()
}
},
computed:{
alldata:function(){
return this.tbPro.data
}
},
methods:{
loaddata(id){
var url=`${systemUrl}/Dictionary/GetPaged`
service.get(`${url}`,{params:{TypeId:id}}).then(response=>{
this.tbPro.data=response.result.items
})
},
change(data){
// console.log(data);
this.loaddata(data)
},
add:function(name){
this.isEdit=false;
var a = this.$refs.datadictionary;
a.$refs[name].resetFields();
this.modal1=true;
this.$refs.datadictionary.formValidate={typeid:'',description:'',name:''}
},
edit(params){
var a = this.$refs.datadictionary;
a.$refs['formValidate'].resetFields();
this.modal1=true;
this.isEdit=true;
let {typeId,name,description,id,code}=params.row;
// console.log(typeId)
// console.log(number);
this.$refs.datadictionary.formValidate={typeid:typeId,name:name,description:description,id:id,code:code}
},
del(params){
console.log(params)
this.keyid=params.row.id
console.log(this.keyid)
this.$refs.mysel.confirmmodal=true;
},
okmysel(bl){
var url=`${systemUrl}/Dictionary/Delete?id=${this.keyid}`
service.delete(`${url}`).then(response=>{
if(response.success)
{
this.$Message.success('删除成功')
this.loaddata(this.model1)
}
}).catch(error=>{
this.$Message.error('删除失败')
})
this.$refs.mysel.confirmmodal=bl
},
cancelmysel(bl){
this.$refs.mysel.confirmmodal=bl
},
//保存增加修改
ok(name){
var a = this.$refs.datadictionary;
var url=`${systemUrl}/Dictionary/CreateOrUpdate`
var ar=this.alldata.find((val)=>{
return (val.name==this.$refs.datadictionary.formValidate.name)
})
if(ar){
this.$Message.error('已存在字典项的名字');
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
return;
}
a.$refs[name].validate((valid) => {
if (valid) {
this.formValidate1 = this.$refs.datadictionary.formValidate
if (this.isedit)
{
//this.formValidate1.id=
}
service.post(`${url}`,JSON.stringify({Dictionary:this.formValidate1})).then(response=>{
if(response.success){
this.$Message.success('保存成功')
this.loaddata(this.model1)
this.modal1 = false
}
}).catch(error=>{
//console.log(123)
// console.log(error)
this.$Message.error('保存失败')
})
} else {
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
this.$Message.error('请输入必填项')
}
})
},
cancel(){
this.modal1=false;
},
rowclick(data,index){
console.log(typeof(data));
this.clickdata=data;
// console.log(this.clickdata);
}
}
}
</script>
<style scoped>
</style>
import api from '@/plugins/request'
const u=(path)=>`${systemUrl}/Dictionary/${path}`
export default {
getChildren(id) {
return api.get(u("GetChildren"), { id })
},
getTree(){
return api.get(u('GetTree'))
},
setColor(paras) {
return api.post(u("SetColor"), {Dictionary:paras})
},
setSort(paras) {
return api.post(u("SetSort"), paras)
},
save(paras) {
return api.post(u("CreateOrUpdate"), {Dictionary:paras})
},
}
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker v-model="entity.color" slot="prepend" transfer size="small" transfer recommend />
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row>
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
export default {
name: 'Edit',
data() {
return {
entity: this.v,
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }],
code: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
v: Object
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
var url2 = `${systemUrl}/Dictionary/createorupdate`
this.$api.post(url2, { Dictionary: this.entity }).then((r) => {
if (r.success) {
this.$Message.success('保存成功')
this.$emit('on-ok')
}
})
}
})
},
handleClose() {
this.$emit('on-close')
}
},
watch: {
v(v) {
this.entity = this.v
console.info(this.entity)
}
}
}
</script>
<template>
<Layout class="full">
<Sider hide-trigger :style="{background: '#fff'}" class="menu" width="240" >
<h3 class="title">
数据字典
<ButtonGroup class="fr" size="small">
<Button>
<Icon
:type="expand?'md-arrow-dropright':'md-arrow-dropdown'"
size="16"
@click="toggle"
title="展开/合并"
/>
</Button>
<Button>
<Icon type="md-refresh" size="16" @click="loadTree" title="刷新" />
</Button>
</ButtonGroup>
</h3>
<div class="tree">
<Tree :data="tree" @on-select-change="change" />
</div>
</Sider>
<Content class="content">
<Tools>
<Breadcrumb style="display:inline-block">
<BreadcrumbItem v-for="(li,i) in names" :key="i">{{li}}</BreadcrumbItem>
</Breadcrumb>
<template slot="btns">
<span class="mr20" v-if="node.typeId==2">
索引:
<a
data-clipboard-action="copy"
:data-clipboard-text="node.code"
@click="copy"
id="code"
class="tag-read"
>{{node.code}}</a>
</span>
<Button type="default" @click="setRoot">返回顶级</Button>
</template>
</Tools>
<div class="auto">
<!-- <Dictionary code="system.dictionary.typeId" v-model="code" class="w200"/> {{code}}
<a @click="code='3'">up</a>-->
<Table
border
:columns="columns"
:data="data"
:draggable="edit==-1"
class="tableCommon"
@on-drag-drop="onDragDrop"
>
<template slot-scope="{ row, index }" slot="typeId">
<state code="system.dictionary.typeId" type="text" :value="row.typeId"></state>
</template>
<template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template>
<template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template>
<template slot-scope="{ row, index }" slot="name">
<span v-if="edit!=index" v-text="row.name"></span>
<Input v-else type="text" v-model.trim="cur.name" />
</template>
<template slot-scope="{ row, index }" slot="color">
<div v-if="edit!=index">
<ColorPicker
:value="row.color||''"
transfer
recommend
@on-change="setColor($event,row,index)"
/>
</div>
<div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div>
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon
:type="row.icon"
@on-change="setColor($event,row,index)"
/>
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<span v-if="edit!=index" v-text="row.code"></span>
<Input v-else type="text" v-model.trim="cur.code" />
</template>
<template slot-scope="{ row, index }" slot="action">
<div v-if="edit!=index" class="action">
<op class="edit" @click="editRow(row,index)">编辑</op>
<!-- <op class="remove" @click="delRow(row,index)">删除</op> -->
</div>
<div class="action" v-else>
<op class="edit" @click="save">保存</op>
<op class="remove" @click="remove">删除</op>
</div>
</template>
</Table>
<Button type="primary" :disabled="edit!=-1" long @click="addNew" class="mt10">添加</Button>
<Alert type="info" class="mt10" v-if="data.length>1&&edit==-1">提示: 支持拖拽排序,数据未保存时不可拖拽排序。</Alert>
</div>
<Modal v-model="editModal" :title="editTitle" footer-hide>
<Edit :v="editModel" @on-close="editModal=false" @on-ok="editOk" />
</Modal>
</Content>
</Layout>
</template>
<script>
import Edit from './components/edit'
import api from './api.js'
import Clipboard from 'clipboard'
const root = {
id: 0,
typeId: -1,
title: '顶级节点',
code: ''
}
export default {
data() {
return {
code: '2',
expand: false,
editModal: false,
editModel: {
color: ''
},
editTitle: '编辑',
node: root,
color4: '',
cur: null,
names: [root.title],
types: ['系统', '分类', '字典', '字典项'],
addName: '添加',
tree: [],
edit: -1,
data: [],
columns: [
{
type: 'index',
width: 60,
align: 'center'
},
{
title: '类别',
key: 'typeId',
width: 100,
align: 'center',
slot: 'typeId'
},
{
title: '颜色',
key: 'color',
width: 100,
align: 'center',
slot: 'color'
},
{
title: '名称',
key: 'name',
width: 150,
slot: 'name'
},
{
title: '编码',
key: 'code',
slot: 'code'
},
{
title: '图标',
key: 'icon',
slot: 'icon'
},
{
title: '描述',
key: 'description'
},
{
title: '状态',
key: 'status',
width: 100,
align: 'center',
slot: 'status'
},
{
title: '锁定',
key: 'isStatic',
width: 100,
align: 'center',
slot: 'isStatic'
},
{
title: '操作',
key: 'action',
width: 160,
align: 'center',
slot: 'action'
}
]
}
},
components: { Edit },
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
created() {
this.load()
this.loadTree()
},
methods: {
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', (e) => {
this.$Message.success('复制成功:' + this.node.code)
clipboard.destroy()
})
clipboard.on('error', (e) => {
// 不支持复制
console.log('该浏览器不支持自动复制') // 释放内存
clipboard.destroy()
})
},
editRow(row, index) {
this.editTitle = '编辑'
this.editModal = true
this.editModel = row
},
toggle() {
this.expand = !this.expand
this.loadTree()
},
editOk() {
this.load()
this.editModal = false
},
delRow(row, index) {
var url = `${systemUrl}/Dictionary/Delete?id=${row.id}`
this.$Modal.confirm({
title: '操作确认',
content: '确定要删除吗?',
onOk: () => {
this.$api
.delete(`${url}`)
.then((r) => {
if (r.success) {
this.$Message.success('删除成功')
this.load()
}
})
.catch((error) => {
this.$Message.error('删除失败')
})
}
})
},
change(nodes, node) {
// console.warn(node,nodes)
this.node = {
id: node.id,
typeId: node.data.typeId,
title: node.title,
code: node.data.code
}
// this.names = [node.title]
let cur = node
let titles = []
while (cur) {
titles.push(cur.title)
cur = cur.parent
}
this.names = titles.reverse()
this.load(node.id)
},
setRoot() {
this.load(0)
this.loadTree()
this.node = root
},
async setColor(v, row, i) {
let r = await api.setColor({ id: row.id, color: v })
if (r.success) {
this.$Message.success('颜色设置成功!')
row.color = v
} else {
this.$Message.error('颜色设置失败!')
row.color = ''
}
},
async load() {
this.edit = -1
let r = await api.getChildren(this.node.id)
this.data = r.result
},
async loadTree() {
let r = await api.getTree(this.node.id)
if (r.success) {
let items = r.result
var expand = this.expand
setParent(null, items)
function setParent(parent, items) {
items.map((u) => {
u.parent = parent
u.expand = expand
if (u.children) {
setParent(u, u.children)
}
})
}
this.tree = items
}
},
onDragDrop(a, b) {
this.data.splice(b, 1, ...this.data.splice(a, 1, this.data[b]))
let ids = []
this.data.map((u) => {
ids.push(u.id)
})
if (ids.length > 1) {
api.setSort({ ids }).then((r) => {
if (!r.success) {
this.$Message.error('排序失败')
this.load()
}
})
}
},
addNew() {
this.edit = this.data.length
this.cur = {
upId: this.node.id,
name: '',
code: '',
color: '',
status: 0,
isStatic: 0,
typeId: this.node.typeId + 1,
priority: this.edit
}
this.data.push(this.cur)
},
remove() {
this.edit = -1
// this.load(this.node.id)
this.data.pop()
},
save() {
if (this.cur.name == '') {
this.$Message.error('名称不能为空')
return
}
if (this.cur.code == '') {
this.$Message.error('值不能为空')
return
}
api.save(this.cur).then((r) => {
console.warn(r)
if (r.success) {
this.$Message.success('添加成功')
this.load()
}
})
}
}
}
</script>
<style lang="less" scoped>
.full {
margin-top: 0;
}
.ivu-color-picker-confirm {
.ivu-input {
width: 130px;
height: 30px;
float: left;
}
.ivu-btn-small {
height: 30px !important;
}
}
</style>
<template>
<div>
<Modal
class="add-show-memu"
v-model="showMenu"
:title="title"
:width="width"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="saveOk"
@on-cancel="saveCancel"
>
<div class="body-memu">
<div class="memu-left" :class="{ active: isActive, memuLeft: hasError }">
<Form :model="addModel" :label-width="100" inline>
<FormItem label="类型">
<RadioGroup v-model="addModel.type">
<Radio label="1">目录</Radio>
<Radio label="2">菜单</Radio>
</RadioGroup>
</FormItem>
<FormItem label="上级">
<Input
disabled
style="width:300px;"
size="large"
v-model.trim="addModel.upName"
placeholder="请输入上级"
/>
</FormItem>
<FormItem label="名称">
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.name"
placeholder="请输入名称"
/>
</FormItem>
<FormItem label="地址">
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.url"
placeholder="请输入请求地址"
/>
</FormItem>
<FormItem label="排序">
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.priority"
placeholder="请输入排序"
/>
</FormItem>
<FormItem label="打开方式">
<dictionary code="system.menu.target" v-model="addModel.target"></dictionary>
</FormItem>
<FormItem label="图标">
<!-- <Input
style="width:300px;"
size="large"
v-model.trim="addModel.icon"
placeholder="请输入图标"
/>-->
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.icon"
placeholder="请输入图标"
>
<span slot="prepend">
<a @click="iconModals" class="setIcon">
<Icon :type="addModel.icon==''?'md-add':addModel.icon"></Icon>
</a>
</span>
</Input>
</FormItem>
<FormItem label="状态">
<RadioGroup v-model="addModel.status">
<Radio :label="1">显示</Radio>
<Radio :label="2">隐藏</Radio>
</RadioGroup>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width:300px;"
size="large"
v-model.trim="addModel.remark"
/>
</FormItem>
</Form>
</div>
<div class="memu-right" v-show="memuRight">
<div class="tian-jia">添加权限按钮</div>
<div class="quan-xian">
<!-- <Button type="primary" icon="md-add" @click="addTutton">添加按钮</Button> -->
<Button @click="customButton">自定义按钮</Button>
</div>
<div class="an-niu" v-for="(item,index) in listData" :key="index">
<Row>
<Col :span="12">{{item.name}}</Col>
<Col :span="11">{{item.url}}</Col>
<Col :span="1" style=" text-align: right">
<div class="icon-close" @click="closeDelete(item.index)">
<Icon type="md-close" />
</div>
</Col>
</Row>
</div>
</div>
</div>
</Modal>
<Modal
v-model="showCatalog"
:title="titleEit"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="catalogOk"
@on-cancel="catalogCancel"
>
<div style="padding:20px 0">
<Form :model="catalogModel" :label-width="100" inline>
<FormItem label="类型">
<RadioGroup v-model="catalogModel.type">
<Radio :label="1">目录</Radio>
<Radio :label="2">菜单</Radio>
</RadioGroup>
</FormItem>
<FormItem label="上级">
<Input
disabled
style="width:240px;"
size="large"
v-model.trim="catalogModel.upName"
placeholder="请输入上级"
/>
</FormItem>
<FormItem label="名称">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.name"
placeholder="请输入名称"
/>
</FormItem>
<FormItem label="地址">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.url"
placeholder="请输入请求地址"
/>
</FormItem>
<FormItem label="排序">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.priority"
placeholder="请输入排序"
/>
</FormItem>
<FormItem label="图标">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.icon"
placeholder="请输入图标"
>
<span slot="prepend">
<a @click="iconModals" class="setIcon">
<Icon :type="catalogModel.icon==null?'md-add':catalogModel.icon"></Icon>
</a>
</span>
</Input>
</FormItem>
<FormItem label="状态">
<RadioGroup v-model="catalogModel.status">
<Radio :label="1">显示</Radio>
<Radio :label="2">隐藏</Radio>
</RadioGroup>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width: 240px"
size="large"
v-model.trim="addModel.remark"
/>
</FormItem>
</Form>
</div>
</Modal>
<Modal
v-model="btnShow"
title="添加按钮"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="addSaveOk"
@on-cancel="addSaveCancel"
>
<div style="padding:15px 30px;">
<!-- <Input placeholder="请输入查询条件" style="width:340px">
<Icon type="ios-search" slot="suffix" @click="search" />
</Input>-->
<AutoComplete
v-model="value1"
:data="data1"
@on-search="search"
@on-select="loadActions"
placeholder="input here"
style="width:340px"
>
<Option
v-for="(item,index) in data1"
:value="item.title"
:key="item.index"
>{{ item.title }}</Option>
</AutoComplete>
<Tree :data="dataTree" show-checkbox></Tree>
</div>
</Modal>
<Modal
v-model="customShow"
:title="customTitle"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="customOk"
@on-cancel="customCancel"
>
<div style="height:250px;padding:20px 0">
<Form :model="customModel" :label-width="100" inline>
<FormItem label="名称">
<Input
style="width:240px;"
size="large"
v-model.trim="customModel.name"
placeholder="请输入名称"
/>
</FormItem>
<FormItem label="编码">
<Input
style="width:240px;"
size="large"
v-model.trim="customModel.url"
placeholder="编码"
/>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width: 240px"
size="large"
v-model.trim="customModel.remark"
/>
</FormItem>
</Form>
</div>
</Modal>
<icons ref="iconsNew" @iconName="iconName"></icons>
</div>
</template>
<script>
import icons from './icons'
export default {
name: '',
components: {
icons
},
data() {
return {
customTitle: '自定义按钮',
titleEit: '编辑目录/菜单',
value1: '',
data1: [],
btnShow: false,
title: '新建菜单',
memuRight: false,
width: 1000,
isActive: false,
hasError: true,
listData: [],
addShow: false,
customShow: false,
showMenu: false,
showCatalog: false,
customModel: {
name: '',
url: '',
type: '3',
remark: ''
},
addModel: {
type: '1',
name: '',
icon: '',
priority: '',
upName: '',
up_id: '',
status: '1',
remark: '',
target: ''
},
id: '',
up_id: '',
catalogModel: {
type: '1',
name: '',
icon: 'md-add',
priority: '',
upName: '',
up_id: '',
status: '1',
remark: ''
},
dataTree: []
}
},
props: ['dataChild'],
created() {},
watch: {
addModel: {
handler(newName) {
if (newName.type == '1') {
this.memuRight = false
this.width = 500
this.isActive = false
this.hasError = true
this.title = '新建目录'
} else if (newName.type == '2') {
this.memuRight = true
this.width = 1000
this.isActive = true
this.hasError = false
this.title = '新建菜单'
}
},
// immediate: true,
deep: true
},
dataChild(v) {
this.id = v.id
this.up_id = v.id
this.catalogModel = v //将新得l赋值给catalogModel;
this.customModel = v
}
},
methods: {
iconModals() {
this.$refs.iconsNew.iconModal = true
},
iconName(name) {
this.addModel.icon = name
this.catalogModel.icon = name
},
//添加按钮
addTutton() {
this.btnShow = true
// this.$http.jurisdiction.listTreeBtn().then((res) => {
// this.dataTree = res.result
// })
},
//添加按钮确认
addSaveOk() {},
//添加按钮取消
addSaveCancel() {
this.btnShow = false
},
//异步加载树
loadData(item, callback) {
console.log(item)
let paras = {
loading: false,
name: item.title,
TypeName: item.typeName
}
console.info(item)
this.$http.jurisdiction.listTreeBtn(paras).then((res) => {
console.log(res)
res.result.map((ul) => {
ul.loading = false
ul.chidren = []
})
item.children = res.result
console.warn(res.result)
item.loading = true
callback()
})
},
treeSelect(val) {},
//自定义按钮
customButton() {
this.customModel = {}
this.customShow = true
this.customTitle = '自定义按钮'
},
//添加按钮搜索
search() {
if (this.value1.length > 2) {
this.$http.jurisdiction.getApis({ name: this.value1 }).then((r) => {
console.warn(r.result)
this.data1 = r.result
})
}
},
loadActions() {
this.$http.jurisdiction.getActions({ name: this.value1 }).then((r) => {
console.warn(r.result)
this.dataTree = r.result
})
},
//删除按钮列表每行
closeDelete(index) {
console.log(index)
},
//新增
saveOk() {
console.log(this.addModel)
let actions = []
if (this.addModel.type == '1') {
actions = []
} else if (this.addModel.type == '2') {
if (this.listData.length > 0) {
actions = this.listData
} else {
actions = []
}
}
this.addModel.up_id = this.id
delete this.addModel.id
var data = {
actions: actions,
privilege: this.addModel
}
this.$http.jurisdiction.add(data).then((res) => {
this.$nextTick(() => {
this.$emit('listTree')
})
})
},
saveCancel() {
this.showMenu = false
},
customOk() {
if (this.customTitle == '自定义按钮') {
let obj = {
name: this.customModel.name,
url: this.customModel.url,
type: this.customModel.type,
remark: this.customModel.remark
}
this.listData.push(obj)
}
if (this.customTitle == '编辑按钮') {
let actions = []
var data = {
actions: actions,
privilege: this.catalogModel
}
this.addModel.id = this.id
this.addModel.up_id = this.up_id
this.$http.jurisdiction.add(data).then((res) => {
this.$nextTick(() => {
this.$emit('listTree')
})
})
}
},
customCancel() {
this.customShow = false
},
//编辑取消
catalogCancel() {
this.showCatalog = false
},
//编辑目录或菜单
catalogOk() {
let actions = []
var data = {
actions: actions,
privilege: this.catalogModel
}
this.addModel.id = this.id
this.addModel.up_id = this.up_id
this.$http.jurisdiction.add(data).then((res) => {
this.$emit('listTree')
this.showCatalog = false
})
}
}
}
</script>
<style lang="less" scoped>
.body-memu {
width: 100%;
display: -webkit-flex;
display: flex;
.memu-left {
padding: 20px 0;
}
.active {
width: 45%;
border-right: 1px solid #e4e6ed;
}
.memuLeft {
width: 100%;
border: none;
}
.memu-right {
width: 55%;
margin: 0 30px;
padding: 30px 0;
.tian-jia {
border-left: 3px solid #515a6e;
padding-left: 5px;
height: 15px;
line-height: 15px;
}
.quan-xian {
width: 100%;
margin: 15px 0 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #e4e6ed;
}
.an-niu {
width: 100%;
height: 30px;
line-height: 30px;
// display: -webkit-flex;
// display: flex;
// justify-content: space-between;
.icon-close {
color: #ff7a8b;
font-size: 18px;
cursor: pointer;
}
}
}
}
</style>
<style>
.add-show-memu .ivu-modal-body {
padding: 0 !important;
}
</style>
\ No newline at end of file
<template>
<div>
<Modal v-model="iconModal" title="设置图标">
<div id="icons">
<a v-for="(icon,i) in iconList" :key="i" @click="setIcon(icon)" :title="icon">
<Icon :type="icon" size="36"></Icon>
</a>
</div>
<div slot="footer"></div>
</Modal>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
iconModal: false,
icons:
'ios-add,md-add,ios-add-circle,ios-add-circle-outline,md-add-circle,ios-alarm,ios-alarm-outline,md-alarm,ios-albums,ios-albums-outline,md-albums,ios-alert,ios-alert-outline,md-alert,ios-american-football,ios-american-football-outline,md-american-football,ios-analytics,ios-analytics-outline,md-analytics,logo-android,logo-angular,ios-aperture,ios-aperture-outline,md-aperture,logo-apple,ios-apps,ios-apps-outline,md-apps,ios-appstore,ios-appstore-outline,md-appstore,ios-archive,ios-archive-outline,md-archive,ios-arrow-back,md-arrow-back,ios-arrow-down,md-arrow-down,ios-arrow-dropdown,md-arrow-dropdown,ios-arrow-dropdown-circle,md-arrow-dropdown-circle,ios-arrow-dropleft,md-arrow-dropleft,ios-arrow-dropleft-circle,md-arrow-dropleft-circle,ios-arrow-dropright,md-arrow-dropright,ios-arrow-dropright-circle,md-arrow-dropright-circle,ios-arrow-dropup,md-arrow-dropup,ios-arrow-dropup-circle,md-arrow-dropup-circle,ios-arrow-forward,md-arrow-forward,ios-arrow-round-back,md-arrow-round-back,ios-arrow-round-down,md-arrow-round-down,ios-arrow-round-forward,md-arrow-round-forward,ios-arrow-round-up,md-arrow-round-up,ios-arrow-up,md-arrow-up,ios-at,ios-at-outline,md-at,ios-attach,md-attach,ios-backspace,ios-backspace-outline,md-backspace,ios-barcode,ios-barcode-outline,md-barcode,ios-baseball,ios-baseball-outline,md-baseball,ios-basket,ios-basket-outline,md-basket,ios-basketball,ios-basketball-outline,md-basketball,ios-battery-charging,md-battery-charging,ios-battery-dead,md-battery-dead,ios-battery-full,md-battery-full,ios-beaker,ios-beaker-outline,md-beaker,ios-beer,ios-beer-outline,md-beer,ios-bicycle,md-bicycle,logo-bitcoin,ios-bluetooth,md-bluetooth,ios-boat,ios-boat-outline,md-boat,ios-body,ios-body-outline,md-body,ios-bonfire,ios-bonfire-outline,md-bonfire,ios-book,ios-book-outline,md-book,ios-bookmark,ios-bookmark-outline,md-bookmark,ios-bookmarks,ios-bookmarks-outline,md-bookmarks,ios-bowtie,ios-bowtie-outline,md-bowtie,ios-briefcase,ios-briefcase-outline,md-briefcase,ios-browsers,ios-browsers-outline,md-browsers,ios-brush,ios-brush-outline,md-brush,logo-buffer,ios-bug,ios-bug-outline,md-bug,ios-build,ios-build-outline,md-build,ios-bulb,ios-bulb-outline,md-bulb,ios-bus,ios-bus-outline,md-bus,ios-cafe,ios-cafe-outline,md-cafe,ios-calculator,ios-calculator-outline,md-calculator,ios-calendar,ios-calendar-outline,md-calendar,ios-call,ios-call-outline,md-call,ios-camera,ios-camera-outline,md-camera,ios-car,ios-car-outline,md-car,ios-card,ios-card-outline,md-card,ios-cart,ios-cart-outline,md-cart,ios-cash,ios-cash-outline,md-cash,ios-chatboxes,ios-chatboxes-outline,md-chatboxes,ios-chatbubbles,ios-chatbubbles-outline,md-chatbubbles,ios-checkbox,ios-checkbox-outline,md-checkbox,md-checkbox-outline,ios-checkmark,md-checkmark,ios-checkmark-circle,ios-checkmark-circle-outline,md-checkmark-circle,md-checkmark-circle-outline,logo-chrome,ios-clipboard,ios-clipboard-outline,md-clipboard,ios-clock,ios-clock-outline,md-clock,ios-close,md-close,ios-close-circle,ios-close-circle-outline,md-close-circle,ios-closed-captioning,ios-closed-captioning-outline,md-closed-captioning,ios-cloud,ios-cloud-outline,md-cloud,ios-cloud-circle,ios-cloud-circle-outline,md-cloud-circle,ios-cloud-done,ios-cloud-done-outline,md-cloud-done,ios-cloud-download,ios-cloud-download-outline,md-cloud-download,md-cloud-outline,ios-cloud-upload,ios-cloud-upload-outline,md-cloud-upload,ios-cloudy,ios-cloudy-outline,md-cloudy,ios-cloudy-night,ios-cloudy-night-outline,md-cloudy-night,ios-code,md-code,ios-code-download,md-code-download,ios-code-working,md-code-working,logo-codepen,ios-cog,ios-cog-outline,md-cog,ios-color-fill,ios-color-fill-outline,md-color-fill,ios-color-filter,ios-color-filter-outline,md-color-filter,ios-color-palette,ios-color-palette-outline,md-color-palette,ios-color-wand,ios-color-wand-outline,md-color-wand,ios-compass,ios-compass-outline,md-compass,ios-construct,ios-construct-outline,md-construct,ios-contact,ios-contact-outline,md-contact,ios-contacts,ios-contacts-outline,md-contacts,ios-contract,md-contract,ios-contrast,md-contrast,ios-copy,ios-copy-outline,md-copy,ios-create,ios-create-outline,md-create,ios-crop,ios-crop-outline,md-crop,logo-css3,ios-cube,ios-cube-outline,md-cube,ios-cut,ios-cut-outline,md-cut,logo-designernews,ios-desktop,ios-desktop-outline,md-desktop,ios-disc,ios-disc-outline,md-disc,ios-document,ios-document-outline,md-document,ios-done-all,md-done-all,ios-download,ios-download-outline,md-download,logo-dribbble,logo-dropbox,ios-easel,ios-easel-outline,md-easel,ios-egg,ios-egg-outline,md-egg,logo-euro,ios-exit,ios-exit-outline,md-exit,ios-expand,md-expand,ios-eye,ios-eye-outline,md-eye,ios-eye-off,ios-eye-off-outline,md-eye-off,logo-facebook,ios-fastforward,ios-fastforward-outline,md-fastforward,ios-female,md-female,ios-filing,ios-filing-outline,md-filing,ios-film,ios-film-outline,md-film,ios-finger-print,md-finger-print,ios-flag,ios-flag-outline,md-flag,ios-flame,ios-flame-outline,md-flame,ios-flash,ios-flash-outline,md-flash,ios-flask,ios-flask-outline,md-flask,ios-flower,ios-flower-outline,md-flower,ios-folder,ios-folder-outline,md-folder,ios-folder-open,ios-folder-open-outline,md-folder-open,ios-football,ios-football-outline,md-football,logo-foursquare,logo-freebsd-devil,ios-funnel,ios-funnel-outline,md-funnel,ios-game-controller-a,ios-game-controller-a-outline,md-game-controller-a,ios-game-controller-b,ios-game-controller-b-outline,md-game-controller-b,ios-git-branch,md-git-branch,ios-git-commit,md-git-commit,ios-git-compare,md-git-compare,ios-git-merge,md-git-merge,ios-git-network,md-git-network,ios-git-pull-request,md-git-pull-request,logo-github,ios-glasses,ios-glasses-outline,md-glasses,ios-globe,ios-globe-outline,md-globe,logo-google,logo-googleplus,ios-grid,ios-grid-outline,md-grid,logo-hackernews,ios-hammer,ios-hammer-outline,md-hammer,ios-hand,ios-hand-outline,md-hand,ios-happy,ios-happy-outline,md-happy,ios-headset,ios-headset-outline,md-headset,ios-heart,ios-heart-outline,md-heart,md-heart-outline,ios-help,md-help,ios-help-buoy,ios-help-buoy-outline,md-help-buoy,ios-help-circle,ios-help-circle-outline,md-help-circle,ios-home,ios-home-outline,md-home,logo-html5,ios-ice-cream,ios-ice-cream-outline,md-ice-cream,ios-image,ios-image-outline,md-image,ios-images,ios-images-outline,md-images,ios-infinite,ios-infinite-outline,md-infinite,ios-information,md-information,ios-information-circle,ios-information-circle-outline,md-information-circle,logo-instagram,ios-ionic,ios-ionic-outline,md-ionic,ios-ionitron,ios-ionitron-outline,md-ionitron,logo-javascript,ios-jet,ios-jet-outline,md-jet,ios-key,ios-key-outline,md-key,ios-keypad,ios-keypad-outline,md-keypad,ios-laptop,md-laptop,ios-leaf,ios-leaf-outline,md-leaf,ios-link,ios-link-outline,md-link,logo-linkedin,ios-list,md-list,ios-list-box,ios-list-box-outline,md-list-box,ios-locate,ios-locate-outline,md-locate,ios-lock,ios-lock-outline,md-lock,ios-log-in,md-log-in,ios-log-out,md-log-out,ios-magnet,ios-magnet-outline,md-magnet,ios-mail,ios-mail-outline,md-mail,ios-mail-open,ios-mail-open-outline,md-mail-open,ios-male,md-male,ios-man,ios-man-outline,md-man,ios-map,ios-map-outline,md-map,logo-markdown,ios-medal,ios-medal-outline,md-medal,ios-medical,ios-medical-outline,md-medical,ios-medkit,ios-medkit-outline,md-medkit,ios-megaphone,ios-megaphone-outline,md-megaphone,ios-menu,ios-menu-outline,md-menu,ios-mic,ios-mic-outline,md-mic,ios-mic-off,ios-mic-off-outline,md-mic-off,ios-microphone,ios-microphone-outline,md-microphone,ios-moon,ios-moon-outline,md-moon,ios-more,ios-more-outline,md-more,ios-move,md-move,ios-musical-note,ios-musical-note-outline,md-musical-note,ios-musical-notes,ios-musical-notes-outline,md-musical-notes,ios-navigate,ios-navigate-outline,md-navigate,ios-no-smoking,ios-no-smoking-outline,md-no-smoking,logo-nodejs,ios-notifications,ios-notifications-outline,md-notifications,ios-notifications-off,ios-notifications-off-outline,md-notifications-off,md-notifications-outline,ios-nuclear,ios-nuclear-outline,md-nuclear,ios-nutrition,ios-nutrition-outline,md-nutrition,logo-octocat,ios-open,ios-open-outline,md-open,ios-options,ios-options-outline,md-options,ios-outlet,ios-outlet-outline,md-outlet,ios-paper,ios-paper-outline,md-paper,ios-paper-plane,ios-paper-plane-outline,md-paper-plane,ios-partly-sunny,ios-partly-sunny-outline,md-partly-sunny,ios-pause,ios-pause-outline,md-pause,ios-paw,ios-paw-outline,md-paw,ios-people,ios-people-outline,md-people,ios-person,ios-person-outline,md-person,ios-person-add,ios-person-add-outline,md-person-add,ios-phone-landscape,md-phone-landscape,ios-phone-portrait,md-phone-portrait,ios-photos,ios-photos-outline,md-photos,ios-pie,ios-pie-outline,md-pie,ios-pin,ios-pin-outline,md-pin,ios-pint,ios-pint-outline,md-pint,logo-pinterest,ios-pizza,ios-pizza-outline,md-pizza,ios-plane,ios-plane-outline,md-plane,ios-planet,ios-planet-outline,md-planet,ios-play,ios-play-outline,md-play,logo-playstation,ios-podium,ios-podium-outline,md-podium,ios-power,ios-power-outline,md-power,ios-pricetag,ios-pricetag-outline,md-pricetag,ios-pricetags,ios-pricetags-outline,md-pricetags,ios-print,ios-print-outline,md-print,ios-pulse,ios-pulse-outline,md-pulse,logo-python,ios-qr-scanner,md-qr-scanner,ios-quote,ios-quote-outline,md-quote,ios-radio,ios-radio-outline,md-radio,ios-radio-button-off,md-radio-button-off,ios-radio-button-on,md-radio-button-on,ios-rainy,ios-rainy-outline,md-rainy,ios-recording,ios-recording-outline,md-recording,logo-reddit,ios-redo,ios-redo-outline,md-redo,ios-refresh,md-refresh,ios-refresh-circle,ios-refresh-circle-outline,md-refresh-circle,ios-remove,md-remove,ios-remove-circle,ios-remove-circle-outline,md-remove-circle,ios-reorder,md-reorder,ios-repeat,md-repeat,ios-resize,md-resize,ios-restaurant,ios-restaurant-outline,md-restaurant,ios-return-left,md-return-left,ios-return-right,md-return-right,ios-reverse-camera,ios-reverse-camera-outline,md-reverse-camera,ios-rewind,ios-rewind-outline,md-rewind,ios-ribbon,ios-ribbon-outline,md-ribbon,ios-rose,ios-rose-outline,md-rose,logo-rss,ios-sad,ios-sad-outline,md-sad,logo-sass,ios-school,ios-school-outline,md-school,ios-search,ios-search-outline,md-search,ios-send,ios-send-outline,md-send,ios-settings,ios-settings-outline,md-settings,ios-share,ios-share-outline,md-share,ios-share-alt,ios-share-alt-outline,md-share-alt,ios-shirt,ios-shirt-outline,md-shirt,ios-shuffle,md-shuffle,ios-skip-backward,ios-skip-backward-outline,md-skip-backward,ios-skip-forward,ios-skip-forward-outline,md-skip-forward,logo-skype,logo-snapchat,ios-snow,ios-snow-outline,md-snow,ios-speedometer,ios-speedometer-outline,md-speedometer,ios-square,ios-square-outline,md-square,md-square-outline,ios-star,ios-star-outline,md-star,ios-star-half,md-star-half,md-star-outline,ios-stats,ios-stats-outline,md-stats,logo-steam,ios-stopwatch,ios-stopwatch-outline,md-stopwatch,ios-subway,ios-subway-outline,md-subway,ios-sunny,ios-sunny-outline,md-sunny,ios-swap,md-swap,ios-switch,ios-switch-outline,md-switch,ios-sync,md-sync,ios-tablet-landscape,md-tablet-landscape,ios-tablet-portrait,md-tablet-portrait,ios-tennisball,ios-tennisball-outline,md-tennisball,ios-text,ios-text-outline,md-text,ios-thermometer,ios-thermometer-outline,md-thermometer,ios-thumbs-down,ios-thumbs-down-outline,md-thumbs-down,ios-thumbs-up,ios-thumbs-up-outline,md-thumbs-up,ios-thunderstorm,ios-thunderstorm-outline,md-thunderstorm,ios-time,ios-time-outline,md-time,ios-timer,ios-timer-outline,md-timer,ios-train,ios-train-outline,md-train,ios-transgender,md-transgender,ios-trash,ios-trash-outline,md-trash,ios-trending-down,md-trending-down,ios-trending-up,md-trending-up,ios-trophy,ios-trophy-outline,md-trophy,logo-tumblr,logo-tux,logo-twitch,logo-twitter,ios-umbrella,ios-umbrella-outline,md-umbrella,ios-undo,ios-undo-outline,md-undo,ios-unlock,ios-unlock-outline,md-unlock,logo-usd,ios-videocam,ios-videocam-outline,md-videocam,logo-vimeo,ios-volume-down,md-volume-down,ios-volume-mute,md-volume-mute,ios-volume-off,md-volume-off,ios-volume-up,md-volume-up,ios-walk,md-walk,ios-warning,ios-warning-outline,md-warning,ios-watch,md-watch,ios-water,ios-water-outline,md-water,logo-whatsapp,ios-wifi,ios-wifi-outline,md-wifi,logo-windows,ios-wine,ios-wine-outline,md-wine,ios-woman,ios-woman-outline,md-woman,logo-wordpress,logo-xbox,logo-yahoo,logo-yen,logo-youtube,ios-loading'
}
},
computed: {
iconList() {
return this.icons.split(',')
}
},
methods: {
setIcon(name) {
this.$emit('iconName', name)
this.iconModal = false
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div class="jurisdiction">
<div class="jurisdiction-form">
<!-- <Form :model="formItem" :label-width="70" inline>
<FormItem label="菜单名称">
<Input v-model="formItem.name" placeholder="请输入菜单名"></Input>
</FormItem>
<FormItem label="菜单状态">
<Select v-model="formItem.status" placeholder="请选择菜单状态">
<Option value="1">显示</Option>
<Option value="2">隐藏</Option>
</Select>
</FormItem>
<FormItem :label-width="0">
<Button type="primary" @click="listTree">查询</Button>
</FormItem>
</Form> -->
<div class="right-btn">
<Button type="primary" @click="add">新建系统</Button>
</div>
</div>
<div>
<div class="margin-top-10">
<tree-grid
:items="data"
ref="table"
:columns="columns"
@on-row-click="rowClick"
@on-selection-change="selectionClick"
@on-sort-change="sortClick"
></tree-grid>
</div>
</div>
<!-- 新增系统弹框 -->
<Modal
v-model="addShow"
:title=" titleAdd"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="saveOk"
@on-cancel="saveCancel"
>
<div style="height:250px;padding:20px 0">
<Form :model="addModel" :label-width="120" inline>
<FormItem label="系统名称">
<Input
style="width:240px;"
size="large"
v-model.trim="addModel.name"
placeholder="请输入系统名称"
/>
</FormItem>
<FormItem label="请求地址">
<Input
style="width:240px;"
size="large"
v-model.trim="addModel.url"
placeholder="请输入请求地址"
/>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width: 240px"
size="large"
v-model.trim="addModel.remark"
/>
</FormItem>
</Form>
</div>
</Modal>
<!-- 新建菜单/目录弹框 -->
<add-Memu ref="showAdd" :dataChild="dataChild" @listTree="listTree"></add-Memu>
</div>
</template>
<script>
import addMemu from './componets/addMemu'
export default {
name: '',
components: {
addMemu
},
data() {
return {
dataChild: {},
addShow: false,
showMenu: false,
titleAdd: '',
formItem: {
status: '',
name: ''
},
addModel: {
name: '',
url: '',
remark: '',
type: '0'
},
data: [],
columns: [
{
title: '菜单名称',
key: 'name',
width: '150',
sortable: true
},
{
title: '排序',
key: 'priority'
},
{
title: '请求地址',
key: 'url',
width: '200',
align: 'left'
},
{
title: '类型',
key: 'type',
align: 'center',
// render: (h, params) => {
// return h('state', {
// props: {
// code: 'system.menu.target',
// type: 'text',
// value: params.row.type + ''
// }
// })
// },
type: 'menuRender'
},
{
title: '状态',
key: 'status',
align: 'center',
type: 'menuIsshow'
},
{
title: 'icon图标',
key: 'icon',
align: 'center',
width: '100',
type: 'icons'
},
{
title: '打开方式',
key: 'target',
width: '150',
align: 'center',
type: 'menuTarget'
},
{
title: '备注',
key: 'remark',
width: '150'
},
{
title: '操作',
type: 'action',
actions: [
{
type: 'primary',
text: '新增'
},
{
type: 'primary',
text: '编辑'
},
{
type: 'error',
text: '删除'
}
],
width: '150'
}
]
}
},
created() {
this.formItem = {}
this.listTree()
},
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
methods: {
//查询
listTree() {
// name:this.formItem.name,status:this.formItem.status
this.$http.jurisdiction.getListTree(this.formItem).then((res) => {
// debugger
this.data = res.result
})
},
//新建
add() {
this.titleAdd = '新增系统'
this.addModel = {}
this.addShow = true
},
selectionClick(arr) {
//console.log('选中数据id数组:' + arr)
// this.checkids = arr
},
sortClick(key, type) {
//console.log('排序字段:' + key)
//console.log('排序规则:' + type)
},
rowClick(data, event, index, txt) {
this.dataChild = data
console.log(data)
if (txt == '新增') {
this.$refs.showAdd.showMenu = true
this.$refs.showAdd.addModel.type = '1'
this.$refs.showAdd.addModel.status = '1'
this.$refs.showAdd.addModel.up_id = data.id
this.$refs.showAdd.addModel.upName = data.name
this.$refs.showAdd.width = 500
this.$refs.showAdd.isActive = false
this.$refs.showAdd.hasError = true
this.$refs.showAdd.title = '新建目录'
this.$refs.showAdd.addModel.name = ''
this.$refs.showAdd.addModel.priority = ''
this.$refs.showAdd.addModel.remark = ''
}
if (txt == '编辑') {
if (data.type == '0') {
this.titleAdd = '编辑系统'
this.addShow = true
} else if (data.type == '3') {
//按钮
this.$refs.showAdd.customTitle = '编辑按钮'
this.$refs.showAdd.customShow = true
this.$refs.showAdd.customModel.status = data.status.toString()
this.$refs.showAdd.customModel.type = data.type.toString()
} else {
this.titleEit = '编辑目录/菜单'
this.$refs.showAdd.showCatalog = true
this.$refs.showAdd.catalogModel.status = data.status.toString()
this.$refs.showAdd.catalogModel.type = data.type.toString()
}
}
if (txt == '删除') {
this.$Modal.confirm({
title: '删除',
content: '<p>是否删除此条菜单,删除请选择确认,否则请取消</p>',
okText: '确认',
cancelText: '取消',
onOk: () => {
this.$http.jurisdiction.deleteRow(data.id).then((res) => {
this.$Message.success('删除成功')
this.listTree()
})
}
})
}
//console.log('当前行数据:' + data)
// console.log('点击行号:' + index)
// console.log('点击事件:' + event)
},
saveOk() {
if (this.titleAdd == '新增系统') {
this.addModel.type = '0'
} else if (this.titleAdd == '编辑系统') {
this.addModel.id = this.childId
}
this.$http.jurisdiction.add({ privilege: this.addModel }).then((res) => {
this.listTree()
})
},
saveCancel() {}
}
}
</script>
<style lang="less" scoped>
.jurisdiction-form {
margin-top: 10px;
// position: relative;
.right-btn {
text-align: right;
margin-bottom: 10px;
// position: absolute;
// top: 0px;
// right: 10px;
}
}
</style>
\ No newline at end of file
<template id="addPRi">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false" :label-width="80" >
<FormItem label="父权限" prop="up_id">
<Select v-model="formValidate.up_id" style="width:240px;">
<Option v-for="(item,index) in list " :key="index" :value="item.value" style="display:none">{{item.label}} </Option>
<Tree v-show="isShow" :data="seldata" @on-select-change="handleSelect"></Tree>
</Select>
</FormItem>
<FormItem label="权限名称" prop="name">
<Input v-model="formValidate.name" style="width:240px;"></Input>
</FormItem>
<FormItem label="系统" prop="from_system">
<Select v-model="formValidate.from_system" @on-change="selectSys" style="width:240px;">
<Option v-for="(item,index) in allsystem " :key="index+1" :value="item.value">{{item.label}}</Option>
</Select>
</FormItem>
<FormItem label="操作类型" prop="type">
<Select v-model="formValidate.type" placeholder="请选择" style="width:240px;">
<Option value=1>菜单</Option>
<Option value=2>系统</Option>
<Option value=3>页面</Option>
</Select>
</FormItem>
<FormItem label="地址" prop="url">
<Input v-model="formValidate.url" style="width:240px;"></Input>
<!-- <Select v-model="formValidate.url" placeholder="请选择">
<Option v-for="(item,index) in allpages " :key="item.value" :value="item.value">{{item.label}}</Option>
</Select> -->
</FormItem>
<!-- <FormItem label="密级" prop="secret_class">
<Select v-model="formValidate.secret_class" placeholder="请选择" style="width:240px;">
<Option v-for="(item,index) in mijis " :key="item.value" :value="item.value">{{item.label}}</Option>
</Select>
</FormItem> -->
<FormItem label="状态" prop="status">
<Select v-model="formValidate.status" placeholder="请选择" style="width:240px;">
<Option value=0>启用</Option>
<Option value=1>禁用</Option>
</Select>
</FormItem>
<!-- <FormItem label="打开方式" prop="target">
<Select v-model="formValidate.target" placeholder="请选择" style="width:240px;">
<Option value="系统内">系统内</Option>
<Option value="新页面">新页面</Option>
</Select>
</FormItem> -->
<FormItem label="排序" prop="priority">
<Input v-model="formValidate.priority" style="width:240px;"></Input>
</FormItem>
</Form>
</template>
<script>
import service from '@/plugins/request'
export default {
name:'addPrivilege',
tit:'',
props:[
'seldata'
],
data(){
return {
formValidate:{name:'',up_id:-1,from_system:'',type:'',url:'',status:'',target:'',priority:'',secret_class:''},
ruleValidate: {
up_id:[{required: true}],
name:[{required: true}],
from_system:[{required: true}],
type:[{required: true}],
url:[{required: true}]
// priority:[ { required: true, message: '排序不能为空' },
// { type: 'number', message: '请输入排序,只能填写数字' }]
},
list:[],
isShow:true,
allsystem:[
{
value:'0',
label:'三车间MES'
},
{
value:'1',
label:'机加MES'
}
],
allpages:[
{
value:'/a/index.html',
label:'/a/index.html'
},
{
value:'/a/port.html',
label:'/a/port.html'
},
{
value:'/a/default.html',
label:'/a/default.html'
}
],
mijis:[
{
value:'机密',
label:'机密'
},
{
value:'一般',
label:'一般'
},
{
value:'内部',
label:'内部'
}
]
}
},
created(){
this.formValidate.from_system=this.allsystem[0].value
//this.gettree(this.formValidate.from_system);
},
computed:{
},
methods:{
selectSys(){
this.$emit('selectSys',this.formValidate.from_system)
},
handleSelect(data){
this.list=[];
this.list.push({label:data[0].title,value:data[0].value});
console.log(this.list);
this.formValidate.up_id=data[0].value;
},
getdata(){
return this.formValidate
}
}
}
</script>
<style scoped>
.ivu-form-item {width:48%;display:inline-block;}
.ivu-form-item:nth-child(odd) {
margin-left: 10px
}
</style>
\ No newline at end of file
<!--
* @Author: 黄龙
* @pageName: 'tree-grid 树型表格'
* @Date: 2017-07-17 16:48:44
* @Last Modified by: 黄龙
* @Last Modified time: 2017-07-17 16:48:44
* @events @on-row-click 单击行或者单击操作按钮方法
@on-selection-change 多选模式下 选中项变化时触发
@on-sort-change 排序时有效,当点击排序时触发
@props items 显示的结构化数据
columns 表格列的配置描述 sortable:true 开启排序功能
type: 'selection'为多选功能 type: 'action' 为操作功能 actions:[{}] 操作按钮
-->
<template>
<div :style="{width:tableWidth,height:tableWidth}" class='autoTbale'>
<table class="table table-bordered" id='hl-tree-table' ref="hl-tree-table">
<thead>
<tr>
<th v-for="(column,index) in cloneColumns" :key="index" style="background:#F5F6FA">
<label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll">
</label>
<label v-else>
{{ renderHeader(column, index) }}
<span class="ivu-table-sort" v-if="column.sortable">
<Icon type="arrow-up-b" :class="{on: column._sortType === 'asc'}" @click.native="handleSort(index, 'asc')" />
<Icon type="arrow-down-b" :class="{on: column._sortType === 'desc'}" @click.native="handleSort(index, 'desc')" />
</span>
</label>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in initItems" :key="item.index" v-show="show(item)" :class="{'child-tr':item.parent}" class="mytr noacitve" @click="clicktr(item,$event,index)">
<td v-for="(column,snum) in columns" :key="column.key" :style=tdStyle(column)>
<label v-if="column.type === 'selection'">
<input type="checkbox" :value="item.id" v-model="checkGroup" @click="handleCheckClick(item,$event,index)">
</label>
<div v-if="column.type === 'action'" class="action">
<op :oprate="action.oprate" :class="action.class" @click="RowClick(item,$event,index,action.text)" v-for='action in (column.actions)' :key="action.text">{{action.text}}</op>
</div>
<label @click="toggle(index,item)" v-if="!column.type">
<span v-if='snum==iconRow()'>
<i v-html='item.spaceHtml'></i>
<i v-if="item.children&&item.children.length>0" class="ivu-icon" style="font-size:20px" :class="{'ivu-icon-md-arrow-dropright':!item.expanded,'ivu-icon-md-arrow-dropdown':item.expanded }"></i>
<i v-else class="ms-tree-space"></i>
</span> {{renderBody(item,column) }}
</label>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'treeGrid',
props: {
columns: Array,
items: {
type: Array,
default: function() {
return [];
}
}
},
data() {
return {
initItems: [], //处理后数据数组
cloneColumns: [], //处理后的表头数据
checkGroup: [], //复选框数组
checks: false, //全选
screenWidth: document.body.clientWidth, //自适应宽
tdsWidth: 0, //td总宽
timer: false, //控制监听时长
dataLength: 0, //树形数据长度
isActive:false,
leftWidth:0
}
},
computed: {
tableWidth() {
return this.tdsWidth > this.screenWidth && this.screenWidth > 0 ? this.screenWidth + 'px' : '100%'
}
},
watch: {
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
setTimeout(() => {
this.timer = false
}, 400)
}
},
items() {
if (this.items) {
this.dataLength = this.Length(this.items)
this.initData(this.deepCopy(this.items), 1, null);
this.checkGroup = this.renderCheck(this.items)
if (this.checkGroup.length == this.dataLength) {
this.checks = true
} else {
this.checks = false
}
}
},
columns: {
handler() {
this.cloneColumns = this.makeColumns();
},
deep: true
},
checkGroup(data) {
this.checkAllGroupChange(data)
},
},
mounted() {
if (this.items) {
this.dataLength = this.Length(this.items)
this.initData(this.deepCopy(this.items), 1, null);
this.cloneColumns = this.makeColumns();
this.checkGroup = this.renderCheck(this.items)
if (this.checkGroup.length == this.dataLength) {
this.checks = true
} else {
this.checks = false
}
}
// 绑定onresize事件 监听屏幕变化设置宽
this.$nextTick(() => {
this.screenWidth = document.body.clientWidth
})
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth;
this.screenWidth = window.screenWidth;
})()
}
},
methods: {
clicktr(data,e,i){
//console.log(e);
let result = this.makeData(data);
//console.log(result);
this.$emit('on-row-click', result, e, i)
var boxArr = document.querySelectorAll(".mytr");
// console.log(boxArr)
boxArr.forEach(function(item,index){
item.classList.remove('acitvetr');
if(i !==index){
item.classList.add('noacitve');
}
});
boxArr[i].classList.remove('noacitve');
boxArr[i].classList.add('acitvetr');
},
// 有无多选框折叠位置优化
iconRow() {
for (var i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].type == 'selection') {
return 1
}
}
return 0
},
// 设置td宽度,td的align
tdStyle(column) {
var style = {}
if (column.align) {
style["text-align"] = column.align;
}
if (column.width) {
style["min-width"] = column.width + 'px';
}
return style;
},
// 排序事件
handleSort(index, type) {
this.cloneColumns.forEach((col) => col._sortType = 'normal');
if (this.cloneColumns[index]._sortType === type) {
this.cloneColumns[index]._sortType = 'normal'
} else {
this.cloneColumns[index]._sortType = type
}
this.$emit('on-sort-change', this.cloneColumns[index]['key'], this.cloneColumns[index]['_sortType'])
},
// 点击某一行事件
RowClick(data, event, index, text) {
let result = this.makeData(data)
this.$emit('on-row-click', result, event, index, text)
},
// 点击事件 返回数据处理
makeData(data) {
const t = this.type(data);
let o;
if (t === 'array') {
o = [];
} else if (t === 'object') {
o = {};
} else {
return data;
}
if (t === 'array') {
for (let i = 0; i < data.length; i++) {
o.push(this.makeData(data[i]));
}
} else if (t === 'object') {
for (let i in data) {
if (i != 'spaceHtml' && i != 'parent' && i != 'level' && i != 'expanded' && i != 'isShow' && i !=
'load') {
o[i] = this.makeData(data[i]);
}
}
}
return o;
},
// 处理表头数据
makeColumns() {
let columns = this.deepCopy(this.columns);
this.tdsWidth = 0
columns.forEach((column, index) => {
column._index = index;
column._width = column.width ? column.width : '';
column._sortType = 'normal';
this.tdsWidth += column.width ? parseFloat(column.width) : 0;
});
return columns;
},
// 数据处理 增加自定义属性监听
initData(items, level, parent) {
this.initItems = []
let spaceHtml = "";
for (var i = 1; i < level; i++) {
spaceHtml += "<i class='ms-tree-space'></i>"
}
items.forEach((item, index) => {
item = Object.assign({}, item, {
"parent": parent,
"level": level,
"spaceHtml": spaceHtml
});
if ((typeof item.expanded) == "undefined") {
item = Object.assign({}, item, {
"expanded": false
});
}
if ((typeof item.show) == "undefined") {
item = Object.assign({}, item, {
"isShow": false
});
}
if ((typeof item.isChecked) == "undefined") {
item = Object.assign({}, item, {
"isChecked": false
});
}
item = Object.assign({}, item, {
"load": (item.expanded ? true : false)
});
this.initItems.push(item);
if (item.children && item.expanded) {
this.initData(item.children, level + 1, item);
}
})
},
// 隐藏显示
show(item) {
return ((item.level == 1) || (item.parent && item.parent.expanded && item.isShow));
},
toggle(index, item) {
let level = item.level + 1;
let spaceHtml = "";
for (var i = 1; i < level; i++) {
spaceHtml += "<i class='ms-tree-space'></i>"
}
if (item.children) {
if (item.expanded) {
item.expanded = !item.expanded;
this.close(index, item);
} else {
item.expanded = !item.expanded;
if (item.load) {
this.open(index, item);
} else {
item.load = true;
item.children.forEach((child, childIndex) => {
this.initItems.splice((index + childIndex + 1), 0, child);
//设置监听属性
this.$set(this.initItems[index + childIndex + 1], 'parent', item);
this.$set(this.initItems[index + childIndex + 1], 'level', level);
this.$set(this.initItems[index + childIndex + 1], 'spaceHtml', spaceHtml);
this.$set(this.initItems[index + childIndex + 1], 'isShow', true);
this.$set(this.initItems[index + childIndex + 1], 'expanded', false);
})
}
}
}
},
open(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = true;
if (child.children && child.expanded) {
this.open(index + childIndex + 1, child);
}
})
}
},
close(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = false;
child.expanded = false;
if (child.children) {
this.close(index + childIndex + 1, child);
}
})
}
},
//点击check勾选框,判断是否有children节点 如果有就一并勾选
handleCheckClick(data, event, index){
data.isChecked = !data.isChecked;
var arr = data.children;
if(arr){
if(data.isChecked){
this.checkGroup.push(data.id);
for (let i=0; i<arr.length; i++){
this.checkGroup.push(arr[i].id)
}
}else {
for (var i=0; i<this.checkGroup.length; i++){
if(this.checkGroup[i] == data.id){
this.checkGroup.splice(i,1)
}
for (var j=0; j<arr.length; j++){
if(this.checkGroup[i] == arr[j].id){
this.checkGroup.splice(i,1);
}
}
}
}
}
},
//checkbox 全选 选择事件
handleCheckAll() {
this.checks = !this.checks;
if (this.checks) {
this.checkGroup = this.getArray(this.checkGroup.concat(this.All(this.items)))
} else {
this.checkGroup = []
}
// this.$emit('on-selection-change', this.checkGroup)
},
// 数组去重
getArray(a) {
var hash = {},
len = a.length,
result = [];
for (var i = 0; i < len; i++) {
if (!hash[a[i]]) {
hash[a[i]] = true;
result.push(a[i]);
}
}
return result;
},
checkAllGroupChange(data) {
if (this.dataLength > 0 && data.length === this.dataLength) {
this.checks = true;
} else {
this.checks = false;
}
this.$emit('on-selection-change', this.checkGroup)
},
All(data) {
let arr = []
data.forEach((item) => {
arr.push(item.id)
if (item.children && item.children.length > 0) {
arr = arr.concat(this.All(item.children));
}
})
return arr
},
// 返回树形数据长度
Length(data) {
let length = data.length
data.forEach((child) => {
if (child.children) {
length += this.Length(child.children)
}
})
return length;
},
// 返回表头
renderHeader(column, $index) {
if ('renderHeader' in this.columns[$index]) {
return this.columns[$index].renderHeader(column, $index);
} else {
return column.title || '#';
}
},
// 返回内容
renderBody(row, column, index) {
return row[column.key]
},
// 默认选中
renderCheck(data) {
let arr = []
data.forEach((item) => {
if (item._checked) {
arr.push(item.id)
}
if (item.children && item.children.length > 0) {
arr = arr.concat(this.renderCheck(item.children));
}
})
return arr
},
// 深度拷贝函数
deepCopy(data) {
var t = this.type(data),
o, i, ni;
if (t === 'array') {
o = [];
} else if (t === 'object') {
o = {};
} else {
return data;
}
if (t === 'array') {
for (i = 0, ni = data.length; i < ni; i++) {
o.push(this.deepCopy(data[i]));
}
return o;
} else if (t === 'object') {
for (i in data) {
o[i] = this.deepCopy(data[i]);
}
return o;
}
},
type(obj) {
var toString = Object.prototype.toString;
var map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object'
};
return map[toString.call(obj)];
}
},
beforeDestroy() {
window.onresize = null
}
}
</script>
<style scoped>
.autoTbale {
overflow: auto;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.table-bordered {
border: 1px solid #EBEBEB;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
border-top: 1px solid #e7eaec;
line-height: 1.42857;
padding: 8px ;
vertical-align: middle;
text-align: center
}
.table>tbody>tr>td:nth-child(1){
padding: 8px 8px 8px 30px;
text-align: left;
}
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
border: 1px solid #e7e7e7;
}
.table>thead>tr>th {
border-bottom: 1px solid #DDD;
}
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
background-color: #F5F5F6;
}
#hl-tree-table>tbody>tr {
height: 48px;
}
#hl-tree-table>tbody>tr:hover{
background-color: #ebf7ff;
}
.noacitve {
background-color: #fbfbfb;
}
.acitvetr {
background-color: #ebf7ff;
}
/deep/.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: 14px;
height: 14px;
}
/deep/.ms-tree-space::before {
content: ""
}
#hl-tree-table th>label {
margin: 0;
}
</style>
<template>
<div>
<div class="contentRight " :style="{height:divHeihgt}">
<div style="height:32px;">
<div style="display:inline-block;">
<span class="margriht6">系统</span>
<Select
v-model="model1"
label-in-value
@on-change="model1Change"
style="width:240px"
placeholder="请选择"
>
<Option v-for="item in sysdata" :value="item.value" :key="item.value">{{item.label }}</Option>
</Select>
<span class="margriht6 marleft10">状态</span>
<Select v-model="model2" style="width:80px" placeholder="请选择">
<Option v-for="item in roleStatus" :value="item.value" :key="item.value">{{item.label }}</Option>
</Select>
<Button type="primary" @click="search">查询</Button>
</div>
<div style="float:right" class="paddingbtn">
<Button type="primary" @click="add">新增</Button>
<Button type="primary" @click="edit">编辑</Button>
<Button type="primary" @click="del">删除</Button>
</div>
</div>
<div class="margin-top-10">
<tree-grid
:items="data"
ref="table"
:columns="columns"
@on-row-click="rowClick"
@on-selection-change="selectionClick"
@on-sort-change="sortClick"
></tree-grid>
</div>
</div>
<Modal
v-model="modal1"
:mask-closable="false"
title="新增权限菜单"
:width="800"
:loading="myloading"
ok-text="保存"
cancel-text="取消"
@on-ok="ok('formValidate')"
@on-cancel="cancel"
>
<add-privilege :seldata="seldata" ref="addpri" v-on:selectSys="selectSys"></add-privilege>
<!-- <div slot="footer" style="text-align:center">
<Button type="primary" @click="ok('formValidate')">保存</Button>
<Button
type="primary"
style="border-color: rgb(204, 204, 204);background-color:white;color:black"
@click="cancel"
>取消</Button>
</div>-->
</Modal>
<myconfirm ref="mysel" v-on:confirmok="okmysel" v-on:confirmcancel="cancelmysel"></myconfirm>
</div>
</template>
<script>
import treeGrid from './components/treeGrid'
import addPrivilege from './components/add'
import myconfirm from '../../processDesign/productTree/components/myconfirm'
import service from '@/plugins/request'
export default {
components: {
treeGrid,
addPrivilege,
myconfirm
},
data() {
return {
model1: '',
model1Name: '',
model2: '',
modal1: false,
keyid: 0,
divHeihgt:"",
myloading:true,
//点击的行号
clickindex: -1,
clickdata: {},
checkids: [],
//添加还是编辑
isedit: false,
//添加时候表单数据
formValidate1: {},
sysdata: [
// {
// value: '-1',
// label: '全部'
// },
{
value: '0',
label: '3车间MES'
},
{
value: '1',
label: '机加MES'
}
],
roleStatus: [
{
value: '-1',
label: '不限'
},
{
value: '0',
label: '启用'
},
{
value: '1',
label: '禁用'
}
],
columns: [
// {
// type: 'selection'
// },
{
title: '权限名称',
key: 'name',
width: '150',
sortable: true
},
// {
// title: '父权限',
// key: 'up_id'
// },
{
title: '系统',
key: 'system_name',
align:"left",
},
{
title: '地址',
key: 'url',
width: '200',
align:"left",
},
// {
// title: '密级',
// key: 'secret_class'
// },
{
title: '状态',
key: 'status_name',
render: (h, params) => {
return h(
'span',
{
on: {
click: () => {}
}
},
params.status == '0' ? '启用' : '禁用'
)
}
},
{
title: '类型',
key: 'type_name'
},
// {
// title: '打开方式',
// key: 'target'
// },
{
title: '排序',
key: 'priority'
},
{
title: '创建时间',
key: 'creationTime',
width: '150',
},
{
title: '修改时间',
key: 'lastModificationTime',
width: '150',
}
// {
// title: '操作',
// type: 'action',
// actions: [{
// type: 'primary',
// text: '编辑'
// }, {
// type: 'error',
// text: '删除'
// }],
// width: '150',
// }
],
data: [],
//父权限菜单树
seldata: [],
//父权限名
parent_name: ''
}
},
methods: {
loaddata: function() {
var url = `${systemUrl}/Privilege/getprivileges`
var that = this
service.get(`${url}`, this.searchdata ).then((response) => {
// console.log(response)
that.data = response.result
})
},
lodataByid: function(data1) {
var url = `${systemUrl}/Privilege/GetById`
service
.get(`${url}`, { id: this.clickindex })
.then((response) => {
//console.log(response)
data1 = response.result
//console.log(data1)
this.gettree(data1.from_system, data1)
})
},
gettree(sid, data1) {
service
.get(`${systemUrl}/Privilege/getTree`, { from_system: sid,id:this.clickindex})
.then((response) => {
this.seldata = response.result
this.$refs.addpri.list = []
if (this.clickindex >= 0) {
if (data1) {
//下拉列表切换的时候
if (data1 == 'selectSys') {
//alert(1)
this.$refs.addpri.formValidate.up_id = 0
this.$refs.addpri.list.push({ label: '根节点', value: 0 })
this.setSelect(this.seldata, 0)
} else {
// alert(2)
console.log(data1)
if (this.isedit) {
// alert(12)
this.setSelect(this.seldata, data1.up_id)
this.$refs.addpri.list.push({
label: this.parent_name,
value: data1.up_id
})
this.$refs.addpri.formValidate = data1
this.$refs.addpri.formValidate.from_system=data1.from_system+''
this.$refs.addpri.formValidate.status = data1.status + ''
this.$refs.addpri.formValidate.type = data1.type + ''
} else {
// alert(13)
this.setSelect(this.seldata, data1.id)
this.$refs.addpri.formValidate={}
this.$refs.addpri.formValidate.up_id = data1.id
this.$refs.addpri.formValidate.from_system = data1.from_system+''
//this.$refs.addpri.formValidate.id=''
this.$refs.addpri.list.push({
label: this.parent_name,
value: data1.id
})
}
}
}
} else {
}
})
},
search: function() {
this.isedit = false
this.clickindex=-1
this.loaddata()
this.gettree(this.searchdata.from_system)
},
selectSys: function(val) {
this.gettree(val, 'selectSys')
},
setnoselect: function(data, val) {
data.forEach((item, index) => {
item.selected = false
if (item.children) {
this.setnoselect(item.children)
}
})
},
setSelect: function(data, val) {
//data=this.seldata;
this.setnoselect(data)
data.forEach((item, index) => {
item.selected = false
if (item.value == val) {
// alert(11)
item.selected = true
this.parent_name = item.title
} else {
if (item.children) {
this.setSelect(item.children, val)
}
}
})
//console.log(data)
},
add: function() {
// if(this.datacount>=1 && this.clickindex < 0){
// this.$Message.error("请选中一个根节点后再添加");
// return;
// }
this.isedit = false
this.setnoselect(this.seldata)
this.$refs.addpri.$refs['formValidate'].resetFields()
this.modal1 = true
this.$refs.addpri.list = []
if (this.clickindex < 0) {
this.$refs.addpri.formValidate.up_id = 0
this.$refs.addpri.list.push({ label: '根节点', value: 0 })
this.setSelect(this.seldata, 0)
console.log(this.searchdata.from_system)
this.$refs.addpri.formValidate.from_system = this.searchdata.from_system+''
}
//选中一行
else {
var data1 = {}
this.lodataByid(data1)
}
},
//新增,编辑保存
ok: function(name) {
var a = this.$refs.addpri
a.$refs[name].validate((valid) => {
if (valid) {
//this.$Message.success('Success!');
var url = `${systemUrl}/Privilege/CreateOrUpdate`
var that = this
if(!this.$refs.addpri.formValidate.status){
this.$refs.addpri.formValidate.status=0
}
if(!this.$refs.addpri.formValidate.priority){
this.$refs.addpri.formValidate.priority=0
}
if(this.$refs.addpri.formValidate.priority){
if(typeof(this.$refs.addpri.formValidate.priority) !='number'){
that.$Message.error('排序字段只能输入数字');
return;
}
}
this.formValidate1 = this.$refs.addpri.formValidate
//console.log(this.formValidate1)
service
.post(`${url}`, JSON.stringify({ Privilege: this.formValidate1 }))
.then((response) => {
if (response.success) {
that.$Message.success('保存成功')
that.loaddata()
// that.gettree();
this.modal1 = false
}
})
.catch((error) => {
that.$Message.error('保存失败')
})
//
} else {
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
this.$Message.error('请输入必填项')
}
})
},
edit: function() {
if (this.clickindex >= 0) {
this.modal1 = true
this.isedit = true
this.$refs.addpri.$refs['formValidate'].resetFields()
var data1 = {}
this.lodataByid(data1)
//编辑页面父权限下拉设置
// this.$refs.addpri.formValidate.up_id=data.up_id;
} else {
this.$Message.warning('请选中一行数据')
}
},
del: function() {
if (this.clickindex >= 0 || this.checkids.length > 0) {
var data = this.clickdata
this.keyid = data.id
this.$refs.mysel.confirmmodal = true
} else {
this.$Message.warning('请选中一行数据')
}
},
okmysel(bl) {
var url = `${systemUrl}/Privilege/Delete`
var that = this
service
.delete(`${url}?id=${this.keyid}`)
.then((response) => {
if (response.success) {
that.$Message.success('删除成功')
that.loaddata()
}
})
.catch((error) => {
that.$Message.error('删除失败')
})
that.$refs.mysel.confirmmodal = bl
},
cancelmysel(bl) {
this.$refs.mysel.confirmmodal = bl
},
cancel: function() {
this.isedit=false
this.modal1 = false
},
rowClick(data, event, index, txt) {
//console.log('当前行数据:' + data)
//console.log('点击行号:' + index)
//console.log('点击事件:' + event)
data = JSON.stringify(data)
data = JSON.parse(data)
this.clickindex = data.id
this.clickdata = data
},
selectionClick(arr) {
//console.log('选中数据id数组:' + arr)
this.checkids = arr
},
sortClick(key, type) {
//console.log('排序字段:' + key)
//console.log('排序规则:' + type)
},
model1Change: function(v) {
//console.log(v);
this.model1Name = v.label
}
},
created() {
this.model1 = this.sysdata[0].value
this.model1Name = this.sysdata[0].label
this.model2 = this.roleStatus[0].value
this.loaddata()
//this.gettree(this.model1)
this.divHeihgt= window.innerHeight - 100+"px";
},
mounted() {
// this.tbPro.height = window.innerHeight - this.$refs.table.$el.offsetTop - 70
window.onresize = () => {
return (() => {
this.divHeihgt = window.innerHeight - 100+"px";
})()
}
},
computed: {
searchdata: function() {
return {
from_system: this.model1,
status: this.model2,
system_name: this.model1Name
}
},
datacount:function(){
return this.data.length
}
}
}
</script>
<style scoped>
.margriht6 {
display: inline-block;
margin-right: 6px;
}
.marleft10 {
margin-left: 10px;
}
.marleft20 {
margin-left: 20px;
}
</style>
\ No newline at end of file
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false" :label-width="90" >
<Row >
<FormItem label="角色名称" prop="name">
<Input v-model="formValidate.name" style="width:240px;"></Input>
</FormItem>
</Row>
<Row >
<FormItem label="状态" prop="status">
<Select v-model="formValidate.status" placeholder="请选择" style="width:240px;">
<Option value="0">启用</Option>
<Option value="1">禁用</Option>
</Select>
</FormItem>
</Row>
<Row >
<FormItem label="角色描述" prop="description">
<Input v-model="formValidate.description" style="width:240px;"></Input>
</FormItem>
</Row>
<!-- <FormItem label="角色类型" prop="type">
<Select v-model="formValidate.type" placeholder="请选择">
<Option value="生产处调度员">生产处调度员</Option>
<Option value="库管">库管</Option>
<Option value="班组长">班组长</Option>
<Option value="操作工">操作工</Option>
</Select>
</FormItem> -->
</Form>
</template>
<script>
export default {
name:'addRole',
tit:'',
props:[
''
],
data(){
return {
formValidate:{name:'',status:'',description:''},
ruleValidate: {
name:[{required: true}],
status:[{required: true}]
},
isShow:true,
allsystem:[
{
value:'全部',
label:'全部'
},
{
value:'三车间MES',
label:'三车间MES'
},
{
value:'机加MES',
label:'机加MES'
}
],
}
},
created(){
},
methods:{
}
}
</script>
<style scoped>
.ivu-form-item {width:46%;display:inline-block;}
.ivu-form-item:nth-child(odd) {
margin-left: 10px
}
.ivu-form-item:nth-child(even) {
margin-left: 14px
}
</style>
\ No newline at end of file
<template>
<div>
<Input v-model="value1" placeholder="请输入角色名称" clearable style="width: 200px" />
<Select v-model="model1" style="width:200px" clearable placeholder="请选择">
<Option v-for="item in roleStatus" :value="item.value" :key="item.value">{{item.label }}</Option>
</Select>
<Button type="primary" @click="search">查询</Button>
<slot></slot>
</div>
</template>
<script>
export default {
name:'rolemain',
data(){
return {
value1:'',
model1: '',
roleStatus: [
{
value: '启用',
label: '启用'
},
{
value: '禁用',
label: '禁用'
}
]
}
},
methods:{
search:function(){
this.$emit('search',this.value1,this.model1)
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<Select v-model="model1" style="width:200px">
<Option v-for="item in roleStatus" :value="item.value" :key="item.value">{{item.label}}</Option>
</Select>
</template>
<script>
export default {
name:'sel',
props:[
'model1','roleStatus'
]
}
</script>
\ No newline at end of file
<template>
<Table :border="tbPro.isBorder" stripe :columns="tbPro.columns" :stripe="tbPro.stripe"
:data="tbPro.data" :highlight-row="tbPro.highlight" :loading="tbPro.loading" :height="tbPro.height" :content="tbPro.cur" @on-row-click="rowclick" class="tableCommon"></Table>
</template>
<script>
export default {
name:'tb',
props:[
//'columns1','data1','isBorder'
'tbPro'
],
methods:{
rowclick(rowdata,index){
this.$emit('rowclick',rowdata,index)
}
}
}
</script>
\ No newline at end of file
<template>
<div>
<div class="contentRight">
<Tabs :animated="false" @on-click="tab">
<TabPane label="默认角色">
<div class="paddingbtn">
<rolemain v-on:search="search"></rolemain>
<tb :tb-pro="tbPro" ref="table" class="martop10"></tb>
</div>
</TabPane>
<TabPane label="自定义角色">
<div class="paddingbtn">
<rolemain v-on:search="search">
<div style="float:right">
<Button type="primary" @click="add">新增</Button>
</div>
</rolemain>
<tb :tb-pro="tbPro" ref="table1" class="martop10"></tb>
</div>
</TabPane>
</Tabs>
<template>
<Page
:total="this.total"
:current="this.current"
:page-size="this.pageSize"
show-sizer
show-elevator
:page-size-opts="this.showPagesize"
@on-change="pageChange"
@on-page-size-change="pagesizeChange"
/>
</template>
</div>
<Modal
v-model="menuModal"
:mask-closable="false"
:title="menuTitle"
:width="800"
footer-hide
>
<RoleMenu :role="menuRole" @menu-close="menuModal=false"></RoleMenu>
</Modal>
<Modal
v-model="modal2"
:mask-closable="false"
title="新增角色"
:width="440"
:loading="myloading"
ok-text="保存"
cancel-text="取消"
@on-ok="ok1('formValidate')"
@on-cancel="cancel1"
>
<add-role ref="role"></add-role>
<!-- <div slot="footer" style="text-align:center">
<Button type="primary" @click="ok1('formValidate')">保存</Button>
<Button
type="primary"
style="border-color: rgb(204, 204, 204);background-color:white;color:black"
@click="cancel1"
>取消</Button>
</div>-->
</Modal>
</div>
</template>
<script>
import rolemain from './components/rolemain'
import sel from './components/sel'
import tb from './components/tb'
import addRole from './addRole'
import RoleMenu from './roleMenu'
import service from '@/plugins/request'
import qs from 'qs'
export default {
components: {
rolemain,
sel,
tb,
addRole,
RoleMenu
},
data() {
return {
myloading: true,
pageHeight: '',
keyid: '', //z主键
tabIndex: 0,
model1: '',
modal1: false,
modal2: false,
isEdit: false,
formValidate1: {},
roleStatus: [
{
value: '启用',
label: '启用'
},
{
value: '禁用',
label: '禁用'
}
],
//弹出框
title1: 'aaa',
current: 1,
pageSize: 10,
showPagesize: [10, 20, 40],
menuModal:false,
menuTitle:"",
menuRole:null,
total: 0,
//表格列数据和属性
tbPro: {
// cur:this,
isBorder: true,
stripe: true,
loading: true,
height: '',
columns: [
{
type: 'index',
width: 60,
align: 'center'
},
// {
// title: 'id',
// key: 'id'
// },
{
title: '角色名',
key: 'name'
},
// {
// title: '角色类型',
// key: 'roletype'
// },
{
title: '状态',
key: 'status',
align: 'center',
width: 100,
render: (h, params) => {
return h('span', {}, params.row.status == 0 ? '启用' : '禁用')
}
},
{
title: '角色描述',
key: 'description'
},
{
title: '操作',
key: 'action',
align: 'center',
width: 180,
render: (h, params) => {
if (this.tabIndex == 0) {
return h('div', { class: 'action' },[
h(
'op',
{
attrs:{
oprate:'detail',
class:'empower'
} ,
on: { click: () => {
this.setRoleMenu(params.row);
}
}
},
'授权'
)
])
} else {
return h('div', { class: 'action' }, [
h(
'op',
{
attrs:{
oprate:'detail',
class:'empower'
} ,
on: {
click: () => {
this.setRoleMenu(params.row);
}
}
},
'授权'
),
h(
'op',
{
attrs:{
oprate:'detail',
class:'edit'
} ,
on: {
click: () => {
this.edit(params)
}
}
},
'编辑'
),
h(
'op',
{
attrs:{
oprate:'delete',
class:'remove'
},
on: {
click: () => {
this.del(params)
}
}
},
'删除'
)
])
}
}
}
],
data: []
},
//授权页面列表
data2: []
}
},
computed: {},
methods: {
//选项卡切换
tab: function(data) {
//console.log(data);
this.tabIndex = data
this.current = 1
this.loaddata()
},
//查询
search: function(data1, data2) {
var status = -1
if (data2 == '启用') {
status = 0
}
if (data2 == '禁用') {
status = 1
}
var searchdata = {
name: data1 ? data1 : null,
status: status,
isSelect: 'is',
role_type: this.tabIndex,
pageSize: this.pageSize,
page: this.current
}
this.loaddata(searchdata)
},
add: function() {
//alert("新增")
this.isEdit = false
this.$refs.role.$refs['formValidate'].resetFields()
this.modal2 = true
// this.$refs.role.formValidate={name:'',status:'',description:''}
},
setRoleMenu(row){
this.menuModal=true;
this.menuTitle="功能授权:"+row.name
this.menuRole=row
},
//编辑
edit: function(params) {
this.isEdit = true
this.modal2 = true
this.keyid = params.row.id
this.$refs.role.$refs['formValidate'].resetFields()
this.$refs.role.formValidate = {
name: params.row.name,
status: `${params.row.status}`,
description: params.row.description
}
},
//删除
del(params) {
this.keyid = params.row.id
var that = this
service
.delete(`${systemUrl}/MyRole/Delete?id=${this.keyid}`)
.then((response) => {
if (response.success) {
that.$Message.success('删除成功')
that.loaddata()
}
})
.catch((error) => {
this.$Message.error('删除失败')
})
},
cancelmysel(bl) {
this.$refs.mysel.confirmmodal = bl
},
//保存角色
ok1: function(name) {
var a = this.$refs.role
a.$refs[name].validate((valid) => {
if (valid) {
//this.$Message.success('Success!');
var that = this
this.formValidate1 = this.$refs.role.formValidate
this.formValidate1.GrantedPermissions = ['Pages.Roles'] //有角色模块新增的权限
this.formValidate1.DisplayName = this.formValidate1.name
this.formValidate1.role_type = this.tabIndex
if (this.isEdit) {
this.formValidate1.id = this.keyid
service
.put(
`${systemUrl}/MyRole/Update`,
JSON.stringify(this.formValidate1)
)
.then((response) => {
if (response.success) {
that.$Message.success('保存成功')
that.loaddata()
}
})
.catch((error) => {
this.$Message.error('保存失败')
})
} else {
service
.post(
`${systemUrl}/MyRole/Create`,
JSON.stringify(this.formValidate1)
)
.then((response) => {
if (response.success) {
this.$Message.success('保存成功')
that.loaddata()
}
//that.tbPro.data.push(this.formValidate1)
})
.catch((error) => {
this.$Message.error('保存失败')
})
}
var p = qs.stringify(this.formValidate1)
//console.log(p);
this.modal2 = false
} else {
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
this.$Message.error('请输入必填项')
}
})
},
cancel: function() {
this.modal1 = false
},
cancel1: function() {
this.modal2 = false
},
loaddata(searchdata) {
var url = systemUrl+'/MyRole/GetRolesAsync'
this.tbPro.loading = true
service
.get(`${url}`, searchdata
? searchdata
: {
role_type: this.tabIndex,
pageSize: this.pageSize,
page: this.current
})
.then((response) => {
this.tbPro.data = response.result.items
this.total = response.result.total
this.tbPro.loading = false
//console.log(this.tbPro.data)
})
},
pageChange(val) {
this.current = val
this.loaddata()
},
pagesizeChange(val) {
this.pageSize = val
this.loaddata()
}
},
created() {
this.loaddata()
// this.loadtree()
this.tbPro.height = window.innerHeight - 280
// this.pageHeight=document.querySelectorAll(".single-page-con")[0].offsetHeight ;
//console.log(this.pageHeight)
},
mounted() {
window.onresize = () => {
return (() => {
this.tbPro.height = window.innerHeight - 280
})()
}
}
}
</script>
<style scoped>
.martop10 {
margin-top: 10px;
}
.bt1:hover {
background-color: rgba(255, 181, 62, 1);
border-color: rgba(255, 181, 62, 1);
}
.ivu-page {
margin-top: 10px;
}
</style>
\ No newline at end of file
<template>
<div>
<div class="roleMenu">
<Tree v-if="show" :data="list" ref="mytree" show-checkbox check-directly ></Tree>
</div>
<div>
<Button type="primary" @click="commit">保存</Button>
<Button class="ml20" @click="$emit('menu-close')">取消</Button>
</div>
</div>
</template>
<script>
export default {
name: 'addRole',
tit: '',
props: {
role: Object
},
data() {
return {
show:false,
data: [],
list:[]
}
},
created() {
this.loadTree();
},
methods: {
loadTree() {
var url = `${systemUrl}/menu/list`
this.$api.post(`${url}`, { pageSize: 2000 ,conditions:[{"fieldName":"Type","fieldValue":3,"conditionalType":"LessThan"}]}).then((r) => {
r.result.sort(function(a,b){
return a.priority-b.priority;
})
this.data = r.result;
})
},
loadRole() {
var url = `${systemUrl}/roleMenu/GetRoleMenu`
//权限树
this.show=false
this.list=[]
this.$api.get(`${url}`, { id: this.role.id }).then((response) => {
let ids= response.result
var items=this.$u.clone(this.data);
console.info(ids,items);
this.list=this.$u.toTree(items,0,u=>{
u.title=u.name;
u.expand=true;
if(ids.indexOf(u.id)>-1){
u.checked=true;
}else{
delete u.checked
}
},"upId")
this.show=true
})
},
commit(){
var list=[];
this.$refs.mytree.getCheckedAndIndeterminateNodes().map(u=>{
list.push({id:u.id,methodId:u.methodId|0,status:u.checked?1:0})
});
var url = `${systemUrl}/RoleMenu/AddRoleMenu`
//权限树
this.$api.post(`${url}`, { id: this.role.id ,list:list}).then((r) => {
if(r.success){
this.$Message.success("权限设置成功!")
}
})
}
}
,
watch:{
"role.id"(v){
this.loadRole();
}
}
}
</script>
<style scoped>
.roleMenu{
height: 400px;
overflow: auto;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment