技术创新需求

src/api/system/system.api.ts

@@ -177,4 +177,25 @@ export const getPatentsView = async (id: any) => {
   } catch {
     httpErrorHandle();
   }
+};
+
+
+// 创建新技术创新需求
+
+export const postTechnologyInnovationRequirementsCreate = async (data: any) => {
+  try {
+    const res = await http(RequestHttpEnum.POST)("/technology-innovation-requirements/create", data);
+    return res;
+  } catch {
+    httpErrorHandle();
+  }
+};
+
+export const getTechnologyInnovationRequirements = async (data: any) => {
+  try {
+    const res = await http(RequestHttpEnum.GET)("/technology-innovation-requirements/list", data);
+    return res;
+  } catch {
+    httpErrorHandle();
+  }
 };

src/router/modules/demand.route.ts

@@ -3,17 +3,26 @@ import { RouteRecordRaw } from "vue-router";
 // 引入路径
 const importPath = {
   demandHome: () => import("@/views/demand/index"),
+  demandCreate: () => import("@/views/demand/create.vue"),
 };
 
 const demandRoutes: Array<RouteRecordRaw> = [
   {
     path: "/demand",
-    name: "demand",
+    name: "demandHome",
     component: importPath["demandHome"],
     meta: {
       title: "技术创新需求",
     },
   },
+  {
+    path: "/demand/create",
+    name: "demandCreate",
+    component: importPath["demandCreate"],
+    meta: {
+      title: "新增技术创新需求",
+    },
+  },
 ]
 
 export default demandRoutes;

src/store/modules/useDictStore/index.ts

@@ -32,6 +32,7 @@ export const useDictStore = defineStore("dict", () => {
       // 提取全部字典字段
       const categories = res.data.map(item => item.value );
       categories.push('country')
+      categories.push('region')
       // 获取全部字典的值
       const response = (await postDictBatch({categories})) as unknown as ResList;
       console.log("response ==>", response);

src/views/demand/components/DemandItem/index.vue

@@ -1,31 +1,32 @@
 <template>
   <div class="container">
-    <div class="container-title">一种915MHz大面积金刚石沉积系统的研发</div>
+    <div class="container-title">{{ item.technologicalNeedsName }}</div>
     <div class="container-tag">
-      <el-tag type="info" effect="light"> 化学 </el-tag>
-      <el-tag type="info" effect="light"> 化学 </el-tag>
-      <el-tag type="success" effect="plain"> 项目委托 </el-tag>
-      <el-tag type="warning" effect="plain"> 18个月 </el-tag>
-      <el-tag type="primary" effect="plain"> 460万 </el-tag>
-    </div>
-    <div class="container-paragraph">
-      需求内容：寻求研发一种新型的915MHz大面积金刚石沉积系统，以满足半导体材料领域的大尺寸金刚石生产需求。
-    </div>
-    <div class="container-paragraph">
-      技术参数：基片台直径不小于152.4毫米，确保6英寸级金刚石沉积能力；沉积区域温差控制在50℃以内；设计包含腔体和基片台水冷功能，以及基片台升降功能微波功率调节范围10~50kW；红外测温范围300-1400℃；软件支持设备远程监控。
-    </div>
-    <div class="container-paragraph">
-      预期效果：实现技术突破，满足上述参数指标；完成6英寸级金刚石沉积样机的交付。
+      <el-tag type="info" effect="light"> {{ item.provinces }} </el-tag>
+      <el-tag type="info" effect="light"> {{ item.sector }} </el-tag>
+      <el-tag type="success" effect="plain"> {{ item.modeOfCooperation }} </el-tag>
+      <el-tag type="warning" effect="plain"> {{ item.timeRequirement }} </el-tag>
+      <el-tag type="primary" effect="plain"> {{ item.capital }} </el-tag>
     </div>
+    <div class="container-paragraph">技术目标：{{ item.technicalTarget }}</div>
+    <div class="container-paragraph">技术问题：{{ item.pointOfPain }}</div>
     <div class="container-info">
-      <div class="container-info-item">发布需求单位名称</div>
-      <div class="container-info-item">400-123-4567</div>
-      <div class="container-info-item">北京市海淀区科技园区创新路88号</div>
+      <div class="container-info-item">{{ item.companyIdentification }}</div>
+      <div class="container-info-item">{{ item.associates }}</div>
+      <div class="container-info-item">{{ item.contactNumber }}</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>
 .container {

src/views/demand/create.vue

@@ -0,0 +1,369 @@
+<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-input
+                class="custom-input"
+                v-model="patentForm.sector"
+                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.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-input
+                class="custom-input"
+                v-model="patentForm.technologicalNeedsName"
+                placeholder="请输入技术需求名称"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item class="form-item" label="需求类型">
+              <el-select
+                v-model="patentForm.technologicalNeedsType"
+                placeholder="请选择需求类型"
+              >
+                <el-option
+                  v-for="item in technological_innovation_demand_type"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </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.cooperativeUnit"
+                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.timeRequirement"
+                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.capital"
+                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.technicalTarget"
+                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.pointOfPain"
+                placeholder="请输入需解决的主要技术问题"
+              ></el-input>
+            </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 { postTechnologyInnovationRequirementsCreate } from "@/api";
+import { useRouter } from "vue-router";
+const router = useRouter();
+// 字典
+const dictStore = useDictStore();
+const technological_innovation_demand_type =
+  dictStore.dictData.technological_innovation_demand_type; // 需求类型字典
+const region = dictStore.dictData.region; // 区域省份字典
+
+// 定义 PatentForm 接口
+interface PatentForm {
+  companyIdentification: string; // 企业名称
+  socialCreditCode: string; // 社会信用代码
+  provinces: number; // 所在区域省份
+  sector: string; // 所属行业
+  associates: string; // 联系人
+  contactNumber: string; // 联系电话
+  email: string; // 邮箱
+  technologicalNeedsName: string; // 技术需求名称
+  technologicalNeedsType: string; // 需求类型
+  cooperativeUnit: string; // 意向合作大学
+  timeRequirement: string; // 时间要求
+  capital: string; // 拟投入资金
+  technicalTarget: string; // 拟实现的主要技术目标
+  pointOfPain: string; // 需解决的主要技术问题
+}
+
+// 创建一个新的 patentForm
+const patentForm = ref<PatentForm>({
+  companyIdentification: "企业名称", // 企业名称示例值
+  socialCreditCode: "社会信用代码1", // 社会信用代码示例值
+  provinces: 1101, // 所在区域省份示例值，替换为实际的数字代码
+  sector: "所属行业", // 所属行业示例值
+  associates: "联系人", // 联系人示例值
+  contactNumber: "联系电话", // 联系电话示例值
+  email: "邮箱", // 邮箱示例值
+  technologicalNeedsName: "技术需求名称", // 技术需求名称示例值
+  technologicalNeedsType: "需求类别", // 需求类型示例值，替换为实际字典值
+  cooperativeUnit: "合作单位", // 意向合作大学示例值
+  timeRequirement: "时间要求", // 时间要求示例值
+  capital: "资金", // 拟投入资金示例值
+  technicalTarget: "技术目标", // 拟实现的主要技术目标示例值
+  pointOfPain: "需解决的主要技术问题", // 需解决的主要技术问题示例值
+});
+
+// 初始化数据
+onMounted(() => {
+  // 初始化时的操作（如果有需要）
+});
+
+const goBack = () => {
+  router.push({
+    path: "/demand",
+  });
+};
+
+const submitApplication = async () => {
+  const res = (await postTechnologyInnovationRequirementsCreate(
+    patentForm.value
+  )) as unknown as any;
+
+  if (res.code === 200) {
+    ElMessage({
+      type: "success",
+      message: "申请提交成功",
+    });
+    router.push({
+      path: "/demand",
+    });
+  }
+};
+</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/demand/index.vue

@@ -4,7 +4,7 @@
       <div class="demand-content-header">
         <div class="header-title">技术创新需求榜单</div>
         <div class="header-button">
-          <el-button type="primary" :icon="EditPen" text>
+          <el-button type="primary" :icon="EditPen" text @click="onClickCreate">
             填写技术创新需求表
           </el-button>
         </div>
@@ -14,7 +14,7 @@
           <el-form :inline="true" :model="formInline">
             <el-form-item>
               <el-input
-                v-model="formInline.user"
+                v-model="formInline.technologicalNeedsName"
                 placeholder="请输入标题"
                 clearable
                 style="width: 200px"
@@ -28,69 +28,98 @@
         <div class="search-bottom">
           <div class="search-bottom-select">
             <el-form :inline="true" :model="formInline">
-              <el-form-item label="需求分类">
+              <el-form-item class="form-item" label="需求类型">
                 <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择需求分类"
-                  style="width: 200px"
-                  clearable
+                style="width: 220px;"
+                v-model="formInline.technologicalNeedsType"
+                  placeholder="请选择需求类型"
                 >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
+                  <el-option
+                    v-for="item in technological_innovation_demand_type"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
-              <el-form-item label="需求属性">
-                <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择需求属性"
-                  style="width: 200px"
-                  clearable
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select>
-              </el-form-item>
-              <el-form-item>
-                <el-select
-                  v-model="formInline.region"
-                  placeholder="请选择需求属性"
-                  style="width: 200px"
-                  clearable
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select>
+              <el-form-item class="form-item" label="所在区域省份">
+                <el-cascader
+                  style="width: 100%"
+                  placeholder="请选择国家地区"
+                  v-model="formInline.provinces"
+                  :options="region"
+                  :props="{
+                    emitPath: false,
+                  }"
+                />
               </el-form-item>
             </el-form>
           </div>
-          <div class="search-bottom-order">
+          <!-- <div class="search-bottom-order">
             <el-radio-group v-model="radio1" size="large">
               <el-radio-button label="综合" value="1" />
               <el-radio-button label="发布时间" value="2" />
               <el-radio-button label="预算金额" value="3" />
             </el-radio-group>
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="demand-content-main">
-        <DemandItem v-for="n in 10" />
+        <DemandItem 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>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { EditPen } from "@element-plus/icons-vue";
 import DemandItem from "./components/DemandItem";
-const formInline = {
-  user: "",
-  region: "",
+import { getTechnologyInnovationRequirements } from "@/api";
+import { useRouter } from "vue-router";
+const router = useRouter();
+import { useDictStore } from "@/store/modules/useDictStore/index";
+const dictStore = useDictStore();
+const technological_innovation_demand_type =
+  dictStore.dictData.technological_innovation_demand_type; // 需求类型字典
+const region = dictStore.dictData.region; // 区域省份字典
+const formInline = ref({
+  technologicalNeedsName: "",
+  technologicalNeedsType: "",
+  provinces: "",
+})
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([]);
+
+onMounted(() => {
+  pageInit();
+});
+const pageInit = async () => {
+  const data = {
+    pageSize: pageSize.value,
+    pageNumber: currentPage.value,
+    ...formInline.value
+  };
+  const res = (await getTechnologyInnovationRequirements(
+    data
+  )) as unknown as any;
+  tableData.value = res.data.list;
+  total.value = res.data.total;
+  console.log(res);
+};
+const onSubmit = () => {
+  pageInit();
+};
+const onClickCreate = () => {
+  router.push({
+    path: "/demand/create",
+  });
 };
-const radio1 = "1";
-const onSubmit = () => {};
 </script>
 
 <style lang="scss" scoped>