115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
<template>
|
||
<Dialog
|
||
v-model="visible"
|
||
show-footer
|
||
diaTitle="新增参数对象"
|
||
:width="450"
|
||
@close="closeFun"
|
||
>
|
||
<template #default>
|
||
<TableForm
|
||
ref="tableFormRef"
|
||
tableName="PARAMETER_LIBRARY_FORM"
|
||
:data="formData"
|
||
showDisabled
|
||
@change="changeFun"
|
||
:formAttrs="{
|
||
files: {
|
||
accept: '.json'
|
||
}
|
||
}"
|
||
/>
|
||
<div class="tip">
|
||
<el-tooltip
|
||
placement="top"
|
||
content="例：[{'parameterName': 'parameterName','parameterValue': 'parameterValue', 'unit': 'unit', 'description': 'description'}]"
|
||
>
|
||
<el-icon class="icon" :size="16">
|
||
<Warning />
|
||
</el-icon>
|
||
</el-tooltip>
|
||
<span>参数对象上传的JSON文件格式必须遵守格式要求，否则无法解析！</span>
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="closeFun">取消</el-button>
|
||
<el-button type="primary" @click="onConfirmFun">确定</el-button>
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import Dialog from '@/components/common/dialog/index.vue';
|
||
import TableForm from '@/components/common/table/tableForm.vue';
|
||
import { Warning } from '@element-plus/icons-vue';
|
||
|
||
const emits = defineEmits(['close', 'createFun']);
|
||
const props = defineProps(['libTypeInfo']);
|
||
const visible = ref(true);
|
||
const tableFormRef = ref<any>();
|
||
const formData = ref<any>({});
|
||
|
||
const closeFun = () => {
|
||
emits('close');
|
||
};
|
||
|
||
const onConfirmFun = async() => {
|
||
const valid = await tableFormRef.value?.validateFun();
|
||
if (valid) {
|
||
emits('createFun', formData.value);
|
||
}
|
||
};
|
||
|
||
const changeFun = (data: any) => {
|
||
const { key, val } = data;
|
||
if (key === 'files') {
|
||
formData.value.file = val.raw;
|
||
formData.value.fileName = val.name;
|
||
}
|
||
if (key === 'templateId') {
|
||
formData.value.templateName = val.label;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
if (props.libTypeInfo) {
|
||
formData.value.parameterLibraryName = props.libTypeInfo.libName;
|
||
formData.value.parameterLibraryCategoryName = props.libTypeInfo.name;
|
||
formData.value.parameterLibraryId = props.libTypeInfo.libId;
|
||
formData.value.parameterLibraryCategoryId = props.libTypeInfo.id;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.upload {
|
||
width: 100%;
|
||
}
|
||
.dialog-footer {
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
.tip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-bottom: 10px;
|
||
font-size: 12px;
|
||
line-height: 14px;
|
||
color: var(--el-text-color-secondary);
|
||
.icon {
|
||
color: var(--el-color-danger);
|
||
cursor: pointer;
|
||
}
|
||
span {
|
||
padding-left: 4px;
|
||
}
|
||
}
|
||
</style>
|