学术文章-新增和编辑

src/views/ap/article-display/components/create.vue

@@ -1,418 +1,231 @@
 <template>
   <div class="page">
     <el-form
-      :model="trademarkForm"
-      class="trademark-form"
+      :model="formInline"
+      class="new-article-form"
       label-width="120px"
       label-position="left"
     >
-      <el-form-item class="form-item" label="商标名称">
-        <el-input
-          class="custom-input"
-          v-model="trademarkForm.trademarkName"
-          placeholder="请输入商标名称"
-        ></el-input>
-      </el-form-item>
-
-      <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-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" label="代理机构">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.agent"
-          placeholder="请输入代理机构"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="商标号">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.logoNumber"
-          placeholder="请输入商标号"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="法律状态">
-        <el-select
-          v-model="trademarkForm.legalStatus"
-          placeholder="选择法律状态"
-          clearable
-          style="width: 220px"
-        >
-          <el-option
-            v-for="item in logoLegislationType"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="注册公告日">
-        <el-date-picker
-          v-model="trademarkForm.enrollmentDate"
-          format="YYYY/MM/DD"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择注册公告日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="专有权截至日">
-        <el-date-picker
-          v-model="trademarkForm.exclusiveRightsAsOf"
-          format="YYYY/MM/DD"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择专有权截至日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="驳回发文日">
-        <el-date-picker
-          v-model="trademarkForm.dateOfDismissal"
-          format="YYYY/MM/DD"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择驳回发文日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="权利人">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.rightHolder"
-          placeholder="请输入权利人"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="初始公告日">
-        <el-date-picker
-          v-model="trademarkForm.firstInstanceDate"
-          format="YYYY/MM/DD"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择初始公告日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="驳回截止日">
-        <el-date-picker
-          v-model="trademarkForm.deadlineForDismissal"
-          format="YYYY/MM/DD"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择驳回截止日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="未覆盖群组">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.uncoveredGroups"
-          placeholder="请输入未覆盖群组"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="申请日期">
-        <el-date-picker
-          v-model="trademarkForm.applicationDate"
-          format="YYYY/MM/DD"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择申请日期"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="商标分类">
-        <div class="trademark">
-          <div class="trademark-aside">
-            <div class="trademark-aside-search">
-              <el-input
-                style="width: 250px"
-                placeholder="请输入关键词，如：照相机"
-              ></el-input>
-            </div>
-            <el-tree
-              ref="tree"
-              node-key="id"
-              :data="trademarkList"
-              :props="defaultProps"
-              style="max-height: 450px; overflow-y: auto"
-              @node-click="handleNodeClick"
+      <el-row>
+        <el-col :span="24">
+          <el-form-item class="form-item" label="商标图样">
+            <el-upload
+              class="logo-uploader"
+              :show-file-list="false"
+              :http-request="handleUploadChange"
             >
-              <template #default="{ data }">
-                <span class="custom-tree-node">
-                  <span>{{ data.code + " " + data.name }}</span>
-                </span>
-              </template>
-            </el-tree>
-          </div>
-
-          <div class="trademark-main">
-            <div class="trademark-main-header">
-              <span>已选择的商标类别</span>
-              <el-button plain>清除全部</el-button>
-            </div>
-            <div class="trademark-main-content">
-              <el-collapse v-model="activeNames">
-                <div v-for="trademark in trademarkList" :key="trademark.id">
-                  <el-collapse-item
-                    v-if="trademark.isSelected"
-                    :title="trademark.name"
-                    :name="trademark.id"
-                  >
-                    <div v-for="item in trademark.children" :key="item.id">
-                      <div v-if="item.isSelected">
-                        {{ item.code }}类
-                        <el-tag
-                          closable
-                          style="margin-right: 0.3rem"
-                          v-for="tag in item.children.filter((child: any) => child.isSelected)"
-                          @close="handleTagClose(tag)"
-                          :key="tag.id"
-                        >
-                          {{ tag.name }}
-                        </el-tag>
-                      </div>
-                    </div>
-                  </el-collapse-item>
-                </div>
-              </el-collapse>
-            </div>
-          </div>
-        </div>
-      </el-form-item>
+              <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-date-picker
+              v-model="formInline.releaseTime"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-DD"
+              type="datetime"
+              placeholder="选择发布时间"
+              style="width: 300px"
+            ></el-date-picker>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="行业 Tag">
+            <el-select
+              v-model="formInline.sectorTag"
+              multiple
+              placeholder="选择行业 Tag"
+              clearable
+              style="width: 300px"
+            >
+            <el-option
+                v-for="item in industry_type"
+                :label="item.label"
+                :value="item.value"
+                :key="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="文件 Tag">
+            <el-select
+              v-model="formInline.articleType"
+              multiple
+              placeholder="选择文件 Tag"
+              clearable
+              style="width: 300px"
+            >
+            <el-option
+                v-for="item in article_type"
+                :label="item.label"
+                :value="item.value"
+                :key="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="作者">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.author"
+              placeholder="请输入作者姓名，多人请以逗号分隔"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="出版物">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.publication"
+              placeholder="请输入出版物名称，例如：国际眼科杂志"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="置顶">
+            <el-select
+              v-model="formInline.sticky"
+              placeholder="选择置顶状态"
+              clearable
+              style="width: 300px"
+            >
+              <el-option label="是" value="1" />
+              <el-option label="否" value="0" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="来源">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.source"
+              placeholder="请输入来源，例如：中国科学院大学知识产权学院"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="标题">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.title"
+              placeholder="请输入标题，例如：人工智能"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="英文标题">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.englishTitle"
+              placeholder="请输入英文标题，例如：re1ngong"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="DOI">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.doi"
+              placeholder="请输入 DOI 唯一号，例如：10.3980"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24">
+          <el-form-item class="form-item" label="文章内容">
+            <el-input
+              type="textarea"
+              v-model="formInline.article"
+              placeholder="请输入文章内容，例如：文章"
+              rows="4"
+              style="width: 100%"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
       <div class="button-container">
-        <el-button v-if="hasDraft" type="danger" @click="clearDraft"
-          >清空草稿</el-button
-        >
-        <el-button type="primary" plain @click="saveDraft"
-          >保存为草稿</el-button
-        >
-        <el-button type="primary" @click="submitApplication"
-          >提交申请</el-button
-        >
+        <el-button type="primary" @click="submitArticle"> 提交 </el-button>
       </div>
     </el-form>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch } from "vue";
-import trademarkType from "@/assets/json/trademark.json";
-import { Plus } from "@element-plus/icons-vue";
-import { postTrademarkCreate, postFileUpload } from "@/api";
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+import { postCreate } from "../hooks/useAxios.hook";
 import { useDictStore } from "@/store/modules/useDictStore/index";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { setLocalStorage, getLocalStorage } from "@/utils";
-
-interface Dict {
-  label: string; // 显示名称
-  value: string; // 值
-}
-
-interface TrademarkForm {
-  trademarkName: string;
-  trademarkDiagramPath: string;
-  trademarkCategorization: string[];
-  country: string;
-  cluster?: string;
-  agent?: string;
-  logoNumber?: string;
-  legalStatus?: number;
-  enrollmentDate?: string;
-  exclusiveRightsAsOf?: string;
-  dateOfDismissal?: string;
-  rightHolder?: string;
-  firstInstanceDate?: string;
-  deadlineForDismissal?: string;
-  uncoveredGroups?: string;
-  applicationDate?: string;
-  fileList?: string[];
-}
-
+import { postFileUpload } from "@/api";
+const dictStore = useDictStore();
 const emit = defineEmits(["handleCreate"]);
-
-const trademarkForm = ref<TrademarkForm>({
-  trademarkName: "",
-  trademarkDiagramPath: "",
-  trademarkCategorization: [],
-  country: "",
-  cluster: "",
-  agent: "",
-  logoNumber: "",
-  legalStatus: undefined,
-  enrollmentDate: "",
-  exclusiveRightsAsOf: "",
-  dateOfDismissal: "",
-  rightHolder: "",
-  firstInstanceDate: "",
-  deadlineForDismissal: "",
-  uncoveredGroups: "",
-  applicationDate: "",
-  fileList: [],
-});
-
-const props = defineProps({
-  createVisible: {
-    type: Boolean,
-    required: true,
-  },
+const formInline = reactive({
+  releaseTime: "", // 发布时间
+  sectorTag: [], // 行业 tag
+  articleType: [], // 文件 tag
+  indexPhotosPath: "", // 首页标题图片
+  author: "", // 作者
+  publication: "", // 出版物
+  sticky: "", // 置顶
+  source: "", // 来源
+  title: "", // 标题
+  article: "", // 文章内容
+  englishTitle: "", // 英文标题
+  doi: "", // DOI
 });
 
-const defaultProps = {
-  children: "children",
-  label: "name",
-};
-
-const hasDraft = ref(false); // 用于判断是否有草稿
 const trademarkDiagramPath = ref("");
-const trademarkList = ref();
-const tree = ref();
-const activeNames = ref<string[]>([]);
-const country = ref();
-const logoLegislationType = ref<Dict[]>([]);
-
-onMounted(() => {
-  const dictStore = useDictStore();
-  country.value = dictStore.dictData.country;
-  logoLegislationType.value = dictStore.dictData.logo_legislation_type;
-  loadDraft();
-  pageInitData();
-});
-
-const loadDraft = () => {
-  const draft = getLocalStorage("trademarkDraft");
-  if (draft) {
-    hasDraft.value = true; // 表示有草稿
-    ElMessageBox.confirm("检测到有草稿，是否导入到表单？", "导入草稿", {
-      confirmButtonText: "导入",
-      cancelButtonText: "创建新表单",
-      type: "warning",
-    })
-      .then(() => {
-        trademarkForm.value = JSON.parse(draft);
-        ElMessage({
-          type: "success",
-          message: "草稿已导入",
-        });
-      })
-  }
-};
-
-const addIsSelectedProperty = (items: any[]) => {
-  items.forEach((item) => {
-    item.isSelected = false;
-    if (item.children && item.children.length > 0) {
-      addIsSelectedProperty(item.children);
-    }
-  });
-};
-
-const pageInitData = () => {
-  const trademarkData = JSON.parse(JSON.stringify(trademarkType));
-  addIsSelectedProperty(trademarkData);
-  trademarkList.value = trademarkData;
-};
 
+// 字典
+const industry_type = dictStore.dictData.industry_type;
+const article_type = dictStore.dictData.article_type;
 const handleUploadChange = async (option: any) => {
   try {
     const file = new FormData();
     file.append("file", option.file);
     const res = (await postFileUpload(file)) as unknown as any;
-    trademarkForm.value.trademarkDiagramPath = res.uuid;
+    formInline.indexPhotosPath = res.uuid;
     trademarkDiagramPath.value = import.meta.env.VITE_DEV_IMG + "/" + res.uuid;
   } catch (error) {
     console.error("文件上传失败:", error);
   }
 };
-
-const saveDraft = () => {
-  console.log("保存为草稿:", trademarkForm.value);
-
-  // 将表单数据保存到本地存储
-  setLocalStorage("trademarkDraft", JSON.stringify(trademarkForm.value));
-
-  ElMessage({
-    type: "success",
-    message: "草稿已保存",
-  });
-  emit("handleCreate");
-};
-
-const clearDraft = () => {
-  setLocalStorage("trademarkDraft", null); // 清空本地存储中的草稿
-  hasDraft.value = false; // 更新响应式变量状态
-  ElMessage({
-    type: "success",
-    message: "草稿已清空",
-  });
-};
-
-const submitApplication = async () => {
-  const res = (await postTrademarkCreate(
-    trademarkForm.value
-  )) as unknown as any;
-  if (res.code === 200) {
+// 提交表单
+const submitArticle = async () => {
+  try {
+    const response = (await postCreate(formInline)) as unknown as any;
+    if (response.code === 200) {
+      ElMessage({
+        type: "success",
+        message: "文章提交成功!",
+      });
+      emit("handleCreate");
+    }
+  } catch (error: any) {
     ElMessage({
-      type: "success",
-      message: "商标创建成功",
+      type: "error",
+      message: error.message,
     });
-    emit("handleCreate");
-  }
-};
-
-const handleNodeClick = (node: any) => {
-  node.isSelected = true;
-  const nodeId: string = node.id;
-  activeNames.value.push(nodeId);
-  if (node.code.length === 6) {
-    trademarkForm.value.trademarkCategorization.push(node.code);
   }
 };
-
-const handleTagClose = (node: any) => {
-  node.isSelected = false;
-
-  const codeIndex = trademarkForm.value.trademarkCategorization.indexOf(
-    node.code
-  );
-  if (codeIndex > -1) {
-    trademarkForm.value.trademarkCategorization.splice(codeIndex, 1);
-  }
-};
-
-// 监听 createVisible 的变化
-watch(() => props.createVisible, (newVal) => {
-  if (newVal) {
-    loadDraft(); // 当 createVisible 为 true 时，加载草稿
-  }
-});
 </script>
 
 <style lang="scss" scoped>
@@ -423,12 +236,13 @@ watch(() => props.createVisible, (newVal) => {
   .form-item {
     margin-right: 20px; // 根据需要设置间距
     .logo {
-      width: 178px;
-      height: 178px;
+      width: 128px;
+      height: 128px;
     }
     .logo-uploader {
-      width: 178px;
-      height: 178px;
+      width: 128px;
+      height: 128px;
+      margin-left: 1rem;
       border: 1px dashed var(--el-border-color);
       border-radius: 6px;
       cursor: pointer;
@@ -439,8 +253,8 @@ watch(() => props.createVisible, (newVal) => {
     .logo-uploader-icon {
       font-size: 28px;
       color: #8c939d;
-      width: 178px;
-      height: 178px;
+      width: 128px;
+      height: 128px;
       text-align: center;
     }
   }

src/views/ap/article-display/components/update.vue

@@ -1,220 +1,197 @@
 <template>
   <div class="page">
     <el-form
-      :model="trademarkForm"
-      class="trademark-form"
+      :model="formInline"
+      class="new-article-form"
       label-width="120px"
       label-position="left"
     >
-      <el-form-item class="form-item" label="商标名称">
-        <el-input
-          class="custom-input"
-          v-model="trademarkForm.trademarkName"
-          placeholder="请输入商标名称"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="商标图样">
-        <el-upload
-          class="logo-uploader"
-          :show-file-list="false"
-          :http-request="handleUploadChange"
-        >
-          <img
-            v-if="trademarkForm.trademarkDiagramPath"
-            :src="trademarkForm.trademarkDiagramPath"
-            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="国家地区">
-        <el-cascader
-          placeholder="请选择国家地区"
-          v-model="trademarkForm.country"
-          :options="country"
-          :props="{
-            emitPath: false,
-          }"
-        />
-      </el-form-item>
-
-      <el-form-item class="form-item" label="代理机构">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.agent"
-          placeholder="请输入代理机构"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="商标号">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.logoNumber"
-          placeholder="请输入商标号"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="法律状态">
-        <el-select
-          v-model="trademarkForm.legalStatus"
-          placeholder="选择法律状态"
-          clearable
-          style="width: 220px"
-        >
-          <el-option
-            v-for="item in logoLegislationType"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="注册公告日">
-        <el-date-picker
-          v-model="trademarkForm.enrollmentDate"
-          type="date"
-          placeholder="选择注册公告日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="专有权截至日">
-        <el-date-picker
-          v-model="trademarkForm.exclusiveRightsAsOf"
-          type="date"
-          placeholder="选择专有权截至日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="驳回发文日">
-        <el-date-picker
-          v-model="trademarkForm.dateOfDismissal"
-          type="date"
-          placeholder="选择驳回发文日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="权利人">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.rightHolder"
-          placeholder="请输入权利人"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="初始公告日">
-        <el-date-picker
-          v-model="trademarkForm.firstInstanceDate"
-          type="date"
-          placeholder="选择初始公告日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="驳回截止日">
-        <el-date-picker
-          v-model="trademarkForm.deadlineForDismissal"
-          type="date"
-          placeholder="选择驳回截止日"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="未覆盖群组">
-        <el-input
-          style="width: 300px"
-          v-model="trademarkForm.uncoveredGroups"
-          placeholder="请输入未覆盖群组"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="申请日期">
-        <el-date-picker
-          v-model="trademarkForm.applicationDate"
-          type="date"
-          placeholder="选择申请日期"
-        ></el-date-picker>
-      </el-form-item>
-
-      <el-form-item class="form-item" label="商标分类">
-        <div class="trademark">
-          <div class="trademark-aside">
-            <div class="trademark-aside-search">
-              <el-input
-                style="width: 250px"
-                placeholder="请输入关键词，如：照相机"
-              ></el-input>
-            </div>
-            <el-tree
-              ref="tree"
-              node-key="id"
-              :data="trademarkList"
-              :props="defaultProps"
-              style="max-height: 450px; overflow-y: auto"
-              @node-click="handleNodeClick"
+      <el-row>
+        <el-col :span="24">
+          <el-form-item class="form-item" label="商标图样">
+            <el-upload
+              class="logo-uploader"
+              :show-file-list="false"
+              :http-request="handleUploadChange"
             >
-              <template #default="{ data }">
-                <span class="custom-tree-node">
-                  <span>{{ data.code + " " + data.name }}</span>
-                </span>
-              </template>
-            </el-tree>
-          </div>
-
-          <div class="trademark-main">
-            <div class="trademark-main-header">
-              <span>已选择的商标类别</span>
-              <el-button plain>清除全部</el-button>
-            </div>
-            <div class="trademark-main-content">
-              <el-collapse v-model="activeNames">
-                <div v-for="trademark in trademarkList" :key="trademark.id">
-                  <el-collapse-item
-                    v-if="trademark.isSelected"
-                    :title="trademark.name"
-                    :name="trademark.id"
-                  >
-                    <div v-for="item in trademark.children" :key="item.id">
-                      <div v-if="item.isSelected">
-                        {{ item.code }}类
-                        <el-tag
-                          closable
-                          style="margin-right: 0.3rem"
-                          v-for="tag in item.children.filter((child: any) => child.isSelected)"
-                          @close="handleTagClose(tag)"
-                          :key="tag.id"
-                        >
-                          {{ tag.name }}
-                        </el-tag>
-                      </div>
-                    </div>
-                  </el-collapse-item>
-                </div>
-              </el-collapse>
-            </div>
-          </div>
-        </div>
-      </el-form-item>
+              <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-date-picker
+              v-model="formInline.releaseTime"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-DD"
+              type="datetime"
+              placeholder="选择发布时间"
+              style="width: 300px"
+            ></el-date-picker>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="行业 Tag">
+            <el-select
+              v-model="formInline.sectorTag"
+              multiple
+              placeholder="选择行业 Tag"
+              clearable
+              style="width: 300px"
+            >
+            <el-option
+                v-for="item in industry_type"
+                :label="item.label"
+                :value="item.value"
+                :key="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="文件 Tag">
+            <el-select
+              v-model="formInline.articleType"
+              multiple
+              placeholder="选择文件 Tag"
+              clearable
+              style="width: 300px"
+            >
+            <el-option
+                v-for="item in article_type"
+                :label="item.label"
+                :value="item.value"
+                :key="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="作者">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.author"
+              placeholder="请输入作者姓名，多人请以逗号分隔"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="出版物">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.publication"
+              placeholder="请输入出版物名称，例如：国际眼科杂志"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="置顶">
+            <el-select
+              v-model="formInline.sticky"
+              placeholder="选择置顶状态"
+              clearable
+              style="width: 300px"
+            >
+              <el-option label="是" value="1" />
+              <el-option label="否" value="0" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="来源">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.source"
+              placeholder="请输入来源，例如：中国科学院大学知识产权学院"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="标题">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.title"
+              placeholder="请输入标题，例如：人工智能"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="英文标题">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.englishTitle"
+              placeholder="请输入英文标题，例如：re1ngong"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item class="form-item" label="DOI">
+            <el-input
+              style="width: 300px"
+              v-model="formInline.doi"
+              placeholder="请输入 DOI 唯一号，例如：10.3980"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24">
+          <el-form-item class="form-item" label="文章内容">
+            <el-input
+              type="textarea"
+              v-model="formInline.article"
+              placeholder="请输入文章内容，例如：文章"
+              rows="4"
+              style="width: 100%"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
       <div class="button-container">
-        <el-button type="primary" plain @click="saveDraft"
-          >保存为草稿</el-button
-        >
-        <el-button type="primary" @click="submitApplication"
-          >提交申请</el-button
-        >
+        <el-button type="primary" @click="submitArticle"> 提交 </el-button>
       </div>
     </el-form>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
-import trademarkType from "@/assets/json/trademark.json";
-import { Plus } from "@element-plus/icons-vue";
-import { postTrademarkCreate, postFileUpload } from "@/api";
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { postCreate } from "../hooks/useAxios.hook";
 import { useDictStore } from "@/store/modules/useDictStore/index";
+import { postFileUpload } from "@/api";
+const dictStore = useDictStore();
+const emit = defineEmits(["handleCreate"]);
+const formInline = reactive({
+  releaseTime: "", // 发布时间
+  sectorTag: [], // 行业 tag
+  articleType: [], // 文件 tag
+  indexPhotosPath: "", // 首页标题图片
+  author: "", // 作者
+  publication: "", // 出版物
+  sticky: "", // 置顶
+  source: "", // 来源
+  title: "", // 标题
+  article: "", // 文章内容
+  englishTitle: "", // 英文标题
+  doi: "", // DOI
+});
 
-// 接收编辑的商标数据作为 props
 const props = defineProps({
   updateInfo: {
     type: Object,
@@ -222,128 +199,48 @@ const props = defineProps({
   },
 });
 
-interface TrademarkForm {
-  trademarkName: string;
-  trademarkDiagramPath: string;
-  trademarkCategorization: string[];
-  country: string;
-  cluster?: string;
-  agent?: string;
-  logoNumber?: string;
-  legalStatus?: number;
-  enrollmentDate?: string;
-  exclusiveRightsAsOf?: string;
-  dateOfDismissal?: string;
-  rightHolder?: string;
-  firstInstanceDate?: string;
-  deadlineForDismissal?: string;
-  uncoveredGroups?: string;
-  applicationDate?: string;
-}
-
-const trademarkForm = ref<TrademarkForm>({
-  trademarkName: "",
-  trademarkDiagramPath: "",
-  trademarkCategorization: [],
-  country: "",
-  cluster: "",
-  agent: "",
-  logoNumber: "",
-  legalStatus: undefined,
-  enrollmentDate: "",
-  exclusiveRightsAsOf: "",
-  dateOfDismissal: "",
-  rightHolder: "",
-  firstInstanceDate: "",
-  deadlineForDismissal: "",
-  uncoveredGroups: "",
-  applicationDate: "",
-});
-
-interface Dict {
-  label: string; // 显示名称
-  value: string; // 值
-}
-
-const defaultProps = {
-  children: "children",
-  label: "name",
-};
-
-const trademarkList = ref();
-const tree = ref();
-const activeNames = ref<string[]>([]);
-const country = ref();
-const logoLegislationType = ref<Dict[]>([]);
-
-// 初始化数据
-onMounted(() => {
-  const dictStore = useDictStore();
-  country.value = dictStore.dictData.country;
-  logoLegislationType.value = dictStore.dictData.logo_legislation_type;
-  console.log('props.updateInfo ===>', props.updateInfo)
-  // 使用 props 中的数据进行初始化
-  Object.assign(trademarkForm.value, props.updateInfo);
-  pageInitData();
-});
-
-const addIsSelectedProperty = (items: any[]) => {
-  items.forEach((item) => {
-    item.isSelected = false;
-    if (item.children && item.children.length > 0) {
-      addIsSelectedProperty(item.children);
-    }
-  });
-};
-
-const pageInitData = () => {
-  const trademarkData = JSON.parse(JSON.stringify(trademarkType));
-  addIsSelectedProperty(trademarkData);
-  trademarkList.value = trademarkData;
-};
+const trademarkDiagramPath = ref("");
 
+// 字典
+const industry_type = dictStore.dictData.industry_type;
+const article_type = dictStore.dictData.article_type;
 const handleUploadChange = async (option: any) => {
   try {
     const file = new FormData();
     file.append("file", option.file);
     const res = (await postFileUpload(file)) as unknown as any;
-    trademarkForm.value.trademarkDiagramPath = res.path;
+    formInline.indexPhotosPath = res.uuid;
+    trademarkDiagramPath.value = import.meta.env.VITE_DEV_IMG + "/" + res.uuid;
   } catch (error) {
     console.error("文件上传失败:", error);
   }
 };
-
-const saveDraft = () => {
-  console.log("保存为草稿:", trademarkForm.value);
-  // 稍后可实现具体逻辑
-};
-
-const submitApplication = async () => {
-  const res = (await postTrademarkCreate(
-    trademarkForm.value
-  )) as unknown as any;
-  console.log("submitApplication res ==>", res);
-};
-
-const handleNodeClick = (node: any) => {
-  node.isSelected = true;
-  const nodeId: string = node.id;
-  activeNames.value.push(nodeId);
-  if (node.code.length === 6) {
-    trademarkForm.value.trademarkCategorization.push(node.code);
+// 提交表单
+const submitArticle = async () => {
+  try {
+    const response = (await postCreate(formInline)) as unknown as any;
+    if (response.code === 200) {
+      ElMessage({
+        type: "success",
+        message: "文章提交成功!",
+      });
+      emit("handleCreate");
+    }
+  } catch (error: any) {
+    ElMessage({
+      type: "error",
+      message: error.message,
+    });
   }
 };
 
-const handleTagClose = (node: any) => {
-  node.isSelected = false;
+onMounted(() => {
+  // 使用 props 中的数据进行初始化
+  console.log('props.updateInfo', props.updateInfo)
+  Object.assign(formInline, props.updateInfo);
+  trademarkDiagramPath.value = props.updateInfo.indexPhotosPath;
+});
 
-  const codeIndex = trademarkForm.value.trademarkCategorization.indexOf(
-    node.code
-  );
-  if (codeIndex > -1) {
-    trademarkForm.value.trademarkCategorization.splice(codeIndex, 1);
-  }
-};
 </script>
 
 <style lang="scss" scoped>
@@ -354,12 +251,13 @@ const handleTagClose = (node: any) => {
   .form-item {
     margin-right: 20px; // 根据需要设置间距
     .logo {
-      width: 178px;
-      height: 178px;
+      width: 128px;
+      height: 128px;
     }
     .logo-uploader {
-      width: 178px;
-      height: 178px;
+      width: 128px;
+      height: 128px;
+      margin-left: 1rem;
       border: 1px dashed var(--el-border-color);
       border-radius: 6px;
       cursor: pointer;
@@ -370,8 +268,8 @@ const handleTagClose = (node: any) => {
     .logo-uploader-icon {
       font-size: 28px;
       color: #8c939d;
-      width: 178px;
-      height: 178px;
+      width: 128px;
+      height: 128px;
       text-align: center;
     }
   }

src/views/ap/article-display/hooks/useData.hook.ts

@@ -6,7 +6,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
 // 数据初始化
 export const useDataListInit = () => {
   const dictStore = useDictStore();
-
+  const componentKey = ref(0);
   // 表单相关
   const formInline = reactive({
     title: "",
@@ -174,6 +174,7 @@ export const useDataListInit = () => {
   };
 
   const onUpdate = (row: any) => {
+    componentKey.value += 1;
     updateInfo.value = row;
     updateVisible.value = true;
   };
@@ -206,6 +207,11 @@ export const useDataListInit = () => {
     fetchList();
   };
 
+  const handleUpdate = () => {
+    updateVisible.value = false;
+    fetchList();
+  };
+
   // 执行删除商标，记得加提示
   const onDelete = (row: any) => {
     ElMessageBox.confirm(
@@ -245,6 +251,7 @@ export const useDataListInit = () => {
   });
 
   return {
+    componentKey,
     formInline,
     updateInfo,
     isCollapse,
@@ -267,6 +274,7 @@ export const useDataListInit = () => {
     onFieldChange,
     saveFieldSettings,
     handleCreate,
+    handleUpdate,
     onDelete,
   };
 };

src/views/ap/article-display/index.vue

@@ -44,6 +44,12 @@
     <div class="table">
       <div class="table-header">
         <div class="table-header-title">学术文章列表</div>
+        <div class="table-header-button">
+          <div></div>
+          <el-button type="primary" text @click="createVisible = true"
+            >新增学术文章</el-button
+          >
+        </div>
       </div>
       <el-table :data="tableData" style="width: 100%">
         <el-table-column type="index" label="序号" width="100" />
@@ -54,8 +60,11 @@
           :label="field.label"
           width="200"
         />
-        <el-table-column fixed="right" label="操作" width="100" align="center">
+        <el-table-column fixed="right" label="操作" width="200" align="center">
           <template v-slot="scope">
+            <el-button type="primary" text @click="onUpdate(scope.row)"
+              >修改</el-button
+            >
             <el-button type="danger" text @click="onDelete(scope.row)"
               >删除</el-button
             >
@@ -97,11 +106,11 @@
         </div>
       </template>
     </el-dialog>
-    <el-dialog v-model="createVisible" title="商标注册" width="1080">
-      <Create :createVisible="createVisible" @handleCreate="handleCreate" />
+    <el-dialog v-model="createVisible" title="新增学术文章" width="1080">
+      <Create :createVisible="createVisible" :key="componentKey" @handleCreate="handleCreate" />
     </el-dialog>
     <el-dialog v-model="updateVisible" title="商标修改" width="1080">
-      <Update :updateInfo="updateInfo" />
+      <Update :updateInfo="updateInfo" :key="componentKey" @handleUpdate="handleUpdate" />
     </el-dialog>
   </div>
 </template>
@@ -111,6 +120,7 @@ import { useDataListInit } from "./hooks/useData.hook";
 import Create from "./components/create.vue";
 import Update from "./components/update.vue";
 const {
+  componentKey,
   formInline,
   updateInfo,
   isCollapse,
@@ -131,6 +141,8 @@ const {
   onFieldChange,
   saveFieldSettings,
   handleCreate,
+  handleUpdate,
+  onUpdate,
   onDelete,
 } = useDataListInit();
 </script>