朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 f1d50b604efae81dcf01c2c7ade8f11a932b2c03 1 个父辈 5484016c

crm管理界面优化+出勤车辆上传图片完善+车辆定位新增图片展示功能

内嵌 并排对比
正在显示 5 个修改的文件 包含 131 行增加 和 35 行删除
@@ -7,6 +7,8 @@ const serviceName = '/cloud-user-center' @@ -7,6 +7,8 @@ const serviceName = '/cloud-user-center'
7 7
8 //车辆定位 8 //车辆定位
9 export const selectVehicle = params => { return axios.get(`${baseServiceURL}/map/location/lastlocation`, { params: params }); }; 9 export const selectVehicle = params => { return axios.get(`${baseServiceURL}/map/location/lastlocation`, { params: params }); };
  10 +export const selectByliscenNo = params => { return axios.get(`${baseServiceURL}/map/location/selectByliscenNo`, { params: params }); };
  11 +
10 //出任务 12 //出任务
11 export const insertSelective = params => { return http.post(`${baseServiceURL}/map/location/insertSelective`, params); }; 13 export const insertSelective = params => { return http.post(`${baseServiceURL}/map/location/insertSelective`, params); };
12 //获取用户列表 14 //获取用户列表
@@ -21,6 +23,8 @@ export const selectHistroy = params => { return axios.get(`${baseServiceURL}/map @@ -21,6 +23,8 @@ export const selectHistroy = params => { return axios.get(`${baseServiceURL}/map
21 //出勤车辆 23 //出勤车辆
22 export const selectList = params => { return axios.get(`${baseServiceURL}/map/location/selectList`, { params: params }); }; 24 export const selectList = params => { return axios.get(`${baseServiceURL}/map/location/selectList`, { params: params }); };
23 export const DoneTask = params => { return http.post(`${baseServiceURL}/map/location/DoneTask`, params); }; 25 export const DoneTask = params => { return http.post(`${baseServiceURL}/map/location/DoneTask`, params); };
  26 +export const UploadImage = params => { return http.postMulData(`${baseServiceURL}/map/location/upload`, params); };
  27 +
24 28
25 //根据用户查询所属出勤车辆 29 //根据用户查询所属出勤车辆
26 export const selectNameList = params => { return axios.get(`${baseServiceURL}/map/location/selectNameList`, { params: params }); }; 30 export const selectNameList = params => { return axios.get(`${baseServiceURL}/map/location/selectNameList`, { params: params }); };
@@ -38,6 +38,16 @@ export default { @@ -38,6 +38,16 @@ export default {
38 }], 38 }],
39 }) 39 })
40 }, 40 },
  41 + postMulData(url, data) {
  42 + return axios({
  43 + method: 'POST', // 请求协议
  44 + url: url, // 请求的地址
  45 + data: data, // post 请求的数据
  46 + headers: {
  47 + 'Content-Type': 'multipart/form-data'
  48 + }
  49 + })
  50 + },
41 get(url, params) { 51 get(url, params) {
42 return axios({ 52 return axios({
43 method: 'GET', 53 method: 'GET',
@@ -50,7 +50,7 @@ @@ -50,7 +50,7 @@
50 width="220"> 50 width="220">
51 <template slot-scope="scope"> 51 <template slot-scope="scope">
52 <el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button> 52 <el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button>
53 - <el-button type="success" @click="centerDialogVisible = true">图片上传</el-button> 53 + <el-button type="success" @click="uploadImg(scope.row)">图片上传</el-button>
54 </template> 54 </template>
55 </el-table-column> 55 </el-table-column>
56 </el-table> 56 </el-table>
@@ -73,30 +73,23 @@ @@ -73,30 +73,23 @@
73 width="30%" 73 width="30%"
74 center> 74 center>
75 <div> 75 <div>
76 - <el-upload  
77 - class="avatar-uploader"  
78 - action="https://jsonplaceholder.typicode.com/posts/"  
79 - :show-file-list="false"  
80 - :on-success="handleAvatarSuccess"  
81 - :before-upload="beforeAvatarUpload">  
82 - <img v-if="imageUrl" :src="imageUrl" class="avatar">  
83 - <i v-else class="el-icon-plus avatar-uploader-icon"></i>  
84 - </el-upload>  
85 - <el-input v-model="description" placeholder="请输入图片描述"></el-input>  
86 - </div>  
87 - 76 + <!-- 图片选择 -->
  77 + <input type="file" ref="fileInput" accept="image/*" @change="handleFileChange" style="display: none;">
  78 + <el-button type="primary" @click="chooseFile">选择图片</el-button>
  79 + <span v-if="selectedFileName" style="margin-left: 10px;">已选择文件: {{ selectedFileName }}</span>
  80 + <!-- 图片描述输入框 -->
  81 + <el-input v-model="imageDescription" placeholder="请输入图片描述" style="margin-top: 20px;"></el-input>
88 82
89 - <span slot="footer" class="dialog-footer">  
90 - <el-button @click="centerDialogVisible = false">取 消</el-button>  
91 - <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>  
92 - </span> 83 + <!-- 上传按钮 -->
  84 + <el-button type="success" @click="uploadImage" style="margin-top: 20px;">上传图片</el-button>
  85 + </div>
93 </el-dialog> 86 </el-dialog>
94 </el-card> 87 </el-card>
95 </el-row> 88 </el-row>
96 </template> 89 </template>
97 90
98 <script> 91 <script>
99 - import {selectList,DoneTask} from '../../api/consigner/vehicle'; 92 + import {selectList,DoneTask,UploadImage} from '../../api/consigner/vehicle';
100 93
101 export default { 94 export default {
102 data() { 95 data() {
@@ -114,25 +107,56 @@ @@ -114,25 +107,56 @@
114 formInline: { 107 formInline: {
115 user: '', 108 user: '',
116 }, 109 },
117 - imageUrl: '',  
118 - description:'' 110 + imageDescription: '', // 图片描述
  111 + selectedFile: null, // 用户选择的文件
  112 + selectedFileName: '', // 用户选择的文件名
  113 + id:'',
119 } 114 }
120 }, 115 },
121 methods: { 116 methods: {
122 - handleAvatarSuccess(res, file) {  
123 - this.imageUrl = URL.createObjectURL(file.raw); 117 + uploadImg(row){this.id=row.id;this.centerDialogVisible=true;},
  118 + // 选择图片
  119 + chooseFile() {
  120 + this.$refs.fileInput.click();
124 }, 121 },
125 - beforeAvatarUpload(file) {  
126 - const isJPG = file.type === 'image/jpeg';  
127 - const isLt2M = file.size / 1024 / 1024 < 2;  
128 -  
129 - if (!isJPG) {  
130 - this.$message.error('上传头像图片只能是 JPG 格式!'); 122 + // 文件改变时触发
  123 + handleFileChange(event) {
  124 + this.selectedFile = event.target.files[0];
  125 + this.selectedFileName = this.selectedFile ? this.selectedFile.name : '';
  126 + },
  127 + // 上传图片
  128 + uploadImage() {
  129 + if(this.selectedFile == null){
  130 + return this.$message.error('请上传图片')
  131 + }
  132 + if(this.imageDescription == null||this.imageDescription == ''){
  133 + return this.$message.error('请输入描述')
131 } 134 }
132 - if (!isLt2M) {  
133 - this.$message.error('上传头像图片大小不能超过 2MB!'); 135 + if (!this.selectedFile) {
  136 + this.$message.warning('请选择图片');
  137 + return;
134 } 138 }
135 - return isJPG && isLt2M; 139 + // 创建 FormData 对象，用于上传文件
  140 + const formData = new FormData();
  141 + formData.append('file', this.selectedFile);
  142 + formData.append('desc', this.imageDescription);
  143 + formData.append('id',this.id);
  144 + UploadImage(formData).then((response) => {
  145 + const res = response.data
  146 + console.log(response.data)
  147 + if (res.code !== '200') {
  148 + return _this.$message.error(res.data)
  149 + }
  150 + this.$message.success(res.data)
  151 + this.centerDialogVisible=false;
  152 + this.selectedFile=null;
  153 + this.imageDescription='';
  154 + this.selectedFileName='';
  155 + }).catch(error => {
  156 + // 关闭加载
  157 + this.$message.error(error.toString())
  158 + })
  159 +
136 }, 160 },
137 handleSizeChange(val) { 161 handleSizeChange(val) {
138 this.queryInfo.pageSize = val 162 this.queryInfo.pageSize = val
@@ -41,13 +41,29 @@ @@ -41,13 +41,29 @@
41 </div> 41 </div>
42 </el-form-item> 42 </el-form-item>
43 </el-col> 43 </el-col>
44 - <el-col :span="3"> 44 + <el-col :span="2">
45 <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()"> 45 <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">
46 查询 46 查询
47 </el-button> 47 </el-button>
48 </el-col> 48 </el-col>
  49 + <el-col :span="2">
  50 + <el-button @click="getByliscenNo()" type="success" style="margin-left: 16px;">
  51 + 车辆图片
  52 + </el-button>
  53 + </el-col>
49 </el-form> 54 </el-form>
50 </el-row> 55 </el-row>
  56 + <el-drawer
  57 + title="车辆图片"
  58 + :visible.sync="drawer"
  59 + :with-header="false">
  60 + <div>
  61 + <div v-for="(imageInfo, index) in imageInfos" :key="index" class="image-container">
  62 + <img v-if="imageInfo && imageInfo.url" :src="imageInfo.url" alt="Image" class="image" />
  63 + <p v-if="imageInfo && imageInfo.content">{{ imageInfo.content }}</p>
  64 + </div>
  65 + </div>
  66 + </el-drawer>
51 </el-card> 67 </el-card>
52 </el-row> 68 </el-row>
53 <div id="mapContainer" style="width: 100%; height: 500px;"></div> 69 <div id="mapContainer" style="width: 100%; height: 500px;"></div>
@@ -55,13 +71,14 @@ @@ -55,13 +71,14 @@
55 </template> 71 </template>
56 <script> 72 <script>
57 import AMapLoader from '@amap/amap-jsapi-loader'; 73 import AMapLoader from '@amap/amap-jsapi-loader';
58 - import { selectVehicle,selectNameList } from '../../api/consigner/vehicle'; 74 + import {selectVehicle, selectNameList, selectByliscenNo, selectList} from '../../api/consigner/vehicle';
59 import {loginedUserInfo} from "../../api/user"; 75 import {loginedUserInfo} from "../../api/user";
60 76
61 export default { 77 export default {
62 name: 'MapComponent', 78 name: 'MapComponent',
63 data() { 79 data() {
64 return { 80 return {
  81 + drawer: false,
65 mapInstance: null, 82 mapInstance: null,
66 queryInfo: { 83 queryInfo: {
67 vno: '', 84 vno: '',
@@ -69,6 +86,8 @@ @@ -69,6 +86,8 @@
69 }, 86 },
70 vnos:[], 87 vnos:[],
71 loading:false, 88 loading:false,
  89 + imageUrls: [], // 存储图片地址的数组
  90 + imageInfos:[],
72 rules: { 91 rules: {
73 vno: [ 92 vno: [
74 { required: true, message: '请输入车牌号', trigger: 'blur' }, 93 { required: true, message: '请输入车牌号', trigger: 'blur' },
@@ -81,6 +100,34 @@ @@ -81,6 +100,34 @@
81 }; 100 };
82 }, 101 },
83 methods: { 102 methods: {
  103 + //获取图片
  104 + getByliscenNo(){
  105 + if(this.queryInfo.vno == null||this.queryInfo.vno ==''){
  106 + return this.$message.error('请选择车牌号')
  107 + }
  108 + this.drawer = true;
  109 + selectByliscenNo({lisenceNo:this.queryInfo.vno}).then((response) => {
  110 + const res = response.data
  111 + console.log(response.data)
  112 + if (res.code !== '200') {
  113 + return this.$message.error('获取消息收发记录，失败！')
  114 + }
  115 + this.imageInfos = res.data.imgurl.split(',').map(url => {
  116 + if (url !== 'null') {
  117 + const parts = url.split('/');
  118 + const fileName = parts.pop();
  119 + const content = fileName.split('-')[0];
  120 + return {
  121 + url: url,
  122 + content: content
  123 + };
  124 + }
  125 + });
  126 + }).catch(error => {
  127 + // 关闭加载
  128 + this.$message.error(error.toString())
  129 + })
  130 + },
84 //获取车牌号 131 //获取车牌号
85 getCreden(){ 132 getCreden(){
86 this.vnos=[]; 133 this.vnos=[];
@@ -181,6 +228,14 @@ @@ -181,6 +228,14 @@
181 } 228 }
182 </style> 229 </style>
183 <style> 230 <style>
  231 + .image-container {
  232 + margin-bottom: 10px;
  233 + }
  234 +
  235 + .image {
  236 + max-width: 100%;
  237 + max-height: 200px;
  238 + }
184 .my-text-area .el-textarea__inner{ 239 .my-text-area .el-textarea__inner{
185 min-height: 28px; 240 min-height: 28px;
186 height: 28px; 241 height: 28px;
@@ -106,14 +106,14 @@ @@ -106,14 +106,14 @@
106 </el-table-column> 106 </el-table-column>
107 <el-table-column prop="departmentid" label="简码" min-width="150" > 107 <el-table-column prop="departmentid" label="简码" min-width="150" >
108 </el-table-column> 108 </el-table-column>
109 - <el-table-column label="操作" min-width="260" fixed="right"> 109 + <el-table-column label="操作" min-width="200" fixed="right">
110 <template slot-scope="scope"> 110 <template slot-scope="scope">
111 <!-- <el-row>--> 111 <!-- <el-row>-->
112 <!-- <el-button type="success" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>--> 112 <!-- <el-button type="success" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>-->
113 <!-- <el-button @click="setPerm(scope.$index, scope.row)">设置权限</el-button>--> 113 <!-- <el-button @click="setPerm(scope.$index, scope.row)">设置权限</el-button>-->
114 <!-- </el-row>--> 114 <!-- </el-row>-->
115 <el-row> 115 <el-row>
116 - <el-button @click="handleEdit(scope.$index, scope.row)">编&emsp;&emsp;辑</el-button> 116 + <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编&emsp;&emsp;辑</el-button>
117 <el-button type="danger" @click="handleDel(scope.$index, scope.row)">删&emsp;&emsp;除</el-button> 117 <el-button type="danger" @click="handleDel(scope.$index, scope.row)">删&emsp;&emsp;除</el-button>
118 </el-row> 118 </el-row>
119 </template> 119 </template>
@@ -287,6 +287,9 @@ @@ -287,6 +287,9 @@
287 ], 287 ],
288 type: [ 288 type: [
289 { required: true, message: '请选择组织机构类型', trigger: 'blur' } 289 { required: true, message: '请选择组织机构类型', trigger: 'blur' }
  290 + ],
  291 + departmentid:[
  292 + { required: true, message: '请输入承运人代码', trigger: 'blur' }
290 ] 293 ]
291 }, 294 },
292 //新增界面数据 295 //新增界面数据