公寓
This commit is contained in:
parent
8c393f637f
commit
e554769ca4
@ -8,19 +8,47 @@ export default {
|
|||||||
return await http.get(this.url, params);
|
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: {
|
submit: {
|
||||||
url: `/app/apartment/submit`,
|
url: `/app/apartment/submit`,
|
||||||
name: "提交数据",
|
name: "提交数据",
|
||||||
post: async function(params) {
|
post: async function(params) {
|
||||||
return await http.post(this.url, 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: {
|
uploadFile: {
|
||||||
url: `/app/upload/file`,
|
url: `/app/upload?type=file`,
|
||||||
name: "附件上传",
|
name: "附件上传",
|
||||||
post: async function(data, config={}){
|
post: async function(data, config={}){
|
||||||
return await http.post(this.url, data, config);
|
return await http.post(this.url, data, config);
|
||||||
|
|||||||
@ -23,11 +23,15 @@
|
|||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<!-- input -->
|
<!-- 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>
|
<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable :maxlength="item.options.maxlength" show-word-limit></el-input>
|
||||||
</template>
|
</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 -->
|
<!-- checkbox -->
|
||||||
<template v-else-if="item.component=='checkbox'" >
|
<template v-else-if="item.component=='checkbox'">
|
||||||
<template v-if="item.name" >
|
<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>
|
<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>
|
</template>
|
||||||
@ -43,11 +47,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<!-- upload -->
|
<!-- upload -->
|
||||||
<template v-else-if="item.component=='upload'" >
|
<template v-else-if="item.component=='upload'" >
|
||||||
<el-col v-for="(_item, _index) in item.options.items" :key="_index">
|
<sc-upload v-model="form[item.name]" :width="item.options.width" :height="item.options.height"></sc-upload>
|
||||||
<el-form-item :prop="_item.name">
|
|
||||||
<sc-upload v-model="form[_item.name]" :title="_item.label"></sc-upload>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</template>
|
</template>
|
||||||
<!-- switch -->
|
<!-- switch -->
|
||||||
<template v-else-if="item.component=='switch'" >
|
<template v-else-if="item.component=='switch'" >
|
||||||
@ -105,13 +105,6 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</template>
|
</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-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
@ -187,18 +180,6 @@
|
|||||||
this.form[option.name] = option.value
|
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{
|
}else{
|
||||||
this.form[item.name] = item.value
|
this.form[item.name] = item.value
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sc-title">
|
<div class="sc-title" v-html="title">
|
||||||
{{title}}
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -86,7 +86,7 @@
|
|||||||
//默认值转换为数组
|
//默认值转换为数组
|
||||||
toArr(str){
|
toArr(str){
|
||||||
var _arr = []
|
var _arr = []
|
||||||
var arr = str.split(",")
|
var arr = str.split(",")
|
||||||
arr.forEach(item => {
|
arr.forEach(item => {
|
||||||
if(item){
|
if(item){
|
||||||
var urlArr = item.split('/');
|
var urlArr = item.split('/');
|
||||||
@ -110,6 +110,7 @@
|
|||||||
if(item){
|
if(item){
|
||||||
_arr.push({
|
_arr.push({
|
||||||
name: item.name,
|
name: item.name,
|
||||||
|
aid: item.aid,
|
||||||
url: item.url
|
url: item.url
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -123,15 +124,14 @@
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success(res, file){
|
success(res, file, fileList){
|
||||||
var os = this.onSuccess(res, file)
|
var os = this.onSuccess(res, file, fileList)
|
||||||
if(os!=undefined && os==false){
|
if(os!=undefined && os==false){
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
var response = config.parseData(res)
|
file.name = res.name
|
||||||
file.name = response.name
|
file.url = res.url
|
||||||
file.url = response.url
|
file.aid = res.aid
|
||||||
file.aid = response.aid
|
|
||||||
},
|
},
|
||||||
error(err){
|
error(err){
|
||||||
this.$notify.error({
|
this.$notify.error({
|
||||||
|
|||||||
@ -88,7 +88,7 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: "",
|
value: {aid:0, url:null},
|
||||||
file: null,
|
file: null,
|
||||||
style: {
|
style: {
|
||||||
width: this.width + "px",
|
width: this.width + "px",
|
||||||
@ -112,11 +112,12 @@
|
|||||||
this.newFile(this.modelValue)
|
this.newFile(this.modelValue)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
newFile(url){
|
newFile(o){
|
||||||
if(url){
|
if(o && o.url){
|
||||||
this.file = {
|
this.file = {
|
||||||
status: "success",
|
status: "success",
|
||||||
url: url
|
url: o.url,
|
||||||
|
aid: o.aid
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
this.file = null
|
this.file = null
|
||||||
@ -144,7 +145,7 @@
|
|||||||
},
|
},
|
||||||
clearFiles(){
|
clearFiles(){
|
||||||
URL.revokeObjectURL(this.file.tempFile)
|
URL.revokeObjectURL(this.file.tempFile)
|
||||||
this.value = ""
|
this.value = {}
|
||||||
this.file = null
|
this.file = null
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(()=>{
|
||||||
this.$refs.uploader.clearFiles()
|
this.$refs.uploader.clearFiles()
|
||||||
@ -203,14 +204,13 @@
|
|||||||
if(os!=undefined && os==false){
|
if(os!=undefined && os==false){
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.file = null
|
this.file = null
|
||||||
this.value = ""
|
this.value = {}
|
||||||
})
|
})
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
var response = config.parseData(res)
|
file.url = res.url
|
||||||
file.url = response.url
|
file.aid = res.aid
|
||||||
file.aid = response.aid
|
this.value = {url:res.url, aid:res.aid};
|
||||||
this.value = file.url
|
|
||||||
},
|
},
|
||||||
error(err){
|
error(err){
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(()=>{
|
||||||
|
|||||||
@ -42,7 +42,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<span style="display:none!important"><el-input v-model="value"></el-input></span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -71,7 +70,6 @@
|
|||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
value: "",
|
|
||||||
defaultFileList: []
|
defaultFileList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -80,19 +78,16 @@
|
|||||||
if(Array.isArray(val)){
|
if(Array.isArray(val)){
|
||||||
if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
|
if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
|
||||||
this.defaultFileList = val
|
this.defaultFileList = val
|
||||||
this.value = val
|
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
if (val != this.toStr(this.defaultFileList)) {
|
if (val != this.toStr(this.defaultFileList)) {
|
||||||
this.defaultFileList = this.toArr(val)
|
this.defaultFileList = this.toArr(val)
|
||||||
this.value = val
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
defaultFileList: {
|
defaultFileList: {
|
||||||
handler(val){
|
handler(val){
|
||||||
this.$emit('update:modelValue', Array.isArray(this.modelValue) ? this.formatArr(val) : this.toStr(val))
|
this.$emit('update:modelValue', Array.isArray(this.modelValue) ? this.formatArr(val) : this.toStr(val))
|
||||||
this.value = this.toStr(val)
|
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
@ -104,7 +99,6 @@
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
|
this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
|
||||||
this.value = this.toStr( this.modelValue)
|
|
||||||
if(!this.disabled && this.draggable){
|
if(!this.disabled && this.draggable){
|
||||||
this.rowDrop()
|
this.rowDrop()
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,10 +10,10 @@ export default {
|
|||||||
parseData: function (res) {
|
parseData: function (res) {
|
||||||
return {
|
return {
|
||||||
code: res.code, //分析状态字段结构
|
code: res.code, //分析状态字段结构
|
||||||
name: res.data.original,//分析文件名称
|
msg: res.message, //分析描述字段结构
|
||||||
|
name: res.data.original, //分析文件名称
|
||||||
url: res.data.url, //分析图片远程地址结构
|
url: res.data.url, //分析图片远程地址结构
|
||||||
aid: res.data.aid, //分析图片远程地址结构
|
aid: res.data.aid, //分析图片远程地址结构
|
||||||
msg: res.message //分析描述字段结构
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
apiObjFile: API.common.uploadFile, //附件上传请求API对象
|
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>
|
||||||
<el-table-column label="品牌" prop="company" width="180"></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="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="客服ID" prop="customerservice" 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">
|
<el-table-column label="状态" prop="status" width="80">
|
||||||
@ -31,7 +38,7 @@
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<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_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>
|
<template #reference>
|
||||||
<el-button type="warning" size="small">删除</el-button>
|
<el-button type="warning" size="small">删除</el-button>
|
||||||
@ -39,27 +46,32 @@
|
|||||||
</el-popconfirm>
|
</el-popconfirm>
|
||||||
</el-button-group>
|
</el-button-group>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</scTable>
|
</scTable>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import saveDialog from './save'
|
import roomDialog from './room'
|
||||||
|
import xUpdate from './update'
|
||||||
|
import images from './images'
|
||||||
export default {
|
export default {
|
||||||
name: 'apartment',
|
name: 'apartment',
|
||||||
components: {
|
components: {
|
||||||
saveDialog
|
roomDialog,
|
||||||
|
xUpdate,
|
||||||
|
images,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dialog: {
|
dialog: {
|
||||||
save: false
|
room: false,
|
||||||
|
update: false,
|
||||||
},
|
},
|
||||||
apiObj: this.$API.app.apartment.lists,
|
apiObj: this.$API.app.apartment.lists,
|
||||||
selection: []
|
selection: []
|
||||||
@ -69,18 +81,46 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handleClosed(data){
|
||||||
|
|
||||||
|
this.$confirm('请选择是否需要保存改动', '文件有改动哦', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功!'
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
console.log(data)
|
||||||
|
},
|
||||||
//增加
|
//增加
|
||||||
add(){
|
add(){
|
||||||
this.dialog.save = true
|
this.dialog.update = true
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.saveDialog.open()
|
this.$refs.xUpdate.open().setConfig()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setImage(o){
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.images.open().remoteData(o)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//编辑
|
//编辑
|
||||||
table_edit(row){
|
table_edit(row){
|
||||||
this.dialog.save = true
|
this.dialog.update = true
|
||||||
this.$nextTick(() => {
|
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