1

src/components/custom/CustomForm.vue

@@ -84,6 +84,7 @@
             :label="it.label"
             :dialog_title="it.dialog_title"
             :tool_url="it.tool_url"
+            :query="it.query"
           ></SelectBackGround>
         </template>
       </template>

src/components/custom/Select.vue

@@ -4,7 +4,7 @@
       v-model="SelectValue"
       :placeholder="placeholder"
       :popupProps="{
-        overlayClassName: 'custom-select-popup',
+        overlayClassName: [className, 'custom-select-popup'],
       }"
     >
       <t-option
@@ -26,6 +26,7 @@ const props = withDefaults(
     modelValue: number | string;
     width?: string;
     placeholder?: string;
+    className?: string;
   }>(),
   {
     width: '50%',

src/components/custom/SelectBackGround.vue

@@ -14,6 +14,13 @@
       </template>
       <template #body>
         <div class="model-dialog-box">
+          <div class="chose-category-box">
+            <CustomSelect
+              className="custom-chose-category"
+              :options="SelectOptions"
+              v-model="SelectValue"
+            ></CustomSelect>
+          </div>
           <div ref="ScrollELement" class="search-area-box narrow-scrollbar">
             <OnWaitVue
               v-if="SearchStatus == 'wait'"
@@ -68,9 +75,10 @@
 </template>
 
 <script lang="ts" setup>
+import CustomSelect from '@/components/custom/Select.vue';
 import ResetButton from '@/components/custom/resetbutton.vue';
 import { Dialog as TDialog } from 'tdesign-vue-next';
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref, watch, onMounted } from 'vue';
 import OnWaitVue from './ImgLoadingStatus/OnWait.vue';
 import OnLoading from './ImgLoadingStatus/OnLoading.vue';
 import { show_message } from '@/utils/tdesign_tool';
@@ -83,6 +91,7 @@ const props = withDefaults(
     label?: string;
     tool_url: string;
     value: string;
+    query: any;
   }>(),
   {
     label: '选择模特',
@@ -99,6 +108,9 @@ const pageSize = ref(20);
 const visible = ref(props.modelValue);
 // 当前搜索状态
 const SearchStatus = ref('wait');
+const SearchName = ref('');
+// select选择的内容
+const SelectValue = ref('');
 const SearchList = reactive({
   list: [],
   //   当前选择的图片
@@ -108,6 +120,44 @@ const SearchList = reactive({
   // 当前下标
   index: null,
 });
+
+watch(
+  () => SelectValue.value,
+  (v) => {
+    if (v) {
+      // 搜索
+      Search();
+    }
+  }
+);
+// select选项
+const SelectOptions = ref([]);
+const getSelect = async (url: string) => {
+  try {
+    let res: any = await useRequest('get', url);
+    if (res.data) {
+      SelectOptions.value = res.data;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+onMounted(() => {
+  const { query } = props;
+  if (query && query.length) {
+    // 获取第1条数据
+    const url = query[0].tool_url;
+    const name = query[0].name;
+    if (!url || !name) {
+      show_message('缺少必须配置项');
+      return;
+    }
+    // 获取name
+    SearchName.value = name;
+    // 获取select内容
+    getSelect(url);
+  }
+});
 // 确认事件
 const ConfirmEnvent = () => {
   if (!SearchList.url) {
@@ -136,10 +186,14 @@ const Search = async () => {
     if (pageNum.value == 1) {
       SearchStatus.value = 'loading';
     }
-    const res: any = await useRequest('post', tool_url, {
+    let params = {
       page: pageNum.value,
       limit: pageSize.value,
-    });
+    };
+    if (SearchName.value) {
+      params[SearchName.value] = SelectValue.value;
+    }
+    const res: any = await useRequest('post', tool_url, params);
     console.log(res);
     if (res.code == 0) {
       if (pageNum.value == 1) {
@@ -188,6 +242,12 @@ watch(
 
 <style lang="less">
 @import '@/style/variables.less';
+.custom-chose-category {
+  .t-select__list {
+    border-radius: 0px;
+    background: black;
+  }
+}
 .custom-chose-model-dialog {
   width: 48%;
   .open-dialog-btn {
@@ -217,6 +277,9 @@ watch(
     }
     .model-dialog-box {
       margin-top: 6px;
+      .chose-category-box {
+        padding-left: 2px;
+      }
       .select-model-input {
         width: 100% !important;
         height: auto !important;

src/constants/router.ts

@@ -25,6 +25,8 @@ export const JumpDetailPage = (item: any) => {
     } else if (item.url.indexOf('ImageGeneration') !== -1) {
       // 绘图2
       path = '/ImageGeneration';
+    } else if (item.url.indexOf('submit') !== -1) {
+      path = 'submit';
     }
     if (path) {
       const url = router.resolve({

src/pages/ModelGeneration/index.vue

@@ -4,58 +4,12 @@
       <ScenesTitle :title="cur_title"></ScenesTitle>
       <div class="generation-box" v-show="!loading" ref="GenerationBox">
         <div class="interaction-form">
-          <div
-            class="basic-info"
-            v-for="item in AdminData.list"
-            :key="item.name"
-          >
-            <div class="label">*{{ item.name }}</div>
-            <div class="value">
-              <template v-for="it in item.lists" :key="it.name">
-                <template v-if="it.component_type == 'input' && !it.is_hidden">
-                  <CustomInput
-                    v-model="it.value"
-                    :type="it.type"
-                    :placeholder="it.placeholder"
-                  ></CustomInput>
-                </template>
-                <template v-else-if="it.component_type == 'select'">
-                  <CustomSelect
-                    :options="it.options"
-                    v-model="it.value"
-                    :placeholder="it.placeholder"
-                  ></CustomSelect>
-                </template>
-                <!-- textarea -->
-                <template v-else-if="it.component_type == 'textarea'">
-                  <CustomTextArea
-                    v-model="it.value"
-                    :placeholder="it.placeholder"
-                    :maxlength="it.maxlength"
-                  ></CustomTextArea>
-                </template>
-                <template v-else-if="it.component_type == 'radio_group_size'">
-                  <ImgSizeRadioGroupVue
-                    :list="it.options"
-                    v-model="it.value"
-                  ></ImgSizeRadioGroupVue>
-                </template>
-                <template v-else-if="it.component_type == 'custom-number'">
-                  <CustomInput
-                    class="input-pay-num"
-                    v-model="it.value"
-                    type="number"
-                    :placeholder="it.placeholder"
-                  ></CustomInput>
-                </template>
-              </template>
-            </div>
-          </div>
+          <CustomForm
+            :formList="AdminData.list"
+            :config="StrategyConfig"
+          ></CustomForm>
           <div class="confirm-box">
-            <div class="pay-num">
-              <!-- <div>余额：0/5000</div>
-          <div>实付：100</div> -->
-            </div>
+            <div class="pay-num"></div>
             <CustomResetButton @click="onReset" width="20%"
               >重置</CustomResetButton
             >
@@ -92,10 +46,8 @@
 </template>
 
 <script lang="ts" setup>
+import CustomForm from '@/components/custom/CustomForm.vue';
 import CustomLoading from '@/components/custom/loading2.vue';
-import CustomSelect from '@/components/custom/Select.vue';
-import CustomTextArea from '@/components/custom/textarea.vue';
-import CustomInput from '@/components/custom/input/index.vue';
 import CustomResetButton from '@/components/custom/resetbutton.vue';
 import GenerateResult from './components/GenerateResult';
 import { useRequest } from '@/utils/http/http';
@@ -107,7 +59,6 @@ import {
   ref,
   watch,
 } from 'vue';
-import ImgSizeRadioGroupVue from '@/components/custom/ImgSizeRadioGroup.vue';
 import ScenesTitle from '@/components/custom/ScenesTitle.vue';
 import {
   getScenesList,

src/pages/submit/index.vue

+<template>
+  <div class="custom-submit-page">
+    <div class="generation-box-parent">
+      <ScenesTitle :title="cur_title"></ScenesTitle>
+      <div class="generation-box" v-show="!loading" ref="GenerationBox">
+        <div class="interaction-form">
+          <CustomForm
+            :formList="AdminData.list"
+            :config="StrategyConfig"
+            :sub_type="sub_type"
+          ></CustomForm>
+          <div class="confirm-box">
+            <CustomResetButton @click="onReset" width="20%"
+              >重置</CustomResetButton
+            >
+            <CustomResetButton @click="onSubmit" width="20%"
+              >提交</CustomResetButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <CustomLoading v-show="loading"></CustomLoading>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CustomForm from '@/components/custom/CustomForm.vue';
+import ScenesTitle from '@/components/custom/ScenesTitle.vue';
+import CustomLoading from '@/components/custom/loading2.vue';
+import CustomResetButton from '@/components/custom/resetbutton.vue';
+import { onBeforeMount, reactive, ref, watch } from 'vue';
+import {
+  getScenesList,
+  useUploadStrategy,
+  useSubmitImage,
+} from '@/utils/api/scenes';
+import { FilterForm } from '@/constants/form';
+import { FilterFormType } from '@/constants/form';
+import { FormExample2 } from '@/utils/api/Task';
+import { useRoute } from 'vue-router';
+import { show_message } from '@/utils/tdesign_tool';
+const loading = ref(false);
+const route = useRoute();
+const id = route.query.id;
+// el
+const GenerationBox = ref();
+// 标题
+const cur_title = ref('');
+
+// 上传策略状态
+const StrategyStatus = ref(false);
+// 上传策略
+const StrategyConfig = ref({});
+const AdminData = reactive({
+  list: [],
+  // 回调图片列表
+  callback_list: [],
+  /**
+   * loading-生成中
+   * success-结束
+   */
+  status: '',
+  reset_num: 1,
+});
+const scenario_id = ref();
+const sub_type = ref();
+// 获取后台配置的组件
+const getAdminComponent = async () => {
+  try {
+    loading.value = true;
+    console.log(JSON.stringify(FormExample2));
+    let res: any = await getScenesList(id, 'id');
+    if (res.code == 0) {
+      // 取id
+      scenario_id.value = res.data.id;
+      sub_type.value = res.data.type;
+      let list = res.data.form;
+      // 取标题
+      cur_title.value = res.data.title;
+      if (list.length) {
+        const result = FilterFormType(list);
+        list = result.list;
+        if (result.al_config) {
+          // 获取上传策略
+          StrategyStatus.value = true;
+        }
+      } else {
+        show_message('表单未配置');
+        return;
+      }
+      AdminData.list = list;
+      console.log(list);
+    }
+    loading.value = false;
+  } catch (e) {
+    console.log(e);
+    loading.value = false;
+  }
+};
+const getStrategy = async () => {
+  try {
+    let res: any = await useUploadStrategy();
+    if (res.code == 0) {
+      StrategyConfig.value = res.data;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+watch(
+  () => StrategyStatus.value,
+  (v) => {
+    if (v) {
+      // 获取上传策略
+      getStrategy();
+    }
+  }
+);
+
+// 重置
+const onReset = () => {
+  // 遍历整个列表,清空value
+  AdminData.list.forEach((item: any) => {
+    item.lists.forEach((it: any) => {
+      if (it.value) {
+        it.value = '';
+      }
+    });
+  });
+  // 恢复默认状态
+  AdminData.status = '';
+  AdminData.callback_list = [];
+};
+// 提交
+const onSubmit = async () => {
+  // 校验表单
+  let params = FilterForm(AdminData.list);
+  try {
+    let res: any = await useSubmitImage(params);
+    if (res.code == 0) {
+      show_message('上传成功', 'success');
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onBeforeMount(async () => {
+  if (!id) {
+    show_message('禁止访问');
+    return;
+  }
+  // 获取组件列表
+  await getAdminComponent();
+});
+</script>
+
+<style lang="less">
+@import '@/style/variables.less';
+.custom-submit-page {
+  padding: @page-padding-top 0;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .generation-box-parent {
+    width: 50%;
+    .generation-box {
+      width: 100%;
+      display: flex;
+      .interaction-form {
+        background: #2d2d2d;
+        border: 1px solid #565656;
+        border-radius: 18px;
+        flex: 1;
+        padding: 12px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        .basic-info {
+          .label {
+            margin: 4px 0 12px 0;
+            color: #b1b5c4;
+            font-weight: 300;
+            font-size: @font-size-12;
+            text-align: start;
+          }
+          .value {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            row-gap: 30px;
+            .custom-input-global {
+              width: 48%;
+            }
+            .custom-select-box {
+              width: 48%;
+            }
+            .input-pay-num {
+              width: 100%;
+            }
+          }
+        }
+        .confirm-box {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin: 20px 0;
+          box-sizing: border-box;
+          & > :last-child,
+          & > :nth-child(2) {
+            &::before {
+              width: calc(200% - 2px);
+            }
+          }
+          & > :last-child {
+            width: 300px !important;
+          }
+        }
+        & > :not(:first-child) {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+}
+</style>

src/router/modules/home.ts

@@ -110,6 +110,15 @@ export default [
           header: true,
         },
       },
+      // 图片提交场景
+      {
+        path: 'submit',
+        name: 'submit',
+        component: () => import('@/pages/submit/index.vue'),
+        meta: {
+          header: true,
+        },
+      },
     ],
   },
 ];

src/utils/api/scenes.ts

@@ -86,3 +86,12 @@ export const useSearch = (data: any) => {
     },
   });
 };
+
+// 提交图片接口
+export const useSubmitImage = (data: any) => {
+  return request.post('/api/users/conversation/submit', data, {
+    headers: {
+      authorization: `Bearer ${getUserCookie()}`,
+    },
+  });
+};

vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig(({ mode }) => {
   const newDate = `${date.getFullYear()}-${
     date.getMonth() + 1
   }-${date.getDate()}--${date.getHours()}.${date.getMinutes()}`;
-  const api = 1 ? 'http://156.247.11.21:85' : 'http://ai-gpt.test';
+  const api = 0 ? 'http://156.247.11.21:85' : 'http://ai-gpt.test';
   return {
     base: '/',
     resolve: {