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

<template>
    <div>
        <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>
                <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-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>
<script setup lang="ts">
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 dialogFormRef = ref()
const dictStore = useDictStore()
function useMetaInfo() {
    const titleType = ref('add')
    const formContent = ref<TestScript.ResTestScript>({
        name: '',
        type: '',
        valueType: '',
        pattern: modeId.value,
        standardName: '',
        standardTime: '',
        state: 1,
        selectedValue: ''
    })
    return { titleType, formContent }
}

const { titleType, formContent } = useMetaInfo()

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

// 关闭弹窗
const close = () => {
    // 清空dialogForm中的值
    resetFormContent()
    // 重置表单
    dialogFormRef.value?.resetFields()
}
// 关闭信息弹框
const closeInformation = () => {}

// 保存数据
const save = () => {}

// 打开弹窗，可能是新增，也可能是编辑
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
    }
    titleType.value = sign
    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
    show.value = true
    // 重置表单
    dialogFormRef.value?.resetFields()
}
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[] => {
    return dictTree.map(item => ({
        value: item.id,
        label: item.name,
        children: item.children ? convertToOptions(item.children) : undefined
    }))
}

// 对外映射
defineExpose({ open })
</script>
<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>