first
This commit is contained in:
190
pageDevice/printer/edit.vue
Normal file
190
pageDevice/printer/edit.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="page-wrapper jeepay-edit-form">
|
||||
<JeepayCustomNavbar bgDefaultColor="#fff" :title=" vdata.isAdd ? '绑定云打印机' : '修改云打印机信息'" backCtrl="back" />
|
||||
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="120">
|
||||
<uni-forms-item v-if="vdata.isAdd" required label="设备号" name="deviceNo">
|
||||
<uni-easyinput v-model="vdata.formData.deviceNo" placeholder="请输入设备号" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item required label="设备名称" name="deviceName">
|
||||
<uni-easyinput v-model="vdata.formData.deviceName" placeholder="请输入设备名称" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<view class="line"></view>
|
||||
<uni-forms-item required label="选择门店" name="storeId">
|
||||
<template #label>
|
||||
<view class="f-label">选择门店</view>
|
||||
</template>
|
||||
<JeepayBizsPopupView :hasTitle="false" bizType="store" v-model:value="vdata.formData.storeId" :showName="vdata.bindStoreName" />
|
||||
</uni-forms-item>
|
||||
<view class="line"></view>
|
||||
<JeepayTableListItem title="状态" subtitle="状态禁用后, 设备将无法使用">
|
||||
<template #titleRight>
|
||||
<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false' />
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
<view class="line"></view>
|
||||
<uni-forms-item required label="打印参数" name="printMode">
|
||||
<JeepayRadioPopupView label="请选择参数" v-model:value="vdata.formData.printMode" :list="[{ label: '仅打印', value: 1}, { label: '仅播报', value: 2}, { label: '打印并播报', value: 3}]">
|
||||
</JeepayRadioPopupView>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item required label="打印联数" name="printNum">
|
||||
<uni-easyinput type="number" v-model="vdata.formData.printNum" placeholder="请输入联数" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
|
||||
<view class="confirm-wrapper">
|
||||
<Button @tap="confirmFunc">{{ vdata.deviceId ? '确认修改' : '确认创建' }}</Button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import formUtil from '@/commons/utils/formUtil.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
|
||||
const rules = {
|
||||
storeId: {
|
||||
rules:[ formUtil.rules.requiredSelect('门店') ],
|
||||
},
|
||||
deviceNo: {
|
||||
rules:[ formUtil.rules.requiredInput('') ],
|
||||
},
|
||||
deviceName: {
|
||||
rules:[ formUtil.rules.requiredInput('') ],
|
||||
},
|
||||
printMode: {
|
||||
rules:[ formUtil.rules.requiredSelect('打印参数') ],
|
||||
},
|
||||
printNum: {
|
||||
rules:[ formUtil.rules.requiredInput('') ],
|
||||
},
|
||||
}
|
||||
|
||||
const formRef = ref()
|
||||
|
||||
const vdata = reactive({
|
||||
|
||||
|
||||
deviceId: null, // 新建 or 修改
|
||||
|
||||
isAdd: true, // 是否新增页面
|
||||
|
||||
bindStoreName: '',
|
||||
|
||||
// 表单数据
|
||||
formData: {
|
||||
state: 1 // 默认启用
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
|
||||
// 修改页面
|
||||
if(options.deviceId){
|
||||
vdata.isAdd = false
|
||||
vdata.deviceId = options.deviceId
|
||||
reqLoad.getById(API_URL_SYS_DEVICE_LIST, vdata.deviceId).then(({bizData}) => {
|
||||
bizData.printMode = JSON.parse(bizData.bizConfigParams).printMode
|
||||
bizData.printNum = JSON.parse(bizData.bizConfigParams).printNum
|
||||
vdata.formData = bizData
|
||||
vdata.bindStoreName = bizData.storeName
|
||||
})
|
||||
}
|
||||
|
||||
// 参数赋值。
|
||||
if(options.deviceNo){
|
||||
vdata.formData.deviceNo = options.deviceNo
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
function confirmFunc(){
|
||||
|
||||
formUtil.validate(formRef.value).then(() => {
|
||||
if (!(/^[1-9]\d*$/.test(vdata.formData.printNum))) {
|
||||
return infoBox.showToast('请输入正整数')
|
||||
}
|
||||
let reqData = Object.assign({}, vdata.formData)
|
||||
reqData.deviceType = 2 // 1-云喇叭, 2-云打印, 3-扫码pos, 4-智能pos, 5-收银插件
|
||||
reqData.bizConfigParams = {
|
||||
printMode: vdata.formData.printMode,
|
||||
printNum: vdata.formData.printNum
|
||||
}
|
||||
return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, reqData)
|
||||
})
|
||||
.then(( {bizData} ) => {
|
||||
emit.pageEmit(emit.ENAME_REF_PRINTER_LIST) // 更新列表
|
||||
go.back(1, emit.ENAME_REF_PRINTER_DETAIL) // 返回详情 && 更新详情 && search
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.selected-sex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32rpx;
|
||||
color: #b3b3b3;
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
.confirm-wrapper {
|
||||
padding: 50rpx 30rpx;
|
||||
.confirm-button {
|
||||
height: 110rpx;
|
||||
color: #fff;
|
||||
border-radius: 20rpx;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
}
|
||||
.pay-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
image {
|
||||
width: 108rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
.scan-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
.store-name {
|
||||
flex-direction: column;
|
||||
.name {
|
||||
width: 392rpx;
|
||||
color: #000;
|
||||
}
|
||||
.store-id {
|
||||
color: #a1a1a1;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.name-wrapper {
|
||||
display: flex;
|
||||
image {
|
||||
align-self: center;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
pageDevice/printer/index.vue
Normal file
66
pageDevice/printer/index.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
|
||||
<CommonPageByDevice
|
||||
ref="commonPageByDeviceRef"
|
||||
navTitle="打印机管理"
|
||||
searchTitle="搜索设备名称、编号"
|
||||
searchType="device"
|
||||
:searchParams="{deviceType: 2}"
|
||||
:bottomBtnTitle="ak.ent.has('ENT_DEVICE_PRINTER_ADD') ? '绑定设备' : null "
|
||||
@bottomBtnClickFunc="bottomBtnClickFunc"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
>
|
||||
</CommonPageByDevice>
|
||||
<JSinglePopup ref="jsinglePopupRef" :list="codeBindList" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onReachBottom, onUnload } from '@dcloudio/uni-app'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import CommonPageByDevice from '../commons/CommonPageByDevice.vue'
|
||||
import { reqLoad, API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import DeviceCommonsRender from '@/pages/list/render/DeviceCommonsRender.vue'
|
||||
import ak from '@/commons/utils/ak.js'
|
||||
|
||||
const jsinglePopupRef = ref(null)
|
||||
const commonPageByDeviceRef = ref()
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload( () => uni.$off(emit.ENAME_REF_PRINTER_LIST) )
|
||||
uni.$on(emit.ENAME_REF_PRINTER_LIST, function(data){
|
||||
commonPageByDeviceRef.value.refTable(true)
|
||||
})
|
||||
|
||||
|
||||
const reqTableDataFunc = (params) => {
|
||||
params.deviceType = 2 // 1-云喇叭, 2-云打印, 3-扫码pos, 4-智能pos, 5-收银插件
|
||||
return reqLoad.list(API_URL_SYS_DEVICE_LIST, params)
|
||||
}
|
||||
|
||||
function bottomBtnClickFunc(){
|
||||
jsinglePopupRef.value.open()
|
||||
}
|
||||
|
||||
|
||||
const codeBindList = [
|
||||
{ label: '扫码绑定', value: 'scanCode', fun: () => {
|
||||
uni.scanCode().then(({ result }) => {
|
||||
go.to('PAGES_APP_PRINT_BIND', { deviceNo: result })
|
||||
})
|
||||
}
|
||||
},
|
||||
{ label: '手动绑定', value: 'handBind', fun: () => {
|
||||
go.to('PAGES_APP_PRINT_BIND')
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
onReachBottom(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
155
pageDevice/printer/view.vue
Normal file
155
pageDevice/printer/view.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<JeepayBackground :bgColorStyle="{ height: '706rpx' }">
|
||||
<JeepayCustomNavbar textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="云打印详情" backCtrl="back" />
|
||||
|
||||
<JeepayTableListItem viewClass="list-item-by-detail"
|
||||
logo="/pageDevice/static/detailsLislImg/print-white.svg"
|
||||
:title="vdata.record.deviceName"
|
||||
:subtitle="vdata.record.deviceId"
|
||||
:moreBtnList="list" />
|
||||
<view class="create-time">
|
||||
<view class="time-title">设备厂商</view>
|
||||
<view class="dev-info">{{ datamap.provider(vdata.record.provider) }}</view>
|
||||
</view>
|
||||
<view class="create-time" style="border: none; padding-top: 0">
|
||||
<view class="time-title">创建时间</view>
|
||||
<view class="time-info">{{ vdata.record.createdAt }}</view>
|
||||
</view>
|
||||
<JeepayCard editText="编辑信息" @editTap="go.to('PAGES_APP_PRINT_BIND', {deviceId: vdata.record.deviceId})">
|
||||
<JeepayDescview>
|
||||
<JeepayDescviewItem title="设备名称" :desc="vdata.record.deviceName" />
|
||||
<JeepayDescviewItem title="绑定门店" :desc="vdata.record.storeName" />
|
||||
<JeepayDescviewItem title="打印参数" :desc="['仅打印', '仅播报', '打印并播报'][vdata.record.bizConfigParams?.printMode - 1]" />
|
||||
<JeepayDescviewItem title="打印联数" :desc="vdata.record.bizConfigParams?.printNum" />
|
||||
</JeepayDescview>
|
||||
|
||||
</JeepayCard>
|
||||
|
||||
<JDetailsSwitch title="设备状态" subTitle="状态禁用后，该设备将无法使用">
|
||||
<template #titleRight>
|
||||
<JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true" :updateStateFunc="updateState" />
|
||||
</template>
|
||||
</JDetailsSwitch>
|
||||
</JeepayBackground>
|
||||
<JSinglePopup ref="more" :list="list" activeColor="#FF5B4C" />
|
||||
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
|
||||
<uni-popup ref="popupDialog" type="dialog" :mask-click="false">
|
||||
<uni-popup-dialog mode="base" title="金额" :before-close="true" @close="close" @confirm="testDevice">
|
||||
<uni-easyinput v-model="vdata.amount" type="digit" placeholder="请输入金额" />
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_SYS_DEVICE_LIST, $printTest, $deviceUnbind } from '@/http/apiManager.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import datamap from '@/commons/utils/datamap.js'
|
||||
|
||||
const jeepayPopupConfirmRef = ref()
|
||||
const popupDialog = ref(null)
|
||||
const more = ref(null)
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.deviceId)
|
||||
})
|
||||
|
||||
const vdata = reactive({
|
||||
record: {},
|
||||
amount: ''
|
||||
})
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_PRINTER_DETAIL))
|
||||
|
||||
uni.$on(emit.ENAME_REF_PRINTER_DETAIL, function(data){
|
||||
refData(vdata.record.deviceId)
|
||||
})
|
||||
|
||||
// 获取设备详情
|
||||
const refData = (id) => {
|
||||
reqLoad.getById(API_URL_SYS_DEVICE_LIST, id).then(({ bizData }) => {
|
||||
bizData.bizConfigParams = JSON.parse(bizData.bizConfigParams)
|
||||
vdata.record = bizData
|
||||
})
|
||||
}
|
||||
|
||||
function deleteFunc () {
|
||||
jeepayPopupConfirmRef.value.open('您确认解绑设备吗？',{ confirmColor: '#FF5B4C' }).then(() => {
|
||||
$deviceUnbind(vdata.record.deviceId).then(() => {
|
||||
infoBox.showSuccessToast('解绑成功')
|
||||
return go.back(1, emit.ENAME_REF_PRINTER_LIST)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const list = reactive([
|
||||
{ label: '打印测试', value: 'test', fun: () => {
|
||||
vdata.amount = ''
|
||||
popupDialog.value.open()
|
||||
}},
|
||||
{ label: '解除绑定', value: 'remove', color: '#FF5B4C', fun: deleteFunc },
|
||||
])
|
||||
|
||||
// 更新状态
|
||||
function updateState(state) {
|
||||
return reqLoad.updateById(API_URL_SYS_DEVICE_LIST, vdata.record.deviceId, { state: state }).then(() => {
|
||||
emit.refPageAndSearchEmit(emit.ENAME_REF_PRINTER_LIST) // 修改列表页面。
|
||||
infoBox.showSuccessToast('修改成功')
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭金额弹出框
|
||||
function close() {
|
||||
popupDialog.value.close()
|
||||
more.value.open()
|
||||
}
|
||||
// 打印测试
|
||||
function testDevice() {
|
||||
if (!vdata.amount) {
|
||||
return infoBox.showToast('请输入金额')
|
||||
}
|
||||
$printTest(vdata.record.deviceId, vdata.amount).then(() => {
|
||||
popupDialog.value.close()
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.create-time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 75rpx;
|
||||
padding: 50rpx 0;
|
||||
font-size: 30rpx;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
.time-title {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.time-info {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.store-info {
|
||||
padding: 0.1rpx;
|
||||
margin: 0 35rpx;
|
||||
background-color: #fff;
|
||||
border-radius: $J-b-r32;
|
||||
}
|
||||
.default-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.dev-info {
|
||||
padding: 3rpx 15rpx;
|
||||
border-radius: 6rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user