备案人

src/components/ApproveStatus/status.ts

@@ -5,17 +5,18 @@ import error from "@/assets/img/error.png";
 
 /**审核状态（待提交:WAITING_SUBMIT 待审核:WAITING_CHECK 备案成功:RECORD_SUCCESS 不通过:NOT_PASSED ） */
 export enum eStatusOfCopyright {
-  WAITING_SUBMIT,
-  WAITING_CHECK,
-  RECORD_SUCCESS,
-  NOT_PASSED,
-  ALL,
+  WAITING_SUBMIT = "WAITING_SUBMIT",
+  WAITING_CHECK = "WAITING_CHECK",
+  RECORD_SUCCESS = "RECORD_SUCCESS",
+  NOT_PASSED = "NOT_PASSED",
+  ALL = "ALL",
 }
 
 export enum eStatusOfFilerCertification {
-  WAITING,
-  NOT_PASSED,
-  SUCCESS,
+  WAITING_CHECK = "WAITING_CHECK",
+  NOT_PASSED = "NOT_PASSED",
+  PASSED = "PASSED",
+  ALL = "ALL",
 }
 
 export const WAITING_SUBMIT = {
@@ -44,13 +45,13 @@ export const NOT_PASSED = {
 };
 
 export const WAITING_FOR_Cert = {
-  value: eStatusOfFilerCertification.WAITING,
+  value: eStatusOfFilerCertification.WAITING_CHECK,
   label: "待审核",
   style: yellow,
   icon: pending,
 };
 export const SUCCESS_FOR_Cert = {
-  value: eStatusOfFilerCertification.SUCCESS,
+  value: eStatusOfFilerCertification.PASSED,
   label: "实名成功",
   style: green,
   icon: check,

src/service/copyrightService.ts

@@ -10,6 +10,14 @@ export function getAuth(id: number) {
   });
 }
 
+export function editAuth(params: Omit<iAuth, "create_time" | "update_time">) {
+  return $ajax({
+    type: "put",
+    url: "/api/authentication",
+    params,
+  });
+}
+
 export function postAuth(
   params: Omit<
     iAuth,
@@ -40,19 +48,19 @@ export function deleteAuth(id: number) {
 
 export function getAuths(
   authentication_name: string,
-  authentication_status: string,
+  authentication_status: string[],
   page: number,
   page_size: number
 ) {
+  const params = { authentication_status, page, page_size } as any;
+  if (authentication_name.trim() !== "") {
+    params.authentication_name = authentication_name;
+  }
+
   return $ajax({
     type: "get",
     url: "/api/authentications",
-    params: {
-      authentication_name,
-      authentication_status,
-      page,
-      page_size,
-    },
+    params: params,
   });
 }
 

src/service/index.ts

@@ -54,12 +54,19 @@ async function $ajax(
         const params = (param as GetParam).params || [];
         let num = length(params);
         Object.keys(params).forEach(function (key) {
+          if (Array.isArray(params[key])) {
+            (params[key] || []).forEach((i: string) => {
+              restfulUrl += `${key}=${i}&`;
+            });
+            num--;
+          } else {
             if (num === 1) {
               restfulUrl += `${key}=${params[key]}`;
             } else {
               restfulUrl += `${key}=${params[key]}&`;
               num--;
             }
+          }
         });
         (result || {}).url = restfulUrl;
       } else {

src/types/copyright.d.ts

@@ -28,7 +28,7 @@ export interface iAuth {
   authentication_business_license: iPostFile;
   authentication_certificate_of_authorization_image: iPostFile;
   authentication_held_front_id_card: iPostFile;
-  authentication_held_back_id_card: {};
+  authentication_held_back_id_card: iPostFile;
   authentication_certificate_of_authorization_date: string;
   contact_person: string;
   contact_email: string;

src/views/AddFilingPerson/index.vue

@@ -221,6 +221,7 @@
         type="primary"
         size="large"
         class="w-full"
+        :loading="loading"
         @click="handleConfirm"
         >确定提交</syButton
       >
@@ -237,7 +238,7 @@ import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
 import CollectIdCardImg from "@/components/Form/Collect/CollectIdCardImg.vue";
 import { globalState } from "@/store/state";
 import CollectImage from "./components/CollectImage.vue";
-import { postAuth } from "@/service/copyrightService";
+import { editAuth, postAuth } from "@/service/copyrightService";
 import CommonDialog from "@/components/CommonDialog/index.vue";
 import syDialogInput from "@/components/CommonInput/index.vue";
 import syRadio from "@/components/Radio/index.vue";
@@ -249,18 +250,21 @@ function handle() {
 const props = defineProps<{
   visible: boolean;
 }>();
-const emit = defineEmits(["update:visible"]);
+const emit = defineEmits(["update:visible", "addSuccess"]);
 
 const certFormRef = ref<InstanceType<typeof ElForm>>();
 const contactFormRef = ref<InstanceType<typeof ElForm>>();
 
 const g = computed(() => globalState);
 
+const loading = ref(false);
+const mode = ref("add");
+const id = ref(NaN);
 const modelOfCert = ref({
   name: "",
   property: 1,
   idCard: "",
-  city: "",
+  city: [] as string[],
   idCardImg: null as any,
   auth: true,
   authorizationValidityPeriod: "",
@@ -322,11 +326,17 @@ const rulesOfContact = {
   addr: [{ required: true, message: "请输入联系地址" }],
 };
 
+defineExpose({
+  modelOfCert,
+  modelOfContact,
+  mode,
+  id,
+});
+
 const handleConfirm = () => {
+  loading.value = true;
   certFormRef.value?.validate((isValidOfCert) => {
     contactFormRef.value?.validate(async (isValidOfContact, invalidFields) => {
-      console.log(isValidOfCert, isValidOfContact, invalidFields);
-
       if (isValidOfCert && isValidOfContact) {
         const { file: f1, ...front } =
           (modelOfCert.value.idCardImg && modelOfCert.value.idCardImg.front) ||
@@ -351,6 +361,7 @@ const handleConfirm = () => {
             powerOfAttorneyImage,
           authentication_certificate_of_authorization_date:
             modelOfCert.value.authorizationValidityPeriod,
+
           contact_person: modelOfContact.value.name,
           contact_email: modelOfContact.value.email,
           contact_mobile: modelOfContact.value.cellphoneNumber,
@@ -369,12 +380,23 @@ const handleConfirm = () => {
           params.authentication_held_front_id_card = front;
           params.authentication_held_back_id_card = back;
         }
-        const ret = await postAuth(params);
+        let ret: any;
+        if (mode.value === "add") {
+          ret = await postAuth(params);
+        } else {
+          ret = await editAuth({ ...params, id: id.value });
+        }
         if (ret && ret.code === 200) {
           emit("update:visible", false);
+          if (mode.value === "add") {
             ElMessage.success("新建成功");
           } else {
+            ElMessage.success("编辑成功");
+          }
+          emit("addSuccess");
+        } else {
         }
+        loading.value = false;
       }
     });
   });
@@ -386,6 +408,7 @@ watch(
     if (props.visible === false) {
       certFormRef.value?.resetFields();
       contactFormRef.value?.resetFields();
+      mode.value = "add";
     }
   }
 );

src/views/FilingPersonDetail/index.vue

 <template>
   <div class="min-h-screen flow-root" style="background: #f9f9f9">
     <syHeaderNavBar @back="() => $router.back()" @close="() => $router.back()"
-      >杭州库链科技有限公司
+      >{{ data?.authentication_name }}
     </syHeaderNavBar>
     <ModuleContainer class="mx-auto" style="width: 858px; margin-top: 17px">
       <div class="overflow-hidden">
@@ -16,7 +16,7 @@
           />
           备案人
         </div>
-        <div class="filingPersonBox">杭州苦练科技公司</div>
+        <div class="filingPersonBox">{{ data?.authentication_name }}</div>
       </div>
       <div class="line"></div>
       <div class="overflow-hidden">
@@ -33,55 +33,122 @@
         >
           <div class="w-1/2 content">
             姓名/名称：
-            <span style="color: var(--sy-black)">东郡</span>
+            <span style="color: var(--sy-black)">{{
+              data?.authentication_name
+            }}</span>
           </div>
           <div class="w-1/2 content">
             主体性质：
-            <span style="color: var(--sy-black)">自然人</span>
+            <span style="color: var(--sy-black)">{{
+              data?.authentication_subject_nature === 1 ? "自然人" : "企业组织"
+            }}</span>
           </div>
           <div
             class="w-1/2 content"
             v-if="typeofFilingPerson === 'naturePerson'"
           >
             身份证号码：
-            <span style="color: var(--sy-black)">20938409238409234</span>
+            <span style="color: var(--sy-black)">{{
+              data?.authentication_subject_nature_code
+            }}</span>
           </div>
           <div
             class="w-1/2 content"
             v-if="typeofFilingPerson === 'businessOrganization'"
           >
             统一社会信用代码/营业执照号码：
-            <span style="color: var(--sy-black)">20938409238409234</span>
+            <span style="color: var(--sy-black)">{{
+              data?.authentication_subject_nature_code
+            }}</span>
           </div>
           <div class="w-1/2 content">
             所在城市：
-            <span style="color: var(--sy-black)">浙江省-杭州市-西湖区</span>
+            <span style="color: var(--sy-black)"
+              >{{ data?.authentication_province }} -
+              {{ data?.authentication_city }} -
+              {{ data?.authentication_district }}</span
+            >
           </div>
           <div
-            class="w-1/2 content"
+            class="w-1/2 content flex items-center"
             v-if="typeofFilingPerson === 'naturePerson'"
           >
             身份证正反面：
-            <span style="color: var(--sy-black)"> </span>
+            <div style="color: var(--sy-black)" class="flex">
+              <img
+                :src="data?.authentication_held_front_id_card?.url"
+                alt=""
+                class="cursor-pointer"
+                style="height: 20px"
+                @click="showIdImg1 = true"
+              />
+              <img
+                class="ml-2 cursor-pointer"
+                :src="data?.authentication_held_back_id_card?.url"
+                alt=""
+                style="height: 20px"
+                @click="showIdImg2 = true"
+              />
+              <ImageDisplay
+                v-model:visible="showIdImg1"
+                :url="data?.authentication_held_front_id_card?.url || ''"
+              >
+              </ImageDisplay>
+              <ImageDisplay
+                v-model:visible="showIdImg2"
+                :url="data?.authentication_held_back_id_card?.url || ''"
+              >
+              </ImageDisplay>
+            </div>
           </div>
           <div
-            class="w-1/2 content"
+            class="w-1/2 content flex items-center"
             v-if="typeofFilingPerson === 'businessOrganization'"
           >
             营业执照或副本：
-            <span style="color: var(--sy-black)"> </span>
+            <span style="color: var(--sy-black)">
+              <img
+                style="height: 23px"
+                @click="showLicense = true"
+                :src="data?.authentication_business_license.url"
+                class="cursor-pointer"
+                alt=""
+              />
+            </span>
+            <ImageDisplay
+              v-model:visible="showLicense"
+              :url="data?.authentication_business_license.url || ''"
+            />
           </div>
           <div class="w-1/2 content">
             备案属性：
             <span style="color: var(--sy-black)">授权备案</span>
           </div>
-          <div class="w-1/2 content">
+          <div class="w-1/2 content flex items-center">
             授权书图像：
-            <span style="color: var(--sy-black)"></span>
+            <span style="color: var(--sy-black)">
+              <img
+                style="height: 23px"
+                :src="
+                  data?.authentication_certificate_of_authorization_image?.url
+                "
+                class="cursor-pointer"
+                @click="showAuthImg = true"
+              />
+            </span>
+            <ImageDisplay
+              v-model:visible="showAuthImg"
+              :url="
+                data?.authentication_certificate_of_authorization_image?.url ||
+                ''
+              "
+            />
           </div>
           <div class="w-1/2 content">
             授权有效期：
-            <span style="color: var(--sy-black)">2020-10-19</span>
+            <span style="color: var(--sy-black)">{{
+              data?.authentication_certificate_of_authorization_date
+            }}</span>
           </div>
         </div>
       </div>
@@ -105,38 +172,49 @@
           <div class="w-1/2">
             <div class="content">
               联系人：
-              <span style="color: var(--sy-black)">杭州库链科技有限公司</span>
+              <span style="color: var(--sy-black)">{{
+                data?.contact_person
+              }}</span>
             </div>
             <div class="content">
               手机：
-              <span style="color: var(--sy-black)">15019230123</span>
+              <span style="color: var(--sy-black)">{{
+                data?.contact_mobile
+              }}</span>
             </div>
             <div class="content">
-              邮箱：
-              <span style="color: var(--sy-black)">2223</span>
+              邮编：
+              <span style="color: var(--sy-black)">{{
+                data?.contact_post_code
+              }}</span>
             </div>
             <div class="content">
               <div class="w-2/3">
                 联系地址：
-                <span style="color: var(--sy-black)"
-                  >杭州市
-                  西区胡西区胡西区胡西区胡西区胡西区胡西区胡西区胡西区胡西区胡西区胡西区胡</span
-                >
+                <span style="color: var(--sy-black)">{{
+                  data?.contact_address
+                }}</span>
               </div>
             </div>
           </div>
           <div class="w-1/2">
             <div class="content">
               电子邮箱：
-              <span style="color: var(--sy-black)">cj@disanbo.com</span>
+              <span style="color: var(--sy-black)">{{
+                data?.contact_email
+              }}</span>
             </div>
             <div class="content">
               电话：
-              <span style="color: var(--sy-black)">400-1120-100</span>
+              <span style="color: var(--sy-black)">{{
+                data?.contact_telephone
+              }}</span>
             </div>
             <div class="content">
               传真：
-              <span style="color: var(--sy-black)">1209102</span>
+              <span style="color: var(--sy-black)">{{
+                data?.contact_fax
+              }}</span>
             </div>
           </div>
         </div>
@@ -149,15 +227,35 @@
 import { syHeaderNavBar, syButton } from "cqk-sy-ui";
 import ModuleContainer from "@/components/ModuleContainer/index.vue";
 import ImageDisplay from "@/components/ImageDisplay/index.vue";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { saveAs } from "file-saver";
 import printJS from "print-js";
+import { useRoute } from "vue-router";
+import { getAuth } from "@/service/copyrightService";
+import { iAuth } from "@/types/copyright";
+
+const route = useRoute();
+
+const data = ref<iAuth>();
+
+onMounted(async () => {
+  const res = await getAuth(Number(route.query.id));
+  if (res?.code === 200) {
+    data.value = res.data;
+    if (res.data.authentication_subject_nature === 2) {
+      typeofFilingPerson.value = "businessOrganization";
+    }
+  }
+});
 
 const props = defineProps<{}>();
 
 //   typeofFilingPerson?: "naturePerson" | "businessOrganization";
 const typeofFilingPerson = ref("naturePerson");
-const showCert = ref(false);
+const showIdImg1 = ref(false);
+const showIdImg2 = ref(false);
+const showAuthImg = ref(false);
+const showLicense = ref(false);
 </script>
 
 <style lang="scss" scoped>

src/views/FilingPersonManagement/components/FilingPersonTable/Service.ts

+import { ElMessage } from "element-plus";
 import { eStatusOfFilerCertification } from "@/components/ApproveStatus/status";
+import { router } from "@/router";
+import { deleteAuth } from "@/service/copyrightService";
 
 export default class Service {
   static instance: Service;
@@ -11,11 +14,12 @@ export default class Service {
   }
 
   getOperateListOfFilterStatus() {
+    // 待审核:WAITING_CHECK 通过:PASSED 不通过:NOT_PASSED
     return [
-      { name: "待审核", value: "pending" },
-      { name: "实名失败", value: "failed" },
-      { name: "实名成功", value: "success" },
-      { name: "所有状态", value: "all" },
+      { name: "待审核", value: eStatusOfFilerCertification.WAITING_CHECK },
+      { name: "通过", value: eStatusOfFilerCertification.PASSED },
+      { name: "不通过", value: eStatusOfFilerCertification.NOT_PASSED },
+      { name: "所有状态", value: eStatusOfFilerCertification.ALL },
     ];
   }
 
@@ -34,14 +38,36 @@ export default class Service {
     };
     if (status === eStatusOfFilerCertification.NOT_PASSED) {
       return [seeDetail, edit, del];
-    } else if (status === eStatusOfFilerCertification.SUCCESS) {
+    } else if (status === eStatusOfFilerCertification.PASSED) {
       return [seeDetail];
-    } else if (status === eStatusOfFilerCertification.WAITING) {
+    } else if (status === eStatusOfFilerCertification.WAITING_CHECK) {
       return [seeDetail];
     }
   }
 
-  handleClickOperateItemOfAction(operateValue: string, slotProps: any) {
-    console.log(operateValue, slotProps);
+  handleClickOperateItemOfAction(
+    operateValue: string,
+    slotProps: any,
+    emit: any
+  ) {
+    if (operateValue === "seeDetail") {
+      router.push({
+        name: "filingPersonDetail",
+        query: {
+          id: slotProps.id,
+        },
+      });
+    } else if (operateValue === "edit") {
+      emit("edit", {
+        id: slotProps.id,
+      });
+    } else if (operateValue === "del") {
+      deleteAuth(slotProps.id).then((ret) => {
+        if (ret) {
+          ElMessage.success("删除成功");
+          emit("refresh");
+        }
+      });
+    }
   }
 }

src/views/FilingPersonManagement/components/FilingPersonTable/index.vue

@@ -10,11 +10,10 @@
   >
     <template #currentStatusCell="slotProps">
       <div class="flex items-center">
-        <ApproveStatus :type="2" mode="filingPerson"></ApproveStatus>
-        <!-- <HoverShowReason
-          v-if="slotProps.status === eStatusOfFilerCertification.NOT_PASSED"
-          :rowData="slotProps"
-        ></HoverShowReason> -->
+        <ApproveStatus
+          :type="slotProps.authentication_status"
+          mode="filingPerson"
+        ></ApproveStatus>
       </div>
     </template>
     <template #currentStatusHeader>
@@ -33,6 +32,33 @@
         </syMoreOperate>
       </div>
     </template>
+    <template #additional="slotProps">
+      <div class="flex items-center">
+        {{
+          slotProps.authentication_subject_nature === 2
+            ? "营业执照"
+            : "居民身份证"
+        }}
+        <img
+          src="@/assets/img/link.png"
+          style="width: 14px"
+          class="ml-2.5 cursor-pointer"
+        />
+      </div>
+    </template>
+    <template #auth="slotProps"
+      ><div class="flex items-center">
+        {{
+          slotProps.authentication_subject_nature === 2
+            ? "授权备案"
+            : "本人备案"
+        }}
+        <img
+          src="@/assets/img/link.png"
+          style="width: 14px"
+          class="ml-2.5 cursor-pointer"
+        /></div
+    ></template>
     <template #operate="slotProps">
       <syMoreOperate
         :teleport="true"
@@ -61,7 +87,6 @@ import {
   eStatusOfFilerCertification,
 } from "@/components/ApproveStatus/status";
 import ApproveStatus from "@/components/ApproveStatus/index.vue";
-// import HoverShowReason from "./HoverShowReason.vue";
 import { useTableScrollListener } from "@/components/Table/hooks";
 import Icon from "@/components/Icon/index.vue";
 
@@ -81,11 +106,22 @@ const emit = defineEmits<{
       raw: any;
     }
   ): void;
-  (e: "clickStatusFilter", payload: eStatusOfCopyright): void;
+  (e: "clickStatusFilter", payload: eStatusOfFilerCertification): void;
+  (
+    e: "edit",
+    paylaod: {
+      id: number;
+    }
+  ): any;
+  (e: "refresh"): any;
 }>();
 
 const tableRef = ref<InstanceType<typeof Table>>();
 
+defineExpose({
+  tableRef,
+});
+
 useTableScrollListener(tableRef, () => {
   emit("scrollToEnd");
 });
@@ -93,12 +129,20 @@ useTableScrollListener(tableRef, () => {
 const operateListOfFilterStatus =
   Service.getInstance().getOperateListOfFilterStatus();
 const getOperateList = (slotProps: any) => {
-  return Service.getInstance().getOperateListOfAction(slotProps.status);
+  return Service.getInstance().getOperateListOfAction(
+    slotProps.authentication_status
+  );
 };
 const handleClickItem = (operateValue: string, slotProps: any) => {
-  Service.getInstance().handleClickOperateItemOfAction(operateValue, slotProps);
+  Service.getInstance().handleClickOperateItemOfAction(
+    operateValue,
+    slotProps,
+    emit
+  );
 };
-const handleClickCurrentStatusTableHeader = (v: eStatusOfCopyright) => {
+const handleClickCurrentStatusTableHeader = (
+  v: eStatusOfFilerCertification
+) => {
   emit("clickStatusFilter", v);
 };
 </script>

src/views/FilingPersonManagement/components/FilingPersonTable/table.ts

@@ -2,32 +2,33 @@ import { iTableColumn } from "@/components/Table/types";
 export const tableColumns = [
   {
     label: "备案人",
-    prop: "name",
-    minWidth: 300,
+    prop: "authentication_name",
+    // minWidth: 300,
   },
   {
     label: "证件号码",
-    prop: "address",
-    minWidth: 280,
+    prop: "authentication_subject_nature_code",
+    // minWidth: 280,
   },
   {
     label: "证件附件",
-    minWidth: 200,
+    slotName: "additional",
+    // minWidth: 200,
   },
   {
     label: "授权",
-    prop: "date",
-    minWidth: 280,
+    slotName: "auth",
+    // minWidth: 280,
   },
   {
     label: "当前状态",
     slotName: "currentStatusCell",
     headerSlotName: "currentStatusHeader",
-    minWidth: 200,
+    // minWidth: 200,
   },
   {
     label: "操作",
     slotName: "operate",
-    minWidth: 100,
+    // minWidth: 100,
   },
 ] as iTableColumn[];

src/views/FilingPersonManagement/index.vue

@@ -30,10 +30,15 @@
       </div>
       <AddFilingPerson
         v-model:visible="addFilingPersonDailogVisible"
+        @add-success="handleRefetch"
+        ref="AddFilingPersonRef"
       ></AddFilingPerson>
       <div class="flex-grow overflow-hidden mt-4">
         <FilingPersonTable
+          ref="FilingPersonTableRef"
           @click-status-filter="handleClickStatusFilter"
+          @edit="handleClickEdit"
+          @refresh="handleRefetch"
           :data="tableData"
           :loading="loading"
         ></FilingPersonTable>
@@ -48,16 +53,20 @@ import Search from "@/components/Search/index.vue";
 import Avatar from "@/components/Avatar/index.vue";
 import Title from "@/components/Title.vue";
 import { syButton } from "cqk-sy-ui";
-import { eStatusOfCopyright } from "@/components/ApproveStatus/status";
+import { eStatusOfFilerCertification } from "@/components/ApproveStatus/status";
 import { useTableData } from "@/components/Table/hooks";
 import { debounce } from "lodash";
 import FilingPersonTable from "./components/FilingPersonTable/index.vue";
 import AddFilingPerson from "@/views/AddFilingPerson/index.vue";
+import { getAuths } from "@/service/copyrightService";
+import { iAuth } from "@/types/copyright";
 
 const searchValue = ref("");
 
 const addFilingPersonDailogVisible = ref(false);
-const currentStatus = ref(eStatusOfCopyright.ALL); // 进行中的表格的状态
+const currentStatus = ref(eStatusOfFilerCertification.ALL); // 进行中的表格的状态
+const FilingPersonTableRef = ref<InstanceType<typeof FilingPersonTable>>();
+const AddFilingPersonRef = ref<InstanceType<typeof AddFilingPerson>>();
 
 const fetchTableData = ({
   page,
@@ -66,34 +75,27 @@ const fetchTableData = ({
 }: {
   page: number;
   page_size: number;
-  currentStatus: eStatusOfCopyright;
+  currentStatus: eStatusOfFilerCertification;
 }) => {
-  /* 请求所需要的参数 */
-  page;
-  page_size;
-  // 当前状态
-  currentStatus;
-  return new Promise<any>((r) => {
-    setTimeout(() => {
-      r({
-        total: 100,
-        data: "1"
-          .repeat(page_size)
-          .split("")
-          .map((i, index) => ({
-            name: index + (page - 1) * page_size + currentStatus,
-            status:
-              currentStatus === eStatusOfCopyright.ALL
-                ? eStatusOfCopyright.RECORD_SUCCESS
-                : currentStatus,
-            address: searchValue.value,
-          })),
-      });
-    }, 1000);
+  const list =
+    currentStatus === eStatusOfFilerCertification.ALL
+      ? [
+          eStatusOfFilerCertification.NOT_PASSED,
+          eStatusOfFilerCertification.PASSED,
+          eStatusOfFilerCertification.WAITING_CHECK,
+        ]
+      : [currentStatus];
+  return getAuths(searchValue.value, list, page, page_size).then((ret) => {
+    return {
+      data: (ret?.data.results as iAuth[]) || [],
+      total: ret?.data.total || 0,
+    };
   });
 };
 
-const generateFetchTableData = (getCurrentStatus: () => eStatusOfCopyright) => {
+const generateFetchTableData = (
+  getCurrentStatus: () => eStatusOfFilerCertification
+) => {
   return ({ page, page_size }: { page: number; page_size: number }) => {
     return fetchTableData({
       page,
@@ -112,15 +114,61 @@ const {
   fetchData: generateFetchTableData(() => currentStatus.value),
 });
 
-const refetchDebounce = debounce(() => {
+function handleRefetch() {
+  FilingPersonTableRef.value?.tableRef?.scrollTo(0, 0);
   refetch();
+}
+
+const refetchDebounce = debounce(() => {
+  handleRefetch();
 }, 500);
 
-const handleClickStatusFilter = (status: eStatusOfCopyright) => {
+const handleClickStatusFilter = (status: eStatusOfFilerCertification) => {
   currentStatus.value = status;
   refetch();
 };
 
+const handleClickEdit = ({ id }: { id: number }) => {
+  addFilingPersonDailogVisible.value = true;
+
+  const raw = tableData.value.find((i) => i.id === id);
+  AddFilingPersonRef.value!.mode = "edit";
+  AddFilingPersonRef.value!.modelOfCert.name = raw!.authentication_name;
+  AddFilingPersonRef.value!.modelOfCert.property =
+    raw!.authentication_subject_nature;
+  AddFilingPersonRef.value!.modelOfCert.idCard =
+    raw!.authentication_subject_nature_code;
+  AddFilingPersonRef.value!.modelOfCert.unifiedSocialCreditCode =
+    raw!.authentication_subject_nature_code;
+  AddFilingPersonRef.value!.modelOfCert.powerOfAttorneyImage =
+    raw!.authentication_certificate_of_authorization_image;
+  AddFilingPersonRef.value!.modelOfCert.authorizationValidityPeriod =
+    raw!.authentication_certificate_of_authorization_date;
+
+  AddFilingPersonRef.value!.modelOfContact.name = raw!.contact_person;
+  AddFilingPersonRef.value!.modelOfContact.email = raw!.contact_email;
+  AddFilingPersonRef.value!.modelOfContact.cellphoneNumber =
+    raw!.contact_mobile;
+  AddFilingPersonRef.value!.modelOfContact.phoneNumber = raw!.contact_telephone;
+  AddFilingPersonRef.value!.modelOfContact.postCode = raw!.contact_post_code;
+  AddFilingPersonRef.value!.modelOfContact.fax = raw!.contact_fax;
+  AddFilingPersonRef.value!.modelOfContact.addr = raw!.contact_address;
+  AddFilingPersonRef.value!.modelOfCert.city = [
+    raw!.authentication_province,
+    raw!.authentication_city,
+    raw!.authentication_district,
+  ];
+
+  AddFilingPersonRef.value!.modelOfCert.businessLicenseOrCopy =
+    raw!.authentication_business_license;
+  AddFilingPersonRef.value!.modelOfCert.idCardImg = {
+    front: raw!.authentication_held_front_id_card,
+    back: raw!.authentication_held_back_id_card,
+  };
+
+  AddFilingPersonRef.value!.id = id;
+};
+
 watch(searchValue, () => {
   refetchDebounce();
 });