保存

src/components/HoverMe/index.vue

@@ -59,7 +59,7 @@ const Teleport = teleport_ as {
   };
 };
 
-const t = "all .5s ease-out";
+const t = "all .3s ease-out";
 
 const hover = ref(false);
 const boxHover = ref(false);

src/main.ts

@@ -10,7 +10,7 @@ import "cqk-sy-ui/style.css";
 // infinite-scroll
 import { ElInfiniteScroll, ElLoading } from "element-plus";
 
-console.log('v.1.3.0')
+console.log("v.1.3.0");
 
 createApp(App)
   .use(router)

src/views/copyrightApplication/OwnerShipForm/constants.ts

+export const optionListOfWayToGetRights = [
+  { name: "原始", value: "原始" },
+  { name: "继承", value: "继承" },
+  { name: "承受", value: "承受" },
+  { name: "其他", value: "其他" },
+];
+
+export const optionListOfOwnershipOfRights = [
+  { name: "个⼈作品", value: "个⼈作品" },
+  { name: "合作作品", value: "合作作品" },
+  { name: "法⼈作品", value: "法⼈作品" },
+  { name: "职务作品", value: "职务作品" },
+  { name: "委托作品", value: "委托作品" },
+];

src/views/copyrightApplication/OwnerShipForm/index.vue

+<template>
+  <div class="workmsgupload">
+    <ElForm
+      :rules="rules"
+      :model="modelValue"
+      label-position="top"
+      ref="formRef"
+    >
+      <CustomizeFormItem prop="wayToGetRights">
+        <template #label>
+          权利取得方式
+          <HoverMe
+            :margin-top="20"
+            class="!absolute"
+            style="margin-top: 3px; margin-left: 13px"
+          >
+            <Icon
+              icon-name="iconshenpiweitongguo-chakanyuanyin"
+              style="font-size: 17px"
+            ></Icon>
+            <template #message>
+              原始：是指根据法律规定，最初取得著作权或不依赖于原所有人的意志而取得著作权;
+              继承：包括继承遗产，是指继承人按照法律的直接规定或者合法有效遗嘱的指定，取得被继承人死亡时遗留的个人合法著作权的财产权；
+              承受：指享有原著作权的企业被合并或分立，由合并或分立后其他企业享有著作权情况;
+              转让：指著作权人将著作权中的全部或部分财产权有偿或无偿地移交给他人所有的法律行为;
+              其他：因其他合法原因取得著作权的。
+            </template>
+          </HoverMe>
+        </template>
+        <sySelect
+          class="w-full"
+          v-model="modelValue.wayToGetRights"
+          placeholder="请选择作品类型"
+        >
+          <syOption
+            :key="option.name"
+            :label="option.name"
+            :value="option.value"
+            v-for="option in optionListOfWayToGetRights"
+          ></syOption>
+        </sySelect>
+      </CustomizeFormItem>
+      <CustomizeFormItem prop="certificate">
+        <template #label>
+          权利取得证明
+          <HoverMe
+            :margin-top="20"
+            class="!absolute"
+            style="margin-top: 3px; margin-left: 13px"
+          >
+            <Icon
+              icon-name="iconshenpiweitongguo-chakanyuanyin"
+              style="font-size: 17px"
+            ></Icon>
+            <template #message>
+              1、《权利获取方式证明》需要加盖公章，法定代表人签字。文件请上传jpg、png、jpeg、pdf格式；
+              2、证明提供参考：继承：《著作权人与被继承人的关系证明：户口本》、《被继承人死亡证明》、《有限遗嘱或公证书或其他继承人发起继承权文件》承受：《企业变更证明》、《合同》、《债权人会议决议》、《清算组织公告》转让：《转让合同》
+            </template>
+          </HoverMe>
+        </template>
+      </CustomizeFormItem>
+      <CustomizeFormItem prop="ownershipOfRights">
+        <template #label>
+          权利归属方式
+          <HoverMe
+            :margin-top="20"
+            class="!absolute"
+            style="margin-top: 3px; margin-left: 13px"
+          >
+            <Icon
+              icon-name="iconshenpiweitongguo-chakanyuanyin"
+              style="font-size: 17px"
+            ></Icon>
+            <template #message>
+              个人作品：指自然人在没有他人参与的情况下，独立创作完成的作品；合作作品：指两人以上合作创作作品；法人作品：指由法人或者其他组织主持，代表法人或者其他组织意志创作，并由法人或者其他组织承担责任的作品；职务作品：指公民为完成法人或者其他组织工作任务所创作的作品；委托作品：指委托人委托其他人创作的作品。权利归属方式不同*权利归属方式需要上传的文件个人作品：【无】
+              合作作品：《合作作品权属协议书》法人作品：《著作权权属声明》职务作品：《职务作品权属约定》委托作品：《委托创作协议书附件（甲方享有全部权利）》《委托创作协议书附件（作者保留署名权）》。
+            </template>
+          </HoverMe>
+        </template>
+        <sySelect
+          class="w-full"
+          v-model="modelValue.ownershipOfRights"
+          placeholder="请选择权利归属方式"
+        >
+          <syOption
+            :key="option.name"
+            :label="option.name"
+            :value="option.value"
+            v-for="option in optionListOfOwnershipOfRights"
+          ></syOption>
+        </sySelect>
+      </CustomizeFormItem>
+      <CustomizeFormItem prop="proofOfOwnership">
+        <template #label>
+          权利归属证明
+          <HoverMe
+            :margin-top="20"
+            class="!absolute"
+            style="margin-top: 3px; margin-left: 13px"
+          >
+            <Icon
+              icon-name="iconshenpiweitongguo-chakanyuanyin"
+              style="font-size: 17px"
+            ></Icon>
+            <template #message>
+              1、不同权利归属方式，需要提供相应的权利归属证明；
+              2、《权利归属证明》需亲笔签字或盖章确认。文件请上传jpg、png、jpeg、pdf格式。
+            </template>
+          </HoverMe>
+        </template>
+      </CustomizeFormItem>
+    </ElForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { ElForm, FormInstance } from "element-plus";
+import { syDialogInput, sySelect, syOption } from "cqk-sy-ui";
+
+import HoverMe from "@/components/HoverMe/index.vue";
+import Icon from "@/components/Icon/index.vue";
+import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
+
+import { iPropsOwnerShipForm } from "./types";
+import {
+  optionListOfOwnershipOfRights,
+  optionListOfWayToGetRights,
+} from "./constants";
+
+const props = defineProps<{
+  modelValue: iPropsOwnerShipForm;
+}>();
+const formRef = ref<FormInstance>();
+const emit = defineEmits(["update:modelValue"]);
+
+const rules = ref<Partial<Record<keyof iPropsOwnerShipForm, any>>>({
+  wayToGetRights: [{ required: true, message: "请" }],
+  certificate: [{ required: true, message: "请" }],
+  ownershipOfRights: [{ required: true, message: "请" }],
+  proofOfOwnership: [{ required: true, message: "请" }],
+});
+
+defineExpose({
+  formRef: formRef,
+});
+</script>
+
+<style scoped lang="scss"></style>

src/views/copyrightApplication/OwnerShipForm/types.ts

+export interface iPropsOwnerShipForm {
+  /**权利取得方式 */
+  wayToGetRights: any;
+  /**权利取得证明 */
+  certificate: any;
+  /**权利归属方式 */
+  ownershipOfRights: any;
+  /**权利归属证明 */
+  proofOfOwnership: any;
+}
+

src/views/copyrightApplication/index.vue

@@ -7,7 +7,7 @@
       <Step :steps="steps" v-model:current="currentStep"></Step>
       <FileUploadForm
         v-show="currentStep === eStep.file"
-        ref="fileUploadFormRef"
+        ref="FileUploadFormRef"
         v-model="fileUploadFormModel"
       ></FileUploadForm>
       <WorkMsgUploadForm
@@ -15,6 +15,15 @@
         v-model="workMsgUploadFormModel"
         ref="WorkMsgUploadFormRef"
       ></WorkMsgUploadForm>
+      <OwnerShipForm
+        v-show="currentStep === eStep.ownership"
+        v-model="ownerShipFormModel"
+        ref="OwnerShipFormRef"
+      ></OwnerShipForm>
+      <OwnerAndAutherForm
+        v-show="currentStep === eStep.ownerAndAuther"
+        ref="OwnerAndAutherFormRef"
+      ></OwnerAndAutherForm>
       <div class="flex" style="margin-top: 59px">
         <syButton
           mode="elementBtn"
@@ -42,10 +51,15 @@ import { syButton } from "cqk-sy-ui";
 import { eStep } from "./types";
 import { iPropsFileUplaodForm } from "./FileUploadForm/types";
 import { iPropsWorkMsgUploadForm } from "./WorkMsgUploadForm/types";
+import OwnerAndAutherForm from "./OwnerAndAutherForm/index.vue";
+import { iPropsOwnerShipForm } from "./OwnerShipForm/types";
+import OwnerShipForm from "./OwnerShipForm/index.vue";
 
-const currentStep = ref(eStep.msg);
-const fileUploadFormRef = ref<InstanceType<typeof FileUploadForm>>();
+const currentStep = ref(eStep.ownership);
+const FileUploadFormRef = ref<InstanceType<typeof FileUploadForm>>();
 const WorkMsgUploadFormRef = ref<InstanceType<typeof WorkMsgUploadForm>>();
+const OwnerShipFormRef = ref<InstanceType<typeof OwnerShipForm>>();
+const OwnerAndAutherFormRef = ref<InstanceType<typeof OwnerAndAutherForm>>();
 const fileUploadFormModel = ref<iPropsFileUplaodForm>({
   files: [],
   powerOfAttorney: null,
@@ -64,6 +78,13 @@ const workMsgUploadFormModel = ref<iPropsWorkMsgUploadForm>({
   firstAddress: "",
 });
 
+const ownerShipFormModel = ref<iPropsOwnerShipForm>({
+  wayToGetRights: "",
+  certificate: "",
+  ownershipOfRights: "",
+  proofOfOwnership: "",
+});
+
 const next = async () => {
   const isValid = await checkFormValid();
   console.log(isValid, "show isValid");
@@ -74,7 +95,7 @@ const next = async () => {
 const checkFormValid = () => {
   const step = steps.find((step) => step.value === currentStep.value);
   return new Promise((r) => {
-    step?.ref?.value?.formRef?.validate((isValid) => {
+    step?.ref?.value?.formRef?.validate((isValid: boolean) => {
       r(isValid);
     });
   });
@@ -84,13 +105,15 @@ const goToNextStep = () => {
   const currentIndex = steps.findIndex(
     (step) => step.value === currentStep.value
   );
-  currentStep.value = steps[currentIndex + 1].value;
+  steps[currentIndex + 1]
+    ? (currentStep.value = steps[currentIndex + 1].value)
+    : confirmAllTheFormMsg();
 };
 const steps = [
   {
     name: "作品文件",
     value: eStep.file,
-    ref: fileUploadFormRef,
+    ref: FileUploadFormRef,
   },
   {
     name: "作品信息",
@@ -100,10 +123,12 @@ const steps = [
   {
     name: "作品权属",
     value: eStep.ownership,
+    ref: OwnerShipFormRef,
   },
   {
     name: "著作权人与作者",
     value: eStep.ownerAndAuther,
+    ref: OwnerAndAutherFormRef,
   },
 ];
 </script>