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">
    <div class="dialog-content" >
              <el-form :model='formContent' label-width="auto" class="form-three ">
                      <el-divider >基础信息</el-divider>      
                      <el-form-item label="脚本名称"  prop='name'>
                          <el-input v-model='formContent.name' />
                      </el-form-item>
                      <el-form-item label="参照标准名称"  prop='standardName'>
                          <el-input v-model='formContent.standardName' />
                      </el-form-item>
                      <el-form-item label="标准推行年份"  prop='standardTime'>
                        <el-date-picker
                                    v-model="formContent.standardTime"
                                    type="year"
                                    placeholder="请选择标准推行年份"
                                    />
                      </el-form-item>
              </el-form>
    </div>
    <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>


</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 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,

    })
    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 save = () => {
    
}


// 打开弹窗，可能是新增，也可能是编辑
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);
      //allOptions.value = convertToOptions(result.data as Dict.ResDictTree[]);
      const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
      // 提取第二层节点
      allOptions.forEach(option => {
            if (option.children && option.children.length > 0) {
              secondLevelOptions.push(...option.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>