108 lines
3.3 KiB
Vue
108 lines
3.3 KiB
Vue
<template>
|
||
<a-drawer
|
||
v-model:visible="vdata.drawerVisible"
|
||
:mask-closable="false"
|
||
:title="'修改设备'"
|
||
:body-style="{ paddingBottom: '80px' }"
|
||
width="40%"
|
||
class="drawer-width"
|
||
@close="onClose"
|
||
>
|
||
<a-form v-if="vdata.drawerVisible" ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
|
||
<a-row justify="space-between" type="flex">
|
||
<a-col :span="11">
|
||
<a-form-item label="设备号" name="deviceNo">
|
||
<a-input v-model:value="vdata.saveObject.deviceNo" :disabled="true" placeholder="请输入设备号" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
<div class="drawer-btn-center">
|
||
<a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose"><close-outlined />取消</a-button>
|
||
<a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc"><check-outlined />保存</a-button>
|
||
</div>
|
||
|
||
<!-- 业务参数配置组件 -->
|
||
<BizConfig ref="bizConfigRef" />
|
||
</a-drawer>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { API_URL_STORE_DEVICE, req } from '@/api/manage'
|
||
import { defineProps, reactive, ref, getCurrentInstance } from 'vue'
|
||
import BizConfig from '@/views/device/BizConfig.vue'
|
||
|
||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||
|
||
const props = defineProps({
|
||
callbackFunc: { type: Function, default:null }
|
||
})
|
||
|
||
const infoFormModel = ref()
|
||
const bizConfigRef = ref()
|
||
|
||
const vdata = reactive({
|
||
btnLoading: false,
|
||
saveObject: {} as any, // 数据对象
|
||
recordId: null, // 更新对象ID
|
||
drawerVisible: false, // 是否显示弹层/抽屉
|
||
deviceType: 1 // 1-云喇叭 2-云打印 3-扫码POS
|
||
}) as any
|
||
|
||
function show (record: any) { // 弹层打开事件
|
||
|
||
vdata.deviceType = record.deviceType
|
||
vdata.provider = record.provider
|
||
|
||
vdata.saveObject = { 'state': 1, 'deviceType': record.deviceType } // 设备类型deviceType： 1-云喇叭, 2-云打印
|
||
|
||
if (infoFormModel.value != undefined) {
|
||
infoFormModel.value.resetFields()
|
||
}
|
||
|
||
vdata.recordId = record.deviceId
|
||
req.getById(API_URL_STORE_DEVICE, vdata.recordId).then((res: any) => {
|
||
if(res){
|
||
vdata.saveObject = res
|
||
|
||
// 业务参数配置组件
|
||
let bizConfig = JSON.parse(vdata.saveObject.bizConfigParams || '{}' )
|
||
bizConfigRef.value.pageRender(bizConfig, vdata.deviceType, vdata.provider)
|
||
}
|
||
})
|
||
vdata.drawerVisible = true // 立马展示弹层信息
|
||
}
|
||
|
||
function handleOkFunc () { // 点击【确认】按钮事件
|
||
infoFormModel.value.validate().then((valid: any) =>{
|
||
bizConfigRef.value.getConfigParams().then((bizConfigParams: any) => {
|
||
vdata.btnLoading = true
|
||
|
||
// 赋值
|
||
vdata.saveObject.bizConfigParams = bizConfigParams || ''
|
||
|
||
// 请求接口
|
||
req.updateById(API_URL_STORE_DEVICE, vdata.recordId, vdata.saveObject).then((res: any) => {
|
||
successFunc('修改成功')
|
||
}).catch((err: any) => {
|
||
vdata.btnLoading = false
|
||
})
|
||
})
|
||
})
|
||
}
|
||
|
||
function successFunc(e: string) { // 新增/更新成功
|
||
vdata.btnLoading = false
|
||
$infoBox.message.success(e)
|
||
props.callbackFunc()
|
||
vdata.drawerVisible = false
|
||
}
|
||
|
||
function onClose () { // 关闭抽屉
|
||
vdata.drawerVisible = false
|
||
}
|
||
defineExpose({
|
||
show
|
||
})
|
||
</script>
|