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 {
{ "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":"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 {
url = this.buildUrl("create");
msg = "当前的新增操作已成功.";
}
console.log("row........................save")
console.log(row)
saveFormData(url, row).then(res => {
let rtn = res.data;
console.log(rtn);
......
iview-admin/src/view/components/tables/forms/childs/uploads.vue
<template>
<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'">
<img :src="item.url">
<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>
</div>
</template>
<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>
</div>
<div>
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action="action"
style="display: inline-block;width:58px;"
>
>
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size="20"></Icon>
</div>
</Upload>
</div>
<Upload
ref="upload"
:data="d"
:show-upload-list="false"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
multiple
type="drag"
:action="action"
style="display: inline-block;width:58px;"
>
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size="20"></Icon>
</div>
</Upload>
<Modal title="View Image" v-model="visible">
<img :src="imgName" v-if="visible" style="width: 100%">
</Modal>
</div>
</template>
......@@ -42,13 +42,13 @@ import { ossConfig } from "@/api/meta";
export default {
name: "uploads",
components: {},
props: ["value"],
model: {
prop: "value",
event: "uploadsuccess"
event: "change"
},
data() {
return {
defaultList: [],
imgName: "",
visible: false,
uploadList: [],
......@@ -58,18 +58,62 @@ export default {
};
},
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) {
this.imgName = name;
this.visible = true;
},
handleRemove(file) {
//to do --添加修改时已经有逻辑，fileList中没有
const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
},
handleSuccess(res, file, fileList) {
file.url =
"https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar";
file.name = "7eb99afb9d5f317c912f08b5212fd69a";
// var xml= this.loadXML(res);
// this.result=xml.documentElement.getElementsByTagName("Location")[0].textContent;
//解析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) {
this.$Notice.warning({
......@@ -86,19 +130,59 @@ export default {
desc: "File " + file.name + " is too large, no more than 2M."
});
},
handleBeforeUpload() {
handleBeforeUpload(file) {
const check = this.uploadList.length < 5;
if (!check) {
this.$Notice.warning({
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;
}
},
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";
ossConfig().then(res => {
ossConfig(url, null).then(res => {
let rtn = res.data;
if (rtn.status == 0) {
let data = rtn.data;
......@@ -113,18 +197,22 @@ export default {
console.log("cofig fetch failuer");
}
});
},
mounted() {
this.uploadList = this.$refs.upload.fileList;
},
watch: {
value: function(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>
<style>
.demo-upload-list {
display: inline-block;
......
iview-admin/src/view/components/tables/forms/forms.vue
......@@ -11,7 +11,7 @@
<TabPane label="表单信息" name="main">
<template v-for="group in forminfo.main">
<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">
<FormItem v-if="ctlVisable[ctl.prop]" :label="ctl.label" :prop="ctl.prop">
<template v-if="ctl.type=='input'">
......@@ -73,6 +73,9 @@
:isborder="ctl.isBorder"
></Radiogroups>
</template>
<template v-if="ctl.type=='upload'">
<Uploads v-model="formModel[ctl.prop]"></Uploads>
</template>
</FormItem>
</Col>
</Row>
......@@ -88,7 +91,7 @@
</template>
<template v-else v-for="group in forminfo.main">
<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">
<FormItem v-if="ctlVisable[ctl.prop]" :label="ctl.label" :prop="ctl.prop">
<template v-if="ctl.type=='input'">
......@@ -146,6 +149,9 @@
:isborder="ctl.isBorder"
></Radiogroups>
</template>
<template v-if="ctl.type=='upload'">
<Uploads v-model="formModel[ctl.prop]"></Uploads>
</template>
</FormItem>
</Col>
</Row>
......@@ -165,6 +171,7 @@ import RemoteSelect from "./childs/remoteselects";
import Switchs from "./childs/switchs";
import Checkgroups from "./childs/checkgroups";
import Radiogroups from "./childs/rediogroups";
import Uploads from "./childs/uploads";
export default {
name: "forms",
components: {
......@@ -173,7 +180,8 @@ export default {
RemoteSelect,
Switchs,
Checkgroups,
Radiogroups
Radiogroups,
Uploads
},
props: {
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