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