SPDM/src/components/flow/flowNodeParamTable.vue

<template>
  <div class="flow-node-param-page">
    <BaseTable
      ref="baseTableRef"
      hide-pagination
      tableName="FLOW_NODE_PARAM"
    >

      <template #leftOptions>
        <el-button type="primary">参数入库</el-button>
        <el-button type="primary">保存参数</el-button>
        <el-button type="">引用参数</el-button>
      </template>

      <template #value="{ row, column }">
        <div class="pr10 tableCellContent">

          <div
            class="numInput flex-div"
            v-if="(row.tagType === WIDGET_TYPE.INPUTS || row.tagType === WIDGET_TYPE.INPUT) && row.englishLabel"
          >
            <div
              class="input-grid"
              :style="{
                display: row.total === row.column ? 'flex' : 'grid',
                gridTemplateColumns: 'repeat(' + row.column + ',1fr)',
              }"
            >
              <div class="flex-align-center mr12" v-for="num in row?.total" :key="num">
                <span
                  class="over-ellipsis span-fommat"
                  v-if="row.needLabel"
                  :title="row.labelList[num - 1]"
                >{{ row.labelList[num - 1] }}</span>
                <span v-if="row.needLabel">：</span>
                <el-input class="span-min80" v-model="row.list[num - 1]"></el-input>
              </div>
              <!-- 兼容老版input -->
              <div class="flex-align-center mr12" v-if="!row?.total">
                <el-input :placeholder="row.placeholder" :title="row.value" class="w70p" v-model="row.value"></el-input>
              </div>
            </div>
          </div>
          <!-- 2下拉框-->
          <el-select
            v-if="row.tagType === WIDGET_TYPE.SELECT"
            :multiple="row.isMultiple === '1'"
            :title="row.value"
            v-model="row.value"
            class="w70p"
            collapse-tags
            :allow-create="row.importability === '1'"
            filterable
            default-first-option
          >
            <el-option
              v-for="(item, index) in row.labelList?.split(';') || []"
              :key="item"
              :label="item"
              :value="row.mapList ? row.mapList.split(';')[index] : item"
            />
          </el-select>
          <!-- 4单选框 -->
          <el-checkbox v-if="row.tagType === WIDGET_TYPE.CHECKBOX" v-model="row.value" true-value="1" false-value="0" />
          <!-- 多选框 -->
          <div v-if="row.tagType === WIDGET_TYPE.CHECKBOXS">
            <div
              class="input-grid"
              :style="{
                display: row.total === row.column ? 'flex' : 'grid',
                gridTemplateColumns: 'repeat(' + row.column + ',1fr)',
              }"
            >
              <div class="checkbox-group" v-for="(item, index) in row.list" :key="item">
                <el-checkbox
                  :label="row?.labelList ? row?.labelList[index] : ''"
                  v-model="row.list[index]"
                  true-value="1"
                  false-value="0"
                  @change="changeCheckbox(row)"
                />
                <span class="mr12"></span>
              </div>
            </div>
          </div>

          <div
            class="numInput flex-div"
            v-if="row.tagType === WIDGET_TYPE.NUMBER_INPUTS || row.tagType === WIDGET_TYPE.NUMBER_INPUT"
          >
            <!-- <el-input-number :precision="row.decimals" controls-position="right"
              v-model="row.value"></el-input-number> -->
            <div
              class="input-grid"
              :style="{
                display: row.total === row.column ? 'flex' : 'grid',
                gridTemplateColumns: 'repeat(' + row.column + ',1fr)',
              }"
            >
              <div class="flex-align-center mr12" v-for="num in row.total" :key="num">
                <span
                  class="over-ellipsis span-fommat"
                  v-if="row.needLabel"
                  :title="row.labelList[num - 1]"
                >{{ row.labelList[num - 1] }}</span>
                <span v-if="row.needLabel">：</span>
                <el-input-number
                  class="spanw100"
                  :precision="row.decimals"
                  controls-position="right"
                  v-model="row.list[num - 1]"
                ></el-input-number>
                <span
                  class="over-ellipsis span-fommat"
                  :title="row?.units ? row?.units[num - 1] : ''"
                >{{ row?.units ? row?.units[num - 1] : '' }}</span>
              </div>
              <!-- 兼容老版number-input -->
              <el-input-number
                v-if="!row?.total"
                :precision="row.decimals"
                controls-position="right"
                v-model="row.value"
              ></el-input-number>
            </div>
            <div v-if="row.unitList">
              <el-select :title="row.Value" v-model="row.Unit" class="w100 ml10">
                <el-option v-for="item in row.UnitList.split(';')" :key="item" :label="item" :value="item" />
              </el-select>
            </div>
            <span class="ml10" v-else>{{ row.unit }}</span>
          </div>
          <!-- 6单纯显示内容，无法编辑 -->
          <div v-if="row.tagType === WIDGET_TYPE.VIEW">
            <el-icon class="colorIcon" v-if="isLoadingBaseInfo">
              <Loading />
            </el-icon>
            {{ row.value }}
          </div>
          <!-- 滑块 -->
          <div v-if="row.tagType === WIDGET_TYPE.SLIDER" class="slider">
            <span class="value">{{ row.value }}</span>
            <input
              class="slider-input"
              type="Range"
              :min="row.minValue"
              :max="row.maxValue"
              :step="row.step"
              v-model="row.value"
            />

            <span class="min-value">{{ row.minValue }}</span>
            <span class="max-value">{{ row.maxValue }}</span>
          </div>

          <!-- 批量选择框控件 -->
          <div v-if="row.tagType === WIDGET_TYPE.BATCH_LOADCASE" class="INCLFileList loadcaseList">
            <el-checkbox v-model="row.isAllChecked" @change="changeBatchLoadcase($event, row)">全选</el-checkbox>
            <el-checkbox-group v-model="row.checkedList" @change="changeBatchLoadcaseNum(row)">
              <el-checkbox
                :label="item.id"
                v-for="item in row.selectList"
                :key="item.id"
                class="span-3"
                :title="item.loadcase"
              >
                {{ item.loadcase }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 9 模型文件选择 local + server-->
          <div
            class="localServer"
            v-if="
              row.tagType === WIDGET_TYPE.FILE || row.tagType === NODE_TYPE.SCRIPT || row.tagType === NODE_TYPE.PPT
            "
          >
            <!-- <server-local-file
              @returnFile="changeFile($event, row)"
              :row="{
                Value: row.value,
                Id: row.chineseLabel + row.id,
                Multiple: row.isMultiple ? '1' : '0',
                FileType: row.fileType,
                SelectType: row.fromType,
                Flag: 'automation',
                ParentPath: '',
                UiList: row.UiList,
                Name: row.name,
                Placeholder: row?.Placeholder,
                SuffixName: row?.SuffixName,
                uploadPath: props.currentNode?.path,
              }"
              :currentNode="currentNode"
            /> -->
          </div>
        </div>

      </template>

    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, reactive } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { NODE_TYPE, PAGE_TYPE, WIDGET_IDS, WIDGET_TYPE } from '@/utils/enum/flow';
import { ElMessage } from 'element-plus';
import { submitFileNameReg } from '@/utils/validate';

const props = defineProps({
  nodeParams: {
    type: Array,
    default: () => [],
  },
  pageInfo: {
    type: Object,
  },
  currentNode: {
    type: Object,
  },
});

const emits = defineEmits(['syncJobName', 'syncPageInfo', 'changeBatchSubmit', 'verifyLight', 'paramPageHideControl']);
const pageInfo = reactive({
  name: props.pageInfo?.name,
  type: props.pageInfo?.type,
  solver: props.pageInfo?.solver,
});
const baseTableRef = ref();
const tableData = ref<any>([]);
const isLoadingBaseInfo = ref(false);

const changeCheckbox = (record: any) => {
  // 不生成include时隐藏参数设置界面
  if (record.englishLabel === WIDGET_IDS.PRE_PROCESS) {
    emits('paramPageHideControl', record.list[0] === '0');
  }
};

// 更改头文件加载基本信息
const changeFile = async ({ fileType, data, fileList, isFile, isFromServer }: any, record: any) => {
  console.log(fileType, 'fileType');

  for (let index = 0; index < data.length; index++) {
    if (!submitFileNameReg(data[index].fileName)) {
      ElMessage.error('文件名仅可以包含字母 数字 . - _');
      return;
    }
  }
  record.value = data;
  record.isFile = isFile;
  record.isServer = isFromServer;
  record.fileList = fileList;
  if (pageInfo.type === PAGE_TYPE.MODEL && record.englishLabel === 'model' && data[0]?.fileName) {
    emits('syncJobName', data[0].fileName);
  }
};

// 批量提交的全选操作
const changeBatchLoadcase = (val: boolean, record: any) => {
  record.isAllChecked = val;
  if (val) {
    record.checkedList = record.selectList.map((item: { id: string }) => {
      return item.id;
    });
  } else {
    record.checkedList = [];
  }
  emits('changeBatchSubmit', record.checkedList);
};

const changeBatchLoadcaseNum = (record: any) => {
  record.isAllChecked = record.checkedList.length === record.selectList.length;
  emits('changeBatchSubmit', record.checkedList);
};

watch(() => props.nodeParams, (newVal) => {
  if (newVal) {
    tableData.value = newVal;

    console.log(tableData.value, 'tableData.value');

    nextTick(() => {
      baseTableRef.value.setDataFun(tableData.value);
    });
  }
}, {
  immediate: true,
  deep: true,
});

</script>

<style lang="scss" scoped>
.flow-node-param-page {
  width: 100%;
  height: 100%;

  .span-fommat {
    max-width: 50px;
    text-align: right;
    flex-shrink: 0;
  }

  .span-min80{
    min-width: 80px
  }

  .span-3{
    width: calc(100% / 3)
  }

  .spanw100{
    width: 100px
  }
}
</style>