优化页面

src/router/modules/base.js

@@ -119,7 +119,7 @@ export default [
             {
                 path: '/debit-pay/start-work',
                 name: 'debit-pay-start-work',
-                redirect: '/debit-pay/material/contract',
+                redirect: '/debit-pay/start-work/period',
                 meta: { title: '开工预付款计量申请' },
                 children: [
                     {

src/styles/app/element.scss

@@ -36,6 +36,9 @@
     .el-button + .el-button {
         margin-left: 8px;
     }
+    .el-link + .el-link {
+        margin-left: 8px;
+    }
 }
 .form-item-div {
     height: auto;
@@ -55,3 +58,7 @@
         margin-left: 6px;
     }
 }
+.el-form.no-rules .el-form-item {
+    align-items: center;
+    margin-bottom: 0;
+}

src/views/debit-pay/admin/book.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="开工预付款报表册">
+        原页面404，不知道功能是什么
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayAdminBook',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/admin/certificate.vue

@@ -1,8 +1,84 @@
 <template>
+    <hc-card title="中期支付证书列表">
+        <template #extra>
+            <el-button hc-btn type="primary" @click="addModalClick">
+                <HcIcon name="add" />
+                <span>新增</span>
+            </el-button>
+        </template>
+        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #action="{ row }">
+                <el-link type="primary">查看报表</el-link>
+                <el-link type="success" @click="rowEditClick(row)">修改</el-link>
+                <el-link type="danger">删除</el-link>
+                <el-link>重新计算</el-link>
+                <el-link type="warning">锁定</el-link>
+            </template>
+        </hc-table>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
+
+        <!-- 中间计量新增 -->
+        <HcAddModal v-model="addModalShow" />
+
+        <!-- 中间计量新增 -->
+        <HcEditModal v-model="editModalShow" />
+    </hc-card>
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
+import HcAddModal from './components/certificate/addModal.vue'
+import HcEditModal from './components/certificate/editModal.vue'
+
+defineOptions({
+    name: 'DebitPayAdminCertificate',
+})
+
+//渲染完成
+onMounted(() => {
+
+})
+
+//搜索表单
+const searchForm = ref({
+    current: 1, size: 10, total: 0,
+})
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    { key: 'key1', name: '期号' },
+    { key: 'key2', name: '证书编号' },
+    { key: 'key3', name: '开始日期' },
+    { key: 'key4', name: '结束日期' },
+    { key: 'key5', name: '打印日期' },
+    { key: 'key6', name: '重新计算时间' },
+    { key: 'key7', name: '支付金额' },
+    { key: 'action', name: '操作', width: 260 },
+])
+const tableData = ref([
+    { key1: '1111' },
+])
+
+//新增
+const addModalShow = ref(false)
+const addModalClick = () => {
+    addModalShow.value = true
+}
 
+//修改
+const editModalShow = ref(false)
+const rowEditClick = (row) => {
+    editModalShow.value = true
+}
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/admin/components/certificate/addModal.vue

@@ -0,0 +1,84 @@
+<template>
+    <hc-dialog is-to-body is-footer-center widths="30rem" :show="isShow" title="新增中期支付证书" @save="addModalSave" @close="addModalClose">
+        <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
+            <el-form-item label="计量期：" prop="key1">
+                <el-select v-model="formModel.key1" block>
+                    <el-option label="第一期" :value="1" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="证书编号：" prop="key2">
+                <el-input v-model="formModel.key2" />
+            </el-form-item>
+            <el-form-item label="材料计量期：" prop="key3">
+                <div class="form-item-div">
+                    <el-radio-group v-model="formModel.key3">
+                        <el-radio :label="3">第一期</el-radio>
+                        <el-radio :label="6">第二期</el-radio>
+                        <el-radio :label="9">第三期</el-radio>
+                    </el-radio-group>
+                </div>
+            </el-form-item>
+            <el-form-item label="开工预付计量期：" prop="key4">
+                <div class="form-item-div text-orange">无开工计量期可进行关联</div>
+            </el-form-item>
+            <el-form-item label="打印日期：">
+                <div class="form-item-div" />
+            </el-form-item>
+        </el-form>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听
+watch(() => [
+    props.ids,
+], ([ids]) => {
+    console.log('ids', ids)
+}, { immediate: true })
+
+//监听
+watch(isShow, (val) => {
+    if (val) {
+        console.log('处理数据')
+    }
+})
+
+//表单数据
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {}
+
+
+const addModalSave = () => {
+    emit('finish')
+    addModalClose()
+}
+
+//关闭弹窗
+const addModalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/debit-pay/admin/components/certificate/editModal.vue

@@ -0,0 +1,138 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="isShow" title="修改中期支付证书" @save="addModalSave" @close="addModalClose">
+        <el-scrollbar>
+            <!-- 基础表单 -->
+            <hc-card-item>
+                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto">
+                    <el-row :gutter="20">
+                        <el-col :span="8">
+                            <el-form-item label="计量期：">
+                                <el-input v-model="formModel.key1" disabled />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="证书编号：">
+                                <el-input v-model="formModel.key2" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" />
+                        <el-col :span="8">
+                            <el-form-item label="开始日期：">
+                                <el-date-picker v-model="formModel.key3" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="结束日期：">
+                                <el-date-picker v-model="formModel.key4" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="打印日期：">
+                                <el-date-picker v-model="formModel.key5" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <el-form class="no-rules" :model="formModel" label-position="left" label-width="auto">
+                    <el-form-item label="开工预付计量期：">
+                        <div class="form-item-div hc-flex flex-1">
+                            <el-radio-group v-model="formModel.key6">
+                                <el-radio :label="3">第一期</el-radio>
+                                <el-radio :label="6">第二期</el-radio>
+                                <el-radio :label="9">第三期</el-radio>
+                            </el-radio-group>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="材料计量期：">
+                        <div class="form-item-div hc-flex flex-1">
+                            <el-radio-group v-model="formModel.key7">
+                                <el-radio :label="3">第一期</el-radio>
+                                <el-radio :label="6">第二期</el-radio>
+                                <el-radio :label="9">第三期</el-radio>
+                            </el-radio-group>
+                        </div>
+                    </el-form-item>
+                </el-form>
+            </hc-card-item>
+
+            <!-- 表格数据 -->
+            <hc-card-item class="mt-3">
+                <hc-table :is-index="false" :column="tableColumn" :datas="tableData">
+                    <template #key8="{ row }">
+                        <hc-table-input v-model="row.key8" disabled />
+                    </template>
+                </hc-table>
+            </hc-card-item>
+        </el-scrollbar>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听
+watch(() => [
+    props.ids,
+], ([ids]) => {
+    console.log('ids', ids)
+}, { immediate: true })
+
+//监听
+watch(isShow, (val) => {
+    if (val) {
+        console.log('处理数据')
+    }
+})
+
+//表单数据
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {}
+
+//表格数据
+const tableColumn = ref([
+    { key: 'key1', name: '支付章号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '合同金额(元)' },
+    { key: 'key4', name: '变更金额(元)' },
+    { key: 'key5', name: '变更后的金额(元)' },
+    { key: 'key6', name: '本期未累计完成(元)' },
+    { key: 'key7', name: '上期未累计完成(元)' },
+    { key: 'key8', name: '本期完成(元)' },
+])
+const tableData = ref([
+    { key1: '1111' },
+])
+
+
+const addModalSave = () => {
+    emit('finish')
+    addModalClose()
+}
+
+//关闭弹窗
+const addModalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/debit-pay/ledgers/collect.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="合同段计量支付汇总">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayLedgersCollect',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/ledgers/debit.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="计量支付台账">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayLedgersDebit',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/ledgers/detail.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="各期计量支付明细">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayLedgersDetail',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/ledgers/payment.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="各期章节计量支付明细">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayLedgersPayment',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/ledgers/section.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="章节完成投资柱状图">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayLedgersSection',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/ledgers/standards.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="各标完成投资柱状图">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayLedgersStandards',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/material/book.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="材料预付款报表手册">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayMaterialBook',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/material/contract.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="合同材料">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayMaterialContract',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/material/order.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="材料计量单">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayMaterialOrder',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/material/periods.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="材料预付款计量期">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayMaterialPeriods',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/project/certificate.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="结算支付证书">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayProjectCertificate',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/project/pay.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="结算支付">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayProjectPay',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/start-work/book.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="开工预付款报表手册">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayStartWorkBook',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/start-work/order.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="开工预付款计量单">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayStartWorkOrder',
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/start-work/period.vue

@@ -1,8 +1,13 @@
 <template>
+    <hc-card title="开工预付款计量期">
+        开发中...
+    </hc-card>
 </template>
 
 <script setup>
-
+defineOptions({
+    name: 'DebitPayStartWorkPeriod',
+})
 </script>
 
 <style scoped lang="scss">