pqs-9100_client/frontend/src/views/machine/testScript/components/testScriptPopup.vue

<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-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-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">
import { dialogBig } from '@/utils/elementBind'
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'
const modeId = ref()
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: '',
        type: '',
        valueType: '',
        pattern: modeId.value,
        standardName: '',
        standardTime: '',
        state: 1,
        selectedValue: ''
    })
    return { dialogVisible, titleType, formContent }
}

const { dialogVisible, titleType, formContent } = useMetaInfo()

let dialogTitle = computed(() => {
    return titleType.value === 'add' ? '新增检测脚本' : '编辑检测脚本'
})

// 清空formContent
const resetFormContent = () => {
    formContent.value = {
        name: '',
        type: '',
        valueType: '',
        pattern: modeId.value,
        standardName: '',
        standardTime: '',
        state: 1
    }
}

// 关闭弹窗
const close = () => {
    dialogVisible.value = false
    // 清空dialogForm中的值
    resetFormContent()
    // 重置表单
    dialogFormRef.value?.resetFields()
}
// 关闭信息弹框
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 = {
        name: dictCode,
        id: '',
        pid: '',
        pids: '',
        code: '',
        sort: 0
    }
    const result = await getDictTreeList(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

    // 重置表单
    dialogFormRef.value?.resetFields()
    dialogVisible.value = true
}

// 转换函数
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>