pqs-9100_client/frontend/src/views/machine/testSource/components/testSourcePopup.vue

<template>
    <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
        <div class="form-grid">
            <el-form :model="formContent" ref='dialogFormRef' :rules='rules'>
                <el-row  :gutter="24" >
                    <el-col :span="8">
                        <el-form-item label="检测源名称" prop="name" :label-width="100">
                            <el-input v-model='formContent.name' placeholder="检测源类型+设备类型简称+数字"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item  label="设备类型" prop="devType" :label-width="100">
                            <el-select v-model='formContent.devType' placeholder="请选择设备类型">
                                        <el-option
                                                v-for="item in dictStore.getDictData('PqSource_Dev_Type')"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id"
                                            />
                                    </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="标准源" prop="type" :label-width="100">
                            <el-select v-model='formContent.type' placeholder="请选择检测源类型">
                                        <el-option
                                                v-for="item in dictStore.getDictData('Pq_Source_Type')"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id"
                                            />
                                    </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
                
        <ParameterTable :parameterStr="formContent.parameter"/>
        <template #footer>
            <div >
                <el-button @click='close()'>取 消</el-button>
                <el-button type="primary" @click='save()'>保存</el-button>
            </div>
        </template>
    </el-dialog>


</template>
  
  <script lang="ts" setup name="ErrorSystemDialog">
  import{ElMessage, type FormInstance,type FormItemRule}from'element-plus'
  import { defineProps, defineEmits, reactive,watch,ref, Ref, computed } from 'vue';
  import { dialogBig} from '@/utils/elementBind'
  import { addTestSource,updateTestSource,getTestSourceById} from '@/api/device/testSource/index'
  import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue'
  import { useDictStore } from '@/stores/modules/dict'
  import { type TestSource } from '@/api/device/interface/testSource';
  import ParameterTable from '@/views/machine/testSource/components/parameterTable.vue';
  // 定义弹出组件元信息
  const dialogFormRef = ref()
  const dictStore = useDictStore()
  const mode = ref()
  const modeId = ref()


  function useMetaInfo() {
    const dialogVisible = ref(false)
    const titleType = ref('add')
    const formContent = ref<TestSource.ResTestSource>({
        id: '',
        name: '',
        pattern: modeId.value,
        parameter:'',
        type: '',
        devType: '',
        state:1,
    })
    return { dialogVisible, titleType, formContent }
  }
  
  const { dialogVisible, titleType, formContent } = useMetaInfo()
  // 清空formContent
  const resetFormContent = () => {
    formContent.value = {
        id: '',
        name: '',
        pattern: modeId.value,
        parameter:'',
        type: '',
        devType: '',
        state:1,
    }
  }
  
  let dialogTitle = computed(() => {
    return titleType.value === 'add' ? '新增检测源' : '编辑检测源'
  })

    // 定义规则
    const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
    name: [{ required: true, message: '检测源名称必填！', trigger: 'blur' }],
    devType:[{ required: true, message: '请选择一项设备类型', trigger: 'change' },],
    type:[{ required: true, message: '请选择一项检测源类型', trigger: 'change '},]
});    


    // 关闭弹窗
    const close = () => {
        dialogVisible.value = false
        // 清空dialogForm中的值
        resetFormContent()
        // 重置表单
        dialogFormRef.value?.resetFields()
    }
  
    // 保存数据
    const save = () => {
        try {      
            dialogFormRef.value?.validate(async (valid: boolean) => {
            if (valid) {
                if (formContent.value.id) {
                    await updateTestSource(formContent.value);
                    ElMessage.success({ message: `${dialogTitle.value}成功！` })
                } else {  
                    await addTestSource(formContent.value);
                    ElMessage.success({ message: `${dialogTitle.value}成功！` })    
                }            
                close()
                // 刷新表格
                await props.refreshTable!()       

            }
        })
    } catch (err) {
        console.error('验证过程中出现错误', err)
    }
    }

// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: TestSource.ResTestSource,currentMode: string) => {
  titleType.value = sign
  dialogVisible.value = true
  mode.value = currentMode
  modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id;
  if (data.id) {
    const result = await getTestSourceById(data);
    if (result && result.data) {
      formContent.value = result.data as TestSource.ResTestSource;
    }
  } else {
    resetFormContent()
  }
  // 重置表单
  dialogFormRef.value?.resetFields()
}


// 对外映射
defineExpose({ open })
const props = defineProps<{
  refreshTable: (() => Promise<void>) | undefined;
}>()
</script>
<style>
</style>