soul2
1 year ago
parent
eafc266aeb
commit
24ca6499c9
7 changed files with 539 additions and 2 deletions
@ -0,0 +1,29 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
export function page(data) { |
||||
return request({ |
||||
url: '/qr/page', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function saveOrUpdate(data) { |
||||
return request({ |
||||
url: '/qr/saveOrUpdate', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function remove(data) { |
||||
return request({ |
||||
url: '/qr/remove', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function updateStatus(data) { |
||||
return request({ |
||||
url: '/qr/status', |
||||
data |
||||
}) |
||||
} |
||||
@ -0,0 +1,122 @@ |
||||
<template> |
||||
<el-dialog ref="dialogForm" width="45%" :title="title" :visible.sync="visible" @close="closeDialog"> |
||||
<el-form label-width="25%" ref="edit" :rules="rules" :model="edit"> |
||||
<el-input v-show="false" v-model="edit.id"/> |
||||
<el-form-item label="指向Url" prop="toUrl"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="edit.toUrl"/> |
||||
</el-col> |
||||
</el-form-item> |
||||
<el-form-item label="二维码Url" prop="qrUrl"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="edit.qrUrl"/> |
||||
</el-col> |
||||
</el-form-item> |
||||
<el-form-item label="注释" prop="tip"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="edit.tip"/> |
||||
</el-col> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="visible = false">取消</el-button> |
||||
<el-button type="primary" @click="beforeSave">保存</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import { saveOrUpdate } from '@/api/qr' |
||||
|
||||
export default { |
||||
name: 'EditDialog', |
||||
props: { |
||||
row: { |
||||
type: Object, |
||||
require: true |
||||
}, |
||||
show: { |
||||
type: Boolean, |
||||
default: () => false |
||||
} |
||||
}, |
||||
components: {}, |
||||
data() { |
||||
return { |
||||
edit: { id: null }, |
||||
visible: this.show, |
||||
rules: { |
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
title() { |
||||
return (this.edit.id === null ? '新增' : '编辑') |
||||
} |
||||
}, |
||||
watch: { |
||||
visible() { |
||||
this.$emit('update:show', false) |
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
mounted() { |
||||
if (this.row !== null) { |
||||
this.edit = JSON.parse(JSON.stringify(this.row)) |
||||
// console.log(this.edit) |
||||
} |
||||
}, |
||||
methods: { |
||||
closeDialog() { |
||||
// 关闭 |
||||
}, |
||||
beforeSave() { |
||||
if (this.row.qrUrl != null && this.row.qrUrl !== this.edit.qrUrl) { |
||||
this.$confirm('你更改了二维码Url,这可能带来一些意外的结果, 是否继续?', '警告', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消(维持原值)', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.handleSave() |
||||
}).catch(() => { |
||||
this.edit.qrUrl = this.row.qrUrl |
||||
}) |
||||
} else { |
||||
this.handleSave() |
||||
} |
||||
}, |
||||
handleSave() { |
||||
this.$refs.edit.validate(valid => { |
||||
if (valid) { |
||||
const loading = this.$loading({ |
||||
background: this.$elementGlobal.loadingBackground |
||||
}) |
||||
saveOrUpdate([this.edit]) |
||||
.then(r => { |
||||
loading.close() |
||||
if (r.data === true) { |
||||
this.visible = false |
||||
this.$message({ type: 'success', message: '保存成功!' }) |
||||
this.$emit('saved') |
||||
} else { |
||||
this.$message({ type: 'error', message: '保存失败!' }) |
||||
} |
||||
}) |
||||
.catch(() => { |
||||
loading.close() |
||||
}) |
||||
} else { |
||||
return false |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
|
||||
</style> |
||||
@ -0,0 +1,307 @@ |
||||
<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> |
||||
@ -0,0 +1,63 @@ |
||||
<template> |
||||
<el-dialog ref="dialogForm" width="23%" :title="title" :visible.sync="visible" @close="closeDialog"> |
||||
<div style="text-align: center"> |
||||
<vue-qr :text="url" :size="250"/> |
||||
</div> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="visible = false">关闭</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import vueQr from 'vue-qr' |
||||
|
||||
export default { |
||||
name: 'QrImageDialog', |
||||
props: { |
||||
url: { |
||||
type: String, |
||||
require: true |
||||
}, |
||||
show: { |
||||
type: Boolean, |
||||
default: () => false |
||||
} |
||||
}, |
||||
components: { vueQr }, |
||||
data() { |
||||
return { |
||||
edit: { id: null }, |
||||
visible: this.show |
||||
} |
||||
}, |
||||
computed: { |
||||
title() { |
||||
return '二维码' |
||||
} |
||||
}, |
||||
watch: { |
||||
visible() { |
||||
this.$emit('update:show', false) |
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
mounted() { |
||||
if (this.row !== null) { |
||||
this.edit = JSON.parse(JSON.stringify(this.row)) |
||||
// console.log(this.edit) |
||||
} |
||||
}, |
||||
methods: { |
||||
closeDialog() { |
||||
// 关闭 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue