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

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

@ -42,7 +42,6 @@
</div>
</slot>
</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>
<sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
<template #footer>
@ -78,7 +77,6 @@
disabled: { type: Boolean, default: false },
round: { type: Boolean, default: false },
onSuccess: { type: Function, default: () => { return true } },
cropper: { type: Boolean, default: false },
compress: {type: Number, default: 1},
aspectRatio: {type: Number, default: NaN}
@ -113,7 +111,16 @@
},
methods: {
newFile(o){
if(o && o.url){
if(o && typeof o === 'string'){
this.file = {
status: "success",
url: o,
}
}
else if(o && o.url){
this.file = {
status: "success",
url: o.url,
@ -237,12 +244,16 @@
param.onProgress({percent: complete})
}
}).then(res => {
alert(res.code)
if (res.code == config.successCode) {
var response = config.parseData(res);
if(response.code == config.successCode){
param.onSuccess(response)
}else{
param.onError(response.message || "未知错误")
param.onSuccess(response);
return ;
}
param.onError(response.message || "未知错误")
}).catch(err => {
param.onError(err)
})

2
src/config/upload.js
View File

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

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

@ -1,8 +1,13 @@
<template>
<el-drawer title="图片组(支持拖拽排序)" :size="670" v-model="visible" destroy-on-close @closed="$emit('closed', data)">
<el-container>
<el-main style="padding:0 20px 20px 20px">
<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>
</template>
<script>
@ -11,6 +16,7 @@
data() {
return {
visible: false,
issave: false,
data:[],
}
},
@ -23,6 +29,12 @@
this.visible = true;
return this;
},
//表单提交方法
async submit(){
this.$emit('success', this.data)
this.visible = false;
this.$message.success("操作成功")
},
//表单注入数据
setData(o){
this.data = o
@ -31,6 +43,7 @@
setTimeout(async ()=>{
var res = await this.$API.app.apartment.getImages.get({id:o.id})
this.loading = false
this.issave = true
this.data = res.data;
},400)
}

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

@ -6,31 +6,38 @@
</div>
</el-header>
<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 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">
<img :src="scope.row.image" height="25" style="border-radius: 8px;"> {{ scope.row.title }}
</template>
</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">
<template #default="scope">
<el-text text size="small" :type="scope.row.attachment.length==0?'':'primary'" @click="setImage(scope.row)">
<el-badge :value="scope.row.attachment.length" class="badge" type="danger"></el-badge>
<el-text text size="small" @click="setImage(scope.row)">
<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>
</template>
</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="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="viewnum" width="90"></el-table-column>
@ -39,9 +46,9 @@
<el-button-group>
<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-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
<el-popconfirm title="确定下架吗？" @confirm="table_del(scope.row, scope.$index)">
<template #reference>
<el-button type="warning" size="small">删除</el-button>
<el-button type="warning" size="small">下架</el-button>
</template>
</el-popconfirm>
</el-button-group>
@ -53,18 +60,21 @@
<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>
<images ref="images" @closed="handleClosed"></images>
<images ref="images" @closed="handleClosed" @success="handleSuccess"></images>
<videos ref="videos" @closed="handleClosed" @success="handleSuccess"></videos>
</template>
<script>
import roomDialog from './room'
import xUpdate from './update'
import images from './images'
import videos from './videos'
export default {
name: 'apartment',
components: {
roomDialog,
xUpdate,
videos,
images,
},
data() {
@ -109,6 +119,11 @@
this.$refs.images.open().remoteData(o)
})
},
setVideo(o){
this.$nextTick(() => {
this.$refs.videos.open().remoteData(o)
})
},
//编辑
table_edit(row){
this.dialog.update = true
@ -160,6 +175,8 @@
},
//本地更新数据
handleSuccess(data, mode){
alert(2)
if(mode=='add'){
data.id = new Date().getTime()
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-footer>
</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>
<videos ref="videos"></videos>
</el-drawer>
</template>
<style>
.input-with-select .el-input-group__prepend {
padding: 2px;
}
.videos .el-button--small{
display: none;
}
</style>
<script>
import sysConfig from "@/config";
import images from './images'
import videos from './videos'
export default {
emits: ['success', 'closed'],
components: {
images
images,
videos,
},
data() {
return {
@ -164,10 +106,6 @@
title:'',
uniqid:'',
},
o: {
images:[],
videos:[],
},
addTemplate: {
name:null,
tags:null,
@ -178,38 +116,13 @@
videos:[],
images:[],
},
fileList:[],
fileConfig:{
api: sysConfig.API_URL + this.$API.common.upload.url,
},
visible: false,
isSaveing: false,
filtersAddTemplate: {
imageid: null,
videoid: null,
videourl: '',
imageurl: '',
},
setVideoVisible: false,
}
},
mounted() {
},
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'){
this.mode = mode;
@ -252,8 +165,9 @@
},
//设置过滤项
setVideo(o){
this.o = o
this.setVideoVisible = true
this.$nextTick(() => {
this.$refs.videos.open().setData(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>