Skip to content

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

修复moreOperate展示

parent df94884b
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 164 deletions
src/views/category/components/DeletedTable.vue
View file @ e6ef10bd
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<template #query="props"> <template #query="props">
<syMoreOperate <syMoreOperate
teleport teleport
:width="156"
:list="queryOperateList" :list="queryOperateList"
@click-item="(v) => handleClickQuery(props, v)" @click-item="(v) => handleClickQuery(props, v)"
:disabled="props.status !== 2" :disabled="props.status !== 2"
...@@ -33,6 +34,7 @@ ...@@ -33,6 +34,7 @@
</template> </template>
<template #operate="props"> <template #operate="props">
<syMoreOperate <syMoreOperate
:width="156"
teleport teleport
:list="operateList" :list="operateList"
@click-item="(v) => handleClickOperate(props, v)" @click-item="(v) => handleClickOperate(props, v)"
......
src/views/category/components/IncrementalTable.vue
View file @ e6ef10bd
...@@ -185,6 +185,7 @@ ...@@ -185,6 +185,7 @@
<div class="block text-center firstLineCell"> <div class="block text-center firstLineCell">
<div class="icon-box"> <div class="icon-box">
<syMoreOperate <syMoreOperate
:width="156"
:list="getSearchOperateList(props)" :list="getSearchOperateList(props)"
:disabled="props.status !== 2" :disabled="props.status !== 2"
:teleport="true" :teleport="true"
...@@ -240,6 +241,7 @@ ...@@ -240,6 +241,7 @@
<template #operate="props"> <template #operate="props">
<div class="flex items-center justify-center firstLineCell"> <div class="flex items-center justify-center firstLineCell">
<syMoreOperate <syMoreOperate
:width="156"
:margin-left="-20" :margin-left="-20"
:list="getOperateList(props)" :list="getOperateList(props)"
:teleport="true" :teleport="true"
......
src/views/pass/PassList/Search.vue
View file @ e6ef10bd
<template> <template>
<div class="search-wrapper items-center"> <div class="search-wrapper items-center">
<syButton @click="goPassMaker">创建数字资产</syButton> <syButton @click="goPassMaker">创建数字资产</syButton>
<div class="choose-type ml-4"> <div class="choose-type ml-4">
<syMoreOperate <syMoreOperate
teleport teleport
:margin-top="10" :width="156"
:list="filterOperateList" :margin-top="10"
@click-item="handleClickFilterOperateItem" :list="filterOperateList"
> @click-item="handleClickFilterOperateItem"
<div class="chosen-type"> >
{{ query !== undefined && types[query.type] }} <div class="chosen-type">
<syIcon class="ml-4" name="iconzhankai" color="#1c2323" size="12px"></syIcon> {{ query !== undefined && types[query.type] }}
</div> <syIcon
</syMoreOperate> class="ml-4"
name="iconzhankai"
color="#1c2323"
size="12px"
></syIcon>
</div> </div>
<sySearch </syMoreOperate>
:value="searchInput" </div>
:set-value="(v: any) => searchInput = v" <sySearch
placeholder="搜索资产标识" :value="searchInput"
></sySearch> :set-value="(v: any) => searchInput = v"
<div class="sort"> placeholder="搜索资产标识"
<syMoreOperate ></sySearch>
teleport <div class="sort">
:margin-top="10" <syMoreOperate
:margin-left="-10" teleport
:list="sortOperateList" :width="156"
@click-item="handleclickSortOperateItem" :margin-top="10"
> :margin-left="-15"
<div class="chosen-sort whitespace-nowrap"> :list="sortOperateList"
<syIcon name="iconshaixuan" color="#1c2323" size="12px"></syIcon> @click-item="handleclickSortOperateItem"
<span class="mx-1">{{ query && sorts[query.amount_sort] }}</span> >
<syIcon name="iconzhankai" color="#1c2323" size="12px"></syIcon> <div class="chosen-sort whitespace-nowrap">
</div> <syIcon name="iconshaixuan" color="#1c2323" size="12px"></syIcon>
</syMoreOperate> <span class="mx-1">{{ query && sorts[query.amount_sort] }}</span>
<syIcon name="iconzhankai" color="#1c2323" size="12px"></syIcon>
</div> </div>
</syMoreOperate>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue" import { defineComponent } from "vue";
import { debounce, syButton, sySearch, syIcon, syMoreOperate } from "cqk-sy-ui" import { debounce, syButton, sySearch, syIcon, syMoreOperate } from "cqk-sy-ui";
export default defineComponent({ export default defineComponent({
components: { components: {
syButton, syButton,
syIcon, syIcon,
sySearch, sySearch,
syMoreOperate, syMoreOperate,
}, },
props: ['query', 'searchPlaceholder'], props: ["query", "searchPlaceholder"],
emits: ['update:query'], emits: ["update:query"],
data() { data() {
return { return {
types: ['全部', 'FT', 'NFT'], types: ["全部", "FT", "NFT"],
sorts: ['默认排序', '数量从低到高', '数量从高到低'], sorts: ["默认排序", "数量从低到高", "数量从高到低"],
searchInput: '', searchInput: "",
type: '全部', type: "全部",
sort: '默认排序', sort: "默认排序",
filterOperateList: [ filterOperateList: [
{ {
name: '全部', name: "全部",
value: '0', value: "0",
},
{
name: 'FT',
value: '1'
},
{
name: 'NFT',
value: '2'
}
],
sortOperateList: [
{ name: '默认排序', value: '默认排序' }, { name: '数量从低到高', value: '数量从低到高' }, { name: '数量从高到低', value: '数量从高到低' }
]
}
},
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) name: "FT",
console.log(Object.assign({}, this.query, { type: index }), 'show ') value: "1",
this.$emit('update:query', Object.assign({}, this.query, { type: index }))
}, },
selectSort(index: any) { {
this.$emit('update:query', Object.assign({}, this.query, { amount_sort: index })) name: "NFT",
value: "2",
}, },
goPassMaker() { ],
this.$router.push('/passMaker') sortOperateList: [
} { name: "默认排序", value: "默认排序" },
} { name: "数量从低到高", value: "数量从低到高" },
}) { name: "数量从高到低", value: "数量从高到低" },
],
};
},
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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.search-wrapper { .search-wrapper {
display: flex; display: flex;
margin-top: 29px; margin-top: 29px;
margin-left: 13px; margin-left: 13px;
.add-goods { .add-goods {
float: left; float: left;
margin-left: 21px; margin-left: 21px;
width: 120px; width: 120px;
height: 36px; height: 36px;
cursor: pointer; cursor: pointer;
background: rgba(30, 15, 255, 1); background: rgba(30, 15, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(30, 15, 255, 0.14), box-shadow: 0px 2px 10px 0px rgba(30, 15, 255, 0.14),
0px 2px 10px 0px rgba(30, 15, 255, 0.07); 0px 2px 10px 0px rgba(30, 15, 255, 0.07);
border-radius: 18px; border-radius: 18px;
padding: 0; padding: 0;
line-height: 36px; line-height: 36px;
text-align: center; text-align: center;
color: white; color: white;
font-size: 14px; font-size: 14px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
overflow: hidden; overflow: hidden;
} }
.iconfont { .iconfont {
font-size: 14px; font-size: 14px;
margin-right: 8px; margin-right: 8px;
color: white; color: white;
vertical-align: top; vertical-align: top;
}
} }
}
.choose-type { .choose-type {
font-size: 14px; font-size: 14px;
color: #353535; color: #353535;
position: relative; position: relative;
display: flex; display: flex;
margin-right: 4px; margin-right: 4px;
.chosen-type { .chosen-type {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 70px; width: 70px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
} }
.arrow-down { .arrow-down {
margin-left: auto; margin-left: auto;
width: 9px; width: 9px;
height: 4px; height: 4px;
}
} }
}
.sort { .sort {
margin-left: auto; margin-left: auto;
margin-right: 23px; margin-right: 23px;
font-size: 14px; font-size: 14px;
color: #1c2323; color: #1c2323;
display: flex; display: flex;
position: relative; position: relative;
.chosen-sort { .chosen-sort {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.icon-sort { .icon-sort {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-right: 10px; margin-right: 10px;
} }
.arrow-down { .arrow-down {
width: 9px; width: 9px;
height: 4px; height: 4px;
margin-left: 8px; margin-left: 8px;
} }
}
} }
}
} }
</style> </style>
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