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.
304 lines
9.1 KiB
304 lines
9.1 KiB
<template>
|
|
<div class="app-container full-height">
|
|
<!-- 查询条件 -->
|
|
<el-card class="filter-container" shadow="never">
|
|
<el-form label-width="110px" :inline="true" :model="condition" @submit.native.prevent
|
|
@keyup.enter.native="conditionQuery"
|
|
>
|
|
<!--查询条件-->
|
|
<el-form-item label="openid" prop="openid">
|
|
<el-input v-model="condition.openid" placeholder="openid" clearable/>
|
|
</el-form-item>
|
|
<el-form-item label="unionid" prop="unionid">
|
|
<el-input v-model="condition.unionid" placeholder="unionid" clearable/>
|
|
</el-form-item>
|
|
<!-- End 查询条件 -->
|
|
<el-form-item>
|
|
<el-button type="primary" @click="conditionQuery">查询</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="handleResetCondition">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<!-- 表格操作 -->
|
|
<el-card class="table-operate-container" shadow="never">
|
|
<!-- <el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addRow">添加</el-button>-->
|
|
<!-- <el-button :disabled="!hasSelection" type="danger" size="mini" @click="removeBatchRows">批量删除-->
|
|
<!-- </el-button>-->
|
|
<el-button type="danger" size="mini" @click="initUserList">
|
|
初始化
|
|
</el-button>
|
|
</el-card>
|
|
|
|
<!-- 表格 -->
|
|
<div ref="tableContainer" class="table-container">
|
|
<!-- 表格主体 -->
|
|
<el-table ref="listTable" v-loading="selectLoading" :max-height="tableMaxHeight" :data="tableData" border
|
|
style="width: 100%" @row-click="handleRowClick" @selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="40" align="center"/>
|
|
<el-table-column type="index" label="序号" width="60" align="center"/>
|
|
<el-table-column property="openid" label="openid" min-width="25%" align="center"/>
|
|
<el-table-column property="unionid" label="unionid" min-width="25%" align="center"/>
|
|
<el-table-column property="subscribe_scene" label="订阅来源" width="120" align="center"/>
|
|
<el-table-column property="updated_time" label="更新时间" width="200" align="center"/>
|
|
<el-table-column property="created_time" label="创建时间" width="200" align="center"/>
|
|
<el-table-column label="操作" width="210" align="center">
|
|
<template slot-scope="scope">
|
|
<!-- <el-button size="mini" @click.stop="handleEdit(scope.row)">编辑</el-button>-->
|
|
<el-button size="mini" @click.stop="refreshPull(scope.row)">重新拉取</el-button>
|
|
<!-- <el-button type="danger" plain size="mini" @click.stop="handleRemove(scope.row)">删除</el-button>-->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- End 表格主体 -->
|
|
|
|
<!-- 表格页码控件 -->
|
|
<div class="pagination-container">
|
|
<el-pagination background layout="total, sizes, prev, pager, next,jumper"
|
|
:current-page.sync="condition.pageNumber" :page-size.sync="condition.pageSize"
|
|
:page-sizes="[10, 20, 30, 50, 100]" :total="total" @size-change="conditionQuery"
|
|
@current-change="conditionQuery"
|
|
/>
|
|
</div>
|
|
<!-- End 表格页码控件 -->
|
|
</div>
|
|
<!-- End 表格 -->
|
|
|
|
<!-- <!– 编辑弹窗 –>-->
|
|
<!-- <edit-dialog v-if="showDialog" :row="editRowData" :show.sync="showDialog" :is-add="isAddDialog"-->
|
|
<!-- @saved="conditionQuery"-->
|
|
<!-- />-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {initUserList, page, refreshOpenId} from '@/api/demo'
|
|
import editDialog from './edit'
|
|
/**
|
|
* @version 2.0
|
|
*/
|
|
|
|
/* Base */
|
|
const default_condition = {
|
|
openid: '',
|
|
unionid: '',
|
|
pageNumber: 1,
|
|
pageSize: 10
|
|
}
|
|
/* ↑ Base */
|
|
export default {
|
|
name: 'Demo',
|
|
components: { editDialog },
|
|
data() {
|
|
return {
|
|
/* Edit Dialog */
|
|
editRowData: null,
|
|
showDialog: false,
|
|
isAddDialog: null,
|
|
/* ↑ Edit Dialog */
|
|
/* Base */
|
|
condition: JSON.parse(JSON.stringify(default_condition)),
|
|
tableData: [],
|
|
total: null,
|
|
selectLoading: false,
|
|
tableMaxHeight: null,
|
|
multipleSelection: []
|
|
/* ↑ Base */
|
|
}
|
|
},
|
|
computed: {
|
|
hasSelection() {
|
|
return this.multipleSelection.length > 1
|
|
}
|
|
},
|
|
watch: {},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
/* Base */
|
|
this.resizeTable()
|
|
window.onresize = () => {
|
|
return (() => {
|
|
this.resizeTable()
|
|
})()
|
|
}
|
|
/* ↑ Base */
|
|
this.conditionQuery()
|
|
},
|
|
methods: {
|
|
initUserList() {
|
|
let title = '初始化关注列表?该操作会从公众号读取关注用户覆盖当前数据库'
|
|
this.$confirm(title, '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const loading = this.$loading({
|
|
background: this.$elementGlobal.loadingBackground
|
|
})
|
|
initUserList().then(r => {
|
|
loading.close()
|
|
if (r.data) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '操作成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: '操作失败!'
|
|
})
|
|
}
|
|
this.conditionQuery()
|
|
}).catch(e => {
|
|
loading.close()
|
|
console.log(e)
|
|
})
|
|
}).catch(() => {
|
|
|
|
})
|
|
},
|
|
refreshPull(row) {
|
|
let title = '重新拉取该用户的数据?该操作会从公众号读取关注用户覆盖当前数据'
|
|
this.$confirm(title, '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const loading = this.$loading({
|
|
background: this.$elementGlobal.loadingBackground
|
|
})
|
|
refreshOpenId(row.openid).then(r => {
|
|
loading.close()
|
|
if (r.data) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '操作成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: '操作失败!'
|
|
})
|
|
}
|
|
this.conditionQuery()
|
|
}).catch(e => {
|
|
loading.close()
|
|
console.log(e)
|
|
})
|
|
}).catch(() => {
|
|
|
|
})
|
|
},
|
|
/* Base */
|
|
addRow() {
|
|
// 表格操作 - 添加
|
|
this.isAddDialog = true
|
|
this.editRowData = null
|
|
this.showDialog = true
|
|
},
|
|
handleRemove(row) {
|
|
// 表格 - 操作列 - 删除
|
|
let title = '确定要删除吗? 该操作可能无法恢复!'
|
|
this.$confirm(title, '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const loading = this.$loading({
|
|
background: this.$elementGlobal.loadingBackground
|
|
})
|
|
remove([row.id]).then(r => {
|
|
loading.close()
|
|
if (r.data) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '操作成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: '操作失败!'
|
|
})
|
|
}
|
|
this.conditionQuery()
|
|
}).catch(e => {
|
|
loading.close()
|
|
console.log(e)
|
|
})
|
|
}).catch(() => {
|
|
|
|
})
|
|
},
|
|
removeBatchRows() {
|
|
// 表格操作 - 批量删除
|
|
const h = this.$createElement
|
|
this.$confirm(h('p', null, [
|
|
h('p', null, '确定要删除 ' + this.multipleSelection.length + ' 个吗?'),
|
|
h('p', { style: 'color: #f80' }, ' 该操作可能无法恢复!')
|
|
]), '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const loading = this.$loading({
|
|
background: this.$elementGlobal.loadingBackground
|
|
})
|
|
remove(this.multipleSelection.map(e => e.id)).then(r => {
|
|
loading.close()
|
|
if (r.data) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '操作成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: '操作失败!'
|
|
})
|
|
}
|
|
this.conditionQuery()
|
|
}).catch(e => {
|
|
loading.close()
|
|
console.log(e)
|
|
})
|
|
}).catch(() => {
|
|
|
|
})
|
|
},
|
|
// 表格 - 编辑行
|
|
handleEdit(row) {
|
|
this.isAddDialog = false
|
|
this.showDialog = true
|
|
this.editRowData = row
|
|
},
|
|
// 表格 - 查询表数据
|
|
conditionQuery() {
|
|
this.selectLoading = true
|
|
page(this.condition).then(r => {
|
|
this.selectLoading = false
|
|
this.tableData = r.data.rows
|
|
this.total = r.data.total
|
|
}).catch(e => {
|
|
this.selectLoading = false
|
|
console.log('query error -> ', e)
|
|
})
|
|
},
|
|
resizeTable() {
|
|
this.tableMaxHeight = window.innerHeight - (this.$refs.tableContainer.offsetTop + 100)
|
|
},
|
|
// 重置表格查询条件
|
|
handleResetCondition() {
|
|
this.condition = Object.assign({}, default_condition)
|
|
},
|
|
// [事件]表格 - 点击行
|
|
handleRowClick(row) {
|
|
this.$refs.listTable.toggleRowSelection(row)
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val
|
|
}
|
|
/* ↑ Base */
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|