修改 检测脚本新增页面

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 = {
+    let data = await getDictTreeByCode({ code: 'Script_Error' })
-        name: '脚本-误差',
-        id: '',
-        pid: '',
-        pids: '',
-        code: 'Script_Error',
-        sort: 0
-    }
-    let data = await getDictTreeList(resDictTree)
 
     data.data[0].children.forEach((item: any, i: number) => {
         tableData.value.push({

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

@@ -1,75 +1,57 @@
 <template>
-    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
+    <div>
-        <TestScriptDetail :options="secondLevelOptions" />
+        <el-card style="margin-bottom: 10px" class="cardTop">
-        <template #footer>
+            <el-form :model="formContent" :inline="true" label-width="auto" class="form-five">
-            <div>
+                <el-form-item label="脚本名称" prop="name">
-                <el-button @click="close()">取 消</el-button>
+                    <el-input v-model.trim="formContent.name" placeholder="请输入脚本名称" clearable />
-                <el-button type="primary" @click="save()">保存脚本</el-button>
+                </el-form-item>
-                <!-- <el-button type="primary" @click='save()'>脚本另存为</el-button> -->
+                <el-form-item label="参照标准名称" prop="standardName">
-            </div>
+                    <el-input v-model.trim="formContent.standardName" placeholder="请输入参照标准名称" clearable />
-        </template>
+                </el-form-item>
-
+                <el-form-item label="标准推行年份" prop="standardTime">
-        <el-dialog
+                    <el-date-picker v-model="formContent.standardTime" type="year" placeholder="请选择标准推行年份" />
-            title="基础信息"
+                </el-form-item>
-            v-model="basicInformation"
+                <el-form-item label="检测脚本值类型">
-            @close="closeInformation"
+                    <el-select v-model="formContent.selectedValue" filterable clearable placeholder="请选择值类型">
-            v-bind="dialogBig"
+                        <el-option
-            width="500px"
+                            v-for="item in dictStore.getDictData('Script_Value_Type')"
-        >
+                            :key="item.id"
-            <div class="dialog-content">
+                            :label="item.name"
-                <el-form :model="formContent" label-width="auto" class="form-one">
+                            :value="item.id"
-                    <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-select>
-                    <el-form-item label="检测脚本值类型">
+                </el-form-item>
-                        <el-select v-model="formContent.selectedValue" filterable clearable placeholder="请选择值类型">
+                <el-form-item>
-                            <el-option
+                    <div class="formBut">
-                                v-for="item in dictStore.getDictData('Script_Value_Type')"
+                        <el-button type="primary" :icon="Select" @click="save">保存</el-button>
-                                :key="item.id"
+                        <el-button :icon="Close" @click="close">返回</el-button>
-                                :label="item.name"
+                    </div>
-                                :value="item.id"
+                </el-form-item>
-                            />
+            </el-form>
-                        </el-select>
+        </el-card>
-                    </el-form-item>
+        <el-card>
-                </el-form>
+            <TestScriptDetail :options="secondLevelOptions" v-if="show" />
-            </div>
+        </el-card>
-            <template #footer>
+    </div>
-                <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 { 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 { 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()
+const { titleType, formContent } = useMetaInfo()
-
-let dialogTitle = computed(() => {
-    return titleType.value === 'add' ? '新增检测脚本' : '编辑检测脚本'
-})
 
 // 清空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 = () => {
+const closeInformation = () => {}
-    basicInformation.value = false
-}
 
 // 保存数据
-const save = () => {
+const save = () => {}
-    basicInformation.value = true
-}
 
 // 打开弹窗，可能是新增，也可能是编辑
 const open = async (sign: string, row: any, currentMode: string, id: string) => {
-    const dictCode = 'Script_Indicator_Items' // 替换为实际需要的字典代码
+ 
-    const resDictTree: Dict.ResDictTree = {
+    const result = await getDictTreeByCode({ code: 'Script_Indicator_Items' })
-        name: '',
+
-        id: '',
-        pid: '',
-        pids: '',
-        code: dictCode,
-        sort: 0
-    }
-    const result = await getDictTreeByCode(resDictTree)
     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>