Skip to content

D
dexfilter-web-nuxt3
Commit 3bc7e4c9 by haojie
Options

1

parent 6ace3e19
Showing with 243 additions and 161 deletions
a-disst.zip 0 → 100644
File added
app/router.options.ts
...@@ -17,7 +17,7 @@ export default <RouterConfig>{ ...@@ -17,7 +17,7 @@ export default <RouterConfig>{
{ {
name: 'tokenList', name: 'tokenList',
path: '/:chain?/:page(\\d+)?', path: '/:chain?/:page(\\d+)?',
component: () => import('~/views/token/TokenList.vue'), component: () => import('~/views/token/CustomTokenList.vue'),
meta: { hasSearch: true, hasRollToken: true, footer: true }, meta: { hasSearch: true, hasRollToken: true, footer: true },
}, },
], ],
......
nuxt.config.ts
...@@ -59,7 +59,7 @@ export default defineNuxtConfig({ ...@@ -59,7 +59,7 @@ export default defineNuxtConfig({
rollupOptions: { rollupOptions: {
output: { output: {
manualChunks: { manualChunks: {
'tdesign-vue-next': ['tdesign-vue-next'], TdesignVueNext: ['tdesign-vue-next'],
}, },
}, },
}, },
......
package-lock.json
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
"nuxt-svgo": "^1.1.0", "nuxt-svgo": "^1.1.0",
"qrcode": "^1.5.1", "qrcode": "^1.5.1",
"tdesign-icons-vue-next": "^0.1.7", "tdesign-icons-vue-next": "^0.1.7",
"tdesign-vue-next": "^0.24.9", "tdesign-vue-next": "^0.25.0",
"vue-clipboard3": "^1.0.1", "vue-clipboard3": "^1.0.1",
"vue-i18n": "^9.2.2" "vue-i18n": "^9.2.2"
}, },
...@@ -8345,6 +8345,11 @@ ...@@ -8345,6 +8345,11 @@
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
}, },
"node_modules/mitt": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
"integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
},
"node_modules/mkdir": { "node_modules/mkdir": {
"version": "0.0.2", "version": "0.0.2",
"resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz", "resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz",
...@@ -11540,9 +11545,9 @@ ...@@ -11540,9 +11545,9 @@
} }
}, },
"node_modules/tdesign-vue-next": { "node_modules/tdesign-vue-next": {
"version": "0.24.9", "version": "0.25.0",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.9.tgz", "resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.25.0.tgz",
"integrity": "sha512-If4dTQCkMLN4u1GqlNKUjrt9WPEaDVcI4yD4lukzSObb9SXza2UBBcWFJHp4pqcNRZNtszHmRgogylozeZGK8w==", "integrity": "sha512-5apMUOhEuyLqRyNnOPgVANbmVMMJ4zQ4UQtPGMav2aHhP35pgQgTThYk/sAZhOtkIPuHTHStW6vteYvFzlGYNg==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.14.8", "@babel/runtime": "^7.14.8",
"@popperjs/core": "^2.9.3", "@popperjs/core": "^2.9.3",
...@@ -11552,6 +11557,7 @@ ...@@ -11552,6 +11557,7 @@
"@types/validator": "^13.6.3", "@types/validator": "^13.6.3",
"dayjs": "^1.9.7", "dayjs": "^1.9.7",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"mitt": "^3.0.0",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"tdesign-icons-vue-next": "^0.1.5", "tdesign-icons-vue-next": "^0.1.5",
"tinycolor2": "^1.4.2", "tinycolor2": "^1.4.2",
...@@ -20046,6 +20052,11 @@ ...@@ -20046,6 +20052,11 @@
} }
} }
}, },
"mitt": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
"integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
},
"mkdir": { "mkdir": {
"version": "0.0.2", "version": "0.0.2",
"resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz", "resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz",
...@@ -22445,9 +22456,9 @@ ...@@ -22445,9 +22456,9 @@
} }
}, },
"tdesign-vue-next": { "tdesign-vue-next": {
"version": "0.24.9", "version": "0.25.0",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.9.tgz", "resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.25.0.tgz",
"integrity": "sha512-If4dTQCkMLN4u1GqlNKUjrt9WPEaDVcI4yD4lukzSObb9SXza2UBBcWFJHp4pqcNRZNtszHmRgogylozeZGK8w==", "integrity": "sha512-5apMUOhEuyLqRyNnOPgVANbmVMMJ4zQ4UQtPGMav2aHhP35pgQgTThYk/sAZhOtkIPuHTHStW6vteYvFzlGYNg==",
"requires": { "requires": {
"@babel/runtime": "^7.14.8", "@babel/runtime": "^7.14.8",
"@popperjs/core": "^2.9.3", "@popperjs/core": "^2.9.3",
...@@ -22457,6 +22468,7 @@ ...@@ -22457,6 +22468,7 @@
"@types/validator": "^13.6.3", "@types/validator": "^13.6.3",
"dayjs": "^1.9.7", "dayjs": "^1.9.7",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"mitt": "^3.0.0",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"tdesign-icons-vue-next": "^0.1.5", "tdesign-icons-vue-next": "^0.1.5",
"tinycolor2": "^1.4.2", "tinycolor2": "^1.4.2",
......
package.json
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
"nuxt-svgo": "^1.1.0", "nuxt-svgo": "^1.1.0",
"qrcode": "^1.5.1", "qrcode": "^1.5.1",
"tdesign-icons-vue-next": "^0.1.7", "tdesign-icons-vue-next": "^0.1.7",
"tdesign-vue-next": "^0.24.9", "tdesign-vue-next": "^0.25.0",
"vue-clipboard3": "^1.0.1", "vue-clipboard3": "^1.0.1",
"vue-i18n": "^9.2.2" "vue-i18n": "^9.2.2"
} }
......
views/token/newList.vue → views/token/CustomTokenList.vue
<template> <template>
<div class=""> <div>
<table class="filter-table-home"> <div class="custom-affixed-head">
<colgroup> <table>
<col style="width: auto" /> <thead>
<col style="" /> <tr class="firstHead">
<col style="" /> <th colspan="5">基本工资</th>
<col style="" /> <th colspan="3">基础性绩效</th>
<col style="" /> <th colspan="1">奖励性绩效</th>
<col style="" /> <th colspan="1" rowspan="2">绩效考核奖</th>
<col style="" /> <th colspan="1" rowspan="2">上年度绩效工资</th>
<col style="" /> <th colspan="1" rowspan="2">上年度绩效考核奖</th>
<col style="" /> <th colspan="1" rowspan="2">X项目小计</th>
<col style="" /> <th colspan="1" rowspan="2">上年度X项目小计</th>
<col style="" /> <th colspan="1" rowspan="2">房贴</th>
<col style="" /> <th colspan="1" rowspan="2">德育导师</th>
</colgroup> <th colspan="1" rowspan="2">临时补发</th>
<thead> <th colspan="2" rowspan="2">应发工资</th>
<tr class="firstHead"> </tr>
<th colspan="5">基本工资</th> <tr class="twoHead">
<th colspan="3">基础性绩效</th> <th colspan="2">岗位工资</th>
<th colspan="1">奖励性绩效</th> <th>薪级工资</th>
<th colspan="1" rowspan="2">绩效考核奖</th> <th>临时性补贴</th>
<th colspan="1" rowspan="2">上年度绩效工资</th> <th>小计</th>
<th colspan="1" rowspan="2">上年度绩效考核奖</th> <th>岗位津贴</th>
<th colspan="1" rowspan="2">X项目小计</th> <th>生活补贴</th>
<th colspan="1" rowspan="2">上年度X项目小计</th> <th>小计</th>
<th colspan="1" rowspan="2">房贴</th> <th>院聘</th>
<th colspan="1" rowspan="2">德育导师</th> </tr>
<th colspan="1" rowspan="2">临时补发</th> </thead>
<th colspan="2" rowspan="2">应发工资</th> </table>
</tr> </div>
<tr class="twoHead"> <div class="custom-home-table">
<th colspan="2">岗位工资</th> <table class="filter-table-home">
<th>薪级工资</th> <colgroup>
<th>临时性补贴</th> <col style="width: auto" />
<th>小计</th> <col style="" />
<th>岗位津贴</th> <col style="" />
<th>生活补贴</th> <col style="" />
<th>小计</th> <col style="" />
<th>院聘</th> <col style="" />
</tr> <col style="" />
</thead> <col style="" />
<tbody> <col style="" />
<tr v-for="item in arr1" :key="item"> <col style="" />
<td colspan="2" align="center">{{ item.one }}</td> <col style="" />
<td>{{ item.one }}</td> <col style="" />
<td>{{ item.one }}</td> </colgroup>
<td>{{ item.one }}</td> <thead>
<td>{{ item.one }}</td> <tr class="firstHead">
<td>{{ item.one }}</td> <th colspan="5">基本工资</th>
<td>{{ item.one }}</td> <th colspan="3">基础性绩效</th>
<td>{{ item.one }}</td> <th colspan="1">奖励性绩效</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">绩效考核奖</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">上年度绩效工资</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">上年度绩效考核奖</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">X项目小计</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">上年度X项目小计</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">房贴</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">德育导师</th>
<td>{{ item.one }}</td> <th colspan="1" rowspan="2">临时补发</th>
<td colspan="2" align="center">16</td> <th colspan="2" rowspan="2">应发工资</th>
</tr> </tr>
</tbody> <tr class="twoHead">
</table> <th colspan="2">岗位工资</th>
<th>薪级工资</th>
<th>临时性补贴</th>
<th>小计</th>
<th>岗位津贴</th>
<th>生活补贴</th>
<th>小计</th>
<th>院聘</th>
</tr>
</thead>
<tbody>
<tr v-for="item in arr1" :key="item">
<td colspan="2" align="center">{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td colspan="2" align="center">16</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</template> </template>
...@@ -82,31 +114,47 @@ for (let i = 0; i < arr1.length; i++) { ...@@ -82,31 +114,47 @@ for (let i = 0; i < arr1.length; i++) {
</script> </script>
<style lang="less"> <style lang="less">
.filter-table-home { .custom-affixed-head {
border: 1px solid #f5f5f5; position: sticky;
border-width: 1px 0px 0px 1px; top: 0;
border-collapse: collapse; table {
width: 100%; thead {
color: #909399; th {
thead { border: 1px solid #f5f5f5;
position: sticky; border-width: 0px 1px 1px 0px;
top: 0; color: red;
background: white; }
.firstHead {
} }
} }
} }
td { .custom-home-table {
border: 1px solid #f5f5f5; overflow-y: auto;
border-width: 0px 1px 1px 0px; .filter-table-home {
padding: 10px; border: 1px solid #f5f5f5;
height: 50px; border-width: 1px 0px 0px 1px;
text-align: center; border-collapse: collapse;
font-size: 12px; width: 100%;
color: #606266; color: #909399;
} min-width: 1000px;
th { td {
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
border-width: 0px 1px 1px 0px; border-width: 0px 1px 1px 0px;
padding: 10px;
height: 50px;
text-align: center;
font-size: 12px;
color: #606266;
}
th {
border: 1px solid #f5f5f5;
border-width: 0px 1px 1px 0px;
}
thead {
background: white;
white-space: nowrap;
.firstHead {
}
}
}
} }
</style> </style>
views/token/TokenFilter.vue
...@@ -105,39 +105,48 @@ ...@@ -105,39 +105,48 @@
{{ $t('home.pirceRange') }}： {{ $t('home.pirceRange') }}：
</div> </div>
<div class="value"> <div class="value">
<t-radio-group class="custom-group-type-3" v-model="formData.range"> <div class="custom-form-item3">
<t-switch <t-switch
class="pre-switch2" class="pre-switch2"
v-model="formData.isRise" v-model="formData.isRise"
size="large" size="large"
:label="['+', '-']" :label="['+', '-']"
></t-switch> ></t-switch>
<ClientOnly <div>
><t-select <ClientOnly
class="custom-select-home-range" ><t-select
v-model="formData.priceRangeTime" class="custom-select-home-range"
:popup-props="{ overlayClassName: 'select_home_range_box' }" v-model="formData.priceRangeTime"
> :popup-props="{ overlayClassName: 'select_home_range_box' }"
<t-option
v-for="item in Time_price_range_options"
:key="item.value"
:value="item.value"
:label="item.label"
> >
<div class="item-box"> <t-option
<div>{{ item.label }}</div> v-for="item in Time_price_range_options"
</div> :key="item.value"
</t-option> :value="item.value"
</t-select> :label="item.label"
</ClientOnly> >
<t-radio-button <div class="item-box">
v-for="item in PRICE_RANGE_OPTIONS" <div>{{ item.label }}</div>
:value="item.value" </div>
:key="item" </t-option>
@click="ReverseBtn('range', item.value)" </t-select>
>{{ item.label }}</t-radio-button </ClientOnly>
</div>
</div>
<div>
<t-radio-group
class="custom-group-type-3"
v-model="formData.range"
> >
</t-radio-group> <t-radio-button
v-for="item in PRICE_RANGE_OPTIONS"
:value="item.value"
:key="item"
@click="ReverseBtn('range', item.value)"
>{{ item.label }}</t-radio-button
>
</t-radio-group>
</div>
</div> </div>
</div> </div>
<div class="custom-form-item"> <div class="custom-form-item">
...@@ -574,11 +583,6 @@ watch(formData, (v) => { ...@@ -574,11 +583,6 @@ watch(formData, (v) => {
text-align: center; text-align: center;
} }
} }
.custom-select-home-range {
.t-input__inner {
font-size: 12px;
}
}
} }
.custom-group-type-1 { .custom-group-type-1 {
margin-left: -2px; margin-left: -2px;
...@@ -586,7 +590,9 @@ watch(formData, (v) => { ...@@ -586,7 +590,9 @@ watch(formData, (v) => {
.custom-group-type-2 { .custom-group-type-2 {
margin-left: 72px; margin-left: 72px;
} }
.custom-group-type-3 { .custom-form-item3 {
display: flex;
align-items: center;
.pre-switch2 { .pre-switch2 {
background-color: var(--td--main-btn-color-1); background-color: var(--td--main-btn-color-1);
width: 63px; width: 63px;
...@@ -597,6 +603,25 @@ watch(formData, (v) => { ...@@ -597,6 +603,25 @@ watch(formData, (v) => {
text-align: center; text-align: center;
} }
} }
.custom-select-home-range {
margin-left: 12px;
width: 50px;
border-radius: 5px;
.t-input {
border-radius: 5px;
margin: 0;
padding: 0 2px;
}
.t-input__suffix {
margin-left: 0;
}
.t-input__inner {
font-size: 12px;
}
}
.custom-group-type-3 {
margin-left: 20px;
}
} }
.pre-switch { .pre-switch {
width: 63px; width: 63px;
......
views/token/TokenList.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<FilterBtns @filterChange="filterChange"></FilterBtns> <FilterBtns @filterChange="filterChange"></FilterBtns>
<div class="token-list-wrapper"> <div class="token-list-wrapper">
<t-table <t-table
row-key="index" rowKey="tbname"
hover hover
:onRowClick="handleRowClick" :onRowClick="handleRowClick"
:row-class-name="getRowClassName" :row-class-name="getRowClassName"
...@@ -131,7 +131,6 @@ const getTableList = async () => { ...@@ -131,7 +131,6 @@ const getTableList = async () => {
}); });
if (result.list.length) { if (result.list.length) {
TableFilter(result); TableFilter(result);
loading.value = false;
if (isFirst.value) { if (isFirst.value) {
// 通知右侧请求接口 // 通知右侧请求接口
RightInfo.value.token = result.list[0].token; RightInfo.value.token = result.list[0].token;
...@@ -139,9 +138,8 @@ const getTableList = async () => { ...@@ -139,9 +138,8 @@ const getTableList = async () => {
RightInfo.value.r24h = result.list[0].r24h; RightInfo.value.r24h = result.list[0].r24h;
isFirst.value = false; isFirst.value = false;
} }
} else {
resultData.list = [];
} }
loading.value = false;
} catch (e) { } catch (e) {
loading.value = false; loading.value = false;
} finally { } finally {
...@@ -208,8 +206,8 @@ watch( ...@@ -208,8 +206,8 @@ watch(
); );
// 表格数据过滤方法 // 表格数据过滤方法
const TableFilter = (result: any) => { const TableFilter = (result: any) => {
if ('list' in result) { if ('list' in result && result.list.length) {
result.list.forEach((item, index) => { result.list.forEach((item: any, index: number) => {
item.index = index + 1; item.index = index + 1;
item.up = '$' + parseCoinAmount(item.up); item.up = '$' + parseCoinAmount(item.up);
// 加上$符号后，无法排序，故加上原始vn // 加上$符号后，无法排序，故加上原始vn
...@@ -224,7 +222,7 @@ const TableFilter = (result: any) => { ...@@ -224,7 +222,7 @@ const TableFilter = (result: any) => {
item.r24h = parseFloat(item.r24h).toFixed(3); item.r24h = parseFloat(item.r24h).toFixed(3);
// txn // txn
}); });
resultData.list = result.list; resultData.list = JSON.parse(JSON.stringify(result.list));
resultData.total = result.dataCount; resultData.total = result.dataCount;
} else { } else {
resultData.list = []; resultData.list = [];
...@@ -232,27 +230,27 @@ const TableFilter = (result: any) => { ...@@ -232,27 +230,27 @@ const TableFilter = (result: any) => {
}; };
// 预取数据 // 预取数据
// const { refresh } = await useLazyFetch( const { refresh } = await useLazyFetch(
// () => `http://156.247.9.93:9501/v1${chain.value}/index`, () => `http://156.247.9.93:9501/v1${chain.value}/index`,
// { {
// params: GlbFilter.value, params: GlbFilter.value,
// onResponse({ request, response, options }) { onResponse({ request, response, options }) {
// try { try {
// loading.value = false; loading.value = false;
// if (response._data.data) { if (response._data.data) {
// TableFilter(toRaw(response._data.data)); TableFilter(toRaw(response._data.data));
// } }
// } catch (e) { } catch (e) {
// resultData.list = []; resultData.list = [];
// console.log(e); console.log(e);
// } }
// return response._data; return response._data;
// }, },
// onRequestError({ error }) { onRequestError({ error }) {
// console.log(error); console.log(error);
// }, },
// } }
// ); );
// 当前选中的行数 // 当前选中的行数
const CurLineIndex = ref(0); const CurLineIndex = ref(0);
function next() { function next() {
...@@ -282,7 +280,9 @@ const Judgment = () => { ...@@ -282,7 +280,9 @@ const Judgment = () => {
// 添加行类名 // 添加行类名
const getRowClassName = ({ row, rowIndex }) => { const getRowClassName = ({ row, rowIndex }) => {
if (rowIndex === CurLineIndex.value) return 'custom-third-class-name'; if (rowIndex == CurLineIndex.value) {
return 'custom-third-class-name';
}
return ''; return '';
}; };
// tbName---流动池折线图传递参数 // tbName---流动池折线图传递参数
...@@ -332,10 +332,8 @@ const windowOpenFn = (e: any) => { ...@@ -332,10 +332,8 @@ const windowOpenFn = (e: any) => {
closeInterVal(); closeInterVal();
} }
}; };
// 全局loading
const glbloading = useGlbLogin();
// 表头吸顶 // 表头吸顶
const TableScroll = ref(null); const TableScroll = ref<any>(null);
onMounted(() => { onMounted(() => {
// 开启屏幕监听 // 开启屏幕监听
listenerWindow(windowOpenFn); listenerWindow(windowOpenFn);
...@@ -355,7 +353,6 @@ onMounted(() => { ...@@ -355,7 +353,6 @@ onMounted(() => {
zIndex: 10, zIndex: 10,
container: '#layout-scroll', container: '#layout-scroll',
}; };
glbloading.value = false;
}); });
onUnmounted(() => { onUnmounted(() => {
......
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