checkDialog.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <div class="dialog">
  3. <el-dialog
  4. v-model="dialogVisible"
  5. :title="dialogTitle"
  6. width="1000px"
  7. @close="closeDialog()"
  8. >
  9. <div class="app-container">
  10. <div class="filter-container">
  11. <el-input @keyup.enter="handleSearch" class="w200px mr5px" v-model="queryForm.keyWord" placeholder="关键字搜索"/>
  12. <el-button type="primary" @click="handleSearch">
  13. <i-ep-search/>
  14. 搜索
  15. </el-button>
  16. </div>
  17. </div>
  18. <div class="table-con">
  19. <el-table
  20. ref="tableRef"
  21. :max-height="tableHeight"
  22. v-loading="loading"
  23. :data="tableData"
  24. highlight-current-row
  25. border
  26. >
  27. <el-table-column label="操作" width="90">
  28. <template #default="{row}">
  29. <el-button link @click="checkRow(row)" type="primary">
  30. <i-ep-check/>
  31. 选择
  32. </el-button>
  33. </template>
  34. </el-table-column>
  35. <el-table-column
  36. type="index"
  37. label="#"
  38. width="50">
  39. <template #default="scope">
  40. <span>{{ scope.$index + 1 }}</span>
  41. </template>
  42. </el-table-column>
  43. <el-table-column prop="paperName" width="250" label="分类名称"/>
  44. <el-table-column prop="paperTypeName" width="300" label="纸张类型名称"/>
  45. <el-table-column
  46. prop="status"
  47. label="状态">
  48. <template #default="{row}">
  49. <el-tag v-if="row.voidFlag==0" type="success">
  50. 正常
  51. </el-tag>
  52. <el-tag v-else="row.voidFlag==1" type="danger">
  53. 停用
  54. </el-tag>
  55. </template>
  56. </el-table-column>
  57. <el-table-column
  58. prop="createTime"
  59. label="创建时间"
  60. width="155">
  61. <template #default="{row}">
  62. <span v-if="row.createTime">
  63. {{ $filters.getTime(row.createTime) }}
  64. </span>
  65. </template>
  66. </el-table-column>
  67. </el-table>
  68. <pagination
  69. v-if="total > 0"
  70. v-model:total="total"
  71. v-model:page="queryPage.pageIndex"
  72. v-model:limit="queryPage.pageSize"
  73. @pagination="getTableData"
  74. />
  75. </div>
  76. </el-dialog>
  77. </div>
  78. </template>
  79. <script setup lang="ts">
  80. import {
  81. getPaperBaseInfoList
  82. } from "@/api/baseInfo";
  83. import { ElTable } from 'element-plus'
  84. const tableRef = ref<InstanceType<typeof ElTable>>()
  85. import {useTable} from '@/hooks/useTable'
  86. let dialogVisible = ref(false)
  87. let dialogTitle = ref("")
  88. const emit = defineEmits(['tableChange'])
  89. const queryForm = reactive({
  90. keyWord: '',
  91. voidFlag: 0
  92. })
  93. function checkRow(row) {
  94. dialogVisible.value = false
  95. emit('tableChange',row);
  96. }
  97. /**关闭弹窗 */
  98. function closeDialog() {
  99. dialogVisible.value = false
  100. }
  101. const {
  102. tableData,
  103. queryPage,
  104. total,
  105. loading,
  106. getTableData,
  107. tableHeight,
  108. handleSearch,//搜索
  109. } = useTable(getPaperBaseInfoList, queryForm);
  110. defineExpose({
  111. dialogVisible,
  112. dialogTitle
  113. })
  114. </script>
  115. <style scoped lang="scss">
  116. :deep(.el-dialog__body){
  117. padding-top: 0px !important;
  118. }
  119. </style>