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.
433 lines
12 KiB
433 lines
12 KiB
5 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<el-card shadow="never"
|
||
|
|
class="aui-card--fill">
|
||
|
|
<el-tabs v-model="activeName"
|
||
|
|
@tab-click="tabClick"
|
||
|
|
class="el-tabs">
|
||
|
|
<el-tab-pane label="居民端"
|
||
|
|
name="mine">
|
||
|
|
|
||
|
|
<c-table column-type="index"
|
||
|
|
ref="table_resi"
|
||
|
|
:url="tableUrl"
|
||
|
|
:params="tableParamsResi"
|
||
|
|
:operationWidth="80"
|
||
|
|
:keyword="tableKeywork"
|
||
|
|
:operations="operations"
|
||
|
|
:orderOperations="orderOperations"
|
||
|
|
:tableHeight="tableHeight"
|
||
|
|
@editShow="editShow"
|
||
|
|
@changeState="changeState"
|
||
|
|
@moveUp="moveUp"
|
||
|
|
@del="del">
|
||
|
|
</c-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="工作端"
|
||
|
|
name="public">
|
||
|
|
<c-table column-type="index"
|
||
|
|
ref="table_work"
|
||
|
|
:url="tableUrl"
|
||
|
|
:params="tableParamsWork"
|
||
|
|
:operationWidth="80"
|
||
|
|
:keyword="tableKeywork"
|
||
|
|
:operations="operations"
|
||
|
|
:orderOperations="orderOperations"
|
||
|
|
:tableHeight="tableHeight"
|
||
|
|
@editShow="editShow"
|
||
|
|
@changeState="changeState"
|
||
|
|
@moveUp="moveUp"
|
||
|
|
@del="del">
|
||
|
|
</c-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</el-card>
|
||
|
|
<edit ref="ref_edit"
|
||
|
|
@editDiaOK="editDiaOK">
|
||
|
|
|
||
|
|
</edit>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import CDialog from '@c/CDialog'
|
||
|
|
import CTable from '@c/CTableNoPage'
|
||
|
|
import Edit from './TempEdit'
|
||
|
|
|
||
|
|
import { mapGetters } from 'vuex'
|
||
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
||
|
|
|
||
|
|
let loading// 加载动画
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
activeName: 'resi',
|
||
|
|
customerId: '', // 客户id，父组件传
|
||
|
|
customerName: '', // 客户名称，父组件传
|
||
|
|
// 查询相关
|
||
|
|
tableParamsWork: {
|
||
|
|
appType: 'gov',
|
||
|
|
customerId: 'default'
|
||
|
|
},
|
||
|
|
tableParamsResi: {
|
||
|
|
appType: 'resi',
|
||
|
|
customerId: 'default'
|
||
|
|
},
|
||
|
|
tableData: [],
|
||
|
|
// 列表相关
|
||
|
|
// tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/customerfootbars',
|
||
|
|
tableUrl: '/oper/customize/customerfootbar/customerfootbars4oper',
|
||
|
|
|
||
|
|
operations: [
|
||
|
|
{
|
||
|
|
lable: (display) => {
|
||
|
|
|
||
|
|
if (display === true) {
|
||
|
|
return '隐藏'
|
||
|
|
} else {
|
||
|
|
return '显示'
|
||
|
|
}
|
||
|
|
}, // 按钮显示名称
|
||
|
|
key: 'display',
|
||
|
|
size: 'mini',
|
||
|
|
style: 'margin: 0 6px;',
|
||
|
|
type: 'text',
|
||
|
|
slot: '',
|
||
|
|
plain: false,
|
||
|
|
methodName: 'changeState', // 回调方法名称
|
||
|
|
isShow: (row) => {
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lable: '修改', // 按钮显示名称
|
||
|
|
size: 'mini',
|
||
|
|
style: 'margin: 0 6px;',
|
||
|
|
type: 'text',
|
||
|
|
slot: '',
|
||
|
|
plain: false,
|
||
|
|
methodName: 'editShow', // 回调方法名称
|
||
|
|
isShow: (row) => {
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lable: '删除', // 按钮显示名称
|
||
|
|
size: 'mini',
|
||
|
|
style: 'margin: 0 6px;',
|
||
|
|
type: 'text',
|
||
|
|
slot: '',
|
||
|
|
plain: false,
|
||
|
|
methodName: 'del', // 回调方法名称
|
||
|
|
isShow: (row) => {
|
||
|
|
if (this.env === 'prod' || this.showFrom === 'customize') {
|
||
|
|
return false
|
||
|
|
} else {
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
orderOperations: [
|
||
|
|
// <el-button type="text"
|
||
|
|
// style="width=100px;height=100px"
|
||
|
|
// @click.stop="moveUpResi( scope.$index)"
|
||
|
|
// icon="el-icon-top"></el-button>
|
||
|
|
{
|
||
|
|
style: 'width=100px;height=100px',
|
||
|
|
type: 'text',
|
||
|
|
icon: "el-icon-top",
|
||
|
|
methodName: 'moveUp', // 回调方法名称
|
||
|
|
isShow: (row) => {
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
// 查询栏下拉框数据
|
||
|
|
form: {
|
||
|
|
dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
|
||
|
|
data: { // 全部下拉框数据
|
||
|
|
fromApp: [
|
||
|
|
{
|
||
|
|
value: 'resi',
|
||
|
|
label: '居民端'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'gov',
|
||
|
|
label: '工作端'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
CDialog, CTable, Edit
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted () {
|
||
|
|
this.activeName = 'resi'
|
||
|
|
if (this.showFrom === 'default') {//默认配置
|
||
|
|
this.tableParamsWork.customerId = 'default'
|
||
|
|
this.tableParamsResi.customerId = 'default'
|
||
|
|
this.loadResiTableData()
|
||
|
|
} else if (this.showFrom === 'customize') {//自定义配置
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
tableHeight () {
|
||
|
|
return this.clientHeight - 60 - 80 - 80
|
||
|
|
},
|
||
|
|
...mapGetters(['clientHeight', 'env'])
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
doLayout () {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
if (this.activeName === 'gov') {
|
||
|
|
this.$refs['table_work'].doLayout() // 解决表格错位
|
||
|
|
} else if (this.activeName === 'resi') {
|
||
|
|
this.$refs['table_resi'].doLayout() // 解决表格错位
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
initData (customerId, customerName) {
|
||
|
|
this.customerId = customerId
|
||
|
|
this.customerName = customerName
|
||
|
|
this.tableParamsWork.customerId = customerId
|
||
|
|
this.tableParamsResi.customerId = customerId
|
||
|
|
this.loadResiTableData()
|
||
|
|
},
|
||
|
|
// 刷新
|
||
|
|
refresh () {
|
||
|
|
if (this.activeName === 'gov') {
|
||
|
|
this.loadWorkTableData() // 获取表格数据
|
||
|
|
} else if (this.activeName === 'resi') {
|
||
|
|
this.loadResiTableData() // 获取表格数据
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tabClick (tab) {
|
||
|
|
if (tab.name === 'gov') {
|
||
|
|
this.loadWorkTableData() // 获取表格数据
|
||
|
|
}
|
||
|
|
if (tab.name === 'resi') {
|
||
|
|
this.loadResiTableData() // 获取表格数据
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 加载列表数据
|
||
|
|
loadWorkTableData () {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs['table_work'].loadData() // 获取表格数据
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 加载列表数据
|
||
|
|
loadResiTableData () {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs['table_resi'].loadData() // 获取表格数据
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 新增
|
||
|
|
addShow () {
|
||
|
|
this.$refs['ref_edit'].init('', 'A', this.activeName, this.showFrom)
|
||
|
|
},
|
||
|
|
// 编辑
|
||
|
|
editShow (row) {
|
||
|
|
this.$refs['ref_edit'].init(row.id, 'U', this.activeName, this.showFrom)
|
||
|
|
},
|
||
|
|
// 改变状态
|
||
|
|
changeState (row, index) {
|
||
|
|
let display = row.display ? 0 : 1
|
||
|
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/updatedisplaystatus'
|
||
|
|
const url = '/oper/customize/customerfootbar/updatedisplaystatus'
|
||
|
|
const param = {
|
||
|
|
id: row.id,
|
||
|
|
display: display
|
||
|
|
}
|
||
|
|
window.app.ajax.post(url, param,
|
||
|
|
(data, rspMsg) => {
|
||
|
|
this.$message.success('操作成功' + rspMsg)
|
||
|
|
this.refresh()
|
||
|
|
},
|
||
|
|
(rspMsg, data) => {
|
||
|
|
this.$message.error(rspMsg)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 上移
|
||
|
|
moveUp (row, index) {
|
||
|
|
|
||
|
|
if (index > 0) {
|
||
|
|
if (this.activeName == 'resi') {
|
||
|
|
this.tableData = this.$refs['table_resi'].getTableData() // 获取表格数据
|
||
|
|
} else {
|
||
|
|
this.tableData = this.$refs['table_work'].getTableData() // 获取表格数据
|
||
|
|
}
|
||
|
|
console.log(this.tableData)
|
||
|
|
this.startLoading()
|
||
|
|
let resultList = []
|
||
|
|
let one = {}
|
||
|
|
for (let i = 0; i < this.tableData.length; i++) {
|
||
|
|
let obj = {}
|
||
|
|
// eslint-disable-next-line
|
||
|
|
|
||
|
|
if (i === index - 1) {
|
||
|
|
one.id = this.tableData[i].id
|
||
|
|
one.orderIndex = index
|
||
|
|
} else if (i === index) {
|
||
|
|
obj.id = this.tableData[i].id
|
||
|
|
obj.orderIndex = index - 1
|
||
|
|
resultList.push(obj)
|
||
|
|
resultList.push(one)
|
||
|
|
} else {
|
||
|
|
obj.id = this.tableData[i].id
|
||
|
|
obj.orderIndex = i
|
||
|
|
resultList.push(obj)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(resultList)
|
||
|
|
let params = {
|
||
|
|
orderList: resultList
|
||
|
|
}
|
||
|
|
|
||
|
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/saveorder'
|
||
|
|
const url = '/oper/customize/customerfootbar/saveorder'
|
||
|
|
window.app.ajax.post(url, params,
|
||
|
|
(data, rspMsg) => {
|
||
|
|
this.endLoading()
|
||
|
|
if (this.activeName == 'resi') {
|
||
|
|
this.loadResiTableData()
|
||
|
|
} else {
|
||
|
|
this.loadWorkTableData()
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
(rspMsg, data) => {
|
||
|
|
this.endLoading()
|
||
|
|
this.$message.error(rspMsg)
|
||
|
|
})
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.$message.warning('无法上移')
|
||
|
|
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
initDefault (row) {
|
||
|
|
this.$confirm('确认初始化客户Footbar', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/initdefault4customer'
|
||
|
|
const url = '/oper/customize/customerfootbar/initdefault4customer'
|
||
|
|
const param = {
|
||
|
|
customerId: this.customerId,
|
||
|
|
appType: this.activeName
|
||
|
|
}
|
||
|
|
window.app.ajax.post(url, param,
|
||
|
|
(data, rspMsg) => {
|
||
|
|
this.$message.success('初始化成功' + rspMsg)
|
||
|
|
this.refresh()
|
||
|
|
},
|
||
|
|
(rspMsg, data) => {
|
||
|
|
this.$message.error(rspMsg)
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除
|
||
|
|
del (row) {
|
||
|
|
this.$confirm('确认删除当前导航', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/deletefootbar'
|
||
|
|
const url = '/oper/customize/customerfootbar/deletefootbar'
|
||
|
|
const param = {
|
||
|
|
id: row.id
|
||
|
|
}
|
||
|
|
window.app.ajax.post(url, param,
|
||
|
|
(data, rspMsg) => {
|
||
|
|
this.$message.success('删除成功' + rspMsg)
|
||
|
|
this.refresh()
|
||
|
|
},
|
||
|
|
(rspMsg, data) => {
|
||
|
|
this.$message.error(rspMsg)
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 取消
|
||
|
|
diaCancel () {
|
||
|
|
this.$emit('cancleBack')
|
||
|
|
},
|
||
|
|
editDiaOK () {
|
||
|
|
this.refresh()
|
||
|
|
},
|
||
|
|
editDiaCancel () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
async renderSelData () { // 渲染下拉框/单选框/复选框等数据
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
// 开启加载动画
|
||
|
|
startLoading () {
|
||
|
|
loading = Loading.service({
|
||
|
|
lock: true, // 是否锁定
|
||
|
|
text: '正在加载……', // 加载中需要显示的文字
|
||
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 结束加载动画
|
||
|
|
endLoading () {
|
||
|
|
// clearTimeout(timer);
|
||
|
|
if (loading) {
|
||
|
|
loading.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
showFrom: {
|
||
|
|
type: String,
|
||
|
|
default: 'default'
|
||
|
|
},
|
||
|
|
//table的关键字
|
||
|
|
tableKeywork: {
|
||
|
|
type: String,
|
||
|
|
default: 'FootBar'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.div_btn_default {
|
||
|
|
z-index: 10;
|
||
|
|
position: absolute;
|
||
|
|
right: 40px;
|
||
|
|
top: 35px;
|
||
|
|
/* margin: 0 0 20px 0; */
|
||
|
|
}
|
||
|
|
.div_btn_customize {
|
||
|
|
z-index: 10;
|
||
|
|
position: absolute;
|
||
|
|
right: 40px;
|
||
|
|
top: 35px;
|
||
|
|
/* margin: 0 0 20px 0; */
|
||
|
|
}
|
||
|
|
</style>
|