added vue multi-select component "address-extra-details-component"

resources/assets/vue/components/addresses/forms/AddressExtraDetailsComponent.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <label class="text-primary">卸货工具 Tools required to unload goods</label>
+    <vue-multi-select
+      ref="multiSelect"
+      :options="options"
+      :btnLabel="btnLabel"
+      @open="open"
+      @close="close"
+      :selectOptions="data">
+      <template v-slot:option="{ option }">
+        <input type="checkbox" :checked="option.selected"/>
+        <span>{{ option.name }}</span>
+      </template>
+    </vue-multi-select>
+  </div>
+</template>
+
+<script>
+import vueMultiSelect from 'vue-multi-select';
+import 'vue-multi-select/dist/lib/vue-multi-select.css';
+
+export default {
+  data() {
+    return {
+      values: [],
+      data: [{
+        list: [
+          { name: 'Manpower' },
+          { name: 'Forklift' },
+          { name: 'None of the above' }
+        ],
+      }],
+      options: {
+        multi: true,
+        groups: true,
+      },
+    };
+  },
+  methods: {
+    open() {
+      console.log('open');
+    },
+    close() {
+      console.log('close');
+    },
+    btnLabel(values) {
+      if (values.length === 0) {
+        return 'Select Tools required';
+      }
+      return values.map(v => v.name).join(', ');
+    },
+  },
+  components: {
+    vueMultiSelect,
+  },
+};
+</script>

resources/assets/vue/components/addresses/forms/AddressFormComponent.vue

@@ -149,10 +149,11 @@
                     </validation-wrapper-component>
                 </div>
                 <div class="col-12 col-md pl-md-1 pb-3 pb-md-0">
-                    <validation-wrapper-component selectable :validator="$v.parameters.tools_required_unload">
+                    <!-- <validation-wrapper-component selectable :validator="$v.parameters.tools_required_unload">
                         <label>卸货工具 Tools require to unload goods</label>
                         <select-component :options="['Manpower', 'Forklift', 'None of above']" v-model="parameters.tools_required_unload"></select-component>
-                    </validation-wrapper-component>
+                    </validation-wrapper-component> -->
+                    <address-extra-details-component v-model="parameters.tools_required_unload"></address-extra-details-component>
                 </div>
             </div>
             <div class="row justify-content-center allign-items-center">
@@ -227,7 +228,7 @@
         watch: {
             'id': function () {
                 this.parameters.company_module_id = this.id;
-            }
+            },
         },
         methods:{
             submitForm(){