refactor: 优化上传表单组件和类型定义

api/upnew/index.ts

@@ -16,7 +16,7 @@ export const create = (params: TcreateReq) => {
  * @returns
  */
 export const parent = (params: { type: string | number; parentId: number | string }) => {
-  return useFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/app/dict/parent', { query: params })
+  return useDollarFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/app/dict/parent', { query: params })
 }
 /**
  * 获取具有上下级的字典信息
@@ -32,7 +32,7 @@ export const parentV2 = (params: { type: string | number; parentId: number | str
  * @returns
  */
 export const indexTabs = () => {
-  return useFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/project/index/index-tab3')
+  return useDollarFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/project/index/index-tab3')
 }
 /**
  * 模糊查询获取标签内容

api/upnew/types.ts

@@ -10,9 +10,9 @@ export interface FileItem {
 
 // 定义整个 JSON 对象的类型
 export interface TcreateReq {
-  activeName: string
+  activeName: string | number
   id: number | string
-  type: any[]
+  type: number
   isDomestic: number | string
   province: string // 省份编码
   city: string // 城市编码

pages/toolbox/index.vue

@@ -37,18 +37,16 @@
           <!-- <div class="text-16px text-[#999999] font-normal">暂无数据</div> -->
           <el-empty v-if="!pageRes.list.length" :image="emptyImg"></el-empty>
         </div>
-        <div class="mt-[20px] text-right">
+        <el-pagination
-          <el-pagination
+          v-if="pageRes?.list.length"
-            v-model:current-page="pageReq.pageNum"
+          v-model:current-page="pageReq.pageNum"
-            :page-size="pageReq.pageSize"
+          :page-size="pageReq.pageSize"
-            layout="total, prev, pager, next"
+          layout="total, prev, pager, next"
-            :total="pageRes?.total"
+          :total="pageRes?.total"
-            :page-sizes="[10, 20, 30]"
+          :page-sizes="[10, 20, 30]"
-            class="justify-center!"
+          class="mt-[20px]"
-            @current-change="handleCurrentChange"
+          @current-change="handleCurrentChange"
-            @size-change="handleSizeChange"
+        />
-          />
-        </div>
       </div>
     </div>
     <div class="right w-[398px]">
@@ -115,10 +113,16 @@
   //   total: 0,
   // })
 
-  const {data: pageRes, refresh: getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
+  const { data: pageRes, refresh: getPage } = await useAsyncData(
-    const res = await page(pageReq)
+    `draw-page-toobox-list`,
-    return res.data
+    async () => {
-  })
+      const res = await page(pageReq)
+      return res.data
+    },
+    {
+      immediate: true,
+    }
+  )
 
   const loading = ref(false)
   // const getPage = () => {
@@ -153,7 +157,7 @@
     getPage()
   }
 
-  const {data: recommendList} = await useAsyncData(`draw-recommend-list-${Date.now()}`, async () => {
+  const { data: recommendList } = await useAsyncData(`draw-recommend-list-getRelationRecommend`, async () => {
     const res = await getRelationRecommend({
       type: 4,
     })

pages/upnew/components/DrawForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form-item label-width="110px" :prop="`${props.vaildRules}.files`" :rules="{ required: true, message: '请上传图纸', trigger: ['blur', 'change'] }">
+    <!-- <el-form-item label-width="110px" :prop="`${props.vaildRules}.files`" :rules="{ required: true, message: '请上传图纸', trigger: ['blur', 'change'] }">
       <KlUploader
         v-model:file-list="form.files"
         :limit="1000"
@@ -11,33 +11,44 @@
         @preview="handlePreview"
       >
       </KlUploader>
-    </el-form-item>
+    </el-form-item> -->
     <el-form-item
       label-width="110px"
       label="标题："
       :prop="`${props.vaildRules}.title`"
-      :rules="{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }"
+      :rules="[
+        { required: true, message: '20-50 字符，结构可用分类关键词+作品名/资源价值版本/使用场景', trigger: ['blur', 'change'] },
+        {
+          validator: (rule: any, value: any, callback: any) => {
+            if (value && value.length < 20) {
+              callback(new Error('20-50 字符，结构可用分类关键词+作品名/资源价值版本/使用场景'))
+            }
+            callback()
+          },
+          trigger: ['blur', 'change'],
+        },
+      ]"
     >
-      <el-input v-model="form.title" placeholder="请输入标题" class="w-361px!" maxlength="128"></el-input>
+      <el-input v-model="form.title" placeholder="请输入标题" minlength="20" maxlength="50"></el-input>
     </el-form-item>
     <el-form-item
       label-width="110px"
-      label="分类："
+      label="专业分类："
       :prop="`${props.vaildRules}.projectType`"
       :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }"
     >
       <!-- <el-select v-model="form.projectType" placeholder="请选择分类" class="w-361px!" multiple>
         <el-option v-for="(item, index) in projectTypeList" :key="index" :label="item.name" :value="item.id" />
       </el-select> -->
-      <el-cascader v-model="form.projectType" class="w-361px!" :options="projectTypeList" :props="cascaderProps" clearable collapse-tags />
+      <el-cascader v-model="form.projectType" class="w-[100%]!" :options="projectTypeList" :props="cascaderProps" clearable collapse-tags />
     </el-form-item>
     <el-form-item
       label-width="110px"
-      label="软件版本："
+      label="软件分类："
       :prop="`${props.vaildRules}.editions`"
       :rules="{ required: true, message: '请选择软件版本', trigger: ['blur', 'change'] }"
     >
-      <el-select v-model="form.editions" placeholder="请选择软件版本" class="w-361px!">
+      <el-select v-model="form.editions" placeholder="请选择软件版本">
         <el-option v-for="(item, index) in editionsList" :key="index" :label="item.name" :value="item.id" />
       </el-select>
     </el-form-item>
@@ -54,20 +65,11 @@
     </el-form-item>
     <el-form-item
       label-width="110px"
-      label="标签："
+      label="作品标签："
       :prop="`${props.vaildRules}.labels`"
-      :rules="{ required: true, message: '请选择标签', trigger: ['blur', 'change'] }"
+      :rules="{ required: false, message: '请选择标签', trigger: ['blur', 'change'] }"
     >
-      <el-select
+      <el-select v-model="form.labels" :remote-method="remoteMethod" :loading="loading" multiple filterable remote placeholder="请输入搜索标签">
-        v-model="form.labels"
-        :remote-method="remoteMethod"
-        :loading="loading"
-        multiple
-        filterable
-        remote
-        placeholder="请输入搜索标签"
-        class="w-361px!"
-      >
         <el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
       </el-select>
     </el-form-item>
@@ -75,11 +77,11 @@
       label-width="110px"
       label="金币："
       :prop="`${props.vaildRules}.points`"
-      :rules="{ required: true, message: '请输入金币', trigger: ['blur', 'change'] }"
+      :rules="{ required: true, message: '金币设置分销为0-15,设置0金币为专属资源可直接获利2-15金币', trigger: ['blur', 'change'] }"
     >
-      <el-input-number v-model="form.points" :controls="false" :precision="0" :min="0" placeholder="请输入金币" class="w-361px! text-left!"></el-input-number>
+      <el-input-number v-model="form.points" :controls="false" :precision="0" :min="0" placeholder="请输入金币" class="w-[100%]! text-left!"></el-input-number>
     </el-form-item>
-    <el-form-item
+    <!-- <el-form-item
       label-width="110px"
       label="图形格式："
       :prop="`${props.vaildRules}.formatType`"
@@ -88,7 +90,7 @@
       <el-checkbox-group v-model="form.formatType">
         <el-checkbox v-for="(item, index) in formatTypeList" :key="index" :label="item" :value="item"></el-checkbox>
       </el-checkbox-group>
-    </el-form-item>
+    </el-form-item> -->
     <el-form-item
       label-width="110px"
       label="上传封面："
@@ -103,9 +105,9 @@
         tips="上传图片支持jpg/gif/png格式、第一张为封面图片、每张图片大小不得超过1M"
         @validate="formRef?.validateField(`${props.vaildRules}.coverImages`)"
       >
-        <div class="h-77px w-161px flex items-center justify-center border border-[#cdd0d6] rounded-1px border-dashed bg-[#fafafa]">
+        <div class="h-[77px] w-[161px] flex items-center justify-center border border-[#cdd0d6] rounded-[1px] border-dashed bg-[#fafafa]">
           <el-icon class="text-[#999999]"><Plus /></el-icon>
-          <div class="ml-4px mt-2px text-14px text-[#999999] font-normal">上传图纸</div>
+          <div class="ml-[4px] mt-[2px] text-[14px] text-[#999999] font-normal">上传图纸</div>
         </div>
       </KlUploader>
     </el-form-item>
@@ -123,9 +125,9 @@
         :show-tip="false"
         @validate="formRef?.validateField(`${props.vaildRules}.renderings`)"
       >
-        <div class="h-77px w-161px flex items-center justify-center border border-[#cdd0d6] rounded-1px border-dashed bg-[#fafafa]">
+        <div class="h-[77px] w-[161px] flex items-center justify-center border border-[#cdd0d6] rounded-[1px] border-dashed bg-[#fafafa]">
           <el-icon class="text-[#999999]"><Plus /></el-icon>
-          <div class="ml-4px mt-2px text-14px text-[#999999] font-normal">上传图纸</div>
+          <div class="ml-[4px] mt-[2px] text-[14px] text-[#999999] font-normal">上传图纸</div>
         </div>
       </KlUploader>
     </el-form-item>
@@ -134,15 +136,15 @@
     </el-form-item>
     <el-form-item
       label-width="110px"
-      label="描述："
+      label="作品描述："
       :prop="`${props.vaildRules}.description`"
       :rules="[
-        { required: true, message: '请输入描述', trigger: ['blur', 'change'] },
+        { required: true, message: '简介字数限制60-150 字符，需包含用途、文件介绍、适用场景等', trigger: ['blur', 'change'] },
         {
           validator: (rule, value, callback) => {
             console.log(rule)
-            if (value.length < 70) {
+            if (value.length < 60) {
-              callback(new Error('输入内容不能少于 70 字'))
+              callback(new Error('简介字数限制60-150 字符，需包含用途、文件介绍、适用场景等'))
             } else {
               callback()
             }
@@ -151,7 +153,7 @@
         },
       ]"
     >
-      <el-input v-model="form.description" type="textarea" :rows="6" placeholder="请输入描述" class="w-361px!" minlength="70" show-word-limit></el-input>
+      <el-input v-model="form.description" type="textarea" :rows="6" placeholder="请输入描述" minlength="60" maxlength="150" show-word-limit></el-input>
     </el-form-item>
   </div>
 </template>
@@ -216,7 +218,7 @@
       formatTypeList.value = res.data
     })
   }
-  getFormatTypeList()
+  // getFormatTypeList()
 
   const projectTypeList = ref<any>([])
   /** 获取分类下拉框 */
@@ -225,7 +227,6 @@
       projectTypeList.value = res.data
     })
   }
-  getParent()
 
   /** 版本 */
   const editionsList = ref<any>([])
@@ -237,11 +238,15 @@
       editionsList.value = res.data
     })
   }
-  getEditionsList()
 
   const handlePreview = (val: any) => {
     emit('preview', val)
   }
+
+  onMounted(() => {
+    getEditionsList()
+    getParent()
+  })
 </script>
 
 <style lang="scss" scoped>

pages/upnew/components/DrawType.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box-border border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-33px py-22px pb-10px!">
+  <div class="box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[33px] py-[22px] pb-[10px]!">
     <el-form-item
       label="选择上传资料类型："
       label-width="170px"
@@ -7,37 +7,40 @@
       prop="type"
       :rules="[{ required: true, message: '请选择上传资料类型', trigger: 'change' }]"
     >
-      <el-checkbox-group v-model="form.type" @change="handleTypeChange">
+      <el-radio-group v-model="form.type" @change="handleTypeChange(form.type)">
-        <el-checkbox :value="1">图纸</el-checkbox>
+        <el-radio :value="1">图纸</el-radio>
-        <el-checkbox :value="3">模型</el-checkbox>
+        <el-radio :value="3">模型</el-radio>
-        <el-checkbox :value="2">文本</el-checkbox>
+        <el-radio :value="2">文本</el-radio>
-      </el-checkbox-group>
+      </el-radio-group>
     </el-form-item>
-    <el-form-item
+    <div class="flex gap-[20px]">
-      label="选择国家："
-      label-width="110px"
-      label-position="left"
-      prop="isDomestic"
-      :rules="[{ required: true, message: '请选择国家', trigger: 'change' }]"
-    >
-      <el-select v-model="form.isDomestic" placeholder="请选择" class="w-200px!" @change="handleCountryChange">
-        <el-option label="国内" :value="1"></el-option>
-        <el-option label="国外" :value="0"></el-option>
-      </el-select>
-    </el-form-item>
-    <div class="flex">
       <el-form-item
+        label="选择国家："
+        label-width="110px"
+        label-position="left"
+        prop="isDomestic"
+        :rules="[{ required: true, message: '请选择国家', trigger: 'change' }]"
+      >
+        <el-select v-model="form.isDomestic" placeholder="请选择" class="w-[200px]!" @change="handleCountryChange">
+          <el-option label="国内" :value="1"></el-option>
+          <el-option label="国外" :value="0"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="form.isDomestic === 0"
         label="所在地区："
         label-width="110px"
         label-position="left"
         prop="province"
         :rules="[{ required: true, message: '请选择所在地区', trigger: 'change' }]"
       >
-        <el-select v-model="form.province" placeholder="请选择" class="w-200px!" @change="handleProvinceChange">
+        <el-select v-model="form.province" filterable placeholder="请选择" class="w-[200px]!">
           <el-option v-for="(item, index) in provinceList" :key="index" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
-      <el-form-item label-width="10px" label-position="left" prop="city" :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]">
+    </div>
+    <!-- <div class="flex"> -->
+    <!-- <el-form-item label-width="10px" label-position="left" prop="city" :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]">
         <el-select v-model="form.city" placeholder="请选择" class="w-200px!" @change="handleCityChange">
           <el-option v-for="(item, index) in cityList" :key="index" :label="item.name" :value="item.id" />
         </el-select>
@@ -46,8 +49,8 @@
         <el-select v-model="form.county" placeholder="请选择" class="w-200px!">
           <el-option v-for="(item, index) in countyList" :key="index" :label="item.name" :value="item.id" />
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
-    </div>
+    <!-- </div> -->
   </div>
 </template>
 
@@ -63,32 +66,16 @@
 
   // 添加旧值引用
   const oldTypeValue = ref<(number | string)[]>([])
-  const handleTypeChange = (val: any) => {
+  const handleTypeChange = (val: number) => {
-    console.log(val, 'val')
+    form.value.draws = [
-
+      {
-    // 新增的项（当前值有但旧值没有的）
-    const added = val.filter((item: number | string) => !oldTypeValue.value.includes(item))
-    // 减少的项（旧值有但当前值没有的）
-    const removed = oldTypeValue.value.filter((item) => !val.includes(item))
-
-    if (added.length) {
-      form.value.draws.push({
         ...JSON.parse(JSON.stringify(DrawsEnmu)),
-        type: added[0],
+        type: val,
-      })
+      },
-    } else if (removed.length) {
+    ]
-      form.value.draws = form.value.draws.filter((item) => item.type !== removed[0])
-    }
-
-    // 更新旧值
-    oldTypeValue.value = [...val]
-    // 更新当前activeName值
-    if (!val?.length) {
-      form.value.activeName = ''
-    }
 
     nextTick(() => {
-      form.value.activeName = val[val.length - 1]
+      form.value.activeName = val
     })
   }
 

pages/upnew/components/Preview.vue

@@ -1,20 +1,18 @@
 <template>
   <div class="ml-[23px] box-border min-h-[930px] w-[516px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[33px] py-[22px]">
-    <div class="flex items-center">
+    <!-- <div class="flex items-center">
-      <img src="~/assets/images/preview.png" alt="" srcset="" width="16px" height="19px" /><span class="ml-[7px] text-[18px] text-[#333333] font-normal"
+      <img src="~/assets/images/preview.png" alt="" srcset="" width="16px" height="19px" /><span class="ml-[7px] text-[18px] text-[#333333] font-normal">
-        >预览</span
+        预览
-      ></div
+      </span>
-    >
+    </div> -->
-    <div class="mt-[20px]">
+    <!-- <div class="mt-[20px]">
       <el-image :src="previewUrl" class="mb-[16px] max-h-[320px] max-w-[460px] min-h-[200px]" fit="contain"></el-image>
       <span class="text-[16px] text-[#333333] font-normal">{{ previewName || '图纸标题' }}</span></div
-    >
+    > -->
-    <div class="my-[30px] h-[1px] w-[460px] rounded-[1px] bg-[#EEEEEE]"></div>
+    <!-- <div class="my-[30px] h-[1px] w-[460px] rounded-[1px] bg-[#EEEEEE]"></div> -->
     <div class="flex items-center">
       <img src="~/assets/images/tip.png" width="20px" height="20px" />
-      <span class="ml-[7px] text-[18px] text-[#333333] font-normal">
+      <span class="ml-[7px] text-[18px] text-[#333333] font-normal"> 上传遇到问题可以咨询 </span>
-        上传遇到问题可以咨询
-      </span>
     </div>
     <div class="mt-[20px] text-center"><el-image src="https://picsum.photos/290/290?_t" alt="" srcset="" class="h-[290px] w-[290px]" /></div>
     <div class="mt-[30px] text-center text-[16px] text-[#333333] font-normal">

pages/upnew/index.vue

@@ -36,9 +36,9 @@
   const router = useRouter() // 导入路由实例，用于跳转页面
 
   const form = reactive<TcreateReq>({
-    activeName: '', // 标签
+    activeName: 1, // 标签
     id: '', // 图纸id  id,示例值(24548)
-    type: [], // 图纸类型 类型,示例值(1)
+    type: 1, // 图纸类型 类型,示例值(1)
     isDomestic: '', // 是否是国内: 1是 0否
     province: '', // 省份编码
     city: '', // 城市编码
@@ -121,12 +121,12 @@
   }
 
   // 图纸类型
-  const drawTypeRef = ref()
+  const drawTypeRef = ref<InstanceType<typeof DrawType>>()
   onMounted(() => {
     // 初始化图纸类型
-    drawTypeRef.value.handleTypeChange([1])
+    drawTypeRef.value?.handleTypeChange(1)
     // 初始化图纸类型
-    form.type = [1]
+    form.type = 1
   })
 </script>
 <style lang="scss" scoped>