BatchStatusDialog.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <el-dialog
  3. v-model="dialogVisible"
  4. title="批量修改申请状态"
  5. width="500px"
  6. :close-on-click-modal="false"
  7. @closed="handleClosed"
  8. >
  9. <el-form :model="form" label-width="100px" ref="formRef" :rules="rules">
  10. <el-form-item label="新状态" prop="new_status">
  11. <el-select v-model="form.new_status" placeholder="请选择新状态" style="width: 100%">
  12. <el-option :value="0" label="待面试" />
  13. <el-option :value="1" label="已通知面试" />
  14. <el-option :value="2" label="已面试" />
  15. <el-option :value="3" label="已录用" />
  16. <el-option :value="4" label="已拒绝" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="备注" prop="note">
  20. <el-input
  21. v-model="form.note"
  22. type="textarea"
  23. placeholder="请输入备注信息"
  24. :rows="3"
  25. />
  26. </el-form-item>
  27. </el-form>
  28. <template #footer>
  29. <el-button @click="dialogVisible = false">取消</el-button>
  30. <el-button type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
  31. </template>
  32. </el-dialog>
  33. </template>
  34. <script lang="ts" setup>
  35. import { ref, reactive } from 'vue';
  36. import { ElMessage, FormInstance } from 'element-plus';
  37. import { updateBatchStatus } from '../api';
  38. const dialogVisible = ref(false);
  39. const loading = ref(false);
  40. const formRef = ref<FormInstance>();
  41. const form = reactive({
  42. new_status: undefined as number | undefined,
  43. note: '',
  44. application_ids: [] as number[]
  45. });
  46. const rules = {
  47. new_status: [{ required: true, message: '请选择新状态', trigger: 'change' }]
  48. };
  49. const emit = defineEmits(['success']);
  50. const props = defineProps({
  51. crudExpose: {
  52. type: Object,
  53. required: true
  54. }
  55. });
  56. // 打开对话框
  57. const open = (selection: any[]) => {
  58. dialogVisible.value = true;
  59. form.application_ids = selection.map(item => item.id);
  60. form.new_status = undefined;
  61. form.note = '';
  62. };
  63. // 提交表单
  64. const handleSubmit = async () => {
  65. if (!formRef.value) return;
  66. await formRef.value.validate(async (valid) => {
  67. if (!valid) return;
  68. loading.value = true;
  69. try {
  70. const data = {
  71. application_ids: form.application_ids,
  72. new_status: form.new_status as number,
  73. note: form.note,
  74. tenant_id: '1'
  75. };
  76. const res = await updateBatchStatus(data);
  77. if (res.code === 2000) {
  78. ElMessage.success('批量修改状态成功');
  79. dialogVisible.value = false;
  80. emit('success');
  81. props.crudExpose.doRefresh();
  82. } else {
  83. ElMessage.error(res.msg || '操作失败');
  84. }
  85. } catch (error) {
  86. console.error('批量修改状态失败:', error);
  87. ElMessage.error('操作失败,请重试');
  88. } finally {
  89. loading.value = false;
  90. }
  91. });
  92. };
  93. // 关闭对话框时重置表单
  94. const handleClosed = () => {
  95. if (formRef.value) {
  96. formRef.value.resetFields();
  97. }
  98. };
  99. // 暴露方法给父组件
  100. defineExpose({
  101. open
  102. });
  103. </script>