- 新增改枪码管理页面与 API（分页、新增、编辑、删除、复制） - 新增免登录公开页 public/delta-gun-codes.html - 新增通用剪贴板工具 src/common/js/clipboard.js
This commit is contained in:
张家训
@@ -0,0 +1,67 @@
|
||||
import axios from '@/libs/api.request'
|
||||
import { getToken } from '@/libs/util'
|
||||
|
||||
/** 后台管理-分页查询改枪码列表 **/
|
||||
export const getDataList = (data) => {
|
||||
return axios.request({
|
||||
url: 'delta-gun-code/findPageList',
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
},
|
||||
data: data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
/** 后台管理-新增改枪码 **/
|
||||
export const add = (data) => {
|
||||
return axios.request({
|
||||
url: 'delta-gun-code/add',
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
},
|
||||
data: data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
/** 后台管理-更新改枪码 **/
|
||||
export const update = (data) => {
|
||||
return axios.request({
|
||||
url: 'delta-gun-code/update',
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
},
|
||||
data: data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
/** 后台管理-删除改枪码 **/
|
||||
export const remove = (data) => {
|
||||
return axios.request({
|
||||
url: 'delta-gun-code/remove',
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
},
|
||||
data: data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
/** 公开-查询所有启用改枪码（无需鉴权） **/
|
||||
export const getPublicList = () => {
|
||||
return axios.request({
|
||||
url: 'delta-gun-code/public/list',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
/** 公开-复制成功增加复制次数（无需鉴权） **/
|
||||
export const addCopyCount = (id) => {
|
||||
return axios.request({
|
||||
url: 'delta-gun-code/public/addCopyCount',
|
||||
params: { id: id },
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* 文本复制工具
|
||||
* 优先使用 navigator.clipboard（需安全上下文），否则降级为隐藏 textarea + execCommand
|
||||
* @param {String} text 待复制的文本
|
||||
* @returns {Promise<Boolean>} 是否复制成功
|
||||
*/
|
||||
const fallbackCopy = (text) => {
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
textarea.setAttribute('readonly', '')
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.top = '-9999px'
|
||||
textarea.style.opacity = '0'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
textarea.setSelectionRange(0, textarea.value.length)
|
||||
let ok = false
|
||||
try {
|
||||
ok = document.execCommand('copy')
|
||||
} catch (e) {
|
||||
ok = false
|
||||
}
|
||||
document.body.removeChild(textarea)
|
||||
return ok
|
||||
}
|
||||
|
||||
export const copyText = (text) => {
|
||||
if (!text) return Promise.resolve(false)
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
return navigator.clipboard.writeText(text)
|
||||
.then(() => true)
|
||||
.catch(() => fallbackCopy(text))
|
||||
}
|
||||
return Promise.resolve(fallbackCopy(text))
|
||||
}
|
||||
|
||||
export default copyText
|
||||
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询区域 start -->
|
||||
<div class="option">
|
||||
<Input v-model="search.name" class="short-input" clearable placeholder="配装名称"/>
|
||||
<Input v-model="search.gunName" class="short-input" clearable placeholder="枪械/载具"/>
|
||||
<Input v-model="search.category" class="short-input" clearable placeholder="分类标签"/>
|
||||
<Button class="free" type="primary" icon="ios-search" @click="getDataList()">查询</Button>
|
||||
<Button class="free" type="primary" icon="md-refresh" @click="refresh()">重置</Button>
|
||||
</div>
|
||||
<!-- 查询区域 end -->
|
||||
|
||||
<!-- 公开复制页面地址 start -->
|
||||
<div class="share-address">
|
||||
<span class="share-label">公开复制页地址（无需登录）</span>
|
||||
<Input v-model="shareUrl" readonly class="share-input"/>
|
||||
<Button type="success" icon="md-link" @click="copyAddress">复制地址</Button>
|
||||
</div>
|
||||
<!-- 公开复制页面地址 end -->
|
||||
|
||||
<!-- 列表区域 start -->
|
||||
<div class="table-button-list">
|
||||
<Button class="free" type="info" icon="md-add" @click="toAdd">添加</Button>
|
||||
</div>
|
||||
<Table :height="fixedHeader ? autoHeight : ''"
|
||||
border ref="table"
|
||||
:columns="listColumns"
|
||||
:data="dataList"
|
||||
:loading="tableLoading">
|
||||
<template slot-scope="{ row }" slot="category">
|
||||
<Tag :color="categoryColor(row.category)">{{ row.category || '未分类' }}</Tag>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="status">
|
||||
<i-switch :value="row.status === 1" true-value="1" false-value="0"
|
||||
@on-change="val => updateStatus(row, val)">
|
||||
<span slot="open">显示</span>
|
||||
<span slot="close">隐藏</span>
|
||||
</i-switch>
|
||||
</template>
|
||||
<template slot-scope="{ row, index }" slot="action">
|
||||
<Button type="success"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
icon="md-copy"
|
||||
@click="copyRow(index)">复制
|
||||
</Button>
|
||||
<Button type="primary"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
icon="ios-create"
|
||||
@click="toEdit(index)">编辑
|
||||
</Button>
|
||||
<Poptip
|
||||
confirm
|
||||
title="您确定要删除吗？"
|
||||
:transfer="true"
|
||||
@on-ok="toDelete(index)"
|
||||
>
|
||||
<Button type="error" size="small" icon="md-trash">删除</Button>
|
||||
</Poptip>
|
||||
</template>
|
||||
</Table>
|
||||
<div class="pagination">
|
||||
<Page show-elevator show-sizer show-total
|
||||
:total="pageTotal" :page-size="pageParam.pageSize"
|
||||
:current="pageParam.pageNum"
|
||||
@on-page-size-change="changePageSize" @on-change="changePage"></Page>
|
||||
</div>
|
||||
<!-- 列表区域 end -->
|
||||
|
||||
<!-- Modal区域 start -->
|
||||
<Modal v-model="modal" :title="modalTitle" :styles="{top: '20px'}" width="700" :mask-closable="false"
|
||||
@on-cancel="cancel()">
|
||||
<Form :rules="ruleCustom" :model="formItem" ref="formItem" :label-width="110" label-position="right">
|
||||
<Row :gutter="32">
|
||||
<Col span="12">
|
||||
<FormItem label="配装名称" prop="name">
|
||||
<Input type="text" class="form-input" v-model="formItem.name" placeholder="如：MP7 冲锋流"/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="枪械/载具" prop="gunName">
|
||||
<Input type="text" class="form-input" v-model="formItem.gunName" placeholder="如：MP7"/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="分类标签" prop="category">
|
||||
<Input type="text" class="form-input" v-model="formItem.category" placeholder="如：主武器/副武器"/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="排序" prop="sort">
|
||||
<InputNumber :min="0" v-model="formItem.sort" class="form-input" placeholder="数字越小越靠前"/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="状态" prop="status">
|
||||
<RadioGroup v-model="formItem.status">
|
||||
<Radio :label="1">
|
||||
<span>显示</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>隐藏</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<FormItem label="改枪码" prop="code">
|
||||
<Input type="textarea" :rows="8" show-word-limit class="form-input"
|
||||
v-model="formItem.code" placeholder="请输入改枪码内容（公开页面可直接复制）"/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<FormItem label="备注" prop="remark">
|
||||
<Input type="textarea" :rows="3" maxlength="200" show-word-limit class="form-input"
|
||||
v-model="formItem.remark" placeholder="选填：配装思路/适用场景等"/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" size="large" @click="cancel">取消</Button>
|
||||
<Button type="primary" size="large"
|
||||
:loading="submitLoading"
|
||||
@click="submit('formItem')">提交
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- Modal区域 end -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataList, add, update, remove } from '@/api/delta/delta-gun-code'
|
||||
import { objectUtil } from '@/common/js/util'
|
||||
import { copyText } from '@/common/js/clipboard'
|
||||
|
||||
export default {
|
||||
name: 'delta-gun-code',
|
||||
data () {
|
||||
return {
|
||||
fixedHeader: true, // 高度自适应
|
||||
autoHeight: `${window.innerHeight} ` * 0.55, // 获取当前可视高度-定义Table高度
|
||||
shareUrl: `${window.location.origin}/delta-gun-codes.html`, // 公开复制页面地址
|
||||
search: {
|
||||
name: '',
|
||||
gunName: '',
|
||||
category: ''
|
||||
},
|
||||
listColumns: [
|
||||
{
|
||||
title: '#',
|
||||
type: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
indexMethod: (row) => {
|
||||
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '配装名称',
|
||||
key: 'name',
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
title: '枪械/载具',
|
||||
key: 'gunName',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
slot: 'category',
|
||||
width: 130,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
key: 'sort',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '被复制次数',
|
||||
key: 'copyCount',
|
||||
width: 110,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
slot: 'status',
|
||||
width: 110,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作区',
|
||||
slot: 'action',
|
||||
width: 230,
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
dataList: [],
|
||||
tableLoading: false,
|
||||
pageTotal: 0, // 总页数
|
||||
pageParam: { // 调用时候的分页参数
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
modal: false,
|
||||
modalTitle: '',
|
||||
addModal: false, // 添加
|
||||
editModal: false, // 编辑
|
||||
submitLoading: false,
|
||||
formItem: {
|
||||
id: '',
|
||||
name: '',
|
||||
gunName: '',
|
||||
category: '',
|
||||
code: '',
|
||||
remark: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
},
|
||||
ruleCustom: {
|
||||
name: [{ required: true, message: '请输入配装名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入改枪码', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDataList () {
|
||||
let temp = JSON.parse(JSON.stringify(this.pageParam))
|
||||
let data = objectUtil.trimJoin(temp, this.search)
|
||||
this.tableLoading = true
|
||||
getDataList(data).then(res => {
|
||||
let page = res.data.data
|
||||
this.pageTotal = page.total
|
||||
this.dataList = page.records
|
||||
// 延迟300毫秒，给它更流畅的感觉
|
||||
setTimeout(() => {
|
||||
this.tableLoading = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
toAdd () {
|
||||
this.modalTitle = '添加'
|
||||
this.modal = true
|
||||
this.addModal = true
|
||||
this.editModal = false
|
||||
},
|
||||
toEdit (index) {
|
||||
this.modalTitle = '编辑'
|
||||
let temp = this.dataList[index]
|
||||
|
||||
this.addModal = false
|
||||
this.editModal = true
|
||||
this.modal = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 清除上次校验状态，避免编辑回显报红
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
this.formItem.id = temp.id
|
||||
this.formItem.name = temp.name
|
||||
this.formItem.gunName = temp.gunName
|
||||
this.formItem.category = temp.category
|
||||
this.formItem.code = temp.code
|
||||
this.formItem.remark = temp.remark
|
||||
this.formItem.sort = temp.sort
|
||||
this.formItem.status = temp.status
|
||||
})
|
||||
},
|
||||
submit (formItem) {
|
||||
// modal 提交
|
||||
this.$refs[formItem].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.addModal) { // 添加
|
||||
add(this.formItem).then(res => {
|
||||
this.$Message.success('添加成功!')
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
})
|
||||
} else { // 编辑
|
||||
update(this.formItem).then(res => {
|
||||
this.$Message.success('编辑成功!')
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
})
|
||||
}
|
||||
this.cancel()
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel () {
|
||||
// Modal cancel
|
||||
this.modal = false
|
||||
this.refresh()
|
||||
},
|
||||
toDelete (index) {
|
||||
let temp = this.dataList[index]
|
||||
let data = {
|
||||
id: temp.id
|
||||
}
|
||||
remove(data).then(res => {
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
this.$Message.success('删除成功!')
|
||||
})
|
||||
},
|
||||
updateStatus (row, value) {
|
||||
let status = value === true || value === 1 || value === '1' ? 1 : 0
|
||||
let data = {
|
||||
id: row.id,
|
||||
status: status
|
||||
}
|
||||
update(data).then(res => {
|
||||
this.$Message.success('状态更新成功!')
|
||||
this.getDataList()
|
||||
}).catch(() => {
|
||||
this.getDataList()
|
||||
})
|
||||
},
|
||||
copyRow (index) {
|
||||
let temp = this.dataList[index]
|
||||
copyText(temp.code).then(ok => {
|
||||
if (ok) {
|
||||
this.$Message.success('改枪码已复制到剪贴板!')
|
||||
} else {
|
||||
this.$Message.error('复制失败，请手动选择复制')
|
||||
}
|
||||
})
|
||||
},
|
||||
copyAddress () {
|
||||
copyText(this.shareUrl).then(ok => {
|
||||
if (ok) {
|
||||
this.$Message.success('公开页面地址已复制!')
|
||||
} else {
|
||||
this.$Message.error('复制失败，请手动选择复制')
|
||||
}
|
||||
})
|
||||
},
|
||||
refresh () {
|
||||
this.pageParam = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
this.search = {
|
||||
name: '',
|
||||
gunName: '',
|
||||
category: ''
|
||||
}
|
||||
this.formItem = {
|
||||
id: '',
|
||||
name: '',
|
||||
gunName: '',
|
||||
category: '',
|
||||
code: '',
|
||||
remark: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
}
|
||||
},
|
||||
changePage (index) {
|
||||
// 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
|
||||
this.pageParam.pageNum = index
|
||||
this.getDataList()
|
||||
},
|
||||
changePageSize (page) {
|
||||
// 切换分页条数
|
||||
this.pageParam.pageNum = 1
|
||||
this.pageParam.pageSize = page
|
||||
this.getDataList()
|
||||
},
|
||||
categoryColor (category) {
|
||||
let map = {
|
||||
'主武器': 'red',
|
||||
'副武器': 'blue',
|
||||
'载具配置': 'green',
|
||||
'装备': 'orange',
|
||||
'默认': 'default'
|
||||
}
|
||||
return map[category] || 'geekblue'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getDataList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form-input {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.share-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4px 0 8px;
|
||||
.share-label {
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
color: #808695;
|
||||
font-size: 12px;
|
||||
}
|
||||
.share-input {
|
||||
max-width: 520px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user