320 lines
10 KiB
Vue
320 lines
10 KiB
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>
|