initial commit for ToolsRequiredComponent and its options

resources/assets/vue/components/general/forms/ToolsRequiredComponent.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <label class="text-primary">卸货工具 Tools required to unload goods</label>
+    <vue-multi-select
+      ref="multiSelect"
+      v-model="values"
+      :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>