changes

2026-07-06 11:25:42 +07:00
parent f72af58d78
commit be0be49454
22 changed files with 301 additions and 391 deletions
--- a/app/components/datatable/ContextMenu.vue
+++ b/app/components/datatable/ContextMenu.vue
@@ -446,10 +446,10 @@ const store = useStore();
 const { colorchoice } = store;
 const errors = ref([]);
 const currentTab = ref("value");
-var pagedata = store[props.pagename];
-var fields = [];
-var currentField = $copy(props.field);
-var { label } = currentField;
+let pagedata = store[props.pagename];
+let fields = [];
+let currentField = $copy(props.field);
+let { label } = currentField;
 const showmodal = ref();
 const checkFilter = function () {};
 const getMenu = function () {
@@ -461,33 +461,33 @@ const getMenu = function () {
  return array;
 };
 var selectTab = getMenu()[0];
-var datatype = store.datatype;
-// var current = 1;
-// var value1 = undefined;
-// var value2 = undefined;
+let datatype = store.datatype;
+// let current = 1;
+// let value1 = undefined;
+// let value2 = undefined;
 const moneyunit = store.moneyunit;
 const radioType = store.datatype.find((v) => v.code === currentField.format);
-// var selectUnit = currentField.format === "number" ? moneyunit.find((v) => v.detail === currentField.unit) : undefined;
-// var bgcolor = undefined;
-// var radioBGcolor = colorchoice.find((v) => v.code === "none");
-// var color = undefined;
-// var radioColor = colorchoice.find((v) => v.code === "none");
-// var textsize = undefined;
-// var radioSize = colorchoice.find((v) => v.code === "none");
-var minwidth = undefined;
-var radioWidth = colorchoice.find((v) => v.code === "none");
-var radioMaxWidth = colorchoice.find((v) => v.code === "none");
-var maxwidth = undefined;
-// var selectAlign = undefined;
-// var radioAlign = colorchoice.find((v) => v.code === "none");
-var radioTemplate = ref(colorchoice.find((v) => v.code === (currentField.template ? "option" : "none"))["code"]);
-// var selectPlacement = store.placement.find((v) => v.code === "is-right");
-// var selectScheme = store.colorscheme.find((v) => v.code === "is-primary");
-// var radioTooltip = store.colorchoice.find((v) => v.code === "none");
-// var selectField = undefined;
-// var tags = currentField.tags ? currentField.tags.map((v) => fields.find((x) => x.name === v)) : [];
-// var formula = currentField.formula ? currentField.formula : undefined;
-var decimal = currentField.decimal;
+// let selectUnit = currentField.format === "number" ? moneyunit.find((v) => v.detail === currentField.unit) : undefined;
+// let bgcolor = undefined;
+// let radioBGcolor = colorchoice.find((v) => v.code === "none");
+// let color = undefined;
+// let radioColor = colorchoice.find((v) => v.code === "none");
+// let textsize = undefined;
+// let radioSize = colorchoice.find((v) => v.code === "none");
+let minwidth = undefined;
+let radioWidth = colorchoice.find((v) => v.code === "none");
+let radioMaxWidth = colorchoice.find((v) => v.code === "none");
+let maxwidth = undefined;
+// let selectAlign = undefined;
+// let radioAlign = colorchoice.find((v) => v.code === "none");
+let radioTemplate = ref(colorchoice.find((v) => v.code === (currentField.template ? "option" : "none"))["code"]);
+// let selectPlacement = store.placement.find((v) => v.code === "is-right");
+// let selectScheme = store.colorscheme.find((v) => v.code === "is-primary");
+// let radioTooltip = store.colorchoice.find((v) => v.code === "none");
+// let selectField = undefined;
+// let tags = currentField.tags ? currentField.tags.map((v) => fields.find((x) => x.name === v)) : [];
+// let formula = currentField.formula ? currentField.formula : undefined;
+let decimal = currentField.decimal;
 let shortmenu = store.menuchoice.filter((x) =>
  currentField.format === "number"
    ? currentField.formula
@@ -498,7 +498,7 @@ let shortmenu = store.menuchoice.filter((x) =>
 var selectTab = shortmenu.find((v) => selectTab.code === v.code)
  ? selectTab
  : menuchoice.find((v) => v.code === "value");
-var search = undefined;
+let search = undefined;
 // if(selectTab.code==='value') {
 //  let self = this
 //  setTimeout(function() {self.$refs[currentField.name]? self.$refs[currentField.name].focus() : false}, 50)
--- a/app/components/datatable/CreateTemplate.vue
+++ b/app/components/datatable/CreateTemplate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="docid">
+  <div v-if="$id()">
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
@@ -74,17 +74,21 @@
          v-if="type.code !== 'tag'"
        >
          <label class="label">Outline</label>
-          <p class="control fs-14">
-            <b-radio
+          <div class="control fs-14 is-flex is-gap-2">
+            <label
              v-for="(v, i) in outlines"
              :key="i"
-              v-model="outline"
-              :native-value="v"
-              @input="changeType(v)"
+              class="radio"
            >
+              <input
+                v-model="outline"
+                @change="changeType(v)"
+                type="radio"
+                name="outline"
+              />
              {{ v.name }}
-            </b-radio>
-          </p>
+            </label>
+          </div>
        </div>
      </div>
    </div>
@@ -367,39 +371,41 @@
      </div>
    </template>
    <template v-else-if="tab.code === 'template'">
-      <div class="buttons has-addons mb-3">
-        <button
-          @click="copyContent()"
-          class="button is-primary is-light fs-14"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:content-copy-outline-rounded"
-              :size="18"
-            />
-          </span>
-          <span>Copy</span>
-        </button>
-        <button
-          @click="paste()"
-          class="button is-primary is-light fs-14"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:content-paste-rounded"
-              :size="18"
-            />
-          </span>
-          <span>Paste</span>
-        </button>
+      <div class="block">
+        <div class="buttons has-addons mb-3">
+          <button
+            @click="copyContent()"
+            class="button is-primary is-light fs-14"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:content-copy-outline-rounded"
+                :size="18"
+              />
+            </span>
+            <span>Copy</span>
+          </button>
+          <button
+            @click="paste()"
+            class="button is-primary is-light fs-14"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:content-paste-rounded"
+                :size="18"
+              />
+            </span>
+            <span>Paste</span>
+          </button>
+        </div>
+        <textarea
+          class="textarea fs-13 is-family-monospace"
+          rows="4"
+          v-model="text"
+          @dblclick="doCheck"
+        ></textarea>
      </div>
-      <textarea
-        class="textarea fs-13 is-family-monospace"
-        rows="4"
-        v-model="text"
-        @dblclick="doCheck"
-      ></textarea>
-      <p class="mt-5">
+      <div class="block">
        <span class="icon-text">
          <span class="fs-17 font-semibold">Replace</span>
          <span class="icon">
@@ -409,8 +415,8 @@
            />
          </span>
        </span>
-      </p>
-      <div class="field is-grouped mt-4">
+      </div>
+      <div class="field is-grouped">
        <div class="control">
          <label class="label">Đoạn text</label>
          <input
@@ -441,14 +447,12 @@
          </button>
        </div>
      </div>
-      <p class="mt-5">
-        <button
-          class="button is-primary has-text-white"
-          @click="changeTemplate()"
-        >
-          Áp dụng
-        </button>
-      </p>
+      <button
+        class="button is-primary has-text-white"
+        @click="changeTemplate()"
+      >
+        Áp dụng
+      </button>
    </template>
  </div>
 </template>
@@ -456,61 +460,61 @@
 import { ref } from "vue";
 const store = useStore();
 const { $id, $copy, $empty, $calc, $remove, $copyToClipboard } = useNuxtApp();
-var props = defineProps({
+const props = defineProps({
  pagename: String,
  field: Object,
 });
-var colorscheme = store.colorscheme;
-var colorchoice = store.colorchoice;
-var pageData = store[props.pagename];
-var field = props.field;
-var type = undefined;
-var size = undefined;
-var types = [
+let colorscheme = store.colorscheme;
+let colorchoice = store.colorchoice;
+let pageData = store[props.pagename];
+let field = props.field;
+let type = undefined;
+let size = undefined;
+const types = [
  { code: "span", name: "span" },
  { code: "tag", name: "tag" },
 ];
-var sizes = [
+const sizes = [
  { code: "is-small", name: "Nhỏ", value: "is-size-6" },
  { code: "is-normal", name: "Trung bình", value: "is-size-5" },
  { code: "is-medium", name: "Lớn", value: "is-size-4" },
 ];
-var shapes = [
+const shapes = [
  { code: "default", name: "Mặc định" },
  { code: "is-rounded", name: "Tròn góc" },
 ];
-var shape = undefined;
-var outlines = [
+let shape = undefined;
+const outlines = [
  { code: "default", name: "Mặc định" },
  { code: "is-outlined", name: "Outline" },
 ];
-var outline = undefined;
-var conditions = [
+let outline = undefined;
+const conditions = [
  { code: "no", name: "Không áp dụng" },
  { code: "yes", name: "Có áp dụng" },
 ];
-var condition = undefined;
+let condition = undefined;
 const tags = ref([]);
-var selected = undefined;
-var tabs = [
+let selected = undefined;
+const tabs = [
  { code: "selected", name: "Bước 1: Tạo nội dung" },
  { code: "condition", name: "Bước 2: Đặt điều kiện" },
  { code: "option", name: "Bước 3: Chọn màu, cỡ chữ" },
  { code: "template", name: "Bước 4: Mã lệnh & áp dụng" },
 ];
-var tab = ref(undefined);
-var tagsField = [];
-var errors = [];
-var expression = "";
-var text = ref(null);
-var radioBGcolor = undefined;
-var radioColor = undefined;
-var radioSize = undefined;
-var bgcolor = undefined;
-var color = undefined;
-var textsize = undefined;
-var source = undefined;
-var target = $copy(field.name);
+const tab = ref(undefined);
+let tagsField = [];
+let errors = [];
+let expression = "";
+const text = ref(null);
+let radioBGcolor = undefined;
+let radioColor = undefined;
+let radioSize = undefined;
+let bgcolor = undefined;
+let color = undefined;
+let textsize = undefined;
+let source = undefined;
+let target = $copy(field.name);

 const initData = function () {
  type = types.find((v) => v.code === "tag");
@@ -653,5 +657,4 @@ const getSpanClass = function (v) {
  return value;
 };
 initData();
-var docid = $id();
 </script>
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -167,26 +167,26 @@ function dynamicComponent(htmlString) {
    },
  });
 }
-var timer = undefined;
-var showPaging = ref(false);
-var totalRows = ref(0);
-var currentPage = 1;
-var displayFields = ref([]);
-var displayData = [];
-var pagedata = store[props.pagename];
+let timer = undefined;
+const showPaging = ref(false);
+const totalRows = ref(0);
+let currentPage = 1;
+const displayFields = ref([]);
+let displayData = [];
+let pagedata = store[props.pagename];
 let tablesetting = $copy(isEmpty(pagedata.tablesetting) ? store.tablesetting : pagedata.tablesetting);
 if (!Array.isArray(tablesetting)) {
  tablesetting = Object.values(tablesetting);
 }
-var perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
-var filters = $copy(pagedata.filters || []);
-var currentField;
-var filterData = [];
-var currentsetting;
-var scrollbar;
-var fields;
-var currentRow;
-var data = $copy(pagedata.data);
+let perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
+let filters = $copy(pagedata.filters || []);
+let currentField;
+let filterData = [];
+let currentsetting;
+let scrollbar;
+let fields;
+let currentRow;
+let data = $copy(pagedata.data);
 const showmodal = ref();
 watch(
  () => store[props.pagename],
@@ -428,7 +428,7 @@ const frontendFilter = function (newVal) {
    }
  };
  newVal = $copy(newVal);
-  var data = $copy(pagedata.data);
+  let data = $copy(pagedata.data);
  newVal
    .filter((m) => m.select || m.filter)
    .map((v) => {
@@ -487,14 +487,14 @@ const doSelect = function (value) {
  updateShow();
 };
 const doubleScroll = function (element) {
-  var _scrollbar = document.createElement("div");
+  const _scrollbar = document.createElement("div");
  _scrollbar.appendChild(document.createElement("div"));
  _scrollbar.style.overflow = "auto";
  _scrollbar.style.overflowY = "hidden";
  _scrollbar.firstChild.style.width = element.scrollWidth + "px";
  _scrollbar.firstChild.style.height = "1px";
  _scrollbar.firstChild.appendChild(document.createTextNode("\xA0"));
-  var running = false;
+  let running = false;
  _scrollbar.onscroll = function () {
    if (running) {
      running = false;
--- a/app/components/datatable/FilterOption.vue
+++ b/app/components/datatable/FilterOption.vue
@@ -204,7 +204,7 @@ export default {
    changeStyle() {
      let check = this.field.format === "number" ? this.checkExpression() : this.checkCondition();
      if (!check) return;
-      var row =
+      const row =
        this.field.format === "number"
          ? {
              expression: this.expression,
--- a/app/components/datatable/FormatOption.vue
+++ b/app/components/datatable/FormatOption.vue
@@ -36,7 +36,7 @@
        />
        <p
          class="fs-14 mt-1"
-          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+          :class="props.currentField.format === 'string' ? 'mb-1' : 'mb-2'"
        >
          <a
            class="has-text-primary mr-5"
@@ -74,7 +74,7 @@
        />
        <p
          class="fs-14 mt-1"
-          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+          :class="props.currentField.format === 'string' ? 'mb-1' : 'mb-2'"
        >
          <a
            class="has-text-primary mr-5"
@@ -112,7 +112,7 @@
        />
        <p
          class="fs-14 mt-1"
-          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+          :class="props.currentField.format === 'string' ? 'mb-1' : 'mb-2'"
        >
          <a
            class="has-text-primary mr-5"
@@ -148,7 +148,7 @@
        <span>Copy</span>
      </button>
      <button
-        @click="paste()"
+        @click="paste"
        class="button is-primary is-light fs-14"
      >
        <span class="icon">
@@ -164,7 +164,7 @@
      class="textarea fs-13 is-family-monospace"
      rows="4"
      v-model="script"
-      @change="checkScript()"
+      @change="checkScript"
      @dblclick="doCheck"
    ></textarea>
    <p class="mt-5">
@@ -193,19 +193,14 @@
        <input
          class="input"
          type="text"
-          placeholder=""
          v-model="target"
        />
      </div>
      <div class="control">
-        <label
-          class="label"
-          style="opacity: 0"
-          >Hidden</label
-        >
+        <label class="label is-sr-only">Hidden</label>
        <button
          class="button is-primary is-light"
-          @click="replace()"
+          @click="replace"
        >
          Replace
        </button>
@@ -225,22 +220,20 @@
    <p class="mt-4">
      <button
        class="button is-primary is-rounded"
-        @click="changeScript()"
+        @click="changeScript"
      >
        Cập nhật
      </button>
    </p>
  </template>
  <TableOption
-    v-bind="{ pagename }"
    v-else-if="sideBar === 'option'"
-  >
-  </TableOption>
+    v-bind="{ pagename }"
+  />
  <CreateTemplate
    v-else-if="sideBar === 'template'"
    v-bind="{ pagename, field: openField }"
-  >
-  </CreateTemplate>
+  />
 </template>
 <script setup>
 import CreateTemplate from "~/components/datatable/CreateTemplate";
@@ -252,21 +245,20 @@ const props = defineProps({
  currentField: Object,
  pagename: String,
 });
-var currentField = props.currentField;
-var openField = {};
-var bgcolorFilter = [];
-var colorFilter = [];
-var sizeFilter = [];
-var sideBar = ref();
-var script = undefined;
-var radio = undefined;
-var tabs = [
+let openField = {};
+let bgcolorFilter = [];
+let colorFilter = [];
+let sizeFilter = [];
+const sideBar = ref();
+let script = undefined;
+let radio = undefined;
+const tabs = [
  { code: "expression", name: "Biểu thức" },
  { code: "script", name: "Mã lệnh" },
 ];
 const tab = ref({ code: "expression", name: "Biểu thức" });
-var source = undefined;
-var target = $copy(currentField.name);
+let source = undefined;
+let target = $copy(props.currentField.name);

 const initData = function () {
  openField = props.event.field;
@@ -326,7 +318,7 @@ const changeScript = function () {
 };
 const doConditionFilter = function (v, type, id) {
  v.id = id;
-  let copy = $copy(currentField);
+  let copy = $copy(props.currentField);
  if (copy[type] ? Array.isArray(copy[type]) : false) {
    let idx = copy[type].findIndex((x) => x.id === id);
    idx >= 0 ? (copy[type][idx] = v) : copy[type].push(v);
--- a/app/components/datatable/NewField.vue
+++ b/app/components/datatable/NewField.vue
@@ -261,7 +261,7 @@ import { cloneDeep } from "es-toolkit";
 const emit = defineEmits(["modalevent"]);
 const store = useStore();
 const { $id, $copy, $empty, $stripHtml, $createField, $calc, $isNumber } = useNuxtApp();
-var props = defineProps({
+const props = defineProps({
  pagename: String,
  field: Object,
  filters: Object,
@@ -270,29 +270,29 @@ var props = defineProps({
 });
 const moneyunit = store.moneyunit || [];
 const datatype = store.datatype;
-var showmodal = ref();
-var pagedata = store[props.pagename];
-var selectUnit = moneyunit.find((v) => v.code === "one");
-var data = [];
-var current = 1;
-var filterData = [];
-var loading = false;
+const showmodal = ref();
+let pagedata = store[props.pagename];
+let selectUnit = moneyunit.find((v) => v.code === "one");
+let data = [];
+let current = 1;
+let filterData = [];
+let loading = false;
 const fieldTypes = [
  { code: "empty", name: "Tạo cột rỗng" },
  { code: "formula", name: "Tạo công thức" },
 ];
-var tags = [];
-var formula = undefined;
-var name = `f${$id().toLocaleLowerCase()}`;
-var label = undefined;
+let tags = [];
+let formula = undefined;
+let name = `f${$id().toLocaleLowerCase()}`;
+let label = undefined;
 const errors = ref([]);
-var selectType = fieldTypes.find((v) => v.code === "empty");
-var radioType = ref(datatype.find((v) => v.code === "string"));
-var fields = [];
-var options = undefined;
-var columns = $copy(pagedata.fields.filter((v) => v.format === "number"));
-var decimal = undefined;
-var choices = [
+const selectType = ref(fieldTypes.find((v) => v.code === "empty"));
+const radioType = ref(datatype.find((v) => v.code === "string"));
+let fields = [];
+let options = undefined;
+let columns = $copy(pagedata.fields.filter((v) => v.format === "number"));
+let decimal = undefined;
+const choices = [
  { code: "column", name: "Dùng cột dữ liệu" },
  { code: "function", name: "Dùng hàm số" },
 ];
@@ -303,10 +303,10 @@ const funcs = [
  { code: "min", name: "Min" },
  { code: "avg", name: "Avg" },
 ];
-var func = "sum";
-var placeholder = "Minh hoạ công thức: f10001 + f10002";
-var args = undefined;
-var operator = [
+let func = "sum";
+let placeholder = "Minh hoạ công thức: f10001 + f10002";
+let args = undefined;
+let operator = [
  { code: "+", name: "Cộng" },
  { code: "-", name: "Trừ" },
  { code: "*", name: "Nhân" },
--- a/app/components/datatable/TableSetting.vue
+++ b/app/components/datatable/TableSetting.vue
@@ -184,7 +184,7 @@ if (!Array.isArray(pagedata.tablesetting)) {
 const getDetail = (code) => tablesetting.find((v) => v.code === code)?.detail || "";
 const errors = ref([]);
 let radioNote = "no";
-var tablesetting = pagedata.tablesetting;
+let tablesetting = pagedata.tablesetting;
 let found = getDetail("note");
 if (found !== "@") radioNote = "yes";