|
|
@@ -4,158 +4,201 @@
|
|
|
<el-breadcrumb-item> 知识产权 </el-breadcrumb-item>
|
|
|
<el-breadcrumb-item> 专利运营需求 </el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
- <el-card shadow="never" style="margin-top: 1rem; padding: 1rem;">
|
|
|
+ <el-card shadow="never" style="margin-top: 1rem; padding: 1rem">
|
|
|
<h1>专利运营需求表填写</h1>
|
|
|
- <div class="page-title">商标信息</div>
|
|
|
+
|
|
|
<el-form
|
|
|
- :model="trademarkForm"
|
|
|
- class="trademark-form"
|
|
|
+ :model="patentForm"
|
|
|
+ class="patent-form"
|
|
|
label-width="120px"
|
|
|
label-position="left"
|
|
|
>
|
|
|
- <el-form-item class="form-item" label="商标注册号">
|
|
|
- <el-input
|
|
|
- class="custom-input"
|
|
|
- v-model="trademarkForm.logoRegistrationNumber"
|
|
|
- placeholder="请输入商标注册号"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" label="商标图样变更">
|
|
|
- <el-radio-group v-model="trademarkForm.isLogoModify">
|
|
|
- <el-radio label="是" value="1">是</el-radio>
|
|
|
- <el-radio label="否" value="2">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- class="form-item"
|
|
|
- label="商标图样"
|
|
|
- v-if="trademarkForm.isLogoModify === '1'"
|
|
|
- >
|
|
|
- <el-upload
|
|
|
- class="logo-uploader"
|
|
|
- :show-file-list="false"
|
|
|
- :http-request="handleUploadTrademark"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="trademarkDiagramPath"
|
|
|
- :src="trademarkDiagramPath"
|
|
|
- class="logo"
|
|
|
- />
|
|
|
- <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <div class="section-title">申请人信息</div>
|
|
|
- <el-form-item class="form-item" label="申请人类型">
|
|
|
- <el-radio-group v-model="trademarkForm.applicantType" @change="handleApplicantTypeChange">
|
|
|
- <el-radio label="个人" value="0">个人</el-radio>
|
|
|
- <el-radio label="企业" value="1">企业</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" label="国家地区">
|
|
|
- <el-cascader
|
|
|
- placeholder="请选择国家地区"
|
|
|
- v-model="trademarkForm.country"
|
|
|
- :options="country"
|
|
|
- :props="{
|
|
|
- emitPath: false,
|
|
|
- }"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" v-if="trademarkForm.applicantType === '0'" label="申请人名称">
|
|
|
- <el-input
|
|
|
- class="custom-input"
|
|
|
- v-model="trademarkForm.applicant"
|
|
|
- placeholder="请输入申请人名称"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" v-if="trademarkForm.applicantType === '1'" label="申请企业名称">
|
|
|
- <el-input
|
|
|
- class="custom-input"
|
|
|
- v-model="trademarkForm.corporationsName"
|
|
|
- placeholder="请输入申请企业名称"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" label="证件号码" v-if="trademarkForm.applicantType === '0'">
|
|
|
- <el-input
|
|
|
- class="custom-input"
|
|
|
- v-model="trademarkForm.idCard"
|
|
|
- placeholder="请输入证件号码"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" v-if="trademarkForm.applicantType === '1'" label="营业执照">
|
|
|
- <el-upload
|
|
|
- class="logo-uploader"
|
|
|
- :show-file-list="false"
|
|
|
- :http-request="handleUploadBusinessLicense"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="businessLicensePath"
|
|
|
- :src="businessLicensePath"
|
|
|
- class="logo"
|
|
|
- />
|
|
|
- <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" label="身份证正面" v-if="trademarkForm.applicantType === '0'">
|
|
|
- <el-upload
|
|
|
- class="logo-uploader"
|
|
|
- :show-file-list="false"
|
|
|
- :http-request="handleUploadIdCardFront"
|
|
|
- >
|
|
|
- <img v-if="idCardPath" :src="idCardPath" class="logo" />
|
|
|
- <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" label="身份证反面" v-if="trademarkForm.applicantType === '0'">
|
|
|
- <el-upload
|
|
|
- class="logo-uploader"
|
|
|
- :show-file-list="false"
|
|
|
- :http-request="handleUploadIdCardBackside"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="idCardBacksidePath"
|
|
|
- :src="idCardBacksidePath"
|
|
|
- class="logo"
|
|
|
- />
|
|
|
- <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" label="申请地址" v-if="trademarkForm.applicantType === '0'">
|
|
|
- <el-input
|
|
|
- class="custom-input"
|
|
|
- v-model="trademarkForm.applicantAddr"
|
|
|
- placeholder="请输入申请地址"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="form-item" v-if="trademarkForm.applicantType === '1'" label="商标网上申请委托书">
|
|
|
- <el-upload
|
|
|
- class="logo-uploader"
|
|
|
- :show-file-list="false"
|
|
|
- :http-request="handleUploadAuthorization"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="authorizationPath"
|
|
|
- :src="authorizationPath"
|
|
|
- class="logo"
|
|
|
- />
|
|
|
- <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
+ <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.patentName"
|
|
|
+ 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.patentNumber"
|
|
|
+ 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.patentOwner"
|
|
|
+ placeholder="请输入专利持有人"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item class="form-item" label="技术领域">
|
|
|
+ <el-cascader
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="请选择技术领域"
|
|
|
+ v-model="patentForm.technicalRealm"
|
|
|
+ :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-select
|
|
|
+ v-model="patentForm.legalStatus"
|
|
|
+ placeholder="请选择法律状态"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in legal_status"
|
|
|
+ :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.phone"
|
|
|
+ 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.expiryDate"
|
|
|
+ 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.legalInfo"
|
|
|
+ placeholder="请输入专利法律信息"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item class="form-item" label="专利技术成熟度">
|
|
|
+ <el-select
|
|
|
+ v-model="patentForm.technologyMaturity"
|
|
|
+ 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.patentAbstract"
|
|
|
+ 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.demandType"
|
|
|
+ placeholder="请选择需求类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in requirement_type"
|
|
|
+ :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.supplementaryContent"
|
|
|
+ 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
|
|
|
+ placeholder="请选择国家地区"
|
|
|
+ v-model="patentForm.city"
|
|
|
+ :options="country"
|
|
|
+ :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.contactDetails"
|
|
|
+ placeholder="请输入联系方式"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
|
|
|
<div class="button-container">
|
|
|
- <el-button type="primary" @click="submitApplication">提交申请</el-button>
|
|
|
+ <el-button type="primary" @click="submitApplication"
|
|
|
+ >提交申请</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
@@ -164,127 +207,80 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, onMounted } from "vue";
|
|
|
-import { postFileUpload, postTrademarkAmendment } from "@/api";
|
|
|
-import { useDictStore } from "@/store/modules/useDictStore/index";
|
|
|
+import { postPatentOperations } from "@/api";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
-
|
|
|
-interface TrademarkForm {
|
|
|
- logoRegistrationNumber: string; // 商标注册号
|
|
|
- isLogoModify: string; // 商标图样是否变更
|
|
|
- logoPath: string; // 图样地址
|
|
|
- applicantType: string; // 申请人类型
|
|
|
- country: string; //地区
|
|
|
- applicant: string; // 申请人名称
|
|
|
- corporationsName: string; // 企业名称
|
|
|
- idCard: string; // 证件号码
|
|
|
- idCardPath: string; // 身份证证明ID
|
|
|
- idCardBacksidePath: string; // 身份证反面ID
|
|
|
- applicantAddr: string; // 申请人地址
|
|
|
- businessLicensePath: string; // 个体营业执照
|
|
|
- authorizationPath: string; // 商标网上申请委托书
|
|
|
-}
|
|
|
-
|
|
|
-const trademarkForm = ref<TrademarkForm>({
|
|
|
- logoRegistrationNumber: "",
|
|
|
- isLogoModify: "1",
|
|
|
- logoPath: "",
|
|
|
- applicantType: "0",
|
|
|
- country: "",
|
|
|
- applicant: "",
|
|
|
- corporationsName: "",
|
|
|
- idCard: "",
|
|
|
- idCardPath: "",
|
|
|
- idCardBacksidePath: "",
|
|
|
- applicantAddr: "",
|
|
|
- businessLicensePath: "",
|
|
|
- authorizationPath: ""
|
|
|
-});
|
|
|
+import { useDictStore } from "@/store/modules/useDictStore/index";
|
|
|
+import trademarkType from "@/assets/json/trademark.json";
|
|
|
|
|
|
// 字典
|
|
|
const dictStore = useDictStore();
|
|
|
const country = dictStore.dictData.country;
|
|
|
+const legal_status = dictStore.dictData.legal_status;
|
|
|
+const requirement_type = dictStore.dictData.requirement_type;
|
|
|
+const maturity_level = dictStore.dictData.maturity_level;
|
|
|
+
|
|
|
+// 定义 PatentForm 接口
|
|
|
+interface PatentForm {
|
|
|
+ patentOwner: string;
|
|
|
+ expectedPrice: string;
|
|
|
+ city: string;
|
|
|
+ patentNumber: string;
|
|
|
+ legalStatus: string;
|
|
|
+ technicalRealm: string;
|
|
|
+ technologyMaturity: string;
|
|
|
+ contactDetails: string;
|
|
|
+ demandType: string;
|
|
|
+ expiryDate: string;
|
|
|
+ phone: string;
|
|
|
+ legalInfo: string;
|
|
|
+ patentAbstract: string;
|
|
|
+ rejectInfo: string;
|
|
|
+ patentName: string;
|
|
|
+ status: string;
|
|
|
+ supplementaryContent: string;
|
|
|
+}
|
|
|
|
|
|
-// logo地址
|
|
|
-const trademarkDiagramPath = ref("");
|
|
|
-const idCardPath = ref("");
|
|
|
-const idCardBacksidePath = ref("");
|
|
|
-const businessLicensePath = ref("");
|
|
|
-const authorizationPath = ref("");
|
|
|
+// 创建一个新的 patentForm
|
|
|
+const patentForm = ref<PatentForm>({
|
|
|
+ patentOwner: "专利的所有人",
|
|
|
+ expectedPrice: "3000",
|
|
|
+ city: "国内",
|
|
|
+ patentNumber: "111121212",
|
|
|
+ legalStatus: "2",
|
|
|
+ technicalRealm: "专利所涉及的技术领域",
|
|
|
+ technologyMaturity: "1",
|
|
|
+ contactDetails: "13012341234",
|
|
|
+ demandType: "2",
|
|
|
+ expiryDate: "2024-10-20",
|
|
|
+ phone: "13112341234",
|
|
|
+ legalInfo: "专利的法律信息",
|
|
|
+ patentAbstract: "专利摘要",
|
|
|
+ rejectInfo: "驳回理由",
|
|
|
+ patentName: "专利的名称",
|
|
|
+ status: "1",
|
|
|
+ supplementaryContent: "补充内容",
|
|
|
+});
|
|
|
|
|
|
// 初始化数据
|
|
|
onMounted(() => {
|
|
|
- pageInitData();
|
|
|
+ // 初始化时的操作（如果有需要）
|
|
|
});
|
|
|
|
|
|
-const pageInitData = () => {};
|
|
|
-
|
|
|
-const handleUploadTrademark = async (option: any) => {
|
|
|
- await handleUpload(option, "logoPath", trademarkDiagramPath);
|
|
|
-};
|
|
|
-
|
|
|
-const handleUploadIdCardFront = async (option: any) => {
|
|
|
- await handleUpload(option, "idCardPath", idCardPath);
|
|
|
-};
|
|
|
-
|
|
|
-const handleUploadIdCardBackside = async (option: any) => {
|
|
|
- await handleUpload(option, "idCardBacksidePath", idCardBacksidePath);
|
|
|
-};
|
|
|
-
|
|
|
-const handleUploadBusinessLicense = async (option: any) => {
|
|
|
- await handleUpload(option, "businessLicensePath", businessLicensePath);
|
|
|
-};
|
|
|
-
|
|
|
-const handleUploadAuthorization = async (option: any) => {
|
|
|
- await handleUpload(option, "authorizationPath", authorizationPath);
|
|
|
-};
|
|
|
-
|
|
|
-// 通用上传处理函数
|
|
|
-const handleUpload = async (
|
|
|
- option: any,
|
|
|
- formField: keyof TrademarkForm,
|
|
|
- pathRef: any
|
|
|
-) => {
|
|
|
- try {
|
|
|
- const file = new FormData();
|
|
|
- file.append("file", option.file);
|
|
|
- const res = (await postFileUpload(file)) as unknown as any;
|
|
|
- trademarkForm.value[formField] = res.uuid;
|
|
|
- pathRef.value = import.meta.env.VITE_DEV_IMG + "/" + res.uuid;
|
|
|
- console.log("res ===>", res);
|
|
|
- } catch (error) {
|
|
|
- console.error("文件上传失败:", error);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
const submitApplication = async () => {
|
|
|
- const res = (await postTrademarkAmendment(trademarkForm.value)) as unknown as any;
|
|
|
+ const res = (await postPatentOperations(patentForm.value)) as unknown as any;
|
|
|
+
|
|
|
if (res.code === 200) {
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: "创建成功",
|
|
|
+ message: "申请提交成功",
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
-// 处理申请人类型变化
|
|
|
-const handleApplicantTypeChange = () => {
|
|
|
- // 重置企业名称和相关字段
|
|
|
- if (trademarkForm.value.applicantType === '0') {
|
|
|
- trademarkForm.value.corporationsName = "";
|
|
|
- trademarkForm.value.businessLicensePath = "";
|
|
|
- authorizationPath.value = "";
|
|
|
- } else {
|
|
|
- trademarkForm.value.applicant = "";
|
|
|
- trademarkForm.value.idCard = "";
|
|
|
- idCardPath.value = "";
|
|
|
- idCardBacksidePath.value = "";
|
|
|
- }
|
|
|
-};
|
|
|
</script>
|
|
|
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
+ height: calc(100vh - 4rem);
|
|
|
box-sizing: border-box;
|
|
|
padding: 2rem 18rem;
|
|
|
color: #333;
|
zhangchuang