boss_font/src/views/ScreeningManagement/index.vue

<template>
  <div class="app-container">
    <el-card shadow="hover" class="data-table">
      <div class="data-table__toolbar">
        <div class="data-table__toolbar--actions">
          <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
        </div>
      </div>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="roleList"
        highlight-current-row
        row-key="id"
        border
        class="data-table__content"
      >
        <el-table-column label="配置名称" prop="name" />
        <el-table-column label="岗位关键词" prop="position_keywords" />
        <el-table-column label="城市" prop="city" />
        <el-table-column label="薪资范围（单位：k）" prop="salary_min">
          <template #default="scope">
            {{ scope.row.salary_min || 0 }} - {{ scope.row.salary_max || 0 }}
          </template>
        </el-table-column>
        <!--        <el-table-column label="复聊间隔" prop="salary_max" />-->
        <el-table-column label="工作经验" prop="experience" />
        <el-table-column label="学历要求" prop="education" />
        <el-table-column label="启用状态" prop="is_active">
          <template #default="scope">
            <el-switch v-model="scope.row.is_active" @change="onStatusModification(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created_at">
          <template #default="scope">
            {{ formatISOToDateTime(scope.row?.created_at || '') }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              link
              icon="edit"
              @click="handleOpenDialog(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              link
              icon="delete"
              @click="onUserDeleteDepartment(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="fetchData"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { RolePageVO } from '@/api/system/role-api'
import { functionDialogBox } from '@/utils/functionDialogBox'
import FilterSettingsForm from './components/FilterSettingsForm.vue'
import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
import {
  ApiFilters,
  ApiFiltersAdd,
  ApiFiltersDelete,
  ApiFiltersEditor
} from '@/api/ScreeningManagement'

defineOptions({
  name: 'Role',
  inheritAttrs: false
})

const queryFormRef = ref()
const dataTableRef = ref()
const loading = ref(false)
const total = ref(0)

const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
  times: [],
  seal_type: '',
  CaseNumber: ''
})

// 表格数据
const roleList = ref<RolePageVO[]>()

// 弹窗
const dialog = reactive({
  title: '',
  visible: false
})

// 获取数据
function fetchData() {
  loading.value = true
  ApiFilters()
    .then((res: any) => {
      roleList.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

// 查询（重置页码后获取数据）
function handleQuery() {
  queryParams.pageNum = 1
  fetchData()
}

// 重置查询
function handleResetQuery() {
  if (queryFormRef.value) queryFormRef.value.resetFields()
  queryParams.pageNum = 1
  fetchData()
}

// 打开角色弹窗
function handleOpenDialog(data: any = null) {
  dialog.visible = true
  if (data) {
    functionDialogBox(
      FilterSettingsForm,
      {
        newData: data
      },
      {
        title: '编辑筛选配置',
        width: '900',
        ok(value: any) {
          handleSubmit({ id: data.id, ...value })
        }
      }
    )
  } else {
    functionDialogBox(
      FilterSettingsForm,
      {},
      {
        title: '创建筛选配置',
        width: '900',
        ok(value: any) {
          handleSubmit(value)
        }
      }
    )
  }
}

// 提交角色表单
function handleSubmit(data: any) {
  loading.value = true
  const roleId = data.id
  if (roleId) {
    ApiFiltersEditor(data)
      .then(() => {
        ElMessage.success('修改成功')
        handleResetQuery()
      })
      .finally(() => (loading.value = false))
  } else {
    ApiFiltersAdd(data)
      .then(() => {
        ElMessage.success('新增成功')
        handleResetQuery()
      })
      .finally(() => (loading.value = false))
  }
}

const onUserDeleteDepartment = (id: string) => {
  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(
    () => {
      loading.value = true
      ApiFiltersDelete(id)
        .then(() => {
          ElMessage.success('删除成功')
          handleResetQuery()
        })
        .finally(() => (loading.value = false))
    },
    () => {
      ElMessage.info('已取消删除')
    }
  )
}

const onStatusModification = (data: any) => {
  ElMessageBox.confirm(
    data.is_active ? '确认启用已选中的数据项?' : '确认禁用已选中的数据项?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      loading.value = true
      ApiFiltersEditor({ is_active: data.is_active, id: data.id })
        .then(() => {
          ElMessage.success('修改成功')
          handleResetQuery()
        })
        .finally(() => (loading.value = false))
    })
    .catch(() => {
      console.log('取消修改')
      handleResetQuery()
    })
}

onMounted(() => {
  handleQuery()
})
</script>