Skip to content

Z
zhichan
Commit daa16013 by 蒋勇
Options

d

parent c385a695
Showing with 381 additions and 98 deletions
iview-admin/src/router/routers.js
...@@ -127,6 +127,15 @@ export default [ ...@@ -127,6 +127,15 @@ export default [
component: Main, component: Main,
children: [ children: [
{ {
path: 'org_info',
name: 'org_info',
meta: {
icon: 'ios-man',
title: '组织结构'
},
component: () => import('@/view/userinfo/orginfo_page.vue')
},
{
path: 'user_info', path: 'user_info',
name: 'user_info', name: 'user_info',
meta: { meta: {
......
iview-admin/src/view/components/tables/forms/forms.vue
...@@ -10,7 +10,14 @@ ...@@ -10,7 +10,14 @@
<Tabs value="main" @on-click="tabselected"> <Tabs value="main" @on-click="tabselected">
<TabPane label="表单信息" name="main"> <TabPane label="表单信息" name="main">
<template v-for="group in forminfo.main"> <template v-for="group in forminfo.main">
<Divider orientation="left" :key="group.title">{{group.title}}</Divider> <div style="margin-bottom:20px" :key="group.title+'d'">
<Divider
style="height:20px;width:3px;background-color:blue"
type="vertical"
:key="group.title"
/>
{{group.title}}
</div>
<Row type="flex" justify="start" :key="'r'+group.title"> <Row type="flex" justify="start" :key="'r'+group.title">
<Col <Col
:xs="getCols(group.cols)" :xs="getCols(group.cols)"
...@@ -48,6 +55,7 @@ ...@@ -48,6 +55,7 @@
:isMulti="ctl.isMulti" :isMulti="ctl.isMulti"
:labelField="ctl.labelField" :labelField="ctl.labelField"
:valueField="ctl.valueField" :valueField="ctl.valueField"
:style="ctl.style"
></ModelSelect> ></ModelSelect>
</template> </template>
<template v-if="ctl.type=='remote-select'"> <template v-if="ctl.type=='remote-select'">
...@@ -109,7 +117,7 @@ ...@@ -109,7 +117,7 @@
</Row> </Row>
</template> </template>
</TabPane> </TabPane>
<TabPane <TabPane
:disabled="tabDisabled[lst.bizCode]" :disabled="tabDisabled[lst.bizCode]"
v-for="lst in forminfo.lists" v-for="lst in forminfo.lists"
:key="lst.bizCode" :key="lst.bizCode"
...@@ -131,7 +139,14 @@ ...@@ -131,7 +139,14 @@
</Tabs> </Tabs>
</template> </template>
<template v-else v-for="group in forminfo.main"> <template v-else v-for="group in forminfo.main">
<Divider orientation="left" :key="group.title">{{group.title}}</Divider> <div style="margin-bottom:20px" :key="group.title+'d'">
<Divider
style="height:20px;width:3px;background-color:blue"
type="vertical"
:key="group.title"
/>
{{group.title}}
</div>
<Row type="flex" justify="start" align="top" :key="'r'+group.title"> <Row type="flex" justify="start" align="top" :key="'r'+group.title">
<Col <Col
:xs="getCols(group.cols)" :xs="getCols(group.cols)"
...@@ -141,91 +156,92 @@ ...@@ -141,91 +156,92 @@
v-for="ctl in group.ctls" v-for="ctl in group.ctls"
:key="ctl.prop" :key="ctl.prop"
> >
<FormItem v-if="ctlVisable[ctl.prop]" :label="ctl.label" :prop="ctl.prop"> <FormItem v-if="ctlVisable[ctl.prop]" :label="ctl.label" :prop="ctl.prop">
<template v-if="ctl.type=='input'"> <template v-if="ctl.type=='input'">
<input <input
type="text" type="text"
v-model="formModel[ctl.prop]" v-model="formModel[ctl.prop]"
:placeholder="ctl.placeHolder" :placeholder="ctl.placeHolder"
:style="ctl.style" :style="ctl.style"
> >
</template> </template>
<template v-if="ctl.type=='btn'"> <template v-if="ctl.type=='btn'">
<button :type="ctl.btncss" :icon="ctl.icon">{{ctl.label}}</button> <button :type="ctl.btncss" :icon="ctl.icon">{{ctl.label}}</button>
</template> </template>
<template v-if="ctl.type=='dic-select'"> <template v-if="ctl.type=='dic-select'">
<DicSelect <DicSelect
v-model="formModel[ctl.prop]" v-model="formModel[ctl.prop]"
:dicName="ctl.dicName" :dicName="ctl.dicName"
:placeHolder="ctl.placeHolder" :placeHolder="ctl.placeHolder"
:isMulti="ctl.isMulti" :isMulti="ctl.isMulti"
></DicSelect> ></DicSelect>
</template> </template>
<template v-if="ctl.type=='model-select'"> <template v-if="ctl.type=='model-select'">
<ModelSelect <ModelSelect
v-model="formModel[ctl.prop]" v-model="formModel[ctl.prop]"
:refModel="ctl.refModel" :refModel="ctl.refModel"
:placeHolder="ctl.placeHolder" :placeHolder="ctl.placeHolder"
:isMulti="ctl.isMulti" :isMulti="ctl.isMulti"
:labelField="ctl.labelField" :labelField="ctl.labelField"
:valueField="ctl.valueField" :valueField="ctl.valueField"
></ModelSelect> :style="ctl.style"
</template> ></ModelSelect>
<template v-if="ctl.type=='remote-select'"> </template>
<RemoteSelect <template v-if="ctl.type=='remote-select'">
v-model="formModel[ctl.prop]" <RemoteSelect
:refModel="ctl.refModel" v-model="formModel[ctl.prop]"
:placeHolder="ctl.placeHolder" :refModel="ctl.refModel"
:isMulti="ctl.isMulti" :placeHolder="ctl.placeHolder"
:labelField="ctl.labelField" :isMulti="ctl.isMulti"
:valueField="ctl.valueField" :labelField="ctl.labelField"
></RemoteSelect> :valueField="ctl.valueField"
</template> ></RemoteSelect>
<template v-if="ctl.type=='switch'"> </template>
<Switchs <template v-if="ctl.type=='switch'">
v-model="formModel[ctl.prop]" <Switchs
:openlabel="ctl.opentext" v-model="formModel[ctl.prop]"
:closelabel="ctl.closetext" :openlabel="ctl.opentext"
:truecolor="ctl.truecolor" :closelabel="ctl.closetext"
:falsecolor="ctl.falsecolor" :truecolor="ctl.truecolor"
></Switchs> :falsecolor="ctl.falsecolor"
</template> ></Switchs>
<template v-if="ctl.type=='checkgroup'"> </template>
<Checkgroups <template v-if="ctl.type=='checkgroup'">
v-model="formModel[ctl.prop]" <Checkgroups
:dicName="ctl.dicName" v-model="formModel[ctl.prop]"
:refModel="ctl.refModel" :dicName="ctl.dicName"
:isborder="ctl.isBorder" :refModel="ctl.refModel"
></Checkgroups> :isborder="ctl.isBorder"
</template> ></Checkgroups>
<template v-if="ctl.type=='radiogroup'"> </template>
<Radiogroups <template v-if="ctl.type=='radiogroup'">
v-model="formModel[ctl.prop]" <Radiogroups
:dicName="ctl.dicName" v-model="formModel[ctl.prop]"
:refModel="ctl.refModel" :dicName="ctl.dicName"
:isborder="ctl.isBorder" :refModel="ctl.refModel"
></Radiogroups> :isborder="ctl.isBorder"
</template> ></Radiogroups>
<template v-if="ctl.type=='upload'"> </template>
<Uploads v-model="formModel[ctl.prop]"></Uploads> <template v-if="ctl.type=='upload'">
</template> <Uploads v-model="formModel[ctl.prop]"></Uploads>
<template v-if="ctl.type=='password'"> </template>
<input <template v-if="ctl.type=='password'">
type="password" <input
v-model="formModel[ctl.prop]" type="password"
:placeholder="ctl.placeHolder" v-model="formModel[ctl.prop]"
> :placeholder="ctl.placeHolder"
</template> >
<template v-if="ctl.type=='textarea'"> </template>
<Input <template v-if="ctl.type=='textarea'">
v-model="formModel[ctl.prop]" <Input
type="textarea" v-model="formModel[ctl.prop]"
:placeholder="ctl.placeHolder" type="textarea"
:style="ctl.style" :placeholder="ctl.placeHolder"
:autosize="{minRows:20,maxRows:50}" :style="ctl.style"
/> :autosize="{minRows:20,maxRows:50}"
</template> />
</FormItem> </template>
</FormItem>
</Col> </Col>
</Row> </Row>
</template> </template>
...@@ -293,12 +309,18 @@ export default { ...@@ -293,12 +309,18 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
setHeight(){
let domel= this.$refs.formcard.$el
let h = window.innerHeight - domel.offsetTop ;
console.log("=======================",h)
$(domel).css("height", h + "px");
},
getInitWhere(initWhereObj) { getInitWhere(initWhereObj) {
let refwhere = {}; let refwhere = {};
if(initWhereObj){ if (initWhereObj) {
refwhere[initWhereObj.fieldName] = this.formModel[ refwhere[initWhereObj.fieldName] = this.formModel[
initWhereObj.valueField initWhereObj.valueField
]; ];
} }
return refwhere; return refwhere;
}, },
...@@ -339,6 +361,10 @@ export default { ...@@ -339,6 +361,10 @@ export default {
testclick() { testclick() {
console.log(JSON.stringify(this.formModel)); console.log(JSON.stringify(this.formModel));
}, },
getNewModel() {
let s = JSON.stringify(this.formModel);
return JSON.parse(s);
},
initFormModel() { initFormModel() {
if (this.forminfo.lists && this.forminfo.lists.length > 0) { if (this.forminfo.lists && this.forminfo.lists.length > 0) {
this.forminfo.lists.forEach(item => { this.forminfo.lists.forEach(item => {
...@@ -352,13 +378,17 @@ export default { ...@@ -352,13 +378,17 @@ export default {
} }
m.ctls.forEach(ctl => { m.ctls.forEach(ctl => {
this.$set(this.ctlVisable, ctl.prop, true); this.$set(this.ctlVisable, ctl.prop, true);
if (ctl.rules && ctl.rules.length>=0) { if (ctl.rules && ctl.rules.length >= 0) {
console.log("ctl.rules========================",ctl.prop,ctl.rules) console.log(
"ctl.rules========================",
ctl.prop,
ctl.rules
);
ctl.rules.forEach(r => { ctl.rules.forEach(r => {
if (r.iscustom) { if (r.iscustom) {
console.log("validate................"); console.log("validate................");
r.validator = this['validatex']; r.validator = this["validatex"];
} }
}); });
this.metaRules[ctl.prop] = ctl.rules; this.metaRules[ctl.prop] = ctl.rules;
...@@ -389,7 +419,7 @@ export default { ...@@ -389,7 +419,7 @@ export default {
this.initFormModel(); this.initFormModel();
}, },
mounted() { mounted() {
this.setHeight()
} }
}; };
</script> </script>
......
iview-admin/src/view/userinfo/orginfo_page.vue 0 → 100644
<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>
</template>
<script>
import { getApp, saveAuths, findAuthsByRoles } from "@/api/meta";
import NodeForm from "@/view/components/tables/forms/forms.vue";
import config from "@/config";
export default {
name: "treeinfo_page",
components: {
NodeForm
},
data() {
return {
treedata: [],
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" }]},
{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"}},
]
}
],
lists: null
}
};
},
mounted() {
this.setHeight();
$(window).resize(() => {
this.setHeight();
});
this.initTree();
},
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 = [
{
title: "自定义结构树",
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: []
}
];
},
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