certificate.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <hc-card title="结算支付证书">
  3. <template #extra>
  4. <el-button hc-btn type="primary" @click="addModalClick">
  5. <HcIcon name="add" />
  6. <span>新增</span>
  7. </el-button>
  8. </template>
  9. <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading">
  10. <template #action="{ row }">
  11. <el-link type="primary">查看报表</el-link>
  12. <el-link type="success" @click="rowEditClick(row)">修改</el-link>
  13. <el-link type="danger">删除</el-link>
  14. <el-link>重新计算</el-link>
  15. <el-link type="warning">锁定</el-link>
  16. </template>
  17. </hc-table>
  18. <template #action>
  19. <hc-pages :pages="searchForm" @change="pageChange" />
  20. </template>
  21. <!-- 中间计量新增 -->
  22. <HcAddModal v-model="addModalShow" />
  23. <!-- 中间计量新增 -->
  24. <HcEditModal v-model="editModalShow" />
  25. </hc-card>
  26. </template>
  27. <script setup>
  28. import { onMounted, ref } from 'vue'
  29. import HcAddModal from './components/certificate/addModal.vue'
  30. import HcEditModal from './components/certificate/editModal.vue'
  31. defineOptions({
  32. name: 'DebitPayProjectCertificate',
  33. })
  34. //渲染完成
  35. onMounted(() => {
  36. })
  37. //搜索表单
  38. const searchForm = ref({
  39. current: 1, size: 10, total: 0,
  40. })
  41. //分页
  42. const pageChange = ({ current, size }) => {
  43. searchForm.value.current = current
  44. searchForm.value.size = size
  45. }
  46. //表格数据
  47. const tableLoading = ref(false)
  48. const tableColumn = ref([
  49. { key: 'key1', name: '证书编号' },
  50. { key: 'key2', name: '核定结算金额' },
  51. { key: 'key3', name: '实际结算金额' },
  52. { key: 'key4', name: '打印日期' },
  53. { key: 'key5', name: '重新计算时间' },
  54. { key: 'action', name: '操作', width: 260 },
  55. ])
  56. const tableData = ref([
  57. { key1: '1111' },
  58. ])
  59. //新增
  60. const addModalShow = ref(false)
  61. const addModalClick = () => {
  62. addModalShow.value = true
  63. }
  64. //修改
  65. const editModalShow = ref(false)
  66. const rowEditClick = (row) => {
  67. editModalShow.value = true
  68. }
  69. </script>
  70. <style scoped lang="scss">
  71. </style>