刘翔宇-旅管家 4 years ago
parent 9505fd0431
commit e08cc9bb4e

@ -0,0 +1,59 @@
import request from '@/utils/request'
export function index(params,isLoading=true){
return request({
isLoading,
method:'get',
url:'/api/admin/common-service/index',
params
})
}
export function show(params){
return request({
method:'get',
url:'/api/admin/common-service/show',
params
})
}
export function store(data){
return request({
method:'post',
url:'/api/admin/common-service/store',
data
})
}
export function save(data){
return request({
method:'post',
url:'/api/admin/common-service/save',
data
})
}
export function destroy(data){
return request({
method:'post',
url:'/api/admin/common-service/destroy',
data
})
}
export function getMerchantItems(params){
return request({
method:'get',
url:'/api/admin/common-service/get-merchant-items',
params
})
}
export function getPicture(params){
return request({
method:'get',
url:'/api/admin/common-service/get-picture',
params
})
}

@ -0,0 +1,58 @@
import request from '@/utils/request'
export function index(params){
return request({
method:'get',
url:'/api/admin/common-product/index',
params
})
}
export function show(params){
return request({
method:'get',
url:'/api/admin/common-product/show',
params
})
}
export function store(data){
return request({
method:'post',
url:'/api/admin/common-product/store',
data
})
}
export function save(data){
return request({
method:'post',
url:'/api/admin/common-product/save',
data
})
}
export function destroy(data){
return request({
method:'post',
url:'/api/admin/common-product/destroy',
data
})
}
export function getPicture(params){
return request({
method:'get',
url:'/api/admin/common-product/get-picture',
params
})
}
export function getCombo(params){
return request({
method:'get',
url:'/api/admin/common-product/get-combo',
params
})
}

@ -1,90 +1,106 @@
<script>
export default {
props:{
height:{
type:Number
props: {
height: {
type: Number
},
list:{
type:Array,
default:()=> []
list: {
type: Array,
default: () => []
},
tableItem:{
type:Array,
default:()=> []
tableItem: {
type: Array,
default: () => []
},
indent:{
type:Number,
default:18
indent: {
type: Number,
default: 18
},
cellStyle:{
type:Function,
default:()=>{}
cellStyle: {
type: Function,
default: () => {
}
},
rowStyle:{
type:Function,
default:()=>{}
rowStyle: {
type: Function,
default: () => {
}
},
headerRowStyle:{
type:Function,
default:()=>{}
headerRowStyle: {
type: Function,
default: () => {
}
},
headerCellStyle:{
type:Function,
default:()=>{}
headerCellStyle: {
type: Function,
default: () => {
}
},
defaultExpandAll:{
type:Boolean,
default:true
defaultExpandAll: {
type: Boolean,
default: true
},
showIndex:{
type:Boolean,
default:true
expandRowKeys:{
type: Array,
default: ()=>[]
},
showHeader:{
type:Boolean,
default:true
rowKey:{
type:[String,Function],
default:'id'
},
showSummary:{
type:Boolean,
default:false
showHeader: {
type: Boolean,
default: true
},
summaryMethod:{
type:Function
showSummary: {
type: Boolean,
default: false
},
treeProps:{
type:Object,
default:()=> {
return { children: 'children', hasChildren: 'hasChildren' }
summaryMethod: {
type: Function
},
treeProps: {
type: Object,
default: () => {
return {children: 'children', hasChildren: 'hasChildren'}
}
},
tableStyle:{
type:Object,
default:()=>{
return { width: '100%', marginBottom: "20px"}
tableStyle: {
type: Object,
default: () => {
return {width: '100%', marginBottom: "20px"}
}
},
btnWidth:{
type:Number,
default:190
btnWidth: {
type: Number,
default: 190
},
//
isPage:{
type:Boolean,
default:true
//
isPage: {
type: Boolean,
default: true
},
total: {
type: Number,
default: 0
},
total:{
type:Number,
default:0
pageSize: {
type: Number
},
pageSize:{
type:Number
pageSizeOpts:{
type:Array,
default:()=>[10, 20, 30, 40]
},
showSizer:{
type:Boolean,
default:true
}
},
data() {
return {
tableHeight: 0,
isShowPage:true
isShowPage: true
}
},
methods: {
@ -94,63 +110,64 @@ export default {
var lxHeader_height = 96.5; //
var paginationHeight = 37; //
var topHeight = 50; //
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
that.tableHeight = tableHeight;
},
deleteClick(row){
this.$emit('delete',row)
doLayout(){
this.$refs.table.doLayout()
},
editorClick(row){
this.$emit('editor',row)
deleteClick(row) {
this.$emit('delete', row)
},
selectClick(selection, row){
this.$emit('select',selection, row)
editorClick(row) {
this.$emit('editor', row)
},
cellClick(row, column, cell){
this.$emit('cellClick',row, column, cell)
selectClick(selection, row) {
this.$emit('select', selection, row)
},
createIndexRow(){
return <el-table-column type="index" align="center" fixed="left"></el-table-column>
selectAllClick(selection){
this.$emit('select-all',selection)
},
createPage(){
if(this.isPage)
return(
<div>
<Icon
color='#fff'
class={this.isShowPage ? 'xy-table-page__close icon-recover' : 'xy-table-page__close icon-scale-left'}
type='ios-arrow-down'
size={22}
on={{['click']:()=>this.isShowPage=!this.isShowPage}}></Icon>
<transition
enter-active-class="slide-in-bottom"
leave-to-class="slide-out-down">
<Page
show-total={true}
page-size={this.pageSize}
v-show={this.isShowPage}
total={this.total}
size="small"
show-elevator={true}
show-sizer={true}
class="xy-table-page"
on={{
['on-page-size-change']:(e)=>this.$emit('pageSizeChange',e),
['on-change']:(e)=>this.$emit('pageIndexChange',e)
}}></Page>
</transition>
</div>
)
cellClick(row, column, cell) {
this.$emit('cellClick', row, column, cell)
},
toggleRowSelection(row){
this.$nextTick(()=>{
createPage() {
if (this.isPage)
return (
<div>
<transition
enter-active-class="slide-in-bottom"
leave-to-class="slide-out-down">
<Page
page-size-opts={this.pageSizeOpts}
show-total={true}
page-size={this.pageSize}
v-show={this.isShowPage}
total={this.total}
size="small"
show-elevator={true}
show-sizer={this.showSizer}
class="xy-table-page"
on={{
['on-page-size-change']: (e) => this.$emit('pageSizeChange', e),
['on-change']: (e) => this.$emit('pageIndexChange', e)
}}>
</Page>
</transition>
</div>
)
},
toggleRowSelection(row) {
this.$nextTick(() => {
this.$refs.table.toggleRowSelection(row);
})
},
clearSelection(){
clearSelection() {
this.$refs.table.clearSelection();
},
toggleAllSelection(){
toggleAllSelection() {
this.$refs.table.toggleAllSelection()
}
},
@ -160,10 +177,37 @@ export default {
mounted() {
},
render(h) {
let {createPage,summaryMethod,cellClick,btnWidth,selectClick,height,createIndexRow,tableStyle,treeProps,showSummary,showHeader,$scopedSlots,showIndex,defaultExpandAll,headerCellStyle,headerRowStyle,rowStyle,cellStyle,indent,tableHeight,tableItem,list,deleteClick,editorClick} = this
let {
createPage,
summaryMethod,
cellClick,
btnWidth,
selectClick,
selectAllClick,
height,
createIndexRow,
tableStyle,
treeProps,
showSummary,
showHeader,
$scopedSlots,
showIndex,
defaultExpandAll,
headerCellStyle,
headerRowStyle,
rowStyle,
cellStyle,
indent,
tableHeight,
tableItem,
list,
rowKey,
deleteClick,
editorClick
} = this
return (
<div class="table-tree" style={{ 'position': 'relative' }}>
{ tableItem && tableItem.length>0 ?
<div class="table-tree" style={{'position': 'relative'}}>
{tableItem && tableItem.length > 0 ?
(<el-table
ref="table"
show-summary={showSummary}
@ -178,100 +222,109 @@ export default {
height={height ?? tableHeight}
class="v-table"
style={tableStyle}
row-key="id"
border
row-key={rowKey}
border={true}
default-expand-all={defaultExpandAll}
tree-props={treeProps}
fit={true}
on={{['select']:selectClick,['cell-click']:cellClick}}>
{
//
showIndex ? createIndexRow() : ''
}
on={{
['select']: selectClick,
['cell-click']: cellClick,
['select-all']: selectAllClick}}>
{
tableItem.map((item,index)=>{
//
if(item.customFn){
return (
<el-table-column
align={item.align ?? 'center'}
sortable={item.sortable ?? true}
width={item.width ?? 'auto'}
min-width={item.minWidth ?? item.width}
header-align={item.headerAlign ?? 'center'}
label={item.label}
prop={item.prop}
scopedSlots={{
default( scope ){
return item.customFn(scope.row)
}
}}>
</el-table-column>
)
}
else if(item.multiHd){
//
return (
<el-table-column
header-align={item.headerAlign ?? 'center'}
label={item.label}>
{item.multiHd.map((item1,index1)=>{
if(item1.customFn){
return (
<el-table-column
align={item1.align ?? 'center'}
header-align={item1.headerAlign ?? 'center'}
label={item1.label}
width={item1.width ?? 'auto'}
min-width={item1.minWidth ?? item1.width}
sortable={item1.sortable ?? true}
scopedSlots={{
default( scope ){
return item1.customFn(scope.row)
}
}}>
</el-table-column>
)
}else{
return (
<el-table-column
fixed={item1.fixed ?? false}
align={item1.align ?? 'center'}
header-align={item1.headerAlign ?? 'center'}
prop={`${item.Fprop?item.Fprop+'.' : ''}${item1.prop}`}
label={item1.label}
width={item1.width ?? 'auto'}
min-width={item1.minWidth ?? item1.width}
sortable={item1.sortable ?? true}
type={item1.type ?? ''}
formatter={item1.formatter}>
</el-table-column>
)
}
})}
</el-table-column>
)
}
else{
//
return (
<el-table-column
fixed={item.fixed ?? false}
formatter={item.formatter}
width={item.width ?? 'auto'}
min-width={item.minWidth ?? item.width}
header-align={item.headerAlign ?? 'center'}
align={item.align ?? 'center'}
label={item.label}
prop={item.prop}
sortable={item.sortable ?? true}
type={item.type}
selectable={item.selectable}>
</el-table-column>
)
}
})}
tableItem.map((item, index) => {
//
if (item.customFn) {
return (
<el-table-column
fixed={item.fixed ?? false}
render-header={item.renderHeader ?? undefined}
align={item.align ?? 'center'}
sortable={item.sortable ?? false}
width={item.width ?? 'auto'}
min-width={item.minWidth ?? item.width}
header-align={item.headerAlign ?? 'center'}
label={item.label}
prop={item.prop}
scopedSlots={{
default(scope) {
return item.customFn(scope.row,scope)
}
}}>
</el-table-column>
)
} else if (item.multiHd) {
//
return (
<el-table-column
render-header={item.renderHeader ?? undefined}
header-align={item.headerAlign ?? 'center'}
label={item.label}>
{item.multiHd.map((item1, index1) => {
if (item1.customFn) {
return (
<el-table-column
render-header={item1.renderHeader ?? undefined}
align={item1.align ?? 'center'}
header-align={item1.headerAlign ?? 'center'}
label={item1.label}
width={item1.width ?? 'auto'}
min-width={item1.minWidth ?? item1.width}
sortable={item1.sortable ?? false}
scopedSlots={{
default(scope) {
return item1.customFn(scope.row)
}
}}>
</el-table-column>
)
} else {
return (
<el-table-column
render-header={item1.renderHeader ?? undefined}
fixed={item1.fixed ?? false}
align={item1.align ?? 'center'}
header-align={item1.headerAlign ?? 'center'}
prop={`${item.Fprop ? item.Fprop + '.' : ''}${item1.prop}`}
label={item1.label}
width={item1.width ?? 'auto'}
min-width={item1.minWidth ?? item1.width}
sortable={item1.sortable ?? false}
type={item1.type ?? ''}
formatter={item1.formatter}>
</el-table-column>
)
}
})}
</el-table-column>
)
} else {
//
return (
<el-table-column
render-header={item.renderHeader ?? undefined}
fixed={item.fixed ?? false}
formatter={item.formatter}
width={item.width ?? 'auto'}
min-width={item.minWidth ?? item.width}
header-align={item.headerAlign ?? 'center'}
align={item.align ?? 'center'}
label={item.label}
prop={item.prop}
sortable={item.sortable ?? false}
type={item.type}
selectable={item.selectable}
scopedSlots={item.type === 'expand' ? {
default(props){
return item.expandFn(props)
}
} : ''}>
</el-table-column>
)
}
})}
{
$scopedSlots.btns ? $scopedSlots.btns() :
@ -281,19 +334,20 @@ export default {
width={btnWidth}
header-align="center"
scopedSlots={{
default( scope ){
default(scope) {
return (
<div>
<Poptip
transfer={true}
confirm
title="确认要删除吗"
on={{['on-ok']:()=>deleteClick(scope.row)}}>
on={{['on-ok']: () => deleteClick(scope.row)}}>
<i-button
type="error"
size="small"
style="margin-left: 10px;"
ghost>删除</i-button>
ghost>删除
</i-button>
</Poptip>
<i-button
@ -301,16 +355,17 @@ export default {
size="small"
style="margin-left: 10px;"
ghost
onClick={()=>editorClick(scope.row)}>编辑</i-button>
onClick={() => editorClick(scope.row)}>编辑
</i-button>
</div>
)
}
}}>
</el-table-column>)
</el-table-column>)
}
</el-table>)
:
<el-table height={height ?? tableHeight}/> }
<el-table height={height ?? tableHeight}/>}
<el-backtop
target=".el-table__body-wrapper"
@ -318,30 +373,34 @@ export default {
bottom={100}
right={36}>
</el-backtop>
{ createPage() }
{createPage()}
</div>
)
}
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
@import "../../styles/variables.scss";
.xy-table-page{
::v-deep .el-table{
margin-bottom: 0!important;
}
.xy-table-page {
display: flex;
justify-content: right;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background: rgba(140,140,140,0.6);
background: rgba(140, 140, 140, 0.6);
z-index: 10;
padding: 6px 10px !important;
position: absolute;
bottom: 0;
position: relative;
top: 0;
left: 0;
right: 0;
&__close{
&__close {
cursor: pointer;
border-radius: 100%;
@ -351,27 +410,33 @@ export default {
bottom: 2px;
left: 8px;
&:hover{
transform: scale(1.1,1.1);
&:hover {
transform: scale(1.1, 1.1);
}
}
::v-deep .ivu-page-item,.ivu-page-options{
::v-deep .ivu-page-item, .ivu-page-options {
background: transparent !important;
}
::v-deep .ivu-page-item a{
::v-deep .ivu-page-item a {
color: #fff;
}
::v-deep .ivu-page-item-active a{
::v-deep .ivu-page-item-active a {
color: $primaryColor;
}
::v-deep .ivu-page-total{
::v-deep .ivu-page-total {
color: #fff !important;
}
::v-deep .ivu-page-options-elevator{
::v-deep .ivu-page-options-elevator {
color: #fff !important;
}
@media (max-width: 600px) {
::v-deep .ivu-page-options{
::v-deep .ivu-page-options {
display: none !important;
}
}
@ -382,6 +447,7 @@ export default {
transform-origin: 0 100%;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-bottom {
0% {
transform: scaleY(0);
@ -392,10 +458,12 @@ export default {
opacity: 1;
}
}
.slide-out-down {
transform-origin: 0 100%;
animation: slide-out-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-out-down {
0% {
transform: scaleY(1);
@ -406,27 +474,29 @@ export default {
opacity: 0;
}
}
.icon-scale-left{
.icon-scale-left {
animation: icon-scale-left 0.5s forwards ease-out;
@keyframes icon-scale-left {
from{
from {
}
to{
clip-path: polygon(0 30%,100% 30%,100% 100%,0 100%);
background: rgba(140,140,140,0.7);
transform: scale(0.8,0.8) translateX(-22px) translateY(-10px) rotate(-90deg);
to {
clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
background: rgba(140, 140, 140, 0.7);
transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px) rotate(-90deg);
}
}
}
.icon-recover{
.icon-recover {
animation: icon-recover 0.5s forwards ease-out;
@keyframes icon-recover {
from{
background: rgba(120,120,120,0.8);
transform: scale(0.8,0.8) translateX(-30px) rotate(-90deg);
from {
background: rgba(120, 120, 120, 0.8);
transform: scale(0.8, 0.8) translateX(-30px) rotate(-90deg);
}
to{
to {
}
}
}

@ -26,7 +26,7 @@ export default {
}
else if(icon.includes("iconfont")){
let _icon=icon.split("/")[1];
vnodes.push(<Icon custom={[_icon, 'iconfont','sub-el-icon']} size="18" />)
vnodes.push(<i class={[_icon, 'iconfont','sub-el-icon']} size="18" />)
}
else {
if(icon.includes("fa")){

File diff suppressed because it is too large Load Diff

@ -52,14 +52,17 @@ export default {
prop:'username',
label:'简称/用户名',
width:150,
sortable:false
sortable:false,
align:'left',
fixed:"left"
},
{
prop:'name',
label:'全名',
width: 200,
sortable:false,
align:'left'
align:'left',
fixed:"left"
},
{
prop:'business_number',

@ -0,0 +1,168 @@
<template>
<div style="padding: 0 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" :text="pageTitle" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content"></div>
<slot>
<div style="display: flex">
<Input clearable v-model="select.keywords" style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
<Button type="primary" @click="getClubs"></Button>
<Button type="primary" style="margin-left: 10px" @click="$refs['addCommonService'].type = 'add',$refs['addCommonService'].isShow = true">新增</Button>
</div>
</slot>
</lx-header>
</div>
<xy-table
:total="total"
:list="list"
:table-item="table"
@pageSizeChange="e => select.pageSize = e"
@pageIndexChange="pageChange">
<template v-slot:btns>
<el-table-column fixed="right" label="操作" :width="130" align="left" header-align="center">
<template slot-scope="scope">
<Button size="small" type="primary" @click="editorClub(scope.row)" style="margin: 0 6px 4px 0">编辑</Button>
<Poptip confirm transfer title="确认要删除吗" @on-ok="clubDelete(scope.row)">
<Button ghost size="small" type="primary" style="margin: 0 6px 4px 0">删除</Button>
</Poptip>
</template>
</el-table-column>
</template>
</xy-table>
<addCommonService ref="addCommonService" @refresh="getClubs"></addCommonService>
</div>
</template>
<script>
import {index,destroy} from '@/api/productService/commonService'
import {parseTime} from '@/utils'
import { Message } from 'element-ui'
import addCommonService from '@/views/productService/components/common/addCommonService'
export default {
components:{
addCommonService
},
data() {
return {
pageTitle:"",
select:{
page:1,
page_size:10,
keywords:'',
type:'maternity'
},
total:0,
list:[],
table:[
{
prop:'name',
label:'名称',
minWidth:220,
align:'left'
},
{
prop:'reach',
label:'是否到店',
width: 120,
customFn:(row)=>{
return (
<div style={{'color': row.reach === 1 ? 'green' : 'red'}}>{row.reach === 1 ? '已到店' : '未到店'}</div>
)
}
},
{
label:'特色标签',
width: 260,
align:'left',
prop:'featured_label',
customFn:(row) => {
return (
<div>
{
row.featured_label ?
row.featured_label?.split(',').map(item => {
return <el-tag type="border" style={{'margin':'0 6px 4px 0'}}>{item}</el-tag>
}) : <div style={{'text-align':'center'}}></div>
}
</div>
)
}
},
{
label:'排序',
width: 90,
prop:'sort_number'
},
{
label:'提交人',
prop:'admin.name',
width:180
},
{
label:'提交日期',
prop:'created_at',
width: 140,
formatter:(cell,data,value)=>{
return parseTime(new Date(value),'{y}-{m}-{d}')
}
}
],
}
},
methods: {
async getClubs(){
const res = await index(this.select)
console.log(res)
this.list = res.data
this.total = res.total
},
pageChange(e){
this.select.page = e
this.getClubs()
},
clubDelete(row){
destroy({
id:row.id
}).then(res => {
Message({
type:'success',
message:'删除成功'
})
this.getClubs()
})
},
editorClub(row){
this.$refs['addCommonService'].type = 'editor'
this.$refs['addCommonService'].id = row.id
this.$refs['addCommonService'].isShow = true
this.$refs['addCommonService'].form.type= this.select.type
},
showInfo(row){
this.$refs['addClubInfo'].id = row.id
this.$refs['addClubInfo'].isShow = true
},
showPic(row){
this.$refs['addClubPic'].id = row.id
this.$refs['addClubPic'].isShow = true
}
},
mounted() {
this.getClubs();
this.pageTitle=this.$route.meta.title;
}
}
</script>
<style scoped lang="scss">
</style>

@ -0,0 +1,8 @@
<template>
</template>
<script>
</script>
<style>
</style>

@ -0,0 +1,676 @@
<template>
<div>
<xy-dialog :width="74" ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增机构' : '编辑机构'"
:form="form" :rules="rules" @submit="submit">
<template v-slot:name>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>机构名称
</div>
<div class="xy-table-item-content">
<el-input v-model="form.name" placeholder="请输入机构名称" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:subheading>
<div class="xy-table-item">
<div class="xy-table-item-label">
副标题
</div>
<div class="xy-table-item-content">
<el-input v-model="form.subheading" placeholder="请输入副标题" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:area>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所在区域
</div>
<div class="xy-table-item-content">
<el-select v-model="form.area" placeholder="所在区域" style="width: 300px">
<el-option v-for="item in areas" :value="item.value" :key="item.value" :label="item.value">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:merchantId>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户
</div>
<div class="xy-table-item-content">
<el-select v-model="form.merchantId" placeholder="请选择所属商户" style="width: 300px">
<el-option v-for="item in merchants" :value="item.id" :key="item.id" :label="item.name"></el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:featuredLabel>
<div class="xy-table-item">
<div class="xy-table-item-label">
特色标签
</div>
<div class="xy-table-item-content">
<div class="xy-table-item-content-label">
<template v-for="(item,index) in form.featuredLabel">
<el-tag type="primary" closable @close="labelClose(index)"
style="margin-right: 6px;margin-bottom: 4px;">{{item}}</el-tag>
</template>
<div style="margin-top: 15px;">
<el-input clearable placeholder="请填写并添加特色标签" style="width: 300px" ref="labelInput" v-model="labelText">
<el-button type="primary" slot="append" icon="el-icon-plus" @click="appendLabel"></el-button>
</el-input>
</div>
</div>
</div>
</div>
</template>
<template v-slot:relLabel>
<div class="xy-table-item">
<div class="xy-table-item-label">
关联标签
</div>
<div class="xy-table-item-content">
<el-select multiple v-model="form.relLabel" placeholder="请选择关联标签" style="width: 300px">
<el-option v-for="item in labels" :value="item.id" :key="item.id" :label="item.value"></el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:reach>
<div class="xy-table-item">
<div class="xy-table-item-label">
是否到店
</div>
<div class="xy-table-item-content">
<el-switch v-model="form.reach" type="primary"></el-switch>
</div>
</div>
</template>
<template v-slot:state>
<div class="xy-table-item">
<div class="xy-table-item-label">
是否启用
</div>
<div class="xy-table-item-content">
<el-switch v-model="form.state" type="primary"></el-switch>
</div>
</div>
</template>
<template v-slot:sortNumber>
<div class="xy-table-item">
<div class="xy-table-item-label">
排序
</div>
<div class="xy-table-item-content">
<el-input-number :precision="0" :controls="false" v-model="form.sortNumber" placeholder="请输入排序" clearable
style="width: 300px;"></el-input-number>
</div>
</div>
</template>
<template v-slot:content>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容
</div>
<div class="xy-table-item-content">
<tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce>
</div>
</div>
</template>
<template v-slot:recommend>
<div class="xy-table-item">
<div class="xy-table-item-label">
是否推荐主页
</div>
<div class="xy-table-item-content">
<el-switch v-model="form.recommend" type="primary"></el-switch>
</div>
</div>
</template>
<template v-slot:videoFile>
<div class="xy-table-item">
<div class="xy-table-item-label">
宣传视频
</div>
<div class="xy-table-item-content">
<div v-if="form.videoFile" style="position: relative;">
<video :src="form.videoFile" class="avatar" />
<Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
@click="form.videoFile = ''"></Button>
</div>
<el-upload v-else :limit="1" accept="video/*" class="avatar-uploader" list-type="picture-card"
:action="action" :show-file-list="true" :on-error="uploadFailVideo" :on-success="uploadSuccessVideo"
:before-upload="uploadBeforeVideo">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
</template>
<template v-slot:coverPicture>
<div class="xy-table-item">
<div class="xy-table-item-label">
封面图
</div>
<div class="xy-table-item-content">
<div v-if="form.coverPicture" style="position: relative;">
<img :src="form.coverPicture" class="avatar">
<Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
@click="form.coverPicture = ''"></Button>
</div>
<el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
:action="action" :show-file-list="true" :on-error="uploadFailPic" :on-success="uploadSuccessPic"
:before-upload="uploadBeforePic">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
</template>
<template v-slot:address>
<div style="display: flex;flex-wrap: wrap">
<div class="xy-table-item" style="margin-bottom: 20px;">
<div class="xy-table-item-label">
地址选择
</div>
<div class="xy-table-item-content">
<avue-input-map style="width: 300px;" :params="option" placeholder="请选择地图" v-model="map"></avue-input-map>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
地址
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写地址" v-model="form.address" style="width: 300px;" />
</div>
</div>
</div>
</template>
<template v-slot:lng>
<div class="xy-table-item">
<div class="xy-table-item-label">
经度
</div>
<div class="xy-table-item-content">
<el-input readonly v-model="form.lng" placeholder="请输入经度" clearable style="width: 120px;"></el-input>
</div>
</div>
</template>
<template v-slot:lat>
<div class="xy-table-item">
<div class="xy-table-item-label">
纬度
</div>
<div class="xy-table-item-content">
<el-input readonly v-model="form.lat" placeholder="请输入纬度" clearable style="width: 120px;"></el-input>
</div>
</div>
</template>
<template v-slot:functionary>
<div class="xy-table-item">
<div class="xy-table-item-label">
负责人
</div>
<div class="xy-table-item-content">
<el-input v-model="form.functionary" placeholder="请输入负责人" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:functionaryPhone>
<div class="xy-table-item">
<div class="xy-table-item-label">
负责人电话
</div>
<div class="xy-table-item-content">
<el-input v-model="form.functionaryPhone" placeholder="请输入负责人电话" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:linkman>
<div class="xy-table-item">
<div class="xy-table-item-label">
联系人
</div>
<div class="xy-table-item-content">
<el-input v-model="form.linkman" placeholder="请输入联系人" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:linkmanPhone>
<div class="xy-table-item">
<div class="xy-table-item-label">
联系人电话
</div>
<div class="xy-table-item-content">
<el-input v-model="form.linkmanPhone" placeholder="请输入联系人电话" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:workTime>
<div class="xy-table-item">
<div class="xy-table-item-label">
工作时间
</div>
<div class="xy-table-item-content">
<el-input v-model="form.workTime" placeholder="请输入工作时间" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:online_customer_services_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
客服
</div>
<div class="xy-table-item-content">
<el-select v-model="form.online_customer_services_id" placeholder="请选择">
<el-option v-for="item in listService" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
store,
show,
save,
getMerchantItems,
getPicture
} from '@/api/productService/commonService'
import {
index as merchantIndex
} from '@/api/merchant'
import {
getparameter
} from "@/api/system/dictionary"
import {
index as serviceIndex
} from "@/api/marketing/service"
import {
Message
} from 'element-ui'
import tinymce from '@/components/Tinymce'
export default {
components: {
tinymce
},
data() {
return {
listService: [],
id: '',
isShow: false,
type: '',
merchants: [],
areas: [],
labels: [],
action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
labelText: '',
map: {
},
option: {
column: [{
label: '坐标',
prop: 'map',
type: 'map',
//
params: {
zoom: 10,
// zoomEnable: false,
// dragEnable: false,
}
}]
},
form: {
name: '',
type: "maternity",
subheading: '',
area: "",
merchantId: '',
featuredLabel: [], //
relLabel: '', //
reach: false, //,
state: true, //
sortNumber: 0,
content: '',
recommend: true,
videoFile: '',
coverPicture: '',
address: '',
lat: '', //
lng: '', //
functionary: '', //
functionaryPhone: '',
linkman: '',
linkmanPhone: '',
workTime: '',
online_customer_services_id: ""
},
rules: {
name: [{
required: true,
message: '请填写机构名称'
}],
content: [{
required: true,
message: '请填写内容'
}],
functionaryPhone: [{
pattern: /^[1][3-9][\d]{9}/,
message: '手机号格式错误'
}],
linkmanPhone: [{
pattern: /^[1][3-9][\d]{9}/,
message: '手机号格式错误'
}],
merchantId: [{
required: true,
message: '请选择所属商户'
}]
}
}
},
methods: {
loadService() {
serviceIndex({
page: 1,
page_size: 999
}).then(res => {
this.listService = res.data;
})
},
//
uploadFailVideo(err) {
console.log(err)
},
uploadSuccessVideo(response) {
console.log(response)
this.form.videoFile = response.url
},
uploadBeforeVideo(file) {
if ((file.size / 1000) > 10240) {
Message({
type: 'warning',
message: '上传视频大小超过10M'
})
return false
}
},
uploadFailPic(err) {
console.log(err)
},
uploadSuccessPic(response) {
console.log(response)
this.form.coverPicture = response.url
},
uploadBeforePic(file) {
if ((file.size / 1000) > 2048) {
Message({
type: 'warning',
message: '上传图片大小超过2M'
})
return false
}
},
//
appendLabel() {
if (!this.$refs['labelInput'].getInput().value) return
this.form.featuredLabel.push(this.$refs['labelInput'].getInput().value)
this.labelText = ''
},
//
labelClose(index) {
this.form.featuredLabel.splice(index, 1)
},
async getLabels(number) {
const res = await getparameter({
number: number
})
if (number == "label") {
this.labels = res?.detail
} else if (number == "area") {
this.areas = res?.detail
}
},
async getMerchants() {
const res = await merchantIndex({
page: 1,
pageSize: 999
})
//console.log(res)
this.merchants = res?.data
},
//show
async getDetail() {
const res = await show({
id: this.id
})
console.log(res)
this.form = {
name: res?.name,
subheading: res?.subheading,
area: res?.area,
merchantId: res?.merchant_id,
featuredLabel: res?.featured_label?.split(',') || [], //
relLabel: res?.rel_label?.split(',').map(item => Number(item)), //
reach: !!res?.reach, //,
state: !!res?.state, //
sortNumber: res?.sort_number,
content: res?.content,
recommend: !!res?.recommend,
videoFile: res?.video_file,
coverPicture: res?.cover_picture,
address: res?.address,
lat: res?.latitude, //
lng: res?.longitude, //
functionary: res?.functionary, //
functionaryPhone: res?.functionary_phone,
linkman: res?.linkman,
linkmanPhone: res?.linkman_phone,
workTime: res?.work_time,
online_customer_services_id: res?.online_customer_services_id,
type: res?.type
}
console.log(this.form)
this.$refs['tinymce'].setContent(this.form.content)
},
submit() {
if (this.type === 'add') {
console.log(this.form)
store({
name: this.form.name,
merchant_id: this.form.merchantId,
state: this.form.state ? 1 : 0,
reach: this.form.reach ? 1 : 0,
sort_number: this.form.sortNumber,
featured_label: this.form.featuredLabel?.toString(),
rel_label: this.form.relLabel?.toString(),
content: this.form.content,
subheading: this.form.subheading,
recommend: this.form.recommend,
video_file: this.form.videoFile,
cover_picture: this.form.coverPicture,
latitude: this.form.lat,
longitude: this.form.lng,
address: this.form.address,
functionary: this.form.functionary,
functionary_phone: this.form.functionaryPhone,
linkman: this.form.linkman,
linkman_phone: this.form.linkmanPhone,
work_time: this.form.workTime,
area: this.form.area,
online_customer_services_id: this.form.online_customer_services_id,
type: this.form.type,
}).then(res => {
Message({
type: 'success',
message: '新增机构商户成功'
})
this.isShow = false
this.$emit('refresh')
})
}
if (this.type === 'editor') {
save({
id: this.id,
name: this.form.name,
merchant_id: this.form.merchantId,
state: this.form.state ? 1 : 0,
reach: this.form.reach ? 1 : 0,
sort_number: this.form.sortNumber,
featured_label: this.form.featuredLabel?.toString(),
rel_label: this.form.relLabel?.toString(),
content: this.form.content,
subheading: this.form.subheading,
recommend: this.form.recommend,
video_file: this.form.videoFile,
cover_picture: this.form.coverPicture,
latitude: this.form.lat,
longitude: this.form.lng,
address: this.form.address,
functionary: this.form.functionary,
functionary_phone: this.form.functionaryPhone,
linkman: this.form.linkman,
linkman_phone: this.form.linkmanPhone,
work_time: this.form.workTime,
area: this.form.area,
online_customer_services_id: this.form.online_customer_services_id,
type: this.form.type,
}).then(res => {
Message({
type: 'success',
message: '编辑机构商户成功'
})
this.isShow = false
this.$emit('refresh')
})
}
}
},
watch: {
isShow(newVal) {
if (newVal) {
this.pictures = []
this.getMerchants()
this.getLabels("label")
this.getLabels("area")
this.loadService()
if (this.type === 'editor') {
this.getDetail()
}
} else {
this.id = ''
this.type = ''
this.labelText = ''
this.$refs['dialog'].reset()
this.$refs['tinymce'].setContent(' ')
}
this.map = {}
},
map(newVal) {
this.form.lng = newVal[0]
this.form.lat = newVal[1]
//this.form.address = newVal[2]
}
}
}
</script>
<style scoped lang="scss">
.xy-table-item {
&-label {
width: 160px;
}
&-content {
&-label {
width: 300px;
display: flex;
flex-wrap: wrap;
flex: 0;
}
}
}
::v-deep .el-input__inner {
text-align: left;
}
</style>
<style>
.avatar-uploader .el-upload {
width: 110px;
height: 110px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.avatar-uploader .el-upload:hover {
border-color: #BF617C;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 110px;
height: 110px;
line-height: 110px;
text-align: center;
}
.avatar {
width: 110px;
display: block;
border-radius: 6px;
}
.img__delete {
transform: scale(0.7, 0.7);
position: absolute;
top: 1px;
left: 4%;
}
</style>

@ -0,0 +1,8 @@
<template>
</template>
<script>
</script>
<style>
</style>

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<title>温馨提示</title>
</head>
<body>
<div style="text-align: center;margin-top: 100px;font-size:18px ;line-height: 40px;">
您的手机暂时不支持小程序的显示
<br/>请更换设备重新尝试
</div>
</body>
</html>
Loading…
Cancel
Save