Skip to content

Z
zhichan
Commit 82a85904 by 蒋勇
Options

d

parent 9403d820
Showing with 138 additions and 39 deletions
iview-admin/src/store/module/metainfo/userinfo.js
...@@ -36,6 +36,7 @@ export default { ...@@ -36,6 +36,7 @@ export default {
{ "type": "input", "label": "昵称", "prop": "nickName", "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": "mail", "placeHolder": "请输入邮件", "style": "", rules: [{ "required": true, "message": ' ', "trigger": 'blur' },] }, { "type": "input", "label": "邮件", "prop": "mail", "placeHolder": "请输入邮件", "style": "", rules: [{ "required": true, "message": ' ', "trigger": 'blur' },] },
{"type":"model-select","refModel":"auth.role","isMulti":true,"label":"角色","prop":"roles","labelField":"name","valueField":"id","style":""}, {"type":"model-select","refModel":"auth.role","isMulti":true,"label":"角色","prop":"roles","labelField":"name","valueField":"id","style":""},
{ "type": "upload", "label": "头像", "prop": "headUrl", "placeHolder": "请上传头像", "style": "", rules: [{ "required": true, "message": ' ', "trigger": 'blur' },] },
] ]
} }
], ],
......
iview-admin/src/view/components/tables/biztables.vue
...@@ -267,6 +267,8 @@ export default { ...@@ -267,6 +267,8 @@ export default {
url = this.buildUrl("create"); url = this.buildUrl("create");
msg = "当前的新增操作已成功."; msg = "当前的新增操作已成功.";
} }
console.log("row........................save")
console.log(row)
saveFormData(url, row).then(res => { saveFormData(url, row).then(res => {
let rtn = res.data; let rtn = res.data;
console.log(rtn); console.log(rtn);
......
iview-admin/src/view/components/tables/forms/childs/uploads.vue
<template> <template>
<div> <div>
<div class="demo-upload-list" :key="item.name" v-for="item in uploadList"> <div class="demo-upload-list" :key="item.name" v-for="item in ups">
<template v-if="item.status === 'finished'"> <template v-if="item.status === 'finished'">
<img :src="item.url"> <img :src="item.url">
<div class="demo-upload-list-cover"> <div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon> <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress> <Progress v-if="item.showProgress" :percent="50" hide-info></Progress>
</template> </template>
</div> </div>
<div> <Upload
<Upload ref="upload"
ref="upload" :data="d"
:show-upload-list="false" :show-upload-list="false"
:default-file-list="defaultList" :on-success="handleSuccess"
:on-success="handleSuccess" :format="['jpg','jpeg','png']"
:format="['jpg','jpeg','png']" :max-size="2048"
:max-size="2048" :on-format-error="handleFormatError"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
:on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload"
:before-upload="handleBeforeUpload" multiple
multiple type="drag"
type="drag" :action="action"
action="action" style="display: inline-block;width:58px;"
style="display: inline-block;width:58px;" >
> <div style="width: 58px;height:58px;line-height: 58px;">
> <Icon type="ios-camera" size="20"></Icon>
<div style="width: 58px;height:58px;line-height: 58px;"> </div>
<Icon type="ios-camera" size="20"></Icon> </Upload>
</div> <Modal title="View Image" v-model="visible">
</Upload> <img :src="imgName" v-if="visible" style="width: 100%">
</div> </Modal>
</div> </div>
</template> </template>
...@@ -42,13 +42,13 @@ import { ossConfig } from "@/api/meta"; ...@@ -42,13 +42,13 @@ import { ossConfig } from "@/api/meta";
export default { export default {
name: "uploads", name: "uploads",
components: {}, components: {},
props: ["value"],
model: { model: {
prop: "value", prop: "value",
event: "uploadsuccess" event: "change"
}, },
data() { data() {
return { return {
defaultList: [],
imgName: "", imgName: "",
visible: false, visible: false,
uploadList: [], uploadList: [],
...@@ -58,18 +58,62 @@ export default { ...@@ -58,18 +58,62 @@ export default {
}; };
}, },
methods: { methods: {
loadXML(xmlString) {
var xmlDoc = null;
if (!window.DOMParser && window.ActiveXObject) {
var xmlDomVersions = [
"MSXML.2.DOMDocument.6.0",
"MSXML.2.DOMDocument.3.0",
"Microsoft.XMLDOM"
];
for (var i = 0; i < xmlDomVersions.length; i++) {
try {
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
xmlDoc.async = false;
xmlDoc.loadXML(xmlString);
break;
} catch (e) {}
}
} else if (
window.DOMParser &&
document.implementation &&
document.implementation.createDocument
) {
try {
var domParser = new DOMParser();
xmlDoc = domParser.parseFromString(xmlString, "text/xml");
} catch (e) {
console.log(e);
}
} else {
return null;
}
return xmlDoc;
},
handleView(name) { handleView(name) {
this.imgName = name; this.imgName = name;
this.visible = true; this.visible = true;
}, },
handleRemove(file) { handleRemove(file) {
//to do --添加修改时已经有逻辑，fileList中没有
const fileList = this.$refs.upload.fileList; const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
}, },
handleSuccess(res, file, fileList) { handleSuccess(res, file, fileList) {
file.url = // var xml= this.loadXML(res);
"https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar"; // this.result=xml.documentElement.getElementsByTagName("Location")[0].textContent;
file.name = "7eb99afb9d5f317c912f08b5212fd69a"; //解析filelist,构造逗号分隔的文件列表
console.log(fileList);
let mps = fileList.map(item => {
if (item.status == "finished") {
let xml = this.loadXML(item.response);
let tmp = xml.documentElement.getElementsByTagName("Location")[0]
.textContent;
return tmp;
}
});
this.result = mps.join(",");
this.$emit("change", this.result);
}, },
handleFormatError(file) { handleFormatError(file) {
this.$Notice.warning({ this.$Notice.warning({
...@@ -86,19 +130,59 @@ export default { ...@@ -86,19 +130,59 @@ export default {
desc: "File " + file.name + " is too large, no more than 2M." desc: "File " + file.name + " is too large, no more than 2M."
}); });
}, },
handleBeforeUpload() { handleBeforeUpload(file) {
const check = this.uploadList.length < 5; const check = this.uploadList.length < 5;
if (!check) { if (!check) {
this.$Notice.warning({ this.$Notice.warning({
title: "Up to five pictures can be uploaded." title: "Up to five pictures can be uploaded."
}); });
} }
this.result = "";
var myDate = new Date();
var key =
"zc_" +
Math.round(Math.random() * 500) +
myDate.getMonth() +
myDate.getTime() +
myDate.getFullYear() +
myDate.getDate() +
myDate.getHours() +
myDate.getMinutes() +
myDate.getSeconds() +
myDate.getMilliseconds() +
file.name.replace(" ", "");
this.d.key = key;
return check; return check;
} }
}, },
created() { created() {},
computed: {
ups() {
let ti = this.uploadList.map(item => {
console.log(item);
if (item.status == "finished" && item.response) {
var xml = this.loadXML(item.response);
let tmplink = xml.documentElement.getElementsByTagName("Location")[0]
.textContent;
return { name: item.name, url: tmplink, status: item.status };
} else {
return item;
}
});
// if(this.result){
// let tmpats=[]
// let i=1
// this.result.split(",").forEach(item=>{
// tmpats.push( {name:i++,url:item,status:'finished'})
// })
// return tmpats
// }
return ti;
}
},
mounted() {
let url = "/api/meta/oss/getOssConfig"; let url = "/api/meta/oss/getOssConfig";
ossConfig().then(res => { ossConfig(url, null).then(res => {
let rtn = res.data; let rtn = res.data;
if (rtn.status == 0) { if (rtn.status == 0) {
let data = rtn.data; let data = rtn.data;
...@@ -113,18 +197,22 @@ export default { ...@@ -113,18 +197,22 @@ export default {
console.log("cofig fetch failuer"); console.log("cofig fetch failuer");
} }
}); });
},
mounted() {
this.uploadList = this.$refs.upload.fileList; this.uploadList = this.$refs.upload.fileList;
}, },
watch: { watch: {
value: function(v) { value: function(v) {
this.result = v; this.result = v;
if (this.result) {
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.");
let i = 10;
this.result.split(",").forEach(item => {
this.uploadList.push({ name: i++, url: item, status: "finished" });
});
}
} }
} }
}; };
</script> </script>
<style> <style>
.demo-upload-list { .demo-upload-list {
display: inline-block; display: inline-block;
......
iview-admin/src/view/components/tables/forms/forms.vue
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<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> <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
<Row type="flex" justify="space-around" align="top" :key="'r'+group.title"> <Row type="flex" justify="start" 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 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'">
...@@ -73,6 +73,9 @@ ...@@ -73,6 +73,9 @@
:isborder="ctl.isBorder" :isborder="ctl.isBorder"
></Radiogroups> ></Radiogroups>
</template> </template>
<template v-if="ctl.type=='upload'">
<Uploads v-model="formModel[ctl.prop]"></Uploads>
</template>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
...@@ -88,7 +91,7 @@ ...@@ -88,7 +91,7 @@
</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> <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
<Row type="flex" justify="space-around" align="top" :key="'r'+group.title"> <Row type="flex" justify="start" align="top" :key="'r'+group.title">
<Col :xs="12" :sm="8" :md="6" :lg="6" v-for="ctl in group.ctls" :key="ctl.prop"> <Col :xs="12" :sm="8" :md="6" :lg="6" v-for="ctl in group.ctls" :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'">
...@@ -146,6 +149,9 @@ ...@@ -146,6 +149,9 @@
:isborder="ctl.isBorder" :isborder="ctl.isBorder"
></Radiogroups> ></Radiogroups>
</template> </template>
<template v-if="ctl.type=='upload'">
<Uploads v-model="formModel[ctl.prop]"></Uploads>
</template>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
...@@ -165,6 +171,7 @@ import RemoteSelect from "./childs/remoteselects"; ...@@ -165,6 +171,7 @@ import RemoteSelect from "./childs/remoteselects";
import Switchs from "./childs/switchs"; import Switchs from "./childs/switchs";
import Checkgroups from "./childs/checkgroups"; import Checkgroups from "./childs/checkgroups";
import Radiogroups from "./childs/rediogroups"; import Radiogroups from "./childs/rediogroups";
import Uploads from "./childs/uploads";
export default { export default {
name: "forms", name: "forms",
components: { components: {
...@@ -173,7 +180,8 @@ export default { ...@@ -173,7 +180,8 @@ export default {
RemoteSelect, RemoteSelect,
Switchs, Switchs,
Checkgroups, Checkgroups,
Radiogroups Radiogroups,
Uploads
}, },
props: { props: {
fminfo: { fminfo: {
......
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