Skip to content

S
source-trace-manage
Commit 02c58ee7 authored by chenqikuai's avatar chenqikuai
Browse files
Options

fix

parent fb73c34c
Hide whitespace changes
Inline Side-by-side
Showing with 1040 additions and 917 deletions
src/views/Main.vue
View file @ 02c58ee7
...@@ -39,6 +39,7 @@ const sideBarState = reactive({ ...@@ -39,6 +39,7 @@ const sideBarState = reactive({
name: "存证", name: "存证",
icon: "", icon: "",
path: "/categoryManage", path: "/categoryManage",
pathAlsoSelect: [],
fontSize: "14px", fontSize: "14px",
navigate: () => { navigate: () => {
router.push("/categoryManage"); router.push("/categoryManage");
...@@ -49,6 +50,7 @@ const sideBarState = reactive({ ...@@ -49,6 +50,7 @@ const sideBarState = reactive({
// fontClass: "icon-a-pass-activec9b87262", // fontClass: "icon-a-pass-activec9b87262",
slotName: "passList", slotName: "passList",
path: "/passList", path: "/passList",
pathAlsoSelect: ["/transferRecord"],
navigate: () => { navigate: () => {
router.push("/passList"); router.push("/passList");
}, },
...@@ -66,6 +68,15 @@ const sideBarState = reactive({ ...@@ -66,6 +68,15 @@ const sideBarState = reactive({
name: "管理", name: "管理",
icon: "", icon: "",
fontSize: "16px", fontSize: "16px",
pathAlsoSelect: [
"/choosePackage",
"/initPassword",
"/companyVerify",
"/editPassword",
"/editPhone",
"/personVerify",
"/editTemplate",
],
path: "/userCenter", path: "/userCenter",
navigate: () => { navigate: () => {
router.push("/userCenter"); router.push("/userCenter");
...@@ -86,7 +97,9 @@ const sideBarState = reactive({ ...@@ -86,7 +97,9 @@ const sideBarState = reactive({
}, },
}); });
const menuIndex = sideBarState.menuList.findIndex((i) => i.path === route.path); const menuIndex = sideBarState.menuList.findIndex(
(i) => i.path === route.path || i.pathAlsoSelect?.includes(route.path)
);
sideBarState.current = menuIndex; sideBarState.current = menuIndex;
const handleLogout = () => { const handleLogout = () => {
......
src/views/pass/Index.vue
View file @ 02c58ee7
<template> <template>
<div class="flex passIndex"> <div class="flex passIndex">
<div class="left flex-grow-0" style="width: 220px;"> <div class="left flex-grow-0" style="width: 220px">
<syBusinessMenu type="tongzheng" :current="current" :setCurrent="setCurrent"></syBusinessMenu> <syBusinessMenu
</div> type="tongzheng"
<div style="background-color: #F5F6FA;" class="flex-grow"> :current="current"
<router-view></router-view> :setCurrent="setCurrent"
</div> ></syBusinessMenu>
</div> </div>
<div style="background-color: #f5f6fa" class="flex-grow">
<router-view></router-view>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { router } from "@/router"; import { router } from "@/router";
import { syBusinessMenu } from "cqk-sy-ui" import { syBusinessMenu } from "cqk-sy-ui";
import { ref } from "vue"; import { ref } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const menuList = [ const menuList = [
{ {
path: '/passList', path: "/passList",
}, },
{ {
path: '/transferRecord' path: "/transferRecord",
} },
] ];
const route = useRoute(); const route = useRoute();
const current = ref(0);
const current = ref(0)
const setCurrent = (v: number) => { const setCurrent = (v: number) => {
current.value = v; current.value = v;
if (v === 0) { if (v === 0) {
router.push('/passList') router.push("/passList");
} else if (v === 1) { } else if (v === 1) {
router.push('/transferRecord') router.push("/transferRecord");
} }
}; };
(function () { (function () {
if (route.path) { if (route.path) {
const index = menuList.findIndex(i => i.path === route.path) const index = menuList.findIndex((i) => i.path === route.path);
current.value = index; current.value = index;
} }
})() })();
</script> </script>
<style> <style>
.passIndex * { .passIndex * {
box-sizing: content-box; box-sizing: content-box;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.left { .left {
box-sizing: content-box; box-sizing: content-box;
width: 237px; width: 237px;
flex-shrink: 0; flex-shrink: 0;
background: #ffffff; background: #ffffff;
} }
</style> </style>
\ No newline at end of file
src/views/pass/PassList/index.vue
View file @ 02c58ee7
<template> <template>
<div class="h-full flex flex-col"> <div class="h-full flex flex-col">
<Search v-model:query="query" :showCreateAsset="true"></Search> <Search v-model:query="query" :showCreateAsset="true"></Search>
<div class="flex-grow overflow-hidden list-table"> <div class="flex-grow overflow-hidden list-table">
<div class="h-full" v-if="loading" ref="loading"></div> <div class="h-full" v-if="loading" v-loading="loading"></div>
<pass-list-table <pass-list-table
v-if="!loading" v-if="!loading"
:pass-list="passList" :pass-list="passList"
@nextPage="nextPage" @nextPage="nextPage"
@update="updateSinglePass" @update="updateSinglePass"
/> />
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { $ajax } from "@/service"; import { $ajax } from "@/service";
import { GO_URLS, syButton } from "cqk-sy-ui"; import { GO_URLS, syButton } from "cqk-sy-ui";
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import Search from "./Search.vue" import Search from "./Search.vue";
import PassListTable from "./PassListTable.vue"; import PassListTable from "./PassListTable.vue";
import { ElLoading } from "element-plus";
type iService = ReturnType<typeof ElLoading.service>
export default defineComponent({ export default defineComponent({
components: { components: {
PassListTable, PassListTable,
Search, Search,
syButton, 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);
}, },
data() { },
return { methods: {
query: { /**
// 查询通证列表的查询条件 * @param refresh 当查询条件改变时传入整个列表刷新，否则查询数据添加到 passList
type: 0, */
identifier: '', async getList(refresh: any) {
amount_sort: 0 console.log(refresh, "show refresh");
}, if (refresh) {
page: 1, this.page = 1;
page_size: 50, }
passList: [] as any, // 查询到的通证列表 const params = Object.assign({}, this.query, {
total: 0, page: this.page,
loading: true, 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 mounted() { /**
this.loading = true; * 滚动加载通证列表
let service = null as unknown as iService; */
this.$nextTick(() => { async nextPage() {
service = ElLoading.service({ if (this.total > this.page * this.page_size) {
target: this.$refs.loading as HTMLElement this.page += 1;
}) await this.getList(false);
}) }
await this.getList(true);
this.loading = false;
service.close();
}, },
watch: { async updateSinglePass(id: any, balance: any) {
query() { let times = 5;
this.getList(true) let i = setInterval(async () => {
} times -= 1;
}, const res = await $ajax({
methods: { type: "get",
/** url: GO_URLS.pass,
* @param refresh 当查询条件改变时传入整个列表刷新，否则查询数据添加到 passList params: {
*/ id,
async getList(refresh: any) { },
if (refresh) { });
this.page = 1; if ((res && res.data.balance !== balance) || times <= 0) {
} this.passList.forEach((item: any, index: number) => {
const params = Object.assign( if (item.id === id) {
{}, const list = [this.passList];
this.query, list[index].balance = res?.data.balance;
{ this.passList = list;
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) { clearInterval(i);
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)
} }
}, 1000 * 5);
}, },
}) },
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.list-table { .list-table {
margin-top: 21px; margin-top: 21px;
margin-left: 13px; margin-left: 13px;
margin-right: 11px; margin-right: 11px;
} }
</style> </style>
src/views/pass/PassMaker/index.vue
View file @ 02c58ee7
<template> <template>
<div class="pass_maker"> <div class="pass_maker">
<div class="maker_header"> <div class="maker_header">
<div @click="goBack" class="back_btn"> <div @click="goBack" class="back_btn">
<Icon <Icon
name="iconsuyuanxiangqing-fanhui" name="iconsuyuanxiangqing-fanhui"
color="#1c2323" color="#1c2323"
size="16px" size="16px"
class="icon-back" class="icon-back"
></Icon> ></Icon>
<span>创建数字资产</span> <span>创建数字资产</span>
</div> </div>
</div>
<div class="maker_content" ref="submit">
<div class="content_header">创建数字资产</div>
<div class="content_tip">
支持视频、音频、图像、文件……支持各类型源文件上链
</div>
<div
class="upload_layout"
@click="initFileUpload"
v-if="uploadStatus == UploadStatusType.INIT"
>
<img
class="layout_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/upload.png"
/>
<div class="layout_status">上传源文件</div>
<div class="layout_tip">
源文件支持图片、文件、音频、视频、Word、Excel等…
</div> </div>
<div class="maker_content" ref="submit"> <div class="layout_tip">文件大小不超过10M</div>
<div class="content_header">创建数字资产</div> </div>
<div class="content_tip">支持视频、音频、图像、文件……支持各类型源文件上链</div> <div
<div class="upload_process"
class="upload_layout" v-if="fileData.name && uploadStatus != UploadStatusType.INIT"
@click="initFileUpload" >
v-if="uploadStatus == UploadStatusType.INIT" <div class="process_info">
> <div class="process_img">
<img <img
class="layout_icon" v-if="
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/upload.png" ['mp3', 'wma', 'wav', 'amr', 'm4a'].includes(
/> uploadFileType(fileData.name)
<div class="layout_status">上传源文件</div> )
<div class="layout_tip">源文件支持图片、文件、音频、视频、Word、Excel等…</div> "
<div class="layout_tip">文件大小不超过10M</div> class="layout_icon"
</div> src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/audio_icon.png"
<div />
class="upload_process" <img
v-if="fileData.name && uploadStatus != UploadStatusType.INIT" v-else-if="
> [
<div class="process_info"> 'wmv',
<div class="process_img"> 'asf',
<img 'asx',
v-if="['mp3', 'wma', 'wav', 'amr', 'm4a'].includes(uploadFileType(fileData.name))" 'rm',
class="layout_icon" 'rmvb',
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/audio_icon.png" 'mpg',
/> 'mpeg',
<img 'mp4',
v-else-if="['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mpg', 'mpeg', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'mkv', 'flv', 'vob'].includes(uploadFileType(fileData.name))" '3gp',
class="layout_icon" 'mov',
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/video_icon.png" 'm4v',
/> 'avi',
<img 'mkv',
v-else-if="['doc', 'docx'].includes(uploadFileType(fileData.name))" 'flv',
class="layout_icon" 'vob',
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/word_icon.png" ].includes(uploadFileType(fileData.name))
/> "
<img class="layout_icon"
v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(uploadFileType(fileData.name))" src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/video_icon.png"
class="layout_icon" />
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/img_icon.png" <img
/> v-else-if="
<img ['doc', 'docx'].includes(uploadFileType(fileData.name))
v-else-if="['xls', 'xlsx'].includes(uploadFileType(fileData.name))" "
class="layout_icon" class="layout_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/excel_icon.png" src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/word_icon.png"
/> />
<img <img
v-else-if="['pdf'].includes(uploadFileType(fileData.name))" v-else-if="
class="layout_icon" ['png', 'jpg', 'jpeg', 'gif'].includes(
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/pdf_icon.png" uploadFileType(fileData.name)
/> )
<img "
v-else-if="['ppt', 'pptx'].includes(uploadFileType(fileData.name))" class="layout_icon"
class="layout_icon" src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/img_icon.png"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/ppt_icon.png" />
/> <img
<img v-else-if='["txt" ].includes(uploadFileType(fileData.name))' class="layout_icon" src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.10/images/newProductList/txt_icon.png" alt=""> v-else-if="
<img ['xls', 'xlsx'].includes(uploadFileType(fileData.name))
v-else "
class="layout_icon" class="layout_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/pass.png" src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/excel_icon.png"
/> />
</div> <img
<div class="process_content"> v-else-if="['pdf'].includes(uploadFileType(fileData.name))"
<div class="content_info"> class="layout_icon"
<div class="file_name">{{ fileData.name }}</div> src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/pdf_icon.png"
<div class="file_size">{{ mapFileSize(fileData.size) }}</div> />
<div class="process_text">已完成 {{ uploadProcessCount }} %</div> <img
</div> v-else-if="
<el-progress :percentage="uploadProcessCount" :show-text="false"></el-progress> ['ppt', 'pptx'].includes(uploadFileType(fileData.name))
</div> "
<div class="process_icon"> class="layout_icon"
<img src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/ppt_icon.png"
v-if="uploadStatus == UploadStatusType.LOADING" />
class="layout_icon" <img
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/cancel.png" v-else-if="['txt'].includes(uploadFileType(fileData.name))"
/> class="layout_icon"
<img src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.10/images/newProductList/txt_icon.png"
v-if="uploadStatus == UploadStatusType.SUCCESS" alt=""
class="layout_icon" />
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/success.png" <img
/> v-else
<img class="layout_icon"
v-if="uploadStatus == UploadStatusType.FAIL" src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/pass.png"
class="layout_icon" />
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/fail.png" </div>
/> <div class="process_content">
</div> <div class="content_info">
</div> <div class="file_name">{{ fileData.name }}</div>
</div> <div class="file_size">{{ mapFileSize(fileData.size) }}</div>
<div class="chain_select"> <div class="process_text">已完成 {{ uploadProcessCount }} %</div>
<div>
<el-radio
v-for="item in chainSelectAction"
:key="item.value"
:label="item.value"
v-model="chainSelected"
:disabled="item.disabled"
>{{ item.text }}</el-radio>
</div>
<div
class="delete_upload"
v-if="uploadStatus == UploadStatusType.SUCCESS"
@click="deleteUpload"
>
<img
class="delete_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/cancel.png"
/>
<div class="tip_right">删除</div>
</div>
</div>
<el-form :rules="rules" :model="formData" class="elForm" label-position="top">
<el-form-item label="资产名称" prop="name">
<syDialogInput class="w-full" v-model:value="formData.name" placeholder="请输入资产名称"></syDialogInput>
</el-form-item>
<el-form-item label="资产类型" prop="type">
<sy-select v-model="formData.type" placeholder="请选择资产类型">
<sy-option key="NFT" label="NFT" value="1"></sy-option>
</sy-select>
</el-form-item>
<el-form-item label="资产数量" prop="amount">
<syDialogInput
class="w-full"
type="number"
:disabled="amountDisable"
v-model:value.number="formData.amount"
placeholder="请输入资产数量"
></syDialogInput>
</el-form-item>
</el-form>
<br />
<div class="category_add">
<div class="add_title">关联溯源</div>
<div class="add_content">
<img
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/pass.png"
/>
<span v-if="relationProof.name" class="relatived_text">已关联</span>
<span class="add_btn" @click="showCategory">
{{
relationProof.name ? relationProof.name :
'关联溯源'
}}
</span>
<Icon class="recycle" @click="showCategory" v-if="relationProof.name" name="icon-zhongchuan" color="#8E8D8D" size="12px"></Icon>
<span v-if="relationProof.name" @click="showCategory" class="re_add">重新关联</span>
<div v-if="relationProof.name" class="delete_add" @click="deleteAdd">
<img class="delete_icon" src="@/assets/images/newProductList/cancel.png" alt="">
<div class="tip_right">删除</div>
</div>
</div>
</div>
<el-button class="submit_btn" @click="submit" type="primary" :disabled="disabled">支付并发行</el-button>
<div class="process_tip tip_success" v-if="uploadStatus == UploadStatusType.SUCCESS">
<div class="tip_right">
预计扣除次数
<span class="fee">{{ fee }}</span> 次
</div>
</div> </div>
<el-progress
:percentage="uploadProcessCount"
:show-text="false"
></el-progress>
</div>
<div class="process_icon">
<img
v-if="uploadStatus == UploadStatusType.LOADING"
class="layout_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/cancel.png"
/>
<img
v-if="uploadStatus == UploadStatusType.SUCCESS"
class="layout_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/success.png"
/>
<img
v-if="uploadStatus == UploadStatusType.FAIL"
class="layout_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/fail.png"
/>
</div>
</div> </div>
</div>
<input type="file" ref="fileUpload" hidden @change="onInputUpload" /> <div class="chain_select">
<el-dialog <div>
title="关联溯源" <el-radio
v-model="dialogFormVisible" v-for="item in chainSelectAction"
custom-class="category_dialog" :key="item.value"
@closed="clearProofList" :label="item.value"
v-model="chainSelected"
:disabled="item.disabled"
>{{ item.text }}</el-radio
>
</div>
<div
class="delete_upload"
v-if="uploadStatus == UploadStatusType.SUCCESS"
@click="deleteUpload"
> >
<div class="category_input_box"> <img
<div @click="searchByKeyWords"> class="delete_icon"
<Icon src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/cancel.png"
name="iconzuzhigoujia-chengyuanguanli-chaxunchengyuan" />
color="#1c2323" <div class="tip_right">删除</div>
size="14px" </div>
class="search_icon" </div>
></Icon> <el-form
</div> :rules="rules"
<input :model="formData"
class="category_input" class="elForm"
type="text" label-position="top"
placeholder="输入溯源名称" >
v-model="searchKeywords" <el-form-item label="资产名称" prop="name">
/> <syDialogInput
</div> class="w-full"
<div class="floderList"> v-model:value="formData.name"
<ul placeholder="请输入资产名称"
v-if="proofList.length >= 1" ></syDialogInput>
class="infinite-list" </el-form-item>
v-infinite-scroll="pagechange" <el-form-item label="资产类型" prop="type">
infinite-scroll-delay="100" <sy-select v-model="formData.type" placeholder="请选择资产类型">
style="overflow:auto" <sy-option key="NFT" label="NFT" value="1"></sy-option>
> </sy-select>
<li </el-form-item>
v-for="i in proofList" <el-form-item label="资产数量" prop="amount">
class="infinite-list-item" <syDialogInput
@click="checkProof(i)" class="w-full"
>{{ i.name }}</li> type="number"
</ul> :disabled="amountDisable"
<div v-else class="search_empty"> v-model:value.number="formData.amount"
搜索无结果 placeholder="请输入资产数量"
</div> ></syDialogInput>
</div> </el-form-item>
</el-dialog> </el-form>
<br />
<div class="category_add">
<div class="add_title">关联溯源</div>
<div class="add_content">
<img
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/pass.png"
/>
<span v-if="relationProof.name" class="relatived_text">已关联</span>
<span class="add_btn" @click="showCategory">
{{ relationProof.name ? relationProof.name : "关联溯源" }}
</span>
<Icon
class="recycle"
@click="showCategory"
v-if="relationProof.name"
name="icon-zhongchuan"
color="#8E8D8D"
size="12px"
></Icon>
<span v-if="relationProof.name" @click="showCategory" class="re_add"
>重新关联</span
>
<div v-if="relationProof.name" class="delete_add" @click="deleteAdd">
<img
class="delete_icon"
src="https://cdn.jsdelivr.net/npm/trace-resource@1.0.9/images/newProductList/cancel.png"
alt=""
/>
<div class="tip_right">删除</div>
</div>
</div>
</div>
<div style="width: 587px">
<el-button
class="submit_btn"
style="box-sizing: border-box; height: 40px"
@click="submit"
type="primary"
:disabled="disabled"
>支付并发行</el-button
>
</div>
<div
class="process_tip tip_success"
v-if="uploadStatus == UploadStatusType.SUCCESS"
>
<div class="tip_right">
预计扣除次数
<span class="fee">{{ fee }}</span> 次
</div>
</div>
</div> </div>
<input type="file" ref="fileUpload" hidden @change="onInputUpload" />
<el-dialog
title="关联溯源"
v-model="dialogFormVisible"
custom-class="category_dialog"
@closed="clearProofList"
>
<div class="category_input_box">
<div @click="searchByKeyWords">
<Icon
name="iconzuzhigoujia-chengyuanguanli-chaxunchengyuan"
color="#1c2323"
size="14px"
class="search_icon"
></Icon>
</div>
<input
class="category_input"
type="text"
placeholder="输入溯源名称"
v-model="searchKeywords"
/>
</div>
<div class="floderList">
<ul
v-if="proofList.length >= 1"
class="infinite-list"
v-infinite-scroll="pagechange"
infinite-scroll-delay="100"
style="overflow: auto"
>
<li
v-for="i in proofList"
class="infinite-list-item"
@click="checkProof(i)"
>
{{ i.name }}
</li>
</ul>
<div v-else class="search_empty">搜索无结果</div>
</div>
</el-dialog>
</div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent } from "vue";
import { GO_URLS, syIcon, syBusinessForm, syDialogInput, sySelect, syOption } from 'cqk-sy-ui' import {
import { ElLoading, ElMessage, ElRadio, ElForm, ElFormItem, ElInput, ElProgress, ElOption, ElButton, ElDialog, } from 'element-plus' GO_URLS,
import { $ajax } from '@/service' syIcon,
syBusinessForm,
syDialogInput,
sySelect,
syOption,
syButton,
} from "cqk-sy-ui";
import {
ElLoading,
ElMessage,
ElRadio,
ElForm,
ElFormItem,
ElInput,
ElProgress,
ElOption,
ElButton,
ElDialog,
} from "element-plus";
import { $ajax } from "@/service";
let service = null as any; let service = null as any;
enum UploadStatusType { enum UploadStatusType {
INIT = 1, INIT = 1,
LOADING, LOADING,
SUCCESS, SUCCESS,
FAIL, FAIL,
} }
const proofInfo = { const proofInfo = {
"id": "0", id: "0",
"user_id": 1, user_id: 1,
"name": "name", name: "name",
"hash": "hash", hash: "hash",
"detail": "detail", detail: "detail",
"note": "note", note: "note",
"ext": "ext", ext: "ext",
"increment_num": 1, increment_num: 1,
"status": 1, status: 1,
"is_valid": 1, is_valid: 1,
"abandon_remark": "abandon_remark", abandon_remark: "abandon_remark",
"proof_version": "proof_version", proof_version: "proof_version",
"pass_hash": "pass_hash", pass_hash: "pass_hash",
"pass_id": 1, pass_id: 1,
"create_time": 1609430400, create_time: 1609430400,
"update_time": 1609430400 update_time: 1609430400,
} };
type ProofInfoType = typeof proofInfo type ProofInfoType = typeof proofInfo;
export default defineComponent({ export default defineComponent({
name: '', name: "",
components: { components: {
Icon: syIcon, Icon: syIcon,
ElRadio, ElForm, ElRadio,
ElFormItem, ElForm,
ElInput, ElFormItem,
ElProgress, ElInput,
ElOption, ElProgress,
ElButton, ElOption,
ElDialog, ElButton,
syBusinessForm, ElDialog,
syDialogInput, syBusinessForm,
sySelect, syDialogInput,
syOption, sySelect,
syOption,
},
data() {
return {
uploadProcessCount: 0,
UploadStatusType,
uploadStatus: 1,
fileData: {} as File,
fee: 1,
chainSelected: 1,
chainSelectAction: [
{
value: 1,
text: "Chain33",
disabled: false,
},
{
value: 2,
text: "IPFS",
disabled: true,
},
],
formData: {
name: "",
type: "",
amount: "" as any,
},
rules: {
name: [{ required: true, message: "请输入资产名称", trigger: "blur" }],
type: [{ required: true, message: "请选择资产类型", trigger: "blur" }],
amount: [
{ required: true, message: "请输入资产数量", trigger: "blur" },
],
fileUpload: [{ required: false, message: "点击上传", trigger: "blur" }],
},
amountDisable: false,
relationProof: {} as ProofInfoType,
dialogFormVisible: false,
proofList: [] as ProofInfoType[],
page: 1,
total: 0,
searchKeywords: "",
fileHash: "",
fileUrl: "",
inSubmit: false,
};
},
computed: {
disabled(): boolean {
return (
this.formData.name === "" ||
this.formData.type === "" ||
Number(this.formData.amount) <= 0 ||
isNaN(Number(this.formData.amount)) ||
this.formData.amount === ""
);
// || !this.relationProof.id
}, },
data() { },
return { watch: {
uploadProcessCount: 0, "formData.type": {
UploadStatusType, handler(val) {
uploadStatus: 1, if (Number(val) === 1) {
fileData: {} as File, this.formData = {
fee: 1, ...this.formData,
chainSelected: 1, amount: 1,
chainSelectAction: [ };
{ this.amountDisable = true;
value: 1, } else {
text: 'Chain33', this.formData = {
disabled: false ...this.formData,
}, amount: "",
{ };
value: 2, this.amountDisable = false;
text: 'IPFS',
disabled: true
},
],
formData: {
name: '',
type: '',
amount: '' as any
},
rules: {
name: [
{ required: true, message: '请输入资产名称', trigger: 'blur' },
],
type: [
{ required: true, message: '请选择资产类型', trigger: 'blur' }
],
amount: [
{ required: true, message: '请输入资产数量', trigger: 'blur' }
],
fileUpload: [
{ required: false, message: '点击上传', trigger: 'blur' }
],
},
amountDisable: false,
relationProof: {} as ProofInfoType,
dialogFormVisible: false,
proofList: [] as ProofInfoType[],
page: 1,
total: 0,
searchKeywords: '',
fileHash: '',
fileUrl: '',
inSubmit: false,
} }
},
}, },
computed: { inSubmit(newV) {
disabled(): boolean { if (newV === true) {
return this.formData.name === '' || service = ElLoading.service({
this.formData.type === '' || target: this.$refs.submit as HTMLElement,
Number(this.formData.amount) <= 0 || isNaN(Number(this.formData.amount)) || });
this.formData.amount === '' } else {
// || !this.relationProof.id service.close();
}, }
}, },
watch: { },
'formData.type': { methods: {
handler(val) { /**删除溯源 */
if (Number(val) === 1) { deleteAdd() {
this.formData = { this.relationProof = {} as ProofInfoType;
...this.formData, },
amount: 1 goBack() {
} history.go(-1);
this.amountDisable = true; },
} else { /**
this.formData = { * 根据文件大小计算费用fee
...this.formData, * @param size 文件大小
amount: '' */
} feeCalcu(size: number) {
this.amountDisable = false; return Math.ceil(size / (0.2 * 1024 * 1024)) + 1;
} },
} /**
}, * 格式化文件名
inSubmit(newV) { * @param text 文件名
if (newV === true) { */
service = ElLoading.service({ uploadFileType(text: string): string {
target: this.$refs.submit as HTMLElement, return text
}) .slice(text.lastIndexOf(".") + 1, text.length + 1)
} else { .toLocaleLowerCase();
service.close() },
} /**
* 格式化文件大小单位
* @param size 文件大小
*/
mapFileSize(size: number): string {
if (size / 1024 < 100) {
return (size / 1024).toFixed(2) + "K";
} else {
return (size / 1024 / 1024).toFixed(2) + "M";
}
},
/**
* 触发文件上传
*/
initFileUpload() {
(this.$refs.fileUpload as HTMLInputElement).click();
},
/**
* 文件上传后
* @param e 事件对象
*/
onInputUpload(e?: any) {
if (e) {
if (e.target.files[0].size > 10 * 1024 * 1024) {
ElMessage.warning(`文件最大不能超过10M`);
return;
}
if (
![
"mp3",
"wma",
"wav",
"amr",
"m4a",
"wmv",
"asf",
"asx",
"rm",
"rmvb",
"mpg",
"mpeg",
"mp4",
"3gp",
"mov",
"m4v",
"avi",
"mkv",
"flv",
"vob",
"doc",
"docx",
"png",
"jpg",
"jpeg",
"gif",
"xls",
"xlsx",
"pdf",
"ppt",
"pptx",
"txt",
].includes(this.uploadFileType(e.target.files[0].name))
) {
ElMessage.warning(`不支持此类型文件上传`);
return;
} }
this.uploadProcessCount = 100;
this.fileData = e.target.files[0];
this.uploadStatus = UploadStatusType.LOADING;
this.uploadStatus = UploadStatusType.SUCCESS;
this.fee = this.feeCalcu(e.target.files[0].size);
e.target.value = "";
}
}, },
methods: { /**
/**删除溯源 */ * 删除文件
deleteAdd(){ */
this.relationProof = {} as ProofInfoType deleteUpload() {
}, this.fileData = {} as File;
goBack() { this.uploadStatus = this.UploadStatusType.INIT;
history.go(-1) },
}, /**
/** * 弹出溯源选择框
* 根据文件大小计算费用fee */
* @param size 文件大小 showCategory() {
*/ this.getCateGoryList(this.page, "");
feeCalcu(size: number) { this.dialogFormVisible = true;
return Math.ceil(size / (0.2 * 1024 * 1024)) + 1 },
}, async getCateGoryList(page: number, key_words?: string) {
/** const res = await $ajax({
* 格式化文件名 type: "post",
* @param text 文件名 url: GO_URLS.list,
*/ params: {
uploadFileType(text: string): string { is_valid: 0,
return text.slice(text.lastIndexOf('.') + 1, text.length + 1).toLocaleLowerCase() page,
}, page_size: 15,
/** status: [2],
* 格式化文件大小单位 key_words,
* @param size 文件大小
*/
mapFileSize(size: number): string {
if (size / 1024 < 100) {
return (size / 1024).toFixed(2) + 'K'
} else {
return (size / 1024 / 1024).toFixed(2) + 'M'
}
},
/**
* 触发文件上传
*/
initFileUpload() {
(this.$refs.fileUpload as HTMLInputElement).click()
},
/**
* 文件上传后
* @param e 事件对象
*/
onInputUpload(e?: any) {
if (e) {
if (e.target.files[0].size > 10 * 1024 * 1024) {
ElMessage.warning(`文件最大不能超过10M`)
return
}
if (!["mp3", "wma", "wav", "amr", "m4a", "wmv", "asf", "asx", "rm", "rmvb", "mpg", "mpeg", "mp4", "3gp", "mov", "m4v", "avi", "mkv", "flv", "vob",
"doc", "docx", "png", "jpg", "jpeg", "gif", "xls", "xlsx", "pdf", "ppt", "pptx", "txt"].includes(this.uploadFileType(e.target.files[0].name))) {
ElMessage.warning(`不支持此类型文件上传`)
return
}
this.uploadProcessCount = 100
this.fileData = e.target.files[0]
this.uploadStatus = UploadStatusType.LOADING
this.uploadStatus = UploadStatusType.SUCCESS
this.fee = this.feeCalcu(e.target.files[0].size)
e.target.value = ''
}
},
/**
* 删除文件
*/
deleteUpload() {
this.fileData = {} as File
this.uploadStatus = this.UploadStatusType.INIT
},
/**
* 弹出溯源选择框
*/
showCategory() {
this.getCateGoryList(this.page, '')
this.dialogFormVisible = true
},
async getCateGoryList(page: number, key_words?: string) {
const res = await $ajax({
type: 'post',
url: GO_URLS.list,
params: {
is_valid: 0,
page,
page_size: 15,
status: [2],
key_words
}
})
if (res && res.data.results) {
this.proofList = this.proofList.concat(res.data.results)
}
},
/**
* 关键词查找溯源
*/
async searchByKeyWords() {
this.page = 1
this.proofList = []
await this.getCateGoryList(this.page, this.searchKeywords)
},
pagechange() {
this.page++
this.getCateGoryList(this.page, this.searchKeywords)
},
clearProofList() {
this.searchKeywords = ''
this.page = 1,
this.proofList = []
},
checkProof(proofInfo: ProofInfoType) {
this.dialogFormVisible = false
this.relationProof = proofInfo
}, },
/** });
* 最终提交 if (res && res.data.results) {
*/ this.proofList = this.proofList.concat(res.data.results);
async submit() { }
if (this.inSubmit) return },
this.inSubmit = true /**
/**如果有文件，则先文件上链 */ * 关键词查找溯源
if (this.fileData.name) { */
const fd = new FormData() async searchByKeyWords() {
fd.append('file_type', this.uploadFileType(this.fileData.name)) this.page = 1;
fd.append('chain_type', this.chainSelected.toString()) this.proofList = [];
fd.append('file_data', this.fileData) await this.getCateGoryList(this.page, this.searchKeywords);
const res = await $ajax({ },
type: "post", pagechange() {
url: GO_URLS.uploadChain, this.page++;
params: fd this.getCateGoryList(this.page, this.searchKeywords);
}); },
if (!res) { clearProofList() {
this.inSubmit = false this.searchKeywords = "";
return (this.page = 1), (this.proofList = []);
} else { },
this.fileUrl = res.data.url checkProof(proofInfo: ProofInfoType) {
this.fileHash = res.data.hash this.dialogFormVisible = false;
} this.relationProof = proofInfo;
} },
/**文件上链成功后再创建数字资产 */ /**
const params = Object.assign( * 最终提交
{}, */
{ type: Number(this.formData.type), name: this.formData.name, amount: this.formData.amount }, async submit() {
{ proof_id: this.relationProof.id }, if (this.inSubmit) return;
{ file_type: '', file_url: '' } this.inSubmit = true;
) /**如果有文件，则先文件上链 */
if (this.fileData.name) { if (this.fileData.name) {
params.file_type = this.uploadFileType(this.fileData.name) const fd = new FormData();
params.file_url = this.fileUrl fd.append("file_type", this.uploadFileType(this.fileData.name));
} fd.append("chain_type", this.chainSelected.toString());
const res = await $ajax({ fd.append("file_data", this.fileData);
type: "post", const res = await $ajax({
url: GO_URLS.pass, type: "post",
params url: GO_URLS.uploadChain,
}); params: fd,
this.inSubmit = false });
if (!res) return; if (!res) {
this.$emit('update'); this.inSubmit = false;
ElMessage.success('创建数字资产成功') return;
this.$emit('closePopup'); } else {
this.inSubmit = false this.fileUrl = res.data.url;
this.$router.push('/passList') this.fileHash = res.data.hash;
} }
} }
}) /**文件上链成功后再创建数字资产 */
const params = Object.assign(
{},
{
type: Number(this.formData.type),
name: this.formData.name,
amount: this.formData.amount,
},
{ proof_id: this.relationProof.id },
{ file_type: "", file_url: "" }
);
if (this.fileData.name) {
params.file_type = this.uploadFileType(this.fileData.name);
params.file_url = this.fileUrl;
}
const res = await $ajax({
type: "post",
url: GO_URLS.pass,
params,
});
this.inSubmit = false;
if (!res) return;
this.$emit("update");
ElMessage.success("创建数字资产成功");
this.$emit("closePopup");
this.inSubmit = false;
this.$router.push("/passList");
},
},
});
</script> </script>
<style> <style></style>
</style>
<style scoped lang='scss'> <style scoped lang="scss">
* { * {
box-sizing: content-box; box-sizing: content-box;
} }
.pass_maker { .pass_maker {
:deep(.el-input__inner) { :deep(.el-input__inner) {
height: 40px; height: 40px;
}
.maker_header {
display: flex;
align-items: center;
height: 50px;
background-color: #ffffff;
border: 1px solid #efefef;
color: #353535;
font-size: 16px;
padding: 0 47px;
.back_btn {
display: flex;
align-items: center;
cursor: pointer;
.icon-back {
margin-right: 24px;
}
}
}
.maker_content {
min-height: calc(100vh - 50px);
width: 587px;
margin: 0 auto;
padding: 37px 0 50px 0;
.content_header {
color: #292929;
font-size: 22px;
}
.content_tip {
color: #8b8b8b;
font-size: 12px;
margin-top: 2px;
}
.upload_layout {
width: 100%;
height: 158px;
border: 1px dashed #e2e2e2;
border-radius: 10px;
color: #8b8b8b;
text-align: center;
background-color: #f7f7f7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
cursor: pointer;
.layout_icon {
margin-bottom: 5px;
}
.layout_status {
color: var(--sy-blue);
font-weight: bold;
font-size: 14px;
line-height: 20px;
margin-bottom: 5px;
}
.layout_tip {
transform: scale(0.9);
font-size: 12px;
line-height: 17px;
}
} }
.maker_header { .upload_process {
margin: 20px 0 20px 0;
.process_info {
display: flex; display: flex;
align-items: center; align-items: center;
height: 50px; padding: 15px 18px;
background-color: #ffffff; box-shadow: 0px 2px 15px 0px #e7eef3;
border: 1px solid #efefef; .process_img {
color: #353535; img {
font-size: 16px; width: 24px;
padding: 0 47px; height: 24px;
.back_btn { }
}
.process_content {
flex: 1;
margin: 0 25px;
.content_info {
display: flex; display: flex;
align-items: center; justify-content: space-between;
cursor: pointer; font-size: 12px;
.icon-back { margin-bottom: 5px;
margin-right: 24px; color: #8b8b8b;
.file_name {
color: #353535;
width: 33.3%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
}
} }
} }
.maker_content { .process_tip {
min-height: calc(100vh - 50px); margin-top: 10px;
width: 587px; display: flex;
margin: 0 auto; justify-content: space-between;
padding: 37px 0 50px 0; font-size: 12px;
.content_header { }
color: #292929; .tip_fail {
font-size: 22px; .tip_left {
color: #ff4848;
} }
.content_tip { .tip_right {
color: #8b8b8b; color: var(--sy-blue);
font-size: 12px; cursor: pointer;
margin-top: 2px;
} }
.upload_layout { }
width: 100%; }
height: 158px; .chain_select {
border: 1px dashed #e2e2e2; display: flex;
border-radius: 10px; justify-content: space-between;
color: #8b8b8b; margin: 15px 0 15px 0;
text-align: center; .delete_upload {
background-color: #f7f7f7; color: #8e8d8d;
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: center; font-size: 14px;
justify-content: center; cursor: pointer;
margin-top: 20px; .delete_icon {
cursor: pointer; width: 17px;
.layout_icon { height: 17px;
margin-bottom: 5px; margin-right: 7px;
}
.layout_status {
color: var(--sy-blue);
font-weight: bold;
font-size: 14px;
line-height: 20px;
margin-bottom: 5px;
}
.layout_tip {
transform: scale(0.9);
font-size: 12px;
line-height: 17px;
}
} }
.upload_process { }
margin: 20px 0 20px 0; }
.process_info { .category_add {
display: flex; .add_content {
align-items: center; display: flex;
padding: 15px 18px; align-items: center;
box-shadow: 0px 2px 15px 0px #e7eef3; margin-top: 8px;
.process_img { img {
img { width: 30px;
width: 24px; height: 30px;
height: 24px; margin-right: 11px;
}
}
.process_content {
flex: 1;
margin: 0 25px;
.content_info {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-bottom: 5px;
color: #8b8b8b;
.file_name {
color: #353535;
width: 33.3%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.process_tip {
margin-top: 10px;
display: flex;
justify-content: space-between;
font-size: 12px;
}
.tip_fail {
.tip_left {
color: #ff4848;
}
.tip_right {
color: var(--sy-blue);
cursor: pointer;
}
}
} }
.chain_select { .relatived_text {
display: flex; color: #353535;
justify-content: space-between; font-size: 14px;
margin: 15px 0 15px 0; margin-right: 11px;
.delete_upload {
color: #8e8d8d;
display: flex;
align-items: center;
font-size: 14px;
cursor: pointer;
.delete_icon {
width: 17px;
height: 17px;
margin-right: 7px;
}
}
} }
.category_add { .add_btn {
.add_content { color: var(--sy-blue);
display: flex; font-size: 14px;
align-items: center; cursor: pointer;
margin-top: 8px;
img {
width: 30px;
height: 30px;
margin-right: 11px;
}
.relatived_text {
color: #353535;
font-size: 14px;
margin-right: 11px;
}
.add_btn {
color: var(--sy-blue);
font-size: 14px;
cursor: pointer;
}
.recycle {
margin-left: 10px;
}
.re_add {
color: #8E8D8D;
font-size: 12px;
margin-left: 2px;
cursor: pointer;
}
.delete_add {
margin-left: auto;
display: flex;
align-items: center;
color: #8E8D8D;
font-size: 14px;
cursor: pointer;
img {
width: 14px;
height: 14px;
margin-right: 4px;
}
}
}
} }
.submit_btn { .recycle {
margin-top: 30px; margin-left: 10px;
width: 100%;
} }
.tip_success { .re_add {
margin-top: 13px; color: #8e8d8d;
color: #1c2323; font-size: 12px;
font-size: 12px; margin-left: 2px;
text-align: center; cursor: pointer;
.fee {
color: #f6ad00;
font-size: 16px;
}
} }
.delete_add {
margin-left: auto;
display: flex;
align-items: center;
color: #8e8d8d;
font-size: 14px;
cursor: pointer;
img {
width: 14px;
height: 14px;
margin-right: 4px;
}
}
}
}
.submit_btn {
margin-top: 30px;
width: 100%;
}
.tip_success {
margin-top: 13px;
color: #1c2323;
font-size: 12px;
text-align: center;
.fee {
color: #f6ad00;
font-size: 16px;
}
} }
:deep(.el-select) { }
:deep(.el-select) {
width: 100%;
}
:deep(.category_dialog) {
width: 486px;
background-color: #fff;
.el-dialog__header {
margin-right: 0;
text-align: center;
border: 1px solid #f0f1f5;
}
.category_input_box {
position: relative;
height: 30px;
line-height: 30px;
border-radius: 4px;
background-color: #f7f9fb;
.search_icon {
position: absolute;
left: 15px;
cursor: pointer;
top: 8px;
}
.category_input {
box-sizing: border-box;
height: 30px;
line-height: 30px;
font-size: 14px;
width: 100%; width: 100%;
border: none;
outline: none;
padding: 0 38px;
border-radius: 4px;
background-color: #f7f9fb;
}
input::-webkit-input-placeholder {
color: #b9b9b9;
}
} }
:deep(.category_dialog) { .floderList {
width: 486px; margin-top: 15px;
background-color: #fff; .infinite-list {
.el-dialog__header { height: 300px;
margin-right: 0; padding: 0 15px;
text-align: center; list-style: none;
border: 1px solid #f0f1f5; .infinite-list-item {
} height: 30px;
.category_input_box { line-height: 30px;
position: relative; font-size: 14px;
height: 30px; overflow: hidden;
line-height: 30px; text-overflow: ellipsis;
border-radius: 4px; white-space: normal;
cursor: pointer;
&:hover {
background-color: #f7f9fb; background-color: #f7f9fb;
.search_icon { color: var(--sy-blue);
position: absolute; }
left: 15px;
cursor: pointer;
top: 8px;
}
.category_input {
box-sizing: border-box;
height: 30px;
line-height: 30px;
font-size: 14px;
width: 100%;
border: none;
outline: none;
padding: 0 38px;
border-radius: 4px;
background-color: #f7f9fb;
}
input::-webkit-input-placeholder {
color: #b9b9b9;
}
}
.floderList {
margin-top: 15px;
.infinite-list {
height: 300px;
padding: 0 15px;
list-style: none;
.infinite-list-item {
height: 30px;
line-height: 30px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
cursor: pointer;
&:hover {
background-color: #f7f9fb;
color: var(--sy-blue);
}
}
}
.search_empty {
box-sizing: border-box;
height: 300px;
padding-top: 10px;
text-align: center;
color: #C0C4CC;
}
} }
}
.search_empty {
box-sizing: border-box;
height: 300px;
padding-top: 10px;
text-align: center;
color: #c0c4cc;
}
} }
:deep(.el-tree-node__label) { }
overflow: hidden; :deep(.el-tree-node__label) {
text-overflow: ellipsis; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis;
white-space: nowrap;
}
:deep(.el-input) {
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
} }
:deep(.el-input) { input[type="number"] {
input::-webkit-outer-spin-button, -moz-appearance: textfield;
input::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"]{ -moz-appearance: textfield; }
} }
}
} }
</style> </style>
\ No newline at end of file
src/views/pass/TransferRecord/index.vue
View file @ 02c58ee7
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:show-create-asset="false" :show-create-asset="false"
></search> ></search>
<div class="flex-grow overflow-hidden list-table"> <div class="flex-grow overflow-hidden list-table">
<div class="h-full" v-if="loading" ref="loading"></div> <div class="h-full" v-if="loading" v-loading="loading"></div>
<transfer-record-list <transfer-record-list
v-if="!loading" v-if="!loading"
@nextPage="nextPage" @nextPage="nextPage"
...@@ -22,9 +22,6 @@ import SearchVue from "../PassList/Search.vue"; ...@@ -22,9 +22,6 @@ import SearchVue from "../PassList/Search.vue";
import TransferRecordList from "./TransferRecordList.vue"; import TransferRecordList from "./TransferRecordList.vue";
import { GO_URLS } from "cqk-sy-ui"; import { GO_URLS } from "cqk-sy-ui";
import { $ajax } from "@/service"; import { $ajax } from "@/service";
import { ElLoading } from "element-plus";
type iService = ReturnType<typeof ElLoading.service>;
export default defineComponent({ export default defineComponent({
data() { data() {
...@@ -47,15 +44,8 @@ export default defineComponent({ ...@@ -47,15 +44,8 @@ export default defineComponent({
TransferRecordList, TransferRecordList,
}, },
async mounted() { async mounted() {
let service = null as unknown as iService;
this.$nextTick(() => {
service = ElLoading.service({
target: this.$refs.loading as HTMLElement,
});
});
await this.getList(true); await this.getList(true);
this.loading = false; this.loading = false;
service.close();
}, },
watch: { watch: {
query() { query() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment