feat: shared product group input

src/components/04_product-service/BasicInformation.vue

@@ -8,6 +8,7 @@ import { ref } from 'vue';
 const remark = defineModel<string>('remark');
 const detail = defineModel<string>('detail');
 const name = defineModel<string>('name');
+const shared = defineModel<boolean>('shared');
 const code = defineModel<string>('code');
 
 const serviceCode = defineModel<string>('serviceCode');
@@ -52,17 +53,32 @@ watch(
 
 <template>
   <div class="row col-12">
-    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+    <div class="col-12 q-pb-sm row items-center">
       <q-icon
         flat
         size="xs"
-        class="q-pa-sm rounded q-mr-xs"
+        class="q-pa-sm rounded q-mr-sm"
         color="info"
         name="mdi-office-building-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`form.field.basicInformation`) }}
+      <span class="text-body1 text-weight-bold">
+        {{ $t(`form.field.basicInformation`) }}
+      </span>
+      <section class="q-px-md">
+        <label :style="{ opacity: readonly ? '.5' : undefined }">
+          <input
+            id="input-shared"
+            class="q-pr-sm"
+            type="checkbox"
+            v-model="shared"
+            :disabled="readonly"
+          />
+          {{ $t('general.shared') }}
+        </label>
+      </section>
     </div>
+
     <div v-if="!service" class="col-12 row q-col-gutter-sm">
       <q-select
         outlined