灵山运营端前端代码
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.
 
 
 
 
 

734 lines
24 KiB

<!-- 配置详情 -->
<template>
<div style=" position: relative;">
<div v-if="userType==='oper'"
class="div_btn">
<span style="margin-right:20px">{{customerName}}</span>
<el-button type="default"
size="mini"
@click="diaCancel">取消返回</el-button>
<el-button type="primary"
size="mini"
@click="setDomainName">设置业务域名</el-button>
</div>
<el-tabs v-model="activeName"
class="el-tabs">
<el-tab-pane label="居民端"
name="resi">
<el-table :data="resiHaveList"
border
v-loading="loading"
element-loading-text="正在加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
:row-style="{height:'30px'}"
:cell-style="{padding:'5px'}"
style="width: 100%;"
:height="tableHeight1"
ref="ref_customer_table">
<el-table-column label="排序"
type="index"
align="center"
width="50"></el-table-column>
<el-table-column label="默认名称"
header-align="center"
align="center"
width="120"
prop="customizedName">
</el-table-column>
<el-table-column label="自定义名称"
header-align="center"
align="center"
width="120"
prop="functionName">
</el-table-column>
<el-table-column label="功能说明"
header-align="center"
align="center"
prop="functionExplain">
</el-table-column>
<el-table-column label="大图标"
header-align="center"
align="center"
width="150"
prop="iconLargeImg">
<template slot-scope="scope">
<el-image v-if="scope.row.iconLargeImg"
style="width: 50px; height: 50px;text-align: center;"
:src="scope.row.iconLargeImg"
:preview-src-list="[scope.row.iconLargeImg]">
</el-image>
</template>
</el-table-column>
<el-table-column label="小图标"
header-align="center"
align="center"
width="110"
prop="iconSmallImg">
<template slot-scope="scope">
<el-image v-if="scope.row.iconSmallImg"
style="width: 40px; height: 40px;text-align: center;"
:src="scope.row.iconSmallImg"
:preview-src-list="[scope.row.iconSmallImg]">
</el-image>
</template>
</el-table-column>
<el-table-column label="上架状态"
header-align="center"
align="center"
width="100"
prop="shoppingStatusShow">
</el-table-column>
<!--操作列-->
<el-table-column label="移动"
header-align="center"
align="center"
class="operate"
width="50">
<template slot-scope="scope">
<el-button type="text"
style="width=100px;height=100px"
@click.stop="moveUpResi( scope.$index)"
icon="el-icon-top"></el-button>
</template>
</el-table-column>
<!--操作列-->
<el-table-column label="操作"
header-align="center"
align="center"
class="operate"
width="200">
<template slot-scope="scope">
<el-button v-if="scope.row.shoppingStatus==0"
size="mini"
class="btn_putaway"
type="primary"
@click.stop="upOrDown(scope.row.functionId, '1')">上架</el-button>
<el-button v-if="scope.row.shoppingStatus===1"
size="mini"
class="btn_putaway"
type="primary"
@click.stop="upOrDown(scope.row.functionId, '0')">下架</el-button>
<el-button size="mini"
type="primary"
@click.stop="editResiShow( scope.$index)">修改</el-button>
</template>
</el-table-column>
</el-table>
<el-table v-if="userType==='oper'"
:data="resiNoList"
border
v-loading="noLoading"
element-loading-text="正在加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
:row-style="{height:'30px'}"
style="width: 100%;margin-top:10px"
:height="tableHeight2"
ref="ref_customer_table">
<el-table-column label="排序"
type="index"
align="center"
width="50"></el-table-column>
<el-table-column label="默认名称"
header-align="center"
align="center"
width="150"
prop="customizedName">
</el-table-column>
<el-table-column label="功能说明"
header-align="center"
align="center"
prop="customizedName">
</el-table-column>
<!--操作列-->
<el-table-column label="操作"
header-align="center"
align="center"
class="operate"
width="200">
<template slot-scope="scope">
<el-button size="mini"
class="btn_putaway"
type="primary"
@click.stop="addFunction(scope.row)">采集</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="工作端"
name="gov">
<el-table :data="workHaveList"
border
v-loading="loading"
element-loading-text="正在加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
:row-style="{height:'30px'}"
:cell-style="{padding:'5px'}"
style="width: 100%;"
:height="tableHeight1"
ref="ref_customer_table">
<el-table-column label="排序"
type="index"
align="center"
width="50"></el-table-column>
<el-table-column label="默认名称"
header-align="center"
align="center"
width="150"
prop="customizedName">
</el-table-column>
<el-table-column label="自定义名称"
header-align="center"
align="center"
width="150"
prop="functionName">
</el-table-column>
<el-table-column label="功能说明"
header-align="center"
align="center"
prop="functionExplain">
</el-table-column>
<el-table-column label="大图标"
header-align="center"
align="center"
min-width="100"
prop="iconLargeImg">
<template slot-scope="scope">
<el-image v-if="scope.row.iconLargeImg"
style="width: 50px; height: 50px;text-align: center;"
:src="scope.row.iconLargeImg"
:preview-src-list="[scope.row.iconLargeImg]">
</el-image>
</template>
</el-table-column>
<el-table-column label="小图标"
header-align="center"
align="center"
min-width="100"
prop="iconSmallImg">
<template slot-scope="scope">
<el-image v-if="scope.row.iconSmallImg"
style="width: 40px; height: 40px;text-align: center;"
:src="scope.row.iconSmallImg"
:preview-src-list="[scope.row.iconSmallImg]">
</el-image>
</template>
</el-table-column>
<el-table-column label="上架状态"
header-align="center"
align="center"
width="100"
prop="shoppingStatusShow">
</el-table-column>
<!--操作列-->
<el-table-column label="移动"
header-align="center"
align="center"
class="operate"
width="50">
<template slot-scope="scope">
<el-button type="text"
style="width=100px;height=100px"
@click.stop="moveUpWork( scope.$index)"
icon="el-icon-top"></el-button>
</template>
</el-table-column>
<!--操作列-->
<el-table-column label="操作"
header-align="center"
align="center"
class="operate"
width="200">
<template slot-scope="scope">
<el-button v-if="scope.row.shoppingStatus==0"
size="mini"
class="btn_putaway"
type="primary"
@click.stop="upOrDown(scope.row.functionId, '1')">上架</el-button>
<el-button v-if="scope.row.shoppingStatus===1"
size="mini"
class="btn_putaway"
type="primary"
@click.stop="upOrDown(scope.row.functionId, '0')">下架</el-button>
<el-button size="mini"
type="primary"
@click.stop="editWorkShow( scope.$index)">修改</el-button>
</template>
</el-table-column>
</el-table>
<el-table v-if="userType==='oper'"
:data="workNoList"
border
v-loading="noLoading"
element-loading-text="正在加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
:row-style="{height:'30px'}"
style="width: 100%;margin-top:10px"
:height="tableHeight2"
ref="ref_customer_table">
<el-table-column label="排序"
type="index"
align="center"
width="50"></el-table-column>
<el-table-column label="默认名称"
header-align="center"
align="center"
width="150"
prop="customizedName">
</el-table-column>
<el-table-column label="功能说明"
header-align="center"
align="center"
prop="customizedName">
</el-table-column>
<!--操作列-->
<el-table-column label="操作"
header-align="center"
align="center"
class="operate"
width="200">
<template slot-scope="scope">
<el-button size="mini"
class="btn_putaway"
type="primary"
@click.stop="addFunction(scope.row)">采集</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<c-dialog :title="upOrDownDia.title"
:width="40"
:dialogHeight="0.5"
:visible="upOrDownDia.visible"
@cancel="upOrDownDiaCancel"
@ok="upOrDownDiaOk">
<div style="text-align:center;margin-top:40px">
<el-input type="textarea"
:autosize="{ minRows: 4, maxRows: 7}"
:rows="5"
resize="none"
style="width:500px"
placeholder='请输入理由'
v-model="upOrDownForm.reason">
</el-input>
</div>
</c-dialog>
<config-edit ref="ref_config_edit"
@editDiaOK="editDiaOK">
</config-edit>
</div>
</template>
<script>
import CDialog from '@c/CDialog'
import ConfigEdit from './ConfigEdit'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
let loading // 加载动画
export default {
data () {
return {
loading: false,
noLoading: false,
customerId: '', // 客户id,父组件传
customerName: '', // 客户名称,父组件传
//tab页
activeName: 'resi',
// 定制功能
resiHaveList: [],
workHaveList: [],
// 未添加的功能
resiNoList: [],
workNoList: [],
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload',
// 上架定制功能相关
upOrDownDia: {
visible: false,
title: '理由',
},
upOrDownForm: {
customerId: '',
functionId: '',
shoppingStatus: '',
reason: ''
},
optionType: '' // 1 上架 /下架 2采集
}
},
components: {
CDialog, ConfigEdit
},
mounted () {
this.initData(localStorage.getItem('customerId'), localStorage.getItem('customerName'))
},
computed: {
userType () {
return localStorage.getItem('userType')
},
tableHeight1 () {
if (this.userType === 'oper') {
return (this.clientHeight - 220) / 2 + 50
} else {
return (this.clientHeight - 220)
}
},
tableHeight2 () {
return (this.clientHeight - 220) / 2 - 60
},
...mapGetters(['clientHeight', 'resolution']),
dataRule () {
return {
customizedName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
functionIcon: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
functionGroup: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
shoppingStatus: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
functionExplain: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
initData (customerId, customerName) {
this.customerId = customerId
this.customerName = customerName
this.loadTableData()
},
// 设置业务域名
setDomainName () {
this.startLoading()
let params = {
customerId: this.customerId
}
const url = '/oper/customize/functioncustomized/customerdomainname'
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/functioncustomized/customerdomainname'
window.app.ajax.post(url, params,
(data, rspMsg) => {
this.endLoading()
this.$message.success('设置成功')
},
(rspMsg, data) => {
this.endLoading()
this.$message.error(rspMsg)
})
},
// 获取列表数据
loadTableData () {
this.loading = true
let params = {
customerId: this.customerId
}
const url = '/oper/customize/customerfunctiondetail/customerfunctionlist'
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/customerfunctionlist'
window.app.ajax.post(url, params,
(data, rspMsg) => {
this.$nextTick(() => {
this.resiHaveList = data.customerList.filter(item => item.fromApp === 'resi')
this.workHaveList = data.customerList.filter(item => item.fromApp === 'gov')
this.resiNoList = data.functionList.filter(item => item.fromApp === 'resi')
this.workNoList = data.functionList.filter(item => item.fromApp === 'gov')
this.resiHaveList.forEach(element => {
element.shoppingStatusShow = element.shoppingStatus === 0 ? element.shoppingStatusShow = '下架' : '上架'
})
this.workHaveList.forEach(element => {
element.shoppingStatusShow = element.shoppingStatus === 0 ? element.shoppingStatusShow = '下架' : '上架'
})
})
},
(rspMsg, data) => {
this.endLoading()
this.$message.error(rspMsg)
})
this.loading = false
},
// 上架/下架
upOrDown (functionId, shoppingStatus) {
this.optionType = '1'
this.upOrDownDia.title = shoppingStatus === 0 ? '下架原因' : '上架原因'
this.upOrDownForm = {
customerId: this.customerId,
functionId: functionId,
shoppingStatus: shoppingStatus,
reason: ''
}
this.upOrDownDia.visible = true
},
upOrDownDiaCancel () {
this.upOrDownDia.visible = false
},
upOrDownDiaOk () {
let url = ''
// const url = '/oper/customize/customerfunctiondetail/updateshoppingstatus'
if (this.optionType === '1') {
// url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updateshoppingstatus'
url = '/oper/customize/customerfunctiondetail/updateshoppingstatus'
} else {
// url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/customerfunctioncollect'
url = '/oper/customize/customerfunctiondetail/customerfunctioncollect'
}
this.startLoading()
window.app.ajax.post(url, this.upOrDownForm,
(data, rspMsg) => {
this.$message.success('操作成功')
this.upOrDownDia.visible = false
this.loadTableData()
},
(rspMsg, data) => {
this.$message.error(rspMsg)
})
this.endLoading()
},
// 编辑
editResiShow (index) {
this.$refs['ref_config_edit'].init(this.resiHaveList[index])
},
// 编辑
editWorkShow (index) {
this.$refs['ref_config_edit'].init(this.workHaveList[index])
},
editDiaOK () {
this.loadTableData()
},
// 采集
addFunction (row) {
this.optionType = '2'
this.upOrDownDia.title = '采集原因'
this.upOrDownForm = {
customerId: row.customerId,
functionId: row.functionId,
reason: ''
}
this.upOrDownDia.visible = true
},
// 上移
moveUpResi (index) {
if (index > 0) {
console.log(this.resiHaveList)
this.startLoading()
let resultList = []
let one = {}
for (let i = 0; i < this.resiHaveList.length; i++) {
let obj = {}
// eslint-disable-next-line
// debugger
if (i === index - 1) {
one.customerId = this.resiHaveList[i].customerId
one.functionId = this.resiHaveList[i].functionId
one.displayOrder = index
} else if (i === index) {
obj.customerId = this.resiHaveList[i].customerId
obj.functionId = this.resiHaveList[i].functionId
obj.displayOrder = index - 1
resultList.push(obj)
resultList.push(one)
} else {
obj.customerId = this.resiHaveList[i].customerId
obj.functionId = this.resiHaveList[i].functionId
obj.displayOrder = i
resultList.push(obj)
}
}
console.log(resultList)
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updatedisplayorder'
const url = '/oper/customize/customerfunctiondetail/updatedisplayorder'
window.app.ajax.post(url, resultList,
(data, rspMsg) => {
this.endLoading()
// this.$message.success('操作成功')
this.loadTableData()
},
(rspMsg, data) => {
this.endLoading()
this.$message.error(rspMsg)
})
} else {
this.$message.warning('无法上移')
return false
}
},
// 上移
moveUpWork (index) {
if (index > 0) {
console.log(this.workHaveList)
this.startLoading()
let resultList = []
let one = {}
for (let i = 0; i < this.workHaveList.length; i++) {
let obj = {}
// eslint-disable-next-line
// debugger
if (i === index - 1) {
one.customerId = this.workHaveList[i].customerId
one.functionId = this.workHaveList[i].functionId
one.displayOrder = index
} else if (i === index) {
obj.customerId = this.workHaveList[i].customerId
obj.functionId = this.workHaveList[i].functionId
obj.displayOrder = index - 1
resultList.push(obj)
resultList.push(one)
} else {
obj.customerId = this.workHaveList[i].customerId
obj.functionId = this.workHaveList[i].functionId
obj.displayOrder = i
resultList.push(obj)
}
}
console.log(resultList)
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updatedisplayorder'
const url = '/oper/customize/customerfunctiondetail/updatedisplayorder'
window.app.ajax.post(url, resultList,
(data, rspMsg) => {
this.endLoading()
// this.$message.success('操作成功')
this.loadTableData()
},
(rspMsg, data) => {
this.endLoading()
this.$message.error(rspMsg)
})
} else {
this.$message.warning('无法上移')
return false
}
},
// 取消
diaCancel () {
this.$emit('cancleBack')
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
props: {
}
}
</script>
<style scoped >
.el-tabs {
margin: 0 10px;
}
.form_item {
width: 200px;
}
.div_btn {
z-index: 10;
position: absolute;
right: 10px;
top: 5px;
/* margin: 0 0 20px 0; */
}
.btn_soldout {
background-color: rgb(255, 79, 79);
border-color: rgb(255, 79, 79);
}
.btn_putaway {
background-color: rgb(89, 161, 255);
border-color: rgb(89, 161, 255);
}
.el-icon-top {
font-weight: 600 !important;
font-size: 100px !important;
}
.el-card__body {
padding: 10px !important;
}
</style>