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.
308 lines
9.5 KiB
308 lines
9.5 KiB
1 year ago
|
<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="备注" prop="tip">
|
||
|
|
<el-input v-model="condition.tip" placeholder="通过备注查找" clearable/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="二维码url" prop="tip">
|
||
|
|
<el-input v-model="condition.qrUrl" placeholder="通过url查找" clearable/>
|
||
|
|
</el-form-item>
|
||
|
|
<!-- <el-form-item label="" prop="">-->
|
||
|
|
<!-- <el-input v-model="condition." placeholder="请输入" />-->
|
||
|
|
<!-- </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-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="toUrl" show-overflow-tooltip label="指向Url" width="230" align="center"/>
|
||
|
|
<el-table-column property="qrUrl" show-overflow-tooltip label="二维码Url" width="230" align="center"/>
|
||
|
|
<el-table-column property="tip" show-overflow-tooltip label="备注" min-width="25%" align="center"/>
|
||
|
|
<el-table-column property="status" label="状态" width="90" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-tooltip
|
||
|
|
v-if="scope.row.id"
|
||
|
|
:content="formatterStatus(scope.row.status)"
|
||
|
|
placement="top"
|
||
|
|
>
|
||
|
|
<el-switch
|
||
|
|
v-model="scope.row.status"
|
||
|
|
:active-value="1"
|
||
|
|
:inactive-value="0"
|
||
|
|
@click.stop.native
|
||
|
|
@change="handleStatusChange(scope.row)"
|
||
|
|
/>
|
||
|
|
</el-tooltip>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<!--<el-table-column property="" label="" min-width="25%" align="center" />-->
|
||
|
|
<!--<el-table-column property="" label="" width="200" align="center" />-->
|
||
|
|
<el-table-column label="操作" width="250" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button size="mini" @click="buildQR(scope.row.toUrl)">二维码
|
||
|
|
</el-button>
|
||
|
|
<el-button size="mini" @click.stop="handleEdit(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"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<qr-image-dialog v-if="showQr" :url="QrUrl" :show.sync="showQr"/>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @version 2.0
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Base */
|
||
|
|
import { page, remove, updateStatus } from '@/api/qr'
|
||
|
|
import EditDialog from '@/views/qr/edit'
|
||
|
|
import QrImageDialog from '@/views/qr/qrImage'
|
||
|
|
|
||
|
|
const default_condition = {
|
||
|
|
tip: null,
|
||
|
|
qrUrl: null,
|
||
|
|
pageNumber: 1,
|
||
|
|
pageSize: 10
|
||
|
|
}
|
||
|
|
/* ↑ Base */
|
||
|
|
export default {
|
||
|
|
name: 'QR',
|
||
|
|
components: { QrImageDialog, EditDialog },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showQr: false,
|
||
|
|
QrUrl: null,
|
||
|
|
/* 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 */
|
||
|
|
// /* todo 测试的模拟数据 */
|
||
|
|
// let datas = []
|
||
|
|
// for (let i = 0; i < 23; i++) {
|
||
|
|
// datas.push({ id: i, name: 'test-' + i, choose: 'option-' + (i % 5) })
|
||
|
|
// }
|
||
|
|
// this.tableData = datas
|
||
|
|
this.conditionQuery()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
formatterStatus(status) {
|
||
|
|
return status === 0 ? '禁用' : '启用'
|
||
|
|
},
|
||
|
|
buildQR(url) {
|
||
|
|
this.showQr = true
|
||
|
|
this.QrUrl = url
|
||
|
|
},
|
||
|
|
handleStatusChange(row) {
|
||
|
|
// 保存点击之后v-modeld的值(1，0) ，类型不同，不能生效
|
||
|
|
const status = row.status
|
||
|
|
// 保持switch点击前的状态
|
||
|
|
row.status = 1 - parseInt(row.status)
|
||
|
|
const title = this.formatterStatus(status) + '?'
|
||
|
|
this.$confirm(title, '提示', {
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
const loading = this.$loading({ background: this.$elementGlobal.loadingBackground })
|
||
|
|
let data = JSON.parse(JSON.stringify(row))
|
||
|
|
data.status = status
|
||
|
|
updateStatus(data).then((r) => {
|
||
|
|
loading.close()
|
||
|
|
row.status = status // 这一步很重要，row.status会根据status的值开启或关闭开关
|
||
|
|
this.$message({ type: 'success', message: '修改成功!' })
|
||
|
|
this.conditionQuery()
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
loading.close()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/* 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 => { //todo remove函数未导入
|
||
|
|
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 lang="scss">
|
||
|
|
|
||
|
|
</style>
|