cashier_admin_app/pageDevice/autoPos/edit.vue

<template>
  <view class="page-wrapper jeepay-edit-form">
	  
	  <JeepayCustomNavbar :title=" vdata.isAdd? '绑定智能POS' : '修改智能POS信息'" 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>
		
		<uni-forms-item required label="选择应用" name="appId">
		   <JeepayBizsPopupView :hasTitle="false"  bizType="mchApp" v-model:value="vdata.formData.appId" :showName="vdata.bindAppName" />
		</uni-forms-item>
		
		<uni-forms-item required label="选择门店" name="storeId">
			<JeepayBizsPopupView :hasTitle="false" bizType="store" v-model:value="vdata.formData.storeId" :showName="vdata.bindStoreName" />
		</uni-forms-item>
		
	 <JeepayTableListItem title="状态" subtitle="状态禁用后, 设备将无法使用">
		<template #titleRight>
			<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false'  />
		</template>
	 </JeepayTableListItem>
	 
	 
    </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 formRef = ref()

onLoad((options) => {
	
	// 修改页面 
	if(options.deviceId){
		vdata.isAdd = false
		vdata.deviceId = options.deviceId
		reqLoad.getById(API_URL_SYS_DEVICE_LIST, vdata.deviceId).then(({bizData}) => {
			vdata.formData = bizData
			vdata.bindAppName = bizData.appName
			vdata.bindStoreName = bizData.storeName
		})
	}
	
	// 参数赋值。 
	if(options.deviceNo){
		vdata.formData.deviceNo = options.deviceNo
	}
	
	
})

	
const rules = {
	appId: {
		rules:[ formUtil.rules.requiredSelect('应用') ],
	},
	storeId: {
		rules:[ formUtil.rules.requiredSelect('门店') ],
	},
	deviceNo: {
		rules:[ formUtil.rules.requiredInput('') ],
	},
	deviceName: {
		rules:[ formUtil.rules.requiredInput('') ],
	},
}


const vdata = reactive({
	
	
	deviceId: null, // 新建 or 修改 
	
	isAdd: true, // 是否新增页面
	
	bindAppName: '',
	bindStoreName: '',
	
	 // 表单数据 
	formData: {
		state: 1 // 默认启用
	}
	
})

function confirmFunc(){
	
	formUtil.validate(formRef.value).then(() => {
		
		let reqData = Object.assign({}, vdata.formData)
		reqData.deviceType = 4 // 1-云喇叭, 2-云打印, 3-扫码pos, 4-智能pos, 5-收银插件
		
		return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, reqData)
	})
	.then(( {bizData} ) => {
		emit.pageEmit(emit.ENAME_REF_AUTOPOS_LIST) // 更新列表
		go.back(1, emit.ENAME_REF_AUTOPOS_DETAIL) // 返回详情 && 更新详情 && search
	})
	
}


</script>

<style lang="scss">
input {
  font-size: 32rpx;
}
.selected-sex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #b3b3b3;
  image {
    flex-shrink: 0;
    width: 120rpx;
    height: 120rpx;
  }
}
.line {
  margin-bottom: 20rpx;
}
.confirm-wrapper {
  padding: 50rpx 30rpx;
  .confirm-button {
    height: 110rpx;
    color: #fff;
    border-radius: 20rpx;
    background: $jeepay-bg-primary;
  }
}
.align-top {
  align-items: flex-start;
  padding: 40rpx 0;
  height: auto;
  min-height: auto;
  image {
    width: 120rpx;
    height: 40rpx;
    transform: rotate(90deg);
  }
}
.border-tb {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 90vw;
    height: 1rpx;
    background-color: #ededed;
  }
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 90vw;
    height: 1rpx;
    background-color: #ededed;
  }
}
</style>