源参数

frontend/src/views/machine/testSource/components/parameterPopup.vue

@@ -1,11 +1,156 @@
 <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>