修改 检测脚本新增页面

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

@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import type { Dict } from '@/api/system/dictionary/interface'
-import { getDictTreeList } from '@/api/system/dictionary/dictTree'
+import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
 interface TabOption {
     label: string
     name: string
@@ -58,15 +58,7 @@ const props = defineProps({
 })
 const tableData = ref<any[]>([])
 onMounted(async () => {
-    const resDictTree: Dict.ResDictTree = {
-        name: '脚本-误差',
-        id: '',
-        pid: '',
-        pids: '',
-        code: 'Script_Error',
-        sort: 0
-    }
-    let data = await getDictTreeList(resDictTree)
+    let data = await getDictTreeByCode({ code: 'Script_Error' })
 
     data.data[0].children.forEach((item: any, i: number) => {
         tableData.value.push({

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

@@ -1,23 +1,7 @@
 <template>
-    <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-card style="margin-bottom: 10px" class="cardTop">
+            <el-form :model="formContent" :inline="true" label-width="auto" class="form-five">
                 <el-form-item label="脚本名称" prop="name">
                     <el-input v-model.trim="formContent.name" placeholder="请输入脚本名称" clearable />
                 </el-form-item>
@@ -25,11 +9,7 @@
                     <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" type="year" placeholder="请选择标准推行年份" />
                 </el-form-item>
                 <el-form-item label="检测脚本值类型">
                     <el-select v-model="formContent.selectedValue" filterable clearable placeholder="请选择值类型">
@@ -41,35 +21,37 @@
                         />
                     </el-select>
                 </el-form-item>
+                <el-form-item>
+                    <div class="formBut">
+                        <el-button type="primary" :icon="Select" @click="save">保存</el-button>
+                        <el-button :icon="Close" @click="close">返回</el-button>
+                    </div>
+                </el-form-item>
             </el-form>
+        </el-card>
+        <el-card>
+            <TestScriptDetail :options="secondLevelOptions" v-if="show" />
+        </el-card>
     </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">
-import { dialogBig } from '@/utils/elementBind'
-import { computed, ref } from 'vue'
+import { 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 { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
 import type { CascaderOption } from 'element-plus'
+import { Select, Close } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
 const modeId = ref()
+const show = ref(false)
+const router = useRouter()
 const secondLevelOptions: any[] = []
-const basicInformation: boolean = ref(false)
 // 定义弹出组件元信息
 const dialogFormRef = ref()
 const dictStore = useDictStore()
 function useMetaInfo() {
-    const dialogVisible = ref(false)
     const titleType = ref('add')
     const formContent = ref<TestScript.ResTestScript>({
         name: '',
@@ -81,14 +63,10 @@ function useMetaInfo() {
         state: 1,
         selectedValue: ''
     })
-    return { dialogVisible, titleType, formContent }
+    return { titleType, formContent }
 }
 
-const { dialogVisible, titleType, formContent } = useMetaInfo()
-
-let dialogTitle = computed(() => {
-    return titleType.value === 'add' ? '新增检测脚本' : '编辑检测脚本'
-})
+const { titleType, formContent } = useMetaInfo()
 
 // 清空formContent
 const resetFormContent = () => {
@@ -101,55 +79,44 @@ const resetFormContent = () => {
         standardTime: '',
         state: 1
     }
+    router.go(-1)
 }
 
 // 关闭弹窗
 const close = () => {
-    dialogVisible.value = false
     // 清空dialogForm中的值
     resetFormContent()
     // 重置表单
     dialogFormRef.value?.resetFields()
 }
 // 关闭信息弹框
-const closeInformation = () => {
-    basicInformation.value = false
-}
+const closeInformation = () => {}
 
 // 保存数据
-const save = () => {
-    basicInformation.value = true
-}
+const save = () => {}
 
 // 打开弹窗，可能是新增，也可能是编辑
 const open = async (sign: string, row: any, currentMode: string, id: string) => {
-    const dictCode = 'Script_Indicator_Items' // 替换为实际需要的字典代码
-    const resDictTree: Dict.ResDictTree = {
-        name: '',
-        id: '',
-        pid: '',
-        pids: '',
-        code: dictCode,
-        sort: 0
-    }
-    const result = await getDictTreeByCode(resDictTree)
+ 
+    const result = await getDictTreeByCode({ code: 'Script_Indicator_Items' })
+
     const allOptions = convertToOptions(result.data as Dict.ResDictTree[])
-
     secondLevelOptions.push(...(allOptions[0]?.children || []))
-
-    //console.log('secondLevelOptions',secondLevelOptions);
-
     if (id != '') {
         //新增的时候才会重新赋值值类型
         formContent.value.valueType = id
     }
     titleType.value = sign
     modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
-
+    show.value = true
     // 重置表单
     dialogFormRef.value?.resetFields()
-    dialogVisible.value = true
 }
+onMounted(() => {
+    console.log(router.options.history.state)
+    let data: any = router.options.history.state
+    open(data.title, data.row, data.mode, data.id)
+})
 
 // 转换函数
 const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
@@ -163,8 +130,38 @@ const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
 // 对外映射
 defineExpose({ open })
 </script>
-<style scoped>
+<style lang="scss" scoped>
 /* .dialog-content {
   padding: 10px;
 } */
+:deep(.cardTop) {
+    .el-card__body {
+        padding: 20px 0 0 20px;
+    }
+}
+.formBut {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+}
+.form-five {
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: space-between;
+    .el-form-item {
+        display: flex;
+        width: 19%;
+
+        .el-form-item__content {
+            flex: 1;
+
+            .el-select,
+            .el-cascader,
+            .el-input__inner,
+            .el-date-editor {
+                width: 100%;
+            }
+        }
+    }
+}
 </style>