suzhou-jichuang-lanhai
/
tcZz-pc
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改文件照片上传方式

Browse Source
lvtianfang
吕天方 2 years ago
parent 0a65b6e45e
commit bdeb23eba8
4 changed files with 220 additions and 202 deletions
Show Stats Download Patch File Download Diff File

4
src/components/FileUpload/index.vue
Unescape View File

@ -28,7 +28,7 @@
<!-- 文件列表 --> <!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank"> <el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ file.name }} </span> <span class="el-icon-document"> {{ file.name }} </span>
</el-link> </el-link>
<div class="ele-upload-list__item-content-action"> <div class="ele-upload-list__item-content-action">
@ -90,7 +90,7 @@ export default {
// 然后将数组转为对象数组 // 然后将数组转为对象数组
this.fileList = list.map(item => { this.fileList = list.map(item => {
if (typeof item === "string") { if (typeof item === "string") {
item = { name: item, url: item }; item = { name: item, url: this.baseUrl + item };
} }
item.uid = item.uid || new Date().getTime() + temp++; item.uid = item.uid || new Date().getTime() + temp++;
return item; return item;

2
src/components/ImageUpload/index.vue
Unescape View File

@ -94,7 +94,7 @@ export default {
this.fileList = list.map(item => { this.fileList = list.map(item => {
if (typeof item === "string") { if (typeof item === "string") {
if (item.indexOf(this.baseUrl) === -1) { if (item.indexOf(this.baseUrl) === -1) {
item = { name: this.baseUrl + item, url: this.baseUrl + item }; item = { name: this.baseUrl + item, url: item };
} else { } else {
item = { name: item, url: item }; item = { name: item, url: item };
} }

147
src/views/tcZz/netManage/gzdt/index.vue
Unescape View File

@ -261,7 +261,7 @@
<!-- <el-form-item label="文件名称" prop="fileName"> <!-- <el-form-item label="文件名称" prop="fileName">
<el-input v-model="form.fileName" placeholder="请输入文件名称" /> <el-input v-model="form.fileName" placeholder="请输入文件名称" />
</el-form-item> --> </el-form-item> -->
<el-form-item label="文件"> <!-- <el-form-item label="文件">
<el-button @click="addDomain" type="primary">添加文件</el-button> <el-button @click="addDomain" type="primary">添加文件</el-button>
</el-form-item> </el-form-item>
<div v-for="(domain, index) in form.domains" :key="index" class="file-item"> <div v-for="(domain, index) in form.domains" :key="index" class="file-item">
@ -284,10 +284,10 @@
<el-input v-model="domain.fileUrl" placeholder="请输入文件路径"></el-input> <el-input v-model="domain.fileUrl" placeholder="请输入文件路径"></el-input>
</el-form-item> </el-form-item>
<el-button @click.prevent="removeDomain(domain)" type="danger" size="mini">删除</el-button> <el-button @click.prevent="removeDomain(domain)" type="danger" size="mini">删除</el-button>
</div> </div> -->
<!-- <el-form-item label="文件路径(完整路径)"> <el-form-item label="文件上传" prop='fileNameS'>
<fileUpload v-model="fileNameS"/> <fileUpload v-model="fileNameS"/>
</el-form-item> --> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<!-- <el-input v-model="form.remark" placeholder="请输入备注" /> --> <!-- <el-input v-model="form.remark" placeholder="请输入备注" /> -->
<el-input v-model="form.remark" resize="none" :rows="5" type="textarea" placeholder="请输入备注" /> <el-input v-model="form.remark" resize="none" :rows="5" type="textarea" placeholder="请输入备注" />
@ -409,12 +409,12 @@
}, },
// 表单参数 // 表单参数
form: { form: {
domains: [ // domains: [
{ // {
fileName: "", // fileName: "",
fileUrl: "" // fileUrl: ""
} // }
], // ],
}, },
// 表单校验 // 表单校验
rules: { rules: {
@ -428,7 +428,7 @@
{ required: true, message: '请输入类型', trigger: 'blur' }, { required: true, message: '请输入类型', trigger: 'blur' },
], ],
}, },
// fileNameS:[], fileNameS:[],
fileList:[], fileList:[],
files:[], files:[],
}; };
@ -488,12 +488,12 @@
updateTime: null, updateTime: null,
remark: null, remark: null,
domains: [ // domains: [
{ // {
fileName: "", // fileName: "",
fileUrl: "" // fileUrl: ""
} // }
], // ],
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -565,50 +565,61 @@
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.reset();
// this.fileNameS = []; this.fileNameS = [];
this.open = true; this.open = true;
this.title = "添加工作动态"; this.title = "添加工作动态";
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
// this.fileNameS = [] this.fileNameS = []
const id = row.id || this.ids const id = row.id || this.ids
getGzdt(id).then(response => { getGzdt(id).then(response => {
// this.form = response.data; this.form = response.data;
this.form.areaId = response.data.areaId; console.log(this.form)
this.form.isStatus = response.data.isStatus; // this.form.areaId = response.data.areaId;
this.form.title = response.data.title; // this.form.isStatus = response.data.isStatus;
this.form.type = response.data.type; // this.form.title = response.data.title;
this.form.createTime = response.data.createTime; // this.form.type = response.data.type;
this.form.remark = response.data.remark; // this.form.createTime = response.data.createTime;
this.form.id = response.data.id; // this.form.remark = response.data.remark;
// this.form.id = response.data.id;
// if (response.data.fileName && response.data.fileUrl) {
// let arr1 = response.data.fileName.split(",");
// let arr2 = response.data.fileUrl.split(",");
// if(arr1.length > 1) {
// this.form.domains = [];
// arr1.forEach((value, index) => {
// this.form.domains.push({
// fileName: value,
// fileUrl: arr2[index],
// });
// });
// } else {
// this.form.domains = [
// {
// fileName: arr1[0],
// fileUrl: arr2[0],
// }
// ];
// }
// } else {
// this.form.domains = [
// {
// fileName: '',
// fileUrl: '',
// }
// ];
// }
if(response.data.fileName && response.data.fileUrl) { if(response.data.fileName && response.data.fileUrl) {
let arr1 = response.data.fileName.split(","); let arr1 = response.data.fileName.split(",");
let arr2 = response.data.fileUrl.split(","); let arr2 = response.data.fileUrl.split(",");
if(arr1.length > 1) { arr1.forEach((name,index) =>{
this.form.domains = []; let obj = {};
arr1.forEach((value, index) => { obj.name = name;
this.form.domains.push({ obj.url = arr2[index]
fileName: value, this.fileNameS.push(obj)
fileUrl: arr2[index], })
});
});
} else {
this.form.domains = [
{
fileName: arr1[0],
fileUrl: arr2[0],
}
];
}
} else {
this.form.domains = [
{
fileName: '',
fileUrl: '',
}
];
} }
this.open = true; this.open = true;
this.title = "修改工作动态"; this.title = "修改工作动态";
@ -629,12 +640,13 @@
submitForm() { submitForm() {
let arr1 = []; let arr1 = [];
let arr2 = []; let arr2 = [];
this.form.domains.forEach((value) => { this.fileNameS.forEach((value) => {
arr1.push(value.fileName); arr1.push(value.name);
arr2.push(value.fileUrl); arr2.push(value.url);
}); });
this.form.fileName = arr1.join(","); this.form.fileName = arr1.join(",");
this.form.fileUrl = arr2.join(","); this.form.fileUrl = arr2.join(",");
if(this.form.fileName && this.form.fileUrl) {
this.$refs["form"].validate(valid => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
if (this.form.id != null) { if (this.form.id != null) {
@ -652,6 +664,9 @@
} }
} }
}); });
} else {
this.$modal.msgError('请上传文件')
}
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
@ -703,19 +718,19 @@
// this.$model.msgError("导入失败"); // this.$model.msgError("导入失败");
// }); // });
}, },
addDomain() { // addDomain() {
// console.log(this.form.domains,'domains') // // console.log(this.form.domains,'domains')
this.form.domains.push({ // this.form.domains.push({
fileUrl: '', // fileUrl: '',
fileName: '', // fileName: '',
}); // });
}, // },
removeDomain(item) { // removeDomain(item) {
var index = this.form.domains.indexOf(item) // var index = this.form.domains.indexOf(item)
if (index !== -1) { // if (index !== -1) {
this.form.domains.splice(index, 1) // this.form.domains.splice(index, 1)
} // }
}, // },
} }
} }

101
src/views/tcZz/netManage/qlzxxddt/index.vue
Unescape View File

@ -240,10 +240,10 @@
<!-- <editor v-model="form.content" :min-height="192"/> --> <!-- <editor v-model="form.content" :min-height="192"/> -->
<el-input v-model="form.content" resize="none" :rows="5" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.content" resize="none" :rows="5" type="textarea" placeholder="请输入内容" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="图片路径(完整路径)"> <el-form-item label="图片上传" prop="imageUrl">
<imageUpload v-model="form.imageUrl"/> <imageUpload v-model="form.imageUrl"/>
</el-form-item> --> </el-form-item>
<el-form-item label="文件"> <!-- <el-form-item label="文件">
<el-button @click="addDomain" type="primary">添加图片</el-button> <el-button @click="addDomain" type="primary">添加图片</el-button>
</el-form-item> </el-form-item>
<div v-for="(domain, index) in form.domains" :key="index" class="file-item"> <div v-for="(domain, index) in form.domains" :key="index" class="file-item">
@ -257,7 +257,7 @@
<el-input v-model="domain.imageUrl" placeholder="请输入图片路径"></el-input> <el-input v-model="domain.imageUrl" placeholder="请输入图片路径"></el-input>
</el-form-item> </el-form-item>
<el-button @click.prevent="removeDomain(domain)" type="danger" size="mini">删除</el-button> <el-button @click.prevent="removeDomain(domain)" type="danger" size="mini">删除</el-button>
</div> </div> -->
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<!-- <el-input v-model="form.remark" placeholder="请输入备注" /> --> <!-- <el-input v-model="form.remark" placeholder="请输入备注" /> -->
<el-input v-model="form.remark" resize="none" :rows="5" type="textarea" placeholder="请输入备注" /> <el-input v-model="form.remark" resize="none" :rows="5" type="textarea" placeholder="请输入备注" />
@ -372,11 +372,11 @@
}, },
// 表单参数 // 表单参数
form: { form: {
domains: [ // domains: [
{ // {
imageUrl: "" // imageUrl: ""
} // }
], // ],
}, },
// 表单校验 // 表单校验
rules: { rules: {
@ -389,6 +389,9 @@
content:[ content:[
{ required: true, message: '请输入内容', trigger: 'blur' }, { required: true, message: '请输入内容', trigger: 'blur' },
], ],
imageUrl:[
{ required: true, message: '请上传图片', trigger: 'blur' },
],
}, },
fileList:[], fileList:[],
images:[], images:[],
@ -448,11 +451,11 @@
remark: null, remark: null,
domains: [ // domains: [
{ // {
imageUrl: "" // imageUrl: ""
} // }
], // ],
}; };
this.resetForm("form"); this.resetForm("form");
@ -522,36 +525,36 @@
this.reset(); this.reset();
const id = row.id || this.ids const id = row.id || this.ids
getQlzxxddt(id).then(response => { getQlzxxddt(id).then(response => {
// this.form = response.data; this.form = response.data;
this.form.isStatus = response.data.isStatus; // this.form.isStatus = response.data.isStatus;
this.form.title = response.data.title; // this.form.title = response.data.title;
this.form.content = response.data.content; // this.form.content = response.data.content;
this.form.createTime = response.data.createTime; // this.form.createTime = response.data.createTime;
this.form.remark = response.data.remark; // this.form.remark = response.data.remark;
this.form.id = response.data.id; // this.form.id = response.data.id;
if (response.data.imageUrl) { // if (response.data.imageUrl) {
let arr1 = response.data.imageUrl.split(","); // let arr1 = response.data.imageUrl.split(",");
if(arr1.length > 1) { // if(arr1.length > 1) {
this.form.domains = []; // this.form.domains = [];
arr1.forEach((value, index) => { // arr1.forEach((value, index) => {
this.form.domains.push({ // this.form.domains.push({
imageUrl: value, // imageUrl: value,
}); // });
}); // });
} else { // } else {
this.form.domains = [ // this.form.domains = [
{ // {
imageUrl: arr1[0], // imageUrl: arr1[0],
} // }
]; // ];
} // }
} else { // } else {
this.form.domains = [ // this.form.domains = [
{ // {
imageUrl: '', // imageUrl: '',
} // }
]; // ];
} // }
this.open = true; this.open = true;
this.title = "修改清朗专项行动动态"; this.title = "修改清朗专项行动动态";
}); });
@ -569,11 +572,11 @@
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
let arr1 = []; // let arr1 = [];
this.form.domains.forEach((value) => { // this.form.domains.forEach((value) => {
arr1.push(value.imageUrl); // arr1.push(value.imageUrl);
}); // });
this.form.imageUrl = arr1.join(","); this.form.imageUrl = process.env.VUE_APP_BASE_API + this.form.imageUrl;
this.$refs["form"].validate(valid => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
if (this.form.id != null) { if (this.form.id != null) {

Write Preview
Loading…
Cancel
Save