Skip to content

M
mes-ui
Commit d6a25252 authored by 康振飞's avatar 康振飞
Browse files
Options

dic左侧树优化

parent c6b14247
Show whitespace changes
Inline Side-by-side
Showing with 153 additions and 144 deletions
assets/css/base.less
View file @ d6a25252
......@@ -711,7 +711,7 @@ textarea::-webkit-input-placeholder {
background: #fff;
padding: 0px 10px 20px 10px;
margin-top: 10px;
overflow: auto;
.zh-title {
font-size: 14px;
padding: 0 5px;
......@@ -1156,7 +1156,7 @@ html [type=button] {
}
}
.tree {
height: calc(100% - 150px);
// height: calc(100% - 150px);
overflow: auto;
}
}
......
pages/basicData/dic/index.vue
View file @ d6a25252
<template>
<Layout class="full">
<Sider hide-trigger :style="{background: '#fff'}" class="menu" width="240" >
<Sider hide-trigger :style="{background: '#fff'}" class="menu" width="240">
<h3 class="title">
数据字典
<ButtonGroup class="fr" size="small">
......@@ -17,7 +17,7 @@
</Button>
</ButtonGroup>
</h3>
<div class="tree">
<div class="tree" :style="{height:treeHeight+'px'}">
<Tree :data="tree" @on-select-change="change" />
</div>
</Sider>
......@@ -79,12 +79,8 @@
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon
:type="row.icon"
@on-change="setColor($event,row,index)"
/>
<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>
......@@ -111,151 +107,164 @@
</Layout>
</template>
<script>
import Edit from './components/edit'
import api from './api.js'
import Clipboard from 'clipboard'
import Edit from "./components/edit";
import api from "./api.js";
import Clipboard from "clipboard";
const root = {
id: 0,
typeId: -1,
title: '顶级节点',
code: ''
}
title: "顶级节点",
code: ""
};
export default {
data() {
return {
code: '2',
treeHeight: "",
code: "2",
expand: false,
editModal: false,
editModel: {
color: ''
color: ""
},
editTitle: '编辑',
editTitle: "编辑",
node: root,
color4: '',
color4: "",
cur: null,
names: [root.title],
types: ['系统', '分类', '字典', '字典项'],
addName: '添加',
types: ["系统", "分类", "字典", "字典项"],
addName: "添加",
tree: [],
edit: -1,
data: [],
columns: [
{
type: 'index',
type: "index",
width: 60,
align: 'center'
align: "center"
},
{
title: '类别',
key: 'typeId',
title: "类别",
key: "typeId",
width: 100,
align: 'center',
slot: 'typeId'
align: "center",
slot: "typeId"
},
{
title: '颜色',
key: 'color',
title: "颜色",
key: "color",
width: 100,
align: 'center',
slot: 'color'
align: "center",
slot: "color"
},
{
title: '名称',
key: 'name',
title: "名称",
key: "name",
width: 150,
slot: 'name'
slot: "name"
},
{
title: '编码',
key: 'code',
slot: 'code'
title: "编码",
key: "code",
slot: "code"
},
{
title: '图标',
key: 'icon',
slot: 'icon'
title: "图标",
key: "icon",
slot: "icon"
},
{
title: '描述',
key: 'description'
title: "描述",
key: "description"
},
{
title: '状态',
key: 'status',
title: "状态",
key: "status",
width: 100,
align: 'center',
slot: 'status'
align: "center",
slot: "status"
},
{
title: '锁定',
key: 'isStatic',
title: "锁定",
key: "isStatic",
width: 100,
align: 'center',
slot: 'isStatic'
align: "center",
slot: "isStatic"
},
{
title: '操作',
key: 'action',
title: "操作",
key: "action",
width: 160,
align: 'center',
slot: 'action'
align: "center",
slot: "action"
}
]
}
};
},
components: { Edit },
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
await store.dispatch("loadDictionary"); // 加载数据字典
},
created() {
this.load()
this.loadTree()
this.load();
this.loadTree();
this.treeHeight = window.innerHeight - 180
},
mounted() {
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.treeHeight = window.screenHeight - 180
})();
}
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) => {
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()
})
console.log("该浏览器不支持自动复制"); // 释放内存
clipboard.destroy();
});
},
editRow(row, index) {
this.editTitle = '编辑'
this.editModal = true
this.editModel = row
this.editTitle = "编辑";
this.editModal = true;
this.editModel = row;
},
toggle() {
this.expand = !this.expand
this.loadTree()
this.expand = !this.expand;
this.loadTree();
},
editOk() {
this.load()
this.editModal = false
this.load();
this.editModal = false;
},
delRow(row, index) {
var url = `${systemUrl}/Dictionary/Delete?id=${row.id}`
var url = `${systemUrl}/Dictionary/Delete?id=${row.id}`;
this.$Modal.confirm({
title: '操作确认',
content: '确定要删除吗？',
title: "操作确认",
content: "确定要删除吗？",
onOk: () => {
this.$api
.delete(`${url}`)
.then((r) => {
.then(r => {
if (r.success) {
this.$Message.success('删除成功')
this.load()
this.$Message.success("删除成功");
this.load();
}
})
.catch((error) => {
this.$Message.error('删除失败')
})
.catch(error => {
this.$Message.error("删除失败");
});
}
})
});
},
change(nodes, node) {
// console.warn(node,nodes)
......@@ -264,108 +273,108 @@ export default {
typeId: node.data.typeId,
title: node.title,
code: node.data.code
}
};
// this.names = [node.title]
let cur = node
let titles = []
let cur = node;
let titles = [];
while (cur) {
titles.push(cur.title)
cur = cur.parent
titles.push(cur.title);
cur = cur.parent;
}
this.names = titles.reverse()
this.load(node.id)
this.names = titles.reverse();
this.load(node.id);
},
setRoot() {
this.load(0)
this.loadTree()
this.node = root
this.load(0);
this.loadTree();
this.node = root;
},
async setColor(v, row, i) {
let r = await api.setColor({ id: row.id, color: v })
let r = await api.setColor({ id: row.id, color: v });
if (r.success) {
this.$Message.success('颜色设置成功！')
row.color = v
this.$Message.success("颜色设置成功！");
row.color = v;
} else {
this.$Message.error('颜色设置失败！')
row.color = ''
this.$Message.error("颜色设置失败！");
row.color = "";
}
},
async load() {
this.edit = -1
let r = await api.getChildren(this.node.id)
this.data = r.result
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)
let r = await api.getTree(this.node.id);
if (r.success) {
let items = r.result
var expand = this.expand
setParent(null, items)
let items = r.result;
var expand = this.expand;
setParent(null, items);
function setParent(parent, items) {
items.map((u) => {
u.parent = parent
u.expand = expand
items.map(u => {
u.parent = parent;
u.expand = expand;
if (u.children) {
setParent(u, u.children)
setParent(u, u.children);
}
})
});
}
this.tree = items
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)
})
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) => {
api.setSort({ ids }).then(r => {
if (!r.success) {
this.$Message.error('排序失败')
this.load()
this.$Message.error("排序失败");
this.load();
}
})
});
}
},
addNew() {
this.edit = this.data.length
this.edit = this.data.length;
this.cur = {
upId: this.node.id,
name: '',
code: '',
color: '',
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.node.typeId + 1,
priority: this.edit
}
this.data.push(this.cur)
};
this.data.push(this.cur);
},
remove() {
this.edit = -1
this.edit = -1;
// this.load(this.node.id)
this.data.pop()
this.data.pop();
},
save() {
if (this.cur.name == '') {
this.$Message.error('名称不能为空')
return
if (this.cur.name == "") {
this.$Message.error("名称不能为空");
return;
}
if (this.cur.code == '') {
this.$Message.error('值不能为空')
return
if (this.cur.code == "") {
this.$Message.error("值不能为空");
return;
}
api.save(this.cur).then((r) => {
console.warn(r)
api.save(this.cur).then(r => {
console.warn(r);
if (r.success) {
this.$Message.success('添加成功')
this.load()
this.$Message.success("添加成功");
this.load();
}
})
});
}
}
}
};
</script>
<style lang="less" scoped>
.full {
......
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