您现在的位置是：首页 > 开发开发
远程下拉selected
2025-06-19 15:17:44【开发】人已围观
简介buildadmin实现远程下拉菜单，选择后自动填充会员信息；渲染json数据，自动增减；自动根据单价及数量计算总价格监听实时变动；输入设备编号自动生成订单号
buildadmin实现远程下拉菜单，选择后自动填充会员信息；渲染json数据，自动增减；自动根据单价及数量计算总价格监听实时变动；输入设备编号自动生成订单号
后台php方法
<FormItem :label="t('会员')" type="remoteSelect"
v-model="state.remoteSelect"
:input-attr="{
pk: 'id',
field: 'remarks',
remoteUrl: '/admin/member.Card/index',
onRow: onRemoteSelectRow,
//onChange: onRemoteChange,
tooltipParams: {
ID: 'id',
姓名: 'remarks',
手机: 'phone',
卡号: 'card_id',
}
}"
prop="member_id" :placeholder="t('请选择会员')" />
<FormItem
:label="t('order.manage.order_detail')"
type="array"
v-model="state.array"
:input-attr="{
keyTitle: '产品代码',
valueTitle: '数量(负数)',
}"
prop="order_detail"
blockHelp="白皮:rsjjd, 粉皮:xjd15m, 盒装油:yjymzy, 瓶装油:yjymzy6580"
/>
//获取产品
const getPrduct = () => {
createAxios({
url: '/admin/Products/getProducts',
method: 'get',
}).then((res) => {
const formattedData = res.data.map((item: any) => {
item.key = item.code
item.value = '-1'
return item
})
state.array = formattedData
state.array1 = res.data
})
}
//计算订单金额
interface ProductItem {
key: string
value: string
cost_price?: number // 如果 price 是可选字段
code?: string // 如果 code是可选字段
name?: string // 如果 name是可选字段
}
const orderTotal = () => {
let total = 0
let name = ''
let detail: { [key: string]: number } = {} // 修改此处类型定义
forEach<ProductItem>(state.array, (item: ProductItem) => {
forEach<ProductItem>(state.array1, (item1: ProductItem) => {
if (item.value !== '0' && item.value !== '' && item.value !== null && item.key == item1.code) {
const valueNum = parseFloat(item.value)
const priceNum = parseFloat(item1.cost_price?.toString() || '0')
total += valueNum * priceNum
name += item1.name + ' x ' + Math.abs(valueNum) + ','
detail[item.key] = valueNum
}
})
})
//return Math.abs(total)
baTable.form.items!.order_detail = detail
baTable.form.items!.order_money = Math.abs(total)
baTable.form.items!.order_name = name.substring(0,name.length-1)
}
const state = reactive({
remoteSelect: '',//默认项
select: '录入',
//remoteSelects: ['1'],
array:[],
array1:[],
detail:[],
//array: [{key: 'rsjjd', value: '-1' },{key: 'xjd15m', value: '-1' },{key: 'yjymzy6580', value: '-1' },{key: 'yjymzy', value: '-1' }],//{ key: '这里是key', value: '这里是Value' } 白皮:rsjjd, 粉皮:xjd15m, 盒装油:yjymzy, 瓶装:yjymzy6580
})
const onRemoteSelectRow = (rowData: any) => {
baTable.form.items!.member_id = rowData.id
baTable.form.items!.out_user_id = rowData.phone
baTable.form.items!.user_id = rowData.card_id
}
//自动生产订单号
const generateTimestamp = () => {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
return `${year}${month}${day}${hours}${minutes}${seconds}`
}
// 监听 device_id 并生成 order_id
watch(
() => baTable.form.items!.device_id,
(newDeviceId) => {
if (newDeviceId) {
const timestamp = generateTimestamp()
baTable.form.items!.order_id = `${timestamp}${newDeviceId}`
}
}
)
watchEffect(() => {
//baTable.form.items!.order_detail = state.detail
orderTotal()
})
//组件挂载后检查是否已有 device_id 并生成 order_id
onMounted(() => {
if (baTable.form.items!.device_id) {
const timestamp = generateTimestamp()
baTable.form.items!.order_id = `${timestamp}${baTable.form.items!.device_id}`
}
getPrduct() // 在组件挂载后请求数据
})
后台php方法
public function getProducts(): void
{
$list = $this->model->field('code,name,cost_price')->select();
$this->success('success', $list);
}
很赞哦！ ()
下一篇：返回列表
相关文章
-
无相关信息
