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

<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle"
             v-bind="dialogSmall" @close="close">
    <div>
      <el-form :model="formContent" ref="dialogFormRef" :rules="rules">
        <el-form-item label="参数所属" prop="pId" :label-width="100">
          <el-tree-select
              v-model="displayPid"
              :data="tableData"
              check-strictly
              :render-after-expand="false"
              show-checkbox
              check-on-click-node
              node-key="id"
              :props="defaultProps"
          />
        </el-form-item>
        <el-form-item label="源参数描述" :label-width="100" prop="sourceParamDesc">
          <el-input v-model="formContent.sourceParamDesc" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="源参数类型" :label-width="100" prop="sourceParamType">
          <el-input v-model="formContent.sourceParamType" autocomplete="off"/>
        </el-form-item>
        <el-form-item v-show="displayPid && displayPid!== '0'" label="源参数值" :label-width="100"
                      prop="sourceParamValue">
          <el-input v-model="formContent.sourceParamValue" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="排序" :label-width="100">
          <el-input-number v-model="formContent.sort" :min='1' :max='999'/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="save()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {defineEmits, reactive, watch} from 'vue'
import {dialogSmall} from "@/utils/elementBind"
import {TestSource} from "@/api/device/interface/testSource"
import {ElMessage, FormItemRule} from "element-plus"

defineProps<{
  tableData: TestSource.ParameterType[]
}>()

const emit = defineEmits(['get-parameter'])

// 计算属性，用于控制显示的 pid
const displayPid = computed({
  get: () => {
    return formContent.pId === '0' ? '' : formContent.pId;
  },
  set: (value) => {
    formContent.pId = value;
  }
});

// 树形节点配置
const defaultProps = {
  children: 'children',
  label: 'sourceParamDesc',
  value: 'id'
};

const dialogFormRef = ref()
const {dialogVisible, titleType, formContent} = useMetaInfo()

function useMetaInfo() {
  const dialogVisible = ref(false)
  const titleType = ref('add')

  const formContent = reactive<TestSource.ParameterType>({
    id: "",
    sourceParamType: "",
    sourceParamDesc: "",
    sourceParamValue: "",
    sort: 100,
    pId: "0",
  })

  return {dialogVisible, titleType, formContent}
}

const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
  sourceParamDesc: [{required: true, message: '源参数描述必填！', trigger: 'blur'}],
  sourceParamType: [{required: true, message: '源参数类型必填！', trigger: 'blur'}],
  sort: [{required: true, message: '排序必填！', trigger: 'blur'}]
})

watch(() => formContent.pId, (newVal, oldVal) => {
  if (newVal !== '0') {
    rules.sourceParamValue = [{required: true, message: '源参数值必填！', trigger: 'blur'}]
  } else {
    rules.sourceParamValue = []
  }
})

let dialogTitle = computed(() => {
  return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
})

const resetFormContent = () => {
  Object.assign(formContent, {
    id: "",
    sourceParamType: "",
    sourceParamDesc: "",
    sourceParamValue: "",
    sort: 100,
    pId: "0",
  })
}
const open = (sign: string, data: TestSource.ParameterType) => {
  // 重置表单
  dialogFormRef.value?.resetFields()
  resetFormContent()

  titleType.value = sign
  dialogVisible.value = true
  if (data.id) {
    Object.assign(formContent, data)
  }
}

const save = () => {
  try {
    dialogFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        let newUpdateParameter = toRaw({...formContent})
        delete newUpdateParameter.children
        emit('get-parameter', newUpdateParameter)
        ElMessage.success({message: `${dialogTitle.value}成功！`})
        close()
      }
    })
  } catch (err) {
    console.error('验证过程中出现错误', err)
  }
}
const close = () => {
  dialogVisible.value = false
  resetFormContent()
  dialogFormRef.value?.resetFields()
}

defineExpose({open})
</script>

<style scoped>

</style>