300 lines
8.9 KiB
Vue
300 lines
8.9 KiB
Vue
<template>
|
|
<view class="page-gray color-333 u-font-28">
|
|
<view class="block">
|
|
<picker-item title="打印机品牌" required v-model="form.contentType" :modelValue="form.contentType"
|
|
:list="pageData.brandList"></picker-item>
|
|
<picker-item title="小票打印" required v-model="form.subType" :modelValue="form.subType"
|
|
:list="pageData.receiptsList"></picker-item>
|
|
<picker-item title="类型" required v-model="form.connectionType" :modelValue="form.connectionType"
|
|
:list="pageData.connectionTypeList"></picker-item>
|
|
<view class="u-p-b-14 u-m-b-24 border-bottom">
|
|
<view class="title"><span style="color: red;">*</span>打印机名称</view>
|
|
<view class="">
|
|
<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.name"
|
|
placeholder="设置打印机名称"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-b-14 u-m-b-24 border-bottom">
|
|
<view class="title"><span style="color: red;">*</span>打印机编号</view>
|
|
<view class="">
|
|
<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.address"
|
|
placeholder="设置打印机编号"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-b-14 u-m-b-24 border-bottom">
|
|
<view class="title">打印机密钥</view>
|
|
<view class="">
|
|
<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.port"
|
|
placeholder="设置打印机密钥"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
|
<view class="title">小票尺寸</view>
|
|
<view class="u-m-t-16">
|
|
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'receiptSize')">
|
|
<label class="radio u-m-r-60" v-for="(item,index) in pageData.deciveSizeList" :key="index">
|
|
<radio :value="item.value" :checked="form.receiptSize == item.value" class="scale7" />
|
|
<text>{{item.label}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
|
<view class="title">分类打印 </view>
|
|
<view class="u-m-t-16">
|
|
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'classifyPrint')">
|
|
<label class="radio u-m-r-60" v-for="(item,index) in pageData.classifyPrintList" :key="index">
|
|
<radio :value="item.value" :checked="form.classifyPrint == item.value" class="scale7" />
|
|
<text>{{item.label}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-b-24 u-m-b-24 border-bottom" v-if="form.classifyPrint ==1">
|
|
<view class="title">部分打印</view>
|
|
<view class="u-m-t-16" style="display: flex;">
|
|
<up-checkbox-group v-model="form.selectcheckbox">
|
|
<up-checkbox v-for="item in pageData.partList" :key="item.id" :customStyle="{marginBottom: '16rpx',marginRight: '20rpx'}"
|
|
:label="item.name" :name="item.id" style="margin-right: 40rpx;font-size: 28rpx;">
|
|
</up-checkbox>
|
|
</up-checkbox-group>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
|
<view class="title">打印数量</view>
|
|
<view class="u-m-t-16">
|
|
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'printQty')">
|
|
<label class="radio u-m-r-60" v-for="(item,index) in pageData.printQtyList" :key="index">
|
|
<radio :value="item.value" :checked="form.printQty == item.value" class="scale7" />
|
|
<text>{{item.label}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
|
<view class="title">打印方式</view>
|
|
<view class="u-m-t-16">
|
|
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'printMethod')">
|
|
<label class="radio u-m-r-60" v-for="(item,index) in pageData.printMethodList" :key="index">
|
|
<radio :value="item.value" :checked="form.printMethod == item.value" class="scale7" />
|
|
<text>{{item.label}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
|
<view class="title">打印类型</view>
|
|
<view class="u-m-t-16" style="display: flex;">
|
|
<up-checkbox-group v-model="form.printType">
|
|
<up-checkbox v-for="(item,index) in pageData.printTypeList" :key="index" :customStyle="{marginBottom: '16rpx',marginRight:'40rpx'}" :label="item.label" :name="item.value" ></up-checkbox>
|
|
</up-checkbox-group>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-p-b-24 u-flex u-row-between u-m-b-24 border-bottom">
|
|
<view class="title">打印机状态</view>
|
|
<view class="">
|
|
<my-switch v-model="form.status"></my-switch>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view style="height: 60rpx;"></view>
|
|
<view class="">
|
|
<view class="btn">
|
|
<my-button shape="circle" @click="save">保存</my-button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import go from '@/commons/utils/go.js';
|
|
import pickerItem from './components/picker-item.vue';
|
|
import myRadioGroup from './components/my-radio-group.vue';
|
|
|
|
import { devices, subTypes, brand, receipts,connectionType } from '@/pagePrinter/devices.js'
|
|
import { getPrinterDetail, addPrinter, updatePrinter } from '@/http/api/printer.js'
|
|
import { categoryPage } from '@/http/api/cateGory.js'
|
|
|
|
const pageData = reactive({
|
|
brandList: brand, // 打印机品牌列表
|
|
receiptsList: receipts, // 小票
|
|
connectionTypeList: connectionType, // 类型
|
|
deciveSizeList: [ // 小票尺寸
|
|
{ label: '58mm', value: '58mm' },
|
|
{ label: '80mm', value: '80mm' },
|
|
],
|
|
classifyPrintList: [ // 分类打印
|
|
{ label: '打印所有', value: '0' },
|
|
{ label: '部分分类(仅打印制作单[厨房])', value: '1' },
|
|
],
|
|
printQtyList: [ // 打印数量
|
|
{ label: '顾客联+商家联「2张」', value: 'c1m1^2' },
|
|
{ label: '只打印商家联「1张」', value: 'm1^1' },
|
|
{ label: '只打印顾客联「1张」', value: 'c1^1' },
|
|
{ label: '2张顾客联+1张商家联「3张」', value: 'c2m1^3' },
|
|
],
|
|
printMethodList: [ // 打印方式
|
|
{ label: '打印全部', value: 'all' },
|
|
{ label: '仅打印制作单「厨房」', value: 'one' },
|
|
{ label: '仅打印结账单「前台」', value: 'normal' },
|
|
],
|
|
printTypeList: [ // 打印类型
|
|
{ label: '确认退款单', value: 'refund' },
|
|
{ label: '交班单', value: 'handover' },
|
|
{ label: '排队取号', value: 'queue' },
|
|
],
|
|
partList: [], // 部分打印
|
|
})
|
|
|
|
let form = reactive({
|
|
id: null,
|
|
sort: "0",
|
|
status: 1,
|
|
contentType: '',
|
|
subType: '',
|
|
connectionType: "network",
|
|
printType: [],
|
|
name: '',
|
|
receiptSize: '58mm',
|
|
classifyPrint: '0',
|
|
printQty: 'm1^1',
|
|
printMethod: "all",
|
|
selectcheckbox:[]
|
|
|
|
})
|
|
|
|
onLoad((options) => {
|
|
getlist()
|
|
if (options.id) {
|
|
getdetails(options.id)
|
|
} else {
|
|
}
|
|
// Object.assign(option, opt)
|
|
})
|
|
|
|
/**
|
|
* 获取商品分类列表
|
|
*/
|
|
let getlist = async () => {
|
|
const res = await categoryPage({
|
|
page: 1,
|
|
size: 500
|
|
})
|
|
let arr = []
|
|
res.records.forEach(ele => {
|
|
arr.push({
|
|
id: ele.id,
|
|
name: ele.name
|
|
})
|
|
})
|
|
pageData.partList = arr
|
|
}
|
|
|
|
/**
|
|
* 获取打印机详情
|
|
*/
|
|
async function getdetails(id) {
|
|
const res = await getPrinterDetail({id: id})
|
|
if (res.categoryList) {
|
|
let arrs = []
|
|
res.categoryList.forEach(eles => {
|
|
arrs.push(eles)
|
|
})
|
|
res.selectcheckbox = arrs
|
|
}
|
|
form = Object.assign(form, res)
|
|
if(form.printType)form.printType = JSON.parse(form.printType)
|
|
|
|
}
|
|
|
|
|
|
function sizeChange(e, name) {
|
|
form[name] = e.detail.value
|
|
}
|
|
|
|
/**
|
|
* 保存
|
|
*/
|
|
async function save() {
|
|
// 效验
|
|
if (!form.contentType || !form.subType || !form.name || !form.address) {
|
|
uni.$utils.showToast("请输入必填项")
|
|
return
|
|
}
|
|
if (form.classifyPrint == 1 && form.selectcheckbox.length == 0) {
|
|
uni.$utils.showToast("请选择部分分类")
|
|
return
|
|
}
|
|
// 部分分类处理
|
|
if (form.classifyPrint == 1) {
|
|
let idstr = ''
|
|
let arr = []
|
|
form.selectcheckbox.forEach(element => {
|
|
idstr += element + ','
|
|
arr.push(pageData.partList.filter(ele => ele.id == element)[0])
|
|
})
|
|
console.log(form.selectcheckbox)
|
|
form.categoryIds = idstr.substring(0, idstr.length - 1)
|
|
form.categoryIds = JSON.stringify(form.selectcheckbox)
|
|
form.categoryList = JSON.stringify(arr)
|
|
}
|
|
delete form.selectcheckbox;
|
|
form.printType = JSON.stringify(form.printType)
|
|
if (form.id) {
|
|
delete form.createdAt
|
|
delete form.updatedAt
|
|
const res = updatePrinter({
|
|
...form
|
|
})
|
|
} else {
|
|
const res = addPrinter({
|
|
...form
|
|
})
|
|
}
|
|
go.back()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-gray {
|
|
padding: 32rpx 28rpx;
|
|
}
|
|
|
|
.block {
|
|
background-color: #fff;
|
|
padding: 32rpx 24rpx;
|
|
border-radius: 18rpx;
|
|
margin-bottom: 32rpx;
|
|
box-shadow: 0 0 5px #eee;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.fixed_b {
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
bottom: calc(env(safe-area-inset-bottom) + 10rpx);
|
|
/* #ifdef H5 */
|
|
bottom: 30rpx;
|
|
/* #endif */
|
|
}
|
|
</style> |