<template>
|
<main>
|
<div class="mainContent">
|
<!-- 数据展示 -->
|
<el-table ref="multipleTable"
|
:header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }"
|
:data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
|
<el-table-column type="selection" min-width="5">
|
</el-table-column>
|
<el-table-column prop="storeNumber" label="店铺编号" min-width="10">
|
</el-table-column>
|
<el-table-column prop="storeName" label="店铺名称" min-width="10">
|
</el-table-column>
|
<el-table-column prop="storeOwner" label="店铺联系人" min-width="10">
|
</el-table-column>
|
<el-table-column prop="storePhone" label="店铺联系电话" min-width="10">
|
</el-table-column>
|
<el-table-column prop="storeAddress" label="店铺详细地址" min-width="10">
|
</el-table-column>
|
<el-table-column prop="storeMoni" label="关联摄像机" min-width="10">
|
</el-table-column>
|
<el-table-column prop="operation" label="操作" min-width="20">
|
<template slot-scope="scope">
|
<div class="operation">
|
<el-link icon="el-icon-edit" :underline="false" @click="hadnleView(scope.row,0)">编辑</el-link>
|
<el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>
|
<el-link class="leftPx" icon="el-icon-edit" :underline="false">推送信息</el-link>
|
<el-link class="leftPx" icon="el-icon-edit" :underline="false" @click="hadnleView(scope.row,1)">查看</el-link>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 查看修改页面 -->
|
<el-dialog :visible.sync="dialogUpdate" width="45%" v-if="dialogUpdate"
|
:title="updateFlag ? '修改店铺信息' : '查看店铺信息'" :before-close="handleClose">
|
<updateUser :updateFlag="updateFlag" :userInfo=userInfo @handleUpdateData="handleUpdateData" />
|
</el-dialog>
|
<!-- 分页 -->
|
<div class="pagination">
|
<el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
|
:page-size="pageSize" @current-change="changeCurrentPage">
|
</el-pagination>
|
</div>
|
</div>
|
</main>
|
</template>
|
<script>
|
import helper from '@/utils/mydate'
|
import updateUser from '../updateUser';
|
export default {
|
components: {
|
updateUser
|
},
|
data() {
|
return {
|
tableData: [
|
{
|
id: 1,
|
storeNumber: '1002220212',
|
storeName: '店铺1',
|
storeOwner: '张三',
|
storePhone: '17844631885',
|
storeAddress: '甜心街12号',
|
storeMoni: '摄像头1'
|
},
|
{
|
id: 2,
|
storeNumber: '1002220213',
|
storeName: '店铺2',
|
storeOwner: '张三',
|
storePhone: '17844631885',
|
storeAddress: '甜心街13号',
|
storeMoni: '摄像头1'
|
},
|
{
|
id: 3,
|
storeNumber: '1002220214',
|
storeName: '店铺3',
|
storeOwner: '张三',
|
storePhone: '17844631885',
|
storeAddress: '甜心街14号',
|
storeMoni: '摄像头1'
|
},
|
{
|
id: 4,
|
storeNumber: '1002220215',
|
storeName: '店铺4',
|
storeOwner: '张三',
|
storePhone: '17844631885',
|
storeAddress: '甜心街15号',
|
storeMoni: '摄像头1'
|
},
|
{
|
id: 5,
|
storeNumber: '1002220216',
|
storeName: '店铺5',
|
storeOwner: '张三',
|
storePhone: '17844631885',
|
storeAddress: '甜心街16号',
|
storeMoni: '摄像头1'
|
},
|
],
|
search: "111",
|
dialogUpdate: false,
|
updateFlag: false,
|
userInfo: '',
|
totalNum: 0,
|
pageSize: 10,
|
currentPage: 1,
|
renderFlag: false,
|
}
|
},
|
created() {
|
},
|
methods: {
|
// 删除数据
|
handleDelete(id){
|
const {tableData} = this
|
let idx
|
for(let key in tableData){
|
tableData[key].id === id ? idx = key :''
|
}
|
this.tableData.splice(idx,1)
|
},
|
// 打开弹窗
|
hadnleView(data,index){
|
index === 0 ? this.updateFlag = true : this.updateFlag = false
|
this.userInfo = data
|
this.dialogUpdate = true
|
},
|
// 自定义关闭弹窗
|
handleClose(done){
|
if(this.updateFlag){
|
this.$confirm('确认关闭?')
|
.then(_=>{
|
done()
|
})
|
}else{
|
done()
|
}
|
},
|
// 更新数据
|
handleUpdateData(obj){
|
const {tableData} = this
|
let index = -1
|
for(let item in tableData){
|
if(tableData[item].id===obj.id){
|
index = item
|
}
|
}
|
this.tableData.splice(index,1,obj)
|
this.dialogUpdate = false
|
},
|
// 当前页改变触发事件
|
changeCurrentPage(page) {
|
this.currentPage = page;
|
},
|
// 设置表格斑马纹
|
tableRowClassName({ row, rowIndex }) {
|
if ((rowIndex + 1) % 2 == 0) {
|
return 'warning-row';
|
} else {
|
return 'success-row';
|
}
|
return '';
|
},
|
},
|
props: ['refresh', 'keyword', 'resetFresh'],
|
watch: {
|
refresh: {
|
handler(newValue, oldValue) {
|
if (newValue == true) {
|
this.search = '';
|
if (this.keyword != '') {
|
this.search = this.keyword;
|
}
|
this.$emit('resetFresh', { flag: false })
|
}
|
},
|
immediate: true
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
main {
|
background-color: #09152f;
|
margin-top: 20px;
|
padding-bottom: 50px;
|
border: 1pox solid #fff;
|
|
.mainTitle {
|
line-height: 60px;
|
}
|
|
.el-link {
|
color: #4b9bb7;
|
}
|
|
.leftPx {
|
margin-left: 10px;
|
}
|
|
.pagination {
|
margin-top: 50px;
|
display: flex;
|
line-height: 50px;
|
justify-content: center;
|
|
.el-pagination {
|
|
&::v-deep li,
|
&::v-deep .btn-prev,
|
&::v-deep .btn-next {
|
background-color: #071f39;
|
color: #4b9bb7;
|
}
|
}
|
}
|
|
.el-table {
|
color: #4b9bb7;
|
font-size: 10px;
|
|
&::v-deep .el-table__empty-block {
|
background-color: #09152f;
|
color: #4b9bb7;
|
}
|
|
.operation {
|
display: flex;
|
|
.el-button {
|
// background-color: #fff;
|
border: none;
|
}
|
|
span:hover {
|
cursor: pointer;
|
}
|
}
|
}
|
|
.el-table::v-deep .warning-row {
|
background: #06122c;
|
}
|
|
.el-table::v-deep .success-row {
|
background: #071f39;
|
}
|
|
&::v-deep .switchStyle .el-switch__label {
|
position: absolute;
|
display: none;
|
color: #fff;
|
}
|
|
&::v-deep .el-switch__core {
|
background-color: rgba(166, 166, 166, 1);
|
}
|
|
&::v-deep .switchStyle .el-switch__label--left {
|
z-index: 9;
|
left: 20px;
|
}
|
|
&::v-deep .switchStyle .el-switch__label--right {
|
z-index: 9;
|
left: 4px;
|
}
|
|
&::v-deep .switchStyle .el-switch__label.is-active {
|
display: block;
|
}
|
|
&::v-deep .switchStyle.el-switch .el-switch__core,
|
&::v-deep .el-switch .el-switch__label {
|
width: 50px !important;
|
}
|
}
|
</style>
|
