first
This commit is contained in:
216
pagePrinter/add-printer/add-printer.vue
Normal file
216
pagePrinter/add-printer/add-printer.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="page-gray color-333 u-font-28">
|
||||
<view class="block">
|
||||
<picker-item title="打印机类型" v-model="brands.selIndex" rangeKey="name" :list="brands.list"></picker-item>
|
||||
<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">
|
||||
<label class="radio u-m-r-60" v-for="(item,index) in deciveSize.list" :key="index">
|
||||
<radio :value="''+index" :checked="index === deciveSize.selIndex" class="scale7" />
|
||||
<text>{{item.label}}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</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.form"
|
||||
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.form"
|
||||
placeholder="输入设备号"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
<picker-item title="打印份数" v-model="printerNums.selIndex" rangeKey="label"
|
||||
:list="printerNums.list"></picker-item>
|
||||
<picker-item title="出品模式" v-model="form.config.model" rangeKey="name" rangeValue="value"
|
||||
:list="models"></picker-item>
|
||||
<picker-item title="打印类型" v-model="form.subType" rangeKey="name" rangeValue="value"
|
||||
:list="subTypes"></picker-item>
|
||||
<picker-item title="尾部留空"
|
||||
v-model="form.config.feet" rangeKey="name" rangeValue="value"
|
||||
:list="feets"></picker-item>
|
||||
|
||||
<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.config.autoCut"></my-switch>
|
||||
</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.config.autoCut"></my-switch>
|
||||
</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="">
|
||||
<uni-number-box v-model="form.sort" ></uni-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
||||
<view class="title font-bold">商品分类</view>
|
||||
<view class="u-m-t-16 u-flex u-row-between " @click="categoryShow">
|
||||
<view class="color-333" v-if="form.sort">{{form.sort}}</view>
|
||||
<view class="color-999" v-else>请选择</view>
|
||||
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 60rpx;"></view>
|
||||
<view class="">
|
||||
<view class="btn">
|
||||
<my-button shape="circle" @click="save">保存</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 选择分类 -->
|
||||
<choose-category v-model="chooseCategoryShow"></choose-category>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
devices,
|
||||
models,
|
||||
subTypes
|
||||
} from '@/pagePrinter/devices.js'
|
||||
import {
|
||||
onLoad,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
ref,
|
||||
onBeforeUnmount,
|
||||
reactive,
|
||||
computed,
|
||||
watch
|
||||
} from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import pickerItem from './components/picker-item.vue';
|
||||
import myRadioGroup from './components/my-radio-group.vue';
|
||||
import * as Api from '@/http/yskApi/devices.js'
|
||||
import chooseCategory from './components/choose-category.vue';
|
||||
|
||||
//选择分类
|
||||
let chooseCategoryShow=ref(false)
|
||||
function categoryShow(){
|
||||
chooseCategoryShow.value=true
|
||||
}
|
||||
|
||||
//品牌
|
||||
const brands = reactive({
|
||||
list: devices,
|
||||
selIndex: '',
|
||||
})
|
||||
|
||||
//设备尺寸
|
||||
const deciveSize = reactive({
|
||||
list: [{
|
||||
label: '58mm',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '80mm',
|
||||
value: '1'
|
||||
},
|
||||
],
|
||||
selIndex: 1
|
||||
})
|
||||
|
||||
function sizeChange(e) {
|
||||
deciveSize.selIndex = e.detail.value
|
||||
}
|
||||
|
||||
//打印份数
|
||||
const printerNums = reactive({
|
||||
list: new Array(4).fill(1).map((v, index) => {
|
||||
return {
|
||||
label: index * 1 + 1 + '份',
|
||||
value: '' + index
|
||||
}
|
||||
}),
|
||||
selIndex: 0
|
||||
})
|
||||
//尾部留空
|
||||
const feets = ref([0,1,2,3,4,5,8].map(v=>{
|
||||
return v+'行'
|
||||
}))
|
||||
|
||||
const form = reactive({
|
||||
id: '',
|
||||
contentType: '',
|
||||
config: {
|
||||
width: '80mm', // 设备尺寸
|
||||
printerNum: 1, //打印份数
|
||||
categoryList: '', // 商品分类
|
||||
model: 'normal', // 出品模式,
|
||||
feet: '0',
|
||||
autoCut: 0
|
||||
},
|
||||
name: '',
|
||||
subType: 'kitchen', // 打印类型
|
||||
status: 0,
|
||||
sort: ''
|
||||
})
|
||||
|
||||
function save() {
|
||||
|
||||
}
|
||||
watch(() => form.config.model, (newval) => {
|
||||
console.log(newval);
|
||||
})
|
||||
|
||||
const option = reactive({})
|
||||
|
||||
onLoad((opt) => {
|
||||
console.log(opt);
|
||||
Object.assign(option, opt)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
})
|
||||
onShow(() => {})
|
||||
</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>
|
||||
46
pagePrinter/add-printer/components/choose-category.vue
Normal file
46
pagePrinter/add-printer/components/choose-category.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<my-mask :show="modelValue">
|
||||
<view class="bg-fff content">
|
||||
<view class="u-flex u-row-between u-p-30">
|
||||
<view>选择分类</view>
|
||||
<view>
|
||||
<uni-icons @click="changeShow" type="closeempty"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" style="height: 70vh;">
|
||||
|
||||
</scroll-view>
|
||||
<view class="u-flex u-row-between gap-20 u-p-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="cancel" @tap="changeShow">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button>确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</my-mask>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props=defineProps({
|
||||
modelValue:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emits=defineEmits(['update:modelValue'])
|
||||
function changeShow(isShow){
|
||||
const show=isShow?true:false
|
||||
emits('update:modelValue',show)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
70
pagePrinter/add-printer/components/my-radio-group.vue
Normal file
70
pagePrinter/add-printer/components/my-radio-group.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<radio-group class="u-flex u-flex-wrap" @change="change">
|
||||
<label class="radio u-m-r-60" v-for="(item,itemIndex) in list" :key="index">
|
||||
<radio :value="index" :checked="itemChecked(item,itemIndex)" class="scale7" />
|
||||
<text>{{item.label}}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
rangeValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
rangeKey: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
function itemChecked(item,itemIndex){
|
||||
if(!props.rangeValue){
|
||||
return itemIndex==index.value
|
||||
}
|
||||
return item[props.rangeValue]=props.list[index.value][props.rangeKey]
|
||||
}
|
||||
function findIndex() {
|
||||
return props.list.findIndex(v => v[props.rangeValue] == props.modelValue)
|
||||
}
|
||||
|
||||
function findValue() {
|
||||
return props.list[index.value][props.rangeValue]
|
||||
}
|
||||
const computedIndex = props.rangeValue ? findIndex() : props.modelValue
|
||||
const index = ref(computedIndex)
|
||||
const emits = defineEmits(['update:modelValue'], )
|
||||
watch(() => index.value, (newval) => {
|
||||
const value = props.rangeValue ? findValue() : newval
|
||||
console.log(value);
|
||||
emits('update:modelValue', value)
|
||||
})
|
||||
|
||||
function change(e) {
|
||||
index.value = e.detail.value
|
||||
}
|
||||
const selText = computed(() => {
|
||||
const item = props.list[index.value]
|
||||
return item ? item[props.rangeKey] : ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
87
pagePrinter/add-printer/components/picker-item.vue
Normal file
87
pagePrinter/add-printer/components/picker-item.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
||||
<view class="title font-bold">{{title}}</view>
|
||||
<picker
|
||||
@change="change"
|
||||
:range-key="rangeKey"
|
||||
:value="index"
|
||||
:range="list">
|
||||
<view class="u-m-t-16 u-flex u-row-between ">
|
||||
<view class="color-333" v-if="selText">{{selText}}</view>
|
||||
<view class="color-999" v-else>请选择</view>
|
||||
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
ref, watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
rangeValue:{
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
rangeKey:{
|
||||
type:String,
|
||||
default:'label'
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
function isObj(obj){
|
||||
return typeof obj ==='object'
|
||||
}
|
||||
function findIndex(){
|
||||
return props.list.findIndex(v=>{
|
||||
if(isObj(v)){
|
||||
return v[props.rangeValue]==props.modelValue
|
||||
}else{
|
||||
return v==props.modelValue
|
||||
}
|
||||
})
|
||||
}
|
||||
function findValue(){
|
||||
const item=props.list[index.value]
|
||||
if(isObj(item)){
|
||||
return item[props.rangeValue]
|
||||
}else{
|
||||
return item
|
||||
}
|
||||
}
|
||||
const computedIndex=props.rangeValue? findIndex(): props.modelValue
|
||||
const index = ref(computedIndex)
|
||||
const emits = defineEmits(['update:modelValue'], )
|
||||
watch(()=>index.value,(newval)=>{
|
||||
const value=props.rangeValue?findValue() :newval
|
||||
console.log(value);
|
||||
emits('update:modelValue',value)
|
||||
})
|
||||
function change(e){
|
||||
index.value=e.detail.value
|
||||
}
|
||||
const selText=computed(()=>{
|
||||
const item=props.list[index.value]
|
||||
if(item&&isObj(item)){
|
||||
return item?item[props.rangeKey]:''
|
||||
}else{
|
||||
return item
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user