Skip to content

Z
zhichan
Commit 56837163 by 蒋勇
Options

d

parent 10f833d8
Showing with 476 additions and 61 deletions
iview-admin/src/api/meta.js
import axios from '@/libs/api.request' import axios from '@/libs/api.request'
export const fetchListInfo = () => { export const refQuery = (url,q) => {
return axios.request({ return axios.request({
url: '/web/common/metaCtl/fetchListInfo', url: url,
method: 'post' method: 'post',
data:q
}) })
} }
export const uploadImg = formData => { // export const uploadImg = formData => {
return axios.request({ // return axios.request({
url: 'image/upload', // url: 'image/upload',
data: formData // data: formData
}) // })
} // }
iview-admin/src/mock/data.js
...@@ -6,7 +6,7 @@ const Random = Mock.Random ...@@ -6,7 +6,7 @@ const Random = Mock.Random
export const getTableData = req => { export const getTableData = req => {
let tableData = [] let tableData = []
doCustomTimes(5, () => { doCustomTimes(100, () => {
tableData.push(Mock.mock({ tableData.push(Mock.mock({
name: '@name', name: '@name',
email: '@email', email: '@email',
......
iview-admin/src/mock/index.js
...@@ -2,6 +2,7 @@ import Mock from 'mockjs' ...@@ -2,6 +2,7 @@ import Mock from 'mockjs'
import { login, logout, getUserInfo } from './login' import { login, logout, getUserInfo } from './login'
import { getTableData, getDragList, uploadImage, getOrgData, getTreeSelectData } from './data' import { getTableData, getDragList, uploadImage, getOrgData, getTreeSelectData } from './data'
import { getMessageInit, getContentByMsgId, hasRead, removeReaded, restoreTrash, messageCount } from './user' import { getMessageInit, getContentByMsgId, hasRead, removeReaded, restoreTrash, messageCount } from './user'
import { refQuery} from './meta'
// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果 // 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
Mock.setup({ Mock.setup({
...@@ -25,4 +26,6 @@ Mock.mock(/\/message\/count/, messageCount) ...@@ -25,4 +26,6 @@ Mock.mock(/\/message\/count/, messageCount)
Mock.mock(/\/get_org_data/, getOrgData) Mock.mock(/\/get_org_data/, getOrgData)
Mock.mock(/\/get_tree_select_data/, getTreeSelectData) Mock.mock(/\/get_tree_select_data/, getTreeSelectData)
Mock.mock(/.*refQuery/, refQuery)
export default Mock export default Mock
iview-admin/src/mock/meta.js 0 → 100644
export const refQuery = req => {
let query = JSON.parse(req.body)
return [
{value:"hello",label:"测试1"},
{value:"hello2",label:"测试2"}
]
}
\ No newline at end of file
iview-admin/src/store/module/meta.js
import { btnAuthFilter,setToken, getToken } from '@/libs/util' import { btnAuthFilter,setToken, getToken } from '@/libs/util'
import userinfo from "./metainfo/userinfo" import userinfo from "./metainfo/userinfo"
import dicinfo from "./metainfo/dict"
export default { export default {
state: { state: {
user_info:userinfo, user_info:userinfo,
dict_info:import("./metainfo/dict") dict_info:dicinfo
}, },
mutations: { mutations: {
setAvatar (state, avatarPath) {
state.avatarImgPath = avatarPath
},
}, },
getters: { getters: {
user_info: (state, getters, {user}) => btnAuthFilter(state.user_info,user),//定义一个函数添加权限控制逻辑 user_info: (state, getters, {user}) => btnAuthFilter(state.user_info,user),//定义一个函数添加权限控制逻辑
dict_info:state=>state.dict_info dict_info:state=>state.dict_info
}, },
actions: { actions: {
// 登录
handleLogin ({ commit }, { userName, password }) {
userName = userName.trim()
return new Promise((resolve, reject) => {
login({
userName,
password
}).then(res => {
const data = res.data
commit('setToken', data.token)
resolve()
}).catch(err => {
reject(err)
})
})
}
} }
} }
iview-admin/src/store/module/metainfo/userinfo.js
export default { export default {
name:"用户信息维护",
list: [ list: [
{ title: 'Name', key: 'name', sortable: true }, { title: 'Name', key: 'name', sortable: true },
{ title: 'Email', key: 'email', editable: true }, { title: 'Email', key: 'email', editable: true },
...@@ -13,24 +14,32 @@ export default { ...@@ -13,24 +14,32 @@ export default {
] ]
} }
], ],
"form":[ "form":{
{ name:"xxx",
"title":"控制信息", data:[
ctls:[ {
{"type":"switch","prop":"isAdmin","acText":"是管理员","inactText":"否","placeHolder":"请输入单次使用消耗的宝币数","style":""}, "title":"控制信息",
// {"type":"select","refModel":"pmproduct","isMulti":false,"label":"所属产品","prop":"pmproduct_id","labelField":"name","valueField":"id","style":""}, ctls:[
] {"type":"switch","label":"是否管理员","prop":"isAdmin","opentext":"是","closetext":"否","trurcolor":"","falsecolor":"","placeHolder":"请输入单次使用消耗的宝币数","style":""},
}, // {"type":"select","refModel":"pmproduct","isMulti":false,"label":"所属产品","prop":"pmproduct_id","labelField":"name","valueField":"id","style":""},
{ {"type":"dic-select","dicName":"app_type","isMulti":true,"label":"所属产品","prop":"apptype","placeHolder":"请选择 应用类型"},
"title":"基本信息", {"type":"model-select","refModel":"user","isMulti":false,"label":"所属产品","prop":"uid","placeHolder":"请选择 应用类型","labelField":"name","valueField":"id"},
ctls:[ {"type":"remote-select","refModel":"user","isMulti":false,"label":"所属产品x","prop":"xid","placeHolder":"请选择 应用类型","labelField":"name","valueField":"id"},
{"type":"input","label":"账号","prop":"userName","placeHolder":"登录账号","style":"",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },]}, {"type":"checkgroup","refModel":"user","label":"所属产品","prop":"mmmid","placeHolder":"请选择 应用类型","labelField":"name","valueField":"id","isBorder":true},
{"type":"input","label":"昵称","prop":"nickName","placeHolder":"昵称","style":"",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },]}, {"type":"radiogroup","refModel":"user","label":"所属产品","prop":"xmmmid","placeHolder":"请选择 应用类型","labelField":"name","valueField":"id","isBorder":true},
{"type":"input","label":"电话","prop":"mobile","placeHolder":"请输入电话","style":"",rules:[ { "validator":"validatex","trigger": 'blur' },{ "required": true, "message": ' ', "trigger": 'blur' },]}, ]
// {"type":"select","refModel":"auth.role","isMulti":true,"label":"角色","prop":"roles","labelField":"name","valueField":"id","style":""}, },
] {
} "title":"基本信息",
], ctls:[
{"type":"input","label":"账号","prop":"userName","placeHolder":"登录账号","style":"",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"input","label":"昵称","prop":"nickName","placeHolder":"昵称","style":"",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"input","label":"电话","prop":"mobile","placeHolder":"请输入电话","style":"",rules:[ { "validator":"validatex","trigger": 'blur' },{ "required": true, "message": ' ', "trigger": 'blur' },]},
// {"type":"select","refModel":"auth.role","isMulti":true,"label":"角色","prop":"roles","labelField":"name","valueField":"id","style":""},
]
}
]
},
"search":[ "search":[
{ {
"title":"基本查询", "title":"基本查询",
......
iview-admin/src/view/components/tables/forms/childs/checkgroups.vue 0 → 100644
<template>
<CheckboxGroup v-model="sels" @on-change="onchange">
<Checkbox v-for="item in datasource" :label="item.value" :key="item.value" :Border="isborder">{{item.label}}</Checkbox>
</CheckboxGroup>
</template>
<script>
import { refQuery } from "@/api/meta";
export default {
name: "checkgroups",
components: {},
model: {
prop: "value",
event: "change"
},
props:["value","dicName","refModel","labelField","valueField","refwhere","isborder"],
data() {
return {
sels: this.value?this.value:[],
datasource: []
};
},
watch: {
value(nv, ov) {
this.sels = nv;
}
},
methods: {
onchange(v) {
this.$emit("change", this.sels);
},
initDataSource(slike) {
if (this.dicName && this.dicName!="") {
let objdic = this.$store.getters.dict_info[this.dicName];
console.log(objdic);
Object.keys(objdic).forEach(k => {
this.datasource.push({
value: k,
label: objdic[k]
});
});
} else {
let query = {};
let url = "/web/common/" + this.refModel + "Ctl/refQuery";
query.fields = [this.labelField, this.valueField];
query.likestr = slike;
query.refwhere = this.refwhere ? this.refwhere : {};
refQuery(url, query).then(r => {
if (r.data) {
this.datasource = r.data;
console.log(">>>>>>>>>>>>>>>>>>>>",r.data)
}
});
}
}
},
created() {
this.initDataSource()
},
mounted() {
}
};
</script>
<style>
</style>
iview-admin/src/view/components/tables/forms/childs/dicselects.vue 0 → 100644
<template>
<Select
v-model="sels"
style="width:150px;"
@on-change="onchange"
clearable
:multiple="isMulti"
:placeholder="placeHolder"
>
<Option v-for="item in datasource" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
import { refQuery } from "@/api/meta";
export default {
name: "dicselects",
components: {},
model: {
prop: "value",
event: "change"
},
props: ["value","dicName","placeHolder","isMulti"],
data() {
return {
sels: this.value? this.value:[],
datasource: []
};
},
watch: {
value(nv, ov) {
this.sels = nv;
}
},
methods: {
onchange(v) {
console.log("=============", v);
this.$emit("change", this.sels);
},
initDataSource(slike) {
let objdic = this.$store.getters.dict_info[this.dicName];
console.log(objdic);
Object.keys(objdic).forEach(k => {
this.datasource.push({
value: k,
label: objdic[k]
});
});
}
},
created() {
this.initDataSource();
},
mounted() {}
};
</script>
<style>
</style>
iview-admin/src/view/components/tables/forms/childs/modelselects.vue 0 → 100644
<template>
<Select
v-model="sels"
style="width:150px"
@on-change="onchange"
clearable
:multiple="isMulti"
:placeholder="placeHolder"
>
<Option v-for="item in datasource" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
import { refQuery } from "@/api/meta";
export default {
name: "remoteselects",
components: {},
model: {
prop: "value",
event: "change"
},
props: ["labelField","valueField","value","refModel","placeHolder","isMulti"],
data() {
return {
sels: this.value? this.value:[],
datasource: []
};
},
watch: {
value(nv, ov) {
this.sels = nv;
}
},
methods: {
onchange(v) {
console.log("=============", v);
this.$emit("change", this.sels);
},
initDataSource(slike) {
// this.datasource=[]
let query = {};
let url = "/web/common/" + this.refModel + "Ctl/refQuery";
query.fields = [this.labelField, this.valueField];
query.likestr = slike;
query.refwhere = this.refwhere ? this.refwhere : {};
refQuery(url, query).then(r => {
if(r.data){
this.datasource=r.data;
}
});
}
},
created() {
this.initDataSource();
},
mounted() {}
};
</script>
<style>
</style>
iview-admin/src/view/components/tables/forms/childs/rediogroups.vue 0 → 100644
<template>
<RadioGroup v-model="sels" @on-change="onchange" type="button">
<Radio v-for="item in datasource" :label="item.value" :key="item.value" :Border="isborder">{{item.label}}</Radio>
</RadioGroup>
</template>
<script>
import { refQuery } from "@/api/meta";
export default {
name: "rediogroups",
components: {},
model: {
prop: "value",
event: "change"
},
props:["value","dicName","refModel","labelField","valueField","refwhere","isborder"],
data() {
return {
sels: this.value,
datasource: []
};
},
watch: {
value(nv, ov) {
this.sels = nv;
}
},
methods: {
onchange(v) {
this.$emit("change", this.sels);
},
initDataSource(slike) {
if (this.dicName && this.dicName!="") {
let objdic = this.$store.getters.dict_info[this.dicName];
console.log(objdic);
Object.keys(objdic).forEach(k => {
this.datasource.push({
value: k,
label: objdic[k]
});
});
} else {
let query = {};
let url = "/web/common/" + this.refModel + "Ctl/refQuery";
query.fields = [this.labelField, this.valueField];
query.likestr = slike;
query.refwhere = this.refwhere ? this.refwhere : {};
refQuery(url, query).then(r => {
if (r.data) {
this.datasource = r.data;
console.log(">>>>>>>>>>>>>>>>>>>>",r.data)
}
});
}
}
},
created() {
this.initDataSource()
},
mounted() {
}
};
</script>
<style>
</style>
iview-admin/src/view/components/tables/forms/childs/remoteselects.vue 0 → 100644
<template>
<Select
v-model="sels"
style="width:150px"
@on-change="onchange"
clearable
filterable
remote
:remote-method="remoteMethod"
:loading="loading2"
:multiple="isMulti"
:placeholder="placeHolder"
>
<Option v-for="item in datasource" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
import { refQuery } from "@/api/meta";
export default {
name: "modelselects",
components: {},
model: {
prop: "value",
event: "change"
},
props:["labelField","valueField","value","refModel","placeHolder","isMulti"],
data() {
return {
sels: this.value? this.value:[],
datasource: [],
loading2:false
};
},
watch: {
value(nv, ov) {
this.sels = nv;
}
},
methods: {
remoteMethod(q){
this.loading2=true
setTimeout(()=>{
this.initDataSource(q)
},200)
},
onchange(v) {
console.log("=============", v);
this.$emit("change", this.sels);
},
initDataSource(slike) {
// this.datasource=[]
let query = {};
let url = "/web/common/" + this.refModel + "Ctl/refQuery";
query.fields = [this.labelField, this.valueField];
query.likestr = slike;
query.refwhere = this.refwhere ? this.refwhere : {};
refQuery(url, query).then(r => {
if (r.data) {
this.datasource = r.data;
this.loading2=false
}
});
}
},
created() {
},
mounted() {}
};
</script>
<style>
</style>
iview-admin/src/view/components/tables/forms/childs/switchs.vue 0 → 100644
<template>
<i-switch v-model="switch1" size="large" :true-color="truecolor" :false-color="falsecolor">
<span slot="open">{{ openlabel}}</span>
<span slot="close">{{closelabel}}</span>
</i-switch>
</template>
<script>
import { refQuery } from "@/api/meta";
export default {
name: "switchs",
components: {},
model: {
prop: "value",
event: "change"
},
props: {
value: {
type: Boolean,
default() {
return false;
}
},
truecolor:String,
falsecolor:String,
openlabel:String,
closelabel:String
},
data() {
return {
switch1: this.value,
};
},
watch: {
value(nv, ov) {
this.switch1 = nv;
}
},
methods: {
onchange(v) {
this.$emit("change", this.switch1);
}
},
created() {
},
mounted() {}
};
</script>
<style>
</style>
iview-admin/src/view/components/tables/forms/forms.vue
...@@ -4,15 +4,40 @@ ...@@ -4,15 +4,40 @@
<div> <div>
<button type="primary" @click="testclick">test</button> <button type="primary" @click="testclick">test</button>
</div> </div>
<p slot="title">
<Icon type="ios-film-outline"></Icon>
{{forminfo.name}}
</p>
<Form ref="formInline" :model="formModel" :rules="metaRules"> <Form ref="formInline" :model="formModel" :rules="metaRules">
<template v-for="group in forminfo"> <template v-for="group in forminfo.data">
<Divider orientation="left" :key="group.title">{{group.title}}</Divider> <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
<Row :key="'r'+group.title"> <Row type="flex" justify="space-around" align="top" :key="'r'+group.title">
<Col :xs="2" :sm="4" :md="6" :lg="8" v-for="ctl in group.ctls" :key="ctl.prop"> <Col :xs="2" :sm="4" :md="6" :lg="8" v-for="ctl in group.ctls" :key="ctl.prop">
<FormItem :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 v-model="formModel[ctl.prop]" /> <input v-model="formModel[ctl.prop]" />
</template> </template>
<template v-if="ctl.type=='btn'">
<button :type="ctl.btncss" :icon="ctl.icon">{{ctl.label}}</button>
</template>
<template v-if="ctl.type=='dic-select'">
<DicSelect v-model="formModel[ctl.prop]" :dicName="ctl.dicName" :placeHolder="ctl.placeHolder" :isMulti="ctl.isMulti"></DicSelect>
</template>
<template v-if="ctl.type=='model-select'">
<ModelSelect v-model="formModel[ctl.prop]" :refModel="ctl.refModel" :placeHolder="ctl.placeHolder" :isMulti="ctl.isMulti"></ModelSelect>
</template>
<template v-if="ctl.type=='remote-select'">
<RemoteSelect v-model="formModel[ctl.prop]" :refModel="ctl.refModel" :placeHolder="ctl.placeHolder" :isMulti="ctl.isMulti"></RemoteSelect>
</template>
<template v-if="ctl.type=='switch'">
<Switchs v-model="formModel[ctl.prop]" :openlabel="ctl.opentext" :closelabel="ctl.closetext" :truecolor="ctl.truecolor" :falsecolor="ctl.falsecolor"></Switchs>
</template>
<template v-if="ctl.type=='checkgroup'">
<Checkgroups v-model="formModel[ctl.prop]" :dicName="ctl.dicName" :refModel="ctl.refModel" :isborder="ctl.isBorder"></Checkgroups>
</template>
<template v-if="ctl.type=='radiogroup'">
<Radiogroups v-model="formModel[ctl.prop]" :dicName="ctl.dicName" :refModel="ctl.refModel" :isborder="ctl.isBorder"></Radiogroups>
</template>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
...@@ -23,14 +48,27 @@ ...@@ -23,14 +48,27 @@
</template> </template>
<script> <script>
// import { getTableData } from '@/api/data' // import { getTableData } from '@/api/data'
import DicSelect from "./childs/dicselects"
import ModelSelect from "./childs/modelselects"
import RemoteSelect from "./childs/remoteselects"
import Switchs from "./childs/switchs"
import Checkgroups from "./childs/checkgroups"
import Radiogroups from "./childs/rediogroups"
export default { export default {
name: "forms", name: "forms",
components: {}, components: {
DicSelect,
ModelSelect,
RemoteSelect,
Switchs,
Checkgroups,
Radiogroups
},
props: { props: {
fminfo: { fminfo: {
type: Array, type: Object,
default() { default() {
return []; return {};
} }
}, },
refvalidatemethod: { refvalidatemethod: {
...@@ -47,7 +85,8 @@ export default { ...@@ -47,7 +85,8 @@ export default {
forminfo: this.fminfo ? this.fminfo : [], forminfo: this.fminfo ? this.fminfo : [],
formModel: {}, formModel: {},
metaRules: {}, metaRules: {},
btninfos: [] btninfos: [],
ctlVisable:{},
}; };
}, },
watch: { watch: {
...@@ -65,15 +104,15 @@ export default { ...@@ -65,15 +104,15 @@ export default {
} }
}, },
testclick() { testclick() {
console.log(this.formModel); console.log(JSON.stringify(this.formModel));
}, },
initFormModel() { initFormModel() {
this.forminfo.forEach(m => { this.forminfo.data.forEach(m => {
if (!m || !m.ctls) { if (!m || !m.ctls) {
return; return;
} }
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) { if (ctl.rules) {
ctl.rules.forEach(r => { ctl.rules.forEach(r => {
if (r.validator) { if (r.validator) {
...@@ -82,7 +121,7 @@ export default { ...@@ -82,7 +121,7 @@ export default {
}); });
this.metaRules[ctl.prop] = ctl.rules; this.metaRules[ctl.prop] = ctl.rules;
} }
if (ctl.type == "select") { if (ctl.type.indexOf("select")>=0 || ctl.type.indexOf("checkgroups")>=0) {
this.$set(this.formModel, ctl.prop, []); this.$set(this.formModel, ctl.prop, []);
} else { } else {
console.log(ctl.prop); console.log(ctl.prop);
......
iview-admin/src/view/components/tables/tables.vue
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
data () { data () {
this.metaName="user_info" this.metaName="user_info"
return { return {
forminfo:this.metaName?this.$store.getters[this.metaName]["form"]:[], forminfo:this.metaName?this.$store.getters[this.metaName]["form"]:{},
columns: this.metaName?this.$store.getters[this.metaName]["list"]:[], columns: this.metaName?this.$store.getters[this.metaName]["list"]:[],
tableData: [] tableData: []
} }
......
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