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 };
} }

181
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;
if (response.data.fileName && response.data.fileUrl) { // 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) {
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,29 +640,33 @@
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(",");
this.$refs["form"].validate(valid => { if(this.form.fileName && this.form.fileUrl) {
if (valid) { this.$refs["form"].validate(valid => {
if (this.form.id != null) { if (valid) {
updateGzdt(this.form).then(response => { if (this.form.id != null) {
this.$modal.msgSuccess("修改成功"); updateGzdt(this.form).then(response => {
this.open = false; this.$modal.msgSuccess("修改成功");
this.getList(); this.open = false;
}); this.getList();
} else { });
addGzdt(this.form).then(response => { } else {
this.$modal.msgSuccess("新增成功"); addGzdt(this.form).then(response => {
this.open = false; this.$modal.msgSuccess("新增成功");
this.getList(); this.open = false;
}); this.getList();
});
}
} }
} });
}); } 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)
} // }
}, // },
} }
} }

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

@ -154,29 +154,29 @@
</div> </div>
<el-table v-loading="loading" :data="qlzxxddtList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="qlzxxddtList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="序号" align="center" prop="id" /> --> <!-- <el-table-column label="序号" align="center" prop="id" /> -->
<!-- <el-table-column label="区域" align="center" prop="areaId"> <!-- <el-table-column label="区域" align="center" prop="areaId">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.tc_area" :value="scope.row.areaId"/> <dict-tag :options="dict.type.tc_area" :value="scope.row.areaId"/>
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column label="标题" align="center" prop="title" /> <el-table-column label="标题" align="center" prop="title" />
<!-- <el-table-column label="内容" align="center" prop="content" /> <!-- <el-table-column label="内容" align="center" prop="content" />
<el-table-column label="图片路径(完整路径)" align="center" prop="imageUrl" /> <el-table-column label="图片路径(完整路径)" align="center" prop="imageUrl" />
<el-table-column label="备注" align="center" prop="remark" /> --> <el-table-column label="备注" align="center" prop="remark" /> -->
<el-table-column label="启用/禁用" align="center" prop="isStatus"> <el-table-column label="启用/禁用" align="center" prop="isStatus">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <dict-tag :options="dict.type.tc_start" :value="scope.row.isStatus"/> --> <!-- <dict-tag :options="dict.type.tc_start" :value="scope.row.isStatus"/> -->
<el-switch <el-switch
v-model="scope.row.isStatus" v-model="scope.row.isStatus"
:active-value="2" :active-value="2"
:inactive-value="1" :inactive-value="1"
active-color="#ff4949" active-color="#ff4949"
inactive-color="#13ce66" inactive-color="#13ce66"
@change="handleStatusChange(scope.row)" @change="handleStatusChange(scope.row)"
></el-switch> ></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -214,54 +214,54 @@
<el-dialog :visible.sync="open" width="500px" append-to-body custom-class="dialog-box"> <el-dialog :visible.sync="open" width="500px" append-to-body custom-class="dialog-box">
<div slot="title" class="dialog-title">{{ title }}</div> <div slot="title" class="dialog-title">{{ title }}</div>
<el-form ref="form" :model="form" :rules="rules" label-width="auto" class="dialog-from"> <el-form ref="form" :model="form" :rules="rules" label-width="auto" class="dialog-from">
<!-- <el-form-item label="区域" prop="areaId"> <!-- <el-form-item label="区域" prop="areaId">
<el-select v-model="form.areaId" placeholder="请选择区域"> <el-select v-model="form.areaId" placeholder="请选择区域">
<el-option <el-option
v-for="dict in dict.type.tc_area" v-for="dict in dict.type.tc_area"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
<el-form-item label="启用/禁用"> <el-form-item label="启用/禁用">
<el-radio-group v-model="form.isStatus"> <el-radio-group v-model="form.isStatus">
<el-radio <el-radio
v-for="dict in dict.type.tc_start" v-for="dict in dict.type.tc_start"
:key="dict.value" :key="dict.value"
:label="parseInt(dict.value)" :label="parseInt(dict.value)"
>{{dict.label}}</el-radio> >{{dict.label}}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="标题" prop="title"> <el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入标题" /> <el-input v-model="form.title" placeholder="请输入标题" />
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="content"> <el-form-item label="内容" prop="content">
<!-- <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">
<el-form-item <el-form-item
label="图片路径" label="图片路径"
:prop="'domains.' + index + '.imageUrl'" :prop="'domains.' + index + '.imageUrl'"
:rules="{ :rules="{
required: true, message: '图片路径不能为空', trigger: 'blur' required: true, message: '图片路径不能为空', trigger: 'blur'
}" }"
> >
<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="请输入备注" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
@ -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