16 changed files with 1845 additions and 6 deletions
-
2.env.development
-
6canvas-container/components/canvasEditPage.vue
-
1canvas-container/components/canvasShow/config/api.js
-
1canvas-container/components/leftBar/panel.vue
-
160canvas-container/components/toolBar/toolModule/interactiondiagram-select.vue
-
36canvas-container/components/toolBar/toolModule/tool-select-link.vue
-
49src/api/image.js
-
BINsrc/assets/images/point_enter.png
-
BINsrc/assets/images/point_source.png
-
191src/components/Product/product-select.vue
-
6src/utils/request.js
-
1src/views/marketing/compose/add.vue
-
1src/views/marketing/price/add.vue
-
271src/views/resource/interactiondiagram/detail copy.vue
-
936src/views/resource/interactiondiagram/detail.vue
-
190src/views/resource/interactiondiagram/index.vue
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<div class="interaction-diagram-select"> |
|||
<el-form :inline="true" :model="formData" class="demo-form-inline"> |
|||
<el-form-item label=""> |
|||
<el-input v-model="formData.keyword" maxlength="20" placeholder="互动图名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="onSubmit">{{ $t('common.query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
max-height="500" |
|||
border |
|||
row-key="interactionDiagramId" |
|||
@selection-change="handleSelectionChange" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
v-if="isMultiple" |
|||
width="40" |
|||
type="selection" |
|||
:reserve-selection="true" |
|||
fixed="left" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column label="" width="40" align="center" v-else> |
|||
<template slot-scope="scope"> |
|||
<el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="interactionDiagramName" |
|||
label="互动图名称"> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:hide-on-single-page="true" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import api from '@@/components/canvasShow/config/api' |
|||
import {sendReqMixin} from '@@/components/canvasShow/config/mixin' |
|||
import {checkEmptyChild} from '@@/config/common' |
|||
// import {getShopId} from "@@/utils/auth.js" |
|||
export default { |
|||
name: 'interactiondiagram-select', |
|||
mixins: [sendReqMixin], |
|||
data () { |
|||
return { |
|||
tableRadio: '', |
|||
formData: { |
|||
keyword: '' |
|||
}, |
|||
currentPage: 1, |
|||
total: 0, |
|||
pageSize: 10, |
|||
tableData: [], |
|||
multipleSelection: [] |
|||
} |
|||
}, |
|||
props: { |
|||
selectedRows: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
isMultiple: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getTableData() |
|||
}, |
|||
methods: { |
|||
// 获取类别 |
|||
getCategory () { |
|||
var _this = this |
|||
let params = { |
|||
url: api.getClassify, |
|||
method: 'GET' |
|||
} |
|||
this.sendReq(params, (res) => { |
|||
_this.categoryList = res.data |
|||
checkEmptyChild(_this.categoryList) |
|||
}) |
|||
}, |
|||
// 获取产品信息 |
|||
getTableData () { |
|||
var _this = this |
|||
var paramsUrl = `${api.getInteractionDiagrams}?page=${this.currentPage}&pageSize=${this.pageSize}` |
|||
if (this.formData.keyword) { |
|||
paramsUrl += `&interactionDiagramName=${this.formData.keyword}` |
|||
} |
|||
// let shopId = parseInt(getShopId()) |
|||
// if (shopId && this.typeId===3) { |
|||
// paramsUrl += `&shopId=${shopId}` |
|||
// } |
|||
let params = { |
|||
url: paramsUrl, |
|||
method: 'GET' |
|||
} |
|||
this.sendReq(params, (res) => { |
|||
_this.tableData = res.data.list |
|||
_this.total = res.data.total |
|||
// 表格斌值 |
|||
// if(_this.selectedRows.length > 0){ |
|||
// _this.selectedRows.forEach(row => { |
|||
// this.$refs.multipleTable.toggleRowSelection(row,true); |
|||
// }); |
|||
// } |
|||
}) |
|||
}, |
|||
// 搜索 |
|||
onSubmit () { |
|||
this.getTableData() |
|||
}, |
|||
// 每页条数改变 |
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.getTableData() |
|||
}, |
|||
// 当前页改变 |
|||
handleCurrentChange (val) { |
|||
this.currentPage = val |
|||
this.getTableData() |
|||
}, |
|||
// 多选改变 |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.interaction-diagram-select{ |
|||
.el-pagination{ |
|||
padding: 0px; |
|||
margin-top: 30px; |
|||
} |
|||
.el-table{ |
|||
.img{ |
|||
width: 80px; |
|||
height: 80px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,49 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
//* ******************** 互动图 *********************
|
|||
// 互动图查询
|
|||
export function interactionDiagramGetAll(params) { |
|||
console.log(params) |
|||
return request({ |
|||
url: '/cereInteractionDiagram/getAll', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
// 互动图详情
|
|||
export function interactionDiagramGetById(params) { |
|||
return request({ |
|||
url: '/cereInteractionDiagram/getById', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
// 添加互动图
|
|||
export function interactionDiagramAdd(data) { |
|||
return request({ |
|||
url: '/cereInteractionDiagram/save', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 修改互动图
|
|||
export function interactionDiagramUpdate(data) { |
|||
return request({ |
|||
url: '/cereInteractionDiagram/update', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 删除互动图
|
|||
export function interactionDiagramDelete(data) { |
|||
return request({ |
|||
url: '/cereInteractionDiagram/delete', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
After Width: 200 | Height: 200 | Size: 6.4 KiB |
After Width: 200 | Height: 200 | Size: 8.4 KiB |
@ -0,0 +1,191 @@ |
|||
<template> |
|||
<div class="product-select"> |
|||
<el-form :inline="true" :model="formData" class="demo-form-inline"> |
|||
<el-form-item label=""> |
|||
<el-input v-model="formData.search" maxlength="20" placeholder="商品名称"></el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="上架状态">--> |
|||
<!-- <el-select v-model="formData.status" :placeholder="$t('common.choose')">--> |
|||
<!-- <el-option :label="$t('common.all')" value=""></el-option>--> |
|||
<!-- <el-option label="上架" value="1"></el-option>--> |
|||
<!-- <el-option label="下架" value="0"></el-option>--> |
|||
<!-- </el-select>--> |
|||
<!-- </el-form-item>--> |
|||
<!-- <el-form-item label="商品分类"> |
|||
<el-cascader |
|||
ref="cascader" |
|||
v-model="formData.categoryId" |
|||
:options="categoryList" |
|||
:props="{ checkStrictly: true,label: 'categoryName',value: 'id',children: 'childs' }" |
|||
clearable></el-cascader> |
|||
</el-form-item> --> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="onSubmit">{{ $t('common.query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
max-height="500" |
|||
border |
|||
row-key="productId" |
|||
@selection-change="handleSelectionChange" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
v-if="isMultiple" |
|||
width="40" |
|||
type="selection" |
|||
:reserve-selection="true" |
|||
fixed="left" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column label="" width="40" align="center" v-else> |
|||
<template slot-scope="scope"> |
|||
<el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="产品主图" width="180" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-image |
|||
style="width: 80px; height: 80px" |
|||
:src="scope.row.productImage" |
|||
fit="contain"></el-image> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="productName" |
|||
label="产品名称" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="productId" |
|||
label="产品ID"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="price" |
|||
label="售价"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="originalPrice" |
|||
label="原价"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="stockNumber" |
|||
label="库存"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="volume" |
|||
label="销量"> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:hide-on-single-page="true" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getClassifyGetAll } from '@/api/commodity' |
|||
export default { |
|||
name: 'product-select', |
|||
data () { |
|||
return { |
|||
tableRadio: '', |
|||
formData: { |
|||
search: '', |
|||
shelveState: '1', |
|||
}, |
|||
currentPage: 1, |
|||
total: 0, |
|||
pageSize: 10, |
|||
tableData: [], |
|||
multipleSelection: [] |
|||
} |
|||
}, |
|||
props: { |
|||
selectedRows: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
isMultiple: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
mounted () { |
|||
// this.getCategory() |
|||
this.getTableData() |
|||
}, |
|||
methods: { |
|||
// 获取类别 |
|||
// getCategory () { |
|||
// var _this = this |
|||
// let params = { |
|||
// url: api.getClassify, |
|||
// method: 'GET' |
|||
// } |
|||
// this.sendReq(params, (res) => { |
|||
// _this.categoryList = res.data |
|||
// checkEmptyChild(_this.categoryList) |
|||
// }) |
|||
// }, |
|||
reset(){ |
|||
this.currentPage = 1 |
|||
this.pageSize = 10 |
|||
this.getTableData() |
|||
}, |
|||
// 获取产品信息 |
|||
getTableData () { |
|||
var _this = this |
|||
this.formData.page = this.currentPage |
|||
this.formData.pageSize = this.pageSize |
|||
getClassifyGetAll(this.formData).then(res => { |
|||
if (res.code === '') { |
|||
_this.tableData = res.data.list |
|||
_this.total = res.data.total |
|||
} |
|||
}) |
|||
}, |
|||
// 搜索 |
|||
onSubmit () { |
|||
this.getTableData() |
|||
}, |
|||
// 每页条数改变 |
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.getTableData() |
|||
}, |
|||
// 当前页改变 |
|||
handleCurrentChange (val) { |
|||
this.currentPage = val |
|||
this.getTableData() |
|||
}, |
|||
// 多选改变 |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.product-select{ |
|||
.el-pagination{ |
|||
padding: 0px; |
|||
margin-top: 30px; |
|||
} |
|||
.el-table{ |
|||
.img{ |
|||
width: 80px; |
|||
height: 80px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,271 @@ |
|||
<template> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<!-- |
|||
<div class="canvas"> |
|||
<div class="topBox"> |
|||
<ul> |
|||
<li v-for="(item,index) in deviceList" :key="index" @click="toggleDevice(item.id)" :class="{'on':terminal == item.id}"> |
|||
<i class="iconfont" :class="'icon-' + item.name"></i> |
|||
</li> |
|||
</ul> |
|||
<el-button class="btn-save" type="primary" @click="canvasSave">保存画布</el-button> |
|||
</div> |
|||
<div class="bottomWarp"> |
|||
<div class="leftBox"> |
|||
<left-bar></left-bar> |
|||
</div> |
|||
<div class="mainContentWarp"> |
|||
<div class="mainContent" :class="'view-' + terminal"> |
|||
<cereshop-layout :terminal="terminal" :typeId="typeId" :shopId="shopId" @showRightBox="showRightBox"></cereshop-layout> |
|||
</div> |
|||
</div> |
|||
<div class="RightBox"> |
|||
<tool-panel v-if="comChoose"></tool-panel> |
|||
<div v-else class="noChoose"> |
|||
<div> <i class="iconfont icon-kong"></i><p>没有选定的组件<br>请拖拽左侧组件栏添加或者选择一个组件</p></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div>--> |
|||
</template> |
|||
|
|||
<script> |
|||
//import leftBar from '../components/leftBar/panel.vue' |
|||
//import toolPanel from '../components/toolBar/toolPanel' |
|||
//import CereshopLayout from '../components/canvasEditPage' |
|||
//import { mapGetters, mapMutations } from 'vuex' |
|||
//import api from '@@/components/canvasShow/config/api' |
|||
//import {sendReqMixin} from '@@/components/canvasShow/config/mixin' |
|||
//import {getShopId, initShopId} from "@@/utils/auth.js" |
|||
//import Cookies from 'js-cookie' |
|||
export default { |
|||
// mixins: [sendReqMixin], |
|||
// components: { |
|||
// CereshopLayout, |
|||
// leftBar, |
|||
// toolPanel |
|||
// }, |
|||
data () { |
|||
return { |
|||
comChoose: false, |
|||
deviceList: [ |
|||
{ |
|||
id: 1, |
|||
name: 'xiaochengxu' |
|||
|
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: 'h5' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: 'pc' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: 'app' |
|||
} |
|||
], |
|||
canvasId: '', |
|||
shopId: 0 |
|||
} |
|||
} |
|||
// computed: { |
|||
// ...mapGetters([ |
|||
// 'terminal', |
|||
// 'componentsData', |
|||
// 'typeId' |
|||
// ]) |
|||
// }, |
|||
// mounted () { |
|||
// initShopId() |
|||
// this.shopId = parseInt(getShopId()) |
|||
// if(this.shopId && this.shopId > 0 ){ |
|||
// this.setTypeId(3) |
|||
// }else{ |
|||
// this.setTypeId(1) |
|||
// } |
|||
// |
|||
// this.canvasGet() |
|||
// }, |
|||
// methods: { |
|||
// ...mapMutations({ |
|||
// setTerminal: 'SET_TERMINAL', |
|||
// setTypeId: 'SET_TYPEID', |
|||
// setActiveComponent: 'SET_ACTIVECOMPONENT', |
|||
// setComponentsData: 'SET_COMPONENTSDATA' |
|||
// }), |
|||
// toggleDevice (id) { |
|||
// this.setActiveComponent({}) |
|||
// this.setTerminal(id) |
|||
// this.canvasGet() |
|||
// }, |
|||
// // 保存画布 |
|||
// canvasSave () { |
|||
// // 删除非必要的字符 |
|||
// let cloneComponentsData = JSON.parse(JSON.stringify(this.componentsData)) |
|||
// for (let i = 0; i < cloneComponentsData.length; i++) { |
|||
// delete cloneComponentsData[i].iconClass |
|||
// if (cloneComponentsData[i].type === 'productList') { |
|||
// cloneComponentsData[i].componentContent.productData.imgTextData = [] // 清除展示数据 |
|||
// } |
|||
// } |
|||
// var paramsData = { |
|||
// terminal: this.terminal, |
|||
// json: JSON.stringify(cloneComponentsData) |
|||
// } |
|||
// if (this.canvasId) { |
|||
// paramsData.canvasId = this.canvasId |
|||
// } |
|||
// if (this.shopId && this.typeId == 3) { |
|||
// paramsData.shopId = this.shopId |
|||
// } |
|||
// paramsData.type = this.typeId |
|||
// console.log(paramsData) |
|||
// let params = { |
|||
// url: api.saveCanvas, |
|||
// method: 'POST', |
|||
// data: paramsData |
|||
// } |
|||
// this.sendReq(params, (res) => { |
|||
// if (res.message) { |
|||
// this.$message.error(res.message) |
|||
// } else { |
|||
// this.$message({ |
|||
// message: '保存成功!', |
|||
// type: 'success' |
|||
// }) |
|||
// } |
|||
// }) |
|||
// }, |
|||
// // 读取画布 |
|||
// canvasGet () { |
|||
// var _this = this |
|||
// this.setComponentsData([]) |
|||
// var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + this.typeId |
|||
// if (this.shopId && this.typeId == 3) { |
|||
// apiUrl += '&shopId=' + this.shopId |
|||
// } |
|||
// let params = { |
|||
// url: apiUrl, |
|||
// method: 'GET' |
|||
// } |
|||
// this.sendReq(params, (res) => { |
|||
// if(typeof(uni) !== 'undefined'){ |
|||
// uni.setStorage({key: 'sendNum',data: 0}); |
|||
// } else { |
|||
// localStorage.setItem('sendNum', 0) |
|||
// } |
|||
// if (JSON.stringify(res.data) !== '{}') { |
|||
// _this.canvasId = res.data.canvasId |
|||
// var componentsData = JSON.parse(res.data.json) |
|||
// for (let i = 0; i < componentsData.length; i++) { |
|||
// componentsData[i].componentContent.hasDatas = true |
|||
// } |
|||
// _this.setComponentsData(componentsData) |
|||
// } else { |
|||
// _this.canvasId = '' |
|||
// } |
|||
// },(err)=>{ |
|||
// |
|||
// }) |
|||
// }, |
|||
// // 右侧工具栏显隐 |
|||
// showRightBox (flag) { |
|||
// this.comChoose = flag |
|||
// } |
|||
// } |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.canvas { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
|
|||
.topBox{ |
|||
height: 52px; |
|||
line-height: 52px; |
|||
border-bottom: 1px solid #F0F3F4; |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: center; |
|||
.btn-black{ |
|||
position: absolute; |
|||
left: 20px; |
|||
top: 0; |
|||
} |
|||
li{ |
|||
width: 56px; |
|||
height: 52px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
display: inline-block; |
|||
.iconfont{ |
|||
font-size: 24px; |
|||
} |
|||
&:hover,&.on{ |
|||
background-color: $mainColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
.btn-save{ |
|||
position: absolute; |
|||
right: 20px; |
|||
top: 5px; |
|||
} |
|||
} |
|||
.bottomWarp{ |
|||
flex: 1; |
|||
display: flex; |
|||
height: 0; |
|||
} |
|||
.leftBox { |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
} |
|||
.mainContentWarp{ |
|||
background-color: #F0F3F4; |
|||
overflow: auto; |
|||
height: 100%; |
|||
flex: 1; |
|||
.mainContent{ |
|||
margin: 0 auto; |
|||
max-width: 100%; |
|||
width: 750px; |
|||
&.view-4{ |
|||
width: 1300px; |
|||
} |
|||
} |
|||
} |
|||
.RightBox { |
|||
height: 100%; |
|||
overflow: auto; |
|||
.noChoose{ |
|||
width: 320px; |
|||
display: flex; |
|||
height: 100%; |
|||
-webkit-box-align: center; |
|||
align-items: center; |
|||
-webkit-box-pack: center; |
|||
justify-content: center; |
|||
color: #999; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
line-height: 1.8; |
|||
.iconfont{ |
|||
font-size: 100px; |
|||
color: $mainColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,936 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog :close-on-click-modal="false" :title="title" :type="type" :visible.sync="isVisible" |
|||
:modal-append-to-body="false" :center="true" width="80%" top="50px" class="dialog-wrap"> |
|||
<el-form ref="ruleForm" :model="params" class="canvas"> |
|||
|
|||
<div class="mainContentWarp"> |
|||
<div class="mainContent"> |
|||
<div class="canvasContent" ref="canvasContent" :style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }" |
|||
@dragover.prevent @mousedown="laryerMouseDown" @mousemove="laryerMouseMove" @mouseup="laryerMouseUp" |
|||
@drop="handleDrap" v-if="params.interactionDiagramImage"> |
|||
<img class="img-bg" ref="canvasBgContent" :src="params.interactionDiagramImage" /> |
|||
|
|||
<div class="drap-container-item" v-for="(point, index) in pointList" :key="index" |
|||
:style="{ top: `${canvasHeight * point.pointY}px`, left: `${canvasWidth * point.pointX}px` }" |
|||
@mousedown.stop="handleMouseDown($event, point, index)" @click="handleClick(point, index)"> |
|||
|
|||
<div :class="showPoint == point ? 'point_source_active' : 'point_source'" /> |
|||
<!-- :class="[point.pointX < 0.2 ? 'product-detail-right' : (point.pointX > 0.8 ? 'product-detail-left' : 'product-detail-centerv'), |
|||
point.pointY > 0.8 ? 'product-detail-top' : 'product-detail-bottom']" --> |
|||
<div class="product-detail" |
|||
|
|||
v-if="showPoint == point && (point.product && point.product.productName)"> |
|||
<div class="product-name">{{ (point.product && point.product.productName) ? point.product.productName : '' }}</div> |
|||
<div class="product-price">¥{{ (point.product && point.product.price) ? point.product.price : '' }}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="RightBox"> |
|||
<div slot="footer" class="btn-wrap"> |
|||
<el-button type="primary" @click="onSubmit">{{ $t('common.save') }}</el-button> |
|||
<!-- <el-button @click="isVisible = false">{{ $t('common.cancel') }}</el-button> --> |
|||
</div> |
|||
|
|||
<el-form-item label="平台类型" hidden> |
|||
<el-radio-group v-model="params.terminal"> |
|||
<el-radio :disabled="isDisabled" :label="1">小程序</el-radio> |
|||
<el-radio :disabled="isDisabled" :label="2">H5</el-radio> |
|||
<el-radio :disabled="isDisabled" :label="3">APP</el-radio> |
|||
<el-radio :disabled="isDisabled" :label="4">PC</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="互动图名称"> |
|||
<el-input v-model="params.interactionDiagramName" maxlength="20" :readonly="isDisabled" |
|||
onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item style="margin-bottom: 5px;margin-top:5px" label="互动图背景"> |
|||
</el-form-item> |
|||
<div class="span-wrap"> |
|||
<el-upload list-type="picture-card" :show-file-list="false" :on-remove="handleRemove" :headers="headers" |
|||
:data="dataObj" :multiple="false" :on-success="handleImageSuccess" :action="action" :auto-upload="true" |
|||
:before-upload="beforeUpload"> |
|||
<i v-if="!params.interactionDiagramImage" slot="trigger" class="el-icon-plus" /> |
|||
<div v-else class="attr-value-img"> |
|||
<img class="attr-thumbnail" :src="params.interactionDiagramImage"> |
|||
</div> |
|||
</el-upload> |
|||
<div v-if="params.interactionDiagramImage" class="attr-actions"> |
|||
<span class="attr-delete" @click="handleRemove()"> |
|||
<i class="el-icon-delete" /> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- <el-button type="primary" @click="onSubmit">拖动添加互动点</el-button> --> |
|||
|
|||
|
|||
<el-form-item style="margin-bottom: 5px;margin-top:5px" label="拖动添加互动点"> |
|||
</el-form-item> |
|||
|
|||
<div class="point_source" @dragstart="handleDrapEvList($event, newPoint)" @dragover.prevent draggable="true"/> |
|||
|
|||
|
|||
|
|||
<el-form-item style="margin-bottom: 5px;margin-top:5px" label="互动点信息"> |
|||
</el-form-item> |
|||
|
|||
<div class="product-list"> |
|||
<div class="list-group-item" v-for="(point, index) in pointList" :key="index"> |
|||
<div class="item-index"> |
|||
{{ (index + 1) }}. |
|||
</div> |
|||
<div class="item-right"> |
|||
<div class="item-btns"> |
|||
<div class="item-btn-item" @click="selectProduct(point, index)"> |
|||
设置商品 |
|||
</div> |
|||
<div class="item-btn-item" @click="delComponent(point, index)"> |
|||
删除 |
|||
</div> |
|||
</div> |
|||
<div class="item-product"> |
|||
{{ (point.product && point.product.productName) ? point.product.productName : '未设置商品' }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
|
|||
|
|||
|
|||
</el-dialog> |
|||
|
|||
<el-dialog title="选择商品" :visible.sync="productVisible" width="70%" top="50px"> |
|||
<product-select ref="productSelect"></product-select> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="productVisible = false">{{ $t('common.cancel') }}</el-button> |
|||
<el-button type="primary" @click="productChanged">{{ $t('common.sure') }}</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import { interactionDiagramGetById, interactionDiagramAdd, interactionDiagramUpdate } from '@/api/image' |
|||
import { uploadUrl } from '@/utils/request' |
|||
import { getToken } from '@/utils/auth' |
|||
import ProductSelect from '@/components/Product/product-select' |
|||
import draggable from 'vuedraggable' |
|||
export default { |
|||
components: { |
|||
draggable, |
|||
ProductSelect |
|||
}, |
|||
|
|||
props: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: 'add' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
params: { |
|||
interactionDiagramId: 0, |
|||
interactionDiagramName: '', |
|||
interactionDiagramImage: '', |
|||
imageWidth: 0, |
|||
imageHeight: 0,//新增的都是采购入库单 |
|||
pointData: '', |
|||
terminal: 1 |
|||
}, |
|||
newPoint: { |
|||
type: 1, |
|||
data: '', |
|||
pointX: 0, |
|||
pointY: 0, |
|||
}, |
|||
|
|||
dropPoint: {}, |
|||
showPoint: {}, |
|||
selectPoint: null, |
|||
//上次点击点位置 |
|||
lastClickPoint: {}, |
|||
|
|||
interactionDiagramId: null, |
|||
pointList: [], |
|||
|
|||
canvasWidth: 0, |
|||
canvasHeight: 0, |
|||
|
|||
productVisible : false, |
|||
|
|||
action: uploadUrl, |
|||
headers: { |
|||
'Authorization-business': getToken() |
|||
}, |
|||
dataObj: { |
|||
folderId: 1 |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
isVisible: { |
|||
get() { |
|||
return this.dialogVisible |
|||
}, |
|||
set() { |
|||
this.close() |
|||
this.reset() |
|||
} |
|||
}, |
|||
isDisabled() { |
|||
return this.type === 'check' |
|||
}, |
|||
title() { |
|||
const titleMap = { |
|||
add: '新建互动图', |
|||
check: '查看互动图', |
|||
edit: '修改互动图' |
|||
} |
|||
return titleMap[this.type] |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.getStorehouseList(); |
|||
}, |
|||
methods: { |
|||
// 获取仓库 |
|||
// async getStorehouseList() { |
|||
// const res = await storehouseGetList({}) |
|||
// this.storehouseList = res.data |
|||
// if(this.storehouseList && this.storehouseList.length > 0){ |
|||
// this.params.storehouseId = this.storehouseList[0].storehouseId |
|||
// this.params.storehouseName = this.storehouseList[0].storehouseName |
|||
// this.getProductList(); |
|||
// } |
|||
// }, |
|||
// // 获取商品 |
|||
// async getProductList() { |
|||
// const res = await getClassifyGetList({ storehouseId: this.params.storehouseId}) |
|||
// this.productList = res.data |
|||
// if(this.productList && this.productList.length > 0){ |
|||
// this.params.productId = this.productList[0].productId |
|||
// this.params.productName = this.productList[0].productName |
|||
// this.getSkuList(); |
|||
// } |
|||
// }, |
|||
// async getSkuList() { |
|||
// const res = await getClassifyGetById({ productId: this.params.productId}) |
|||
// this.skuList = res.data.skus |
|||
// if(this.skuList && this.skuList.length > 0){ |
|||
// this.params.skuId = this.skuList[0].skuId |
|||
// this.params.skuName = this.skuList[0].skuName |
|||
// if(this.skuList[0].skuAttrCodeDTOList.length > 0){ |
|||
// //多款式 |
|||
// this.isSkuVisible = 1 |
|||
// }else{ |
|||
// this.isSkuVisible = 0 |
|||
// } |
|||
// } |
|||
// }, |
|||
|
|||
// async changeStorehouseValue(){ |
|||
// this.getProductList(); |
|||
// }, |
|||
// async changeProductValue(){ |
|||
// this.getSkuList(); |
|||
// }, |
|||
handleImageSuccess(response, file, fileList) { |
|||
console.log('handleImageSuccess') |
|||
this.params.interactionDiagramImage = response.data.url |
|||
this.pointList = [] |
|||
this.params.pointData = '' |
|||
}, |
|||
handleRemove(file) { |
|||
this.params.interactionDiagramImage = '' |
|||
}, |
|||
beforeUpload(file) { |
|||
if (file) { |
|||
function getFileData(file) { |
|||
return new Promise(function (resolve, reject) { |
|||
let reader = new FileReader() |
|||
reader.readAsDataURL(file); |
|||
reader.onload = function (event) { |
|||
|
|||
resolve(reader.result) |
|||
} |
|||
}) |
|||
} |
|||
function getImage(result) { |
|||
return new Promise(function (resolve, reject) { |
|||
let img = new Image(); |
|||
img.src = result; |
|||
img.onload = function () { //注意只有onload以后才可以拿到图片信息 |
|||
resolve({ |
|||
width: img.width, |
|||
height: img.height |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
return getFileData(file).then(res => { |
|||
getImage(res).then(r => { |
|||
this.params.imageWidth = r.width |
|||
this.params.imageHeight = r.height |
|||
console.log(this.params.imageHeight, this.params.imageWidth, 'afterFileWidth') |
|||
|
|||
//控件宽高 |
|||
// const canvasContent = this.$refs.canvasContent; |
|||
// const position = canvasContent.getBoundingClientRect(); |
|||
const position = { |
|||
height: 650, |
|||
width: 900 |
|||
} |
|||
|
|||
// 图片的原始宽度 |
|||
var naturalWidth = this.params.imageWidth; |
|||
var naturalHeight = this.params.imageHeight; |
|||
|
|||
//计算图片显示宽高 |
|||
var showHeight = position.height; |
|||
var showWidth = naturalWidth * showHeight / naturalHeight; |
|||
|
|||
if (showWidth > position.width) { |
|||
showWidth = position.width; |
|||
showHeight = naturalHeight * showWidth / naturalWidth; |
|||
} |
|||
|
|||
this.canvasWidth = showWidth; |
|||
this.canvasHeight = showHeight; |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 点击画布的时候, 取消选择组件 |
|||
laryerMouseDown(ev) { |
|||
console.log("laryerMouseDown"); |
|||
// this.curControl = null; |
|||
}, |
|||
// 给画布绑定的mousemove事件 |
|||
laryerMouseMove(ev) { |
|||
console.log("laryerMouseMove"); |
|||
// 判断是需要移动的类型 |
|||
// if (this.flag == "move") { |
|||
// // 用当前移动的距离减去点击的位置 |
|||
// let dx = ev.pageX - this.containerMoveObj.x, |
|||
// dy = ev.pageY - this.containerMoveObj.y; |
|||
|
|||
// // 上次旧的位置加上 处理完的距离就得到当前位置 |
|||
// this.curControl.pointX = this.curControl.pointX + dx / this.canvasWidth, |
|||
// this.curControl.pointY = this.curControl.pointY + dy / this.canvasHeight; |
|||
|
|||
// // 记录下当前点击的位置 |
|||
// this.containerMoveObj.x = ev.pageX; |
|||
// this.containerMoveObj.y = ev.pageY; |
|||
// } |
|||
}, |
|||
// 给画布绑定的mouseup事件 |
|||
laryerMouseUp(ev) { |
|||
console.log("laryerMouseUp"); |
|||
//在鼠标抬起的时候判断是否 |
|||
// if (this.flag == "") { |
|||
// return false; |
|||
// } |
|||
// 用当前移动的距离减去点击的位置 |
|||
// let dx = ev.pageX - this.containerMoveObj.x, |
|||
// dy = ev.pageY - this.containerMoveObj.y; |
|||
|
|||
// // 上次旧的位置加上 处理完的距离就得到当前位置 |
|||
// this.curControl.pointX = this.curControl.pointX + dx / this.canvasWidth, |
|||
// this.curControl.pointY = this.curControl.pointY + dy / this.canvasHeight; |
|||
|
|||
// // 记录下当前点击的位置 |
|||
// this.containerMoveObj.x = ev.pageX; |
|||
// this.containerMoveObj.y = ev.pageY; |
|||
|
|||
// this.flag = ""; |
|||
}, |
|||
// 点击元素获取组件配置 |
|||
handleClick(row, index) { |
|||
console.log("handleClick"); |
|||
if(this.showPoint == row){ |
|||
this.showPoint = null |
|||
}else{ |
|||
this.showPoint = row |
|||
} |
|||
}, |
|||
// 移动元素 |
|||
handleMouseDown(e, row, index) { |
|||
console.log("handleMouseDown"); |
|||
e = e || window.event; |
|||
this.dropPoint = row; |
|||
// 记录下当前点击的位置 |
|||
this.lastClickPoint.pointX = e.offsetX; |
|||
this.lastClickPoint.pointY = e.offsetY; |
|||
}, |
|||
handleDrapEvList(e, pointData) { |
|||
console.log("handleDrapEvList") |
|||
this.lastClickPoint.pointX = e.offsetX; |
|||
this.lastClickPoint.pointY = e.offsetY; |
|||
}, |
|||
// 监听拖拽元素结束 |
|||
handleDrap(event) { |
|||
console.log("handleDrap") |
|||
event.preventDefault(); |
|||
event = event || window.event; |
|||
// console.log("event.offsetX:" + event.offsetX) |
|||
// console.log("event.offsetY:" + event.offsetY) |
|||
// console.log("event.pageX:" + event.pageX) |
|||
// console.log("event.pageY:" + event.pageY) |
|||
const canvasContent = this.$refs.canvasContent; |
|||
const position = canvasContent.getBoundingClientRect(); |
|||
// console.log('canvasContent') |
|||
// 获取绑定到拖拽元素身上的 drapData属性 |
|||
if (this.lastClickPoint.pointX != null) { |
|||
var showX = event.pageX - position.left - this.lastClickPoint.pointX; |
|||
var showY = event.pageY - position.top - this.lastClickPoint.pointY; |
|||
var pointX = showX / this.canvasWidth; |
|||
var pointY = showY / this.canvasHeight; |
|||
|
|||
if (this.dropPoint != null) { |
|||
this.dropPoint.pointX = pointX |
|||
this.dropPoint.pointY = pointY |
|||
this.dropPoint = null |
|||
} else { |
|||
var point = { |
|||
type: 1, |
|||
data: '', |
|||
pointX: pointX, |
|||
pointY: pointY |
|||
} |
|||
this.pointList.push(point); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
|
|||
close() { |
|||
this.$emit('close') |
|||
}, |
|||
async reset() { |
|||
this.params = { |
|||
interactionDiagramId: 0, |
|||
interactionDiagramName: '', |
|||
interactionDiagramImage: '', |
|||
imageWidth: 0, |
|||
imageHeight: 0,//新增的都是采购入库单 |
|||
pointData: '', |
|||
terminal: 1 |
|||
} |
|||
this.pointList = [] |
|||
// if(this.storehouseList && this.storehouseList.length > 0){ |
|||
// this.params.storehouseId = this.storehouseList[0].storehouseId |
|||
// this.params.storehouseName = this.storehouseList[0].storehouseName |
|||
// this.getProductList(); |
|||
// } |
|||
}, |
|||
// 查看详情 |
|||
async getDetails() { |
|||
const res = await interactionDiagramGetById({ interactionDiagramId: this.interactionDiagramId }) |
|||
if (res.code === '') { |
|||
this.params = res.data |
|||
|
|||
// //控件宽高 |
|||
// const canvasContent = this.$refs.canvasContent; |
|||
// console.log('canvasContent') |
|||
// const position = canvasContent.getBoundingClientRect(); |
|||
const position = { |
|||
height: 650, |
|||
width: 900 |
|||
} |
|||
|
|||
// 图片的原始宽度 |
|||
var naturalWidth = this.params.imageWidth; |
|||
var naturalHeight = this.params.imageHeight; |
|||
|
|||
//计算图片显示宽高 |
|||
var showHeight = position.height; |
|||
var showWidth = naturalWidth * showHeight / naturalHeight; |
|||
|
|||
if (showWidth > position.width) { |
|||
showWidth = position.width; |
|||
showHeight = naturalHeight * showWidth / naturalWidth; |
|||
} |
|||
|
|||
this.canvasWidth = showWidth; |
|||
this.canvasHeight = showHeight; |
|||
|
|||
if (this.params.pointData) { |
|||
this.pointList = JSON.parse(this.params.pointData); |
|||
} |
|||
} |
|||
}, |
|||
async onSubmit() { |
|||
if (this.params.interactionDiagramName === '') { |
|||
this.$message.error('请输入互动图名称') |
|||
} else if (this.type === 'add') { |
|||
this.params.pointData = JSON.stringify(this.pointList) |
|||
this.add() |
|||
} else if (this.type === 'edit') { |
|||
this.params.pointData = JSON.stringify(this.pointList) |
|||
this.update() |
|||
} else { |
|||
this.isVisible = false |
|||
} |
|||
}, |
|||
async add() { |
|||
const res = await interactionDiagramAdd(this.params) |
|||
if (res.code === '' || res.code === '200') { |
|||
this.isVisible = false |
|||
this.$message({ |
|||
message: this.$t('common.addsuccessful'), |
|||
type: 'success' |
|||
}) |
|||
this.$emit('success') |
|||
} |
|||
}, |
|||
async update() { |
|||
const res = await interactionDiagramUpdate(this.params) |
|||
if (res.code === '' || res.code === '200') { |
|||
this.isVisible = false |
|||
this.$message({ |
|||
message: this.$t('common.successful'), |
|||
type: 'success' |
|||
}); |
|||
this.$emit('success') |
|||
} |
|||
}, |
|||
setParams(val = {}) { |
|||
if (val['params']) { |
|||
this.params = val['params'] |
|||
this.interactionDiagramId = this.params.interactionDiagramId |
|||
this.getDetails() |
|||
} else if (val['interactionDiagramId']) { |
|||
this.interactionDiagramId = val['interactionDiagramId'] |
|||
this.getDetails() |
|||
} |
|||
}, |
|||
selectProduct(row, index){ |
|||
this.selectPoint = row |
|||
if(this.$refs.productSelect){ |
|||
this.$refs.productSelect.reset() |
|||
} |
|||
|
|||
this.productVisible = true |
|||
}, |
|||
productChanged () { |
|||
console.log(this.$refs.productSelect) |
|||
var data = this.$refs.productSelect.tableRadio |
|||
this.productVisible = false |
|||
if(this.selectPoint != null){ |
|||
this.selectPoint.product = data |
|||
this.selectPoint = null |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.el-form-item { |
|||
margin-bottom: 0px !important; |
|||
} |
|||
::v-deep .el-form-item__label{ |
|||
line-height: 30px !important; |
|||
} |
|||
.point_source_active{ |
|||
align-items: center; |
|||
background: hsla(0,0%,47%,.5); |
|||
border: 2px solid transparent; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
height: 32px; |
|||
justify-content: center; |
|||
opacity: 1; |
|||
padding: 0; |
|||
transition: border-color .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out; |
|||
width: 32px; |
|||
|
|||
&:after { |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
box-shadow: 0 1px 4px #0000008c; |
|||
content: ""; |
|||
display: block; |
|||
height: 12px; |
|||
position: relative; |
|||
transition: transform .25s ease-in-out; |
|||
width: 12px; |
|||
transform: scale(.667); |
|||
} |
|||
} |
|||
.point_source { |
|||
align-items: center; |
|||
background: hsla(0,0%,47%,.5); |
|||
border: 2px solid transparent; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
height: 32px; |
|||
justify-content: center; |
|||
opacity: 1; |
|||
padding: 0; |
|||
transition: border-color .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out; |
|||
width: 32px; |
|||
|
|||
&:after { |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
box-shadow: 0 1px 4px #0000008c; |
|||
content: ""; |
|||
display: block; |
|||
height: 12px; |
|||
position: relative; |
|||
transition: transform .25s ease-in-out; |
|||
width: 12px; |
|||
} |
|||
} |
|||
|
|||
.span-wrap { |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
.attr-actions { |
|||
line-height: 120px; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
cursor: default; |
|||
text-align: center; |
|||
color: #fff; |
|||
opacity: 0; |
|||
font-size: 20px; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
-webkit-transition: opacity 0.3s; |
|||
transition: opacity 0.3s; |
|||
z-index: 1; |
|||
|
|||
&:hover { |
|||
opacity: 1; |
|||
|
|||
.attr-preview { |
|||
display: inline-block; |
|||
} |
|||
|
|||
i { |
|||
color: #fff; |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.attr-preview { |
|||
display: none; |
|||
cursor: pointer; |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.attr-delete { |
|||
margin-left: 15px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.attr-value-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.dialog-wrap { |
|||
::v-deep .el-dialog { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 90vh; |
|||
max-width: 1400px; |
|||
overflow: hidden; |
|||
|
|||
.el-dialog__body { |
|||
flex: 1; |
|||
overflow: auto; |
|||
} |
|||
} |
|||
|
|||
.dialog-from { |
|||
width: 90%; |
|||
margin: auto; |
|||
|
|||
|
|||
} |
|||
|
|||
.btn-wrap { |
|||
margin: 0px auto 10px; |
|||
text-align: right; |
|||
} |
|||
|
|||
.canvas { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-content: flex-start; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
|
|||
.mainContentWarp { |
|||
background-color: #F0F3F4; |
|||
height: 100%; |
|||
flex: 1; |
|||
|
|||
.mainContent { |
|||
margin: 0 auto; |
|||
width: 900px; |
|||
height: 650px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-content: center; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.canvasContent { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
|
|||
.img-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
|
|||
.drap-container-item { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-o-user-select: none; |
|||
user-select: none; |
|||
position: absolute; |
|||
user-select: none; |
|||
cursor: pointer; |
|||
border: 1px solid transparent; |
|||
|
|||
.drap-item-img { |
|||
width: 40px; |
|||
height: 40px; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
.drap-item-name { |
|||
text-align: center; |
|||
} |
|||
.product-detail-top{ |
|||
position: relative; |
|||
top: -100px; |
|||
} |
|||
.product-detail-bottom{ |
|||
|
|||
} |
|||
.product-detail-left{ |
|||
position: relative; |
|||
left: -100px; |
|||
} |
|||
.product-detail-right{ |
|||
} |
|||
.product-detail-centerv{ |
|||
margin-top: -25%; |
|||
margin-bottom: 25%; |
|||
} |
|||
.product-detail-centerh{ |
|||
margin-left: -25%; |
|||
margin-right: 25%; |
|||
} |
|||
.product-detail{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-wrap: nowrap; |
|||
align-content: flex-start; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
background: white; |
|||
padding-left: 10px; |
|||
padding-right: 10px; |
|||
padding-top: 8px; |
|||
padding-bottom: 8px; |
|||
border-radius: 4px; |
|||
margin-left: -25%; |
|||
margin-right: 25%; |
|||
.product-name{ |
|||
width: 100%; |
|||
height: auto; |
|||
font-size: 16px; |
|||
font-family: Source Han Sans CN; |
|||
font-weight: bold; |
|||
color: #252744; |
|||
display: block; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
line-height: 20px; |
|||
text-align: left; |
|||
} |
|||
.product-price{ |
|||
width: auto; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
font-size: 14px; |
|||
font-family: Source Han Sans CN; |
|||
font-weight: bold; |
|||
color: #252744; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.drap-container-item-active { |
|||
border: 1px solid skyblue; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.RightBox { |
|||
background-color: #FFFFFF; |
|||
height: 100%; |
|||
overflow: auto; |
|||
margin-left: 20px; |
|||
|
|||
.noChoose { |
|||
width: 320px; |
|||
display: flex; |
|||
height: 100%; |
|||
-webkit-box-align: center; |
|||
align-items: center; |
|||
-webkit-box-pack: center; |
|||
justify-content: center; |
|||
color: #999; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
line-height: 1.8; |
|||
|
|||
.iconfont { |
|||
font-size: 100px; |
|||
color: $mainColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-item-row { |
|||
|
|||
// padding-top: 40px; |
|||
::v-deep .el-input { |
|||
width: 80px; |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.product-list { |
|||
height: 280px; |
|||
overflow-y: auto; |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
.list-group-item { |
|||
display: flex; |
|||
-webkit-box-orient: horizontal; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: row; |
|||
flex-direction: row; |
|||
-ms-flex-wrap: nowrap; |
|||
flex-wrap: nowrap; |
|||
-ms-flex-line-pack: center; |
|||
align-content: flex-start; |
|||
-webkit-box-pack: start; |
|||
-ms-flex-pack: start; |
|||
justify-content: flex-start; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: flex-start; |
|||
margin-bottom: 15px; |
|||
|
|||
.item-index { |
|||
margin-right: 8px; |
|||
margin-top: 8px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item-right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-wrap: nowrap; |
|||
align-content: center; |
|||
justify-content: flex-start; |
|||
align-items: flex-start; |
|||
|
|||
.item-btns { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-content: center; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.item-btn-item { |
|||
border-radius: 4px; |
|||
background: $mainColor; |
|||
text-align: center; |
|||
height: 36px; |
|||
color: #ffffff; |
|||
font-size: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
margin-bottom: 10px; |
|||
margin-left: 2px; |
|||
margin-right: 2px; |
|||
padding-left: 8px; |
|||
padding-right: 8px; |
|||
|
|||
|
|||
|
|||
span { |
|||
font-size: 18px; |
|||
color: #ffffff; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.item-product {} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
@ -0,0 +1,190 @@ |
|||
<!-- --> |
|||
<template> |
|||
<div> |
|||
<div class="pending"> |
|||
<!-- 搜索 --> |
|||
<div class="formSearch"> |
|||
<el-form :inline="true" :model="formParams" class="demo-form-inline"> |
|||
<el-form-item label="互动图名称"> |
|||
<el-input v-model="formParams.interactionDiagramName" placeholder="请输入互动图名称" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="success" plain @click="add">新增互动图</el-button> |
|||
<el-button type="primary" plain @click="search">{{ $t('common.query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<!-- 表格 --> |
|||
<div class="tableBox"> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
border |
|||
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|||
tooltip-effect="dark" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column label="互动图名称" width="600"> |
|||
<template slot-scope="scope">{{ scope.row.interactionDiagramName }}</template> |
|||
</el-table-column> |
|||
<el-table-column :label="$t('common.operate')" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
<div class="btnList"> |
|||
<el-button type="text" :visible="false" @click="seeMore(scope.row)">{{ $t('common.view') }}</el-button> |
|||
<el-button type="text" :visible="false" @click="edit(scope.row)">{{ $t('common.edit') }}</el-button> |
|||
<el-button type="text" @click="del(scope.row)">{{ $t('common.delete') }}</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="fenye"> |
|||
<el-pagination |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="10" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 方案组件 --> |
|||
<InteractionDiagramDetail |
|||
ref="edit" |
|||
:dialog-visible="dialog.isVisible" |
|||
:type="dialog.type" |
|||
@close="editClose" |
|||
@success="getLists" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { interactionDiagramGetAll, interactionDiagramDelete } from '@/api/image' |
|||
import InteractionDiagramDetail from './detail' |
|||
export default { |
|||
components: { |
|||
InteractionDiagramDetail |
|||
}, |
|||
data() { |
|||
// 这里存放数据 |
|||
return { |
|||
formParams: { |
|||
interactionDiagramName: '', |
|||
page: 1, |
|||
pageSize: 10 |
|||
}, |
|||
total: 1, |
|||
tableData: [], |
|||
currentPage: 1, |
|||
dialog: { |
|||
type: 'add', |
|||
isVisible: false |
|||
} |
|||
} |
|||
}, |
|||
// 监听属性 类似于data概念 |
|||
computed: {}, |
|||
// 监控data中的数据变化 |
|||
watch: {}, |
|||
// 生命周期 - 创建完成(可以访问当前this实例) |
|||
created() {}, |
|||
// 生命周期 - 挂载完成(可以访问DOM元素) |
|||
mounted() { |
|||
this.getList(this.formParams) |
|||
}, |
|||
// 方法集合 |
|||
methods: { |
|||
handleSizeChange(val) { |
|||
this.formParams.pageSize = val |
|||
this.getList(this.formParams) |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.formParams.page = val |
|||
this.getList(this.formParams) |
|||
}, |
|||
getLists() { |
|||
this.getList(this.formParams) |
|||
}, |
|||
// 查询 |
|||
search() { |
|||
this.total = 1 |
|||
this.formParams.page = 1 |
|||
this.getList(this.formParams) |
|||
}, |
|||
// 新建方案 |
|||
add() { |
|||
this.dialog = { |
|||
type: 'add', |
|||
isVisible: true |
|||
} |
|||
}, |
|||
// 查看 |
|||
seeMore(row) { |
|||
const { interactionDiagramId } = row |
|||
this.dialog = { |
|||
type: 'check', |
|||
isVisible: true |
|||
} |
|||
this.$refs.edit.setParams({ |
|||
interactionDiagramId: interactionDiagramId |
|||
}) |
|||
}, |
|||
// 编辑 |
|||
edit(row) { |
|||
const { interactionDiagramId } = row |
|||
this.dialog = { |
|||
type: 'edit', |
|||
isVisible: true |
|||
} |
|||
this.$refs.edit.setParams({ |
|||
interactionDiagramId: interactionDiagramId |
|||
}) |
|||
}, |
|||
// 关闭弹框 |
|||
editClose() { |
|||
this.dialog.isVisible = false |
|||
}, |
|||
// 删除 |
|||
del(row) { |
|||
this.$confirm('选中数据将被永久删除, 是否继续?', '提示', { |
|||
confirmButtonText: this.$t('common.sure'), |
|||
cancelButtonText: this.$t('common.cancel'), |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
interactionDiagramDelete({ interactionDiagramId: row.interactionDiagramId }).then(res => { |
|||
if (res.code === '' || res.code === '200') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: this.$t('common.deletesuccess') |
|||
}) |
|||
} |
|||
this.getList(this.formParams) |
|||
}) |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
// 初始化查询所有数据 |
|||
async getList(formParams) { |
|||
const res = await interactionDiagramGetAll(formParams) |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='scss' scoped> |
|||
//@import url(); 引入公共css类 |
|||
@import url("../../../styles/elDialog.scss"); |
|||
.pending { |
|||
padding: 30px; |
|||
background: #FFFFFF; |
|||
border-radius: 10px; |
|||
} |
|||
.fenye { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue