|
...
|
...
|
@@ -50,7 +50,7 @@ |
|
|
|
width="220">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button>
|
|
|
|
<el-button type="success" @click="centerDialogVisible = true">图片上传</el-button>
|
|
|
|
<el-button type="success" @click="uploadImg(scope.row)">图片上传</el-button>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
...
|
...
|
@@ -73,30 +73,23 @@ |
|
|
|
width="30%"
|
|
|
|
center>
|
|
|
|
<div>
|
|
|
|
<el-upload
|
|
|
|
class="avatar-uploader"
|
|
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
|
:show-file-list="false"
|
|
|
|
:on-success="handleAvatarSuccess"
|
|
|
|
:before-upload="beforeAvatarUpload">
|
|
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
</el-upload>
|
|
|
|
<el-input v-model="description" placeholder="请输入图片描述"></el-input>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 图片选择 -->
|
|
|
|
<input type="file" ref="fileInput" accept="image/*" @change="handleFileChange" style="display: none;">
|
|
|
|
<el-button type="primary" @click="chooseFile">选择图片</el-button>
|
|
|
|
<span v-if="selectedFileName" style="margin-left: 10px;">已选择文件: {{ selectedFileName }}</span>
|
|
|
|
<!-- 图片描述输入框 -->
|
|
|
|
<el-input v-model="imageDescription" placeholder="请输入图片描述" style="margin-top: 20px;"></el-input>
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
|
|
|
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
|
|
|
</span>
|
|
|
|
<!-- 上传按钮 -->
|
|
|
|
<el-button type="success" @click="uploadImage" style="margin-top: 20px;">上传图片</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</el-card>
|
|
|
|
</el-row>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {selectList,DoneTask} from '../../api/consigner/vehicle';
|
|
|
|
import {selectList,DoneTask,UploadImage} from '../../api/consigner/vehicle';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
...
|
...
|
@@ -114,25 +107,56 @@ |
|
|
|
formInline: {
|
|
|
|
user: '',
|
|
|
|
},
|
|
|
|
imageUrl: '',
|
|
|
|
description:''
|
|
|
|
imageDescription: '', // 图片描述
|
|
|
|
selectedFile: null, // 用户选择的文件
|
|
|
|
selectedFileName: '', // 用户选择的文件名
|
|
|
|
id:'',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleAvatarSuccess(res, file) {
|
|
|
|
this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
|
uploadImg(row){this.id=row.id;this.centerDialogVisible=true;},
|
|
|
|
// 选择图片
|
|
|
|
chooseFile() {
|
|
|
|
this.$refs.fileInput.click();
|
|
|
|
},
|
|
|
|
beforeAvatarUpload(file) {
|
|
|
|
const isJPG = file.type === 'image/jpeg';
|
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
|
|
|
|
if (!isJPG) {
|
|
|
|
this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
|
// 文件改变时触发
|
|
|
|
handleFileChange(event) {
|
|
|
|
this.selectedFile = event.target.files[0];
|
|
|
|
this.selectedFileName = this.selectedFile ? this.selectedFile.name : '';
|
|
|
|
},
|
|
|
|
// 上传图片
|
|
|
|
uploadImage() {
|
|
|
|
if(this.selectedFile == null){
|
|
|
|
return this.$message.error('请上传图片')
|
|
|
|
}
|
|
|
|
if(this.imageDescription == null||this.imageDescription == ''){
|
|
|
|
return this.$message.error('请输入描述')
|
|
|
|
}
|
|
|
|
if (!isLt2M) {
|
|
|
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
|
if (!this.selectedFile) {
|
|
|
|
this.$message.warning('请选择图片');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
return isJPG && isLt2M;
|
|
|
|
// 创建 FormData 对象，用于上传文件
|
|
|
|
const formData = new FormData();
|
|
|
|
formData.append('file', this.selectedFile);
|
|
|
|
formData.append('desc', this.imageDescription);
|
|
|
|
formData.append('id',this.id);
|
|
|
|
UploadImage(formData).then((response) => {
|
|
|
|
const res = response.data
|
|
|
|
console.log(response.data)
|
|
|
|
if (res.code !== '200') {
|
|
|
|
return _this.$message.error(res.data)
|
|
|
|
}
|
|
|
|
this.$message.success(res.data)
|
|
|
|
this.centerDialogVisible=false;
|
|
|
|
this.selectedFile=null;
|
|
|
|
this.imageDescription='';
|
|
|
|
this.selectedFileName='';
|
|
|
|
}).catch(error => {
|
|
|
|
// 关闭加载
|
|
|
|
this.$message.error(error.toString())
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
handleSizeChange(val) {
|
|
|
|
this.queryInfo.pageSize = val
|
...
|
...
|
|
