Skip to content

Z
zhichan
Commit 3ea749c5 by 蒋勇
Options

d

parent daa16013
Showing with 486 additions and 215 deletions
iview-admin/src/view/components/tables/forms/forms.vue
......@@ -34,6 +34,7 @@
v-model="formModel[ctl.prop]"
:placeholder="ctl.placeHolder"
:style="ctl.style"
:disabled="ctl.disabled"
>
</template>
<template v-if="ctl.type=='btn'">
......@@ -112,6 +113,16 @@
:autosize="{minRows:20,maxRows:50}"
/>
</template>
<template v-if="ctl.type=='number'">
<Input
number
v-model="formModel[ctl.prop]"
type="input"
:placeholder="ctl.placeHolder"
:style="ctl.style"
:autosize="{minRows:20,maxRows:50}"
/>
</template>
</FormItem>
</Col>
</Row>
......@@ -163,6 +174,7 @@
v-model="formModel[ctl.prop]"
:placeholder="ctl.placeHolder"
:style="ctl.style"
:disabled="ctl.disabled"
>
</template>
<template v-if="ctl.type=='btn'">
......@@ -241,6 +253,16 @@
:autosize="{minRows:20,maxRows:50}"
/>
</template>
<template v-if="ctl.type=='number'">
<Input
number
v-model="formModel[ctl.prop]"
type="input"
:placeholder="ctl.placeHolder"
:style="ctl.style"
:autosize="{minRows:20,maxRows:50}"
/>
</template>
</FormItem>
</Col>
</Row>
......@@ -309,10 +331,10 @@ export default {
},
computed: {},
methods: {
setHeight(){
let domel= this.$refs.formcard.$el
let h = window.innerHeight - domel.offsetTop ;
console.log("=======================",h)
setHeight() {
let domel = this.$refs.formcard.$el;
let h = window.innerHeight - domel.offsetTop;
console.log("=======================", h);
$(domel).css("height", h + "px");
},
getInitWhere(initWhereObj) {
......@@ -407,7 +429,11 @@ export default {
} else {
console.log("=============");
console.log("=============", ctl.prop);
this.$set(this.formModel, ctl.prop, "");
this.$set(
this.formModel,
ctl.prop,
ctl.default ? ctl.default : ""
);
}
}
});
......@@ -419,7 +445,7 @@ export default {
this.initFormModel();
},
mounted() {
this.setHeight()
this.setHeight();
}
};
</script>
......
iview-admin/src/view/components/tables/forms/jsoneditor.vue 0 → 100644
<template>
<div id="orgcard">
<Card style="height:100%">
<Tree v-if="!isupdate" :data="treedata" :render="renderContent" class="ptree"></Tree>
<Drawer
ref="eddrawer"
placement="right"
:closable="false"
:mask-closable="false"
v-model="showedform"
width="70"
@on-visible-change="ondrawvisable"
>
<NodeForm ref="nodeform" :fminfo="nodeinfo">
<template v-slot:default="slotProps">
<Button type="text" @click="doexec('ok',slotProps.fm)">保存</Button>
<Button type="text" @click="doexec('cancel',slotProps.fm)">取消</Button>
</template>
</NodeForm>
</Drawer>
</Card>
</div>
</template>
<script>
import { getApp, saveAuths, findAuthsByRoles } from "@/api/meta";
import NodeForm from "./forms.vue";
import config from "@/config";
export default {
name: "jsoneditor",
props: {
initData: {
type: Function,
default() {
return cbk => {
cbk(this.originalRoot);
};
}
},
metainfo: {
type: Object
}
},
components: {
NodeForm
},
data() {
return {
isupdate: false,
currentData: null,
orgpath: "/root",
code: "root",
treedata: [],
treedataclone: [],
originalRoot: {
title: "使用者定义",
expand: true,
render: (h, { root, node, data }) => {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%"
}
},
[
h(
"span",
{
on: {
click: () => {
this.onselnode(node, data);
}
}
},
[
h("Icon", {
props: {
type: "ios-folder-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", {}, [data.title])
]
),
h(
"span",
{
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
},
[
h("Button", {
props: Object.assign({}, this.buttonProps, {
icon: "ios-add",
type: "primary"
}),
style: {
width: "64px"
},
on: {
click: () => {
this.append(data);
}
}
})
]
)
]
);
},
children: []
},
showedform: false,
buttonProps: {
type: "default",
size: "small"
},
nodeinfo: {
name: "节点编辑",
main: [
{
title: "基本信息",
key: "baseinfo",
cols: 1,
ctls: [
{
type: "input",
label: "标题",
prop: "title",
placeHolder: "请输入节点标题",
style: "",
rules: [{ required: true, message: " ", trigger: "blur" }],
default: "点击修改"
},
{
type: "input",
label: "编码",
prop: "code",
placeHolder: "请输入编码",
style: "",
rules: [{ required: true, message: " ", trigger: "blur" }]
}
]
}
],
lists: null
}
};
},
mounted() {
this.initTree();
this.$nextTick(() => {
this.setHeight();
});
$(window).resize(() => {
this.setHeight();
});
},
created() {
if (this.metainfo) {
this.nodeinfo = Object.assign(this.nodeinfo, this.metainfo);
}
window.modiTreeNodeByCode = function(treedata, newobj, parentitem) {
treedata.forEach(item => {
if (item.nodeKey == newobj.nodeKey) {
item = Object.assign(item, newobj);
return;
}
if (item.children) {
if (parentitem) {
item.orgpath = parentitem.orgpath + "/" + item.code;
} else {
item.orgpath = item.code;
}
item.children.sort((item1, item2) => {
return item1.seq < item2.seq;
});
modiTreeNodeByCode(item.children, newobj);
} else {
if (parentitem) {
item.orgpath = parentitem.orgpath + "/" + item.code;
} else {
item.orgpath = item.code;
}
}
});
};
},
methods: {
ondrawvisable() {},
resetForm() {
this.$refs.nodeform.resetForm();
this.$refs.nodeform.formModel.children = [];
},
doexec(k, fm) {
if (k == "ok") {
this.$refs.nodeform.validate(v => {
console.log(v);
if (v) {
this.isupdate = true;
let modiobj = this.$refs.nodeform.getNewModel();
modiTreeNodeByCode(this.treedata, modiobj,null);
this.showedform = false;
this.$emit("modisave", this.treedata, modiobj);
this.resetForm();
console.log(this.treedata);
this.$nextTick(() => {
this.isupdate = false;
});
}
});
} else {
this.showedform = false;
this.resetForm();
}
},
deepclone(ind) {
let s = JSON.stringify(ind);
return JSON.parse(s);
},
onselnode(node, data) {
this.showedform = true;
this.currentData = data;
let nd = this.deepclone(data);
this.$refs.nodeform.resetForm();
this.$refs.nodeform.formModel = nd;
},
initTree() {
//异步加载
//按照当前公司加载组织结构,如果数据为空，那么就初始化一个根实体对象
if (this.initData) {
this.initData(originalData => {
if (
originalData &&
originalData[0] &&
(!originalData.children ||
(originalData.children && originalData.children.length == 0))
) {
this.originalRoot = Object.assign(
this.originalRoot,
originalData[0]
);
console.log(
"<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<,",
this.originalRoot
);
this.treedata = [this.originalRoot];
} else {
originalData[0].render = this.originalRoot.render;
this.treedata = originalData;
}
});
}
},
setHeight() {
let $orgcard = $("#orgcard");
let el = $orgcard.get()[0];
let h = window.innerHeight - el.offsetTop - 30;
$orgcard.css("height", h + "px");
},
renderContent(h, { root, node, data }) {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%"
}
},
[
h(
"span",
{
on: {
click: () => {
this.onselnode(node, data);
}
}
},
[
h("Icon", {
props: {
type:
data.children && data.children.length > 0
? "ios-folder-outline"
: "ios-paper-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
]
),
h(
"span",
{
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
},
[
h("Button", {
props: Object.assign({}, this.buttonProps, {
icon: "ios-add"
}),
style: {
marginRight: "8px"
},
on: {
click: () => {
this.append(data);
}
}
}),
h("Button", {
props: Object.assign({}, this.buttonProps, {
icon: "ios-remove"
}),
on: {
click: () => {
this.remove(root, node, data);
}
}
})
]
)
]
);
},
append(data) {
const children = data.children || [];
let newModel = this.$refs.nodeform.getNewModel();
console.log("new model.........................", newModel);
newModel.expand = true;
children.push(newModel);
this.$set(data, "children", children);
},
remove(root, node, data) {
const parentKey = root.find(el => el === node).parent;
const parent = root.find(el => el.nodeKey === parentKey).node;
const index = parent.children.indexOf(data);
parent.children.splice(index, 1);
}
}
};
</script>
<style>
.ptree span:hover {
background-color: lightgray;
}
.spansel {
background-color: lightgray;
}
</style>
iview-admin/src/view/userinfo/orginfo_page.vue
<template>
<div id="orgcard">
<Card style="height:100%">
<Tree :data="treedata" :render="renderContent" class="ptree" show-checkbox></Tree>
<Drawer
ref="eddrawer"
placement="right"
:closable="false"
:mask-closable="false"
v-model="showedform"
width="70"
@on-visible-change="ondrawvisable">
<NodeForm ref="nodeform" :fminfo="nodeinfo">
<template v-slot:default="slotProps">
<Button
type="text"
@click="doexec('ok',slotProps.fm)"
>确定</Button>
<Button
type="text"
@click="doexec('cancel',slotProps.fm)"
>取消</Button>
</template>
</NodeForm>
</Drawer>
</Card>
<div>
<OrgEditor :initData="initData" :metainfo="metainfo"></OrgEditor>
</div>
</template>
<script>
import { getApp, saveAuths, findAuthsByRoles } from "@/api/meta";
import NodeForm from "@/view/components/tables/forms/forms.vue";
import OrgEditor from "@/view/components/tables/forms/jsoneditor.vue";
import config from "@/config";
export default {
name: "treeinfo_page",
props: {},
components: {
NodeForm
OrgEditor
},
data() {
return {
treedata: [],
showedform:false,
buttonProps: {
type: "default",
size: "small"
},
nodeinfo: {
metainfo: {
name: "节点编辑",
main: [
{
title: "基本信息",
key: "baseinfo",
cols:1,
cols: 1,
ctls: [
{type: "input", label: "标题", prop: "title", placeHolder: "请输入节点标题", style: "", rules: [{ required: true, message: " ", trigger: "blur" }]},
{type: "input", label: "编码", prop: "code",placeHolder: "请输入编码", style: "", rules: [{ required: true, message: " ", trigger: "blur" }]},
{"type":"model-select","refModel":"auth.role","isMulti":true,"label":"角色","prop":"roles","labelField":"name","valueField":"id","style":{"margin-left":"10px",width:"165px"}},
{
type: "input",
label: "序号",
prop: "seq",
placeHolder: "请输入序号",
style: { width: "165px" },
rules: [{ required: true, message: " ", trigger: "blur" }]
},
{
type: "input",
label: "编码",
prop: "code",
placeHolder: "请输入编码",
style: "",
rules: [{ required: true, message: " ", trigger: "blur" }]
},
{
type: "input",
label: "标题",
prop: "title",
placeHolder: "请输入节点标题",
style: "",
rules: [{ required: true, message: " ", trigger: "blur" }],
default: "点击修改"
}
]
},
{
title: "节点路径",
key: "baseinfo",
cols: 2,
ctls: [
{
type: "input",
label: "KEY",
prop: "nodeKey",
placeHolder: "请输入编码",
disabled: true,
style: "",
rules: []
},
{
type: "input",
label: "路径",
prop: "orgpath",
placeHolder: "",
disabled: true,
style: "",
rules: []
}
]
},
{
title: "授权信息",
key: "baseinfo",
cols: 2,
ctls: [
{
type: "input",
label: "兼职",
prop: "orgtag",
placeHolder: "输入兼职的部门编码，逗号分隔",
style: "",
rules: []
},
{
type: "model-select",
refModel: "auth.role",
isMulti: true,
label: "角色",
prop: "roles",
labelField: "name",
valueField: "id",
style: { "margin-left": "10px", width: "165px" }
}
]
}
],
......@@ -62,183 +105,21 @@ export default {
}
};
},
mounted() {
this.setHeight();
$(window).resize(() => {
this.setHeight();
});
this.initTree();
},
mounted() {},
methods: {
ondrawvisable(){
},
doexec(k,fm){
console.log(fm)
if(k=="ok"){
this.showedform=false
}else{
this.showedform=false
}
},
buildNodeData(){
},
onselnode(ns,n){
this.showedform=true
},
initTree() {
this.treedata = [
initData(cbk) {
cbk([
{
title: "自定义结构树",
title: "目录",
code: "root",
orgpath:"/root",
expand: true,
render: (h, { root, node, data }) => {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%"
},
on:{
click:()=>{
this.onselnode(node,data)
}
}
},
[
h("span", [
h("Icon", {
props: {
type: "ios-folder-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
]),
h(
"span",
{
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
},
[
h("Button", {
props: Object.assign({}, this.buttonProps, {
icon: "ios-add",
type: "primary"
}),
style: {
width: "64px"
},
on: {
click: () => {
this.append(data);
}
}
})
]
)
]
);
},
children: []
roles: []
}
];
},
setHeight() {
let $orgcard = $("#orgcard");
let el = $orgcard.get()[0];
let h = window.innerHeight - el.offsetTop - 30;
$orgcard.css("height", h + "px");
},
renderContent(h, { root, node, data }) {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%"
}
},
[
h("span", [
h("Icon", {
props: {
type: "ios-paper-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
]),
h(
"span",
{
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
},
[
h("Button", {
props: Object.assign({}, this.buttonProps, {
icon: "ios-add"
}),
style: {
marginRight: "8px"
},
on: {
click: () => {
this.append(data);
}
}
}),
h("Button", {
props: Object.assign({}, this.buttonProps, {
icon: "ios-remove"
}),
on: {
click: () => {
this.remove(root, node, data);
}
}
})
]
)
]
);
},
append(data) {
const children = data.children || [];
children.push({
title: "appended node",
expand: true
});
this.$set(data, "children", children);
},
remove(root, node, data) {
const parentKey = root.find(el => el === node).parent;
const parent = root.find(el => el.nodeKey === parentKey).node;
const index = parent.children.indexOf(data);
parent.children.splice(index, 1);
]);
}
}
};
</script>
<style>
.ptree span:hover {
background-color: lightgray;
}
.spansel {
background-color: lightgray;
}
</style>
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