JcJyTemplate.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <script setup>
  2. import {getTemplateByCodeAndType} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
  3. import {getWindowSize} from "@/utils/window-size";
  4. import {BizException, ExceptionEnum} from "@/utils/BizException";
  5. import XEUtils from 'xe-utils'
  6. const {isCheck, data} = defineProps({
  7. isCheck: {
  8. type: Boolean,
  9. default: true
  10. },
  11. data: {
  12. type: Array,
  13. }
  14. })
  15. const emits = defineEmits(['node-click', 'delClick'])
  16. const vxeTableRef = ref(null)
  17. const dialog = ref(false)
  18. const tempList = ref([])
  19. const cellClick = ({row}) => {
  20. getTemplateByCodeAndType(row.code, isCheck ? '3' : '2').then((res) => {
  21. dialog.value = true
  22. tempList.value = res
  23. })
  24. }
  25. const tempClick = (val) => {
  26. let {row, column} = val
  27. if (column.type !== 'checkbox') {
  28. vxeTableRef.value.toggleCheckboxRow(row);
  29. }
  30. }
  31. const confirm = () => {
  32. let temp = vxeTableRef.value.getCheckboxRecords()
  33. if (XEUtils.isEmpty(temp)) {
  34. BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择数据。");
  35. }
  36. selectAll(temp)
  37. }
  38. const selectAll = (data) => {
  39. if (data) {
  40. data.forEach(item => {
  41. emits('node-click', item)
  42. })
  43. }
  44. dialog.value = false
  45. }
  46. </script>
  47. <template>
  48. <vxe-table :height="662"
  49. style="width: 220px"
  50. border
  51. @cell-click="cellClick"
  52. :scroll-x="{gt: 50}"
  53. :scroll-y="{gt: 10}"
  54. :column-config="{resizable: true}"
  55. :row-config="{height: 24}"
  56. class="vxe-padding_zero vxe-header-max_content vxe-scroll_15"
  57. show-header-overflow
  58. show-overflow
  59. :data="data">
  60. <vxe-column field="name" title="名称"/>
  61. <vxe-column title="操作">
  62. <template #default="scope">
  63. <el-button type="danger" text @click.stop.prevent="emits('delClick',scope.row)">删除</el-button>
  64. </template>
  65. </vxe-column>
  66. </vxe-table>
  67. <el-dialog v-model="dialog" title="模板">
  68. <vxe-table :data="tempList"
  69. :height="getWindowSize.h - 400"
  70. style="width: 100%"
  71. border
  72. ref="vxeTableRef"
  73. :scroll-x="{gt: 50}"
  74. :scroll-y="{gt: 10}"
  75. @cell-click="tempClick"
  76. :column-config="{resizable: true}"
  77. :row-config="{height: 24}"
  78. class="vxe-header-max_content vxe-scroll_15"
  79. show-header-overflow
  80. show-overflow>
  81. <vxe-column type="checkbox" width="60">
  82. </vxe-column>
  83. <vxe-column field="name" title="名称"/>
  84. </vxe-table>
  85. <template #footer>
  86. <el-button type="danger" @click="dialog = false">取消</el-button>
  87. <el-button type="primary" @click="confirm">确认</el-button>
  88. </template>
  89. </el-dialog>
  90. </template>
  91. <style scoped lang="scss">
  92. </style>