主图详情调整

frontend/src/views/Photography/detail.vue

@@ -7,14 +7,14 @@
           <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
           主图LOGO：
         </div>
-        <upload :value="queryParams.logoImage" @input="onInput"></upload>
+        <upload :value="form.logoImage" @input="onInput"></upload>
         <router-link class="mar-left-20 " :to="{
           name: 'PhotographySeniorDetail'
         }">
-        <button class="generate-button button--primary1 mar-left-20" @click="generate">去高级详情</button>
-      </router-link>
+          <button class="generate-button button--primary1 mar-left-20" @click="generate">去高级详情</button>
+        </router-link>
       </div>
-      
+
       <el-divider />
       <!-- 选择详情模板部分 -->
       <div class="template-section ">
@@ -32,13 +32,13 @@
 
         <div class="template-list">
           <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
-            @click="queryParams.templateId = template.id">
+            @click="form.templateId = template.id">
             <el-image :src="ossResize(test_image_url, {
               m: 'lfit',
               h: 360,
               w: 500
             })" fit="contain" class="cur-p" style="width: 100%; display: block;" />
-            <div class="select-warp" :class="queryParams.templateId == template.id ? 'active' : ''">
+            <div class="select-warp" :class="form.templateId == template.id ? 'active' : ''">
               <el-icon color="#FFFFFF">
                 <Select />
               </el-icon>
@@ -62,24 +62,21 @@
         </div>
 
         <div class="flex-item left">
-          <el-radio-group v-model="queryParams.radio1" class="ml-4">
+          <el-radio-group v-model="form.dataType" class="ml-4">
             <el-radio label="1" size="large">EXCEL文件选择</el-radio>
             <el-radio label="2" size="large">系统对接（和业务员联系）</el-radio>
           </el-radio-group>
         </div>
-        <div v-if="queryParams.radio1 == '1'" class="excel-upload">
-          <el-row :gutter="20">
-            <el-col :span="1"></el-col>
-            <el-col :span="4">商品基础资料EXCEL文件选择：</el-col>
-            <el-col :span="18">
-              <div class="flex bottom">
-                <el-input type="textarea" v-model="excelFilePath" />
-                <el-button class="select-button button--primary1 mar-left-20" type="primary" @click="selectExcel">
-                  <img src="@/assets/images/Photography/wenjian.png" style="width: 16px; margin-right: 4px;" />
-                  选择</el-button>
-              </div>
-            </el-col>
-          </el-row>
+        <div v-if="form.dataType == '1'" class="excel-upload">
+          <div class="flex bottom between">
+            <div style="max-width: 160px;" class="mar-left-20">商品基础资料EXCEL文件选择：</div>
+            <div class="flex bottom mar-left-20" style="flex-grow: 1;">
+              <el-input type="textarea" v-model="form.excelFilePath" />
+            </div>
+            <el-button class="select-button button--primary1  mar-left-20" type="primary" @click="selectExcel">
+              <img src="@/assets/images/Photography/wenjian.png" style="width: 16px; margin-right: 4px;" />
+              选择</el-button>
+          </div>
         </div>
       </div>
 
@@ -98,19 +95,12 @@
 import { ref, computed, reactive } from 'vue';
 import { Select } from '@element-plus/icons-vue'
 import { ossResize } from '@/utils/appfun'
-
-
-
 import upload from '@/components/upload'
-
-
 import client from "@/stores/modules/client";
 import icpList from '@/utils/ipc'
 const clientStore = client();
 const test_image_url = ref('https://ossimg.valimart.net/uploads/vali_ai/20230927/169580582298394.png')
 
-
-
 // 模拟数据
 const templates = [
   { id: 1101, templateId: '某某模版编号1', preview: '...' },
@@ -125,24 +115,23 @@ const templates = [
   { id: 1110, templateId: '某某模版编号10', preview: '...' },
   { id: 1111, templateId: '某某模版编号11', preview: '...' },
   { id: 1112, templateId: '某某模版编号12', preview: '...' },
-  // 更多模板...
 ];
-const itemsPerPage = 4; // 每页显示的模板数量
 // 状态变量
-const dataPrepOption = ref('excel');
-const excelFilePath = ref('D:\\MyDocuments\\PythonCode\\MyPython\\red_dragonfly\\deal_pics\\auto_capture_V2\\auto_photo');
 const totalPage = ref(3);
+const itemsPerPage = 4; // 每页显示的模板数量
 const dialogVisible = ref(false);
 const dialogImageUrl = ref('');
-
-const queryParams = reactive({
-  logoImage: '',
+const queryParams = reactive({ // 分页查询参数
   size: 1,
   current: 1,
-  templateId: 1101,
-  radio1: 1
 })
+const form = reactive({
+  dataType: '1', // 1: 选择excel文件 2: 系统对接
+  logoImage: '', // 主图LOGO
+  templateId: 1101,
+  excelFilePath: 'D:\\MyDocuments\\PythonCode\\MyPython\\red_dragonfly\\deal_pics\\auto_capture_V2\\auto_photo', // 商品基础资料EXCEL文件选择
 
+})
 // 计算属性，获取当前页可见的模板
 const visibleTemplates = computed(() => {
   const startIndex = (queryParams.current - 1) * itemsPerPage;
@@ -164,14 +153,11 @@ const onSizeChange = (data) => {
 };
 // 开始生成操作
 const generate = () => {
-  console.log('开始生成');
   // 这里添加实际生成主图和详情的逻辑
-  console.log('queryParams', queryParams)
-  console.log('excelFilePath', excelFilePath)
+  console.log('queryParams', form)
 };
 const onInput = (value) => {
-  console.log('value', value)
-  queryParams.logoImage = value
+  form.logoImage = value
 }
 
 function selectExcel() {
@@ -183,7 +169,7 @@ function selectExcel() {
     title: "选择基础文件资料"
   });
   clientStore.ipc.on(icpList.utils.openFile, async (event, result) => {
-    excelFilePath.value = result
+    form.excelFilePath = result
     clientStore.ipc.removeAllListeners(icpList.utils.openFile);
   })
 }