Skip to content

M
mes-ui
Commit f0dea7db authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

数据字典

parent 8a3ea4fa
Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 73 deletions
pages/basicData/dic/components/add.vue 0 → 100644
View file @ f0dea7db
<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>
<div>
{{v}}
</div>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Edit",
data() {
return {
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority:0,
color:"",
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {
},
};
</script>
pages/basicData/dic/components/edit.vue
View file @ f0dea7db
...@@ -55,7 +55,9 @@ export default { ...@@ -55,7 +55,9 @@ export default {
name: 'Edit', name: 'Edit',
data() { data() {
return { return {
entity: this.v, entity: {
color:""
},
rules: { rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }], name: [{ required: true, message: '必填', trigger: 'blur' }],
code: [{ required: true, message: '必填', trigger: 'blur' }] code: [{ required: true, message: '必填', trigger: 'blur' }]
...@@ -65,6 +67,13 @@ export default { ...@@ -65,6 +67,13 @@ export default {
props: { props: {
v: Object v: Object
}, },
mounted(){
this.entity = this.v
if(!this.entity.color){
this.entity.color="";
}
},
methods: { methods: {
handleSubmit() { handleSubmit() {
this.$refs.form.validate((v) => { this.$refs.form.validate((v) => {
...@@ -86,6 +95,9 @@ export default { ...@@ -86,6 +95,9 @@ export default {
watch: { watch: {
v(v) { v(v) {
this.entity = this.v this.entity = this.v
if(!this.entity.color){
this.entity.color="";
}
console.info(this.entity) console.info(this.entity)
} }
} }
......
pages/basicData/dic/index.vue
View file @ f0dea7db
<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">
<Button icon="md-add" title="新增顶级" @click="add(0)"></Button>
<Button> <Button>
<Icon <Icon
:type="expand?'md-arrow-dropright':'md-arrow-dropdown'" :type="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'"
size="16" size="16"
@click="toggle" @click="toggle"
title="展开/合并" title="展开/合并"
...@@ -18,22 +24,48 @@ ...@@ -18,22 +24,48 @@
</ButtonGroup> </ButtonGroup>
</h3> </h3>
<div> <div>
<Input v-model.trim="keys" search placeholder="请输入名称/编码" clearable /> <Input
v-model.trim="keys"
search
placeholder="请输入名称/编码"
clearable
/>
<Tree <Tree
:data="projectList" :data="projectList"
@on-select-change="change" @on-select-change="change"
class="tree-i" class="tree-i"
:render="renderContent" :render="renderContent"
/> />
<Dropdown
transfer
ref="contentMenu"
style="display: none"
trigger="click"
placement="right-start"
>
<DropdownMenu slot="list" ref="ppp" style="min-width: 80px">
<DropdownItem @click.native="add">
<a>添加</a>
</DropdownItem>
<DropdownItem name="edit" @click.native="editRight">
<a>修改</a>
</DropdownItem>
<!-- <DropdownItem name="del" @click.native="removeNew">
<a>删除</a>
</DropdownItem> -->
</DropdownMenu>
</Dropdown>
</div> </div>
</Sider> </Sider>
<Content class="content"> <Content class="content">
<Tools> <Tools>
<Breadcrumb style="display:inline-block"> <Breadcrumb style="display: inline-block">
<BreadcrumbItem v-for="(li,i) in names" :key="i">{{li}}</BreadcrumbItem> <BreadcrumbItem v-for="(li, i) in names" :key="i">{{
li
}}</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<template slot="btns"> <template slot="btns">
<span class="mr20" v-if="node.typeId==2"> <span class="mr20" v-if="node.typeId == 2">
索引： 索引：
<a <a
data-clipboard-action="copy" data-clipboard-action="copy"
...@@ -41,7 +73,8 @@ ...@@ -41,7 +73,8 @@
@click="copy" @click="copy"
id="code" id="code"
class="tag-read" class="tag-read"
>{{node.code}}</a> >{{ node.code }}</a
>
</span> </span>
<Button type="default" @click="setRoot">返回顶级</Button> <Button type="default" @click="setRoot">返回顶级</Button>
</template> </template>
...@@ -53,12 +86,16 @@ ...@@ -53,12 +86,16 @@
border border
:columns="columns" :columns="columns"
:data="data" :data="data"
:draggable="edit==-1" :draggable="edit == -1"
class="tableCommon" class="tableCommon"
@on-drag-drop="onDragDrop" @on-drag-drop="onDragDrop"
> >
<template slot-scope="{ row, index }" slot="typeId"> <template slot-scope="{ row, index }" slot="typeId">
<state code="system.dictionary.typeId" type="text" :value="row.typeId"></state> <state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template> </template>
<template slot-scope="{ row, index }" slot="status"> <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state> <state code="status" type="tag" :value="row.status"></state>
...@@ -67,16 +104,16 @@ ...@@ -67,16 +104,16 @@
<state code="isStatic" type="tag" :value="row.isStatic"></state> <state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> </template>
<template slot-scope="{ row, index }" slot="name"> <template slot-scope="{ row, index }" slot="name">
<span v-if="edit!=index" v-text="row.name"></span> <span v-if="edit != index" v-text="row.name"></span>
<Input v-else type="text" v-model.trim="cur.name" /> <Input v-else type="text" v-model.trim="cur.name" />
</template> </template>
<template slot-scope="{ row, index }" slot="color"> <template slot-scope="{ row, index }" slot="color">
<div v-if="edit!=index"> <div v-if="edit != index">
<ColorPicker <ColorPicker
:value="row.color||''" :value="row.color || ''"
transfer transfer
recommend recommend
@on-change="setColor($event,row,index)" @on-change="setColor($event, row, index)"
/> />
</div> </div>
<div v-else> <div v-else>
...@@ -85,17 +122,20 @@ ...@@ -85,17 +122,20 @@
</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 :type="row.icon" @on-change="setColor($event,row,index)" /> <Icon
: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>
<Input v-else type="text" v-model.trim="cur.code" /> <Input v-else type="text" v-model.trim="cur.code" />
</template> </template>
<template slot-scope="{ row, index }" slot="action"> <template slot-scope="{ row, index }" slot="action">
<div v-if="edit!=index" class="action"> <div v-if="edit != index" class="action">
<op class="edit" @click="editRow(row,index)">编辑</op> <op class="edit" @click="editRow(row, index)">编辑</op>
<op class="remove" @click="delRow(row,index)">删除</op> <!-- <op class="remove" @click="delRow(row, index)">删除</op> -->
</div> </div>
<div class="action" v-else> <div class="action" v-else>
<op class="edit" @click="save">保存</op> <op class="edit" @click="save">保存</op>
...@@ -103,35 +143,51 @@ ...@@ -103,35 +143,51 @@
</div> </div>
</template> </template>
</Table> </Table>
<Button type="primary" :disabled="edit!=-1" long @click="addNew" class="mt10">添加</Button> <Button
<Alert type="info" class="mt10" v-if="data.length>1&&edit==-1">提示： 支持拖拽排序，数据未保存时不可拖拽排序。</Alert> 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> </div>
<Modal v-model="editModal" :title="editTitle" footer-hide> <Modal v-model="editModal" :title="editTitle" footer-hide>
<Edit :v="editModel" @on-close="editModal=false" @on-ok="editOk" /> <component :is="datail" :v="editModel" @on-close="editModal = false" @on-ok="editOk" />
</Modal> </Modal>
</Content> </Content>
</Layout> </Layout>
</template> </template>
<script> <script>
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 {
datail:null,
addTitle: "新增",
addModal: false,
keys: "", keys: "",
treeHeight: "", treeHeight: "",
code: "2", code: "2",
expand: false, expand: false,
editModal: false, editModal: false,
editModel: { editModel: {
color: "" color: "",
},
nodeInfo: {
priority: null,
id: 0,
}, },
editTitle: "编辑", editTitle: "编辑",
node: root, node: root,
...@@ -147,64 +203,64 @@ export default { ...@@ -147,64 +203,64 @@ export default {
{ {
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",
} },
] ],
}; };
}, },
computed: { computed: {
...@@ -214,7 +270,7 @@ export default { ...@@ -214,7 +270,7 @@ export default {
let items = this.tree; let items = this.tree;
search(this.keys, items); search(this.keys, items);
function search(keys, data) { function search(keys, data) {
data.map(u => { data.map((u) => {
if (keys.length == u.title) { if (keys.length == u.title) {
result.push(u); result.push(u);
} else { } else {
...@@ -235,9 +291,8 @@ export default { ...@@ -235,9 +291,8 @@ export default {
}); });
} }
return result; return result;
}
}, },
components: { Edit }, },
async fetch({ store, params }) { async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典 await store.dispatch("loadDictionary"); // 加载数据字典
}, },
...@@ -259,58 +314,115 @@ export default { ...@@ -259,58 +314,115 @@ export default {
}, },
methods: { methods: {
renderContent(h, { root, node, data }) { renderContent(h, { root, node, data }) {
console.log(data) // console.log(data);
return h( return h(
"span", "span",
[ [
h("Poptip", { h(
"Poptip",
{
props: { props: {
content: data.data.code, content: data.data.code,
trigger: "hover", trigger: "hover",
placement:"top-start" placement: "top-start",
}, },
style: { style: {
cursor: "pointer", cursor: "pointer",
color:data.data.status==1?'#ccc':'#515a6e' color: data.data.status == 1 ? "#ccc" : "#515a6e",
}
},[
h('span',{
}, },
data.title },
) [
]) h("State",{props:{
], value:data.data.typeId,
code:"aps.scheduling.groupingForm",
type:"tag"
}},data.data.typeId)
,
h(
"span",
{
on: {
// click: () => {
// this.handleSelect(data); //手动选择树节点
// },
//右键点击事件
contextmenu: (e) => {
e.preventDefault();
this.$refs.contentMenu.$refs.reference = event.target;
this.$refs.contentMenu.currentVisible = !this.$refs
.contentMenu.currentVisible;
this.editModel = data.data;
console.warn("addd",this.editModel)
},
},
},
data.title+" ["+data.data.typeId+"]"
),
]
),
]
// data.title // data.title
); );
}, },
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();
}); });
}, },
editRight() {
this.editRow(this.nodeInfo);
},
editRow(row, index) { editRow(row, index) {
this.editTitle = "编辑"; this.editTitle = "编辑";
this.editModal = true; this.editModal = true;
this.editModel = row; this.editModel = row;
this.datail=()=>import("./components/edit");
}, },
toggle() { toggle() {
this.expand = !this.expand; this.expand = !this.expand;
this.loadTree(); this.loadTree();
}, },
addOk() {
this.load();
this.loadTree();
this.addModal = false;
this.detail=null;
},
add(upId) {
if(upId==0){
this.editModel={
id:-1,
upId: this.node.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: -1,
priority: this.edit,
}
// console.warn("VVVVVVVVVVVVVVVVV")
}
this.datail=()=>import("./components/add");
this.editModal = true;
},
editOk() { editOk() {
this.load(); this.load();
this.editModal = false; this.editModal = false;
}, },
removeNew() {
this.delRow(this.nodeInfo);
},
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({
...@@ -319,16 +431,16 @@ export default { ...@@ -319,16 +431,16 @@ export default {
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) {
...@@ -337,7 +449,7 @@ export default { ...@@ -337,7 +449,7 @@ export default {
id: node.id, id: node.id,
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;
...@@ -376,7 +488,7 @@ export default { ...@@ -376,7 +488,7 @@ export default {
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) {
...@@ -390,11 +502,11 @@ export default { ...@@ -390,11 +502,11 @@ export default {
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();
...@@ -402,6 +514,7 @@ export default { ...@@ -402,6 +514,7 @@ export default {
}); });
} }
}, },
addNew() { addNew() {
this.edit = this.data.length; this.edit = this.data.length;
this.cur = { this.cur = {
...@@ -412,7 +525,7 @@ export default { ...@@ -412,7 +525,7 @@ export default {
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);
}, },
...@@ -430,15 +543,15 @@ export default { ...@@ -430,15 +543,15 @@ export default {
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>
......
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