福利标签

src/api/enterprise.js

@@ -147,6 +147,14 @@ export const updateEnterpriseLogo = async (data) => {
   })
 }
 
+// // 招聘端-企业信息-获取企业福利标签
+// export const getEnterpriseWelfare = async (params) => {
+//   return await request.get({
+//     url: '/app-admin-api/menduner/system/enterprise/welfare/get',
+//     params
+//   })
+// }
+
 // 招聘端-企业信息-修改企业福利标签
 export const updateEnterpriseWelfare = async (data) => {
   return await request.post({

src/components/FormUI/TextInput/index.vue

@@ -12,6 +12,7 @@
       :label="item.label"
       :placeholder="item.placeholder || item.label"
       :autofocus="item.autofocus"
+      :focused="item.focused"
       :required="item.required"
       :class="item.class"
       :suffix="item.suffix"
@@ -25,6 +26,7 @@
       :hide-details="item.hideDetails || false"
       @wheel="$event => handleWheel($event, item)"
       @update:modelValue="modelValueUpDate"
+      @update:focused="focusedEvent"
       @click:append="appendClick"
       @click:append-inner="appendInnerClick"
       @keyup.enter="handleKeyup"
@@ -37,7 +39,7 @@ import { defineEmits, ref, watch } from 'vue';
 defineOptions({ name:'FormUI-v-text-field'})
 
 const props = defineProps({item: Object, modelValue: [String, Number]})
-const emit = defineEmits(['update:modelValue', 'change', 'appendClick', 'appendInnerClick', 'enter'])
+const emit = defineEmits(['update:modelValue', 'change', 'appendClick', 'appendInnerClick', 'enter', 'focused'])
 const item = props.item
 const value = ref(props.modelValue)
 const searchDebouncedTime = item?.searchDebouncedTime === 0 ? ref(0) : ref(500)
@@ -59,7 +61,7 @@ const appendClick = () => {
   emit('appendClick', value.value)
 }
 const appendInnerClick = () => {
-  if (item.appendInnerClick) item.appendInnerClick()
+  if (item.appendInnerClick) item.appendInnerClick(value.value)
   emit('appendInnerClick', value.value)
 }
 
@@ -67,6 +69,10 @@ const handleKeyup = () => {
   emit('enter', value.value)
 }
 
+const focusedEvent = (focused) => { // Emitted when the input is focused or blurred
+  emit('focused', focused, value.value)
+}
+
 const handleWheel = (event, item) => {
   if (item.type !== 'number') return
   event.preventDefault()

src/locales/en.js

@@ -38,7 +38,9 @@ export default {
     Unrestricted: 'Unrestricted',
     other: 'Other',
     cleanUp: 'Clean Up',
+    alreadyExists: 'Already exists',
     pleaseSelect: 'Please select',
+    pleaseEnter: 'Please Enter',
   },
   sys: {
     api: {

src/locales/zh-CN.js

@@ -38,7 +38,9 @@ export default {
     Unrestricted: '不限',
     other: '其他',
     cleanUp: '清除',
+    alreadyExists: '已存在',
     pleaseSelect: '请选择',
+    pleaseEnter: '请输入',
   },
   sys: {
     api: {

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

@@ -4,14 +4,17 @@
   <span style="font-size: 14px; color: #666;">(最多10个标签)</span>
   <div class="mb-15">
     <v-chip
-      v-for="(item, index) in chosenChipList" :key="index"
+      v-for="(item, index) in chosen" :key="index"
       class="chip mx-2 mt-4"
-      label closable color="primary"
-    >{{ item.name }}</v-chip>
+      label color="primary"
+    >
+      {{ item }}
+      <v-icon size="18" color="primary" style="margin-left: 6px;" @click="closeClick(item)">mdi-close-circle</v-icon>
+    </v-chip>
     <div>
       <div v-if="customTag" class="d-flex align-center mx-2 mt-4">
-        <TextUI class="mr-2" :item="textItem"></TextUI>
-        <!-- <v-btn prepend-icon="mdi-content-save-outline" color="warning" variant="tonal" @click="appendInnerClick">{{ $t('common.save') }}</v-btn> -->
+        <TextUI class="mr-2" :item="textItem" @appendInnerClick.stop="appendInnerClick"></TextUI>
+        <v-icon size="22" color="#ccc" style="cursor: pointer;" @click="customTag = false">mdi-close</v-icon>
       </div>
       <div v-else @click="customTag = true">
         <v-chip class="chip mx-2 mt-4" label color="orange"><v-icon icon="mdi-plus" start></v-icon>自定义标签</v-chip>
@@ -24,74 +27,91 @@
       v-for="(item, index) in chipList" :key="index"
       class="chip mx-2 mt-4"
       label color="primary"
-      :disabled="chosenChipIds.includes(item.name)"
+      :disabled="chosen.includes(item)"
+      @click="choseClick(item)"
     >
       <v-icon icon="mdi-plus" start></v-icon>
-      {{ item.name }}
+      {{ item }}
     </v-chip>
   </div>
 </template>
 
 <script setup>
 import TextUI from '@/components/FormUI/TextInput'
+import Snackbar from '@/plugins/snackbar'
+import Confirm from '@/plugins/confirm'
+import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
+import { getEnterpriseBaseInfo, updateEnterpriseWelfare } from '@/api/enterprise'
 import { ref } from 'vue';
 defineOptions({name: 'informationSettingsComponents-welfareLabel'})
 const customTag = ref(false)
-const appendInnerClick = () => {
+const limitNum = ref(10)
+let chosen = ref([])
+// 删除
+const closeClick = (item) => {
+  Confirm('系统提示', '是否确认删除？').then(async () => {
+    chosen.value = chosen.value.filter(e => e !== item)
+    handleSave('删除')
+  })
+}
+// 从推荐标签添加
+const choseClick = (item) => {
+  if (chosen.value?.length >= limitNum.value) return Snackbar.warning('最多可加10个标签')
+  chosen.value.push(item)
+  handleSave('添加')
+}
+// 保存自定义
+const appendInnerClick = (value) => {
+  if (chosen.value?.length >= limitNum.value) return Snackbar.warning('最多可加10个标签')
+  if (!value) return Snackbar.warning(t('common.pleaseEnter')+t('enterprise.infoSetting.welfareLabel'))
+  const index = chosen.value.findIndex(e => e === value)
+  if (index !== -1) return Snackbar.warning(t('common.alreadyExists'))
+  chosen.value.push(value)
+  handleSave('保存')
+}
+// 保存
+const handleSave = async (type) => {
+  const appAdminEnterpriseWelfareReqVO = { welfareList: chosen.value }
+  await updateEnterpriseWelfare(appAdminEnterpriseWelfareReqVO)
   customTag.value = false
+  Snackbar.success(`${type}成功`)
+  setTimeout(() => { // 马上获取数据数据会不同步故setTimeout
+    getData()
+  }, 5000)
+}
+// 获取数据
+const getData = async () => {
+  const data = await getEnterpriseBaseInfo()
+  chosen.value = data?.welfareList || []
 }
+getData()
 const textItem = ref({
   type: 'text',
   width: 250,
   hideDetails: true,
+  autofocus: true, // 聚焦。
   value: '',
   label: '请输入自定义标签',
-  appendInnerIcon: 'mdi-content-save-outline',
+  // appendInnerIcon: 'mdi-content-save-outline',
+  appendInnerIcon: 'mdi-checkbox-marked-circle',
   appendInnerClick: appendInnerClick,
 })
-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午餐补贴' },
-])
+// 推荐标签
+const chipList = [
+  '五险一金',
+  '交通补助',
+  '节日礼物',
+  '技能培训',
+  '午餐补贴',
+  '话补补贴',
+  '带薪年假',
+  '住房补贴',
+  '岗位晋升',
+  '住房优惠',
+  '美女多',
+  '帅哥多',
+  '领导好'
+]
 </script>
 <style lang="scss" scoped>
 .chip {