changes

app/components/datatable/NewField.vue

@@ -14,22 +14,29 @@
     </ul>
   </div>
   <template v-if="selectType.code === 'formula'">
-    <b-radio
-      :class="i === 1 ? 'ml-5' : null"
-      v-model="choice"
-      v-for="(v, i) in choices"
-      :key="i"
-      :native-value="v.code"
-    >
-      <span :class="v.code === choice ? 'fsb-16' : 'fs-16'">{{ v.name }}</span>
-    </b-radio>
-    <div class="has-background-light mt-3 px-3 py-3">
+    <div class="control is-flex is-gap-2">
+      <label
+        v-for="(v, i) in choices"
+        :key="i"
+        class="radio"
+      >
+        <input
+          v-model="choice"
+          :value="v.code"
+          @input="changeType(v)"
+          type="radio"
+          name="choice"
+        />
+        {{ v.name }}
+      </label>
+    </div>
+    <div class="has-background-white-bis mt-3 p-3 rounded-md">
       <div
-        class="tags are-medium mb-0"
+        class="tags mb-0"
         v-if="choice === 'function'"
       >
         <span
-          :class="`tag ${func === v.code ? 'is-primary' : 'is-dark'} is-rounded is-clickable`"
+          :class="`tag is-primary ${func !== v.code && 'is-light'} fs-13 is-rounded is-clickable`"
           v-for="(v, i) in funcs"
           :key="i"
           @click="changeFunc(v)"
@@ -285,7 +292,7 @@ var choices = [
   { code: "column", name: "Dùng cột dữ liệu" },
   { code: "function", name: "Dùng hàm số" },
 ];
-var choice = "column";
+const choice = ref("column");
 var funcs = [
   { code: "sum", name: "Sum" },
   { code: "max", name: "Max" },
@@ -363,7 +370,7 @@ function checkFunc() {
 }
 function checkValid() {
   errors.value = [];
-  if (tags.length === 0 && choice === "column") {
+  if (tags.length === 0 && choice.value === "column") {
     errors.value.push({
       name: "tags",
       message: "Chưa chọn trường xây dựng công thức.",
@@ -382,7 +389,7 @@ function checkValid() {
   }
   if (errors.value.length > 0) return false;
   //check formula in case use column
-  if (choice === "column") {
+  if (choice.value === "column") {
     let val = $copy(formula);
     tags.forEach((v) => {
       let myRegExp = new RegExp(v.name, "g");
@@ -410,7 +417,7 @@ function createField() {
   if (!checkValid()) return;
   let field = $createField(name.trim(), label.trim(), "number", true);
   field.formula = formula.trim().replaceAll(" ", "");
-  if (choice === "function") {
+  if (choice.value === "function") {
     field.func = func;
     field.vals = checkFunc();
   } else field.tags = tags.map((v) => v.name);