工区合同中间计量申请

src/views/periods/contract-admin/apply.vue

@@ -1,20 +1,71 @@
 <template>
     <hc-card>
         <template #header>
-            1
+            <div class="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">
                 <HcIcon name="add" />
-                <span>新增</span>
+                <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>
+
+        <!-- 清单明细 -->
+        <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 HcDetailsModal from './components/detailsModal.vue'
 
 defineOptions({
     name: 'PeriodsContractAdminApply',
@@ -22,8 +73,82 @@ 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 detailsModalShow = ref(false)
+const detailsModalClick = () => {
+    detailsModalShow.value = true
+}
+
+//是否上报
+const isReport = ref(false)
+const reportClick = () => {
+    isReport.value = true
+}
 </script>
 
 <style scoped lang="scss">

src/views/periods/contract-admin/components/detailsModal.vue

@@ -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>