elink-star
/
epmet-oper-gov
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化图片上传

dev-map-local
dai 3 years ago
parent
0e427062a5
commit
fb6f98b5ae
3 changed files with 334 additions and 242 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/modules/communityParty/article/drafts.vue
  2. 9
      src/views/modules/communityParty/orgActivity/activivityList/addActivity.vue
  3. 565
      src/views/modules/worklog/icworklog-add-or-update.vue

2
src/views/modules/communityParty/article/drafts.vue
View File

@ -365,7 +365,7 @@ export default {
methods: { methods: {
async handleClickDraft(fmData) { async handleClickDraft(fmData) {
let url = this.addUrl; let url = '/gov/voice/article/addOrSaveDraft';
let params = { let params = {
...fmData, ...fmData,
type: "draft", type: "draft",

9
src/views/modules/communityParty/orgActivity/activivityList/addActivity.vue
View File

@ -154,6 +154,7 @@
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3"
:on-success="handleFileSuccess" :on-success="handleFileSuccess"
:on-remove="handleFileRemove" :on-remove="handleFileRemove"
:on-preview="item => handlePreview(item.url)"
:limit="3" :limit="3"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:file-list="fileList"> :file-list="fileList">
@ -585,6 +586,14 @@ export default {
}, },
handlePreview(src) {
console.log(src)
if(src){
window.open(src);
}
},
beforeUpload (file) { beforeUpload (file) {
const array = file.name.split('.') const array = file.name.split('.')
const extension = array[array.length - 1] const extension = array[array.length - 1]

565
src/views/modules/worklog/icworklog-add-or-update.vue
View File

@ -1,54 +1,81 @@
<template> <template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : formType==='detail' ? '查看' : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog
<el-form :model="dataForm" :disabled="formType==='detail'" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> :visible.sync="visible"
<el-form-item label="所属网格" :title="
prop="gridId"> !dataForm.id ? $t('add') : formType === 'detail' ? '查看' : $t('update')
<el-select "
v-model.trim="dataForm.gridId" :close-on-click-modal="false"
placeholder="请选择" :close-on-press-escape="false"
clearable >
> <el-form
<el-option :model="dataForm"
v-for="item in optionsG" :disabled="formType === 'detail'"
:key="item.gridId" :rules="dataRule"
:label="item.gridName" ref="dataForm"
:value="item.gridId" @keyup.enter.native="dataFormSubmitHandle()"
:disabled="item.disabled" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
> >
</el-option> <el-form-item label="所属网格" prop="gridId">
</el-select> <el-select
</el-form-item> v-model.trim="dataForm.gridId"
<el-form-item label="标题" prop="title"> placeholder="请选择"
<el-input v-model="dataForm.title" placeholder="标题"></el-input> clearable
>
<el-option
v-for="item in optionsG"
:key="item.gridId"
:label="item.gridName"
:value="item.gridId"
:disabled="item.disabled"
>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="日志类型" prop="logType"> <el-form-item label="标题" prop="title">
<el-select v-model="dataForm.logType" <el-input v-model="dataForm.title" placeholder="标题"></el-input>
placeholder="请选择"
size="small"
clearable>
<el-option v-for="item in logTypeArr"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="日志时间" prop="logDate"> <el-form-item label="日志类型" prop="logType">
<el-date-picker <el-select
v-model="dataForm.logDate" v-model="dataForm.logType"
format="yyyy-MM-dd" placeholder="请选择"
value-format="yyyy-MM-dd" size="small"
type="date" clearable
placeholder="选择日期"> >
</el-date-picker> <el-option
v-for="item in logTypeArr"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="content"> <el-form-item label="日志时间" prop="logDate">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" v-model="dataForm.content" placeholder="内容"></el-input> <el-date-picker
v-model="dataForm.logDate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="内容" prop="content">
<el-input type="textarea" v-model="dataForm.remark" placeholder="备注"></el-input> <el-input
type="textarea"
:autosize="{ minRows: 3, maxRows: 5 }"
v-model="dataForm.content"
placeholder="内容"
></el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item class="block" <el-form-item label="备注" prop="remark">
<el-input
type="textarea"
v-model="dataForm.remark"
placeholder="备注"
></el-input>
</el-form-item>
<!-- <el-form-item class="block"
label="照片" label="照片"
label-width="150px" label-width="150px"
prop="attach"> prop="attach">
@ -69,151 +96,201 @@
</el-upload> </el-upload>
</el-form-item> --> </el-form-item> -->
<el-form-item label="照片" <el-form-item label="照片" style="display: block">
style="display:block"> <el-upload
<el-upload :headers="$getElUploadHeaders()" :class="['avatar-uploader', {'hide': hideUploadBtn}] " :headers="$getElUploadHeaders()"
ref="uploadPic" :class="['avatar-uploader', { hide: hideUploadBtn }]"
:action="uploadUlr" ref="uploadPic"
list-type="picture-card" :action="uploadUlr"
:on-exceed="exceedPic" list-type="picture-card"
:on-remove="removePic" accept=""
:file-list="dataForm.fileList" :before-upload="(file) => beforeImgUpload(file, item)"
:on-change="handleEditChange" :on-exceed="exceedPic"
:on-success="handleSuccess" :on-remove="removePic"
:limit="3"> :file-list="dataForm.fileList"
<span class="font-14">选择图片</span> :on-change="handleEditChange"
<div slot="tip" :on-success="handleSuccess"
class="upload_tip">最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式</div> :limit="3"
</el-upload> >
</el-form-item> <span class="font-14">选择图片</span>
</el-form> <div slot="tip" class="upload_tip">
最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式
</div>
</el-upload>
</el-form-item>
</el-form>
<template slot="footer" v-if="formType != 'detail'"> <template slot="footer" v-if="formType != 'detail'">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> <el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
import { requestPost } from "@/js/dai/request" import { requestPost } from "@/js/dai/request";
export default { export default {
data () { data() {
return { return {
formType: '', formType: "",
visible: false, visible: false,
gridState: true, gridState: true,
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
logTypeArr: [], logTypeArr: [],
optionsG: [], optionsG: [],
dataForm: { dataForm: {
id: '', id: "",
agencyId: '', agencyId: "",
pids: '', pids: "",
gridId: '', gridId: "",
title: '', title: "",
logType: '', logType: "",
logDate: '', logDate: "",
content: '', content: "",
remark: '', remark: "",
mobile: '', mobile: "",
fileList: [], fileList: [],
// imageList: [],// 图片集合 // imageList: [],// 图片集合
}, },
hideUploadBtn: false hideUploadBtn: false,
} };
}, },
created () { created() {
this.getCategrayList() this.getCategrayList();
}, },
computed: { computed: {
dataRule () { dataRule() {
return { return {
title: [ title: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
], ],
logType: [ logType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
], ],
logDate: [ logDate: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
], ],
content: [ content: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
] required: true,
} message: this.$t("validate.required"),
} trigger: "blur",
},
],
};
},
}, },
methods: { methods: {
init () { beforeImgUpload(file, item) {
this.visible = true console.log(file);
this.getGridList() const isLt1M = file.size / 1024 / 1024 < 10;
const srcType = file.type;
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 10MB!");
return false;
}
if (srcType.indexOf("image") == -1) {
this.$message.error("仅限图片格式");
return false;
}
return true;
},
init() {
this.visible = true;
this.getGridList();
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs["dataForm"].resetFields();
this.dataForm.fileList = [] this.dataForm.fileList = [];
if (this.dataForm.id) { if (this.dataForm.id) {
this.getInfo() this.getInfo();
} }
}) });
}, },
// 获取信息 // 获取信息
getInfo () { getInfo() {
this.$http.get(`/gov/org/icWorkLog/${this.dataForm.id}`).then(({ data: res }) => { this.$http
if (res.code !== 0) { .get(`/gov/org/icWorkLog/${this.dataForm.id}`)
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.dataForm = { return this.$message.error(res.msg);
...this.dataForm, }
...res.data this.dataForm = {
} ...this.dataForm,
...res.data,
const grid = this.optionsG.filter(item => item.gridId === res.data.gridId) };
if (grid.length < 1 && res.data.gridId !== '') {
this.gridState = false const grid = this.optionsG.filter(
this.optionsG.push({gridName:res.data.gridName, gridId:res.data.gridId, disabled: true}) (item) => item.gridId === res.data.gridId
} else { );
this.gridState = true if (grid.length < 1 && res.data.gridId !== "") {
} this.gridState = false;
this.optionsG.push({
gridName: res.data.gridName,
gridId: res.data.gridId,
disabled: true,
});
} else {
this.gridState = true;
}
const { id } = this.$store.state.user const { id } = this.$store.state.user;
if (this.dataForm.createdBy == id) { // 是本人可以修改 if (this.dataForm.createdBy == id) {
this.formType = 'update' // 是本人可以修改
} else { // 不是本人只能查看 this.formType = "update";
this.formType = 'detail' } else {
} // 不是本人只能查看
}).catch(() => {}) this.formType = "detail";
}
})
.catch(() => {});
}, },
// 字典 // 字典
async getCategrayList () { async getCategrayList() {
console.log(localStorage.getItem('token')) console.log(localStorage.getItem("token"));
const url = "/sys/dict/data/dictlist" const url = "/sys/dict/data/dictlist";
let params = { let params = {
dictType: 'log_type' dictType: "log_type",
} };
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
this.logTypeArr = data this.logTypeArr = data;
} else { } else {
this.$message.error(msg) this.$message.error(msg);
} }
}, },
getGridList() { getGridList() {
this.$http this.$http
.post('/gov/mine/agency/getmygrids') .post("/gov/mine/agency/getmygrids")
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg);
} else { } else {
console.log('获取查询详情成功', res.data) console.log("获取查询详情成功", res.data);
this.optionsG = res.data this.optionsG = res.data;
} }
}) })
.catch(() => { .catch(() => {
return this.$message.error('网络错误') return this.$message.error("网络错误");
}) });
}, },
// beforeUpload (file) { // beforeUpload (file) {
// const array = file.name.split('.') // const array = file.name.split('.')
@ -276,129 +353,135 @@ export default {
// a.href = file.url; // a.href = file.url;
// a.dispatchEvent(event); // a.dispatchEvent(event);
// }, // },
exceedPic () { exceedPic() {
this.$message.warning("最多上传3张预览图片") this.$message.warning("最多上传3张预览图片");
}, },
removePic (file, fileList) { removePic(file, fileList) {
// this.formData.imageList.splice(this.formData.imageList.findIndex(item => item === file.url), 1) // this.formData.imageList.splice(this.formData.imageList.findIndex(item => item === file.url), 1)
if (file && file.status === "success") { if (file && file.status === "success") {
this.dataForm.fileList.splice(this.dataForm.fileList.findIndex(item => item.uid === file.uid), 1) this.dataForm.fileList.splice(
this.dataForm.fileList.findIndex((item) => item.uid === file.uid),
1
);
} }
this.hideUploadBtn = fileList.length >= 3; this.hideUploadBtn = fileList.length >= 3;
}, },
handleSuccess (res, file) { handleSuccess(res, file) {
if (res.code === 0 && res.msg === 'success') { if (res.code === 0 && res.msg === "success") {
const array = file.name.split('.') const array = file.name.split(".");
const fileType = array[array.length - 1] const fileType = array[array.length - 1];
const picArray = ['jpg', 'png', 'jpeg', 'bmp'] const picArray = ["jpg", "png", "jpeg", "bmp"];
const videoarray = ['mp4', 'wma', 'm4a'] const videoarray = ["mp4", "wma", "m4a"];
const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf'] const docArray = ["doc", "docx", "xls", "xlsx", "pdf"];
const mp3Array = ['mp3'] const mp3Array = ["mp3"];
if (picArray.indexOf(fileType) > -1) { if (picArray.indexOf(fileType) > -1) {
file.attachmentFormat = 'image' file.attachmentFormat = "image";
} else if (videoarray.indexOf(fileType) > -1) { } else if (videoarray.indexOf(fileType) > -1) {
file.attachmentFormat = 'video' file.attachmentFormat = "video";
} else if (docArray.indexOf(fileType) > -1) { } else if (docArray.indexOf(fileType) > -1) {
file.attachmentFormat = 'doc' file.attachmentFormat = "doc";
} else if (mp3Array.indexOf(fileType) > -1) { } else if (mp3Array.indexOf(fileType) > -1) {
file.attachmentFormat = 'voice' file.attachmentFormat = "voice";
} }
file.url = res.data.url
file.type = fileType
file.fileName = file.name file.url = res.data.url;
file.fileType = file.type file.type = fileType;
this.dataForm.fileList.push(file) file.fileName = file.name;
console.log(this.dataForm.fileList) file.fileType = file.type;
} else this.$message.error(res.msg)
this.dataForm.fileList.push(file);
console.log(this.dataForm.fileList);
} else this.$message.error(res.msg);
}, },
// 最多上传3张图，超过时隐藏上传按钮 // 最多上传3张图，超过时隐藏上传按钮
handleEditChange (file, fileList) { handleEditChange(file, fileList) {
this.hideUploadBtn = fileList.length >= 3; this.hideUploadBtn = fileList.length >= 3;
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce(function () { dataFormSubmitHandle: debounce(
if (!this.gridState) { function () {
this.dataForm.gridId = '' if (!this.gridState) {
this.gridState = true this.dataForm.gridId = "";
return this.$message.error("请重新选择网格") this.gridState = true;
} return this.$message.error("请重新选择网格");
if (this.dataForm.content.length < 70) {
return this.$message.error("内容不能少于70字")
}
if (this.dataForm.fileList.length < 1) {
return this.$message.error("照片不能为空")
}
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
} }
this.$http[!this.dataForm.id ? 'post' : 'put']('/gov/org/icWorkLog/', this.dataForm).then(({ data: res }) => { if (this.dataForm.content.length < 70) {
if (res.code !== 0) { return this.$message.error("内容不能少于70字");
return this.$message.error(res.msg) }
if (this.dataForm.fileList.length < 1) {
return this.$message.error("照片不能为空");
}
this.$refs["dataForm"].validate((valid) => {
if (!valid) {
return false;
} }
this.$message({ this.$http[!this.dataForm.id ? "post" : "put"](
message: this.$t('prompt.success'), "/gov/org/icWorkLog/",
type: 'success', this.dataForm
duration: 500, )
onClose: () => { .then(({ data: res }) => {
this.visible = false if (res.code !== 0) {
this.$emit('refreshDataList') return this.$message.error(res.msg);
} }
}) this.$message({
}).catch(() => {}) message: this.$t("prompt.success"),
}) type: "success",
}, 1000, { 'leading': true, 'trailing': false }) duration: 500,
} onClose: () => {
} this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item_width_1 { .item_width_1 {
width: 500px; width: 500px;
} }
.item_width_2 { .item_width_2 {
width: 400px; width: 400px;
} }
.item_width_3 { .item_width_3 {
margin-left: 10px; margin-left: 10px;
width: 200px; width: 200px;
} }
.item_width_4 { .item_width_4 {
width: 200px; width: 200px;
} }
.div_map { .div_map {
margin-top: 10px; margin-top: 10px;
} }
.div_btn { .div_btn {
// display: flex; // display: flex;
// justify-content: flex-end; // justify-content: flex-end;
} }
.el-tabs { .el-tabs {
margin: 0 20px; margin: 0 20px;
} }
.el-upload__tip { .el-upload__tip {
color: rgb(155, 155, 155); color: rgb(155, 155, 155);
margin: 0; margin: 0;
} }
.form { .form {
margin-top: 30px; margin-top: 30px;
} }
.attachement-list { .attachement-list {
} }
</style> </style>

Write Preview
Loading…
Cancel
Save