cashier_app/pageDevice/printer/edit.vue

<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>