城阳运营端pc前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

345 lines
11 KiB

<template>
<div>
<el-card shadow="never"
class="aui-card--fill">
<div v-show="showType==='list'"
class="mod-/oper/customize__homecomponent}">
<el-form :inline="true">
<el-form-item>
<el-input v-model="ruleForm.name"
placeholder="请输入客户名称"
:clearable="true"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="submitForm(ruleForm)">查询</el-button>
</el-form-item>
</el-form>
<el-table :data="customerList"
ref="ref_customertable"
border
style="width: 100%;">
<el-table-column label="客户名称"
header-align="center"
align="center"
prop="customerName"></el-table-column>
<el-table-column label="logo"
header-align="center"
align="center"
prop="logo">
<template slot-scope="scope">
<el-image v-if="scope.row.logo"
style="width: 50px; height: 50px"
:src="scope.row.logo"
@click="addSrcList(scope.row.logo)"
:preview-src-list="srcList"></el-image>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column :label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="700">
<template slot-scope="scope">
<el-button type="text"
size="small"
@click="showMiniHome(scope.row.customerId,scope.row.customerName,0)">居民端首页</el-button>
<el-button type="text"
size="small"
@click="showMiniHome(scope.row.customerId,scope.row.customerName,1)">工作端首页</el-button>
<el-button type="text"
size="small"
@click="showConfigItem(scope.row.customerId,scope.row.customerName)">功能配置</el-button>
<el-button type="text"
size="small"
@click="showFootbar(scope.row.customerId,scope.row.customerName)">FootBar配置</el-button>
<el-button type="text"
size="small"
@click="showRoleAuth(scope.row.customerId,scope.row.customerName)">角色权限</el-button>
<el-button type="text"
size="small"
@click="showMost(scope.row.customerId,scope.row.customerName)">高级配置</el-button>
<el-button type="text"
size="small"
@click="showCategory(scope.row.customerId,scope.row.customerName)">分类配置</el-button>
<el-button type="text"
size="small"
@click="showStartPage(scope.row.customerId,scope.row.customerName,0)">启动页配置</el-button>
<el-button type="text"
size="small"
@click="showElegant(scope.row.customerId,scope.row.customerName)">党员风采分类配置</el-button>
<el-button type="text"
size="small"
@click="showMenu(scope.row.customerId,scope.row.customerName)">管理平台菜单配置</el-button>
<el-button type="text"
size="small"
@click="showDataMenu(scope.row.customerId,scope.row.customerName)">数据看板菜单配置</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination :current-page="pageNo"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"></el-pagination>
</div>
<div v-show="showType==='miniHome'">
<homepage ref="ref_mini_home"
@cancleBack="cancleBack"></homepage>
</div>
<div v-show="showType==='config'">
<config-item ref="ref_config_item"
@cancleBack="cancleBack"></config-item>
</div>
<div v-show="showType==='footbar'">
<footbar-list ref="ref_footbarlist"
:showFrom="'customize'"
:tableKeywork="'FootBarCustomize'"
@cancleBack="cancleBack"></footbar-list>
</div>
<div v-show="showType==='roleAuth'">
<role-auth ref="ref_roleAuth"
@cancleBack="cancleBack"></role-auth>
</div>
<div v-if="showType==='mostedit'">
<most-list ref="ref_mostlist"
@cancleBack="cancleBack"></most-list>
</div>
<div v-if="showType==='category'">
<category-list ref="ref_category"
@cancleBack="cancleBack"></category-list>
</div>
<div v-if="showType==='elegant'">
<elegant ref="ref_elegant"
@cancleBack="cancleBack"></elegant>
</div>
<div v-if="showType==='menuCustomer'">
<menu-customer ref="ref_menu_customer"
@cancleBack="cancleBack"></menu-customer>
</div>
<div v-if="showType==='menuDataCustomer'">
<menu-data-customer ref="ref_menu_data_customer"
@cancleBack="cancleBack"></menu-data-customer>
</div>
<!-- <el-dialog :visible.sync="funcVisible"
title="功能列表"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="90%"
top="30px">
<role-list v-if="funcVisible"
:customer-id="customerId"
:customer-name="customerName" />
</el-dialog> -->
<div v-show="showType==='startPage'">
<start-page ref="ref_startPage"
:customer-id="customerId"
:showFrom="'customize'"
:tableKeywork="'FootBarCustomize'"
@cancleBack="cancleBack"></start-page>
</div>
</el-card>
</div>
</template>
<script>
import ConfigItem from './ConfigItem'
import FootbarList from '../../productConfig/footbar/FootbarList'
// import MiniHome from './MiniHome'
import homepage from '../../productConfig/homeCustom/homepage'
import MostList from './MostList'
// import RoleList from './roleList'
import categoryList from './CategoryList'
import StartPage from './StartPage'
import RoleAuth from './RoleAuth'
import elegant from './elegant.vue'
import MenuCustomer from './menuCustomer.vue'
import MenuDataCustomer from './menuDataCustomer.vue'
export default {
data () {
return {
funcVisible: false,
diaName: '功能配置',
noImg: '暂无图片',
customerList: [],
input: '',
customerId: '',
customerName: '',
pageNo: 1,
pageSize: 10,
ruleForm: { name: '' },
total: 0,
srcList: [],
showType: 'list' // 显示的组件类型
}
},
components: {
ConfigItem,
homepage,
// MiniHome,
// RoleList,
FootbarList,
MostList,
categoryList,
StartPage,
RoleAuth,
elegant,
MenuCustomer,
MenuDataCustomer
},
activated () {
if (this.showType === 'list') {
this.$nextTick(() => {
this.$refs['ref_customertable'].doLayout() // 解决表格错位
})
}
},
mounted () {
// const userType = localStorage.getItem('userType')
// if (userType === 'work') {
// this.showMiniHome(localStorage.getItem('customerId'), localStorage.getItem('customerName'), 0)
// } else {
this.queryCustomerList()
// }
},
methods: {
queryCustomerList () {
let params = {
customerName: '',
pageNo: this.pageNo,
pageSize: this.pageSize
}
this.$http
.post('/oper/crm/customer/pagequery', params)
.then(({ data: res }) => {
if (res.code === 0) {
this.customerList = res.data.list
this.total = res.data.total
}
})
},
submitForm (formName) {
let params = {
customerName: formName.name,
pageNo: this.pageNo,
pageSize: this.pageSize
}
this.$http
.post('/oper/crm/customer/pagequery', params)
.then(({ data: res }) => {
if (res.code === 0) {
this.customerList = res.data.list
}
})
},
showMiniHome (customerId, customerName, type) {
this.showType = 'miniHome'
this.$refs['ref_mini_home'].startSetWxIndex(
customerId,
customerName,
type,
'customize'
)
},
// 功能配置
showConfigItem (customerId, customerName) {
this.showType = 'config'
this.$refs['ref_config_item'].initData(customerId, customerName)
},
// footbar配置
showFootbar (customerId, customerName) {
this.showType = 'footbar'
this.$refs['ref_footbarlist'].initData(customerId, customerName)
this.$nextTick(() => {
this.$refs['ref_footbarlist'].doLayout() // 解决表格错位
})
},
// most配置
showMost (customerId, customerName) {
this.showType = 'mostedit'
console.log('ref_mostlist', this.$refs['ref_mostlist'])
this.$nextTick(() => {
this.$refs['ref_mostlist'].initData(customerId, customerName)
})
},
// 显示分类配置
showCategory (customerId, customerName) {
this.showType = 'category'
this.$nextTick(() => {
this.$refs['ref_category'].initData(customerId, customerName)
})
},
// 党员风采
showElegant (customerId, customerName) {
this.showType = 'elegant'
this.$nextTick(() => {
this.$refs['ref_elegant'].initData(customerId, customerName)
})
},
// 平台菜单
showMenu (customerId, customerName) {
this.showType = 'menuCustomer'
this.$nextTick(() => {
this.$refs['ref_menu_customer'].initData(customerId, customerName)
})
},
// 平台菜单
showDataMenu (customerId, customerName) {
this.showType = 'menuDataCustomer'
this.$nextTick(() => {
this.$refs['ref_menu_data_customer'].initData(customerId, customerName)
})
},
// 显示权限配置
showRoleAuth (customerId, customerName) {
this.showType = 'roleAuth'
this.$refs['ref_roleAuth'].initData(customerId, customerName)
},
// 启动页配置
showStartPage (customerId, customerName) {
this.showType = 'startPage'
this.$refs['ref_startPage'].initData(customerId, customerName)
},
pageCurrentChangeHandle (val) {
this.pageNo = val
this.queryCustomerList()
},
pageSizeChangeHandle (val) {
this.pageSize = val
this.queryCustomerList()
},
addSrcList (url) {
this.srcList = []
this.srcList.push(url)
},
// 组件取消返回
cancleBack () {
this.showType = 'list'
}
}
}
</script>