公寓
This commit is contained in:
parent
8c393f637f
commit
e554769ca4
@ -8,19 +8,47 @@ export default {
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
},
|
||||
info: {
|
||||
url: `/app/apartment/info`,
|
||||
name: "详情",
|
||||
get: async function(params) {
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
},
|
||||
submit: {
|
||||
url: `/app/apartment/submit`,
|
||||
name: "提交数据",
|
||||
post: async function(params) {
|
||||
return await http.post(this.url, params);
|
||||
}
|
||||
},
|
||||
info: {
|
||||
url: `/app/apartment/info`,
|
||||
name: "获取数据",
|
||||
get: async function(params) {
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
},
|
||||
config: {
|
||||
url: `/app/apartment/config`,
|
||||
name: "读取配置",
|
||||
get: async function(params) {
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
},
|
||||
roomSubmit: {
|
||||
url: `/app/apartment/roomSubmit`,
|
||||
name: "房源详情",
|
||||
post: async function(params) {
|
||||
return await http.post(this.url, params);
|
||||
}
|
||||
},
|
||||
roomGet: {
|
||||
url: `/app/apartment/roomGet`,
|
||||
name: "房源提交数据",
|
||||
get: async function(params) {
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
},
|
||||
getImages: {
|
||||
url: `/app/apartment/getImages`,
|
||||
name: "房源提交数据",
|
||||
get: async function(params) {
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -9,7 +9,7 @@ export default {
|
||||
}
|
||||
},
|
||||
uploadFile: {
|
||||
url: `/app/upload/file`,
|
||||
url: `/app/upload?type=file`,
|
||||
name: "附件上传",
|
||||
post: async function(data, config={}){
|
||||
return await http.post(this.url, data, config);
|
||||
|
||||
@ -23,11 +23,15 @@
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<!-- input -->
|
||||
<template v-if="item.component=='input'" >
|
||||
<template v-if="item.component=='input'">
|
||||
<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable :maxlength="item.options.maxlength" show-word-limit></el-input>
|
||||
</template>
|
||||
<!-- textarea -->
|
||||
<template v-else-if="item.component=='textarea'">
|
||||
<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" :rows="item.options.rows" clearable :maxlength="item.options.maxlength" type="textarea" show-word-limit></el-input>
|
||||
</template>
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="item.component=='checkbox'" >
|
||||
<template v-else-if="item.component=='checkbox'">
|
||||
<template v-if="item.name" >
|
||||
<el-checkbox v-model="form[item.name][_item.name]" :label="_item.label" v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox>
|
||||
</template>
|
||||
@ -43,11 +47,7 @@
|
||||
</template>
|
||||
<!-- upload -->
|
||||
<template v-else-if="item.component=='upload'" >
|
||||
<el-col v-for="(_item, _index) in item.options.items" :key="_index">
|
||||
<el-form-item :prop="_item.name">
|
||||
<sc-upload v-model="form[_item.name]" :title="_item.label"></sc-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<sc-upload v-model="form[item.name]" :width="item.options.width" :height="item.options.height"></sc-upload>
|
||||
</template>
|
||||
<!-- switch -->
|
||||
<template v-else-if="item.component=='switch'" >
|
||||
@ -105,13 +105,6 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<slot>
|
||||
<el-button type="primary" @click="submit">提交</el-button>
|
||||
</slot>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -187,18 +180,6 @@
|
||||
this.form[option.name] = option.value
|
||||
})
|
||||
}
|
||||
}else if(item.component == 'upload'){
|
||||
if(item.name){
|
||||
const value = {}
|
||||
item.options.items.forEach((option) => {
|
||||
value[option.name] = option.value
|
||||
})
|
||||
this.form[item.name] = value
|
||||
}else{
|
||||
item.options.items.forEach((option) => {
|
||||
this.form[option.name] = option.value
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.form[item.name] = item.value
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="sc-title">
|
||||
{{title}}
|
||||
<div class="sc-title" v-html="title">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -110,6 +110,7 @@
|
||||
if(item){
|
||||
_arr.push({
|
||||
name: item.name,
|
||||
aid: item.aid,
|
||||
url: item.url
|
||||
})
|
||||
}
|
||||
@ -123,15 +124,14 @@
|
||||
return false;
|
||||
}
|
||||
},
|
||||
success(res, file){
|
||||
var os = this.onSuccess(res, file)
|
||||
success(res, file, fileList){
|
||||
var os = this.onSuccess(res, file, fileList)
|
||||
if(os!=undefined && os==false){
|
||||
return false
|
||||
}
|
||||
var response = config.parseData(res)
|
||||
file.name = response.name
|
||||
file.url = response.url
|
||||
file.aid = response.aid
|
||||
file.name = res.name
|
||||
file.url = res.url
|
||||
file.aid = res.aid
|
||||
},
|
||||
error(err){
|
||||
this.$notify.error({
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
value: {aid:0, url:null},
|
||||
file: null,
|
||||
style: {
|
||||
width: this.width + "px",
|
||||
@ -112,11 +112,12 @@
|
||||
this.newFile(this.modelValue)
|
||||
},
|
||||
methods: {
|
||||
newFile(url){
|
||||
if(url){
|
||||
newFile(o){
|
||||
if(o && o.url){
|
||||
this.file = {
|
||||
status: "success",
|
||||
url: url
|
||||
url: o.url,
|
||||
aid: o.aid
|
||||
}
|
||||
}else{
|
||||
this.file = null
|
||||
@ -144,7 +145,7 @@
|
||||
},
|
||||
clearFiles(){
|
||||
URL.revokeObjectURL(this.file.tempFile)
|
||||
this.value = ""
|
||||
this.value = {}
|
||||
this.file = null
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.uploader.clearFiles()
|
||||
@ -203,14 +204,13 @@
|
||||
if(os!=undefined && os==false){
|
||||
this.$nextTick(() => {
|
||||
this.file = null
|
||||
this.value = ""
|
||||
this.value = {}
|
||||
})
|
||||
return false
|
||||
}
|
||||
var response = config.parseData(res)
|
||||
file.url = response.url
|
||||
file.aid = response.aid
|
||||
this.value = file.url
|
||||
file.url = res.url
|
||||
file.aid = res.aid
|
||||
this.value = {url:res.url, aid:res.aid};
|
||||
},
|
||||
error(err){
|
||||
this.$nextTick(()=>{
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<span style="display:none!important"><el-input v-model="value"></el-input></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -71,7 +70,6 @@
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
value: "",
|
||||
defaultFileList: []
|
||||
}
|
||||
},
|
||||
@ -80,19 +78,16 @@
|
||||
if(Array.isArray(val)){
|
||||
if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
|
||||
this.defaultFileList = val
|
||||
this.value = val
|
||||
}
|
||||
}else{
|
||||
if (val != this.toStr(this.defaultFileList)) {
|
||||
this.defaultFileList = this.toArr(val)
|
||||
this.value = val
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultFileList: {
|
||||
handler(val){
|
||||
this.$emit('update:modelValue', Array.isArray(this.modelValue) ? this.formatArr(val) : this.toStr(val))
|
||||
this.value = this.toStr(val)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
@ -104,7 +99,6 @@
|
||||
},
|
||||
mounted() {
|
||||
this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
|
||||
this.value = this.toStr( this.modelValue)
|
||||
if(!this.disabled && this.draggable){
|
||||
this.rowDrop()
|
||||
}
|
||||
|
||||
@ -10,10 +10,10 @@ export default {
|
||||
parseData: function (res) {
|
||||
return {
|
||||
code: res.code, //分析状态字段结构
|
||||
name: res.data.original,//分析文件名称
|
||||
msg: res.message, //分析描述字段结构
|
||||
name: res.data.original, //分析文件名称
|
||||
url: res.data.url, //分析图片远程地址结构
|
||||
aid: res.data.aid, //分析图片远程地址结构
|
||||
msg: res.message //分析描述字段结构
|
||||
}
|
||||
},
|
||||
apiObjFile: API.common.uploadFile, //附件上传请求API对象
|
||||
|
||||
41
src/views/app/apartment/images.vue
Normal file
41
src/views/app/apartment/images.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<el-drawer title="图片组(支持拖拽排序)" :size="670" v-model="visible" destroy-on-close @closed="$emit('closed', data)">
|
||||
<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-drawer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
data:[],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//显示
|
||||
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;
|
||||
},400)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@ -16,6 +16,13 @@
|
||||
</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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客服ID" prop="customerservice" width="80"></el-table-column>
|
||||
<el-table-column label="排序" prop="sort" width="100"></el-table-column>
|
||||
<el-table-column label="状态" prop="status" width="80">
|
||||
@ -31,7 +38,7 @@
|
||||
<template #default="scope">
|
||||
<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_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)">
|
||||
<template #reference>
|
||||
<el-button type="warning" size="small">删除</el-button>
|
||||
@ -44,22 +51,27 @@
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-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>
|
||||
<images ref="images" @closed="handleClosed"></images>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saveDialog from './save'
|
||||
|
||||
import roomDialog from './room'
|
||||
import xUpdate from './update'
|
||||
import images from './images'
|
||||
export default {
|
||||
name: 'apartment',
|
||||
components: {
|
||||
saveDialog
|
||||
roomDialog,
|
||||
xUpdate,
|
||||
images,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: {
|
||||
save: false
|
||||
room: false,
|
||||
update: false,
|
||||
},
|
||||
apiObj: this.$API.app.apartment.lists,
|
||||
selection: []
|
||||
@ -69,18 +81,46 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClosed(data){
|
||||
|
||||
this.$confirm('请选择是否需要保存改动', '文件有改动哦', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
console.log(data)
|
||||
},
|
||||
//增加
|
||||
add(){
|
||||
this.dialog.save = true
|
||||
this.dialog.update = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveDialog.open()
|
||||
this.$refs.xUpdate.open().setConfig()
|
||||
})
|
||||
},
|
||||
setImage(o){
|
||||
this.$nextTick(() => {
|
||||
this.$refs.images.open().remoteData(o)
|
||||
})
|
||||
},
|
||||
//编辑
|
||||
table_edit(row){
|
||||
this.dialog.save = true
|
||||
this.dialog.update = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveDialog.open('edit').setData(row)
|
||||
this.$refs.xUpdate.open('edit').setConfig().setData(row)
|
||||
})
|
||||
},
|
||||
//房源类型
|
||||
table_room(row){
|
||||
this.dialog.room = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roomDialog.open('edit').setData(row)
|
||||
})
|
||||
},
|
||||
//删除
|
||||
|
||||
269
src/views/app/apartment/room.vue
Normal file
269
src/views/app/apartment/room.vue
Normal file
@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1200" destroy-on-close @closed="$emit('closed')">
|
||||
<el-container v-loading="loading">
|
||||
<el-main style="padding:0 20px 20px 20px">
|
||||
<el-form ref="dialogForm" :model="form" label-width="100px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item label="公寓名称" prop="title">
|
||||
<el-input v-model="form.title" readonly placeholder="请输入中文描述标题"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="标识" prop="uniqid">
|
||||
<el-input v-model="form.uniqid" readonly placeholder="请输入唯一标识"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<sc-title title="房间类型"></sc-title>
|
||||
|
||||
<sc-form-table v-model="form.room" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="name" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tags" label="标签">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.tags" placeholder="多个标签,号隔开"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="allowance" label="可预定数量" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.allowance" placeholder="可预定数量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.price" placeholder="价格"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="discountprice" label="特价" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.discountprice" placeholder="房间特价"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column prop="status" label="可预定" width="70" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="1" inactive-value="0"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="videos" label="视频" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-button text size="small" :type="scope.row.videos.length==0?'':'primary'" @click="setVideo(scope.row)">
|
||||
视频
|
||||
<el-badge :hidden="scope.row.videos.length==0" :value="scope.row.videos.length" class="badge" type="danger"></el-badge>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="images" label="图片组" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-button text size="small" :type="scope.row.images.length==0?'':'primary'" @click="setImage(scope.row)">
|
||||
图片
|
||||
<el-badge :hidden="scope.row.images.length==0" :value="scope.row.images.length" class="badge" type="danger"></el-badge>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
|
||||
<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>
|
||||
|
||||
</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'
|
||||
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
components: {
|
||||
images
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
mode: "add",
|
||||
titleMap: {
|
||||
add: '新增',
|
||||
edit: '公寓房间类型'
|
||||
},
|
||||
form: {
|
||||
room:[],
|
||||
title:'',
|
||||
uniqid:'',
|
||||
},
|
||||
o: {
|
||||
images:[],
|
||||
videos:[],
|
||||
},
|
||||
addTemplate: {
|
||||
name:null,
|
||||
tags:null,
|
||||
allowance:0,
|
||||
price:0,
|
||||
discountprice:0,
|
||||
status:0,
|
||||
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;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
//表单提交方法
|
||||
submit(){
|
||||
this.$refs.dialogForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.isSaveing = true;
|
||||
var res = await this.$API.app.apartment.roomSubmit.post(this.form);
|
||||
this.isSaveing = false;
|
||||
if(res.code == 200){
|
||||
this.$emit('success', this.form, this.mode)
|
||||
this.visible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//表单注入数据
|
||||
setData(data){
|
||||
|
||||
this.loading = true
|
||||
const params = {
|
||||
id: data.id,
|
||||
uniqid: data.uniqid,
|
||||
}
|
||||
this.form.title = data.title;
|
||||
this.form.uniqid = data.uniqid;
|
||||
setTimeout(async ()=>{
|
||||
var res = await this.$API.app.apartment.roomGet.get(params)
|
||||
this.loading = false
|
||||
this.form.room = res.data;
|
||||
},400)
|
||||
|
||||
},
|
||||
//设置过滤项
|
||||
setVideo(o){
|
||||
this.o = o
|
||||
this.setVideoVisible = true
|
||||
},
|
||||
//设置过滤项
|
||||
setImage(o){
|
||||
this.$nextTick(() => {
|
||||
this.$refs.images.open().setData(o)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1200" destroy-on-close @closed="$emit('closed')">
|
||||
<el-container v-loading="loading">
|
||||
<el-main style="padding:0 20px 20px 20px">
|
||||
<el-form ref="dialogForm" :model="form" label-width="100px" label-position="top">
|
||||
<sc-title title="基础信息"></sc-title>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item label="公寓名称" prop="title">
|
||||
<el-input v-model="title" readonly placeholder="请输入中文描述标题"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="标识" prop="uniqid">
|
||||
<el-input v-model="uniqid" readonly placeholder="请输入唯一标识"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<sc-title title="房间类型"></sc-title>
|
||||
<el-form-item prop="column">
|
||||
<sc-form-table v-model="form.room" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="name" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tags" label="标签">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.tags" placeholder="多个标签,号隔开"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="allowance" label="可预定数量" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.allowance" placeholder="可预定数量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.price" placeholder="价格"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="discountprice" label="特价" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.discountprice" placeholder="房间特价"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="可预定" width="70" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.status"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="videos" label="视频" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-button text size="small" :type="scope.row.videos.length==0?'':'primary'" @click="setVideo(scope.row.videos)">
|
||||
视频
|
||||
<el-badge :hidden="scope.row.videos.length==0" :value="scope.row.videos.length" class="badge" type="danger"></el-badge>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="images" label="图片组" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-button text size="small" :type="scope.row.images.length==0?'':'primary'" @click="setImage(scope.row)">
|
||||
图片
|
||||
<el-badge :hidden="scope.row.images.length==0" :value="scope.row.images.length" class="badge" type="danger"></el-badge>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</sc-form-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
|
||||
<el-button @click="visible=false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
|
||||
<el-drawer title="图片组(支持拖拽排序)" v-model="setImageVisible" :size="670" destroy-on-close>
|
||||
<el-main style="padding:0 20px 20px 20px">
|
||||
<sc-upload-multiple v-model="o.images" draggable :limit="12" tip="最多上传12个文件,单个文件不要超过10M,请上传图像格式文件">
|
||||
|
||||
</sc-upload-multiple>
|
||||
</el-main>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer title="视频组" v-model="setVideoVisible" :size="800" destroy-on-close>
|
||||
<el-main style="padding:0 20px 20px 20px">
|
||||
<sc-form-table v-model="videos" :addTemplate="filtersAddTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="text" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.text" placeholder="请输入名称"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="值" width="150">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.value" placeholder="请输入值"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="值" width="150">
|
||||
<template #default="scope">
|
||||
<sc-upload-file v-model="scope.row.aid" :limit="1" drag>
|
||||
<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
上传图
|
||||
</div>
|
||||
</sc-upload-file>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</el-main>
|
||||
</el-drawer>
|
||||
|
||||
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
mode: "add",
|
||||
titleMap: {
|
||||
add: '新增',
|
||||
edit: '公寓房间类型'
|
||||
},
|
||||
form: {},
|
||||
o: {
|
||||
images:[],
|
||||
videos:[],
|
||||
},
|
||||
title:'',
|
||||
uniqid:'',
|
||||
addTemplate: {
|
||||
name:null,
|
||||
tags:null,
|
||||
allowance:0,
|
||||
price:0,
|
||||
discountprice:0,
|
||||
status:0,
|
||||
videos:[
|
||||
{},
|
||||
],
|
||||
images:[
|
||||
{
|
||||
aid:100,
|
||||
url:'https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-S_54ldHvqqsgFptxhXa6RWi26P-BuTVcdRbWW4tkb8MVYZjQ0Mjk~'
|
||||
},
|
||||
{
|
||||
aid:101,
|
||||
url:'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
|
||||
},
|
||||
],
|
||||
},
|
||||
visible: false,
|
||||
isSaveing: false,
|
||||
filtersAddTemplate: {
|
||||
text: '',
|
||||
value: ''
|
||||
},
|
||||
setVideoVisible: false,
|
||||
setImageVisible: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//显示
|
||||
open(mode='add'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
//表单提交方法
|
||||
submit(){
|
||||
this.$refs.dialogForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.isSaveing = true;
|
||||
var res = await this.$API.app.apartment.submit.post(this.form);
|
||||
this.isSaveing = false;
|
||||
if(res.code == 200){
|
||||
this.$emit('success', this.form, this.mode)
|
||||
this.visible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//表单注入数据
|
||||
setData(data){
|
||||
|
||||
this.loading = true
|
||||
const params = {
|
||||
id: data.id,
|
||||
uniqid: data.uniqid,
|
||||
}
|
||||
|
||||
this.title = data.title;
|
||||
this.uniqid = data.uniqid;
|
||||
|
||||
setTimeout(async ()=>{
|
||||
var res = await this.$API.app.apartment.info.get(params)
|
||||
this.loading = false
|
||||
this.form = res.data;
|
||||
},400)
|
||||
|
||||
},
|
||||
//设置过滤项
|
||||
setVideo(o){
|
||||
this.o = o
|
||||
this.setVideoVisible = true
|
||||
},
|
||||
//设置过滤项
|
||||
setImage(o){
|
||||
this.o = o
|
||||
this.setImageVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
86
src/views/app/apartment/update.vue
Normal file
86
src/views/app/apartment/update.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1200" destroy-on-close @closed="$emit('closed')">
|
||||
<el-container v-loading="loading">
|
||||
<el-main style="padding:0 20px 20px 20px">
|
||||
<sc-form ref="formref" :config="config" v-model="info" :loading="loading"> </sc-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
|
||||
<el-button @click="visible=false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
visible: false,
|
||||
mode: "add",
|
||||
titleMap: {
|
||||
add: '新增',
|
||||
edit: '编辑'
|
||||
},
|
||||
info:{},
|
||||
config:{}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
submit(){
|
||||
this.$refs.formref.validate((valid, obj) => {
|
||||
if (valid) {
|
||||
console.log(this.info)
|
||||
alert('submit!')
|
||||
}else{
|
||||
this.$refs.formref.scrollToField(Object.keys(obj)[0])
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//显示
|
||||
open(mode='add'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
setConfig(){
|
||||
var that = this;
|
||||
this.$API.app.apartment.config.get().then((res) => {
|
||||
console.log(res)
|
||||
that.config = res.data;
|
||||
});
|
||||
return this;
|
||||
},
|
||||
//表单注入数据
|
||||
setData(data){
|
||||
this.loading = true
|
||||
const params = {
|
||||
id: data.id,
|
||||
uniqid: data.uniqid,
|
||||
}
|
||||
setTimeout(async ()=>{
|
||||
var res = await this.$API.app.apartment.info.get(params)
|
||||
if (res.code==200) {
|
||||
this.loading = false
|
||||
this.info = res.data.info;
|
||||
return ;
|
||||
}
|
||||
|
||||
this.$message.warning(res.message)
|
||||
this.visible = false;
|
||||
},400)
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
222
src/views/template/list/chartlist.vue
Normal file
222
src/views/template/list/chartlist.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-radio-group v-model="dateType" style="margin-right: 15px;">
|
||||
<el-radio-button label="今天"></el-radio-button>
|
||||
<el-radio-button label="昨天"></el-radio-button>
|
||||
<el-radio-button label="最近7天"></el-radio-button>
|
||||
<el-radio-button label="最近30天"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<div class="number-data">
|
||||
<div class="item">
|
||||
<h2>浏览量(PV)
|
||||
<el-tooltip effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px;line-height: 2;">
|
||||
即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。
|
||||
</div>
|
||||
</template>
|
||||
<el-icon><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
</h2>
|
||||
<p>65,715</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>访客数(UV)
|
||||
<el-tooltip effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px;line-height: 2;">
|
||||
一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。
|
||||
</div>
|
||||
</template>
|
||||
<el-icon><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
</h2>
|
||||
<p>8,936</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>IP数
|
||||
<el-tooltip effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px;line-height: 2;">
|
||||
一天之内您网站的独立访问ip数。
|
||||
</div>
|
||||
</template>
|
||||
<el-icon><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
</h2>
|
||||
<p>10,279</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>跳出率
|
||||
<el-tooltip effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px;line-height: 2;">
|
||||
只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。
|
||||
</div>
|
||||
</template>
|
||||
<el-icon><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
</h2>
|
||||
<p>27.92%</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>平均访问时长
|
||||
<el-tooltip effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px;line-height: 2;">
|
||||
访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。
|
||||
</div>
|
||||
</template>
|
||||
<el-icon><el-icon-question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
</h2>
|
||||
<p>00:19:05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<scEcharts height="250px" :option="pie"></scEcharts>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<scEcharts height="250px" :option="option"></scEcharts>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<scTable ref="table" :data="data" show-summary height="auto">
|
||||
<el-table-column label="来源类型" prop="type"></el-table-column>
|
||||
<el-table-column label="网站基础指标" align="center">
|
||||
<el-table-column label="访客数(UV)" prop="uv" width="150"></el-table-column>
|
||||
<el-table-column label="IP数" prop="ip" width="150"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="流量质量指标" align="center">
|
||||
<el-table-column label="跳出率" prop="out" width="150"></el-table-column>
|
||||
<el-table-column label="平均访问时长" prop="time" width="150"></el-table-column>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
|
||||
export default {
|
||||
name: 'chartlist',
|
||||
components: {
|
||||
scEcharts
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
dateType: "今天",
|
||||
date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
data: [
|
||||
{
|
||||
type: "直接访问",
|
||||
pv: "57,847",
|
||||
uv: "7,129",
|
||||
ip: "8,330",
|
||||
out: "26.38%",
|
||||
time: "00:20:35"
|
||||
},
|
||||
{
|
||||
type: "搜索引擎",
|
||||
pv: "5,942",
|
||||
uv: "1,338",
|
||||
ip: "1,449",
|
||||
out: "33.49%",
|
||||
time: "00:11:31"
|
||||
},
|
||||
{
|
||||
type: "外部链接",
|
||||
pv: "1,926",
|
||||
uv: "469",
|
||||
ip: "500",
|
||||
out: "44.53%",
|
||||
time: "00:08:49"
|
||||
}
|
||||
],
|
||||
pie: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
data: [
|
||||
{value: 1048, name: '搜索引擎'},
|
||||
{value: 235, name: '直接访问'},
|
||||
{value: 180, name: '外部链接'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
option: {
|
||||
legend: {
|
||||
data: ['直接访问', '搜索引擎', '外部链接']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
name: '直接访问',
|
||||
data: [120, 210, 150, 80, 70, 110, 130],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
data: [110, 180, 120, 120, 60, 90, 110],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '外部链接',
|
||||
data: [50, 90, 60, 60, 30, 40, 50],
|
||||
type: 'line',
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-card {margin-bottom: 15px;}
|
||||
|
||||
.number-data {display: flex;}
|
||||
.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
|
||||
.number-data .item:last-child {border: 0;}
|
||||
.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;display: flex;align-items: center;}
|
||||
.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
|
||||
.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}
|
||||
|
||||
.chart {border-top: 1px solid #f0f0f0;margin-top: 20px;padding-top: 20px;}
|
||||
|
||||
.dark .number-data .item {border-color: var(--el-border-color-light);}
|
||||
.dark .number-data .item p {color: #d0d0d0;}
|
||||
.dark .chart {border-color: var(--el-border-color-light);}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user