SPDM/src/views/simulation/parameter/components/addParamObject.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>