企业福利标签

src/views/enterprise/systemManagement/informationSettingsComponents/welfareLabel.vue

@@ -1,9 +1,77 @@
+<!-- 福利标签 -->
 <template>
-  <div>welfareLabel</div>
+  <span style="font-size: 16px;" class="mr-1">已选择标签</span>
+  <span style="font-size: 14px; color: #666;">(最多10个标签)</span>
+  <div class="mb-15">
+    <v-chip
+      v-for="(item, index) in chosenChipList" :key="index"
+      class="mx-2 mt-4"
+      label closable color="primary"
+    >{{ item.name }}</v-chip>
+    <div>
+      <v-chip class="mx-2 mt-4" label color="orange"><v-icon icon="mdi-plus" start></v-icon>自定义标签</v-chip>
+    </div>
+  </div>
+  <span style="font-size: 16px;">推荐标签</span>
+  <div>
+    <v-chip
+      v-for="(item, index) in chipList" :key="index"
+      class="mx-2 mt-4"
+      label color="primary"
+      :disabled="chosenChipIds.includes(item.name)"
+    >
+      <v-icon icon="mdi-plus" start></v-icon>
+      {{ item.name }}
+    </v-chip>
+  </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
 defineOptions({name: 'informationSettingsComponents-welfareLabel'})
+let chosenChipIds = ref([])
+const chosenChipList = ref([
+  { name: '五险一金' },
+  { name: '节日礼物' },
+  { name: '技能培训' },
+  { name: '带薪年假' },
+  { name: '岗位晋升' },
+  { name: '美女多' },
+  { name: '帅哥多' },
+  { name: '领导好' },
+  { name: '午餐补贴' },
+])
+chosenChipIds.value = chosenChipList.value.map(e => e.name)
+// 
+const chipList = ref([
+  { name: '2五险一金' },
+  { name: '2节日礼物' },
+  { name: '五险一金' },
+  { name: '节日礼物' },
+  { name: '技能培训' },
+  { name: '美女多' },
+  { name: '帅哥多' },
+  { name: '领导好' },
+  { name: '午餐补贴' },
+  { name: '2技能培训' },
+  { name: '2带薪年假' },
+  { name: '2岗位晋升' },
+  { name: '带薪年假' },
+  { name: '岗位晋升' },
+  { name: '2美女多' },
+  { name: '2帅哥多' },
+  { name: '2领导好' },
+  { name: '2午餐补贴' },
+  { name: '3五险一金' },
+  { name: '3节日礼物' },
+  { name: '3技能培训' },
+  { name: '3带薪年假' },
+  { name: '3岗位晋升' },
+  { name: '3美女多' },
+  { name: '3帅哥多' },
+  { name: '3领导好' },
+  { name: '3午餐补贴' },
+])
 </script>
 <style lang="scss" scoped>
 </style>