Halaman utama Jelajahi Bantuan
Daftar Masuk
web
/
measure
8
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

中间计量申请、中期支付证书

ZaiZai 2 tahun lalu
induk
beeccde864
melakukan
14d8b0b6e2
8 mengubah file dengan 905 tambahan dan 14 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 7 7
      index.html
  2. 83 3
      src/views/periods/admin/certificate.vue
  3. 70 0
      src/views/periods/admin/components/addBillBaseModal.vue
  4. 113 0
      src/views/periods/admin/components/detailsModal.vue
  5. 233 0
      src/views/periods/admin/components/middle/addModal.vue
  6. 67 0
      src/views/periods/admin/components/middle/linkAlterModal.vue
  7. 188 0
      src/views/periods/admin/components/middle/linkWarranty.vue
  8. 144 4
      src/views/periods/admin/middle.vue

+ 7 - 7
index.html
Tampilan Berkas 

@@ -1,13 +1,13 @@
 
 <!DOCTYPE html>
 
 <html lang="zh">
 
     <head>
 
-        <meta charset="UTF-8"/>
 
-        <link rel="icon" href="/favicon.ico"/>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
-        <link rel="stylesheet" href="/plugins/element-plus/index.css"/>
 
-        <link rel="stylesheet" href="/plugins/element-plus/theme-chalk/dark/css-vars.css"/>
 
-        <link rel="stylesheet" href="/plugins/remixicon/remixicon.css"/>
 
-        <link rel="stylesheet" href="/plugins/fonts/index.css"/>
 
+        <meta charset="UTF-8" />
 
+        <link rel="icon" href="/favicon.ico" />
 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+        <link rel="stylesheet" href="/plugins/element-plus/index.css" />
 
+        <link rel="stylesheet" href="/plugins/element-plus/theme-chalk/dark/css-vars.css" />
 
+        <link rel="stylesheet" href="/plugins/remixicon/remixicon.css" />
 
+        <link rel="stylesheet" href="/plugins/fonts/index.css" />
 
         <title>计量支付系统</title>
 
     </head>
 
     <body>

+ 83 - 3
src/views/periods/admin/certificate.vue
Tampilan Berkas 

@@ -1,15 +1,47 @@
 
 <template>
 
     <hc-card>
 
         <template #header>
 
-            1
 
+            <div class="w-40">
 
+                <el-select v-model="searchForm.key1" filterable block placeholder="选择单项工程">
 
+                    <el-option label="一工区" value="1" />
 
+                    <el-option label="二工区" value="2" />
 
+                </el-select>
 
+            </div>
 
         </template>
 
         <template #extra>
 
-            <el-button hc-btn type="primary">
 
+            <el-button hc-btn type="primary" @click="addModalClick">
 
                 <HcIcon name="add" />
 
                 <span>新增</span>
 
             </el-button>
 
         </template>
 
-        1111
 
+        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading">
 
+            <template #action="{ row }">
 
+                <el-link type="primary">查看报表</el-link>
 
+                <el-link type="success">修改</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>
 
+        <!-- 新增中期支付证书 -->
 
+        <hc-dialog is-to-body is-footer-center widths="30rem" :show="addModalShow" 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="打印日期：">
 
+                    <div class="form-item-div" />
 
+                </el-form-item>
 
+            </el-form>
 
+        </hc-dialog>
 
     </hc-card>
 
 </template>
 
 
@@ -24,6 +56,54 @@ defineOptions({
 
 onMounted(() => {
 
 
 })
 
+
 
+//搜索表单
 
+const searchForm = ref({
 
+    key1: null, 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 formRef = ref(null)
 
+const formModel = ref({})
 
+const formRules = {}
 
+
 
+
 
+const addModalSave = () => {
 
+    addModalClose()
 
+}
 
+
 
+//关闭弹窗
 
+const addModalClose = () => {
 
+    addModalShow.value = false
 
+}
 
 </script>
 
 
 <style scoped lang="scss">

+ 70 - 0
src/views/periods/admin/components/addBillBaseModal.vue
Tampilan Berkas 

@@ -0,0 +1,70 @@
 
+<template>
 
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="isShow" title="添加分解清单" @save="modalSave" @close="modalClose">
 
+        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
 
+    </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 tableLoading = ref(false)
 
+const tableColumn = [
 
+    { key: 'key1', name: '清单编号' },
 
+    { key: 'key2', name: '清单名称' },
 
+    { key: 'key3', name: '单价(元)' },
 
+    { key: 'key4', name: '合同数量' },
 
+    { key: 'key5', name: '合同变更后数量' },
 
+    { key: 'key6', name: '施工图变更后数量' },
 
+    { key: 'key7', name: '分解剩余量' },
 
+]
 
+const tableData = ref([
 
+    { key1: '1111' },
 
+])
 
+
 
+//表格选择
 
+const tableCheckChange = (checks) => {
 
+    console.log(checks)
 
+}
 
+const modalSave = () => {
 
+    emit('finish')
 
+    modalClose()
 
+}
 
+const modalClose = () => {
 
+    isShow.value = false
 
+    emit('close')
 
+}
 
+</script>
 
+
 
+<style scoped lang="scss">
 
+
 
+</style>

+ 113 - 0
src/views/periods/admin/components/detailsModal.vue
Tampilan Berkas 

@@ -0,0 +1,113 @@
 
+<template>
 
+    <hc-dialog ui="is-no-footer" is-to-body is-table :footer="false" widths="1200px" :show="isShow" title="收方清单明细" @close="modalClose">
 
+        <div class="relative h-full">
 
+            <div id="hc_details_table">
 
+                <hc-card-item>
 
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" />
 
+                    <template #action>
 
+                        <hc-pages :pages="searchForm" @change="pageChange" />
 
+                    </template>
 
+                </hc-card-item>
 
+            </div>
 
+            <div id="hc_details_list">
 
+                <hc-card-item>
 
+                    <hc-table :column="tableColumn1" :datas="tableData1" />
 
+                </hc-card-item>
 
+            </div>
 
+        </div>
 
+    </hc-dialog>
 
+</template>
 
+
 
+<script setup>
 
+import { nextTick, ref, watch } from 'vue'
 
+
 
+const props = defineProps({
 
+    ids: {
 
+        type: [String, Number],
 
+        default: '',
 
+    },
 
+})
 
+
 
+//事件
 
+const emit = defineEmits(['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) {
 
+        detailsModalShow()
 
+    }
 
+})
 
+
 
+const detailsModalShow = () => {
 
+    nextTick(() => {
 
+        window.$split(['#hc_details_table', '#hc_details_list'], {
 
+            direction: 'vertical',
 
+            sizes: [70, 30],
 
+            snapOffset: 0,
 
+            minSize: [170, 500],
 
+        })
 
+    })
 
+}
 
+
 
+//搜索表单
 
+const searchForm = ref({
 
+    key1: null, current: 1, size: 10, total: 0,
 
+})
 
+
 
+//分页
 
+const pageChange = ({ current, size }) => {
 
+    searchForm.value.current = current
 
+    searchForm.value.size = size
 
+}
 
+
 
+//表格数据
 
+const tableLoading = ref(false)
 
+const tableColumn = [
 
+    { key: 'key1', name: '清单编号' },
 
+    { key: 'key2', name: '清单名称' },
 
+    { key: 'key3', name: '变更后数量' },
 
+    { key: 'key4', name: '计量数量' },
 
+    { key: 'key5', name: '单价' },
 
+    { key: 'key6', name: '完成金额' },
 
+]
 
+const tableData = ref([
 
+    { key1: '1111' },
 
+])
 
+
 
+
 
+//详细明细
 
+const tableColumn1 = [
 
+    { key: 'key1', name: '凭证编号' },
 
+    { key: 'key2', name: '计量期' },
 
+    { key: 'key3', name: '工程部位' },
 
+    { key: 'key4', name: '审核状态' },
 
+    { key: 'key5', name: '本期计量数量' },
 
+    { key: 'key6', name: '计量总金额' },
 
+]
 
+const tableData1 = ref([
 
+    { key1: '1111' },
 
+])
 
+
 
+
 
+const modalClose = () => {
 
+    isShow.value = false
 
+    emit('close')
 
+}
 
+</script>
 
+
 
+<style scoped lang="scss">
 
+
 
+</style>

+ 233 - 0
src/views/periods/admin/components/middle/addModal.vue
Tampilan Berkas 

@@ -0,0 +1,233 @@
 
+<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 title="基础表单">
 
+                <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="left" label-width="auto">
 
+                    <el-row :gutter="20">
 
+                        <el-col :span="8">
 
+                            <el-form-item label="计量期：">
 
+                                <el-input v-model="baseForm.key1" disabled />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="8">
 
+                            <el-form-item label="计量单编号：">
 
+                                <el-input v-model="baseForm.key2" disabled />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="8">
 
+                            <el-form-item label="业务日期：">
 
+                                <el-date-picker v-model="baseForm.key3" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="16">
 
+                            <el-form-item label="工程划分：">
 
+                                <el-input v-model="baseForm.key4" disabled />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="8">
 
+                            <el-form-item label="部位名称：">
 
+                                <el-input v-model="baseForm.key5" />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="8">
 
+                            <el-form-item label="交工证书编号：">
 
+                                <el-input v-model="baseForm.key7" />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="8">
 
+                            <el-form-item label="排序号：">
 
+                                <el-input v-model="baseForm.key8" />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="8">
 
+                            <el-form-item label="计量金额：">
 
+                                <el-input v-model="baseForm.key6" disabled />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="12">
 
+                            <el-form-item class="nowrap" label="变更令：">
 
+                                <el-input v-model="baseForm.key6" disabled />
 
+                                <el-button type="primary" @click="linkAlterClick">关联变更令</el-button>
 
+                                <el-button type="primary" @click="linkWarrantyClick">关联质保资料</el-button>
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="12">
 
+                            <el-form-item label="检验日期：">
 
+                                <el-date-picker v-model="baseForm.key3" placeholder="中间交工或质量检验日期	" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="24">
 
+                            <el-form-item label="草图文件：">
 
+                                <hc-form-upload :src="baseForm.key9" />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                        <el-col :span="24">
 
+                            <el-form-item label="计算式：">
 
+                                <el-input v-model="baseForm.key10" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
 
+                            </el-form-item>
 
+                        </el-col>
 
+                    </el-row>
 
+                </el-form>
 
+            </hc-card-item>
 
+            <!-- 收方清单列表 -->
 
+            <hc-card-item class="mt-3">
 
+                <template #header>
 
+                    <span class="mr-3">计量清单列表</span>
 
+                    <span class="font-400 text-orange">温馨提示：超计,累计计量量> 变更后数量，分解清单超计整行红色</span>
 
+                </template>
 
+                <template #extra>
 
+                    <el-button type="primary" text @click="addBillBaseModalClick">
 
+                        <HcIcon name="add" />
 
+                        <span>添加</span>
 
+                    </el-button>
 
+                </template>
 
+                <hc-table :column="addTableColumn" :datas="addTableData">
 
+                    <template #key3="{ row }">
 
+                        <hc-table-input v-model="row.key3" disabled />
 
+                    </template>
 
+                    <template #key5="{ row }">
 
+                        <hc-table-input v-model="row.key5" disabled />
 
+                    </template>
 
+                    <template #key6="{ row }">
 
+                        <hc-table-input v-model="row.key6" />
 
+                    </template>
 
+                    <template #key7="{ row }">
 
+                        <hc-table-input v-model="row.key7" />
 
+                    </template>
 
+                    <template #key8="{ row }">
 
+                        <hc-table-input v-model="row.key8" />
 
+                    </template>
 
+                    <template #key9="{ row }">
 
+                        <hc-table-input v-model="row.key9" disabled />
 
+                    </template>
 
+                    <template #key10="{ row }">
 
+                        <hc-table-input v-model="row.key10" disabled />
 
+                    </template>
 
+                    <template #action="{ row }">
 
+                        <el-link type="danger">删除</el-link>
 
+                    </template>
 
+                </hc-table>
 
+            </hc-card-item>
 
+            <!-- 附件列表 -->
 
+            <hc-card-item class="mt-3" title="附件列表">
 
+                <template #extra>
 
+                    <span class="font-400 text-orange">可上传 图片(png、jpg、jpeg)、Excel(xls、xlsx)、PDF、Word(doc、docx)文件</span>
 
+                </template>
 
+                <el-form :model="baseForm" label-position="left" label-width="auto">
 
+                    <el-form-item label="上传附件">
 
+                        <hc-form-upload type="list" :src="baseForm.key11" />
 
+                    </el-form-item>
 
+                </el-form>
 
+            </hc-card-item>
 
+        </el-scrollbar>
 
+    </hc-dialog>
 
+
 
+    <!-- 添加分解清单 -->
 
+    <HcBillBaseModal v-model="addBillBaseModalShow" />
 
+
 
+    <!-- 关联变更令 -->
 
+    <HcLinkAlterModal v-model="linkAlterModal" />
 
+
 
+    <!-- 关联质保资料 -->
 
+    <HcLinkWarranty v-model="linkWarrantyModal" />
 
+
 
+    <!-- 文件上传组件 -->
 
+    <hc-upload-file ref="HcUploadFileRef" />
 
+</template>
 
+
 
+<script setup>
 
+import { ref, watch } from 'vue'
 
+import HcBillBaseModal from '../addBillBaseModal.vue'
 
+import HcLinkAlterModal from './linkAlterModal.vue'
 
+import HcLinkWarranty from './linkWarranty.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 HcUploadFileRef = ref(null)
 
+
 
+//基础表单
 
+const baseFormRef = ref(null)
 
+const baseForm = ref({})
 
+const baseFormRules = {}
 
+
 
+//收方清单列表
 
+const addTableColumn = ref([
 
+    { key: 'key1', name: '清单编号', width: '120' },
 
+    { key: 'key2', name: '清单名称', minWidth: '280' },
 
+    { key: 'key3', name: '单价(元)', width: '100' },
 
+    { key: 'key4', name: '分解数量', width: '100' },
 
+    { key: 'key5', name: '变更后数量', width: '100' },
 
+    { key: 'key6', name: '本期计划收方数量', width: '140' },
 
+    { key: 'key7', name: '本期实际收方数量', width: '140' },
 
+    { key: 'key8', name: '含变更数量', width: '100' },
 
+    { key: 'key9', name: '本期收方金额', width: '120' },
 
+    { key: 'key10', name: '累计收方量', width: '100' },
 
+    { key: 'action', name: '操作', fixed: 'right', width: 80, align: 'center' },
 
+])
 
+const addTableData = ref([
 
+    { key1: '101-1-a', key2: '按合同条款规定，提供建筑工程一切险' },
 
+])
 
+
 
+//关联变更令
 
+const linkAlterModal = ref(false)
 
+const linkAlterClick = () => {
 
+    linkAlterModal.value = true
 
+}
 
+
 
+//关联质保资料
 
+const linkWarrantyModal = ref(false)
 
+const linkWarrantyClick = () => {
 
+    linkWarrantyModal.value = true
 
+}
 
+
 
+//添加分解单
 
+const addBillBaseModalShow = ref(false)
 
+const addBillBaseModalClick = () => {
 
+    addBillBaseModalShow.value = true
 
+}
 
+
 
+const addModalSave = () => {
 
+    emit('finish')
 
+    addModalClose()
 
+}
 
+
 
+//关闭弹窗
 
+const addModalClose = () => {
 
+    isShow.value = false
 
+    emit('close')
 
+}
 
+</script>
 
+
 
+<style scoped lang="scss">
 
+
 
+</style>

+ 67 - 0
src/views/periods/admin/components/middle/linkAlterModal.vue
Tampilan Berkas 

@@ -0,0 +1,67 @@
 
+<template>
 
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="isShow" title="关联变更令" @save="modalSave" @close="modalClose">
 
+        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
 
+    </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 tableLoading = ref(false)
 
+const tableColumn = [
 
+    { key: 'key1', name: '变更令编号' },
 
+    { key: 'key2', name: '变更令名称' },
 
+    { key: 'key3', name: '变更令金额(元)' },
 
+    { key: 'key4', name: '变更令批复日期' },
 
+]
 
+const tableData = ref([
 
+    { key1: '1111' },
 
+])
 
+
 
+//表格选择
 
+const tableCheckChange = (checks) => {
 
+    console.log(checks)
 
+}
 
+const modalSave = () => {
 
+    emit('finish')
 
+    modalClose()
 
+}
 
+const modalClose = () => {
 
+    isShow.value = false
 
+    emit('close')
 
+}
 
+</script>
 
+
 
+<style scoped lang="scss">
 
+
 
+</style>

+ 188 - 0
src/views/periods/admin/components/middle/linkWarranty.vue
Tampilan Berkas 

@@ -0,0 +1,188 @@
 
+<template>
 
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="isShow" title="选择需要关联的检查的部位" @save="modalSave" @close="modalClose">
 
+        <hc-card>
 
+            <template #header>
 
+                <div class="w-60">
 
+                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入部位名称检索" @keyup="keyUpEvent" />
 
+                </div>
 
+                <div class="ml-2">
 
+                    <el-button type="primary" @click="searchClick">
 
+                        <HcIcon name="search-2" />
 
+                        <span>搜索</span>
 
+                    </el-button>
 
+                </div>
 
+            </template>
 
+            <template #extra>
 
+                <el-button type="danger" hc-btn class="mr-3">
 
+                    <HcIcon name="delete-bin" />
 
+                    <span>批量删除</span>
 
+                </el-button>
 
+                <hc-new-switch :datas="typeData" :keys="typeKey" :round="false" @change="typeChange" />
 
+            </template>
 
+            <div v-if="typeKey === '1'" class="relative h-full flex">
 
+                <div id="hc_tree_warranty">
 
+                    <hc-card-item scrollbar>
 
+                        <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
 
+                    </hc-card-item>
 
+                </div>
 
+                <div id="hc_table_warranty" class="flex-1">
 
+                    <hc-card-item>
 
+                        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
 
+                        <template #action>
 
+                            <hc-pages :pages="searchForm" @change="pageChange" />
 
+                        </template>
 
+                    </hc-card-item>
 
+                </div>
 
+            </div>
 
+            <div v-if="typeKey === '2'" class="relative h-full">
 
+                <hc-card-item>
 
+                    <hc-table :column="tableColumn1" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
 
+                    <template #action>
 
+                        <hc-pages :pages="searchForm" @change="pageChange" />
 
+                    </template>
 
+                </hc-card-item>
 
+            </div>
 
+        </hc-card>
 
+    </hc-dialog>
 
+</template>
 
+
 
+<script setup>
 
+import { nextTick, 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,
 
+})
 
+
 
+//数据类型
 
+const typeKey = ref('1')
 
+const typeData = ref([
 
+    { key: '1', name: '关联部位' },
 
+    { key: '2', name: '已关联部位' },
 
+])
 
+const typeChange = ({ key }) => {
 
+    typeKey.value = key
 
+    if (key === '1') {
 
+        setSplitRef()
 
+    }
 
+}
 
+
 
+
 
+//监听
 
+watch(() => [
 
+    props.ids,
 
+], ([ids]) => {
 
+    console.log('ids', ids)
 
+}, { immediate: true })
 
+
 
+//监听
 
+watch(isShow, (val) => {
 
+    if (val) {
 
+        setSplitRef()
 
+    }
 
+})
 
+
 
+//初始化设置拖动分割线
 
+const setSplitRef = () => {
 
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
 
+    nextTick(() => {
 
+        window.$split(['#hc_tree_warranty', '#hc_table_warranty'], {
 
+            sizes: [20, 80],
 
+            snapOffset: 0,
 
+            minSize: [50, 500],
 
+        })
 
+    })
 
+}
 
+
 
+//数据格式
 
+const treeProps = {
 
+    label: 'name',
 
+    children: 'children',
 
+    isLeaf: 'leaf',
 
+}
 
+
 
+//懒加载的数据
 
+const treeLoadNode = ({ level }, resolve) => {
 
+    if (level === 0) {
 
+        return resolve([{ name: 'region' }])
 
+    }
 
+    if (level > 3) {
 
+        return resolve([])
 
+    }
 
+    setTimeout(() => {
 
+        resolve([
 
+            { name: 'leaf', leaf: true },
 
+            { name: 'zone' },
 
+        ])
 
+    }, 500)
 
+}
 
+
 
+//内容搜索
 
+const searchForm = ref({
 
+    queryValue: null, current: 1, size: 20, total: 0,
 
+})
 
+
 
+//回车搜索
 
+const keyUpEvent = (e) => {
 
+    if (e.key === 'Enter') {
 
+        searchForm.value.current = 1
 
+    }
 
+}
 
+
 
+//搜索
 
+const searchClick = () => {
 
+    searchForm.value.current = 1
 
+}
 
+
 
+//分页被点击
 
+const pageChange = ({ current, size }) => {
 
+    searchForm.value.current = current
 
+    searchForm.value.size = size
 
+}
 
+
 
+
 
+//表格数据
 
+const tableLoading = ref(false)
 
+const tableColumn = [
 
+    { key: 'key1', name: '文件名称' },
 
+    { key: 'key2', name: '部位名称' },
 
+    { key: 'key3', name: '资料完成状态' },
 
+]
 
+const tableData = ref([
 
+    { key1: '1111' },
 
+])
 
+const tableColumn1 = [
 
+    { key: 'key1', name: '文件名称' },
 
+    { key: 'key2', name: '桩号名称' },
 
+    { key: 'key3', name: '资料完成状态' },
 
+]
 
+
 
+
 
+//表格选择
 
+const tableCheckChange = (checks) => {
 
+    console.log(checks)
 
+}
 
+const modalSave = () => {
 
+    emit('finish')
 
+    modalClose()
 
+}
 
+const modalClose = () => {
 
+    isShow.value = false
 
+    emit('close')
 
+}
 
+</script>
 
+
 
+<style scoped lang="scss">
 
+
 
+</style>

+ 144 - 4
src/views/periods/admin/middle.vue
Tampilan Berkas 

@@ -1,20 +1,80 @@
 
 <template>
 
     <hc-card>
 
         <template #header>
 
-            1
 
+            <div class="w-40">
 
+                <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
 
+                    <el-option label="一工区" value="1" />
 
+                    <el-option label="二工区" value="2" />
 
+                </el-select>
 
+            </div>
 
+            <div class="ml-3 w-40">
 
+                <el-select v-model="searchForm.key2" filterable block placeholder="选择计量期">
 
+                    <el-option label="第一期" value="1" />
 
+                    <el-option label="第二期" value="2" />
 
+                </el-select>
 
+            </div>
 
         </template>
 
         <template #extra>
 
-            <el-button hc-btn type="primary">
 
+            <el-button hc-btn type="primary" @click="addModalClick">
 
                 <HcIcon name="add" />
 
                 <span>新增</span>
 
             </el-button>
 
+            <el-button hc-btn type="warning" @click="reportClick">
 
+                <HcIcon name="send-plane-2" />
 
+                <span>按期上报</span>
 
+            </el-button>
 
+            <el-button hc-btn type="success" @click="detailsModalClick">
 
+                <HcIcon name="file-list" />
 
+                <span>清单明细</span>
 
+            </el-button>
 
+            <el-button hc-btn type="success">
 
+                <HcIcon name="bar-chart-box" />
 
+                <span>查看报表</span>
 
+            </el-button>
 
         </template>
 
-        1111
 
+        <div class="relative h-full flex">
 
+            <div id="hc_tree_card">
 
+                <hc-card-item scrollbar>
 
+                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
 
+                </hc-card-item>
 
+            </div>
 
+            <div id="hc_table_card" class="flex-1">
 
+                <hc-card-item>
 
+                    <template #header>
 
+                        <div class="font-400 text-orange">本期计量总金额：0元</div>
 
+                    </template>
 
+                    <template #extra>
 
+                        <el-button hc-btn color="#626aef">
 
+                            <HcIcon name="sort-desc" :line="false" />
 
+                            <span>按部位排序</span>
 
+                        </el-button>
 
+                        <el-button hc-btn color="#626aef">
 
+                            <HcIcon name="sort-desc" :line="false" />
 
+                            <span>按录入时间排序</span>
 
+                        </el-button>
 
+                    </template>
 
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" />
 
+                    <template #action>
 
+                        <hc-pages :pages="searchForm" @change="pageChange" />
 
+                    </template>
 
+                </hc-card-item>
 
+            </div>
 
+        </div>
 
+        <!-- 中间收方新增 -->
 
+        <HcAddModal v-model="addModalShow" />
 
+
 
+        <!-- 清单明细 -->
 
+        <HcDetailsModal v-model="detailsModalShow" />
 
+
 
+        <!-- 上报弹窗 -->
 
+        <hc-report-dialog v-model="isReport" />
 
     </hc-card>
 
 </template>
 
 
 <script setup>
 
-import { onMounted, ref } from 'vue'
 
+import { nextTick, onMounted, ref } from 'vue'
 
+import HcAddModal from './components/middle/addModal.vue'
 
+import HcDetailsModal from './components/detailsModal.vue'
 
 
 defineOptions({
 
     name: 'PeriodsAdminMiddle',
 
@@ -22,8 +82,88 @@ defineOptions({
 
 
 //渲染完成
 
 onMounted(() => {
 
+    setSplitRef()
 
+})
 
+
 
+
 
+//初始化设置拖动分割线
 
+const setSplitRef = () => {
 
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
 
+    nextTick(() => {
 
+        window.$split(['#hc_tree_card', '#hc_table_card'], {
 
+            sizes: [20, 80],
 
+            snapOffset: 0,
 
+            minSize: [50, 500],
 
+        })
 
+    })
 
+}
 
 
+//数据格式
 
+const treeProps = {
 
+    label: 'name',
 
+    children: 'children',
 
+    isLeaf: 'leaf',
 
+}
 
+
 
+//懒加载的数据
 
+const treeLoadNode = ({ level }, resolve) => {
 
+    if (level === 0) {
 
+        return resolve([{ name: 'region' }])
 
+    }
 
+    if (level > 3) {
 
+        return resolve([])
 
+    }
 
+    setTimeout(() => {
 
+        resolve([
 
+            { name: 'leaf', leaf: true },
 
+            { name: 'zone' },
 
+        ])
 
+    }, 500)
 
+}
 
+
 
+//搜索表单
 
+const searchForm = ref({
 
+    key1: null, 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: 'action', name: '操作', width: 200, align: 'center' },
 
+])
 
+const tableData = ref([
 
+    { key1: '1111' },
 
+])
 
+
 
+//中间收方新增
 
+const addModalShow = ref(false)
 
+const addModalClick = () => {
 
+    addModalShow.value = true
 
+}
 
+
 
+//收方清单明细
 
+const detailsModalShow = ref(false)
 
+const detailsModalClick = () => {
 
+    detailsModalShow.value = true
 
+}
 
+
 
+//是否上报
 
+const isReport = ref(false)
 
+const reportClick = () => {
 
+    isReport.value = true
 
+}
 
 </script>
 
 
 <style scoped lang="scss">