修改检测脚本页面

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

@@ -1,7 +1,14 @@
 <template>
     <div>
         <el-card style="margin-bottom: 10px" class="cardTop">
-            <el-form :model="formContent" :inline="true" label-width="auto" class="form-five">
+            <el-form
+                :model="formContent"
+                :inline="true"
+                label-width="auto"
+                ref="dialogFormRef"
+                :rules="rules"
+                class="form-five"
+            >
                 <el-form-item label="脚本名称" prop="name">
                     <el-input v-model.trim="formContent.name" placeholder="请输入脚本名称" clearable />
                 </el-form-item>
@@ -9,10 +16,22 @@
                     <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-date-picker
+                        v-model="formContent.standardTime"
+                        style="width: 100%"
+                        type="year"
+                        format="YYYY"
+                        value-format="YYYY"
+                        placeholder="请选择标准推行年份"
+                    />
                 </el-form-item>
-                <el-form-item label="检测脚本值类型">
-                    <el-select v-model="formContent.selectedValue" filterable clearable placeholder="请选择值类型">
+                <el-form-item label="模版类型" prop="type">
+                    <el-select v-model="formContent.type" filterable clearable placeholder="请选择模版类型">
+                        <el-option v-for="item in stencil" :key="item.value" :label="item.name" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="检测脚本值类型" prop="valueType">
+                    <el-select v-model="formContent.valueType" filterable clearable placeholder="请选择值类型">
                         <el-option
                             v-for="item in dictStore.getDictData('Script_Value_Type')"
                             :key="item.id"
@@ -29,13 +48,13 @@
                 </el-form-item>
             </el-form>
         </el-card>
-        <el-card>
-            <TestScriptDetail :options="secondLevelOptions" v-if="show" />
+        <el-card v-if="show">
+            <TestScriptDetail :options="secondLevelOptions" :scriptId="scriptId" />
         </el-card>
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, nextTick } 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'
@@ -43,10 +62,12 @@ import type { Dict } from '@/api/system/dictionary/interface'
 import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
 import type { CascaderOption } from 'element-plus'
 import { Select, Close } from '@element-plus/icons-vue'
+import { pqScriptAdd, pqScriptUpdate } from '@/api/device/testScript'
 import { useRouter } from 'vue-router'
 const modeId = ref()
 const show = ref(false)
 const router = useRouter()
+const scriptId = ref('46296b72528f805376e362df594fc669')
 const secondLevelOptions: any[] = []
 // 定义弹出组件元信息
 const dialogFormRef = ref()
@@ -61,10 +82,21 @@ function useMetaInfo() {
         standardName: '',
         standardTime: '',
         state: 1,
-        selectedValue: ''
+        valueType: ''
     })
     return { titleType, formContent }
 }
+const stencil = [
+    { name: '脚本', value: 0 },
+    { name: '模版', value: 1 }
+]
+const rules = {
+    name: [{ required: true, message: '请输入脚本名称', trigger: 'blur' }],
+    standardName: [{ required: true, message: '请输入参照标准名称', trigger: 'blur' }],
+    standardTime: [{ required: true, message: '请选择标准推行年份', trigger: 'change' }],
+    type: [{ required: true, message: '请选择模版类型', trigger: 'change' }],
+    valueType: [{ required: true, message: '请选择检测脚本值类型', trigger: 'change' }]
+}
 
 const { titleType, formContent } = useMetaInfo()
 
@@ -74,14 +106,13 @@ const resetFormContent = () => {
         name: '',
         type: '',
         valueType: '',
-        pattern: modeId.value,
+        pattern: '',
         standardName: '',
         standardTime: '',
         state: 1
     }
     router.go(-1)
 }
-
 // 关闭弹窗
 const close = () => {
     // 清空dialogForm中的值
@@ -93,29 +124,62 @@ const close = () => {
 const closeInformation = () => {}
 
 // 保存数据
-const save = () => {}
+const save = () => {
+    // dialogFormRef
+    dialogFormRef.value.validate(valid => {
+        if (valid) {
+            if (titleType.value == '新增检测脚本') {
+                formContent.value.pattern = modeId.value
+                pqScriptAdd(formContent.value).then(res => {
+                    if (res.code === 'A0000') {
+                        ElMessage.success({ message: res.message })
+                        // scriptId.value = res.data
+                        scriptId.value = '46296b72528f805376e362df594fc669'
+                        show.value = true
+                    }
+                })
+            } else {
+                pqScriptUpdate(formContent.value).then(res => {
+                    if (res.code === 'A0000') {
+                        ElMessage.success({ message: res.message })
+                    }
+                })
+            }
+        }
+    })
+}
 
 // 打开弹窗，可能是新增，也可能是编辑
-const open = async (sign: string, row: any, currentMode: string, id: string) => {
- 
-    const result = await getDictTreeByCode({ code: 'Script_Indicator_Items' })
-
-    const allOptions = convertToOptions(result.data as Dict.ResDictTree[])
-    secondLevelOptions.push(...(allOptions[0]?.children || []))
-    if (id != '') {
-        //新增的时候才会重新赋值值类型
-        formContent.value.valueType = id
+const open = async (title: string, row: any) => {
+    titleType.value = title
+    if (title == '新增检测脚本') {
+        show.value = false
+    } else {
+        let list = JSON.parse(row)
+        formContent.value = list
+        scriptId.value = list.id
+        show.value = true
     }
-    titleType.value = sign
-    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
-    show.value = true
+
     // 重置表单
     dialogFormRef.value?.resetFields()
 }
+// 获取树字典
+const treeInfo = async (currentMode: string) => {
+    const result = await getDictTreeByCode({ code: 'Script_Indicator_Items' })
+    const allOptions = convertToOptions(result.data as Dict.ResDictTree[])
+    secondLevelOptions.push(...(allOptions[0]?.children || []))
+    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
+}
+
 onMounted(() => {
-    console.log(router.options.history.state)
     let data: any = router.options.history.state
-    open(data.title, data.row, data.mode, data.id)
+    console.log('🚀 ~ onMounted ~ data:', data)
+    if (data.title == null) return
+    nextTick(async () => {
+        await treeInfo(data.mode)
+        await open(data.title, data.row)
+    })
 })
 
 // 转换函数
@@ -150,11 +214,10 @@ defineExpose({ open })
     // justify-content: space-between;
     .el-form-item {
         display: flex;
-        width: 19%;
+        width: 15.8%;
 
         .el-form-item__content {
             flex: 1;
-
             .el-select,
             .el-cascader,
             .el-input__inner,