Skip to content

X
xinrenli-admin
Commit 2737f703 by zhangmengjie
Options

23.4.10

parent 038b1d3f
Showing with 170 additions and 93 deletions
src/components/ImageUpload/index.vue
<template> <template>
<div class="component-upload-image"> <div class="component-upload-image" style="display: flex;">
<el-upload <el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess"
multiple :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
:action="uploadImgUrl" ref="imageUpload" :on-remove="handleDelete" :show-file-list="true" :headers="headers" :file-list="fileVos"
list-type="picture-card" :on-preview="handlePictureCardPreview" :class="{ hide: this.fileVos.length >= this.limit }" :disabled="disabled">
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
ref="imageUpload"
:on-remove="handleDelete"
:show-file-list="true"
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= this.limit}"
>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
...@@ -28,16 +15,8 @@ ...@@ -28,16 +15,8 @@
的文件 的文件
</div> --> </div> -->
<el-dialog <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
:visible.sync="dialogVisible" <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
title="预览"
width="800"
append-to-body
>
<img
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
...@@ -56,7 +35,7 @@ export default { ...@@ -56,7 +35,7 @@ export default {
}, },
// 大小限制(MB) // 大小限制(MB)
fileSize: { fileSize: {
type: Number, type: Number,
default: 5, default: 5,
}, },
// 文件类型, 例如['png', 'jpg', 'jpeg'] // 文件类型, 例如['png', 'jpg', 'jpeg']
...@@ -68,6 +47,11 @@ export default { ...@@ -68,6 +47,11 @@ export default {
isShowTip: { isShowTip: {
type: Boolean, type: Boolean,
default: true default: true
},
// 是否显示提示
disabled: {
type: Boolean,
default: false
} }
}, },
data() { data() {
...@@ -82,7 +66,7 @@ export default { ...@@ -82,7 +66,7 @@ export default {
headers: { headers: {
Authorization: "Bearer " + getToken(), Authorization: "Bearer " + getToken(),
}, },
fileList: [] fileVos: []
}; };
}, },
watch: { watch: {
...@@ -99,13 +83,13 @@ export default { ...@@ -99,13 +83,13 @@ export default {
}) })
} }
// 然后将数组转为对象数组 // 然后将数组转为对象数组
this.fileList = list.map(item => { this.fileVos = list.map(item => {
// 此处name使用ossId 防止删除出现重名 // 此处name使用ossId 防止删除出现重名
item = { name: item.ossId, url: item.url, ossId: item.ossId }; item = { name: item.ossId, url: item.url, ossId: item.ossId };
return item; return item;
}); });
} else { } else {
this.fileList = []; this.fileVos = [];
return []; return [];
} }
}, },
...@@ -158,7 +142,7 @@ export default { ...@@ -158,7 +142,7 @@ export default {
// 上传成功回调 // 上传成功回调
handleUploadSuccess(res, file) { handleUploadSuccess(res, file) {
if (res.code === 200) { if (res.code === 200) {
this.uploadList.push({url: res.data.url }); this.uploadList.push({ url: res.data.url });
this.uploadedSuccessfully(); this.uploadedSuccessfully();
} else { } else {
this.number--; this.number--;
...@@ -170,13 +154,22 @@ export default { ...@@ -170,13 +154,22 @@ export default {
}, },
// 删除图片 // 删除图片
handleDelete(file) { handleDelete(file) {
const findex = this.fileList.map(f => f.name).indexOf(file.name); console.log(file)
if(findex > -1) { console.log(this.fileVos, 'this.fileVos')
let ossId = this.fileList[findex].ossId; let obj = []
delOss(ossId); this.fileVos.forEach(element => {
this.fileList.splice(findex, 1); if (element.url != file.url) {
this.$emit("input", this.listToString(this.fileList)); obj.push(element)
} }
});
this.fileVos = obj
// const findex = this.fileVos.map(f => f.name).indexOf(file.name);
// if(findex > -1) {
// let ossId = this.fileVos[findex].ossId;
// // delOss(ossId);
// this.fileVos.splice(findex, 1);
// this.$emit("input", this.listToString(this.fileVos));
// }
}, },
// 上传失败 // 上传失败
handleUploadError(res) { handleUploadError(res) {
...@@ -186,10 +179,20 @@ export default { ...@@ -186,10 +179,20 @@ export default {
// 上传结束处理 // 上传结束处理
uploadedSuccessfully() { uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) { if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList); this.fileVos = this.fileVos.concat(this.uploadList);
let list = []
this.fileVos.forEach((res)=>{
let obj = {
fileType:"picture",
deletestatus:0,
url:res.url
}
list.push(obj)
})
this.fileVos = list
this.uploadList = []; this.uploadList = [];
this.number = 0; this.number = 0;
this.$emit("input", this.listToString(this.fileList)); this.$emit("input", this.listToString(this.fileVos));
this.$modal.closeLoading(); this.$modal.closeLoading();
} }
}, },
...@@ -215,15 +218,21 @@ export default { ...@@ -215,15 +218,21 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
// .el-upload--picture-card 控制加号部分 // .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card { ::v-deep.hide .el-upload--picture-card {
display: none; display: none;
} }
// 去掉动画效果 // 去掉动画效果
::v-deep .el-list-enter-active, ::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active { ::v-deep .el-list-leave-active {
transition: all 0s; transition: all 0s;
}
::v-deep .el-upload-list--picture-card {
display: flex;
} }
::v-deep .el-list-enter, .el-list-leave-active { ::v-deep .el-list-enter,
.el-list-leave-active {
opacity: 0; opacity: 0;
transform: translateY(0); transform: translateY(0);
} }
......
src/views/dynamic/components/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container"> <div class="app-container">
<el-dialog :title=title :visible.sync="dialogVisibl" width="30%" :before-close="dialog" center> <el-dialog :title=title :visible.sync="dialogVisibl" width="30%" :before-close="dialog" center>
<!-- 图片说明 --> <!-- 图片说明 -->
<el-image style="width:100%; " :src="control" :preview-src-list="srcList"> <el-image style="width:100%; " :src="control" >
</el-image> </el-image>
</el-dialog> </el-dialog>
</div> </div>
......
src/views/dynamic/components/modify.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</el-form-item> </el-form-item>
<el-form-item label="添加图片" class="customer" prop="name"> <el-form-item label="添加图片" class="customer" prop="name">
<ImageUpload :disabled="disabled"></ImageUpload> <ImageUpload :disabled="disabled" ref="refUpload"></ImageUpload>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
</el-form-item> </el-form-item>
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<script> <script>
import comvideo from './video.vue' import comvideo from './video.vue'
import { articlesGET } from '@/api/orderform/index'
export default { export default {
name: "modify", name: "modify",
...@@ -52,7 +53,8 @@ export default { ...@@ -52,7 +53,8 @@ export default {
value1: '', value1: '',
form: { form: {
title: '', title: '',
content: '' content: '',
fileVos:[]
}, },
currentInfo:{}, currentInfo:{},
rules: { rules: {
...@@ -70,14 +72,34 @@ export default { ...@@ -70,14 +72,34 @@ export default {
watch:{ watch:{
currentInfo(sta,val){ currentInfo(sta,val){
console.log(sta,val,'kllllllllllllll') console.log(sta,val,'kllllllllllllll')
},
title(sta,val){
this.$refs['refUpload'].fileVos = []
},
dialogVisibl(sta,val){
if(this.title == '新增订单'){
this.$refs['refUpload'].fileVos = []
}
} }
}, },
methods: { methods: {
dialog() { dialog() {
this.$emit('diaisibl') this.$emit('diaisibl')
}, },
// 详情
articles(val) {
articlesGET(val).then((res) => {
this.form = res.data
if(res.data.fileVos != null){
this.$refs['refUpload'].fileVos = res.data.fileVos
}else{
this.$refs['refUpload'].fileVos = []
}
})
},
onSubmit() { onSubmit() {
this.$emit('onSubmit') this.form.fileVos = this.$refs['refUpload'].fileVos
this.$emit('onSubmit', this.form.fileVos)
} }
} }
}; };
......
src/views/dynamic/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="94px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="94px">
<el-form-item label="动态标题" prop="dataName"> <el-form-item label="动态标题" prop="dataName">
<el-input v-model="queryParams.dataName" placeholder="请输入联系人姓名" clearable /> <el-input v-model="queryParams.title" placeholder="请输入联系人姓名" clearable />
</el-form-item> </el-form-item>
<!-- <el-form-item label="联系电话" prop="tableName"> <!-- <el-form-item label="联系电话" prop="tableName">
<el-input v-model="queryParams.tableName" placeholder="请输入联系电话" clearable /> <el-input v-model="queryParams.tableName" placeholder="请输入联系电话" clearable />
...@@ -49,7 +49,8 @@ ...@@ -49,7 +49,8 @@
<!-- 其他 --> <!-- 其他 -->
<comindex :dialogVisibl="dialogVisible" @visivie='visivie' :control="control"></comindex> <comindex :dialogVisibl="dialogVisible" @visivie='visivie' :control="control"></comindex>
<!-- 修改 详情 --> <!-- 修改 详情 -->
<commodify ref="refModify" :disabled="disabled" :title="title" :dialogVisibl="dialogVi" @diaisibl="diaisibl" @onSubmit="onSubmit"> <commodify ref="refModify" :disabled="disabled" :title="title" :dialogVisibl="dialogVi" @diaisibl="diaisibl"
@onSubmit="onSubmit">
</commodify> </commodify>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" /> @pagination="getList" />
...@@ -59,14 +60,14 @@ ...@@ -59,14 +60,14 @@
<script> <script>
import comindex from './components/index' import comindex from './components/index'
import commodify from './components/modify' import commodify from './components/modify'
import { articleGET, articlePOST, articlesGET,articlePUT } from '@/api/orderform/index' import { articleGET, articlePOST, articlesGET, articlePUT } from '@/api/orderform/index'
export default { export default {
name: "orderform", name: "orderform",
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false,
dialogVi: false, dialogVi: false,
disabled:false, disabled: false,
control: '', control: '',
total: 0, total: 0,
value1: '', value1: '',
...@@ -125,7 +126,7 @@ export default { ...@@ -125,7 +126,7 @@ export default {
pageSize: 10, pageSize: 10,
tableName: undefined, tableName: undefined,
tableComment: undefined, tableComment: undefined,
dataName: "" title: ""
}, },
// 预览参数 // 预览参数
preview: { preview: {
...@@ -157,7 +158,7 @@ export default { ...@@ -157,7 +158,7 @@ export default {
}, },
// 重置 // 重置
resetQuery() { resetQuery() {
this.queryParams.dataName = ''; this.queryParams.title = '';
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.queryParams.pageSize = 10; this.queryParams.pageSize = 10;
this.artic() this.artic()
...@@ -170,7 +171,7 @@ export default { ...@@ -170,7 +171,7 @@ export default {
}, },
// 页码切换 // 页码切换
getList() { getList() {
this.artic()
}, },
// 打开查看详情 // 打开查看详情
imageCaption(sta) { imageCaption(sta) {
...@@ -181,25 +182,26 @@ export default { ...@@ -181,25 +182,26 @@ export default {
modify(sta, val) { modify(sta, val) {
if (val == '1') { if (val == '1') {
this.title = '修改订单' this.title = '修改订单'
this.articles(sta.id) this.$refs['refModify'].articles(sta.id)
this.disabled = false this.disabled = false
} else if (val == '2') { } else if (val == '2') {
this.articles(sta.id) this.$refs['refModify'].articles(sta.id)
this.disabled = true this.disabled = true
this.title = '订单详情' this.title = '订单详情'
} else if (val == '3') { } else if (val == '3') {
this.$refs['refModify'].form = {}
this.title = '新增订单' this.title = '新增订单'
} }
this.dialogVi = true this.dialogVi = true
}, },
articles(val) { // articles(val) {
articlesGET(val).then((res) => { // articlesGET(val).then((res) => {
this.$refs['refModify'].form.content = res.data.content // this.$refs['refModify'].form.content = res.data.content
this.$refs['refModify'].form.title = res.data.title // this.$refs['refModify'].form.title = res.data.title
}) // })
}, // },
// 其他 弹窗关闭 // 其他 弹窗关闭
visivie() { visivie() {
this.dialogVisible = false this.dialogVisible = false
...@@ -207,23 +209,28 @@ export default { ...@@ -207,23 +209,28 @@ export default {
// 详情 修改 弹窗关闭 // 详情 修改 弹窗关闭
diaisibl() { diaisibl() {
this.$refs['refModify'].form.content = '' this.$refs['refModify'].form.content = ''
this.$refs['refModify'].form.title = '' this.$refs['refModify'].form.title = ''
this.dialogVi = false this.dialogVi = false
}, },
// 详情 修改 确认修改 // 详情 修改 确认修改
onSubmit() { onSubmit(val) {
if (this.title = '新增订单') { console.log(val, 'val=========')
console.log(this.title,'ppppppppppppppp')
if (this.title == '新增订单') {
articlePOST({ ...this.$refs['refModify'].form }).then((res) => { articlePOST({ ...this.$refs['refModify'].form }).then((res) => {
this.$refs['refModify'].form.content = '' this.$refs['refModify'].form.content = ''
this.$refs['refModify'].form.title = '' this.$refs['refModify'].form.title = ''
this.$refs['refModify'].form.fileVos = []
this.dialogVi = false this.dialogVi = false
this.artic()
}) })
}else if(this.title = '修改订单'){ } else if (this.title == '修改订单') {
articlePUT({ ...this.$refs['refModify'].form }).then((res)=>{ articlePUT({ ...this.$refs['refModify'].form }).then((res) => {
console.log(res,'res===========')
this.$refs['refModify'].form.content = '' this.$refs['refModify'].form.content = ''
this.$refs['refModify'].form.title = '' this.$refs['refModify'].form.title = ''
this.$refs['refModify'].form.fileVos = []
this.dialogVi = false this.dialogVi = false
this.artic()
}) })
} }
} }
......
src/views/orderform/components/index.vue
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<el-dialog :title='title' :visible.sync="dialogVisibl" width="30%" :before-close="dialog" center> <el-dialog :title='title' :visible.sync="dialogVisibl" width="30%" :before-close="dialog" center>
<div v-if="control != 4"> <div v-if="control != 4">
<!-- 图片说明 --> <!-- 图片说明 -->
<el-image v-if="control == '1'" style="width:100%; " :src="idt" :preview-src-list="srcList"> <el-image v-if="control == '1'" style="width:100%; " :src="idt" >
</el-image> </el-image>
<!-- 视频说明 --> <!-- 视频说明 -->
<comvideo v-if="control == '2'"></comvideo> <comvideo v-if="control == '2'" :videoUrl="idt"></comvideo>
<!-- 语音说明 --> <!-- 语音说明 -->
<audio v-if="control == '3'" controls ref="audio" class="aud"> <audio v-if="control == '3'" controls ref="audio" class="aud">
<source src="" /> <source :src="idt" />
</audio> </audio>
</div> </div>
<!-- 沟通后金额 --> <!-- 沟通后金额 -->
...@@ -60,10 +60,10 @@ export default { ...@@ -60,10 +60,10 @@ export default {
data() { data() {
return { return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [ // srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', // 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' // 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
], // ],
form: { form: {
name: '', name: '',
money:'' money:''
......
src/views/orderform/components/modify.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<span>图片说明</span> <span>图片说明</span>
<div style="display: flex;"> <div style="display: flex;">
<div class="imgdiv" v-for="v in particulars.pictureList"> <div class="imgdiv" v-for="v in particulars.pictureList">
<el-image class="imgdiv-img" :src="v.url" > <el-image class="imgdiv-img" :src="v.url">
</el-image> </el-image>
</div> </div>
</div> </div>
...@@ -35,14 +35,14 @@ ...@@ -35,14 +35,14 @@
<div class="description"> <div class="description">
<span>视频说明</span> <span>视频说明</span>
<div class="imgdiv"> <div class="imgdiv">
<comvideo :width="width"></comvideo> <comvideo :width="width" :videoUrl="particulars.video"></comvideo>
</div> </div>
</div> </div>
<div class="description"> <div class="description">
<span>语音描述</span> <span>语音描述</span>
<div class="imgdiv"> <div class="imgdiv">
<audio controls ref="audio" class="aud"> <audio ref="audio" controls class="aud">
<source src="" /> <source :src="particulars.voice" type="audio/ogg">
</audio> </audio>
</div> </div>
</div> </div>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<script> <script>
import comvideo from './video.vue' import comvideo from './video.vue'
import { particularsGET ,editPOST} from '@/api/orderform/index' import { particularsGET, editPOST } from '@/api/orderform/index'
export default { export default {
name: "modify", name: "modify",
...@@ -78,8 +78,8 @@ export default { ...@@ -78,8 +78,8 @@ export default {
title: { title: {
type: String type: String
}, },
disabled:{ disabled: {
type:Boolean, type: Boolean,
default: false, default: false,
} }
}, },
...@@ -102,7 +102,11 @@ export default { ...@@ -102,7 +102,11 @@ export default {
resource: '', resource: '',
desc: '' desc: ''
}, },
particulars: {} particulars: {
video: '',
voice: ''
},
idt: ''
}; };
}, },
created() { }, created() { },
...@@ -111,7 +115,25 @@ export default { ...@@ -111,7 +115,25 @@ export default {
let self = this let self = this
particularsGET({ id: val }).then((res) => { particularsGET({ id: val }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
self.particulars = res.data this.$nextTick(() => {
if (res.data.videoList != null) {
self.particulars.video = res.data.videoList[0].url
} else {
self.particulars.video = ''
}
if (res.data.voiceList != null) {
// this.idt = require(res.data.voiceList[0].url)
this.$refs.audio.src = res.data.voiceList[0].url
// self.idt =
} else {
self.idt = ''
}
if (res.data.repairTime != null) {
res.data.repairTime = res.data.repairTime.slice(0, 10)
}
self.particulars = res.data
})
console.log(this.idt,'itd===========')
} }
}) })
}, },
...@@ -120,9 +142,9 @@ export default { ...@@ -120,9 +142,9 @@ export default {
this.$emit('diaisibl') this.$emit('diaisibl')
}, },
onSubmit() { onSubmit() {
editPOST({...this.particulars}).then((res)=>{ editPOST({ ...this.particulars }).then((res) => {
console.log(res,'res===========') console.log(res, 'res===========')
}) })
this.$emit('onSubmit') this.$emit('onSubmit')
} }
......
src/views/orderform/components/video.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
}, },
videoCover: { // 视频封面url，支持网络地址 https 和相对地址 require('@/assets/images/Bao.jpg') videoCover: { // 视频封面url，支持网络地址 https 和相对地址 require('@/assets/images/Bao.jpg')
type: String, type: String,
default: 'https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' default: 'https://img0.baidu.com/it/u=391913564,1144083768&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
}, },
width: { // 视频播放器宽度 width: { // 视频播放器宽度
type: String, type: String,
......
src/views/orderform/index.vue
...@@ -248,15 +248,31 @@ export default { ...@@ -248,15 +248,31 @@ export default {
}); });
} }
this.control = val this.control = val
// this.dialogVisible = true
break; break;
case '2': case '2':
if (sta.row.videoList && sta.row.videoList.length) {
self.id = sta.row.videoList[0].url
self.dialogVisible = true
} else {
this.$message({
message: '暂无视频',
type: 'warning'
});
}
this.control = val this.control = val
this.dialogVisible = true
break; break;
case '3': case '3':
if (sta.row.voiceList && sta.row.voiceList.length) {
self.id = sta.row.voiceList[0].url
self.dialogVisible = true
} else {
this.$message({
message: '暂无视频',
type: 'warning'
});
}
this.control = val this.control = val
this.dialogVisible = true // this.dialogVisible = true
break; break;
case '4': case '4':
this.id = sta.id this.id = sta.id
...@@ -325,6 +341,7 @@ export default { ...@@ -325,6 +341,7 @@ export default {
}, },
// 详情 修改 弹窗关闭 // 详情 修改 弹窗关闭
diaisibl() { diaisibl() {
console.log('111111111111')
this.dialogVi = false this.dialogVi = false
}, },
// 详情 修改 确认修改 // 详情 修改 确认修改
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment