回收站

src/router.ts

@@ -21,17 +21,10 @@ const routes = [
     path: "/main",
     component: () => import("@/views/Main.vue"),
     children: [
-      // {
-      //   path: "/categoryManage",
-      //   name: "categoryManage",
-      //   component: (
-      //     () => import("@/views/category/Index.vue")
-      //   ),
-      // },
       {
         path: "/recycleBin",
         name: "recycleBin",
-        component: () => import("@/views/category/recycleBin.vue"),
+        component: () => import("@/views/RecycleBin/index.vue"),
       },
       {
         path: "/templateManagement",
@@ -41,7 +34,7 @@ const routes = [
       {
         path: "/tracingManagement",
         name: "tracingManagement",
-        component: () => import("@/views/category/tracingManagement/index.vue"),
+        component: () => import("@/views/Tracing/tracingManagement/index.vue"),
       },
       // {
       //   path: "/copyrightManagement",
@@ -142,7 +135,7 @@ const routes = [
   {
     path: "/tracingDetail",
     name: "tracingDetail",
-    component: () => import("@/views/category/tracingDetail/index.vue"),
+    component: () => import("@/views/Tracing/tracingDetail/index.vue"),
   },
   {
     path: "/passMaker",

src/views/RecycleBin/components/RecycleBinTable/config.ts

+import { iTableColumn } from "@/components/Table/types";
+
+export const columns = [
+  {
+    prop: "name",
+    label: "溯源名称",
+    minWidth: "400px",
+    showOverflowTooltip: true,
+  } as iTableColumn,
+  {
+    label: "操作时间",
+    minWidth: "100px",
+    slotName: "update_time",
+  } as iTableColumn,
+  {
+    label: "区块链查询",
+    minWidth: "100px",
+    slotName: "query",
+  } as iTableColumn,
+  {
+    label: "操作",
+    minWidth: "100px",
+    slotName: "operate",
+  } as iTableColumn,
+];

src/views/RecycleBin/components/RecycleBinTable/index.vue

+<template>
+  <div class="recycleBinTable h-full">
+    <Table
+      ref="tableRef"
+      :columns="columns"
+      :data="data"
+      height="100%"
+      :loading="loading"
+    >
+      <template #update_time="slotProps">
+        {{ getRelativeTime(slotProps.update_time) }}
+      </template>
+      <template #query="slotProps">
+        <syMoreOperate
+          :teleport="true"
+          :list="queryOperateList"
+          :disabled="slotProps.status !== 2"
+          @click-item="
+            (value) =>
+              queryOperateList.find((i) => i.value === value)?.click(slotProps)
+          "
+          class="align-middle"
+        >
+          <span
+            :style="{
+              color:
+                slotProps.status === 2 ? 'var(--sy-blue)' : 'var(--sy-gray)',
+            }"
+            >查询</span
+          >
+        </syMoreOperate>
+      </template>
+      <template #operate="slotProps">
+        <syMoreOperate
+          :teleport="true"
+          :list="operateList"
+          @click-item="
+            (value) =>
+              operateList.find((i) => i.value === value)?.click(slotProps)
+          "
+          :disabled="slotProps.status !== 2"
+          class="align-middle"
+        >
+          <Icon icon-name="iconbianzu7-copy" style="font-size: 26px"></Icon>
+        </syMoreOperate>
+      </template>
+    </Table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import Table from "@/components/Table/index.vue";
+import Icon from "@/components/Icon/index.vue";
+import {
+  syMoreOperate,
+  getRelativeTime,
+  copyText,
+  openChainBrowser,
+  GO_URLS,
+} from "cqk-sy-ui";
+
+import { columns } from "./config";
+import { useTableScrollListener } from "@/components/Table/hooks";
+import { ElMessage } from "element-plus";
+import { globalState } from "@/store/state";
+import { showTip } from "@/components/GlobalMount/api";
+import { $ajax } from "@/service";
+
+const props = defineProps<{
+  data: any[];
+  loading?: boolean;
+}>();
+
+const tableRef = ref<InstanceType<typeof Table>>();
+const emit = defineEmits(["scrollToEnd", "update"]);
+
+const queryOperateList = [
+  {
+    name: "查看区块链",
+    value: "check",
+    click(slotProps: any) {
+      openChainBrowser(slotProps.hash, globalState.urlList.chain_browser_url);
+    },
+  },
+  {
+    name: "复制存证地址",
+    value: "copy",
+    click(slotProps: any) {
+      copyText(slotProps.hash);
+      ElMessage.success("复制成功");
+    },
+  },
+];
+const operateList = [
+  {
+    name: "隐私设置",
+    value: "privacySettings",
+    click(slotProps: any) {
+      showTip(
+        "确定要隐藏该条记录吗",
+        async () => {
+          const res = await $ajax({
+            type: "post",
+            url: GO_URLS.deleteBlockChainProof,
+            params: {
+              id: slotProps.id,
+            },
+          });
+          if (res) {
+            ElMessage({
+              type: "success",
+              message: "隐藏成功!",
+            });
+            emit("update");
+          }
+        },
+        () => {}
+      );
+    },
+  },
+];
+
+useTableScrollListener(tableRef, () => {
+  emit("scrollToEnd");
+});
+
+defineExpose({
+  tableRef,
+});
+</script>
+
+<style lang="scss" scoped>
+.recycleBinTable {
+  :deep(.el-table__cell) {
+    height: 50px;
+  }
+}
+</style>

src/views/RecycleBin/index.vue

+<template>
+  <Layout>
+    <div class="flex flex-col w-full h-full">
+      <div class="flex items-center flex-shrink-0">
+        <Search v-model="currentSearchStr" placeholder="搜索"></Search>
+        <Avatar class="ml-7"></Avatar>
+      </div>
+      <div
+        class="flex items-center justify-between flex-shrink-0"
+        style="margin-top: 26px"
+      >
+        <Title>回收站</Title>
+      </div>
+      <div class="flex-grow overflow-hidden relative" v-loading="loading">
+        <RecycleBinTable
+          v-show="!(tableData.length === 0)"
+          ref="RecycleBinTableRef"
+          :data="tableData"
+          @scroll-to-end="fetchNextPage"
+          @update="refetch"
+        ></RecycleBinTable>
+        <Empty
+          v-show="!loading && tableData.length === 0"
+          class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        >
+          {{
+            searchingStr === ""
+              ? "暂无数据"
+              : "没有找到匹配结果，尝试其他关键词搜索"
+          }}
+        </Empty>
+      </div>
+    </div>
+  </Layout>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+import Layout from "@/components/Layout.vue";
+import Avatar from "@/components/Avatar/index.vue";
+import Search from "@/components/Search/index.vue";
+import Title from "@/components/Title.vue";
+import RecycleBinTable from "./components/RecycleBinTable/index.vue";
+import { GO_URLS } from "cqk-sy-ui";
+
+import { useTableData } from "@/components/Table/hooks";
+import { watchDebounced } from "@vueuse/core";
+import { $ajax } from "@/service";
+import { watchStrChangeDebounceTime } from "@/config/time";
+import Empty from "@/components/Empty/index.vue";
+
+const currentSearchStr = ref("");
+const searchingStr = ref("");
+const RecycleBinTableRef = ref<InstanceType<typeof RecycleBinTable>>();
+
+const { fetchNextPage, tableData, loading, refetch } = useTableData({
+  fetchData: async ({ page, page_size }) => {
+    const res = await $ajax({
+      type: "post",
+      url: GO_URLS.list,
+      params: {
+        page: page,
+        key_words: currentSearchStr.value,
+        page_size: page_size,
+        is_valid: 1,
+      },
+    });
+
+    return {
+      total: res?.data.total || 0,
+      data: res?.data.results || [],
+    };
+  },
+});
+
+const handleRefetch = async () => {
+  searchingStr.value = currentSearchStr.value;
+  RecycleBinTableRef.value?.tableRef?.scrollTo(0, 0);
+  refetch();
+};
+
+watchDebounced(
+  currentSearchStr,
+  () => {
+    handleRefetch();
+  },
+  {
+    debounce: watchStrChangeDebounceTime,
+  }
+);
+</script>
+<style lang="scss"></style>

src/views/category/tracingManagement/components/ProofTable/index.vue → src/views/Tracing/tracingManagement/components/ProofTable/index.vue

@@ -128,7 +128,7 @@ import { useTableScrollListener } from "@/components/Table/hooks";
 import { columns } from "./constants";
 import { globalState } from "@/store/state";
 import { ElMessage } from "element-plus";
-import { iProof } from "@/views/category/tracingDetail/types";
+import { iProof } from "@/views/Tracing/tracingDetail/types";
 
 const props = defineProps<{
   data: any[];

src/views/category/tracingManagement/index.vue → src/views/Tracing/tracingManagement/index.vue

@@ -229,8 +229,8 @@ import Search from "@/components/Search/index.vue";
 import Layout from "@/components/Layout.vue";
 import Avatar from "@/components/Avatar/index.vue";
 import Title from "@/components/Title.vue";
-import IntroCard from "@/views/category/tracingManagement/components/IntroCard.vue";
-import AddProof from "@/views/category/tracingManagement/components/AddProof.vue";
+import IntroCard from "@/views/Tracing/tracingManagement/components/IntroCard.vue";
+import AddProof from "@/views/Tracing/tracingManagement/components/AddProof.vue";
 import ProofTable from "./components/ProofTable/index.vue";
 import CopyGoods from "./components/CopyGoods/index.vue";
 import DeleteGoods from "./components/DeleteGoods/index.vue";

src/views/category/Index.vue

-<template>
-  <div class="flex h-full">
-    <div
-      style="
-        width: 220px;
-        background: #fff;
-        padding-right: 17px;
-        box-sizing: border-box;
-      "
-      class="h-full flex-shrink-0"
-    >
-      <syBusinessMenu v-bind="menuState" :numList="numList"></syBusinessMenu>
-    </div>
-    <div class="h-full rightBox flex-grow relative overflow-scroll">
-      <div class="px-4" v-show="menuState.current === 0">
-        <syTraceProofRecord
-          :showTip="showTip"
-          :setDepositCertificate="setDepositCertificate"
-          :userInfos_auth_suc="userInfos_auth_suc"
-          :navigate="navigate"
-          :setListOfInformation="setListOfInformation"
-          :setGoodsNum="setGoodsNum"
-          :setChainStatus="setChainStatus"
-          :theAnchor="theAnchor"
-          :setTheAnchor="setTheAnchor"
-          :depositCertificate="depositCertificate"
-          :page="page"
-          :setPage="setPage"
-          @update="handleProofDeleted"
-        >
-          <template #table="slotProps">
-            <IncrementalTable
-              @increment="slotProps.incrementOperation"
-              @delete-goods="slotProps.deleteGoodsShow"
-              @upload="slotProps.upload"
-              @delete-incremental="slotProps.deleteTheIncremental"
-              @incremental-chain="slotProps.incrementalOnChain"
-              @create-copy="slotProps.createCopy"
-              @privacy-settings="slotProps.privacySettings"
-              @update="slotProps.getList"
-            ></IncrementalTable>
-          </template>
-        </syTraceProofRecord>
-      </div>
-      <syTraceTemplateManage
-        v-show="menuState.current === 1"
-        :navigate="navigate"
-        :showTip="showTip"
-        :setTemplateNum="setTemplateNum"
-        :TemplateType="globalState.templateType"
-        :setTemplateType="(v: number) => (globalState.templateType = v)"
-        :templateData="globalState.templateData"
-        :setTemplateData="
-          (v: any) => {
-            globalState.templateData = v;
-          }
-        "
-      ></syTraceTemplateManage>
-      <Deleted v-show="menuState.current === 2" :ToUpdate="toUpdate" />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { router } from "@/router";
-import {
-  setChainStatus,
-  setDepositCertificate,
-  setGoodsNum,
-  setListOfInformation,
-  setTheAnchor,
-} from "@/store/mutations";
-import IncrementalTable from "./components/IncrementalTable.vue";
-import { globalState } from "@/store/state";
-import {
-  syBusinessMenu,
-  syTraceProofRecord,
-  syTraceTemplateManage,
-} from "cqk-sy-ui";
-import { computed, reactive, ref } from "vue";
-import Deleted from "./components/Deleted.vue";
-import { showTip } from "@/components/GlobalMount/api";
-
-const page = computed(() => {
-  return globalState.page;
-});
-
-const toUpdate = ref(0);
-
-const setPage = (v: number) => {
-  globalState.page = v;
-};
-const setTemplateNum = (n: number) => {
-  globalState.templateNum = n;
-};
-
-const menuState = reactive({
-  current: globalState.selectedStatus,
-  setCurrent: (v: number) => {
-    menuState.current = v;
-    globalState.selectedStatus = v;
-  },
-});
-
-const numList = computed(() => {
-  return [
-    globalState.goodsNum,
-    globalState.templateNum,
-    globalState.deletedNum,
-  ];
-});
-
-const depositCertificate = computed(() => {
-  return globalState.depositCertificate;
-});
-
-const userInfos_auth_suc = computed(() => {
-  return globalState.userInfos.auth_suc;
-});
-
-const navigate = router.push;
-const theAnchor = computed(() => {
-  return globalState.theAnchor;
-});
-
-const handleProofDeleted = () => {
-  toUpdate.value = Math.random();
-};
-</script>
-<style scoped>
-.rightBox {
-  background-color: var(--bg-gray);
-}
-</style>

src/views/category/components/Deleted.vue

-<template>
-  <div>
-    <div
-      class="flex items-center mt-5"
-      style="margin-left: 26px"
-      v-if="infoList && infoList.length !== 0"
-    >
-      <div
-        style="font-size: 16px; font-weight: 600; color: rgba(53, 53, 53, 1)"
-        class="mr-4"
-      >
-        回收站
-      </div>
-      <sySearch
-        v-model:value="params.key_words"
-        @search="inputBlur"
-        placeholder="搜索存证名称/存证地址"
-      ></sySearch>
-    </div>
-    <div class="overflow-hidden mt-5" v-if="infoList && infoList.length !== 0">
-      <DeletedTableVue
-        :list="infoList"
-        :serialNumber="serialNumber"
-        :page="params.page"
-        @handleChain="handleChain"
-        @copyHash="copyHash"
-        @privacySettings="privacySettings"
-      ></DeletedTableVue>
-      <pagination
-        style="
-          margin-top: 13px;
-          text-align: right;
-          padding-right: 13px;
-          padding-bottom: 80px;
-        "
-        v-model:value="params.page"
-        :total="total"
-        @change="pagechange"
-        :size="10"
-      >
-        <span class="pager-count">共{{ Math.ceil(total / 10) }}页</span>
-      </pagination>
-    </div>
-    <div v-if="!infoList || infoList.length === 0">
-      <div
-        class="absolute top-1/3 left-1/2 transform -translate-x-1/2 text-center"
-      >
-        <img src="/images/category/deletes.png" />
-        <p class="text-sm mt-4">暂无已删除存证</p>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { showTip } from "@/components/GlobalMount/api";
-import { $ajax } from "@/service";
-import { setDeletedNum } from "@/store/mutations";
-import { globalState } from "@/store/state";
-import {
-  sySearch,
-  syPagination,
-  syPrompt,
-  syCommonDialog,
-  GO_URLS,
-  openChainBrowser,
-  fmtTimeStamp,
-} from "cqk-sy-ui";
-import { ElMessage } from "element-plus";
-import { defineComponent } from "vue";
-import DeletedTableVue from "./DeletedTable.vue";
-
-export default defineComponent({
-  components: {
-    Pagination: syPagination,
-    prompt: syPrompt,
-    CommonDialog: syCommonDialog,
-    sySearch,
-    DeletedTableVue,
-  },
-  props: ["ToUpdate"],
-  data() {
-    return {
-      infoList: [] as any,
-      params: {
-        page: 1,
-        key_words: "",
-        page_size: 10,
-        is_valid: 1,
-      },
-      showBlock: false,
-      checkBlock: 0,
-      total: 0,
-      isFirst: true,
-      showList: false,
-      checkSet: -1,
-      PromptShow: false,
-      PromptID: -1,
-    };
-  },
-  watch: {
-    ToUpdate: function (newO, oldO) {
-      this.inValid(this.params);
-    },
-  },
-  mounted() {
-    this.inValid(this.params);
-  },
-  methods: {
-    async callDialogMethod(refName: string, methodName: string) {
-      return (this.$refs as any)[refName][methodName]();
-    },
-    serialNumber(index: number) {
-      return (this.params.page - 1) * 10 + (index + 1);
-    },
-    async hiddenCertificate() {
-      const res = await $ajax({
-        type: "post",
-        url: GO_URLS.deleteBlockChainProof,
-        params: {
-          id: this.PromptID,
-        },
-      });
-      if (res) {
-        this.inValid(this.params);
-        ElMessage({
-          type: "success",
-          message: "隐藏成功!",
-        });
-      }
-    },
-    privacySettings(item: any) {
-      showTip(
-        "确定要隐藏该条记录吗",
-        () => {
-          this.hiddenCertificate();
-        },
-        () => {}
-      );
-
-      this.PromptID = item.id;
-    },
-    openSet(item: any, index: number) {
-      if (item.status !== 2) return;
-      this.checkSet = index;
-      document.addEventListener("mousedown", this.onHindMenu);
-    },
-    inputBlur() {
-      if (this.params.key_words.trim() === "") {
-        this.params.key_words = "";
-      }
-      this.params.page = 1;
-      this.inValid(this.params);
-    },
-    pagechange() {
-      this.inValid(this.params);
-    },
-    // 隐藏条件选中
-    onHindMenu() {
-      this.showBlock = false; // 区块链
-      this.checkSet = -1;
-      document.removeEventListener("mousedown", this.onHindMenu);
-    },
-    // 复制哈希值
-    copyHash(item: any) {
-      var input = document.createElement("input"); // 直接构建input
-      input.value = item.hash; // 设置内容
-      document.body.appendChild(input); // 添加临时实例
-      input.select(); // 选择实例内容
-      document.execCommand("Copy"); // 执行复制
-      document.body.removeChild(input);
-      ElMessage({
-        message: "复制成功，请右键粘贴使用",
-        type: "success",
-      });
-    },
-    // 打开区块链浏览器
-    handleChain(item: any) {
-      openChainBrowser(item.hash, globalState.urlList.chain_browser_url);
-    },
-    // 显示区块链弹窗
-    openBlock(item: any, index: number) {
-      if (item.status != 2) {
-        return;
-      }
-      this.checkBlock = index;
-      document.addEventListener("mousedown", this.onHindMenu);
-      this.showBlock = true;
-    },
-    fmtTimeStamp2: function (stampStr: any) {
-      return fmtTimeStamp("Y-M-D", parseInt(stampStr));
-    },
-    //   获取已删除数据
-    async inValid(params: any) {
-      const res = await $ajax({
-        type: "post",
-        url: GO_URLS.list,
-        params: params,
-      });
-      if (res) {
-        if (this.isFirst) {
-          if (res.data.results) {
-            this.showList = true;
-            this.isFirst = false;
-          }
-        }
-        setDeletedNum(res.data.total);
-        this.infoList = res.data.results;
-        this.total = res.data.total;
-      }
-    },
-  },
-});
-</script>
-
-<style>
-.pager-count {
-  margin-left: 12px;
-  font-size: 12px;
-}
-</style>

src/views/category/components/DeletedTable.vue

-<template>
-  <syTable :data="list" :columns="columns" class="w-full overflow-hidden">
-    <template #id="props">{{ serialNumber(props.index.$index) }}</template>
-    <template #name="props">
-      <div class="whitespace-nowrap overflow-hidden overflow-ellipsis">
-        {{ props.name }}
-      </div></template
-    >
-    <template #createDate="props">
-      <div>{{ formatTime(props.create_time) }}</div>
-    </template>
-    <template #deleteDate="props">{{ formatTime(props.update_time) }}</template>
-    <template #reason="props">
-      <div class="whitespace-nowrap overflow-hidden overflow-ellipsis">
-        {{ props.abandon_remark }}
-      </div>
-    </template>
-    <template #query="props">
-      <syMoreOperate
-        teleport
-        :width="156"
-        :list="queryOperateList"
-        @click-item="(v) => handleClickQuery(props, v)"
-        :disabled="props.status !== 2"
-      >
-        <div class="iconOutBox" style="color: #9b9b9b">
-          <i
-            class="iconfont iconfangdajing1"
-            style="font-size: 13px"
-            :class="{ 'iconerweima--check': props.status === 2 }"
-          ></i>
-        </div>
-      </syMoreOperate>
-    </template>
-    <template #operate="props">
-      <syMoreOperate
-        :width="156"
-        teleport
-        :list="operateList"
-        @click-item="(v) => handleClickOperate(props, v)"
-        :disabled="props.status !== 2"
-      >
-        <i
-          class="iconfont iconCZ2 align-middle"
-          style="font-size: 42px; margin-left: -10px"
-          :class="{ 'iconerweima--check': props.status === 2 }"
-        ></i>
-      </syMoreOperate>
-    </template>
-  </syTable>
-</template>
-<script lang="ts" setup>
-import { syTable, formatTime, syMoreOperate } from "cqk-sy-ui";
-const props = defineProps<{
-  list: any[];
-  page: number;
-  serialNumber: (n: number) => number;
-}>();
-
-const emit = defineEmits(["handleChain", "copyHash", "privacySettings"]);
-const operateList = [
-  {
-    name: "隐私设置",
-    value: "隐私设置",
-    click(item: any) {
-      emit("privacySettings", item);
-    },
-  },
-];
-
-const queryOperateList = [
-  {
-    name: "查看区块链",
-    value: "查看区块链",
-    click(item: any) {
-      emit("handleChain", item);
-    },
-  },
-  {
-    name: "复制存证地址",
-    value: "复制存证地址",
-    click(item: any) {
-      emit("copyHash", item);
-    },
-  },
-];
-
-const handleClickOperate = (item: any, v: any) => {
-  operateList.find((i) => i.name === v)?.click(item);
-};
-
-const handleClickQuery = (item: any, v: any) => {
-  queryOperateList.find((i) => i.name === v)?.click(item);
-};
-
-const columns = [
-  {
-    width: "30",
-  },
-  {
-    width: "90",
-    label: "序号",
-    dataIndex: "id",
-    slotName: "id",
-  },
-  {
-    width: "300",
-    label: "存证名称",
-    dataIndex: "name",
-    showOverflowTooltip: true,
-    slotName: "name",
-  },
-  {
-    width: "200",
-    label: "创建日期",
-    dataIndex: "createDate",
-    slotName: "createDate",
-    showOverflowTooltip: true,
-  },
-  {
-    width: "200",
-    label: "删除日期",
-    dataIndex: "deleteDate",
-    slotName: "deleteDate",
-    showOverflowTooltip: true,
-  },
-  {
-    label: "删除原因",
-    dataIndex: "reason",
-    showOverflowTooltip: true,
-    slotName: "reason",
-  },
-  {
-    width: "100",
-    label: "区块链查询",
-    showOverflowTooltip: true,
-    dataIndex: "query",
-    slotName: "query",
-  },
-  {
-    width: "85",
-    label: "操作",
-    dataIndex: "operate",
-    showOverflowTooltip: true,
-    slotName: "operate",
-  },
-];
-</script>
-<style lang="scss" scoped>
-.iconOutBox {
-  position: relative;
-  height: 25px;
-  width: 25px;
-  line-height: 25px;
-  margin: 0 auto;
-  border-radius: var(--sy-border-radius);
-  background: rgba(155, 155, 155, 0.1);
-}
-.iconerweima--check {
-  color: var(--sy-blue);
-}
-</style>

src/views/category/recycleBin.vue

-<template>
-  <Layout>
-    <div class="flex justify-end">
-      <Avatar></Avatar>
-    </div>
-    <DeletedVue :ToUpdate="1" />
-  </Layout>
-</template>
-<script lang="ts" setup>
-import DeletedVue from "./components/Deleted.vue";
-import Layout from "@/components/Layout.vue";
-import Avatar from "@/components/Avatar/index.vue";
-</script>
-<style lang="scss"></style>

src/views/pass/Index.vue

-<template>
-  <div class="flex passIndex h-full">
-    <div class="left flex-grow-0" style="width: 220px">
-      <syBusinessMenu
-        type="tongzheng"
-        :current="current"
-        :setCurrent="setCurrent"
-      ></syBusinessMenu>
-    </div>
-    <div style="background-color: #f5f6fa" class="flex-grow">
-      <router-view></router-view>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { router } from "@/router";
-import { syBusinessMenu } from "cqk-sy-ui";
-import { ref } from "vue";
-import { useRoute } from "vue-router";
-
-const menuList = [
-  {
-    path: "/passList",
-  },
-  {
-    path: "/transferRecord",
-  },
-];
-
-const route = useRoute();
-
-const current = ref(0);
-const setCurrent = (v: number) => {
-  current.value = v;
-  if (v === 0) {
-    router.push("/passList");
-  } else if (v === 1) {
-    router.push("/transferRecord");
-  }
-};
-
-(function () {
-  if (route.path) {
-    const index = menuList.findIndex((i) => i.path === route.path);
-    current.value = index;
-  }
-})();
-</script>
-
-<style>
-.passIndex * {
-  box-sizing: content-box;
-}
-</style>
-
-<style lang="scss" scoped>
-.left {
-  box-sizing: content-box;
-  width: 237px;
-  flex-shrink: 0;
-  background: #ffffff;
-}
-</style>

src/views/pass/PassList/PassListTable.vue

-<template>
-  <syTable
-    height="100%"
-    :data="passList"
-    :columns="columns"
-    v-if="passList.length > 0"
-    show-overflow-tooltip
-  >
-    <template #name="props">
-      <div
-        class="cursor-pointer overflow-hidden overflow-ellipsis"
-        @click="toProve(props)"
-      >
-        {{ props.name }}
-      </div>
-    </template>
-    <template #identifier="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ props.identifier }}
-      </div>
-    </template>
-    <template #amount="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ props.amount }}
-      </div>
-    </template>
-    <template #balance="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ props.balance }}
-      </div>
-    </template>
-    <template #create_time="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ formatTime(props.create_time) }}
-      </div>
-    </template>
-    <template #status="props">
-      <div class="flex items-center">
-        <syButton mode="issuing" v-if="props.status === 1">发行中</syButton>
-        <syButton mode="issuedSuccess" v-else-if="props.status === 2"
-          >发行成功</syButton
-        >
-        <syButton v-else-if="props.status === 3" mode="issuedFailed"
-          >发行失败</syButton
-        >
-        <span
-          v-if="props.status === 3"
-          @click="reIssue(props)"
-          class="iconfont2 icon-re cursor-pointer"
-          style="color: rgb(103, 169, 255); margin-left: 3px"
-        ></span>
-      </div>
-    </template>
-    <template #transfer="props">
-      <div class="">
-        <span class="text-gray" v-if="props.balance === 0">划转</span>
-        <el-button
-          class="text-btn cursor-pointer"
-          v-else-if="props.status === 2"
-          type="text"
-          @click="transfer(props)"
-          >划转</el-button
-        >
-      </div>
-    </template>
-  </syTable>
-  <div class="empty" v-if="passList.length <= 0">
-    <img
-      src="/images/pass/empty.png"
-    />
-    <span>搜索无结果</span>
-  </div>
-  <!-- 转账弹窗-->
-  <common-dialog
-    showMask
-    @closePopup="passShow = false"
-    type="element"
-    :visible="passShow"
-    :element-dialog-props="{
-      title: '资产转账',
-    }"
-    element-dialog-size="medium"
-  >
-    <transfer-pass
-      v-if="passShow"
-      @update="$emit('update', curItem.id, curItem.balance)"
-      :content="curItem"
-      @closePopup="passShow = false"
-    ></transfer-pass>
-  </common-dialog>
-</template>
-
-<script lang="ts">
-import { $ajax } from "@/service";
-import { globalState } from "@/store/state";
-import {
-  debounce,
-  syCommonDialog,
-  GO_URLS,
-  syTable,
-  formatTime,
-  syButton,
-  syIcon,
-} from "cqk-sy-ui";
-import { ElMessage, ElButton } from "element-plus";
-import { defineComponent } from "vue";
-import TransferPass from "./TransferPass.vue";
-
-export default defineComponent({
-  props: ["passList"],
-  components: {
-    CommonDialog: syCommonDialog,
-    syTable,
-    ElButton,
-    syButton,
-    syIcon,
-    TransferPass,
-  },
-  emits: ["update", "nextPage"],
-  data() {
-    return {
-      columns: [
-        {
-          minWidth: "30",
-        },
-        {
-          label: "资产名称",
-          minWidth: "180",
-          slotName: "name",
-          showOverflowTooltip: true,
-          prop: "name",
-        },
-        {
-          label: "资产标识",
-          minWidth: "180",
-          showOverflowTooltip: true,
-          slotName: "identifier",
-          prop: "identifier",
-        },
-        {
-          label: "发行数量",
-          slotName: "amount",
-          showOverflowTooltip: true,
-          prop: "amount",
-        },
-        {
-          label: "剩余数量",
-          slotName: "balance",
-          showOverflowTooltip: true,
-          prop: "balance",
-        },
-        {
-          label: "发行时间",
-          minWidth: "150",
-          showOverflowTooltip: true,
-          slotName: "create_time",
-          prop: "create_time",
-        },
-        {
-          label: "发行状态",
-          slotName: "status",
-          showOverflowTooltip: true,
-          prop: "status",
-        },
-        {
-          label: "转划",
-          slotName: "transfer",
-        },
-      ],
-      passShow: false, // 显示转账弹窗
-      curItem: {} as any,
-    };
-  },
-  computed: {
-    tableHeight() {
-      return window.innerHeight - 145;
-    },
-  },
-  mounted() {
-    this.addListener();
-  },
-  beforeUnmount() {
-    const wrap = document.querySelector(
-      ".el-scrollbar__wrap"
-    ) as HTMLDivElement | null;
-    wrap && (wrap.onscroll = null);
-  },
-  methods: {
-    addListener() {
-      this.$nextTick(() => {
-        const wrap = document.querySelector(
-          ".el-scrollbar__wrap"
-        ) as HTMLDivElement | null;
-        wrap &&
-          (wrap.onscroll = debounce(
-            (event: Event) => {
-              const target = event.target as HTMLDivElement;
-              if (
-                target.offsetHeight + target.scrollTop >=
-                target.scrollHeight
-              ) {
-                console.log("bottom");
-                this.next();
-              }
-            },
-            500,
-            false
-          ));
-      });
-    },
-    formatTime,
-    toProve(item: any) {
-      window.open(
-        `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.id}&evm_tx_hash=${item.tx_hash}&from=client`
-      );
-    },
-    reIssue: debounce(
-      async function (this: any, content: any) {
-        const res = await $ajax({
-          type: "post",
-          url: GO_URLS.reissue,
-          params: {
-            ids: [content.id],
-          },
-        });
-        if (!res) return;
-        ElMessage.success("重新发行成功");
-        this.$emit("update");
-      },
-      500,
-      false
-    ),
-    transfer(item: any) {
-      this.curItem = item;
-      this.passShow = true;
-    },
-    next() {
-      this.$emit("nextPage");
-    },
-  },
-  watch: {
-    passList(newV) {
-      if (newV.length > 0) {
-      }
-    },
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.status {
-  position: relative;
-  .icon-re {
-    height: 14px;
-    width: 14px;
-    cursor: pointer;
-    position: absolute;
-    top: 5px;
-    left: 50%;
-    margin-left: 40px;
-  }
-}
-.pass-name {
-  cursor: pointer;
-}
-
-.text-btn {
-  color: var(--sy-blue) !important;
-  font-size: 12px;
-  font-weight: normal;
-  outline: none !important;
-  border: none !important;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.text-gray {
-  font-size: 12px;
-  color: #808080;
-}
-.empty {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: calc(100vh - 145px);
-
-  img {
-    width: 134px;
-    height: 113px;
-    margin-bottom: 6px;
-  }
-
-  span {
-    font-size: 14px;
-    color: var(--sy-gray);
-    line-height: 20px;
-  }
-}
-
-:deep(.el-table) {
-  .el-table__cell {
-    padding: 0;
-  }
-  th.el-table__cell {
-    height: 35px;
-    line-height: 35px;
-  }
-  .el-table__body td.el-table__cell {
-    height: 55px;
-    line-height: 55px;
-  }
-}
-</style>

src/views/pass/PassList/Search.vue

-<template>
-  <div class="search-wrapper items-center">
-    <syButton @click="goPassMaker" v-if="showCreateAsset"
-      >创建数字资产</syButton
-    >
-    <div class="choose-type ml-4">
-      <syMoreOperate
-        teleport
-        :width="156"
-        :margin-top="10"
-        :list="filterOperateList"
-        @click-item="handleClickFilterOperateItem"
-      >
-        <div class="chosen-type">
-          {{ query !== undefined && types[query.type] }}
-          <syIcon
-            class="ml-4"
-            name="iconzhankai"
-            color="#1c2323"
-            size="12px"
-          ></syIcon>
-        </div>
-      </syMoreOperate>
-    </div>
-    <sySearch
-      v-model:value="searchInput"
-      placeholder="搜索资产标识"
-    ></sySearch>
-    <div class="sort">
-      <syMoreOperate
-        teleport
-        :width="156"
-        :margin-top="10"
-        :margin-left="-15"
-        :list="sortOperateList"
-        @click-item="handleclickSortOperateItem"
-      >
-        <div class="chosen-sort whitespace-nowrap">
-          <syIcon name="iconshaixuan" color="#1c2323" size="12px"></syIcon>
-          <span class="mx-1">{{ query && sorts[query.amount_sort] }}</span>
-          <syIcon name="iconzhankai" color="#1c2323" size="12px"></syIcon>
-        </div>
-      </syMoreOperate>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { debounce, syButton, sySearch, syIcon, syMoreOperate } from "cqk-sy-ui";
-
-export default defineComponent({
-  components: {
-    syButton,
-    syIcon,
-    sySearch,
-    syMoreOperate,
-  },
-  props: ["query", "searchPlaceholder", "showCreateAsset"],
-  emits: ["update:query"],
-  data() {
-    return {
-      types: ["全部", "FT", "NFT"],
-      sorts: ["默认排序", "数量从低到高", "数量从高到低"],
-      searchInput: "",
-      type: "全部",
-      sort: "默认排序",
-      filterOperateList: [
-        {
-          name: "全部",
-          value: "0",
-        },
-        {
-          name: "FT",
-          value: "1",
-        },
-        {
-          name: "NFT",
-          value: "2",
-        },
-      ],
-      sortOperateList: [
-        { name: "默认排序", value: "默认排序" },
-        { name: "数量从低到高", value: "数量从低到高", iconName: 'iconjiang', },
-        { name: "数量从高到低", value: "数量从高到低", iconName: 'iconsheng', },
-      ],
-    };
-  },
-  watch: {
-    searchInput: debounce(
-      function (this: any, val: any) {
-        (this as any).$emit(
-          "update:query",
-          Object.assign({}, (this as any).query, { identifier: val })
-        );
-      },
-      500,
-      false
-    ),
-  },
-  methods: {
-    handleclickSortOperateItem(v: any) {
-      const index = this.sortOperateList.findIndex((i) => i.value === v);
-      this.selectSort(index);
-    },
-    handleClickFilterOperateItem(v: any) {
-      const index = this.filterOperateList.findIndex((i) => i.value === v);
-      this.selectType(index);
-    },
-    selectType(index: any) {
-      console.log("selectType", index);
-      console.log(Object.assign({}, this.query, { type: index }), "show ");
-      this.$emit(
-        "update:query",
-        Object.assign({}, this.query, { type: index })
-      );
-    },
-    selectSort(index: any) {
-      this.$emit(
-        "update:query",
-        Object.assign({}, this.query, { amount_sort: index })
-      );
-    },
-    goPassMaker() {
-      this.$router.push("/passMaker");
-    },
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.search-wrapper {
-  display: flex;
-  margin-top: 29px;
-  margin-left: 13px;
-  .add-goods {
-    float: left;
-    margin-left: 21px;
-    width: 120px;
-    height: 36px;
-    cursor: pointer;
-    background: rgba(30, 15, 255, 1);
-    box-shadow: 0px 2px 10px 0px rgba(30, 15, 255, 0.14),
-      0px 2px 10px 0px rgba(30, 15, 255, 0.07);
-    border-radius: 18px;
-    padding: 0;
-    line-height: 36px;
-    text-align: center;
-    color: white;
-    font-size: 14px;
-    transition: 0.3s;
-    &:hover {
-      transform: scale(1.1);
-      overflow: hidden;
-    }
-    .iconfont {
-      font-size: 14px;
-      margin-right: 8px;
-      color: white;
-      vertical-align: top;
-    }
-  }
-
-  .choose-type {
-    font-size: 14px;
-    color: var(--sy-black);
-    position: relative;
-    display: flex;
-    margin-right: 4px;
-
-    .chosen-type {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      width: 70px;
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    .arrow-down {
-      margin-left: auto;
-      width: 9px;
-      height: 4px;
-    }
-  }
-
-  .sort {
-    margin-left: auto;
-    margin-right: 23px;
-    font-size: 14px;
-    color: #1c2323;
-    display: flex;
-    position: relative;
-
-    .chosen-sort {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      .icon-sort {
-        width: 12px;
-        height: 12px;
-        margin-right: 10px;
-      }
-
-      .arrow-down {
-        width: 9px;
-        height: 4px;
-        margin-left: 8px;
-      }
-    }
-  }
-}
-</style>

src/views/pass/PassList/TransferCollection.vue

-<template>
-  <div class="transfer-pass">
-    <div class="form-collection">
-      <div class="content">
-        <img src="@/assets/img/collection.png" />
-        已选择
-        <span class="pass-name" :title="content.name">{{ content.name }}</span>
-        <span class="pass-type">{{ content.type === 1 ? "NFT" : "FT" }}</span>
-      </div>
-      <el-form :rules="rules" :model="formData">
-        <CustomizeFormItem prop="to">
-          <syDialogInput
-            class="w-full"
-            v-model:value="formData.to"
-            placeholder="填写划转地址"
-        /></CustomizeFormItem>
-      </el-form>
-      <syButton
-        @click="submit"
-        type="primary"
-        :disabled="disabled"
-        mode="elementBtn"
-        style="margin-top: 18px; margin-bottom: 20px"
-        >确定</syButton
-      >
-    </div>
-    <div class="tip-wrapper">
-      <p class="title">提示</p>
-      <p class="tip">1、因区块链交易会有延迟，转账时间约1~10分钟</p>
-      <p class="tip">2、提币前请务必确认转账地址是否正确</p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { $ajax } from "@/service";
-import { debounce, GO_URLS, syButton, syDialogInput } from "cqk-sy-ui";
-import { ElMessage, ElButton, ElInput, ElForm, ElFormItem } from "element-plus";
-import { defineComponent } from "vue";
-import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
-
-export default defineComponent({
-  components: {
-    ElButton,
-    ElInput,
-    ElForm,
-    ElFormItem,
-    syButton,
-    syDialogInput,
-    CustomizeFormItem,
-  },
-  props: ["content"],
-  data() {
-    return {
-      formData: {
-        to: "",
-        amount: "" as any,
-      },
-      rules: {
-        to: [{ required: true, message: "请输入划转地址", trigger: "blur" }],
-      },
-      amountDisable: false,
-    };
-  },
-  watch: {
-    "content.type": {
-      handler(val) {
-        if (val === 1) {
-          this.formData = {
-            ...this.formData,
-            amount: 1,
-          };
-        }
-      },
-      immediate: true,
-    },
-  },
-  computed: {
-    disabled() {
-      return this.formData.to === "";
-    },
-  },
-  methods: {
-    submit: debounce(
-      async function (this: any) {
-        const params = Object.assign({}, this.formData, {
-          pass_id: this.content.id,
-        });
-        const res = await $ajax({
-          type: "post",
-          url: GO_URLS.transfer,
-          params,
-        });
-        if (!res) return;
-        this.$emit("update");
-        ElMessage.success("划转成功");
-        this.$emit("closePopup");
-      },
-      500,
-      false
-    ),
-    allIn() {
-      this.formData.amount = this.content.balance;
-    },
-  },
-});
-</script>
-<style lang="scss">
-.transfer-pass {
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-    margin: 0;
-  }
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.transfer-pass {
-  background: #ffffff;
-  margin-top: -18px;
-  .head {
-    line-height: 60px;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--sy-black);
-    text-align: center;
-    border-bottom: 1px solid #f0f1f5;
-  }
-  .form-collection {
-    .content {
-      height: 56px;
-      background: #f8f8f8;
-      border-radius: 4px;
-      font-size: 14px;
-      line-height: 56px;
-      color: #a6a6a6;
-      display: flex;
-      align-items: center;
-      margin-bottom: 20px;
-
-      img {
-        width: 30px;
-        height: 30px;
-        margin-left: 22px;
-        margin-right: 11px;
-      }
-
-      .pass-name {
-        color: #000000;
-        margin-left: 20px;
-        width: 320px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .pass-type {
-        margin-left: auto;
-        margin-right: 23px;
-        color: var(--sy-black);
-      }
-    }
-
-    :deep(.el-button--primary) {
-      width: 100%;
-      height: 40px;
-      line-height: 40px;
-      padding: 0;
-      //background-color: var(--sy-blue);
-    }
-
-    .amount-item {
-      position: relative;
-      .balance,
-      :deep(.all-btn) {
-        position: absolute;
-        font-size: 14px;
-        font-weight: normal;
-      }
-      .balance {
-        right: 50px;
-        line-height: 16px;
-        top: 10px;
-        color: #e2e2e2;
-        padding-right: 12px;
-        border-right: 1px solid #e2e2e2;
-      }
-      :deep(.all-btn) {
-        right: -16px;
-        line-height: 35px;
-        padding: 0;
-      }
-    }
-  }
-  .tip-wrapper {
-    font-size: 12px;
-    color: #565656;
-    line-height: 17px;
-
-    .title {
-      color: #ff6268;
-      margin-bottom: 8px;
-    }
-
-    .tip {
-      margin-bottom: 6px;
-    }
-  }
-}
-</style>

src/views/pass/PassList/TransferPass.vue

-<template>
-  <div class="transfer-pass">
-    <div class="form">
-      <div class="content">
-        <img
-          src="/images/newProductList/pass.png"
-        />
-        已选择
-        <span class="pass-name" :title="content.name">{{ content.name }}</span>
-        <span class="pass-type">{{ content.type === 1 ? "NFT" : "FT" }}</span>
-      </div>
-      <el-form :rules="rules" :model="formData">
-        <el-form-item label="收币地址" prop="to">
-          <syDialogInput
-            v-model:value="formData.to"
-            placeholder="填写收币地址"
-          />
-        </el-form-item>
-        <el-form-item
-          class="amount-item"
-          label="转账数量"
-          prop="amount"
-          v-if="content.type === 0"
-        >
-          <div class="amount-item">
-            <syDialogInput
-              type="number"
-              :disabled="amountDisable"
-              v-model:value.number="formData.amount"
-              placeholder="填写转账数量"
-            ></syDialogInput>
-            <span class="balance">可转 {{ content.balance }} FT</span>
-            <syButton
-              class="all-btn"
-              mode="elementBtn"
-              style="top: 2px"
-              type="text"
-              @click="allIn"
-              >全部</syButton
-            >
-          </div>
-        </el-form-item>
-      </el-form>
-      <syButton
-        @click="submit"
-        type="primary"
-        :disabled="disabled"
-        mode="elementBtn"
-        style="margin-top: 18px; margin-bottom: 20px"
-        >确定</syButton
-      >
-    </div>
-    <div class="tip-wrapper">
-      <p class="title">提示</p>
-      <p class="tip">1、因区块链交易会有延迟，转账时间约1~10分钟</p>
-      <p class="tip">2、提币前请务必确认转账地址是否正确</p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { $ajax } from "@/service";
-import { debounce, GO_URLS, syButton, syDialogInput } from "cqk-sy-ui";
-import { ElMessage, ElButton, ElInput, ElForm, ElFormItem } from "element-plus";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    ElButton,
-    ElInput,
-    ElForm,
-    ElFormItem,
-    syButton,
-    syDialogInput,
-  },
-  props: ["content"],
-  data() {
-    return {
-      formData: {
-        to: "",
-        amount: "" as any,
-      },
-      rules: {
-        to: [{ required: true, message: "请输入资产名称", trigger: "blur" }],
-        amount: [
-          { required: true, message: "请输入资产数量", trigger: "blur" },
-        ],
-      },
-      amountDisable: false,
-    };
-  },
-  watch: {
-    "content.type": {
-      handler(val) {
-        if (val === 1) {
-          this.formData = {
-            ...this.formData,
-            amount: 1,
-          };
-        }
-      },
-      immediate: true,
-    },
-  },
-  computed: {
-    disabled() {
-      return (
-        this.formData.to === "" ||
-        Number(this.formData.amount) <= 0 ||
-        this.formData.amount === ""
-      );
-    },
-  },
-  methods: {
-    submit: debounce(
-      async function (this: any) {
-        const params = Object.assign({}, this.formData, {
-          pass_id: this.content.id,
-        });
-        const res = await $ajax({
-          type: "post",
-          url: GO_URLS.transfer,
-          params,
-        });
-        if (!res) return;
-        this.$emit("update");
-        ElMessage.success("转账成功");
-        this.$emit("closePopup");
-      },
-      500,
-      false
-    ),
-    allIn() {
-      this.formData.amount = this.content.balance;
-    },
-  },
-});
-</script>
-<style lang="scss">
-.transfer-pass {
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-    margin: 0;
-  }
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.transfer-pass {
-  background: #ffffff;
-  margin-top: -18px;
-  .head {
-    line-height: 60px;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--sy-black);
-    text-align: center;
-    border-bottom: 1px solid #f0f1f5;
-  }
-  .form {
-    white-space: nowrap;
-
-    .content {
-      height: 56px;
-      background: #f8f8f8;
-      border-radius: 4px;
-      font-size: 14px;
-      line-height: 56px;
-      color: #a6a6a6;
-      display: flex;
-      align-items: center;
-      margin-bottom: 20px;
-
-      img {
-        width: 30px;
-        height: 30px;
-        margin-left: 22px;
-        margin-right: 11px;
-      }
-
-      .pass-name {
-        color: #000000;
-        margin-left: 20px;
-        width: 320px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .pass-type {
-        margin-left: auto;
-        margin-right: 23px;
-        color: var(--sy-black);
-      }
-    }
-
-    :deep(.el-form-item) {
-      margin-bottom: 20px;
-
-      .el-form-item__label {
-        line-height: 35px;
-        &:before {
-          margin-right: 10px;
-        }
-        padding-right: 22px;
-      }
-      .el-form-item__content {
-        .el-input {
-          width: 420px;
-          height: 35px;
-          line-height: 35px;
-          input::-webkit-outer-spin-button,
-          　　 input::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-          }
-          　　 input[type="number"] {
-            -moz-appearance: textfield;
-          }
-
-          .el-input__inner {
-            height: 35px;
-            line-height: 35px;
-          }
-        }
-      }
-      .el-form-item__error {
-        padding-left: 0px;
-      }
-      .el-input__icon {
-        line-height: 35px;
-      }
-    }
-    :deep(.el-button--primary) {
-      width: 100%;
-      height: 40px;
-      line-height: 40px;
-      padding: 0;
-      //background-color: var(--sy-blue);
-    }
-
-    .amount-item {
-      position: relative;
-      .balance,
-      :deep(.all-btn) {
-        position: absolute;
-        font-size: 14px;
-        font-weight: normal;
-      }
-      .balance {
-        right: 50px;
-        line-height: 16px;
-        top: 10px;
-        color: #e2e2e2;
-        padding-right: 12px;
-        border-right: 1px solid #e2e2e2;
-      }
-      :deep(.all-btn) {
-        right: -16px;
-        line-height: 35px;
-        padding: 0;
-      }
-    }
-  }
-  .tip-wrapper {
-    font-size: 12px;
-    color: #565656;
-    line-height: 17px;
-
-    .title {
-      color: #ff6268;
-      margin-bottom: 8px;
-    }
-
-    .tip {
-      margin-bottom: 6px;
-    }
-  }
-}
-</style>

src/views/pass/PassList/index.vue

-<template>
-  <div class="h-full flex flex-col">
-    <Search v-model:query="query" :showCreateAsset="true"></Search>
-    <div class="flex-grow overflow-hidden list-table">
-      <div
-        class="h-full"
-        v-if="loading"
-        v-loading="loading"
-        element-loading-text="加载中..."
-      ></div>
-      <pass-list-table
-        v-if="!loading"
-        :pass-list="passList"
-        @nextPage="nextPage"
-        @update="updateSinglePass"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { $ajax } from "@/service";
-import { GO_URLS, syButton } from "cqk-sy-ui";
-import { defineComponent } from "vue";
-import Search from "./Search.vue";
-import PassListTable from "./PassListTable.vue";
-
-export default defineComponent({
-  components: {
-    PassListTable,
-    Search,
-    syButton,
-  },
-  data() {
-    return {
-      query: {
-        // 查询通证列表的查询条件
-        type: 0,
-        identifier: "",
-        amount_sort: 0,
-      },
-      page: 1,
-      page_size: 50,
-      passList: [] as any, // 查询到的通证列表
-      total: 0,
-      loading: true,
-    };
-  },
-  async mounted() {
-    this.loading = true;
-    await this.getList(true);
-    this.loading = false;
-  },
-  watch: {
-    query() {
-      this.getList(true);
-    },
-  },
-  methods: {
-    /**
-     * @param refresh 当查询条件改变时传入整个列表刷新，否则查询数据添加到 passList
-     */
-    async getList(refresh: any) {
-      if (refresh) {
-        this.page = 1;
-      }
-      const params = Object.assign({}, this.query, {
-        page: this.page,
-        page_size: this.page_size,
-      });
-      let newParams = params as any;
-      if (params.identifier === "") {
-        const { identifier, ...restResult } = params;
-        newParams = restResult;
-      }
-      const res = await $ajax({
-        type: "get",
-        url: GO_URLS.passList,
-        params: newParams,
-      });
-      if (res) {
-        this.total = res.data.total;
-        if (refresh) {
-          this.passList = res.data.results || [];
-        } else {
-          this.passList = this.passList.concat(res.data.results);
-        }
-      }
-    },
-    /**
-     * 滚动加载通证列表
-     */
-    async nextPage() {
-      if (this.total > this.page * this.page_size) {
-        this.page += 1;
-        await this.getList(false);
-      }
-    },
-    async updateSinglePass(id: any, balance: any) {
-      let times = 5;
-      let i = setInterval(async () => {
-        times -= 1;
-        const res = await $ajax({
-          type: "get",
-          url: GO_URLS.pass,
-          params: {
-            id,
-          },
-        });
-        if ((res && res.data.balance !== balance) || times <= 0) {
-          this.passList.forEach((item: any, index: number) => {
-            if (item.id === id) {
-              const list = [this.passList];
-              list[index].balance = res?.data.balance;
-              this.passList = list;
-            }
-          });
-          clearInterval(i);
-        }
-      }, 1000 * 5);
-    },
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.list-table {
-  margin-top: 21px;
-  margin-left: 13px;
-  margin-right: 11px;
-}
-</style>

src/views/pass/TransferRecord/TransferRecordList.vue

-<template>
-  <syTable
-    height="100%"
-    :data="transferList"
-    :columns="columns"
-    v-if="transferList.length > 0"
-    show-overflow-tooltip
-  >
-    <template #pass_name="props">
-      <div class="overflow-hidden overflow-ellipsis cursor-pointer" @click="toProve(props)">
-        {{ props.pass_name }}
-      </div>
-    </template>
-    <template #identifier="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ props.identifier }}
-      </div>
-    </template>
-    <template #to="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ props.to }}
-      </div>
-    </template>
-    <template #amount="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ props.amount }}
-      </div>
-    </template>
-    <template #create_time="props">
-      <div class="overflow-hidden overflow-ellipsis">
-        {{ formatTime(props.create_time) }}
-      </div>
-    </template>
-    <template #status="props">
-      <div class="flex items-center">
-        <syButton mode="issuing" v-if="props.status === 1">划转中</syButton>
-        <syButton mode="issuedSuccess" v-else-if="props.status === 2"
-          >划转成功</syButton
-        >
-        <syButton v-else-if="props.status === 3" mode="issuedFailed"
-          >划转失败</syButton
-        >
-        <span
-          v-if="props.status === 3"
-          @click="reIssue(props)"
-          class="iconfont2 icon-re cursor-pointer"
-          style="color: rgb(103, 169, 255); margin-left: 3px"
-        ></span>
-      </div>
-    </template>
-  </syTable>
-  <div class="empty" v-if="transferList.length <= 0">
-    <img
-      src="/images/pass/empty.png"
-    />
-    <span>搜索无结果</span>
-  </div>
-</template>
-
-<script lang="ts">
-import { $ajax } from "@/service";
-import { globalState } from "@/store/state";
-import { debounce, GO_URLS, syTable, formatTime, syButton } from "cqk-sy-ui";
-import { ElMessage } from "element-plus";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  props: ["transferList"],
-  emits: ["update", "nextPage"],
-  components: {
-    syTable,
-    syButton,
-  },
-  watch: {
-    transferList(newV) {
-      if (newV.length > 0) {
-      }
-    },
-  },
-  data() {
-    return {
-      columns: [
-        {
-          minWidth: "30",
-        },
-        {
-          label: "转账名称",
-          prop: "pass_name",
-          slotName: "pass_name",
-          showOverflowTooltip: true,
-          minWidth: "150",
-        },
-        {
-          label: "资产标识",
-          prop: "identifier",
-          slotName: "identifier",
-          showOverflowTooltip: true,
-          minWidth: "150",
-        },
-        {
-          label: "划转地址",
-          prop: "to",
-          slotName: "to",
-          showOverflowTooltip: true,
-          minWidth: "250",
-        },
-        {
-          label: "划转数量",
-          prop: "amount",
-          slotName: "amount",
-          showOverflowTooltip: true,
-          minWidth: "100",
-        },
-        {
-          label: "划转时间",
-          prop: "create_time",
-          showOverflowTooltip: true,
-          slotName: "create_time",
-          minWidth: "180",
-        },
-        {
-          label: "划转状态",
-          prop: "status",
-          slotName: "status",
-          minWidth: "100",
-        },
-      ],
-      passShow: false, // 显示转账弹窗
-      curItem: {},
-    };
-  },
-  computed: {
-    tableHeight() {
-      return window.innerHeight - 145;
-    },
-  },
-  mounted() {
-    this.addScrollListener();
-  },
-  beforeUnmount() {
-    const wrap = document.querySelector(
-      ".el-scrollbar__wrap"
-    ) as HTMLDivElement | null;
-    wrap && (wrap.onscroll = null);
-  },
-  methods: {
-    addScrollListener() {
-      this.$nextTick(() => {
-        const wrap = document.querySelector(
-          ".el-scrollbar__wrap"
-        ) as HTMLDivElement | null;
-        wrap &&
-          (wrap.onscroll = debounce(
-            (event: Event) => {
-              const target = event.target as HTMLDivElement;
-              if (
-                target.offsetHeight + target.scrollTop >=
-                target.scrollHeight
-              ) {
-                console.log("bottom");
-                this.next();
-              }
-            },
-            500,
-            false
-          ));
-      });
-    },
-    formatTime,
-    toProve(item: any) {
-      window.open(
-        `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.pass_id}&evm_tx_hash=${item.pass_hash}&from=client`
-      );
-    },
-    reIssue: debounce(
-      async function (this: any, content: any) {
-        const res = await $ajax({
-          type: "post",
-          url: GO_URLS.reTransfer,
-          params: {
-            id: content.id,
-          },
-        });
-        if (!res) return;
-        ElMessage.success("重新转账成功");
-        this.$emit("update");
-      },
-      500,
-      false
-    ),
-    next() {
-      this.$emit("nextPage");
-    },
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.text-btn {
-  color: var(--sy-blue) !important;
-  font-size: 12px;
-  font-weight: normal;
-  outline: none !important;
-  border: none !important;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.empty {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: calc(100vh - 145px);
-
-  img {
-    width: 134px;
-    height: 113px;
-    margin-bottom: 6px;
-  }
-
-  span {
-    font-size: 14px;
-    color: var(--sy-gray);
-    line-height: 20px;
-  }
-}
-</style>

src/views/pass/TransferRecord/index.vue

-<template>
-  <div class="h-full flex flex-col">
-    <search
-      v-model:query="query"
-      search-placeholder="搜索资产标识"
-      :show-create-asset="false"
-    ></search>
-    <div class="flex-grow overflow-hidden list-table">
-      <div
-        class="h-full"
-        v-if="loading"
-        v-loading="loading"
-        element-loading-text="加载中..."
-      ></div>
-      <transfer-record-list
-        v-if="!loading"
-        @nextPage="nextPage"
-        :transfer-list="transferList"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import SearchVue from "../PassList/Search.vue";
-import TransferRecordList from "./TransferRecordList.vue";
-import { GO_URLS } from "cqk-sy-ui";
-import { $ajax } from "@/service";
-
-export default defineComponent({
-  data() {
-    return {
-      query: {
-        // 查询通证列表的查询条件
-        type: 0,
-        identifier: "",
-        amount_sort: 0,
-      },
-      page: 1,
-      page_size: 50,
-      transferList: [], // 查询到的通证列表
-      total: 0,
-      loading: true,
-    };
-  },
-  components: {
-    Search: SearchVue,
-    TransferRecordList,
-  },
-  async mounted() {
-    await this.getList(true);
-    this.loading = false;
-  },
-  watch: {
-    query() {
-      this.getList(true);
-    },
-  },
-  methods: {
-    /**
-     * @param refresh 当查询条件改变时传入整个列表刷新，否则查询数据添加到 passList
-     */
-    async getList(refresh: any) {
-      if (refresh) {
-        this.page = 1;
-      }
-      const params = Object.assign({}, this.query, {
-        page: this.page,
-        page_size: this.page_size,
-      });
-      let newParams = params as any;
-      if (params.identifier === "") {
-        const { identifier, ...restResult } = params;
-        newParams = restResult;
-      }
-      const res = await $ajax({
-        type: "get",
-        url: GO_URLS.transferList,
-        params: newParams,
-      });
-      if (res) {
-        this.total = res.data.total;
-        if (refresh) {
-          this.transferList = res.data.results || [];
-        } else {
-          this.transferList = this.transferList.concat(res.data.results);
-        }
-      }
-    },
-    /**
-     * 滚动加载通证列表
-     */
-    async nextPage() {
-      if (this.total > this.page * this.page_size) {
-        this.page += 1;
-        await this.getList(false);
-      }
-    },
-  },
-});
-</script>
-
-<style scoped>
-.list-table {
-  margin-top: 21px;
-  margin-left: 13px;
-  margin-right: 11px;
-}
-</style>

vite.config.ts

@@ -38,9 +38,9 @@ export default defineConfig({
       output: {
         manualChunks: {
           __SignIn: ["./src/views/SignIn.vue"],
-          __recycleBin: ["./src/views/category/recycleBin.vue"],
-          __templateManagement: ["./src/views/category/templateManagement.vue"],
-          __tracingManagement: ["./src/views/category/tracingManagement/index.vue"],
+          __recycleBin: ["./src/views/Tracing/recycleBin.vue"],
+          __templateManagement: ["./src/views/Tracing/templateManagement.vue"],
+          __tracingManagement: ["./src/views/Tracing/tracingManagement/index.vue"],
           // __copyrightManagement: ["./src/views/copyrightManagement/index.vue"],
           // __draftBox: ["./src/views/draftBox/index.vue"],
           __CollectionManagement: [