changes

app/components/datatable/ScrollBox.vue

@@ -1,23 +1,29 @@
 <template>
-  <div :style="`max-height: ${maxheight}; overflow-y: auto;`">
+  <div
+    :style="{
+      maxHeight,
+      overflowY: 'auto',
+    }"
+  >
     <div
       v-for="(v, i) in rows"
       :key="i"
-      class="field is-grouped my-0"
+      class=""
     >
       <button
-        class="button is-white fs-14 font-normal w-full is-justify-content-start py-1.5"
+        class="button is-white rounded-none fs-14 font-normal w-full is-justify-content-space-between"
         type="button"
         @click="doClick(v, i)"
       >
         <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
         <span
           v-if="checked[i] && notick !== true"
-          class="icon has-text-primary"
+          class="icon right-3"
         >
           <Icon
             name="material-symbols:check-rounded"
             :size="17"
+            class="has-text-primary"
           />
         </span>
       </button>
@@ -82,85 +88,98 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["data", "name", "maxheight", "perpage", "sort", "selects", "keyval", "show", "notick"],
-  data() {
-    return {
-      currentPage: 1,
-      total: this.data.length,
-      rows: this.data.slice(0, this.perpage),
-      selected: [],
-      checked: {},
-      time: undefined,
-      array: [],
-    };
-  },
-  created() {
-    this.getdata();
-  },
-  watch: {
-    data: function (newVal) {
-      this.getdata();
-    },
-    selects: function (newVal) {
-      this.getSelect();
-    },
-  },
-  methods: {
-    getdata() {
-      this.currentPage = 1;
-      this.array = this.$copy(this.data);
-      if (this.sort) {
-        const f = {};
-        if (this.show?.time) {
-          f.create_time = "desc";
-        }
+<script setup>
+const props = defineProps({
+  data: Array,
+  name: String,
+  maxHeight: String,
+  perpage: Number,
+  sort: String,
+  selects: String,
+  keyval: String,
+  show: Object,
+  notick: Boolean,
+});
 
-        if (this.sort.startsWith("-")) {
-          f[this.sort.slice(1)] = "desc";
-        } else {
-          f[this.sort] = "asc";
-        }
+const emit = defineEmits(["selected"]);
+const { $copy, $multiSort, $remove } = useNuxtApp();
+const currentPage = ref(1);
+const total = ref(props.data.length);
+const rows = ref(props.data.slice(0, props.perpage));
+const selected = ref([]);
+const checked = ref({});
+const array = ref([]);
 
-        this.$multiSort(this.array, f);
-      }
-      this.rows = this.array.slice(0, this.perpage);
-      this.getSelect();
-    },
-    getSelect() {
-      if (!this.selects) return;
-      this.selected = [];
-      this.checked = {};
-      this.selects.map((v) => {
-        let idx = this.rows.findIndex((x) => x[this.keyval ? this.keyval : this.name] === v);
-        if (idx >= 0) {
-          this.selected.push(this.rows[idx]);
-          this.checked[idx] = true;
-        }
-      });
-    },
-    doClick(v, i, type) {
-      this.checked[i] = this.checked[i] ? false : true;
-      this.checked = this.$copy(this.checked);
-      let idx = this.selected.findIndex((x) => x.id === v.id);
-      idx >= 0 ? this.$remove(this.selected) : this.selected.push(v);
-      this.$emit("selected", v, type);
-    },
-    handleScroll(e) {
-      const bottom = e.target.scrollHeight - e.target.scrollTop - 5 < e.target.clientHeight;
-      if (bottom) {
-        if (this.total ? this.total > this.rows.length : true) {
-          this.currentPage += 1;
-          let arr = this.array.filter(
-            (ele, index) => index >= (this.currentPage - 1) * this.perpage && index < this.currentPage * this.perpage,
-          );
-          this.rows = this.rows.concat(arr);
-        }
-      }
-    },
+getdata();
+
+watch(
+  () => props.data,
+  () => getdata(),
+  { deep: true },
+);
+
+watch(
+  () => props.selects,
+  (newVal) => {
+    console.log("props.selects changed", newVal);
+    getSelect();
   },
-};
+  { deep: true },
+);
+
+function getdata() {
+  currentPage.value = 1;
+  array.value = $copy(props.data);
+  if (props.sort) {
+    const f = {};
+    if (props.show?.time) {
+      f.create_time = "desc";
+    }
+
+    if (props.sort.startsWith("-")) {
+      f[props.sort.slice(1)] = "desc";
+    } else {
+      f[props.sort] = "asc";
+    }
+
+    $multiSort(array.value, f);
+  }
+  rows.value = array.value.slice(0, props.perpage);
+  getSelect();
+}
+
+function getSelect() {
+  if (!props.selects) return;
+  selected.value = [];
+  checked.value = {};
+  props.selects.map((v) => {
+    const idx = rows.value.findIndex((x) => x[props.keyval ? props.keyval : props.name] === v);
+    if (idx >= 0) {
+      selected.value.push(rows.value[idx]);
+      checked.value[idx] = true;
+    }
+  });
+}
+
+function doClick(v, i, type) {
+  checked.value = { [i]: true };
+  const idx = selected.value.findIndex((x) => x.id === v.id);
+  idx >= 0 ? $remove(selected.value) : selected.value.push(v);
+  emit("selected", v, type);
+}
+
+function handleScroll(e) {
+  const bottom = e.target.scrollHeight - e.target.scrollTop - 5 < e.target.clientHeight;
+  if (bottom) {
+    if (total.value ? total.value > rows.value.length : true) {
+      currentPage.value += 1;
+      let arr = array.value.filter(
+        (_, index) => index >= (currentPage.value - 1) * props.perpage && index < currentPage.value * props.perpage,
+      );
+      rows.value = rows.value.concat(arr);
+    }
+  }
+}
 </script>
 <style scoped>
 .button.is-ghost {