修改检测脚本页面

frontend/src/views/machine/testScript/components/testScriptPopup.vue

@@ -1,158 +1,170 @@
-
 <template>
-  <el-dialog  :title="dialogTitle"
-              v-model='dialogVisible' 
-              @close="close" 
-              v-bind="dialogBig" 
-              width="1400px">
-    <div class="dialog-content" >
-              <el-form :model='formContent' label-width="auto" class="form-three ">
-                      <el-divider >基础信息</el-divider>      
-                      <el-form-item label="脚本名称"  prop='name'>
-                          <el-input v-model='formContent.name' />
-                      </el-form-item>
-                      <el-form-item label="参照标准名称"  prop='standardName'>
-                          <el-input v-model='formContent.standardName' />
-                      </el-form-item>
-                      <el-form-item label="标准推行年份"  prop='standardTime'>
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
+        <TestScriptDetail :options="secondLevelOptions" />
+        <template #footer>
+            <div>
+                <el-button @click="close()">取 消</el-button>
+                <el-button type="primary" @click="save()">保存脚本</el-button>
+                <!-- <el-button type="primary" @click='save()'>脚本另存为</el-button> -->
+            </div>
+        </template>
+
+        <el-dialog
+            title="基础信息"
+            v-model="basicInformation"
+            @close="closeInformation"
+            v-bind="dialogBig"
+            width="500px"
+        >
+            <div class="dialog-content">
+                <el-form :model="formContent" label-width="auto" class="form-one">
+                    <el-form-item label="脚本名称" prop="name">
+                        <el-input v-model.trim="formContent.name" placeholder="请输入脚本名称" clearable />
+                    </el-form-item>
+                    <el-form-item label="参照标准名称" prop="standardName">
+                        <el-input v-model.trim="formContent.standardName" placeholder="请输入参照标准名称" clearable />
+                    </el-form-item>
+                    <el-form-item label="标准推行年份" prop="standardTime">
                         <el-date-picker
-                                    v-model="formContent.standardTime"
-                                    type="year"
-                                    placeholder="请选择标准推行年份"
-                                    />
-                      </el-form-item>
-              </el-form>
-    </div>
-    <TestScriptDetail :options="secondLevelOptions" />
-    <template #footer>
-        <div >
-          <el-button @click='close()'>取 消</el-button>
-          <el-button type="primary" @click='save()'>保存脚本</el-button>
-          <el-button type="primary" @click='save()'>脚本另存为</el-button>
-        </div>
-    </template>
-  </el-dialog>
-
-
+                            v-model="formContent.standardTime"
+                            type="year"
+                            placeholder="请选择标准推行年份"
+                        />
+                    </el-form-item>
+                    <el-form-item label="检测脚本值类型">
+                        <el-select v-model="formContent.selectedValue" filterable clearable placeholder="请选择值类型">
+                            <el-option
+                                v-for="item in dictStore.getDictData('Script_Value_Type')"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <template #footer>
+                <div>
+                    <el-button @click="closeInformation()">取 消</el-button>
+                    <el-button type="primary">确定</el-button>
+                    <!-- <el-button type="primary" @click='save()'>脚本另存为</el-button> -->
+                </div>
+            </template>
+        </el-dialog>
+    </el-dialog>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { dialogBig } from '@/utils/elementBind'
-import {  computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useDictStore } from '@/stores/modules/dict'
-import TestScriptDetail from '@/views/machine/testScript/components/testScriptDetail.vue';
-import { type TestScript } from '@/api/device/interface/testScript';
-import type { Dict } from '@/api/system/dictionary/interface';
-import {getDictTreeList} from '@/api/system/dictionary/dictTree'
-import type { CascaderOption } from 'element-plus';
+import TestScriptDetail from '@/views/machine/testScript/components/testScriptDetail.vue'
+import { type TestScript } from '@/api/device/interface/testScript'
+import type { Dict } from '@/api/system/dictionary/interface'
+import { getDictTreeList } from '@/api/system/dictionary/dictTree'
+import type { CascaderOption } from 'element-plus'
 const modeId = ref()
-const secondLevelOptions: any[] = [];
-
+const secondLevelOptions: any[] = []
+const basicInformation: boolean = ref(false)
 // 定义弹出组件元信息
 const dialogFormRef = ref()
 const dictStore = useDictStore()
-  function useMetaInfo() {
+function useMetaInfo() {
     const dialogVisible = ref(false)
     const titleType = ref('add')
     const formContent = ref<TestScript.ResTestScript>({
-        name: '',   
+        name: '',
         type: '',
-        valueType:'',
+        valueType: '',
         pattern: modeId.value,
         standardName: '',
         standardTime: '',
-        state:1,
-
+        state: 1,
+        selectedValue: ''
     })
-    return { dialogVisible, titleType,formContent }
-  }
-  
-  const { dialogVisible, titleType,formContent } = useMetaInfo()
+    return { dialogVisible, titleType, formContent }
+}
 
-  let dialogTitle = computed(() => {
+const { dialogVisible, titleType, formContent } = useMetaInfo()
+
+let dialogTitle = computed(() => {
     return titleType.value === 'add' ? '新增检测脚本' : '编辑检测脚本'
-  })
-  
-  // 清空formContent
-  const resetFormContent = () => {
+})
+
+// 清空formContent
+const resetFormContent = () => {
     formContent.value = {
-        name: '',   
+        name: '',
         type: '',
-        valueType:'',
+        valueType: '',
         pattern: modeId.value,
         standardName: '',
         standardTime: '',
-        state:1,
+        state: 1
     }
-  }
+}
 
-  // 关闭弹窗
-  const close = () => {
+// 关闭弹窗
+const close = () => {
     dialogVisible.value = false
     // 清空dialogForm中的值
     resetFormContent()
     // 重置表单
     dialogFormRef.value?.resetFields()
-    
-  }
-  
-  // 保存数据
-  const save = () => {
-    
+}
+// 关闭信息弹框
+const closeInformation = () => {
+    basicInformation.value = false
 }
 
+// 保存数据
+const save = () => {
+    basicInformation.value = true
+}
 
 // 打开弹窗，可能是新增，也可能是编辑
-const open = async (sign: string,row: any,currentMode: string,id:string) => {
-      const dictCode = '测试脚本字典表'; // 替换为实际需要的字典代码
-      const resDictTree: Dict.ResDictTree = {
+const open = async (sign: string, row: any, currentMode: string, id: string) => {
+    const dictCode = '测试脚本字典表' // 替换为实际需要的字典代码
+    const resDictTree: Dict.ResDictTree = {
         name: dictCode,
         id: '',
         pid: '',
         pids: '',
         code: '',
         sort: 0
-      };
-      const result = await getDictTreeList(resDictTree);
-      //allOptions.value = convertToOptions(result.data as Dict.ResDictTree[]);
-      const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
-      // 提取第二层节点
-      allOptions.forEach(option => {
-            if (option.children && option.children.length > 0) {
-              secondLevelOptions.push(...option.children);
-            }
-          });    
+    }
+    const result = await getDictTreeList(resDictTree)
+    const allOptions = convertToOptions(result.data as Dict.ResDictTree[])
 
-          //console.log('secondLevelOptions',secondLevelOptions);
+    secondLevelOptions.push(...(allOptions[0]?.children || []))
 
-    if(id != ''){//新增的时候才会重新赋值值类型
-      formContent.value.valueType = id
+    //console.log('secondLevelOptions',secondLevelOptions);
+
+    if (id != '') {
+        //新增的时候才会重新赋值值类型
+        formContent.value.valueType = id
     }
     titleType.value = sign
-    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id;
-
+    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
 
     // 重置表单
     dialogFormRef.value?.resetFields()
     dialogVisible.value = true
 }
 
-  // 转换函数
-  const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
+// 转换函数
+const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
     return dictTree.map(item => ({
         value: item.id,
         label: item.name,
         children: item.children ? convertToOptions(item.children) : undefined
-    }));
-    };
-  
+    }))
+}
+
 // 对外映射
 defineExpose({ open })
-
-
-
 </script>
 <style scoped>
 /* .dialog-content {
   padding: 10px;
 } */
-</style>
+</style>