多行表单，大模型嵌套表格

wujingjing

2025-01-03 9b9e63bb526ec60dda3f33855759874a39a45cb4

多行表单，大模型嵌套表格

 src/views/project/yw/systemManage/dataSourceMgr/components/DataSourceConfigDlg.vue

@@ -1,14 +1,9 @@
<template>
    <yw-dialog v-model="isShow" :showFooter="false" width="500" :title="title">
        <el-form :label-width="labelWidth" v-if="item.config">
            <el-form-item label="用户名">
                <el-input v-model="item.config.user" readonly />
            </el-form-item>
            <el-form-item label="驱动">
                <el-input v-model="item.config.driver" readonly />
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="item.config.url" readonly />
            <el-form-item v-for="key in Object.keys(item.config)" :label="keyMapLabel[key]" :key="key">
                <el-input readonly v-if="areaKey.includes(key)" type="textarea" v-model="item.config[key]"  />
                <el-input readonly v-else v-model="item.config[key]" />
            </el-form-item>
        </el-form>
    </yw-dialog>
@@ -25,10 +20,16 @@
});

const title = computed(() => props.item?.title + '——数据源配置');
const keyMapLabel = {
    user: '用户名',
    driver: '驱动',
    url: '地址',
};
const areaKey = [ 'url'];

// 计算最长的label宽度
const labelWidth = computed(() => {
    const labels = ['驱动', '地址', '用户名'];
    const labels = Object.values(keyMapLabel);
    const maxLengthLabel = labels.reduce((prev, current) => {
        return prev.length > current.length ? prev : current;
    }, '');

 src/views/project/yw/systemManage/llmMgr/LLMMgr.vue

@@ -39,7 +39,30 @@
                            :align="item.align"
                            showOverflowTooltip
                        >
                            <template #default="scope" v-if="item.prop === 'operate'">
                            <template #default="scope" v-if="item.type === 'expand'">
                                <div class="ml-16 mt-2">
                                    <el-table border :data="scope.row.connectList" style="width: 100%">
										

                                        <el-table-column prop="title" width="200" label="标题" fixed="left" show-overflow-tooltip />
                                        <el-table-column prop="class" label="类" show-overflow-tooltip />
                                        <el-table-column label="操作" width="55" fixed="right">
                                            <template #default="scope">
                                                <div class="space-x-3 items-center flex">
                                                    <el-tooltip effect="dark" content="查看配置" placement="top">
                                                        <i
                                                            class="ywifont ywicon-shezhi !text-[19px] text-blue-400 cursor-pointer"
                                                            @click="openModelConfigDlg(scope.row)"
                                                        ></i>
                                                    </el-tooltip>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </template>

                            <template #default="scope" v-else-if="item.prop === 'operate'">
                                <div class="space-x-3 items-center flex">
                                    <!-- <el-tooltip effect="dark" content="AMIS低代码编辑" placement="top">
                                        <i class="ywifont ywicon-didaima !text-[21px] text-blue-400 cursor-pointer" @click="gotoAmisPage(scope.row)"></i>
@@ -54,9 +77,9 @@
                                    <el-tooltip effect="dark" content="查看配置" placement="top">
                                        <i class="ywifont ywicon-shezhi !text-[19px] text-blue-400 cursor-pointer" @click="openConfigDlg(scope.row)"></i>
                                    </el-tooltip>
                                    <el-tooltip effect="dark" content="连接模型" placement="top">
                                    <!-- <el-tooltip effect="dark" content="连接模型" placement="top">
                                        <i class="ywifont ywicon-lizi !text-[16px] text-blue-400 cursor-pointer" @click="openConnectDrawer(scope.row)"></i>
                                    </el-tooltip>
                                    </el-tooltip> -->

                                    <!-- <el-tooltip effect="dark" content="编辑" placement="top">
                                        <i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer" @click="openOptDlg(scope.row)"></i>
@@ -82,6 +105,7 @@
            </div>
        </template>
        <LLMConfigDlg v-model="configDlgIsShow" :item="configDlgMapRow"></LLMConfigDlg>
        <ModelConfigDlg v-model="modelConfigDlg" :item="modelConfigDlgItem"></ModelConfigDlg>
        <!-- <OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" @update="updateOpt"></OptDlg> -->
        <LLMConnectDrawer v-model="connectDrawerIsShow" :item="connectDrawerMapRow"></LLMConnectDrawer>
    </HMContainer>
@@ -107,11 +131,13 @@
import LLMConnectDrawer from './components/LLMConnectDrawer.vue';
import { useUpdateData } from '/@/hooks/useUpdateData';
import LLMConfigDlg from './components/LLMConfigDlg.vue';
import ModelConfigDlg from './components/ModelConfigDlg.vue';
const columnList = ref<TableCol[]>([
    { type: 'expand', label: '', width: 55, fixed: 'left' },
    { type: 'index', label: '序号', width: 55, fixed: 'left', align: 'center' },
    { prop: 'title', label: '标题', fixed: 'left' },
	
    { prop: 'operate', label: '操作', width: 200, fixed: 'right' },

    { prop: 'operate', label: '操作', width: 55, fixed: 'right' },
]);

//#region ====================== 表格数据，table init ======================
@@ -121,10 +147,16 @@
const isDragStatus = ref(false);
const getTableData = async () => {
    const res = await GetLLMInfoList();
    tableData.value = Object.keys(res.values || {}).map((key) => {
    tableData.value = Object.keys(res.values || {}).map((key1) => {
        return {
            id: key,
            ...res.values[key],
            id: key1,
            ...res.values[key1],
            connectList: Object.keys(res.values[key1].connects || {}).map((key2) => {
                return {
                    id: key2,
                    ...res.values[key1].connects[key2],
                };
            }),
        };
    });
};
@@ -236,6 +268,14 @@
    connectDrawerIsShow.value = true;
};
//#endregion
//#region ====================== 打开模型配置对话框 ======================
const modelConfigDlg = ref(false);
const modelConfigDlgItem = ref(null);
const openModelConfigDlg = (row) => {
    modelConfigDlg.value = true;
    modelConfigDlgItem.value = row;
};
//#endregion

onMounted(() => {
    getTableData();

 src/views/project/yw/systemManage/llmMgr/components/LLMConfigDlg.vue

@@ -2,7 +2,8 @@
    <yw-dialog v-model="isShow" :showFooter="false" width="500" :title="title">
        <el-form label-width="76" v-if="item.config">
            <el-form-item v-for="key in Object.keys(item.config)" :label="keyMapLabel[key]" :key="key">
                <el-input v-model="item.config[key]" readonly />
                <el-input v-if="areaKey.includes(key)" type="textarea" v-model="item.config[key]" readonly />
                <el-input v-else v-model="item.config[key]" />
            </el-form-item>
        </el-form>
    </yw-dialog>
@@ -24,6 +25,8 @@
    proxy: '代理',
};

const areaKey = []

const title = computed(() => props.item?.title + '——配置');

// 计算最长的label宽度