Skip to content

X
xinrenli-admin
Commit 2737f703 by zhangmengjie
Options

23.4.10

parent 038b1d3f
Showing with 163 additions and 86 deletions
src/components/ImageUpload/index.vue
<template>
<div class="component-upload-image">
<el-upload
multiple
:action="uploadImgUrl"
list-type="picture-card"
: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}"
>
<div class="component-upload-image" style="display: flex;">
<el-upload multiple :action="uploadImgUrl" list-type="picture-card" :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="fileVos"
:on-preview="handlePictureCardPreview" :class="{ hide: this.fileVos.length >= this.limit }" :disabled="disabled">
<i class="el-icon-plus"></i>
</el-upload>
......@@ -28,16 +15,8 @@
的文件
</div> -->
<el-dialog
:visible.sync="dialogVisible"
title="预览"
width="800"
append-to-body
>
<img
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
<el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
</el-dialog>
</div>
</template>
......@@ -68,6 +47,11 @@ export default {
isShowTip: {
type: Boolean,
default: true
},
// 是否显示提示
disabled: {
type: Boolean,
default: false
}
},
data() {
......@@ -82,7 +66,7 @@ export default {
headers: {
Authorization: "Bearer " + getToken(),
},
fileList: []
fileVos: []
};
},
watch: {
......@@ -99,13 +83,13 @@ export default {
})
}
// 然后将数组转为对象数组
this.fileList = list.map(item => {
this.fileVos = list.map(item => {
// 此处name使用ossId 防止删除出现重名
item = { name: item.ossId, url: item.url, ossId: item.ossId };
return item;
});
} else {
this.fileList = [];
this.fileVos = [];
return [];
}
},
......@@ -158,7 +142,7 @@ export default {
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({url: res.data.url });
this.uploadList.push({ url: res.data.url });
this.uploadedSuccessfully();
} else {
this.number--;
......@@ -170,13 +154,22 @@ export default {
},
// 删除图片
handleDelete(file) {
const findex = this.fileList.map(f => f.name).indexOf(file.name);
if(findex > -1) {
let ossId = this.fileList[findex].ossId;
delOss(ossId);
this.fileList.splice(findex, 1);
this.$emit("input", this.listToString(this.fileList));
console.log(file)
console.log(this.fileVos, 'this.fileVos')
let obj = []
this.fileVos.forEach(element => {
if (element.url != file.url) {
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) {
......@@ -186,10 +179,20 @@ export default {
// 上传结束处理
uploadedSuccessfully() {
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.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$emit("input", this.listToString(this.fileVos));
this.$modal.closeLoading();
}
},
......@@ -217,13 +220,19 @@ export default {
::v-deep.hide .el-upload--picture-card {
display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
transition: all 0s;
}
::v-deep .el-list-enter, .el-list-leave-active {
::v-deep .el-upload-list--picture-card {
display: flex;
}
::v-deep .el-list-enter,
.el-list-leave-active {
opacity: 0;
transform: translateY(0);
}
......
src/views/dynamic/components/index.vue
......@@ -2,7 +2,7 @@
<div class="app-container">
<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-dialog>
</div>
......
src/views/dynamic/components/modify.vue
......@@ -10,7 +10,7 @@
</el-form-item>
<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>
......@@ -23,6 +23,7 @@
<script>
import comvideo from './video.vue'
import { articlesGET } from '@/api/orderform/index'
export default {
name: "modify",
......@@ -52,7 +53,8 @@ export default {
value1: '',
form: {
title: '',
content: ''
content: '',
fileVos:[]
},
currentInfo:{},
rules: {
......@@ -70,14 +72,34 @@ export default {
watch:{
currentInfo(sta,val){
console.log(sta,val,'kllllllllllllll')
},
title(sta,val){
this.$refs['refUpload'].fileVos = []
},
dialogVisibl(sta,val){
if(this.title == '新增订单'){
this.$refs['refUpload'].fileVos = []
}
}
},
methods: {
dialog() {
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() {
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 @@
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="94px">
<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 label="联系电话" prop="tableName">
<el-input v-model="queryParams.tableName" placeholder="请输入联系电话" clearable />
......@@ -49,7 +49,8 @@
<!-- 其他 -->
<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>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
......@@ -59,14 +60,14 @@
<script>
import comindex from './components/index'
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 {
name: "orderform",
data() {
return {
dialogVisible: false,
dialogVi: false,
disabled:false,
disabled: false,
control: '',
total: 0,
value1: '',
......@@ -125,7 +126,7 @@ export default {
pageSize: 10,
tableName: undefined,
tableComment: undefined,
dataName: ""
title: ""
},
// 预览参数
preview: {
......@@ -157,7 +158,7 @@ export default {
},
// 重置
resetQuery() {
this.queryParams.dataName = '';
this.queryParams.title = '';
this.queryParams.pageNum = 1;
this.queryParams.pageSize = 10;
this.artic()
......@@ -170,7 +171,7 @@ export default {
},
// 页码切换
getList() {
this.artic()
},
// 打开查看详情
imageCaption(sta) {
......@@ -181,25 +182,26 @@ export default {
modify(sta, val) {
if (val == '1') {
this.title = '修改订单'
this.articles(sta.id)
this.$refs['refModify'].articles(sta.id)
this.disabled = false
} else if (val == '2') {
this.articles(sta.id)
this.$refs['refModify'].articles(sta.id)
this.disabled = true
this.title = '订单详情'
} else if (val == '3') {
this.$refs['refModify'].form = {}
this.title = '新增订单'
}
this.dialogVi = true
},
articles(val) {
articlesGET(val).then((res) => {
this.$refs['refModify'].form.content = res.data.content
this.$refs['refModify'].form.title = res.data.title
// articles(val) {
// articlesGET(val).then((res) => {
// this.$refs['refModify'].form.content = res.data.content
// this.$refs['refModify'].form.title = res.data.title
})
},
// })
// },
// 其他 弹窗关闭
visivie() {
this.dialogVisible = false
......@@ -211,19 +213,24 @@ export default {
this.dialogVi = false
},
// 详情 修改 确认修改
onSubmit() {
if (this.title = '新增订单') {
onSubmit(val) {
console.log(val, 'val=========')
console.log(this.title,'ppppppppppppppp')
if (this.title == '新增订单') {
articlePOST({ ...this.$refs['refModify'].form }).then((res) => {
this.$refs['refModify'].form.content = ''
this.$refs['refModify'].form.title = ''
this.$refs['refModify'].form.fileVos = []
this.dialogVi = false
this.artic()
})
}else if(this.title = '修改订单'){
articlePUT({ ...this.$refs['refModify'].form }).then((res)=>{
console.log(res,'res===========')
} else if (this.title == '修改订单') {
articlePUT({ ...this.$refs['refModify'].form }).then((res) => {
this.$refs['refModify'].form.content = ''
this.$refs['refModify'].form.title = ''
this.$refs['refModify'].form.fileVos = []
this.dialogVi = false
this.artic()
})
}
}
......
src/views/orderform/components/index.vue
......@@ -3,13 +3,13 @@
<el-dialog :title='title' :visible.sync="dialogVisibl" width="30%" :before-close="dialog" center>
<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>
<!-- 视频说明 -->
<comvideo v-if="control == '2'"></comvideo>
<comvideo v-if="control == '2'" :videoUrl="idt"></comvideo>
<!-- 语音说明 -->
<audio v-if="control == '3'" controls ref="audio" class="aud">
<source src="" />
<source :src="idt" />
</audio>
</div>
<!-- 沟通后金额 -->
......@@ -60,10 +60,10 @@ export default {
data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
// srcList: [
// 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
// 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
// ],
form: {
name: '',
money:''
......
src/views/orderform/components/modify.vue
......@@ -26,7 +26,7 @@
<span>图片说明</span>
<div style="display: flex;">
<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>
</div>
</div>
......@@ -35,14 +35,14 @@
<div class="description">
<span>视频说明</span>
<div class="imgdiv">
<comvideo :width="width"></comvideo>
<comvideo :width="width" :videoUrl="particulars.video"></comvideo>
</div>
</div>
<div class="description">
<span>语音描述</span>
<div class="imgdiv">
<audio controls ref="audio" class="aud">
<source src="" />
<audio ref="audio" controls class="aud">
<source :src="particulars.voice" type="audio/ogg">
</audio>
</div>
</div>
......@@ -64,7 +64,7 @@
<script>
import comvideo from './video.vue'
import { particularsGET ,editPOST} from '@/api/orderform/index'
import { particularsGET, editPOST } from '@/api/orderform/index'
export default {
name: "modify",
......@@ -78,8 +78,8 @@ export default {
title: {
type: String
},
disabled:{
type:Boolean,
disabled: {
type: Boolean,
default: false,
}
},
......@@ -102,7 +102,11 @@ export default {
resource: '',
desc: ''
},
particulars: {}
particulars: {
video: '',
voice: ''
},
idt: ''
};
},
created() { },
......@@ -111,7 +115,25 @@ export default {
let self = this
particularsGET({ id: val }).then((res) => {
if (res.code == 200) {
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===========')
}
})
},
......@@ -121,8 +143,8 @@ export default {
},
onSubmit() {
editPOST({...this.particulars}).then((res)=>{
console.log(res,'res===========')
editPOST({ ...this.particulars }).then((res) => {
console.log(res, 'res===========')
})
this.$emit('onSubmit')
}
......
src/views/orderform/components/video.vue
......@@ -26,7 +26,7 @@
},
videoCover: { // 视频封面url，支持网络地址 https 和相对地址 require('@/assets/images/Bao.jpg')
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: { // 视频播放器宽度
type: String,
......
src/views/orderform/index.vue
......@@ -248,15 +248,31 @@ export default {
});
}
this.control = val
// this.dialogVisible = true
break;
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.dialogVisible = true
break;
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.dialogVisible = true
// this.dialogVisible = true
break;
case '4':
this.id = sta.id
......@@ -325,6 +341,7 @@ export default {
},
// 详情 修改 弹窗关闭
diaisibl() {
console.log('111111111111')
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