up

src/global/components/hc-status/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="hc-page-status-box" :class="ui">
+        <div class="page-status">
+            <img class="page-status-img" :src="nowebp" alt="" v-if="isType === 'NoForm'"/>
+            <div class="page-status-desc">{{isText}}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref,watch} from "vue";
+import nowebp from '~src/assets/view/Web2x_x.webp';
+
+const props = defineProps({
+    ui: {
+        type: String,
+        default: ""
+    },
+    text: {
+        type: String,
+        default: "暂无相关数据"
+    },
+    type: {
+        type: String,
+        default: "NoForm"
+    },
+})
+
+//变量
+const isType = ref(props.type)
+const isText = ref(props.text)
+
+//监听
+watch(() => [
+    props.type,
+    props.text,
+], ([type, text]) => {
+    isType.value = type
+    isText.value = text
+})
+</script>
+
+<style lang="scss" scoped>
+.hc-page-status-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .page-status {
+        position: relative;
+        .page-status-img {
+            width: 350px;
+        }
+        .page-status-desc {
+            text-align: center;
+            font-size: 20px;
+            color: #aaa;
+        }
+    }
+}
+</style>

src/global/components/index.js

@@ -17,6 +17,7 @@ import HcReportModal from './hc-report-modal/index.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
 import HcContextMenu from './hc-context-menu/index.vue'
 import HcTabsSimple from './hc-tabs-simple/index.vue'
+import HcStatus from './hc-status/index.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -39,4 +40,5 @@ export const setupComponents = (App) => {
     App.component('HcTasksUser', HcTasksUser)
     App.component('HcContextMenu', HcContextMenu)
     App.component('HcTabsSimple', HcTabsSimple)
+    App.component('HcStatus', HcStatus)
 }

src/styles/ledger/query.scss

@@ -2,24 +2,6 @@
     position: relative;
     height: 100%;
     display: flex;
-    .hc-no-table-form {
-        position: relative;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .table-form-no {
-            position: relative;
-            img {
-                width: 350px;
-            }
-            .desc {
-                text-align: center;
-                font-size: 20px;
-                color: #aaa;
-            }
-        }
-    }
     .hc-layout-left {
         position: relative;
         width: 260px;
@@ -29,79 +11,10 @@
         background-color: #f1f5f8;
         box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
     }
-    .hc-layout-content {
+    /*.hc-layout-content {
         flex: 1;
-        display: flex;
-        flex-direction: column;
         position: relative;
         margin-left: 24px;
         height: 100%;
-        .hc-content-box {
-            flex: 1;
-            display: flex;
-            position: relative;
-            margin-bottom: 24px;
-            height: calc(100% - 105px);
-            .hc-table-forem-box {
-                flex: 1;
-                padding: 24px;
-                margin-right: 24px;
-                position: relative;
-                background: #f1f5f8;
-                border-radius: 10px;
-                box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
-            }
-            .hc-right-pian-box {
-                width: 360px;
-                position: relative;
-                padding: 24px 20px;
-                background: #f1f5f8;
-                border-radius: 10px;
-                box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
-                .hc-process-box {
-                    position: relative;
-                    flex: 1;
-                    overflow: hidden;
-                    .hc-scrollbar-box {
-                        display: contents;
-                    }
-                    .process-item-box {
-                        position: relative;
-                        color: #838791;
-                        font-size: 14px;
-                        padding: 8px 0;
-                        display: flex;
-                        align-items: flex-start;
-                        .process-item {
-                            position: relative;
-                            flex: 1;
-                        }
-                        .process-icon {
-                            font-size: 20px;
-                            cursor: pointer;
-                            margin-left: 16px;
-                            transition: color 0.2s;
-                            &:hover {
-                                color: var(--el-color-primary-light-3);
-                            }
-                        }
-                    }
-                    .process-item-box + .process-item-box {
-                        border-top: 0.5px solid #e9e9e9;
-                    }
-                }
-            }
-        }
-        .hc-footer-box {
-            position: relative;
-            height: 80px;
-            background: #f1f5f8;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            padding: 20px 24px;
-            box-shadow: -2px 0px 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03);
-            overflow: hidden;
-        }
-    }
+    }*/
 }

src/views/data-fill/components/nodeTree/index.vue

@@ -101,7 +101,7 @@ const getTreeOneLevel = async () => {
         contractId: contractId.value,
         contractIdRelation: '',
         primaryKeyId: '',
-        parentId: '0',
+        parentId: '',
     })
     //处理数据
     const res = getObjValue(data[0])

src/views/ledger/components/table-form.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="hc-layout-content">
+        <div class="hc-content-box">
+            <div class="hc-table-forem-box">
+                <HcStatus/>
+            </div>
+            <div class="hc-right-pian-box hc-flex-column">
+                <DateCalendar :dateData="dateData" @choice-date="dateCalendarChoice"/>
+                <el-alert title="蓝色代表当天已填写过日志" type="warning" show-icon/>
+                <div class="my-4">
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="add-circle"/>
+                        <span>关联工序</span>
+                    </el-button>
+                </div>
+                <div class="hc-process-box">
+                    <el-scrollbar>
+                        <div class="process-item-box">
+                            <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                            <HcIcon name="close-circle" fill class="process-icon"/>
+                        </div>
+                        <div class="process-item-box">
+                            <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                            <HcIcon name="close-circle" fill class="process-icon"/>
+                        </div>
+                        <div class="process-item-box">
+                            <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                            <HcIcon name="close-circle" fill class="process-icon"/>
+                        </div>
+                        <div class="process-item-box">
+                            <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                            <HcIcon name="close-circle" fill class="process-icon"/>
+                        </div>
+                        <div class="process-item-box">
+                            <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                            <HcIcon name="close-circle" fill class="process-icon"/>
+                        </div>
+                        <div class="process-item-box">
+                            <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                            <HcIcon name="close-circle" fill class="process-icon"/>
+                        </div>
+                        <div class="process-item-box">
+                            <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                            <HcIcon name="close-circle" fill class="process-icon"/>
+                        </div>
+                    </el-scrollbar>
+                </div>
+            </div>
+        </div>
+        <div class="hc-footer-box">
+            <HcTooltip keys="ledger_query_save_form">
+                <el-button type="primary" hc-btn>
+                    <HcIcon name="save"/>
+                    <span>保存</span>
+                </el-button>
+            </HcTooltip>
+            <HcTooltip keys="ledger_query_report_form">
+                <el-button hc-btn>
+                    <HcIcon name="send-plane-2"/>
+                    <span>上报</span>
+                </el-button>
+            </HcTooltip>
+            <HcTooltip keys="ledger_query_preview_form">
+                <el-button hc-btn>
+                    <HcIcon name="eye"/>
+                    <span>预览</span>
+                </el-button>
+            </HcTooltip>
+            <HcTooltip keys="ledger_query_copy_form">
+                <el-button hc-btn>
+                    <HcIcon name="file-copy-2"/>
+                    <span>复制当前表格及内容</span>
+                </el-button>
+            </HcTooltip>
+            <HcTooltip keys="ledger_query_add_form">
+                <el-button hc-btn>
+                    <HcIcon name="add-circle"/>
+                    <span>新增表格</span>
+                </el-button>
+            </HcTooltip>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch, onMounted} from "vue";
+import queryApi from '~api/ledger/query';
+import {getArrValue} from "vue-utils-plus"
+import DateCalendar from "./dateCalendar/index.vue"
+
+//参数
+const props = defineProps({
+    projectId: {
+        type: [String,Number],
+        default: ''
+    },
+    contractId: {
+        type: [String,Number],
+        default: ''
+    }
+})
+
+//变量
+const projectId = ref(props.projectId);
+const contractId = ref(props.contractId);
+
+//监听
+watch(() => [
+    props.projectId,
+    props.contractId,
+], ([pid, cid]) => {
+    projectId.value = pid;
+    contractId.value = cid;
+})
+
+//日历日期处理
+const dateData = ref(['2022-09-10','2022-09-12'])
+const dateCalendarChoice = ({date, choice, choices}) => {
+    console.log(date, choice, choices)
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-layout-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin-left: 24px;
+    height: 100%;
+    .hc-content-box {
+        flex: 1;
+        display: flex;
+        position: relative;
+        margin-bottom: 24px;
+        height: calc(100% - 105px);
+        .hc-table-forem-box {
+            flex: 1;
+            padding: 24px;
+            margin-right: 24px;
+            position: relative;
+            background: #f1f5f8;
+            border-radius: 10px;
+            box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
+        }
+        .hc-right-pian-box {
+            width: 360px;
+            position: relative;
+            padding: 24px 20px;
+            background: #f1f5f8;
+            border-radius: 10px;
+            box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
+            .hc-process-box {
+                position: relative;
+                flex: 1;
+                overflow: hidden;
+                .hc-scrollbar-box {
+                    display: contents;
+                }
+                .process-item-box {
+                    position: relative;
+                    color: #838791;
+                    font-size: 14px;
+                    padding: 8px 0;
+                    display: flex;
+                    align-items: flex-start;
+                    .process-item {
+                        position: relative;
+                        flex: 1;
+                    }
+                    .process-icon {
+                        font-size: 20px;
+                        cursor: pointer;
+                        margin-left: 16px;
+                        transition: color 0.2s;
+                        &:hover {
+                            color: var(--el-color-primary-light-3);
+                        }
+                    }
+                }
+                .process-item-box + .process-item-box {
+                    border-top: 0.5px solid #e9e9e9;
+                }
+            }
+        }
+    }
+    .hc-footer-box {
+        position: relative;
+        height: 80px;
+        background: #f1f5f8;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        padding: 20px 24px;
+        box-shadow: -2px 0px 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03);
+        overflow: hidden;
+    }
+}
+</style>

src/views/ledger/query.vue

@@ -1,17 +1,12 @@
 <template>
     <div class="hc-layout-box" v-loading="boxLoading">
         <HcCard ui="flex-1" v-if="false">
-            <div class="hc-no-table-form">
-                <div class="table-form-no">
-                    <img :src="nowebp" alt=""/>
-                    <div class="desc">暂无相关数据</div>
-                </div>
-            </div>
+            <HcStatus/>
         </HcCard>
         <div class="hc-layout-left">
             <el-scrollbar>
-                <el-menu default-active="2" class="hc-ledger-query-menu" unique-opened>
-                    <el-sub-menu v-for="item in menuOptions" :key="item?.primaryKeyId" :index="item?.primaryKeyId">
+                <el-menu :default-active="menuKey" class="hc-ledger-query-menu" unique-opened>
+                    <el-sub-menu v-for="item in menuDatas" :key="item?.primaryKeyId" :index="item?.primaryKeyId">
                         <template #title>{{item?.title}}</template>
                         <el-menu-item :index="`${item?.primaryKeyId}-form`">日志填报</el-menu-item>
                         <el-menu-item :index="`${item?.primaryKeyId}-table`">日志列表查看</el-menu-item>
@@ -19,105 +14,18 @@
                 </el-menu>
             </el-scrollbar>
         </div>
-        <div class="hc-layout-content">
-            <div class="hc-content-box">
-                <div class="hc-table-forem-box">
 
-                    <div class="hc-no-table-form">
-                        <div class="table-form-no">
-                            <img :src="nowebp" alt=""/>
-                            <div class="desc">暂无相关数据</div>
-                        </div>
-                    </div>
+        <HcTableForm :projectId="projectId" :contractId="contractId"/>
 
-                </div>
-                <div class="hc-right-pian-box hc-flex-column">
-                    <DateCalendar :dateData="dateData" @choice-date="dateCalendarChoice"/>
-                    <el-alert title="蓝色代表当天已填写过日志" type="warning" show-icon/>
-                    <div class="my-4">
-                        <el-button type="primary" hc-btn>
-                            <HcIcon name="add-circle"/>
-                            <span>关联工序</span>
-                        </el-button>
-                    </div>
-                    <div class="hc-process-box">
-                        <el-scrollbar>
-                            <div class="process-item-box">
-                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
-                                <HcIcon name="close-circle" fill class="process-icon"/>
-                            </div>
-                            <div class="process-item-box">
-                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
-                                <HcIcon name="close-circle" fill class="process-icon"/>
-                            </div>
-                            <div class="process-item-box">
-                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
-                                <HcIcon name="close-circle" fill class="process-icon"/>
-                            </div>
-                            <div class="process-item-box">
-                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
-                                <HcIcon name="close-circle" fill class="process-icon"/>
-                            </div>
-                            <div class="process-item-box">
-                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
-                                <HcIcon name="close-circle" fill class="process-icon"/>
-                            </div>
-                            <div class="process-item-box">
-                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
-                                <HcIcon name="close-circle" fill class="process-icon"/>
-                            </div>
-                            <div class="process-item-box">
-                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
-                                <HcIcon name="close-circle" fill class="process-icon"/>
-                            </div>
-                        </el-scrollbar>
-                    </div>
-                </div>
-            </div>
-            <div class="hc-footer-box">
-                <HcTooltip keys="ledger_query_save_form">
-                    <el-button type="primary" hc-btn>
-                        <HcIcon name="save"/>
-                        <span>保存</span>
-                    </el-button>
-                </HcTooltip>
-                <HcTooltip keys="ledger_query_report_form">
-                    <el-button hc-btn>
-                        <HcIcon name="send-plane-2"/>
-                        <span>上报</span>
-                    </el-button>
-                </HcTooltip>
-                <HcTooltip keys="ledger_query_preview_form">
-                    <el-button hc-btn>
-                        <HcIcon name="eye"/>
-                        <span>预览</span>
-                    </el-button>
-                </HcTooltip>
-                <HcTooltip keys="ledger_query_copy_form">
-                    <el-button hc-btn>
-                        <HcIcon name="file-copy-2"/>
-                        <span>复制当前表格及内容</span>
-                    </el-button>
-                </HcTooltip>
-                <HcTooltip keys="ledger_query_add_form">
-                    <el-button hc-btn>
-                        <HcIcon name="add-circle"/>
-                        <span>新增表格</span>
-                    </el-button>
-                </HcTooltip>
-            </div>
-        </div>
     </div>
 </template>
 
 <script setup>
-import {ref, watch, onMounted} from "vue";
+import {ref, onMounted} from "vue";
 import {useAppStore} from "~src/store";
-import nowebp from '~src/assets/view/Web2x_x.webp';
 import queryApi from '~api/ledger/query';
 import {getArrValue} from "vue-utils-plus"
-import DateCalendar from "./components/dateCalendar/index.vue"
-
+import HcTableForm from "./components/table-form.vue"
 
 //初始变量
 const useAppState = useAppStore()
@@ -133,7 +41,7 @@ onMounted(()=> {
 
 //获取当前合同段下的日志类型
 const boxLoading = ref(false)
-const menuOptions = ref([]);
+const menuDatas = ref([]);
 const queryLogList = async () => {
     boxLoading.value = true
     const {error, code, data} = await queryApi.queryLogList({
@@ -142,23 +50,18 @@ const queryLogList = async () => {
     //判断状态
     boxLoading.value = false
     if (!error && code === 200) {
-        menuOptions.value = getArrValue(data)
+        menuDatas.value = getArrValue(data)
     } else {
-        menuOptions.value = []
+        menuDatas.value = []
     }
 }
 
-//日历日期处理
-const dateData = ref(['2022-09-10','2022-09-12'])
-const dateCalendarChoice = ({date, choice, choices}) => {
-    console.log(date, choice, choices)
-}
-
 </script>
 
 <style lang="scss" scoped>
 @import "../../styles/ledger/query.scss";
 </style>
+
 <style lang="scss">
 .hc-ledger-query-menu.el-menu {
     padding: 5px 24px;