XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
小陌 2023-06-09 23:55:47 +08:00
parent e554769ca4
commit f9d75cd82c
6 changed files with 202 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/scUpload/index.vue
View File

@ -42,7 +42,6 @@
</div> </div>
</slot> </slot>
</el-upload> </el-upload>
<span style="display:none!important"><el-input v-model="value"></el-input></span>
<el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed" destroy-on-close> <el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed" destroy-on-close>
<sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper> <sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
<template #footer> <template #footer>
@ -78,7 +77,6 @@
disabled: { type: Boolean, default: false }, disabled: { type: Boolean, default: false },
round: { type: Boolean, default: false }, round: { type: Boolean, default: false },
onSuccess: { type: Function, default: () => { return true } }, onSuccess: { type: Function, default: () => { return true } },
cropper: { type: Boolean, default: false }, cropper: { type: Boolean, default: false },
compress: {type: Number, default: 1}, compress: {type: Number, default: 1},
aspectRatio: {type: Number, default: NaN} aspectRatio: {type: Number, default: NaN}
@ -113,7 +111,16 @@
}, },
methods: { methods: {
newFile(o){ newFile(o){
if(o && o.url){
if(o && typeof o === 'string'){
this.file = {
status: "success",
url: o,
}
}
else if(o && o.url){
this.file = { this.file = {
status: "success", status: "success",
url: o.url, url: o.url,
@ -237,12 +244,16 @@
param.onProgress({percent: complete}) param.onProgress({percent: complete})
} }
}).then(res => { }).then(res => {
var response = config.parseData(res);
if(response.code == config.successCode){ alert(res.code)
param.onSuccess(response)
}else{ if (res.code == config.successCode) {
param.onError(response.message || "未知错误") var response = config.parseData(res);
param.onSuccess(response);
return ;
} }
param.onError(response.message || "未知错误")
}).catch(err => { }).catch(err => {
param.onError(err) param.onError(err)
}) })

2
src/config/upload.js
View File

@ -10,7 +10,7 @@ export default {
parseData: function (res) { parseData: function (res) {
return { return {
code: res.code, //分析状态字段结构 code: res.code, //分析状态字段结构
msg: res.message, //分析描述字段结构 message: res.message, //分析描述字段结构
name: res.data.original, //分析文件名称 name: res.data.original, //分析文件名称
url: res.data.url, //分析图片远程地址结构 url: res.data.url, //分析图片远程地址结构
aid: res.data.aid, //分析图片远程地址结构 aid: res.data.aid, //分析图片远程地址结构

19
src/views/app/apartment/images.vue
View File

@ -1,8 +1,13 @@
<template> <template>
<el-drawer title="图片组(支持拖拽排序)" :size="670" v-model="visible" destroy-on-close @closed="$emit('closed', data)"> <el-drawer title="图片组(支持拖拽排序)" :size="670" v-model="visible" destroy-on-close @closed="$emit('closed', data)">
<el-main style="padding:0 20px 20px 20px"> <el-container>
<sc-upload-multiple v-model="data.images" draggable :width="120" :height="90" :limit="20" tip="最多上传20个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple> <el-main style="padding:0 20px 20px 20px">
</el-main> <sc-upload-multiple v-model="data.images" draggable :width="120" :height="90" :limit="20" tip="最多上传20个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
</el-main>
<el-footer v-if="issave">
<el-button type="primary" @click="submit">保存</el-button>
</el-footer>
</el-container>
</el-drawer> </el-drawer>
</template> </template>
<script> <script>
@ -11,6 +16,7 @@
data() { data() {
return { return {
visible: false, visible: false,
issave: false,
data:[], data:[],
} }
}, },
@ -23,6 +29,12 @@
this.visible = true; this.visible = true;
return this; return this;
}, },
//表单提交方法
async submit(){
this.$emit('success', this.data)
this.visible = false;
this.$message.success("操作成功")
},
//表单注入数据 //表单注入数据
setData(o){ setData(o){
this.data = o this.data = o
@ -31,6 +43,7 @@
setTimeout(async ()=>{ setTimeout(async ()=>{
var res = await this.$API.app.apartment.getImages.get({id:o.id}) var res = await this.$API.app.apartment.getImages.get({id:o.id})
this.loading = false this.loading = false
this.issave = true
this.data = res.data; this.data = res.data;
},400) },400)
} }

47
src/views/app/apartment/index.vue
View File

@ -6,31 +6,38 @@
</div> </div>
</el-header> </el-header>
<el-main class="nopadding"> <el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" remoteSort remoteFilter stripe> <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" :hideSetting="true" remoteSort remoteFilter stripe>
<el-table-column type="selection" width="30"></el-table-column> <el-table-column type="selection" width="30"></el-table-column>
<el-table-column label="小程序ID" prop="uniqid" width="150"></el-table-column> <el-table-column label="小程序ID" prop="uniqid" width="150"></el-table-column>
<el-table-column label="公寓名称" prop="title" minWidth="350"> <el-table-column label="" prop="status" width="38">
<template #default="scope">
<sc-status-indicator v-if="scope.row.status==1" pulse type="success"></sc-status-indicator>
<sc-status-indicator v-if="scope.row.status==0" pulse type="info"></sc-status-indicator>
</template>
</el-table-column>
<el-table-column label="公寓名称" prop="title" minWidth="300">
<template #default="scope"> <template #default="scope">
<img :src="scope.row.image" height="25" style="border-radius: 8px;"> {{ scope.row.title }} <img :src="scope.row.image" height="25" style="border-radius: 8px;"> {{ scope.row.title }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="品牌" prop="company" width="180"></el-table-column>
<el-table-column label="租金" prop="rentprice" width="80"></el-table-column>
<el-table-column label="图组" prop="attachment" width="80"> <el-table-column label="图组" prop="attachment" width="80">
<template #default="scope"> <template #default="scope">
<el-text text size="small" :type="scope.row.attachment.length==0?'':'primary'" @click="setImage(scope.row)"> <el-text text size="small" @click="setImage(scope.row)">
<el-badge :value="scope.row.attachment.length" class="badge" type="danger"></el-badge> <el-badge :value="scope.row.attachment.length" type="danger"></el-badge>
</el-text>
</template>
</el-table-column>
<el-table-column label="视频" prop="video" width="80">
<template #default="scope">
<el-text text size="small" @click="setVideo(scope.row)">
<el-badge :value="Object.keys(scope.row.video||{}).length" type="warning"></el-badge>
</el-text> </el-text>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="客服ID" prop="customerservice" width="80"></el-table-column> <el-table-column label="客服ID" prop="customerservice" width="80"></el-table-column>
<el-table-column label="品牌" prop="company" width="180"></el-table-column>
<el-table-column label="租金" prop="rentprice" width="80"></el-table-column>
<el-table-column label="排序" prop="sort" width="100"></el-table-column> <el-table-column label="排序" prop="sort" width="100"></el-table-column>
<el-table-column label="状态" prop="status" width="80">
<template #default="scope">
<el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
<el-tag v-if="scope.row.status==0" type="danger">停用</el-tag>
</template>
</el-table-column>
<el-table-column label="添加时间" prop="timestamp" width="150"></el-table-column> <el-table-column label="添加时间" prop="timestamp" width="150"></el-table-column>
<el-table-column label="浏览" prop="viewnum" width="90"></el-table-column> <el-table-column label="浏览" prop="viewnum" width="90"></el-table-column>
@ -39,9 +46,9 @@
<el-button-group> <el-button-group>
<el-button type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button> <el-button type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
<el-button type="info" size="small" @click="table_room(scope.row, scope.$index)">房间</el-button> <el-button type="info" size="small" @click="table_room(scope.row, scope.$index)">房间</el-button>
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)"> <el-popconfirm title="确定下架吗？" @confirm="table_del(scope.row, scope.$index)">
<template #reference> <template #reference>
<el-button type="warning" size="small">删除</el-button> <el-button type="warning" size="small">下架</el-button>
</template> </template>
</el-popconfirm> </el-popconfirm>
</el-button-group> </el-button-group>
@ -53,18 +60,21 @@
<room-dialog v-if="dialog.room" ref="roomDialog" @success="handleSuccess" @closed="dialog.room=false"></room-dialog> <room-dialog v-if="dialog.room" ref="roomDialog" @success="handleSuccess" @closed="dialog.room=false"></room-dialog>
<x-update v-if="dialog.update" ref="xUpdate" @success="handleSuccess" @closed="dialog.update=false"></x-update> <x-update v-if="dialog.update" ref="xUpdate" @success="handleSuccess" @closed="dialog.update=false"></x-update>
<images ref="images" @closed="handleClosed"></images> <images ref="images" @closed="handleClosed" @success="handleSuccess"></images>
<videos ref="videos" @closed="handleClosed" @success="handleSuccess"></videos>
</template> </template>
<script> <script>
import roomDialog from './room' import roomDialog from './room'
import xUpdate from './update' import xUpdate from './update'
import images from './images' import images from './images'
import videos from './videos'
export default { export default {
name: 'apartment', name: 'apartment',
components: { components: {
roomDialog, roomDialog,
xUpdate, xUpdate,
videos,
images, images,
}, },
data() { data() {
@ -109,6 +119,11 @@
this.$refs.images.open().remoteData(o) this.$refs.images.open().remoteData(o)
}) })
}, },
setVideo(o){
this.$nextTick(() => {
this.$refs.videos.open().remoteData(o)
})
},
//编辑 //编辑
table_edit(row){ table_edit(row){
this.dialog.update = true this.dialog.update = true
@ -160,6 +175,8 @@
}, },
//本地更新数据 //本地更新数据
handleSuccess(data, mode){ handleSuccess(data, mode){
alert(2)
if(mode=='add'){ if(mode=='add'){
data.id = new Date().getTime() data.id = new Date().getTime()
this.$refs.table.tableData.unshift(data) this.$refs.table.tableData.unshift(data)

100
src/views/app/apartment/room.vue
View File

@ -77,79 +77,21 @@
<el-button @click="visible=false">取消</el-button> <el-button @click="visible=false">取消</el-button>
</el-footer> </el-footer>
</el-container> </el-container>
<el-drawer :title="form.title + '视频组'" v-model="setVideoVisible" :size="800" destroy-on-close>
<el-container v-loading="loading">
<el-main style="padding:0 6px 6px 6px">
<sc-form-table ref="videostable" v-model="o.videos" :addTemplate="filtersAddTemplate" class="videos" drag-sort placeholder="暂无数据">
<el-table-column prop="text" label="视频ID" width="100">
<template #default="scope">
<el-input placeholder="视频ID" v-model="scope.row.videoid"></el-input>
</template>
</el-table-column>
<el-table-column prop="text" label="视频链接">
<template #default="scope">
<el-input placeholder="视频链接" v-model="scope.row.videourl"></el-input>
</template>
</el-table-column>
<el-table-column prop="value" label="视频图片">
<template #default="scope">
<el-input placeholder="视频图片" v-model="scope.row.imageid" class="input-with-select">
<template v-slot:prepend v-if="scope.row.imageurl">
<img :src="scope.row.imageurl" height="26">
</template>
<template v-slot:append>
<el-button>
<sc-upload-file v-model="scope.row.imageurl" accept=".jpg, .png, .jpeg, .gif" :on-success="function(res){ scope.row.imageid = res.aid; scope.row.imageurl = res.url }" :multiple="false" :showFileList="0">
上传图片
</sc-upload-file>
</el-button>
</template>
</el-input>
</template>
</el-table-column>
</sc-form-table>
</el-main>
<el-footer>
<el-upload
name="files"
:action="fileConfig.api"
:file-list="fileList"
:on-success="pushRow">
<slot>
<el-button type="danger" style="width: 100%;">点击上传视频文件</el-button>
</slot>
</el-upload>
</el-footer>
</el-container>
</el-drawer>
<images ref="images"></images> <images ref="images"></images>
<videos ref="videos"></videos>
</el-drawer> </el-drawer>
</template> </template>
<style>
.input-with-select .el-input-group__prepend {
padding: 2px;
}
.videos .el-button--small{
display: none;
}
</style>
<script> <script>
import sysConfig from "@/config";
import images from './images' import images from './images'
import videos from './videos'
export default { export default {
emits: ['success', 'closed'], emits: ['success', 'closed'],
components: { components: {
images images,
videos,
}, },
data() { data() {
return { return {
@ -164,10 +106,6 @@
title:'', title:'',
uniqid:'', uniqid:'',
}, },
o: {
images:[],
videos:[],
},
addTemplate: { addTemplate: {
name:null, name:null,
tags:null, tags:null,
@ -178,38 +116,13 @@
videos:[], videos:[],
images:[], images:[],
}, },
fileList:[],
fileConfig:{
api: sysConfig.API_URL + this.$API.common.upload.url,
},
visible: false, visible: false,
isSaveing: false,
filtersAddTemplate: {
imageid: null,
videoid: null,
videourl: '',
imageurl: '',
},
setVideoVisible: false,
} }
}, },
mounted() { mounted() {
}, },
methods: { methods: {
closed(){
alert(4)
},
pushRow(res){
this.$refs.videostable.pushRow({
imageid: null,
videoid: res.data.aid,
videourl: res.data.url,
imageurl: '',
})
this.fileList = [];
},
//显示 //显示
open(mode='add'){ open(mode='add'){
this.mode = mode; this.mode = mode;
@ -252,8 +165,9 @@
}, },
//设置过滤项 //设置过滤项
setVideo(o){ setVideo(o){
this.o = o this.$nextTick(() => {
this.setVideoVisible = true this.$refs.videos.open().setData(o)
})
}, },
//设置过滤项 //设置过滤项
setImage(o){ setImage(o){

127
src/views/app/apartment/videos.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<el-drawer title="视频组" v-model="visible" :size="800" destroy-on-close @closed="$emit('closed', data)">
<el-container v-loading="loading">
<el-main style="padding:0 6px 6px 6px">
<sc-form-table ref="videostable" v-model="data.videos" :hideAdd="true" :addTemplate="filtersAddTemplate" class="videos" drag-sort placeholder="暂无数据">
<el-table-column prop="text" label="视频ID" width="100">
<template #default="scope">
<el-input placeholder="视频ID" v-model="scope.row.videoid"></el-input>
</template>
</el-table-column>
<el-table-column prop="text" label="视频链接">
<template #default="scope">
<el-input placeholder="视频链接" v-model="scope.row.videourl"></el-input>
</template>
</el-table-column>
<el-table-column prop="value" label="视频图片" width="150">
<template #default="scope">
<el-input placeholder="视频图片" v-model="scope.row.imageid" class="input-with-select">
<template v-slot:append>
<sc-upload v-model="scope.row.imageurl" :height="30" :width="30" :on-success="function(res){ scope.row.imageid = res.aid; scope.row.imageurl = res.url }" :multiple="false" :showFileList="0">
<el-button type="danger" icon="el-icon-upload"></el-button>
</sc-upload>
</template>
</el-input>
</template>
</el-table-column>
</sc-form-table>
<div style="padding:10px 0px 0 0px">
<el-upload
name="files"
:action="fileConfig.api"
:file-list="fileList"
:on-success="pushRow">
<slot>
<el-button type="danger" style="width: 100%;">点击上传视频文件</el-button>
</slot>
</el-upload>
</div>
</el-main>
<el-footer v-if="issave">
<el-button type="primary" @click="submit">保存</el-button>
</el-footer>
</el-container>
</el-drawer>
</template>
<style>
.input-with-select .el-input-group__prepend {
padding: 2px;
}
.videos .el-input-group__append{
padding: 0px;
}
</style>
<script>
import sysConfig from "@/config";
export default {
emits: ['success', 'closed'],
data() {
return {
visible: false,
issave: false,
data:[],
filtersAddTemplate: {
imageid: null,
videoid: null,
videourl: '',
imageurl: '',
},
fileList:[],
fileConfig:{
api: sysConfig.API_URL + this.$API.common.upload.url,
},
}
},
mounted() {
},
methods: {
pushRow(res){
this.fileList = [];
if (res.code==200) {
this.$refs.videostable.pushRow({
imageid: null,
videoid: res.data.aid,
videourl: res.data.url,
imageurl: '',
})
return ;
}
this.$message.warning(res.message);
},
//表单提交方法
async submit(){
this.$emit('success', this.data)
this.visible = false;
this.$message.success("操作成功")
},
//显示
open(){
this.visible = true;
return this;
},
//表单注入数据
setData(o){
this.data = o
},
remoteData(o){
setTimeout(async ()=>{
var res = await this.$API.app.apartment.getImages.get({id:o.id})
this.loading = false
this.data = res.data;
this.issave = true
},400)
}
}
}
</script>
<style>
</style>