|
|
@@ -3,7 +3,23 @@
|
|
|
<!-- 搜索区域 -->
|
|
|
<el-form inline>
|
|
|
<el-form-item>
|
|
|
- <el-input v-model="searchInfo" placeholder="搜索" clearable style="width: 300px;" />
|
|
|
+ <el-input v-model="searchInfo" placeholder="搜索关键字" clearable style="width: 300px;" />
|
|
|
+
|
|
|
+ <!-- 文件夹筛选下拉菜单 -->
|
|
|
+ <el-dropdown @command="handleFolderCommand" style="margin-right: 10px;">
|
|
|
+ <el-button icon="search" title="文件夹筛选">
|
|
|
+ {{ selectedFolder || '文件夹筛选' }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item command="">全部文件夹</el-dropdown-item>
|
|
|
+ <el-dropdown-item v-for="(folder, index) in folderList" :key="index" :command="folder">
|
|
|
+ {{ folder }}
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+
|
|
|
<el-button type="primary" icon="search" @click="onSubmit" title="搜索">查询</el-button>
|
|
|
<el-button type="primary" title="选择图片,文生图" @click="texttoimg" :loading="isLoading">文生图</el-button>
|
|
|
<el-button type="primary" title="选择图片,图生图" @click="imgtoimg" :loading="isLoading">图生图</el-button>
|
|
|
@@ -13,18 +29,30 @@
|
|
|
<!-- 模型选择 -->
|
|
|
<el-descriptions column="1" border>
|
|
|
<el-descriptions-item label="文生图模型">
|
|
|
- <el-radio-group v-model="selectedOption">
|
|
|
- <el-radio label="black-forest-labs/FLUX.1-kontext-pro">flux-pro</el-radio>
|
|
|
- <el-radio label="dall-e-3">dall-e-3</el-radio>
|
|
|
- <el-radio label="gpt-image-1">gpt-image-1</el-radio>
|
|
|
- </el-radio-group>
|
|
|
+ <div style="display: flex; align-items: center; gap: 20px;">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="txtimgselectedModel"
|
|
|
+ @change="handleModelChange"
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ v-for="item in txttoimg_modelList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.txttoimg"
|
|
|
+ >
|
|
|
+ {{ item.txttoimg }}
|
|
|
+ <span v-if="item.id === usedId" style="color: #67C23A; margin-left: 5px;">(当前使用)</span>
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-button type="success" @click="setActive" :disabled="selectedId === usedId">设为当前使用模型</el-button>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
- <!-- 表格展示 :show-overflow-tooltip="true" -->
|
|
|
+ <!-- 表格展示 -->
|
|
|
<el-table
|
|
|
ref="multipleTable"
|
|
|
- style="width: 100%; height: 65vh;"
|
|
|
+ style="width: 100%; height: 62vh;"
|
|
|
:row-style="{ height: '20px' }"
|
|
|
:header-cell-style="{ padding: '0px' }"
|
|
|
:cell-style="{ padding: '0px' }"
|
|
|
@@ -36,14 +64,104 @@
|
|
|
:cell-class-name="tableDataCellClass"
|
|
|
@selection-change="SelectionChange"
|
|
|
@row-dblclick="onRowDblClick"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
>
|
|
|
<el-table-column type="selection" width="55" />
|
|
|
<el-table-column label="ID" prop="id" width="70" />
|
|
|
<el-table-column label="第一段" prop="chinese_description" width="300" />
|
|
|
<el-table-column label="第二段" prop="english_description" width="300" />
|
|
|
- <el-table-column label="图片名称" prop="img_name" width="500" />
|
|
|
- <el-table-column label="文生图预览" width="120">
|
|
|
+ <el-table-column label="图片名称" prop="img_name" width="300" />
|
|
|
+ <el-table-column label="原图" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ :src="formatImageUrl(row.old_image_url)"
|
|
|
+ :preview-src-list="[formatImageUrl(row.old_image_url)]"
|
|
|
+ style="width: 90px; height: 70px;"
|
|
|
+ fit="contain"
|
|
|
+ preview-teleported
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ v-if="tableData1.some(row => row.model === 'black-forest-labs/FLUX.1-kontext-pro')"
|
|
|
+ label="FLUX.1"
|
|
|
+ width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ v-if="row.model === 'black-forest-labs/FLUX.1-kontext-pro'"
|
|
|
+ :src="formatImageUrl(row.new_image_url)"
|
|
|
+ :preview-src-list="[formatImageUrl(row.new_image_url)]"
|
|
|
+ style="width: 90px; height: 70px;"
|
|
|
+ fit="contain"
|
|
|
+ preview-teleported
|
|
|
+ />
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-if="tableData1.some(row => row.model === 'dall-e-3')"
|
|
|
+ label="dall-e-3"
|
|
|
+ width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ v-if="row.model === 'dall-e-3'"
|
|
|
+ :src="formatImageUrl(row.new_image_url)"
|
|
|
+ :preview-src-list="[formatImageUrl(row.new_image_url)]"
|
|
|
+ style="width: 90px; height: 70px;"
|
|
|
+ fit="contain"
|
|
|
+ preview-teleported
|
|
|
+ />
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-if="tableData1.some(row => row.model === 'gpt-image-1')"
|
|
|
+ label="gpt-image-1"
|
|
|
+ width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ v-if="row.model === 'gpt-image-1'"
|
|
|
+ :src="formatImageUrl(row.new_image_url)"
|
|
|
+ :preview-src-list="[formatImageUrl(row.new_image_url)]"
|
|
|
+ style="width: 90px; height: 70px;"
|
|
|
+ fit="contain"
|
|
|
+ preview-teleported
|
|
|
+ />
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-if="tableData1.some(row => row.model === 'MID_JOURNEY')"
|
|
|
+ label="MID_JOURNEY"
|
|
|
+ width="130">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ v-if="row.model === 'MID_JOURNEY'"
|
|
|
+ :src="`https://chatapi.onechats.ai/mj/image/${row.taskId}`"
|
|
|
+ :preview-src-list="[`https://chatapi.onechats.ai/mj/image/${row.taskId}`]"
|
|
|
+ style="width: 90px; height: 70px;"
|
|
|
+ fit="contain"
|
|
|
+ preview-teleported
|
|
|
+ />
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- <el-table-column label="文生图预览" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ :src="row.taskId ? `https://chatapi.onechats.ai/mj/image/${row.taskId}` : formatImageUrl(row.new_image_url)"
|
|
|
+ :preview-src-list="[row.taskId ? `https://chatapi.onechats.ai/mj/image/${row.taskId}` : formatImageUrl(row.new_image_url)]"
|
|
|
+ style="width: 90px; height: 70px;"
|
|
|
+ fit="contain"
|
|
|
+ preview-teleported
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+
|
|
|
+ <!-- <el-table-column label="文生图预览" width="120">
|
|
|
<template #default="{ row }">
|
|
|
<el-image
|
|
|
:src="formatImageUrl(row.new_image_url)"
|
|
|
@@ -53,7 +171,8 @@
|
|
|
preview-teleported
|
|
|
/>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
+ </el-table-column> -->
|
|
|
+
|
|
|
<el-table-column label="图生图预览" width="120">
|
|
|
<template #default="{ row }">
|
|
|
<el-image
|
|
|
@@ -87,9 +206,9 @@
|
|
|
:modal="true">
|
|
|
<el-scrollbar style="max-height: 60vh; overflow-y: auto;">
|
|
|
<el-form :model="editFormData">
|
|
|
- <el-form-item label="ID" label-width="80px">
|
|
|
- <el-input v-model="editFormData.id" disabled />
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="ID" label-width="80px">
|
|
|
+ <el-input v-model="editFormData.id" disabled />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
<el-form-item label="文生图路径">
|
|
|
<el-input v-model="editFormData.new_image_url" disabled />
|
|
|
@@ -139,8 +258,9 @@
|
|
|
<script setup>
|
|
|
import { ref, reactive, toRaw, onMounted } from 'vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
-import { getTable, imageToText, Template_ids,getSide } from '@/api/mes/job'
|
|
|
+import { getTable, imageToText, Template_ids,txttoimg_moxing,txttoimg_update, getSide } from '@/api/mes/job'
|
|
|
import { useUserStore } from '@/pinia/modules/user'
|
|
|
+import { ArrowDown } from '@element-plus/icons-vue'
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
const _username = ref(userStore.userInfo.userName + '/' + userStore.userInfo.nickName)
|
|
|
@@ -159,14 +279,16 @@ const txttotxt_selectedOption = ref('gemini-2.0-flash')
|
|
|
const selectedOption = ref('black-forest-labs/FLUX.1-kontext-pro')
|
|
|
const num = ref(1)
|
|
|
const _parh = ref([])
|
|
|
+const folderList = ref([])
|
|
|
+const selectedFolder = ref('')
|
|
|
|
|
|
const editDialogVisible = ref(false)
|
|
|
const editFormData = reactive({
|
|
|
id: '',
|
|
|
chinese_description: '',
|
|
|
english_description: '',
|
|
|
- new_image_url:'',
|
|
|
- imgtoimg_url:'',
|
|
|
+ new_image_url: '',
|
|
|
+ imgtoimg_url: '',
|
|
|
img_name: ''
|
|
|
})
|
|
|
|
|
|
@@ -176,23 +298,67 @@ const formatImageUrl = (path) => {
|
|
|
return `${base}/${path.replace(/^public\//, '')}`
|
|
|
}
|
|
|
|
|
|
+const txttoimg_modelList = ref([]); // 存储所有模型数据
|
|
|
+const txtimgselectedModel = ref(''); // 当前选中的模型名称
|
|
|
+const usedId = ref(null); // 当前使用的模型ID
|
|
|
+const selectedId = ref(null); // 用户选择的模型ID
|
|
|
+
|
|
|
const getTableData = async () => {
|
|
|
- try {
|
|
|
const res = await getTable({
|
|
|
search: searchInfo.value,
|
|
|
limit: pageSize.value,
|
|
|
- page: page.value
|
|
|
+ page: page.value,
|
|
|
+ folder: selectedFolder.value
|
|
|
})
|
|
|
tableData1.value = res.data.list
|
|
|
total.value = res.data.total
|
|
|
+
|
|
|
+ // 更新文件夹列表
|
|
|
+ if (res.data.folder) {
|
|
|
+ folderList.value = res.data.folder
|
|
|
+ }
|
|
|
|
|
|
const res_Template = await Template_ids()
|
|
|
height.value = res_Template.data.height
|
|
|
width.value = res_Template.data.width
|
|
|
- } catch (err) {
|
|
|
- ElMessage.error('数据加载失败')
|
|
|
+
|
|
|
+ //文生图模型列表
|
|
|
+ const response = await txttoimg_moxing();
|
|
|
+ txttoimg_modelList.value = response.data.list;
|
|
|
+ // 设置默认选中的模型(txttoimg_val为"1"的模型)
|
|
|
+ const defaultModel = response.data.list.find(item => item.txttoimg_val === "1");
|
|
|
+ if (defaultModel) {
|
|
|
+ txtimgselectedModel.value = defaultModel.txttoimg;
|
|
|
+ usedId.value = defaultModel.id;
|
|
|
+ selectedId.value = defaultModel.id;
|
|
|
+ selectedOption.value = defaultModel.txttoimg;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 当选择模型变化时
|
|
|
+const handleModelChange = (modelName) => {
|
|
|
+ const model = txttoimg_modelList.value.find(item => item.txttoimg === modelName);
|
|
|
+ if (model) {
|
|
|
+ selectedId.value = model.id;
|
|
|
+ selectedOption.value = model.txttoimg
|
|
|
}
|
|
|
}
|
|
|
+//设置模型
|
|
|
+const setActive = async () => {
|
|
|
+ if (selectedId.value) {
|
|
|
+ const result = await txttoimg_update({id:selectedId.value});
|
|
|
+ console.log(result)
|
|
|
+ usedId.value = selectedId.value;
|
|
|
+ ElMessage.success(`设置成功`);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 处理文件夹选择
|
|
|
+const handleFolderCommand = (command) => {
|
|
|
+ selectedFolder.value = command
|
|
|
+ onSubmit()
|
|
|
+}
|
|
|
|
|
|
const onSubmit = () => {
|
|
|
page.value = 1
|
|
|
@@ -247,7 +413,8 @@ const processImages = async (files, type) => {
|
|
|
batch: images,
|
|
|
num: num.value,
|
|
|
width: width.value,
|
|
|
- height: height.value
|
|
|
+ height: height.value,
|
|
|
+ executeKeywords:'',
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
@@ -284,13 +451,8 @@ const onRowDblClick = (row) => {
|
|
|
|
|
|
const submitEdit = async () => {
|
|
|
try {
|
|
|
- // 校验表单字段是否存在
|
|
|
const { id, chinese_description, english_description, img_name } = editFormData;
|
|
|
|
|
|
- // 打印调试信息
|
|
|
- console.log('修改后的数据:', editFormData);
|
|
|
-
|
|
|
- // 构造 payload
|
|
|
const payload = {
|
|
|
id,
|
|
|
chinese_description,
|
|
|
@@ -298,16 +460,9 @@ const submitEdit = async () => {
|
|
|
img_name
|
|
|
};
|
|
|
|
|
|
- // 调用接口
|
|
|
- const res_Template = await getSide(payload);
|
|
|
-
|
|
|
- // 成功提示
|
|
|
+ await getSide(payload);
|
|
|
ElMessage.success('修改成功');
|
|
|
-
|
|
|
- // 关闭弹窗
|
|
|
editDialogVisible.value = false;
|
|
|
-
|
|
|
- // 刷新数据
|
|
|
getTableData();
|
|
|
} catch (error) {
|
|
|
console.error('修改失败:', error);
|