QueueSelectDialog.vue 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <el-dialog :title="title" v-model="dialogFormVisible">
  3. <el-form :model="form">
  4. <el-form-item label="任务名称" :label-width="formLabelWidth">
  5. <el-input v-model="form.job_name" autocomplete="off" :readonly="true"></el-input>
  6. </el-form-item>
  7. <el-form-item label="选择队列" :label-width="formLabelWidth">
  8. <el-select v-model="form.selectedQueue" placeholder="请选择任务的新队列">
  9. <template v-for="queue in props.queue_data">
  10. <el-option :label="queue.title" :value="queue.id"></el-option>
  11. </template>
  12. </el-select>
  13. </el-form-item>
  14. </el-form>
  15. <div slot="footer">
  16. <el-button type="primary" @click="handleConfirm">确 定</el-button>
  17. <el-button @click="dialogFormVisible = false">取 消</el-button>
  18. </div>
  19. </el-dialog>
  20. </template>
  21. <script setup lang="ts">
  22. import { readonly, ref } from 'vue'
  23. import { putQueueJob } from '@/api/AgentApi'
  24. import type { JobData } from '@/api/AgentApi'
  25. const dialogFormVisible = ref(false)
  26. const formLabelWidth = ref('120px')
  27. const form = ref({
  28. job_id: 0,
  29. job_category: '',
  30. job_name: '',
  31. queue_category: '',
  32. queue_name: '',
  33. selectedQueue: '',
  34. })
  35. const props = defineProps({
  36. title: { type: String, required: true, default: '工作' },
  37. queue_data: { type: Object, required: true, default: { id: "0", queue_category: "", queue_name: "" } }
  38. })
  39. const emit = defineEmits(['update:modelValue', 'success', 'cancel'])
  40. const showDialog = (data: JobData, visible: boolean = true) => {
  41. console.log("OCRDialog showDialog")
  42. dialogFormVisible.value = visible
  43. if (data == null) {
  44. return
  45. }
  46. form.value.job_name = data.job_name;
  47. form.value.job_category = data.job_category;
  48. form.value.job_id = data.id;
  49. }
  50. const handleConfirm = () => {
  51. console.log('submit', form.value)
  52. props.queue_data.forEach((element: any) => {
  53. if (element.id == form.value.selectedQueue) {
  54. form.value.queue_category = element.category;
  55. form.value.queue_name = element.name;
  56. }
  57. });
  58. var params = { job_id: form.value.job_id, queue_category: form.value.queue_category, queue_name: form.value.queue_name }
  59. putQueueJob(params).then((res: any) => {
  60. emit('success', res.records[0])
  61. })
  62. }
  63. defineExpose({ showDialog })
  64. </script>