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

<template>
    <div>
        <el-card style="margin-bottom: 10px" class="cardTop" :style="{ height: height }">
            <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>
                <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"
                        style="width: 100%"
                        type="year"
                        format="YYYY"
                        value-format="YYYY"
                        placeholder="请选择标准推行年份"
                    />
                </el-form-item>
                <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>
                    <div class="formBut">
                        <el-button
                            type="primary"
                            :icon="shrink ? ArrowUpBold : ArrowDownBold"
                            @click="shrinkChange"
                        ></el-button>
                        <el-button type="primary" :icon="Select" @click="save">保存</el-button>
                        <el-button :icon="Close" @click="close">返回</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="检测脚本值类型" prop="valueType">
                    <el-select
                        v-model="formContent.valueType"
                        :disabled="titleType == '编辑检测脚本'"
                        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 label="额定电流" prop="ratedCurr">
                    <el-input-number
                        v-model.trim="formContent.ratedCurr"
                        min="0"
                        max="20"
                        style="width: 100%"
                        placeholder="请输入额定电流"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="额定电压" prop="ratedVolt">
                    <el-input-number
                        v-model.trim="formContent.ratedVolt"
                        min="0"
                        max="380"
                        style="width: 100%"
                        placeholder="请输入额定电压"
                        clearable
                    />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-if="show">
            <TestScriptDetail :options="secondLevelOptions" :formContent="formContent" :shrink="shrink" />
        </el-card>
    </div>
</template>
<script setup lang="ts">
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'
import type { Dict } from '@/api/system/dictionary/interface'
import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
import type { CascaderOption } from 'element-plus'
import { Select, Close, ArrowDownBold, ArrowUpBold } 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 height = ref('125px')
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,
        ratedCurr: 0,
        ratedVolt: 0
    })
    return { titleType, formContent }
}
const shrink = ref(true)
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' }],
    ratedCurr: [{ required: true, message: '请填写额定电流', trigger: 'change' }],
    ratedVolt: [{ required: true, message: '请填写额定电压', trigger: 'change' }]
}

const { titleType, formContent } = useMetaInfo()
// 收缩
const shrinkChange = () => {
    shrink.value = !shrink.value
    shrink.value ? (height.value = '125px') : (height.value = '70px')
}
// 清空formContent
const resetFormContent = () => {
    formContent.value = {
        name: '',
        type: '',
        valueType: '',
        pattern: '',
        standardName: '',
        standardTime: '',
        state: 1,
        ratedCurr: 0,
        ratedVolt: 0
    }
    router.go(-1)
}
// 关闭弹窗
const close = () => {
    // 清空dialogForm中的值
    resetFormContent()
    // 重置表单
    dialogFormRef.value?.resetFields()
}
// 关闭信息弹框
const closeInformation = () => {}

// 保存数据
const save = () => {
    // dialogFormRef
    dialogFormRef.value.validate((valid: boolean) => {
        if (valid) {
            if (titleType.value == '新增检测脚本') {
                formContent.value.pattern = modeId.value
                pqScriptAdd(formContent.value).then(res => {
                    if (res.code === 'A0000') {
                        ElMessage.success({ message: res.message })
                        formContent.value.id = res.data
                        titleType.value = '编辑检测脚本'
                        show.value = true
                    }
                })
            } else {
                pqScriptUpdate(formContent.value).then(res => {
                    if (res.code === 'A0000') {
                        ElMessage.success({ message: res.message })
                    }
                })
            }
        } else {
            shrink.value = true
            height.value = '125px'
        }
    })
}

// 打开弹窗，可能是新增，也可能是编辑
const open = async (title: string, row: any) => {
    titleType.value = title
    if (title == '新增检测脚本') {
        show.value = false
    } else {
        let list = JSON.parse(row)
        formContent.value = list
        console.log('🚀 ~ open ~ list:', formContent.value)
        show.value = true
    }
    // 重置表单
    dialogFormRef.value?.resetFields()
}
// 获取树字典
const treeInfo = async (currentMode: string) => {
    const data: Dict.ResDictTree = {
        name: '',
        id: '',
        pid: '',
        pids: '',
        code: 'Script_Indicator_Items',
        sort: 0
    }
    const result = await getDictTreeByCode(data)
    const result1 = (await getDictTreeByCode({ ...data, code: 'Script_Error' })).data[0].children
    const allOptions = await convertToOptions(result.data as Dict.ResDictTree[])
    //console.log('🚀 ~ treeInfo ~ result1:', allOptions[0]?.children)
    const setallTree = await setTree(allOptions[0]?.children, result1)
    secondLevelOptions.push(...(setallTree || []))
    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
}

onMounted(() => {
    let data: any = router.options.history.state
    if (data.title == null) return
    nextTick(async () => {
        await treeInfo(data.mode)
        await open(data.title, data.row)
    })
})
const setTree = async (data, data1) => {
    data.forEach(item => {
        data1.forEach(item1 => {
            if (item.label.replace(/准确度|检测/g, '') == item1.name) {
                item.value = item1.id
            }
        })
    })
    return data
}
// 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
    return dictTree.map(item => ({
        value: item.id,
        code: item.code.split('-')[1] || item.code.split('-')[0],
        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: 18.8%;

        .el-form-item__content {
            flex: 1;
            .el-select,
            .el-cascader,
            .el-input__inner,
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>