You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
8.9 KiB
Vue
318 lines
8.9 KiB
Vue
<template>
|
|
<div style="padding: 8px">
|
|
<el-card shadow="never" style="border-radius: 6px">
|
|
<el-form :inline="true" :model="queryForm" class="demo-form-inline">
|
|
<el-form-item label="模版名称">
|
|
<el-input v-model="queryForm.templateName" placeholder="模版名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="queryModels">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" style="border-radius: 6px;margin-top: 12px">
|
|
<el-button type="primary" @click="addModels">新增</el-button>
|
|
<el-table
|
|
v-loading="load"
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
v-if="false"
|
|
prop="templateId">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="templateName"
|
|
label="名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="缩略图">
|
|
<template slot-scope="scope">
|
|
<div class="miniLayout">
|
|
<component :is="JSON.parse(scope.row.templateContent).center"
|
|
:tree="JSON.parse(scope.row.templateContent).centerChildren"></component>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
label="操作"
|
|
width="120">
|
|
<template slot-scope="scope">
|
|
<el-button @click="queryModelInfo(scope.row)" type="text" size="small" style="padding: 0 4px">修改</el-button>
|
|
<el-popconfirm
|
|
title="确定删除吗？"
|
|
@confirm="delModelOk(scope.row.templateId)">
|
|
<el-button slot="reference" type="text" size="small" style="padding: 0 4px">删除</el-button>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top: 12px">
|
|
<el-pagination
|
|
style="display: flex;justify-content: flex-end;"
|
|
@size-change="getList"
|
|
@current-change="getList"
|
|
:current-page.sync="queryForm.pageNum"
|
|
:page-sizes="[10,20,50,100]"
|
|
:page-size="queryForm.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</el-card>
|
|
|
|
|
|
<el-dialog
|
|
:title="dialogTitle1"
|
|
:visible.sync="addModelDialog"
|
|
:append-to-body="true"
|
|
width="30%">
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
<el-form-item label="模型名称">
|
|
<el-input v-model="form.templateName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="模型内容">
|
|
<div class="layout" ref="layout" :style="`background-image:url(${form.templateContent.pageCfg.bg})`">
|
|
<component :is="form.templateContent.center" :tree="form.templateContent.centerChildren"></component>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="背景" label-width="80px">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="dev-api/basic/hwTemplateAchieve/saveImage"
|
|
:headers="{
|
|
authorization:'Bearer ' + getToken()
|
|
}"
|
|
:show-file-list="false"
|
|
:on-success="getImg">
|
|
<img v-if="form.templateContent.pageCfg.bg" :src="form.templateContent.pageCfg.bg" class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="addModelOk" v-if="dialogTitle1 === '新增模型'">新 增</el-button>
|
|
<el-button type="primary" @click="changeModel" v-if="dialogTitle1 === '修改模型'">确 定</el-button>
|
|
<el-button @click="addModelDialog = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
title="提示"
|
|
:visible.sync="dialogVisible"
|
|
:append-to-body="true"
|
|
width="30%">
|
|
<el-button type="primary" @click="leftRight">左右</el-button>
|
|
<el-button type="primary" @click="upDown">上下</el-button>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LeftRight from '@/components/Configure/setLayout/leftRightStr'
|
|
import UpDown from '@/components/Configure/setLayout/upDownStr'
|
|
import {addModel, delModel, queryModel, updateModel} from "@/api/configure/configuration/layoutModel";
|
|
import {getToken} from "@/utils/auth";
|
|
|
|
export default {
|
|
name: 'Layout',
|
|
components: {
|
|
LeftRight: () => import('@/components/Configure/setLayout/leftRightStr'),
|
|
UpDown: () => import('@/components/Configure/setLayout/upDownStr')
|
|
},
|
|
data() {
|
|
return {
|
|
load: false,
|
|
dialogTitle1: '',
|
|
addModelDialog: false,
|
|
tree: {},
|
|
dialogVisible: false,
|
|
queryForm: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
pageCfg: {},
|
|
total: 0,
|
|
form: {
|
|
templateName: '',
|
|
templateContent: {
|
|
center: null,
|
|
centerChildren: {},
|
|
pageCfg: {
|
|
bg: ''
|
|
}
|
|
}
|
|
},
|
|
tableData: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.queryModels()
|
|
},
|
|
methods: {
|
|
getToken() {
|
|
return getToken()
|
|
},
|
|
async getImg(file) {
|
|
this.$set(this.form.templateContent.pageCfg, 'bg', file.data.url)
|
|
},
|
|
getList() {
|
|
console.log(this.queryForm)
|
|
this.load = true
|
|
queryModel(this.queryForm).then(e => {
|
|
console.log(e)
|
|
this.tableData = e.rows
|
|
this.load = false
|
|
this.total = e.total
|
|
})
|
|
},
|
|
queryModels() {
|
|
this.queryForm = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
this.getList()
|
|
},
|
|
addModels() {
|
|
this.dialogTitle1 = '新增模型'
|
|
this.form = {
|
|
templateName: '',
|
|
templateContent: {
|
|
center: null,
|
|
centerChildren: {},
|
|
pageCfg: {
|
|
bg: ''
|
|
}
|
|
}
|
|
}
|
|
this.addModelDialog = true
|
|
this.$nextTick(() => {
|
|
this.$refs.layout.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault()
|
|
if (!this.form.templateContent.center) {
|
|
this.dialogVisible = true
|
|
}
|
|
})
|
|
})
|
|
},
|
|
leftRight() {
|
|
this.$set(this.form.templateContent, 'center', 'LeftRight')
|
|
this.$set(this.form.templateContent.centerChildren, 'separate', 50)
|
|
this.dialogVisible = false
|
|
},
|
|
upDown() {
|
|
this.$set(this.form.templateContent, 'center', 'UpDown')
|
|
this.$set(this.form.templateContent.centerChildren, 'separate', 50)
|
|
this.dialogVisible = false
|
|
},
|
|
addModelOk() {
|
|
addModel({
|
|
templateName: this.form.templateName,
|
|
templateContent: JSON.stringify(this.form.templateContent)
|
|
}).then(e => {
|
|
|
|
this.$message({
|
|
message: '添加成功',
|
|
type: 'success'
|
|
});
|
|
this.getList()
|
|
this.addModelDialog = false
|
|
})
|
|
},
|
|
queryModelInfo(e) {
|
|
this.dialogTitle1 = '修改模型'
|
|
this.form = {
|
|
templateId: e.templateId,
|
|
templateName: e.templateName,
|
|
templateContent: JSON.parse(e.templateContent)
|
|
}
|
|
this.addModelDialog = true
|
|
this.$nextTick(() => {
|
|
this.$refs.layout.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault()
|
|
if (!this.form.templateContent.center) {
|
|
this.dialogVisible = true
|
|
}
|
|
})
|
|
})
|
|
},
|
|
changeModel() {
|
|
updateModel({
|
|
templateId: this.form.templateId,
|
|
templateName: this.form.templateName,
|
|
templateContent: JSON.stringify(this.form.templateContent)
|
|
}).then(e => {
|
|
this.$message({
|
|
message: '修改成功',
|
|
type: 'success'
|
|
});
|
|
this.getList()
|
|
this.addModelDialog = false
|
|
})
|
|
},
|
|
delModelOk(e) {
|
|
delModel({
|
|
templateId: e
|
|
}).then(e => {
|
|
this.$message({
|
|
message: '删除成功',
|
|
type: 'success'
|
|
});
|
|
this.getList()
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.layout {
|
|
height: 500px;
|
|
border: 1px solid #0003;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.miniLayout {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #0003;
|
|
pointer-events: none
|
|
}
|
|
|
|
/deep/ .avatar-uploader {
|
|
.el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.el-upload:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|