|
@@ -0,0 +1,224 @@
|
|
|
+<!-- 商标注册记录 -->
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <div class="page-title">商标撤三记录</div>
|
|
|
+
|
|
|
+ <!-- 查询条件 -->
|
|
|
+ <el-form :model="queryForm" class="query-form" inline label-width="100px">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <el-form-item label="商标名称">
|
|
|
+ <el-input
|
|
|
+ v-model="queryForm.trademarkName"
|
|
|
+ placeholder="请输入商标名称"
|
|
|
+ style="width: 200px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="申请编号">
|
|
|
+ <el-input
|
|
|
+ v-model="queryForm.applicationNumber"
|
|
|
+ placeholder="请输入申请编号"
|
|
|
+ style="width: 200px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryForm.createTime"
|
|
|
+ format="YYYY/MM/DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ style="width: 220px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSearch">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display: flex; align-items: center; margin-top: 10px">
|
|
|
+ <el-form-item label="法律状态">
|
|
|
+ <el-select
|
|
|
+ v-model="queryForm.legislationStatus"
|
|
|
+ placeholder="请选择法律状态"
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in legal_status"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :key="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="年费状态">
|
|
|
+ <el-select
|
|
|
+ v-model="queryForm.paymentStatus"
|
|
|
+ placeholder="请选择年费状态"
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in annual_fee_payment_status"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :key="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="商标类型">
|
|
|
+ <el-select
|
|
|
+ v-model="queryForm.patentType"
|
|
|
+ placeholder="请选择商标类型"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in patents_type"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :key="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ v-for="field in fieldsConfig.filter((item) => item.visible)"
|
|
|
+ :key="field.key"
|
|
|
+ :prop="field.key"
|
|
|
+ :label="field.label"
|
|
|
+ />
|
|
|
+ <el-table-column label="操作" width="300">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-button type="primary" text size="small">查看</el-button>
|
|
|
+ <el-button type="primary" text size="small">补充资料上传</el-button>
|
|
|
+ <el-button type="primary" text size="small">文件下载</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="currentPage"
|
|
|
+ v-model:page-size="pageSize"
|
|
|
+ layout="prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, onMounted } from "vue";
|
|
|
+import { getThreeYearNonUseCancellationList } from "@/api";
|
|
|
+import { useDictStore } from "@/store/modules/useDictStore/index";
|
|
|
+
|
|
|
+const queryForm = ref<any>({
|
|
|
+ trademarkName: "",
|
|
|
+ applicationNumber: "",
|
|
|
+ createTime: "",
|
|
|
+ legislationStatus: "",
|
|
|
+ paymentStatus: "",
|
|
|
+ patentType: "",
|
|
|
+});
|
|
|
+
|
|
|
+const currentPage = ref(1);
|
|
|
+const pageSize = ref(5);
|
|
|
+const total = ref(0);
|
|
|
+const tableData = ref([]);
|
|
|
+
|
|
|
+// 字典
|
|
|
+const dictStore = useDictStore();
|
|
|
+const legal_status = dictStore.dictData.legal_status;
|
|
|
+const annual_fee_payment_status = dictStore.dictData.annual_fee_payment_status;
|
|
|
+const patents_type = dictStore.dictData.patents_type;
|
|
|
+
|
|
|
+// 定义所有字段的配置项
|
|
|
+const fieldsConfig = ref([
|
|
|
+ { key: "applicationNumber", label: "申请号/注册号", visible: true },
|
|
|
+ { key: "trademarkName", label: "商标名称", visible: true },
|
|
|
+ { key: "createTime", label: "注册日期", visible: true },
|
|
|
+ { key: "logoType", label: "商标类型", visible: true },
|
|
|
+ { key: "auditStatus", label: "审查进度", visible: true },
|
|
|
+ { key: "legislationStatus", label: "法律状态", visible: true },
|
|
|
+]);
|
|
|
+
|
|
|
+const pageInit = async () => {
|
|
|
+ const data = {
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ pageNumber: currentPage.value,
|
|
|
+ patentsName: queryForm.value.patentsName,
|
|
|
+ applicationNumber: queryForm.value.applicationNumber,
|
|
|
+ legislationStatus: queryForm.value.legislationStatus,
|
|
|
+ paymentStatus: queryForm.value.paymentStatus,
|
|
|
+ patentType: queryForm.value.patentType,
|
|
|
+ beginTime: queryForm.value.createTime[0],
|
|
|
+ endTime: queryForm.value.createTime[1],
|
|
|
+ };
|
|
|
+ const res = (await getThreeYearNonUseCancellationList(data)) as unknown as any;
|
|
|
+ tableData.value = res.data.list;
|
|
|
+ total.value = res.data.total;
|
|
|
+};
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ pageInit();
|
|
|
+};
|
|
|
+
|
|
|
+const handleReset = () => {
|
|
|
+ queryForm.value = {
|
|
|
+ patentsName: "",
|
|
|
+ applicationNumber: "",
|
|
|
+ createTime: "",
|
|
|
+ legislationStatus: "",
|
|
|
+ paymentStatus: "",
|
|
|
+ patentType: "",
|
|
|
+ };
|
|
|
+ pageInit();
|
|
|
+};
|
|
|
+
|
|
|
+const handleCurrentChange = (val: number) => {
|
|
|
+ currentPage.value = val;
|
|
|
+ pageInit();
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ pageInit();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ .page-title {
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ font-family: "源黑体 CN", sans-serif; /* 字体 */
|
|
|
+ font-weight: 500; /* 字重 */
|
|
|
+ font-size: 1.25rem; /* 字号: 24px 转 1.25rem */
|
|
|
+ line-height: 1.5625rem; /* 行高: 30px 转 1.5625rem */
|
|
|
+ letter-spacing: 0rem; /* 字间距: 0px 转 0rem */
|
|
|
+ text-align: left; /* 对齐: 左对齐 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .query-form {
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+.pagination {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+</style>
|