changePre.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <hc-new-dialog is-table widths="90%" :show="isShow" title="引用预变更" @save="addModalSave" @close="addModalClose">
  3. <hc-card-item>
  4. <template #header>
  5. <div class="w-60">
  6. <el-input v-model="searchForm.key1" placeholder="变更方案编号" />
  7. </div>
  8. </template>
  9. <hc-table
  10. :column="tableColumn" :datas="tableData" :loading="tableLoading"
  11. is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
  12. @selection-change="tableCheckChange"
  13. />
  14. <template #action>
  15. <hc-pages :pages="searchForm" @change="pageChange" />
  16. </template>
  17. </hc-card-item>
  18. </hc-new-dialog>
  19. </template>
  20. <script setup>
  21. import { ref, watch } from 'vue'
  22. const props = defineProps({
  23. ids: {
  24. type: [String, Number],
  25. default: '',
  26. },
  27. })
  28. //事件
  29. const emit = defineEmits(['finish', 'close'])
  30. //双向绑定
  31. // eslint-disable-next-line no-undef
  32. const isShow = defineModel('modelValue', {
  33. default: false,
  34. })
  35. //监听
  36. watch(() => [
  37. props.ids,
  38. ], ([ids]) => {
  39. console.log('ids', ids)
  40. }, { immediate: true })
  41. //监听
  42. watch(isShow, (val) => {
  43. if (val) {
  44. console.log('isShow', val)
  45. }
  46. })
  47. //搜索表单
  48. const searchForm = ref({
  49. key1: null, current: 1, size: 10, total: 0,
  50. })
  51. //分页
  52. const pageChange = ({ current, size }) => {
  53. searchForm.value.current = current
  54. searchForm.value.size = size
  55. }
  56. //表格数据
  57. const tableLoading = ref(false)
  58. const tableColumn = ref([
  59. { key: 'key1', name: '变更方案编号' },
  60. { key: 'key2', name: '变更方案名称' },
  61. { key: 'key3', name: '业务日期' },
  62. { key: 'key4', name: '变更类型' },
  63. { key: 'key5', name: '变更申请金额' },
  64. ])
  65. const tableData = ref([
  66. { key1: '1111' },
  67. ])
  68. const tableCheckChange = () => {
  69. }
  70. const addModalSave = () => {
  71. emit('finish')
  72. addModalClose()
  73. }
  74. //关闭弹窗
  75. const addModalClose = () => {
  76. isShow.value = false
  77. emit('close')
  78. }
  79. </script>