index.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div class="aside-table-container">
  3. <div class="aside-header">
  4. <h3>{{ currentPosition ? currentPosition.title + ' - 问题列表' : '请选择职位' }}</h3>
  5. </div>
  6. <fs-crud ref="asideCrudRef" v-bind="crudBinding"></fs-crud>
  7. </div>
  8. </template>
  9. <script lang="ts" setup>
  10. import { ref, onMounted, watch } from 'vue';
  11. import { useFs } from '@fast-crud/fast-crud';
  12. import { createAsideCrudOptions } from './crud';
  13. import { ElMessage } from 'element-plus';
  14. const props = defineProps({
  15. positionId: {
  16. type: [String, Number],
  17. default: ''
  18. },
  19. currentPosition: {
  20. type: Object,
  21. default: () => null
  22. }
  23. });
  24. const emit = defineEmits(['refresh']);
  25. const { crudBinding, crudRef: asideCrudRef, crudExpose } = useFs({ createCrudOptions: createAsideCrudOptions });
  26. // 监听职位ID变化,刷新问题列表
  27. watch(() => props.positionId, (newVal) => {
  28. if (newVal) {
  29. loadQuestions(newVal);
  30. }
  31. }, { immediate: true });
  32. // 加载问题列表
  33. const loadQuestions = (positionId) => {
  34. if (!positionId) return;
  35. crudExpose.doSearch({
  36. form: {
  37. job_id: positionId
  38. }
  39. });
  40. };
  41. // 暴露方法给父组件
  42. defineExpose({
  43. refresh: () => crudExpose.doRefresh(),
  44. asideCrudRef
  45. });
  46. </script>
  47. <style lang="scss" scoped>
  48. .aside-table-container {
  49. height: 100%;
  50. display: flex;
  51. flex-direction: column;
  52. }
  53. .aside-header {
  54. padding: 10px 0;
  55. border-bottom: 1px solid #ebeef5;
  56. margin-bottom: 10px;
  57. }
  58. </style>