update

src/components/managingunits/add-new-managingunits-dialog/NewManagingUnits.ts

-import { defineComponent, ref } from 'vue';
+import { defineComponent, Ref, ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
 import { isEmail } from '../../../boot/functions';
 import { isMobilePhone } from '../../../boot/functions';
 import AddNewArtistDialog from 'components/managingunits/add-new-managingunits-dialog/add-new-artist-dialog/index.vue'
+// import UpdateNewArtistDialog from 'components/managingunits/update-new-managingunits-dialog/update-new-artist-dialog/index.vue'
 
 export type ArtistAddInfoType = {
   id: number;
@@ -15,19 +16,14 @@ export type ArtistAddInfoType = {
 
 export default defineComponent({
   components: {
-    AddNewArtistDialog
+    AddNewArtistDialog,
+    // UpdateNewArtistDialog
   },
   props: {
     showDialog: {
       type: Boolean,
       required: true,
     },
-    nameAdd: {type: String, required: true},
-    fieldsAdd: { type: Number, required: true},
-    myedityAdd: { type: String, required: true},
-    timeAdd: { type: String, required: true},
-    fieldsAddOptions: { type: Array, required: true},
-    statusAdd: { type: Boolean, required: true },
     managingUnitAddTableRows: {type: Array, required: true},
     managingUnitAddTableColumns: {type: Array, required: true},
     fieldsOptions: {type: Array, required: true},
@@ -47,6 +43,12 @@ export default defineComponent({
       try {
       } catch (error) {}
     };
+    // const openUpdateArtistDialog = ref(false)
+    // const updateNewManagingUnitsArtist = () => {
+    //   //gọi api cập nhật
+    //   try {
+    //   } catch (error) {}
+    // };
     const codeRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -87,16 +89,35 @@ export default defineComponent({
         (val && val.trim().length) ||
         i18n.global.t('managingUnit.validateMessages.requireAddress'),
     ];
+
+    const nameAdd: Ref<string | undefined> = ref()
+    const myedityAdd: Ref<string | undefined> = ref()
+    const fieldsAdd: Ref<number | undefined> = ref();
+    const statusAdd: Ref<boolean | number> = ref(true);
+    const timeAdd: Ref<string | undefined> = ref();
+    const fieldsAddOptions = ref([
+      { id: 1, text: 'Giải trí' },
+      { id: 2, text: 'Âm nhạc' },
+      { id: 1, text: 'Thể thao' },
+    ]);
     return {
     openAddArtistDialog,
     addNewManagingUnitsArtist,
+    // openUpdateArtistDialog,
+    // updateNewManagingUnitsArtist,
     codeRules,
     nameRules,
     representativeRules,
     addressRules,
     phoneNumberRules,
     emailRules,
-    fieldsRules
+    fieldsRules,
+    nameAdd,
+    myedityAdd,
+    fieldsAdd,
+    timeAdd,
+    statusAdd,
+    fieldsAddOptions,
     };
   },
   emits: [

src/components/managingunits/add-new-managingunits-dialog/index.vue

@@ -142,11 +142,24 @@
           v-model:myedity-add="myedityAdd"
           v-model:fields-add="fieldsAdd"
           v-model:time-add="timeAdd"
+          v-model:status-add="statusAdd"
           :fields-add-options="fieldsAddOptions"
           @click:CloseBtn="openAddArtistDialog = false"
           @addNewManagingUnitsArtist="addNewManagingUnitsArtist"
         />
 
+        <!-- <UpdateNewArtistDialog
+          v-model:open-update-artist-dialog="openUpdateArtistDialog"
+          v-model:name-add="nameAdd"
+          v-model:myedity-add="myedityAdd"
+          v-model:fields-add="fieldsAdd"
+          v-model:time-add="timeAdd"
+          v-model:status-add="statusAdd"
+          :fields-add-options="fieldsAddOptions"
+          @click:CloseBtn="openUpdateArtistDialog = false"
+          @updateNewManagingUnitsArtist="updateNewManagingUnitsArtist"
+        /> -->
+
         <q-card-actions>
           <div class="col-12 q-mt-sm">
             <q-table

src/components/managingunits/add-new-managingunits-dialog/update-new-artist-dialog/NewUpdateArtist.ts

+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+export default defineComponent({
+  props: {
+    openUpdateArtistDialog: {
+      type: Boolean,
+      required: true,
+    },
+    fieldsAddOptions: {type: Array, required: true},
+    fieldsAdd: { type: Number, required: true},
+    nameAdd: { type: String, required: true },
+    myedityAdd: { type: String, required: true },
+    timeAdd: { type: String, required: true },
+    statusAdd: { type: Boolean, required: true },
+  },
+  setup() {
+    const nameAddRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireNameAdd'),
+    ];
+    const myedityAddRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireMyedityAdd'),
+    ];
+      const fieldsAddRules = [
+        (val?: number) =>
+          val !== undefined ||
+          i18n.global.t('managingUnitAdd.validateMessages.requireFieldsAdd'),
+      ];
+    const timeAddRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireTimeAdd'),
+    ];
+    return {
+        nameAddRules,
+        myedityAddRules,
+        fieldsAddRules,
+        timeAddRules,
+    };
+  },
+  emits: [
+    'update:openUpdateArtistDialog',
+    'click:CloseBtn',
+    'update:nameAdd',
+    'update:myedityAdd',
+    'update:fieldsAdd',
+    'update:timeAdd',
+    'update:statusAdd',
+    'updateNewManagingUnitsArtist',
+  ],
+});

src/components/managingunits/add-new-managingunits-dialog/update-new-artist-dialog/index.vue

 <template>
-  <div>My component</div>
+  <q-dialog
+    persistent
+    :model-value="openUpdateArtistDialog"
+    @update:model-value="$emit('update:openUpdateArtistDialog', $event)"
+  >
+    <q-card style="min-width: 700px" bordered>
+      <q-form greedy @submit.prevent="$emit('updateNewManagingUnitsArtist')">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('managingUnitAdd.dialogLabel.title.update')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                :model-value="nameAdd"
+                @update:model-value="$emit('update:nameAdd', $event)"
+                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.nameAdd')"
+                :rules="nameAddRules"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="myedityAdd"
+                @update:model-value="$emit('update:myedityAdd', $event)"
+                :label="
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.myedityAdd')
+                "
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="myedityAddRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <div style="padding-left: 8px">
+                <span class="text-body1">{{
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="statusAdd"
+                  @update:model-value="$emit('update:statusAdd', $event)"
+                />
+              </div>
+            </div>
+            <div class="col-6">
+              <q-select
+                :model-value="fieldsAdd"
+                @update:model-value="$emit('update:fieldsAdd', $event)"
+                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.fieldsAdd')"
+                :options="fieldsAddOptions"
+                :rules="fieldsAddRules"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-select>
+              <q-input
+                :model-value="timeAdd"
+                @update:model-value="$emit('update:timeAdd', $event)"
+                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.timeAdd')"
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="timeAddRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('managingUnitAdd.crudActions.cancel')"
+              @click="$emit('click:CloseBtn')"
+            />
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('managingUnitAdd.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'ComponentName'
-})
-</script>
+<script lang="ts" src="./NewUpdateArtist.ts"></script>

src/components/managingunits/update-new-managingunits-dialog/UpdateNewManagingUnits.ts

+import { defineComponent, ref, Ref } from 'vue';
+import { i18n } from 'src/boot/i18n';
+import { isEmail } from '../../../boot/functions';
+import { isMobilePhone } from '../../../boot/functions';
+import NewArtistDialog from 'components/managingunits/update-new-managingunits-dialog/add-new-artist-dialog/index.vue'
+
+export type ArtistUpdateInfoType = {
+  id: number;
+  nameAdd: string | null;
+  myedityAdd: string | null;
+  timeAdd: string | null;
+  fieldsAdd: number;
+  statusAdd: number;
+};
+
+export default defineComponent({
+  components: {
+    NewArtistDialog
+  },
+  props: {
+    showDialogUpdate: {
+      type: Boolean,
+      required: true,
+    },
+    managingUnitUpdateTableRows: {type: Array, required: true},
+    managingUnitUpdateTableColumns: {type: Array, required: true},
+    fieldsOptions: {type: Array, required: true},
+    fields: { type: Number, required: true},
+    code: { type: String, required: true },
+    name: { type: String, required: true },
+    representative: { type: String, required: true },
+    email: { type: String, required: true },
+    address: { type: String, required: true },
+    phoneNumber: { type: String, required: true },
+    status: { type: Boolean, required: true },
+  },
+  setup() {
+    const openAddArtistDialog = ref(false)
+    const updateNewManagingUnitsArtist = () => {
+      //gọi api thêm mới
+      try {
+      } catch (error) {}
+    };
+    const codeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireCode'),
+    ];
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireName'),
+    ];
+    const representativeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireRepresentative'),
+    ];
+      const fieldsRules = [
+        (val?: number) =>
+          val !== undefined ||
+          i18n.global.t('managingUnit.validateMessages.requireFields'),
+      ];
+    const phoneNumberRules = [
+        (val?: string) =>
+          (val && val.trim().length) ||
+          i18n.global.t('managingUnit.validateMessages.requirePhoneNumber'),
+        (val: string) =>
+          isMobilePhone(val) ||
+          i18n.global.t('managingUnit.validateMessages.isPhone'),
+      ];
+    const emailRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireEmail'),
+      (val: string) =>
+        isEmail(val) || i18n.global.t('managingUnit.validateMessages.isEmail'),
+    ];
+    const addressRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireAddress'),
+    ];
+    const nameAdd: Ref<string | undefined> = ref()
+    const myedityAdd: Ref<string | undefined> = ref()
+    const fieldsAdd: Ref<number | undefined> = ref();
+    const statusAdd: Ref<boolean | number> = ref(true);
+    const timeAdd: Ref<string | undefined> = ref();
+    const fieldsAddOptions = ref([
+      { id: 1, text: 'Giải trí' },
+      { id: 2, text: 'Âm nhạc' },
+      { id: 1, text: 'Thể thao' },
+    ]);
+    return {
+    nameAdd,
+    myedityAdd,
+    fieldsAdd,
+    timeAdd,
+    statusAdd,
+    fieldsAddOptions,
+    openAddArtistDialog,
+    updateNewManagingUnitsArtist,
+    codeRules,
+    nameRules,
+    representativeRules,
+    addressRules,
+    phoneNumberRules,
+    emailRules,
+    fieldsRules
+    };
+  },
+  emits: [
+    'update:showDialogUpdate',
+    'click:CloseBtn',
+    'update:code',
+    'update:name',
+    'update:representative',
+    'update:fields',
+    'update:email',
+    'update:phoneNumber',
+    'update:address',
+    'update:status',
+    'updateNewManagingUnits',
+  ],
+});

src/components/managingunits/update-new-managingunits-dialog/add-new-artist-dialog/NewAddArtist.ts

+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+export default defineComponent({
+  props: {
+    openAddArtistDialog: {
+      type: Boolean,
+      required: true,
+    },
+    fieldsAddOptions: {type: Array, required: true},
+    fieldsAdd: { type: Number, required: true},
+    nameAdd: { type: String, required: true },
+    myedityAdd: { type: String, required: true },
+    timeAdd: { type: String, required: true },
+    statusAdd: { type: Boolean, required: true },
+  },
+  setup() {
+    const nameAddRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireNameAdd'),
+    ];
+    const myedityAddRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireMyedityAdd'),
+    ];
+      const fieldsAddRules = [
+        (val?: number) =>
+          val !== undefined ||
+          i18n.global.t('managingUnitAdd.validateMessages.requireFieldsAdd'),
+      ];
+    const timeAddRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireTimeAdd'),
+    ];
+    return {
+        nameAddRules,
+        myedityAddRules,
+        fieldsAddRules,
+        timeAddRules,
+    };
+  },
+  emits: [
+    'update:openAddArtistDialog',
+    'click:CloseBtn',
+    'update:nameAdd',
+    'update:myedityAdd',
+    'update:fieldsAdd',
+    'update:timeAdd',
+    'update:statusAdd',
+    'updateNewManagingUnitsArtist',
+  ],
+});

src/components/managingunits/update-new-managingunits-dialog/add-new-artist-dialog/index.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="openAddArtistDialog"
+    @update:model-value="$emit('update:openAddArtistDialog', $event)"
+  >
+    <q-card style="min-width: 700px" bordered>
+      <q-form greedy @submit.prevent="$emit('updateNewManagingUnitsArtist')">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('managingUnitAdd.dialogLabel.title.add')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                :model-value="nameAdd"
+                @update:model-value="$emit('update:nameAdd', $event)"
+                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.nameAdd')"
+                :rules="nameAddRules"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="myedityAdd"
+                @update:model-value="$emit('update:myedityAdd', $event)"
+                :label="
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.myedityAdd')
+                "
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="myedityAddRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <div style="padding-left: 8px">
+                <span class="text-body1">{{
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="statusAdd"
+                  @update:model-value="$emit('update:statusAdd', $event)"
+                />
+              </div>
+            </div>
+            <div class="col-6">
+              <q-select
+                :model-value="fieldsAdd"
+                @update:model-value="$emit('update:fieldsAdd', $event)"
+                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.fieldsAdd')"
+                :options="fieldsAddOptions"
+                :rules="fieldsAddRules"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-select>
+              <q-input
+                :model-value="timeAdd"
+                @update:model-value="$emit('update:timeAdd', $event)"
+                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.timeAdd')"
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="timeAddRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('managingUnitAdd.crudActions.cancel')"
+              @click="$emit('click:CloseBtn')"
+            />
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('managingUnitAdd.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./NewAddArtist.ts"></script>

src/components/managingunits/update-new-managingunits-dialog/index.vue

 <template>
-  <div>My component</div>
+  <q-dialog
+    persistent
+    :model-value="showDialogUpdate"
+    @update:model-value="$emit('update:showDialogUpdate', $event)"
+  >
+    <q-card style="min-width: 1200px" bordered>
+      <q-form greedy @submit.prevent="$emit('updateNewManagingUnits')">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('managingUnit.dialogLabel.title.update')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                :model-value="code"
+                @update:model-value="$emit('update:code', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.code')"
+                :rules="codeRules"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="name"
+                @update:model-value="$emit('update:name', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.name')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="nameRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="representative"
+                @update:model-value="$emit('update:representative', $event)"
+                :label="
+                  $t('managingUnit.dialogLabel.fieldLabels.representative')
+                "
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="representativeRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="email"
+                @update:model-value="$emit('update:email', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.email')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="emailRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+            </div>
+            <div class="col-6">
+              <q-input
+                :model-value="phoneNumber"
+                emit-value
+                @update:model-value="$emit('update:phoneNumber', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.phoneNumber')"
+                class="q-my-sm"
+                type="number"
+                :rules="phoneNumberRules"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-select
+                :model-value="fields"
+                @update:model-value="$emit('update:fields', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.fields')"
+                :options="fieldsOptions"
+                :rules="fieldsRules"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-select>
+              <q-input
+                :model-value="address"
+                @update:model-value="$emit('update:address', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.address')"
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="addressRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <div class="q-pt-sm q-pl-sm">
+                <span class="text-body1">{{
+                  $t('managingUnit.dialogLabel.fieldLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="status"
+                  @update:model-value="$emit('update:status', $event)"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <div class="row">
+          <div class="col-auto text-h6 text-weight-regular flex q-ml-md">
+            {{ $t('managingUnit.titleAdd')
+            }}<span style="color: red" class="q-ml-xs">*</span>
+          </div>
+          <q-space></q-space>
+          <div class="col-auto">
+            <q-btn
+              color="primary"
+              no-caps
+              :label="$t('managingUnitAdd.AddmanagingUnit')"
+              class="q-mr-sm"
+              @click="openAddArtistDialog = true"
+            >
+            </q-btn>
+          </div>
+        </div>
+        <NewArtistDialog
+          v-model:open-add-artist-dialog="openAddArtistDialog"
+          v-model:name-add="nameAdd"
+          v-model:myedity-add="myedityAdd"
+          v-model:fields-add="fieldsAdd"
+          v-model:time-add="timeAdd"
+          v-model:status-add="statusAdd"
+          :fields-add-options="fieldsAddOptions"
+          @click:CloseBtn="openAddArtistDialog = false"
+          @updateNewManagingUnitsArtist="updateNewManagingUnitsArtist"
+        />
+
+        <q-card-actions>
+          <div class="col-12 q-mt-sm">
+            <q-table
+              :rows="managingUnitUpdateTableRows"
+              :columns="managingUnitUpdateTableColumns"
+              separator="cell"
+              :no-data-label="$t('emptyData')"
+              hide-pagination
+            >
+              <template v-slot:body-cell-action="">
+                <q-td style="padding: 0" class="flex flex-center">
+                  <q-btn flat round color="primary" icon="mdi-delete-outline">
+                    <q-tooltip :offset="[20, 10]">{{
+                      $t('managingUnitAdd.toolTipMessage.delete')
+                    }}</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    flat
+                    round
+                    color="primary"
+                    icon="mdi-account-edit-outline"
+                  >
+                    <q-tooltip :offset="[20, 10]">{{
+                      $t('managingUnitAdd.toolTipMessage.updateInfo')
+                    }}</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </template>
+              <template v-slot:body-cell-status="rowData">
+                <q-td>
+                  <div align="center">
+                    <q-chip
+                      :color="rowData.value ? 'positive' : 'orange'"
+                      text-color="white"
+                      size="sm"
+                    >
+                      {{
+                        rowData.value
+                          ? $t('managingUnitAdd.statusLabel.active')
+                          : $t('managingUnitAdd.statusLabel.inactive')
+                      }}
+                    </q-chip>
+                  </div>
+                </q-td>
+              </template>
+            </q-table>
+          </div>
+        </q-card-actions>
+
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('managingUnit.crudActions.cancel')"
+              @click="$emit('click:CloseBtn')"
+            />
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('managingUnit.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'ComponentName'
-})
-</script>
+<script lang="ts" src="./UpdateNewManagingUnits.ts"></script>

src/components/managingunits/update-new-managingunits-dialog/update-new-artist-dialog/index.vue

+<template>
+  <div>My component</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  // name: 'ComponentName'
+})
+</script>

src/pages/don-vi-chu-quan/ManagingUnit.ts

@@ -11,6 +11,7 @@ import {
 } from 'src/assets/type';
 import { config } from 'src/assets/configurations';
 import AddNewManagingUnitsDialogComponent from '../../components/managingunits/add-new-managingunits-dialog/index.vue';
+import UpdateNewManagingUnitsDialogComponent from '../../components/managingunits/update-new-managingunits-dialog/index.vue';
 
 export type CustomerInfoType = {
   id: number;
@@ -27,6 +28,7 @@ export default defineComponent({
   components: {
     Pagination,
     AddNewManagingUnitsDialogComponent,
+    UpdateNewManagingUnitsDialogComponent
   },
   setup() {
     const managingUnitTableColumns = [
@@ -177,8 +179,74 @@ export default defineComponent({
       },
     ];
 
+    const managingUnitUpdateTableColumns = [
+      {
+        name: 'sttAdd',
+        field: 'sttAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.sttAdd'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'nameAdd',
+        field: 'nameAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.nameAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'myedityAdd',
+        field: 'myedityAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.myedityAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'fieldsAdd',
+        field: 'fieldsAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.fieldsAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'timeAdd',
+        field: 'timeAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.timeAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.status'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.action'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+
     const managingUnitTableRows: Ref<unknown[]> = ref([]);
     const managingUnitAddTableRows: Ref<unknown[]> = ref([]);
+    const managingUnitUpdateTableRows: Ref<unknown[]> = ref([]);
     const getListAddUnit = () => {
       //   const response = (await api({
       //     url: API_PATHS.getListArtist,
@@ -188,21 +256,45 @@ export default defineComponent({
       //       pageSize: pageSize.value,
       //     },
       //   })) as AxiosResponse<BaseResponseBody<unknown>>;
-    //   const fakeData: unknown[] = [
-    //     {
-    //       id: 1,
-    //       sttAdd: 1,
-    //       nameAdd: 'Ưng Hoàng Phúc',
-    //       myedityAdd: 'Ưng Hoàng Phúc',
-    //       fieldsAdd: 'Âm nhạc',
-    //       timeAdd: '05/05/2021 - 05/05/2022',
-    //       status: 1,
-    //     },
-    //   ];
-    //   managingUnitAddTableRows.value = fakeData;
+      // const fakeData: unknown[] = [
+      //   {
+      //     id: 1,
+      //     sttAdd: 1,
+      //     nameAdd: 'Ưng Hoàng Phúc',
+      //     myedityAdd: 'Ưng Hoàng Phúc',
+      //     fieldsAdd: 'Âm nhạc',
+      //     timeAdd: '05/05/2021 - 05/05/2022',
+      //     status: 1,
+      //   },
+      // ];
+      // managingUnitAddTableRows.value = fakeData;
+    };
+
+    const getListUpdateUnit = () => {
+      //   const response = (await api({
+      //     url: API_PATHS.getListArtist,
+      //     method: 'GET',
+      //     params: {
+      //       pageIndex: pageIndex.value,
+      //       pageSize: pageSize.value,
+      //     },
+      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+      // const fakeData: unknown[] = [
+      //   {
+      //     id: 1,
+      //     sttAdd: 1,
+      //     nameAdd: 'Ưng Hoàng Phúc',
+      //     myedityAdd: 'Ưng Hoàng Phúc',
+      //     fieldsAdd: 'Âm nhạc',
+      //     timeAdd: '05/05/2021 - 05/05/2022',
+      //     status: 1,
+      //   },
+      // ];
+      // managingUnitUpdateTableRows.value = fakeData;
     };
 
     const showDialog = ref(false);
+    const showDialogUpdate = ref(false);
     const code: Ref<string | undefined> = ref();
     const name: Ref<string | undefined> = ref();
     const email: Ref<string | undefined> = ref();
@@ -309,12 +401,55 @@ export default defineComponent({
       try {
       } catch (error) {}
     };
+    
+    const confirmUpdateManagingUnits = (id: number) => {
+      showDialogUpdate.value = true;
+      console.log(id, 'iddd');
+      void getDetailManagingUnits();
+    };
+
+    //Bấm nút lưu ở dialog update thì gọi api cập nhật trong hàm updateCustomer
+    // const updateCustomer = () => {
+      //gọi api update
+    //   try {
+    //   } catch (error) {}
+    // };
+
+    const getDetailManagingUnits = () => {
+      // gọi api chi tiết cần có id để lấy value cho từng customer
+      // const response = (await api({
+      //   url: ...,
+      //   method: 'GET',
+      //   params: {
+      //     id: id
+      //   }
+      // }))
+      // gọi api lấy chi tiết sau đấy gán giá trị api trả về gán cho các biến userName customerName businessName taxCode...
+      // const fakeDataDetail = {
+        // userName: 'Sơn Tùng',
+      // };
+      // userName.value = fakeDataDetail.userName;
+      // Tương tự các biến còn lại
+    };
+
+    const updateNewManagingUnits = () => {
+      //gọi api update
+      try {
+      } catch (error) {}
+    };
 
     onMounted(() => {
       void getListUnits();
       void getListAddUnit();
+      void getListUpdateUnit();
     });
     return {
+      getListUpdateUnit,
+      showDialogUpdate,
+      managingUnitUpdateTableRows,
+      managingUnitUpdateTableColumns,
+      updateNewManagingUnits,
+      confirmUpdateManagingUnits,
       confirmDeleteManagingUnits,
       deleteManagingUnits,
       getListAddUnit,

src/pages/don-vi-chu-quan/index.vue

@@ -57,12 +57,18 @@
       >
         <template v-slot:body-cell-action="item">
           <q-td style="padding: 0" class="flex flex-center">
-            <q-btn flat round color="primary" icon="mdi-information-outline">
+            <!-- <q-btn flat round color="primary" icon="mdi-information-outline">
               <q-tooltip :offset="[20, 10]">{{
                 $t('managingUnit.toolTipMessage.information')
               }}</q-tooltip>
-            </q-btn>
-            <q-btn flat round color="primary" icon="mdi-account-edit-outline">
+            </q-btn> -->
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-account-edit-outline"
+              @click="confirmUpdateManagingUnits(item.row.id)"
+            >
               <q-tooltip :offset="[20, 10]">{{
                 $t('managingUnit.toolTipMessage.updateInfo')
               }}</q-tooltip>
@@ -123,6 +129,24 @@
         @click:CloseBtn="showDialog = false"
         @addNewManagingUnits="addNewManagingUnits"
       ></AddNewManagingUnitsDialogComponent>
+
+      <UpdateNewManagingUnitsDialogComponent
+        v-model:show-dialog-update="showDialogUpdate"
+        v-model:code="code"
+        v-model:name="name"
+        v-model:email="email"
+        v-model:address="address"
+        v-model:phone-number="phoneNumber"
+        v-model:status="status"
+        v-model:fields="fields"
+        v-model:managing-unit-update-table-rows="managingUnitUpdateTableRows"
+        v-model:managing-unit-update-table-columns="
+          managingUnitUpdateTableColumns
+        "
+        :fields-options="fieldsOptions"
+        @click:CloseBtn="showDialogUpdate = false"
+        @updateNewManagingUnits="updateNewManagingUnits"
+      ></UpdateNewManagingUnitsDialogComponent>
     </div>
   </div>
 </template>