menduner/src/views/recruit/personal/PersonalCenter/resume/blockEnt/index.vue

<template>
  <div class="resume-box d-flex flex-column" style="position: relative; height: 100%;">
    <div class="resume-header">
      <div class="resume-title">屏蔽企业设置</div>
    </div>
    <div class="mt-5" v-if="userInfo?.vipFlag && userInfo?.vipExpireDate && userInfo?.vipExpireDate > Date.now()">
      <!-- 选择 -->
      <div class="d-flex align-center pb-5" style="border-bottom: 1px solid #dddddd;">
        <div style="color: #777;">选择企业： </div>
        <Autocomplete v-model="item.value" :item="item" @search="getEnterpriseData"></Autocomplete>
        <v-btn class="ml-3" color="primary" :disabled="!item.value" @click="handleJoin">确认屏蔽</v-btn>
      </div>
      <!-- 展示 -->
      <v-chip v-for="k in dataList" class="mt-3 mr-3" :key="k.id">
        <span class="cursor-pointer">{{ k.name }}</span>
        <template v-slot:append>
          <v-icon class="ml-2" @click="handleDelete(k)">mdi-close-circle</v-icon>
        </template>
      </v-chip>
    </div>
    <div v-else class="disable2"> </div>
  </div>
</template>

<script setup>
import { 
  getBlockEnterpriseList,
  handleBlockEnterprise,
  handleUnBlockEnterprise,
} from '@/api/recruit/personal/resume/blockEnt.js'
import { enterpriseSearchByName } from '@/api/recruit/personal/resume'
import Snackbar from '@/plugins/snackbar'
import Confirm from '@/plugins/confirm'
import { ref } from 'vue'
defineOptions({name: 'resume-blockEnt'})
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
let userInfo = ref(JSON.parse(localStorage.getItem('userInfo')) || {})
userStore.$subscribe((mutation, state) => {
  if (state.userInfo && Object.keys(state.userInfo).length) userInfo.value = state?.userInfo
})


// 获取数据
const dataList = ref([])
const getData = async () => {
  const { list } = await getBlockEnterpriseList()
  dataList.value = list || []
}
getData()

// 取消屏蔽
const handleDelete = ({ id, name }) => {
  Confirm('系统提示', `是否取消屏蔽【${name}】？`).then(async () => {
    await handleUnBlockEnterprise(id)
    getData()
    Snackbar.success('取消屏蔽成功！')
  })
}

// 屏蔽
const handleJoin = async () => {
  await handleBlockEnterprise({ enterpriseId: item.value.value })
  getData()
  Snackbar.success('加入屏蔽企业成功！')
}

// 企业名称下拉列表
const getEnterpriseData = async (name) => {
  if (!name) return
  const data = await enterpriseSearchByName({ name })
  item.value.items = data
}

const item = ref({
  type: 'autocomplete',
  key: 'enterpriseId',
  value: null,
  default: null,
  label: '请输入企业名称搜索',
  outlined: true,
  clearable: true,
  hideDetails: true,
  itemText: 'value',
  itemValue: 'key',
  width: '400',
  search: getEnterpriseData,
  items: []
})
</script>

<style lang="scss" scoped>
.tips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.disable2 {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  flex: 1;
  &::after {
    content: '屏蔽企业为会员福利内容';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-family: 'MiSans-Bold';
    color: #fff;
    top: 0;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
  }
}
</style>