DialogOutsourcedRecords.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <el-dialog title="历史记录" v-model="visible" width="800px" height="400px" @close="close" append-to-body draggable style="font-size: 14px;">
  3. <el-table ref="dialogTable" :data="recordsList" size="small" v-loading="loading" border height="500px" header-row-class-name="list-header-row" row-class-name="list-row" >
  4. <el-table-column type="index" label="序号" width="50" align="center" />
  5. <el-table-column label="记录" align="center" prop="records" />
  6. </el-table>
  7. </el-dialog>
  8. </template>
  9. <script setup>
  10. import { listOutsourcedRecords } from "@/api/business/outsourcedRecords";
  11. /** 工序变量 */
  12. const total = ref(0)
  13. const recordsList = ref([])
  14. const visible = ref(false)
  15. const loading = ref(false)
  16. const data = reactive({
  17. queryParams: {
  18. masterId:null
  19. }
  20. })
  21. const { queryParams } = toRefs(data)
  22. /**
  23. * 对话框打开 事件
  24. */
  25. function open(data) {
  26. visible.value = true
  27. queryParams.value.masterId = data
  28. getList()
  29. }
  30. /**
  31. * 对话框关闭 事件
  32. */
  33. function close() {
  34. visible.value = false
  35. }
  36. /**
  37. * 加载数据
  38. */
  39. function getList() {
  40. loading.value = true
  41. listOutsourcedRecords(queryParams.value).then((res) => {
  42. recordsList.value = res.rows
  43. loading.value = false
  44. })
  45. }
  46. defineExpose({
  47. open
  48. })
  49. </script>
  50. <style scoped>
  51. .el-table--small {
  52. font-size: 14px;
  53. }</style>