科技成果转化

src/api/system/dashboard.api.ts

@@ -21,13 +21,3 @@ export const getIndexList = async () => {
     httpErrorHandle();
   }
 };
-
-// 技术成果
-export const getTechnologyTransferList = async (data: any) => {
-  try {
-    const res = await http(RequestHttpEnum.GET)("/technology-transfer/list", data);
-    return res;
-  } catch {
-    httpErrorHandle();
-  }
-};

src/api/system/system.api.ts

@@ -60,9 +60,12 @@ export const getDictAll = async () => {
 };
 
 // 国内专利申请
-export const postPatentApplication  = async (data: any) => {
+export const postPatentApplication = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/patent-application/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/patent-application/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -70,9 +73,12 @@ export const postPatentApplication  = async (data: any) => {
 };
 
 // 国内专利申请
-export const postPatentEnforcement  = async (data: any) => {
+export const postPatentEnforcement = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/patent-enforcement/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/patent-enforcement/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -80,29 +86,37 @@ export const postPatentEnforcement  = async (data: any) => {
 };
 
 // 专利运营需求
-export const postPatentOperations  = async (data: any) => {
+export const postPatentOperations = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/patent-operations/patent_operation", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/patent-operations/patent_operation",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
   }
 };
 
-
 // 商标注册
-export const postTrademarkApplication  = async (data: any) => {
+export const postTrademarkApplication = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/trademark-application/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/trademark-application/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
   }
 };
 // 添加商标续展
-export const postTrademarkRenewal  = async (data: any) => {
+export const postTrademarkRenewal = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/trademark-renewal/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/trademark-renewal/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -110,9 +124,12 @@ export const postTrademarkRenewal  = async (data: any) => {
 };
 
 // 添加商标续展
-export const postTrademarkAmendment  = async (data: any) => {
+export const postTrademarkAmendment = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/trademark-amendment/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/trademark-amendment/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -120,9 +137,12 @@ export const postTrademarkAmendment  = async (data: any) => {
 };
 
 // 添加商标撤三
-export const postTrademarkCancellation  = async (data: any) => {
+export const postTrademarkCancellation = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/three-year-non-use-cancellation/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/three-year-non-use-cancellation/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -132,7 +152,10 @@ export const postTrademarkCancellation  = async (data: any) => {
 // 添加商标异议
 export const postTrademarkOpposition = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/trademark-opposition/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/trademark-opposition/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -140,20 +163,25 @@ export const postTrademarkOpposition = async (data: any) => {
 };
 
 // 添加商标驳回复审
-export const postTrademarkRejection  = async (data: any) => {
+export const postTrademarkRejection = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/intellectual-property/trademark-rejection/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/intellectual-property/trademark-rejection/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
   }
 };
 
-
 // 专利申请历史
 export const getPatentApplicationList = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.GET)("/intellectual-property/patent-application/list", data);
+    const res = await http(RequestHttpEnum.GET)(
+      "/intellectual-property/patent-application/list",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -179,12 +207,14 @@ export const getPatentsView = async (id: any) => {
   }
 };
 
-
 // 创建新技术创新需求
 
 export const postTechnologyInnovationRequirementsCreate = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.POST)("/technology-innovation-requirements/create", data);
+    const res = await http(RequestHttpEnum.POST)(
+      "/technology-innovation-requirements/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
@@ -193,9 +223,37 @@ export const postTechnologyInnovationRequirementsCreate = async (data: any) => {
 
 export const getTechnologyInnovationRequirements = async (data: any) => {
   try {
-    const res = await http(RequestHttpEnum.GET)("/technology-innovation-requirements/list", data);
+    const res = await http(RequestHttpEnum.GET)(
+      "/technology-innovation-requirements/list",
+      data
+    );
+    return res;
+  } catch {
+    httpErrorHandle();
+  }
+};
+
+// 成果展示筛选
+export const getTechnologyTransferList = async (data: any) => {
+  try {
+    const res = await http(RequestHttpEnum.GET)(
+      "/technology-transfer/list",
+      data
+    );
+    return res;
+  } catch {
+    httpErrorHandle();
+  }
+};
+
+export const postTechnologyTransfer = async (data: any) => {
+  try {
+    const res = await http(RequestHttpEnum.POST)(
+      "/technology-transfer/create",
+      data
+    );
     return res;
   } catch {
     httpErrorHandle();
   }
-};
+};

src/router/modules/conversion.route.ts

@@ -3,6 +3,7 @@ import { RouteRecordRaw } from "vue-router";
 // 引入路径
 const importPath = {
   conversionHome: () => import("@/views/conversion/index"),
+  conversionCreate: () => import("@/views/conversion/create.vue"),
 };
 
 const conversionRoutes: Array<RouteRecordRaw> = [
@@ -14,6 +15,14 @@ const conversionRoutes: Array<RouteRecordRaw> = [
       title: "技术成果转化",
     },
   },
+  {
+    path: "/conversion/create",
+    name: "conversionCreate",
+    component: importPath["conversionCreate"],
+    meta: {
+      title: "新增技术成果转化",
+    },
+  },
 ]
 
 export default conversionRoutes;

src/views/conversion/components/AchievementItem/index.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="ac-item-card">
-    <div class="card-name">MEMS光声光谱痕量气体传感器</div>
+    <div class="card-name">{{ item.technologicalNeedsName }}</div>
     <div class="card-pic">
-      <img src="@/assets/pic/ac_01.png" alt="#" />
+      <img :src="item.technicalPicturesPath" alt="#" />
       <img class="corner" src="@/assets/icon/corner.png" alt="#" />
-      <span class="tag">国内领先</span>
+      <span class="tag">{{ item.maturityLevel }}</span>
     </div>
     <div class="card-info">
       <div class="card-info-text">
-        <div class="text">设备名称：电子信息 新型电子元器件</div>
-        <div class="text">功能介绍：陕西 西安 莲湖区</div>
+        <div class="text">技术类别：{{ item.technicalCategory }}</div>
+        <div class="text">所在区域：{{ item.geography }}</div>
+        <div class="text">关联专利：{{ item.relatedPatents }}</div>
+        <div class="text">关联医疗注册证：{{ item.medicalRegistrationName }}</div>
+        <div class="text">关联学术文章：{{ item.academicArticlesName }}</div>
       </div>
       <div class="card-info-svg">
         <img src="@/assets/icon/ac.png" alt="#" />
@@ -19,21 +22,29 @@
     <div class="card-button">
       <div class="card-button-plain">
         <img src="@/assets/icon/phone.png" alt="#" />
-        <span>18612243416</span>
+        <span>{{ item.contactNumber }}</span>
       </div>
       <div class="card-button-plain">
         <img src="@/assets/icon/date.png" alt="#" />
-        <span>2024-05-01</span>
+        <span>{{  item.createTime }}</span>
       </div>
       <div class="card-button-plain">
         <img src="@/assets/icon/eye.png" alt="#" />
-        <span>648</span>
+        <span>{{ item.numberOfVisits }}</span>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { defineProps } from "vue";
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
 
 <style lang="scss" scoped>
 .ac-item-card {
@@ -93,15 +104,18 @@
     margin-left: 1rem;
     margin-right: 1rem;
     .card-info-text {
-      height: 4rem;
+      height: 7rem;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
     }
     .card-info-svg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       img {
-        width: 4rem;
-        height: 4rem;
+        width: 5rem;
+        height: 5rem;
       }
     }
   }

src/views/conversion/create.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="page">
+    <el-card shadow="never" style="margin-top: 1rem; padding: 1rem">
+      <h1>科技成果转化信息填写</h1>
+
+      <el-form
+        :model="patentForm"
+        class="patent-form"
+        label-width="120px"
+        label-position="left"
+      >
+        <div class="page-title">企业信息</div>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="成果所在单位">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.companyIdentification"
+                placeholder="请输入成果所在单位"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item class="form-item" label="社会信用代码">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.socialCreditCode"
+                placeholder="请输入社会信用代码"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="所在区域省份">
+              <el-cascader
+                style="width: 100%"
+                placeholder="请选择国家地区"
+                v-model="patentForm.provinces"
+                :options="region"
+                :props="{
+                  emitPath: false,
+                }"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item class="form-item" label="行业类别">
+              <el-cascader
+                  style="width: 220px"
+                  placeholder="请选择技术领域"
+                  v-model="patentForm.sector"
+                  :options="trademarkType"
+                  :props="{
+                    label: 'name',
+                    value: 'code',
+                    emitPath: false,
+                  }"
+                />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="联系人">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.associates"
+                placeholder="请输入联系人"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item class="form-item" label="联系电话">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.contactNumber"
+                placeholder="请输入联系电话"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="邮箱">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.email"
+                placeholder="请输入邮箱"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <div class="section-title">需求信息</div>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="关联技术成果">
+              <el-select
+                v-model="patentForm.patentAssociationsType"
+                placeholder="请选择需求类型"
+              >
+                <el-option
+                  v-for="item in result_type"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" v-if="patentForm.patentAssociationsType === '0'">
+            <el-form-item class="form-item" label="专利名称">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.relatedPatents"
+                placeholder="请输入专利名称"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" v-if="patentForm.patentAssociationsType === '1'">
+            <el-form-item class="form-item" label="医疗注册证名称">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.medicalRegistrationName"
+                placeholder="请输入医疗注册证名称"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" v-if="patentForm.patentAssociationsType === '1'">
+            <el-form-item class="form-item" label="医疗注册证号码">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.medicalRegistrationNumber"
+                placeholder="请输入医疗注册证号码"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" v-if="patentForm.patentAssociationsType === '2'">
+            <el-form-item class="form-item" label="学术文章名称">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.academicArticlesName"
+                placeholder="请输入学术文章名称"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="成熟度">
+              <el-select
+                style="width: 220px"
+                v-model="patentForm.maturityLevel"
+                placeholder="请选择技术成熟度"
+              >
+                <el-option
+                  v-for="item in maturity_level"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item class="form-item" label="评估价值">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.assessedValue"
+                placeholder="请输入评估价值"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="技术简介">
+              <el-input
+                class="custom-input"
+                v-model="patentForm.technicalBrief"
+                placeholder="请输入技术简介"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="技术图片">
+              <el-upload
+                class="logo-uploader"
+                :show-file-list="false"
+                :http-request="handleUploadChange"
+              >
+                <img
+                  v-if="trademarkDiagramPath"
+                  :src="trademarkDiagramPath"
+                  class="logo"
+                />
+                <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
+              </el-upload> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item class="form-item" label="成熟度证明">
+              <el-upload
+                drag
+                multiple
+                style="width: 500px"
+                :http-request="handleUploadFile"
+              >
+                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                <div class="el-upload__text">上传附件</div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <div class="button-container">
+          <el-button type="primary" @click="goBack">返回</el-button>
+          <el-button type="primary" @click="submitApplication"
+            >提交申请</el-button
+          >
+        </div>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { useDictStore } from "@/store/modules/useDictStore/index";
+import { postFileUpload, postTechnologyTransfer } from "@/api";
+import { useRouter } from "vue-router";
+import trademarkType from "@/assets/json/trademark.json";
+// 使用路由
+const router = useRouter();
+
+// 获取字典数据
+const dictStore = useDictStore();
+const result_type = dictStore.dictData.result_type; // 需求类型字典
+const region = dictStore.dictData.region; // 区域省份字典
+const maturity_level = dictStore.dictData.maturity_level; // 技术成熟度字典
+
+// 上传文件
+const files = ref<any>([]);
+const trademarkDiagramPath = ref("");
+
+// 定义 PatentForm 接口
+interface PatentForm {
+  maturityLevel: string; // 技术成熟度
+  assessedValue: string; // 评估价值
+  technicalBrief: string; // 技术简介
+  patentAssociationsType: string; // 关联技术成果类型
+  relatedPatents: string; // 专利名称
+  medicalRegistrationName: string; // 医疗注册证名称
+  medicalRegistrationNumber: string; // 医疗注册证号码
+  academicArticlesName: string; // 学术文章名称
+  companyIdentification: string; // 成果所在单位
+  socialCreditCode: string; // 社会信用代码
+  provinces: string; // 所在区域省份
+  sector: string; // 所属行业类别
+  associates: string; // 联系人
+  contactNumber: string; // 联系电话
+  email: string; // 邮箱
+  technicalPicturesPath: string; // 技术图片
+  proofOfMaturity_path: string; // 成熟度证明
+}
+
+// 创建一个新的 patentForm
+const patentForm = ref<PatentForm>({
+  maturityLevel: "1", // 示例：技术成熟度
+  assessedValue: "500万元", // 示例：评估价值
+  technicalBrief: "这是一项关于新型药物的技术，具有潜在的治疗效果。",
+  patentAssociationsType: "发明专利", // 示例：关联技术成果类型
+  relatedPatents: "CN123456789", // 示例：专利名称
+  medicalRegistrationName: "新型药物注册证", // 示例：医疗注册证名称
+  medicalRegistrationNumber: "2023-0001", // 示例：医疗注册证号码
+  academicArticlesName: "新型药物的临床研究", // 示例：学术文章名称
+  companyIdentification: "某某生物科技有限公司", // 示例：成果所在单位
+  socialCreditCode: "91320000MAABCDEF", // 示例：社会信用代码
+  provinces: "江苏省", // 示例：所在区域省份
+  sector: "生物医药", // 示例：所属行业类别
+  associates: "张三", // 示例：联系人
+  contactNumber: "13800000000", // 示例：联系电话
+  email: "zhangsan@example.com", // 示例：邮箱
+  technicalPicturesPath: "", // 示例：技术图片
+  proofOfMaturity_path: "", // 示例：成熟度证明
+});
+
+// 初始化数据（如果有需要可添加操作）
+onMounted(() => {
+  // 初始化时的操作（例如，加载默认数据等）
+});
+
+// 返回按钮处理函数
+const goBack = () => {
+  router.push({
+    path: "/demand",
+  });
+};
+
+const handleUploadChange = async (option: any) => {
+  try {
+    const file = new FormData();
+    file.append("file", option.file);
+    const res = (await postFileUpload(file)) as unknown as any;
+    patentForm.value.technicalPicturesPath = res.uuid;
+    trademarkDiagramPath.value = import.meta.env.VITE_DEV_IMG + "/" + res.uuid;
+  } catch (error) {
+    console.error("文件上传失败:", error);
+  }
+};
+
+const handleUploadFile = async (option: any) => {
+  try {
+    const file = new FormData();
+    file.append("file", option.file);
+    const res = (await postFileUpload(file)) as unknown as any;
+    patentForm.value.proofOfMaturity_path = res.uuid;
+    files.value.push(res);
+  } catch (error) {
+    console.error("文件上传失败:", error);
+  }
+};
+
+// 提交申请处理函数
+const submitApplication = async () => {
+  try {
+    const res = (await postTechnologyTransfer(
+      patentForm.value
+    )) as unknown as any;
+
+    if (res.code === 200) {
+      ElMessage({
+        type: "success",
+        message: "申请提交成功",
+      });
+      router.push({
+        path: "/conversion",
+      });
+    } else {
+      ElMessage({
+        type: "error",
+        message: res.message || "申请提交失败",
+      });
+    }
+  } catch (error) {
+    ElMessage({
+      type: "error",
+      message: "网络错误，请稍后再试",
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+  height: calc(100vh - 4rem);
+  box-sizing: border-box;
+  padding: 2rem 18rem;
+  color: #333;
+  background-image: url("@/assets/pic/bg.png"); /* 设置背景图片 */
+  background-repeat: repeat; /* 上下重复 */
+  background-size: cover; /* 左右满铺 */
+  background-position: center; /* 居中对齐 */
+  .form-item {
+    margin-right: 20px; // 根据需要设置间距
+    .logo {
+      width: 178px;
+      height: 178px;
+    }
+    .logo-uploader {
+      width: 178px;
+      height: 178px;
+      border: 1px dashed var(--el-border-color);
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: var(--el-transition-duration-fast);
+    }
+    .logo-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      text-align: center;
+    }
+  }
+  .custom-input {
+    max-width: 20rem;
+    width: 100%; // 可选
+  }
+  .button-container {
+    display: flex;
+    justify-content: flex-end; /* 使按钮靠右对齐 */
+    width: 100%;
+  }
+  .page-title {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-family: "源黑体 CN", sans-serif;
+    font-weight: 500;
+    font-size: 1.25rem;
+    line-height: 2rem;
+    text-align: left;
+  }
+
+  .trademark-form {
+    margin-bottom: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.2rem;
+    margin: 1.5rem 0 0.5rem;
+    font-weight: 500;
+  }
+}
+
+.trademark {
+  display: flex;
+  width: 100%;
+  height: 500px;
+  border: 1px solid #c1c1c1;
+  .trademark-aside {
+    width: 300px;
+    border-right: 1px solid #c1c1c1;
+    .trademark-aside-search {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding-left: 10px;
+    }
+  }
+  .trademark-main {
+    flex: 1;
+    .trademark-main-header {
+      width: 100%;
+      height: 50px;
+      border-bottom: 1px solid #c1c1c1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 0 20px;
+    }
+    .trademark-main-content {
+      box-sizing: border-box;
+      padding: 20px;
+    }
+  }
+}
+</style>

src/views/conversion/index.vue

@@ -4,7 +4,9 @@
       <div class="demand-content-header">
         <div class="header-title">成果展示筛选</div>
         <div class="header-button">
-          <el-button type="primary" :icon="EditPen" text> 发布成果 </el-button>
+          <el-button type="primary" :icon="EditPen" text @click="onClickCreate">
+            发布成果
+          </el-button>
         </div>
       </div>
       <div class="demand-content-search">
@@ -12,111 +14,73 @@
           <div class="search-bottom-select">
             <el-form :inline="true" :model="formInline">
               <el-form-item label="技术领域">
-                <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择"
-                  style="width: 120px"
-                  clearable
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select>
-              </el-form-item>
-            </el-form>
-            <el-form :inline="true" :model="formInline">
-              <el-form-item label="新型产业">
-                <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择"
-                  style="width: 120px"
-                  clearable
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select>
+                <el-cascader
+                  style="width: 220px"
+                  placeholder="请选择技术领域"
+                  v-model="formInline.technicalRealm"
+                  :options="trademarkType"
+                  :props="{
+                    label: 'name',
+                    value: 'code',
+                    emitPath: false,
+                  }"
+                />
               </el-form-item>
             </el-form>
             <el-form :inline="true" :model="formInline">
               <el-form-item label="所在区域">
-                <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择"
-                  style="width: 120px"
-                  clearable
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select>
+                <el-cascader
+                  style="width: 220px"
+                  placeholder="请选择所在区域"
+                  v-model="formInline.provinces"
+                  :options="region"
+                  :props="{
+                    emitPath: false,
+                  }"
+                />
               </el-form-item>
             </el-form>
             <el-form :inline="true" :model="formInline">
               <el-form-item label="转让方式">
                 <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择"
-                  style="width: 120px"
-                  clearable
+                  style="width: 220px"
+                  v-model="formInline.conveyancing"
+                  placeholder="请选择需求类型"
                 >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
+                  <el-option
+                    v-for="item in transfer_way"
+                    :label="item.label"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
             </el-form>
             <el-form :inline="true" :model="formInline">
               <el-form-item label="成熟度">
                 <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择"
-                  style="width: 120px"
-                  clearable
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select>
-              </el-form-item>
-            </el-form>
-            <el-form :inline="true" :model="formInline">
-              <el-form-item label="成果水平">
-                <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择"
-                  style="width: 120px"
-                  clearable
+                  style="width: 220px"
+                  v-model="formInline.technologyMaturity"
+                  placeholder="请选择技术成熟度"
                 >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
+                  <el-option
+                    v-for="item in maturity_level"
+                    :label="item.label"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
-            </el-form>
-            <el-form :inline="true" :model="formInline">
-              <el-form-item label="是否成交">
-                <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择"
-                  style="width: 120px"
-                  clearable
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit">查询</el-button>
               </el-form-item>
             </el-form>
           </div>
         </div>
-        <div class="search-tag">
-          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
-            {{ tag.name }}
-          </el-tag>
-        </div>
       </div>
       <div class="demand-content-main">
-        <AchievementItem />
-        <AchievementItem />
-        <AchievementItem />
-        <AchievementItem />
+        <AchievementItem v-for="item in tableData" :item="item" />
       </div>
       <div class="demand-content-pagination">
-        <el-pagination layout="prev, pager, next, jumper" :total="1000" />
+        <el-pagination layout="prev, pager, next, jumper" :total="total" />
       </div>
     </div>
   </div>
@@ -125,24 +89,52 @@
 <script setup lang="ts">
 import { EditPen } from "@element-plus/icons-vue";
 import AchievementItem from "./components/AchievementItem";
-import { ref } from "vue";
-import type { TagProps } from "element-plus";
+import { ref, onMounted } from "vue";
+import { getTechnologyTransferList } from "@/api";
+import { useDictStore } from "@/store/modules/useDictStore/index";
+import trademarkType from "@/assets/json/trademark.json";
 
-interface TagsItem {
-  name: string;
-  type: TagProps["type"];
-}
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+// 字典
+const dictStore = useDictStore();
+const region = dictStore.dictData.region;
+const transfer_way = dictStore.dictData.transfer_way;
+const maturity_level = dictStore.dictData.maturity_level;
+
+const tableData = ref([]);
+const total = ref(0);
 
-const tags = ref<TagsItem[]>([
-  { name: "北京", type: "primary" },
-  { name: "电子信息", type: "primary" },
-]);
-const formInline = {
-  user: "",
-  region: "",
+const formInline = ref({
+  technicalRealm: "",
+  provinces: "",
+  conveyancing: "",
+  technologyMaturity: "",
+});
+
+const pageInit = async () => {
+  const data = {
+    pageNumber: 1,
+    pageSize: 10,
+    ...formInline.value,
+  };
+  const res = (await getTechnologyTransferList(data)) as unknown as any;
+  tableData.value = res.data.list;
+  total.value = res.data.total;
+  console.log("res ===>", res);
+};
+const onSubmit = () => {
+  pageInit();
+};
+const onClickCreate = () => {
+  router.push({
+    path: "/conversion/create",
+  });
 };
-const radio1 = "1";
-const onSubmit = () => {};
+onMounted(async () => {
+  pageInit();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -182,13 +174,12 @@ const onSubmit = () => {};
 
         .search-bottom-select {
           display: flex;
-          justify-content: space-between;
           flex: 1;
         }
       }
       .search-tag {
         display: flex;
-        gap: .3rem;
+        gap: 0.3rem;
         margin-bottom: 1rem;
       }
     }