<template>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
@click="dialogVisible = !dialogVisible"
|
>
|
新建设备
|
</el-button>
|
<CardDialog v-model="dialogVisible" title="新建走航设备">
|
<el-form
|
:inline="false"
|
:model="formObj"
|
ref="formRef"
|
:rules="rules"
|
label-position="right"
|
label-width="100px"
|
>
|
<el-form-item label="设备编号" prop="deviceCode">
|
<el-input
|
size="small"
|
clearable
|
v-model="formObj.deviceCode"
|
placeholder="设备编号"
|
/>
|
</el-form-item>
|
<OptionType :show="true" v-model="formObj.deviceType"></OptionType>
|
<el-form-item>
|
<el-button
|
:disabled="!edit"
|
type="primary"
|
@click="onSubmit"
|
:loading="loading"
|
>提交</el-button
|
>
|
<el-button @click="onCancel">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</CardDialog>
|
</template>
|
<script setup>
|
import { ref, reactive, computed } from 'vue';
|
import deviceApi from '@/api/deviceApi';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
import { useFetchData } from '@/composables/fetchData';
|
import { useDeviceStore } from '@/stores/device';
|
|
const deviceStore = useDeviceStore();
|
const dialogVisible = ref(false);
|
const { loading, fetchData } = useFetchData();
|
const rules = reactive({
|
deviceCode: [
|
{
|
required: true,
|
message: '设备编号不能为空',
|
trigger: 'blur'
|
}
|
]
|
});
|
const param = computed(() => {
|
return {
|
deviceType: formObj.value.deviceType,
|
deviceCode: formObj.value.deviceCode
|
};
|
});
|
// 创建设备
|
function createDevice() {
|
fetchData(() => {
|
return deviceApi.putNewDevice(param.value).then(() => {
|
dialogVisible.value = false;
|
deviceStore.fetchDevice();
|
});
|
});
|
}
|
const { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm({
|
submit: {
|
do: createDevice
|
},
|
cancel: {
|
do: () => {
|
dialogVisible.value = false;
|
}
|
}
|
});
|
</script>
|
<style scoped></style>
|
