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