Issue #133: Done.

This commit is contained in:
chiayin
2023-09-21 15:10:29 +08:00
parent 0d930238dd
commit 040e8b707a
2 changed files with 24 additions and 3 deletions

View File

@@ -4,7 +4,7 @@
<div class="h-[calc(100%_-_48px)]"> <div class="h-[calc(100%_-_48px)]">
<p class="h2 pl-2 border-b mb-3">Sort</p> <p class="h2 pl-2 border-b mb-3">Sort</p>
<div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]"> <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
<div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index"> <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index">
<Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" @change="actListData"/> <Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" @change="actListData"/>
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label> <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
</div> </div>
@@ -13,13 +13,24 @@
</div> </div>
</template> </template>
<script> <script>
import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
export default { export default {
props: ['data', 'select'], props: ['data', 'select'],
data() { data() {
return { return {
sortData: [],
actList: this.select, actList: this.select,
} }
}, },
watch: {
data: {
handler: function(newValue) {
this.sortData = sortNumEngZhtw(newValue)
},
immediate: true, // 立即執行一次排序
},
},
methods: { methods: {
actListData() { actListData() {
this.$emitter.emit('actListData', this.actList); this.$emitter.emit('actListData', this.actList);

View File

@@ -4,7 +4,7 @@
<div class="h-[calc(100%_-_48px)]"> <div class="h-[calc(100%_-_48px)]">
<p class="h2 pl-2 border-b mb-3">Sort</p> <p class="h2 pl-2 border-b mb-3">Sort</p>
<div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]"> <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
<div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index"> <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index">
<RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" /> <RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" />
<label :for="index + act" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label> <label :for="index + act" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
</div> </div>
@@ -13,18 +13,27 @@
</div> </div>
</template> </template>
<script> <script>
import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
export default { export default {
props: ['title', 'select', 'data', 'category', 'task', 'isSubmit'], props: ['title', 'select', 'data', 'category', 'task', 'isSubmit'],
data() { data() {
return { return {
sortData: [],
localSelect: null, localSelect: null,
selectedRadio: null, selectedRadio: null,
} }
}, },
watch: { watch: {
data: {
handler: function(newValue) {
this.sortData = sortNumEngZhtw(newValue)
},
immediate: true, // 立即執行一次排序
},
task: function(newValue) { task: function(newValue) {
this.selectedRadio = newValue; this.selectedRadio = newValue;
} },
}, },
methods: { methods: {
actRadioData() { actRadioData() {
@@ -37,6 +46,7 @@ export default {
} }
}, },
created() { created() {
sortNumEngZhtw(this.sortData);
this.localSelect = this.isSubmit ? this.select : null; this.localSelect = this.isSubmit ? this.select : null;
this.selectedRadio = this.localSelect; this.selectedRadio = this.localSelect;
this.$emitter.on('reset', (data) => { this.$emitter.on('reset', (data) => {