新主题

src/global/components/hc-new-card/hc-new-card.vue

@@ -0,0 +1,145 @@
+<template>
+    <HcCard class="hc-new-card-box">
+        <template v-if="isSlotHeader || titles || isSlotExtra || extraText">
+            <div class="hc-card-header-box">
+                <div class="hc-card-header">
+                    <div v-if="!isSlotHeader && titles" class="title">{{ titles }}</div>
+                    <slot v-if="isSlotHeader" name="header" />
+                </div>
+                <div v-if="isSlotExtra || extraText" class="hc-card-header-extra">
+                    <div v-if="!isSlotExtra && extraText" class="extra">{{ extraText }}</div>
+                    <slot v-if="isSlotExtra" name="extra" />
+                </div>
+            </div>
+        </template>
+        <div v-if="isSlotSearchBar" class="hc-card-search-bar">
+            <slot name="search" />
+        </div>
+        <div class="hc-card-main">
+            <div class="hc-card-main-body">
+                <template v-if="scrollbar">
+                    <el-scrollbar>
+                        <slot />
+                    </el-scrollbar>
+                </template>
+                <template v-else>
+                    <slot />
+                </template>
+            </div>
+        </div>
+        <div v-if="isSlotAction" class="hc-card-action">
+            <slot name="action" />
+        </div>
+    </HcCard>
+</template>
+
+<script setup>
+import { ref, useSlots, watch } from 'vue'
+const props = defineProps({
+    ui: {
+        type: String,
+        default: '',
+    },
+    title: {
+        type: [String, Number],
+        default: '',
+    },
+    extraText: {
+        type: [String, Number],
+        default: '',
+    },
+    scrollbar: {
+        type: Boolean,
+        default: false,
+    },
+    actionSize: {
+        type: [String, Number],
+        default: 'lg',
+    },
+    idRef: {
+        type: [String, Number],
+        default: '',
+    },
+    bodyUi: {
+        type: String,
+        default: '',
+    },
+    actionUi: {
+        type: String,
+        default: '',
+    },
+})
+
+const titles = ref(props.title)
+
+//监听
+watch(() => props.title, (val) => {
+    titles.value = val ?? ''
+})
+
+//判断<slot>是否有传值
+const slots = useSlots()
+const isSlotHeader = ref(!!slots.header)
+const isSlotExtra = ref(!!slots.extra)
+const isSlotAction = ref(!!slots.action)
+const isSlotSearchBar = ref(!!slots.search)
+</script>
+
+<style lang="scss">
+.el-card.hc-new-card-box {
+    background: white;
+    --el-card-padding: 10px;
+    .hc-card-main-box {
+        display: flex;
+        flex-direction: column;
+    }
+    .hc-card-header-box {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        height: auto;
+        border-bottom: 1px solid #E9E9E9;
+        margin-bottom: 10px;
+        .hc-card-header {
+            position: relative;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            .title {
+
+            }
+        }
+        .hc-card-header-extra {
+            position: relative;
+            display: flex;
+            align-items: center;
+            margin-left: 24px;
+            .extra {
+
+            }
+        }
+    }
+    .hc-card-search-bar {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+    .hc-card-main {
+        position: relative;
+        flex: 1;
+        flex-basis: auto;
+        .hc-card-main-body {
+            position: absolute;
+            inset: 0;
+        }
+    }
+    .hc-card-action {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+}
+</style>

src/global/components/hc-tab-card/hc-tab-card.vue

@@ -0,0 +1,106 @@
+<template>
+    <HcNewCard :scrollbar="scrollbar" class="hc-tab-card-box">
+        <template #header>
+            <div class="tab-card-header-tabs">
+                <template v-for="item in tabsData" :key="item.key">
+                    <div class="item" :class="item.key === tabsKey ? 'cur' : ''" @click="tabsClick(item)">{{ item.name }}</div>
+                </template>
+            </div>
+        </template>
+        <template v-if="isSlotExtra" #extra>
+            <slot name="extra" />
+        </template>
+        <slot />
+        <template v-if="isSlotAction" #action>
+            <slot name="action" />
+        </template>
+    </HcNewCard>
+</template>
+
+<script setup>
+import { ref, useSlots, watch } from 'vue'
+
+const props = defineProps({
+    tabs: {
+        type: Array,
+        default: () => ([]),
+    },
+    tabKey: {
+        type: [String, Number],
+        default: '1',
+    },
+    scrollbar: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['change'])
+
+//判断<slot>是否有传值
+const slots = useSlots()
+const isSlotExtra = ref(!!slots.extra)
+const isSlotAction = ref(!!slots.action)
+
+//监听表头
+const tabsData = ref(props.tabs)
+watch(() => props.tabs, (val) => {
+    tabsData.value = val
+}, { deep: true })
+
+//选项卡
+const tabsKey = ref(props.tabKey)
+watch(() => props.tabKey, (val) => {
+    tabsKey.value = val
+}, { deep: true })
+const tabsClick = (item) => {
+    tabsKey.value = item.key
+    if (item.key !== props.tabKey) {
+        emit('change', item)
+    }
+}
+</script>
+
+<style lang="scss">
+.el-card.hc-tab-card-box {
+    .hc-card-header-box {
+        border-color: #d4d4d4;
+        margin-top: -5px;
+    }
+    .tab-card-header-tabs {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex: 1;
+        .item {
+            position: relative;
+            height: 38px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 8px;
+            color: #747474;
+            cursor: pointer;
+            border: 1px solid white;
+            border-bottom: 0;
+            transition: .2s;
+        }
+        .item.cur {
+            cursor: default;
+            color: var(--el-color-primary);
+            background: white;
+            border-color: #d4d4d4;
+            &::after {
+                position: absolute;
+                content: '';
+                left: 0;
+                right: 0;
+                bottom: -1px;
+                height: 1px;
+                background: white;
+                z-index: 1;
+            }
+        }
+    }
+}
+</style>

src/global/components/index.js

@@ -5,6 +5,8 @@ import HcTasksUser from './hc-tasks-user/index.vue'
 import HcTableForm from './table-form/index.vue'
 import HcUploads from './hc-uploads/index.vue'
 import HcSmsAuth from './hc-sms-auth/index.vue'
+import HcNewCard from './hc-new-card/hc-new-card.vue'
+import HcTabCard from './hc-tab-card/hc-tab-card.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -15,4 +17,6 @@ export const setupComponents = (App) => {
     App.component('HcTableForm', HcTableForm)
     App.component('HcUploads', HcUploads)
     App.component('HcSmsAuth', HcSmsAuth)
+    App.component('HcNewCard', HcNewCard)
+    App.component('HcTabCard', HcTabCard)
 }

src/layout/index.scss

@@ -107,6 +107,11 @@
                 height: calc(100% - 36px);
                 overflow: hidden;
                 padding: 12px;
+                .hc-main-body {
+                    position: relative;
+                    height: 100%;
+                    overflow: hidden;
+                }
             }
         }
     }

src/layout/index.vue

@@ -28,7 +28,7 @@
                     <RouterMenu @load="routerMenuLoad" />
                 </div>
                 <div id="hc-main-box" class="hc-main-page">
-                    <div class="h-full">
+                    <div class="hc-main-body">
                         <router-view v-if="reloadRouter" v-slot="{ Component }">
                             <transition name="fade-transform">
                                 <keep-alive :max="10">

src/styles/app/element.scss

@@ -15,3 +15,19 @@
         text-align: left;
     }
 }
+
+
+//新改变版按钮
+.el-button[hc-btn] {
+    border-radius: 0;
+    padding: 0 10px;
+    font-weight: initial;
+    height: 28px;
+    font-size: 14px;
+    border: 0;
+    box-shadow: none;
+}
+
+.el-button + .el-button {
+    margin-left: 10px;
+}

src/styles/app/main.scss

@@ -2,6 +2,7 @@ html, body, #app {
     height: 100%;
     font-size: 14px;
     background-color: #F0F2F5;
+    overflow: hidden;
 }
 
 embed {

src/views/data-fill/collapse-form/index.scss

@@ -6,33 +6,63 @@ table {
     .hc-collapse-item-header {
         flex: 1;
         position: relative;
-        margin-left: 46px;
+        margin-left: 10px;
         display: flex;
         align-items: center;
+        .real-fill-rate {
+            position: relative;
+            height: 100%;
+            line-height: initial;
+            margin-right: 18px;
+            padding-right: 18px;
+            &::after {
+                content: "";
+                background: #bfc8cf;
+                position: absolute;
+                right: 0;
+                height: 100%;
+                width: 1px;
+                top: 0;
+            }
+            .tag {
+                position: relative;
+                background: white;
+                font-size: 12px;
+                color: #BD3124;
+                padding: 1px 6px;
+                border-radius: 3px;
+                border: 1px solid #BD3124;
+                margin-bottom: 2px;
+                margin-top: 2px;
+            }
+            .tag.yes {
+                color: #88CF65;
+                border-color: #88CF65;
+            }
+        }
         .item-title {
             flex: 1;
             position: relative;
             user-select: none;
-            color: #50545E;
+            color: #591BB7;
             font-size: 16px;
-            font-weight: 400;
+            font-weight: bold;
             cursor: pointer;
         }
         .hc-extra-text-box {
             position: relative;
             padding-right: 24px;
+            line-height: initial;
         }
     }
     .data-fill-list-item-content {
         position: relative;
-        display: flex;
-        height: calc(100vh - 386px);
+        height: calc(100vh - 222px);
         .data-fill-table-form-box {
-            flex: 1;
             position: relative;
-            height: 100%;
+            height: calc(100% - 36px);
             overflow: hidden;
-            border: 8px solid #c4c4c4;
+            border: 4px solid #c4c4c4;
             &.is-window {
                 border: 0;
                 .hc-window-tip {
@@ -55,64 +85,21 @@ table {
                 }
             }
         }
-        .hc-window-switch-box {
+        .data-fill-table-action {
+            position: relative;
             display: flex;
             align-items: center;
-            position: absolute;
-            top: 14px;
-            right: 260px;
-            .icon-btn-view {
-                padding: 0 18px;
-                height: 34px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: #ffffff;
+            padding: 4px 10px;
+            .tip-action {
                 cursor: pointer;
-                user-select: none;
-                border-radius: 80px;
-                box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -3px -2px 8px 0 #ffffff;
-                background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
-                background-size: 200%;
-                transition: background-position .5s;
-                .icon {
-                    font-size: 16px;
-                }
-                &:hover {
-                    background-position: 100% 0;
-                }
-            }
-        }
-        .data-fill-table-tip-box {
-            width: 240px;
-            position: relative;
-            border-left: 1px solid #E9E9E9;
-            padding: 20px 15px 80px;
-            .tip-title {
-                font-size: 16px;
-                margin-bottom: 10px;
-                display: flex;
-                align-items: center;
+                margin-right: 24px;
             }
-            .tip-item {
-                margin-bottom: 20px;
+            .link-action {
+                position: relative;
+                flex: 1;
             }
-            .table-tip-foot {
-                position: absolute;
-                bottom: 15px;
-                right: 0;
-                left: 0;
-                display: flex;
-                align-items: center;
-                padding: 0 15px;
-                .tip-left-btn {
-                    flex: 1;
-                    .dow-text {
-                        cursor: pointer;
-                        display: flex;
-                        align-items: center;
-                    }
-                }
+            .btn-action {
+                position: relative;
             }
         }
     }
@@ -120,3 +107,33 @@ table {
 .radio-group-box {
     text-align: center;
 }
+
+.data-fill-table-tip-box {
+    position: relative;
+    .tip-title {
+        font-size: 16px;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+    }
+    .tip-item {
+        margin-bottom: 20px;
+    }
+    .table-tip-foot {
+        position: absolute;
+        bottom: 15px;
+        right: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        padding: 0 15px;
+        .tip-left-btn {
+            flex: 1;
+            .dow-text {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}

src/views/data-fill/collapse-form/index.vue

@@ -8,92 +8,43 @@
             >
                 <template #title>
                     <div class="hc-collapse-item-header">
-                        <div class="text-lg truncate item-title">
-                            <span v-if="item.realFillRate > 0" class="text-blue mr-3"> 【已填报:{{ item.realFillRate }}%】</span> {{ item.nodeName }}
+                        <div class="real-fill-rate">
+                            <div class="tag" :class="item.realFillRate >= 80 ? 'yes' : ''">已填{{ item.realFillRate ?? 0 }}%</div>
+                            <HcTooltip v-if="isStatus !== 3" keys="wbs_preview_table">
+                                <el-link v-if="item.isBussShow === 2 || item.isTabPdf === 1 || item.pdfUrl === '' || item.pdfUrl === null" type="primary" disabled>本 表 预 览</el-link>
+                                <el-link v-else type="primary" :disabled="tableFormPreviewLoading" @click.stop="previewClick(item)">本 表 预 览</el-link>
+                            </HcTooltip>
                         </div>
+                        <div class="text-lg truncate item-title">{{ item.nodeName }}</div>
                         <div class="hc-extra-text-box">
                             <HcTooltip v-if="item.isCopeTab === 2 || item.isCopeTab === 3" keys="wbs_del_table">
-                                <el-button
-                                    :disabled="item.isBussShow === 2"
-                                    :loading="tableFormDelLoading"
-                                    plain
-                                    type="danger"
-                                    @click.stop="delClick(item, index)"
-                                >
-                                    删除本表
-                                </el-button>
+                                <el-link type="danger" :disabled="item.isBussShow === 2 || tableFormDelLoading" @click.stop="delClick(item, index)">删除本表</el-link>
                             </HcTooltip>
                             <HcTooltip keys="wbs_copy_table">
-                                <el-button
-                                    v-if="item.isLinkTable === 1 || item.isBussShow === 2"
-                                    disabled plain
-                                    type="info"
-                                >
-                                    复制本表
-                                </el-button>
-                                <el-button
-                                    v-else :loading="copyClickLoading" plain type="primary"
-                                    @click.stop="copyClick(item, index)"
-                                >
-                                    复制本表
-                                </el-button>
-                            </HcTooltip>
-                            <HcTooltip keys="wbs_hide_table">
-                                <el-button
-                                    :loading="tableFormHideLoading" plain type="primary"
-                                    @click.stop="hideClick(item, index)"
-                                >
-                                    <template v-if="item.isBussShow === 1 || item.isBussShow === null">
-                                        隐藏本表
-                                    </template>
-                                    <template v-else>
-                                        显示本表
-                                    </template>
-                                </el-button>
-                            </HcTooltip>
-                            <HcTooltip v-if="isStatus !== 3" keys="wbs_preview_table">
-                                <el-button
-                                    v-if="item.isBussShow === 2 || item.isTabPdf === 1 || item.pdfUrl === '' || item.pdfUrl === null"
-                                    disabled plain
-                                    type="info"
-                                >
-                                    预览
-                                </el-button>
-                                <el-button
-                                    v-else :loading="tableFormPreviewLoading" plain type="primary"
-                                    @click.stop="previewClick(item)"
-                                >
-                                    预览
-                                </el-button>
+                                <el-link v-if="item.isLinkTable === 1 || item.isBussShow === 2" type="primary" disabled>复制本表</el-link>
+                                <el-link v-else type="primary" :disabled="copyClickLoading" @click.stop="copyClick(item, index)">复制本表</el-link>
                             </HcTooltip>
                             <HcTooltip keys="wbs_upload_table">
-                                <el-button
-
-                                    :type="item.tabFileType === 2 ? 'success' : 'primary'" plain
-                                    @click.stop="uploadClick(item, index)"
-                                >
-                                    <template v-if="item.tabFileType === 2">
-                                        已上传
-                                    </template>
-                                    <template v-else>
-                                        上传
-                                    </template>
-                                </el-button>
+                                <el-link :type="item.tabFileType === 2 ? 'success' : 'primary'" @click.stop="uploadClick(item, index)">
+                                    <template v-if="item.tabFileType === 2">已上传</template>
+                                    <template v-else>附件上传</template>
+                                </el-link>
+                            </HcTooltip>
+                            <HcTooltip keys="wbs_hide_table">
+                                <el-link type="primary" :disabled="tableFormHideLoading" @click.stop="hideClick(item, index)">
+                                    <template v-if="item.isBussShow === 1 || item.isBussShow === null">隐藏本表</template>
+                                    <template v-else>显示本表</template>
+                                </el-link>
                             </HcTooltip>
                         </div>
                     </div>
                 </template>
-                <div
-                    :style="`height: calc(100vh - ${draw_type ? '555px' : '360px'});`"
-                    class="data-fill-list-item-content"
-                >
+                <div :style="`height: calc(100vh - ${draw_type ? '555px' : '222px'});`" class="data-fill-list-item-content">
                     <div v-if="item?.isWindow" class="data-fill-table-form-box is-window">
                         <div class="hc-window-tip">
                             <div class="table-form-no">
                                 <img :src="NoDataSvg" alt="">
-                                <div class="desc">
-                                    当前表单处于窗口模式，关闭相关窗口后恢复
-                                </div>
+                                <div class="desc">当前表单处于窗口模式，关闭相关窗口后恢复</div>
                             </div>
                         </div>
                     </div>
@@ -112,82 +63,41 @@
                             @rightTap="tableFormRightTap($event, index)"
                         />
                     </div>
-                    <div class="hc-window-switch-box">
-                        <el-tooltip
-                            :content="item.isWindow ? '关闭窗口并恢复' : '当前表单窗口化'" :hide-after="0"
-                            placement="top"
-                        >
-                            <div class="icon-btn-view" @click.stop="windowClick(item, index)">
-                                <template v-if="item.isWindow">
-                                    <HcIcon class="icon" name="picture-in-picture-2" />
-                                    <span class="ml-1">关闭窗口化</span>
-                                </template>
-                                <template v-else>
-                                    <HcIcon class="icon" name="picture-in-picture-exit" />
-                                    <span class="ml-1">表单窗口化</span>
-                                </template>
-                            </div>
-                        </el-tooltip>
-                    </div>
-                    <div class="data-fill-table-tip-box">
-                        <el-scrollbar>
-                            <div class="text-orange tip-title">
-                                <HcIcon fill name="information" ui="text-2xl" />
-                                <span class="ml-1">提示</span>
-                            </div>
-                            <div class="text-gray-400 tip-item">
-                                1、灰色框代表可通过系统识别计算，公式自动引用，可通过公式计算少量数据，(表头数据及简单)，也可只填写白色框数据
-                            </div>
-                            <div class="text-gray-400 tip-item">
-                                2、系统支持键盘中，shift +
-                                tab键向上一个填报框切换，tab向下一个填报框切换。Shift + 上 ( ↑ )、下 ( ↓ )、左 ( ← )、右 ( →
-                                )键，切换填报输入框焦点。
-                            </div>
-                            <div class="text-gray-400 tip-item">
-                                3、先点击一下表单任一区域，再键盘按住 ⌘/ctrl +
-                                点击，选择输入框，变为绿色边框，选中成功。选择完毕后，键盘按 ⌘/ctrl + c 复制所选中的数据，
-                                再其它表内，或同一张表内，再次按住 ⌘/ctrl + 点击，选择输入框。键盘按 ⌘/ctrl + v
-                                依次粘贴所选的数据。（目前仅支持输入框和文本框的操作）
-                            </div>
-                            <div class="text-orange-500 tip-item">
-                                4、完善资料填写后记得一定要保存哦
-                            </div>
-                        </el-scrollbar>
-                        <div class="table-tip-foot">
-                            <div class="tip-left-btn">
-                                <HcTooltip keys="wbs_import_table">
-                                    <div class="text-main dow-text" @click="uploadFileClick(item)">
-                                        <HcIcon name="publish" ui="text-lg" />
-                                        <span class="ml-1">导入表格数据</span>
-                                    </div>
-                                </HcTooltip>
-                                <HcUploadFile
-                                    ref="dataHcUploadFileRef"
-                                    :params="{ pKeyId: checkItem.pkeyId }"
-                                    :options="UploadFileOptions"
-                                    multiple="false"
-                                    @success="HcUploadFileSuccess"
-                                />
-                                <HcTooltip keys="wbs_download_table">
-                                    <div v-loading="downloadLoading" class="text-main dow-text" @click="downModal(item)">
-                                        <HcIcon name="file_download" ui="text-lg" />
-                                        <span class="ml-1">下载导入模板</span>
-                                    </div>
-                                </HcTooltip>
-                            </div>
-                            <div class="tip-right-btn">
-                                <HcTooltip keys="wbs_save_table">
-                                    <el-button
-                                        :disabled="!item?.isTableForm"
-                                        :loading="tableFormSaveLoading" hc-btn
-                                        type="primary"
-                                        @click="tableFormSaveClick(item)"
-                                    >
-                                        <HcIcon name="save" />
-                                        <span>保存</span>
-                                    </el-button>
-                                </HcTooltip>
-                            </div>
+                    <div class="data-fill-table-action">
+                        <div class="text-orange tip-action" @click="actionTipModal = true">
+                            <HcIcon fill name="information" ui="text-2xl" />
+                        </div>
+                        <div v-loading="downloadLoading" class="link-action">
+                            <HcTooltip keys="wbs_download_table">
+                                <el-link type="primary" :disabled="downloadLoading" @click="downModal(item)">下载导入模板</el-link>
+                            </HcTooltip>
+                            <HcTooltip keys="wbs_import_table">
+                                <el-link type="primary" @click="uploadFileClick(item)">导入表格数据</el-link>
+                            </HcTooltip>
+                            <HcUploadFile
+                                ref="dataHcUploadFileRef"
+                                :params="{ pKeyId: checkItem.pkeyId }"
+                                :options="UploadFileOptions"
+                                multiple="false"
+                                @success="HcUploadFileSuccess"
+                            />
+                        </div>
+                        <div class="btn-action">
+                            <el-tooltip :content="item.isWindow ? '关闭窗口并恢复' : '当前表单窗口化'" :hide-after="0" placement="top">
+                                <el-button type="primary" size="small" @click.stop="windowClick(item, index)">
+                                    <template v-if="item.isWindow">关闭窗口化</template>
+                                    <template v-else>表单窗口化</template>
+                                </el-button>
+                            </el-tooltip>
+                            <HcTooltip keys="wbs_save_table">
+                                <el-button
+                                    :disabled="!item?.isTableForm" :loading="tableFormSaveLoading"
+                                    color="#3794FF" size="small" style="color: white"
+                                    @click="tableFormSaveClick(item)"
+                                >
+                                    仅保存本表数据
+                                </el-button>
+                            </HcTooltip>
                         </div>
                     </div>
                 </div>
@@ -203,6 +113,29 @@
         <HcUpload :datas="uploadData" :file-list="fileListData" :is-canupload="isStatus == 3" @change="uploadChange" />
     </HcDialog>
 
+    <!-- 操作提示 -->
+    <HcDialog :footer="false" :show="actionTipModal" title="操作提示" widths="38rem" @close="actionTipModalClose">
+        <div class="data-fill-table-tip-box">
+            <div class="text-gray-400 tip-item">
+                1、灰色框代表可通过系统识别计算，公式自动引用，可通过公式计算少量数据，(表头数据及简单)，也可只填写白色框数据
+            </div>
+            <div class="text-gray-400 tip-item">
+                2、系统支持键盘中，shift +
+                tab键向上一个填报框切换，tab向下一个填报框切换。Shift + 上 ( ↑ )、下 ( ↓ )、左 ( ← )、右 ( →
+                )键，切换填报输入框焦点。
+            </div>
+            <div class="text-gray-400 tip-item">
+                3、先点击一下表单任一区域，再键盘按住 ⌘/ctrl +
+                点击，选择输入框，变为绿色边框，选中成功。选择完毕后，键盘按 ⌘/ctrl + c 复制所选中的数据，
+                再其它表内，或同一张表内，再次按住 ⌘/ctrl + 点击，选择输入框。键盘按 ⌘/ctrl + v
+                依次粘贴所选的数据。（目前仅支持输入框和文本框的操作）
+            </div>
+            <div class="text-orange-500 tip-item">
+                4、完善资料填写后记得一定要保存哦
+            </div>
+        </div>
+    </HcDialog>
+
     <!-- 插入设计值/频率 -->
     <HcDialog
         :loading="designModalLoading" :show="designModal" is-to-body save-text="确认插入"
@@ -1666,6 +1599,14 @@ const waterSaveClick = async ()=>{
     waterModal.value = false
 }
 
+
+//操作提示
+const actionTipModal = ref(false)
+const actionTipModalClose = () => {
+    actionTipModal.value = false
+}
+
+
 // 暴露出去
 defineExpose({
     getFormData,

src/views/data-fill/collapse-form/style.scss

@@ -7,11 +7,11 @@
 
 .data-fill-list-box {
     .el-collapse {
-        --el-collapse-header-height: 60px;
+        --el-collapse-header-height: 50px;
         border: 0;
         .el-collapse-item {
-            margin: 0 0 16px;
-            background-color: #f1f5f8;
+            margin: 0 0 6px;
+            background-color: #E6EEF4;
             border: 1px solid #E9E9E9;
             border-radius: 4px;
         }
@@ -22,11 +22,7 @@
             cursor: default;
             font-size: 14px;
             .el-collapse-item__arrow {
-                position: absolute;
-                color: #50545E;
-                cursor: pointer;
-                left: 20px;
-                margin: 0;
+               display: none;
             }
         }
         .el-collapse-item.is-active .el-collapse-item__header.is-active {
@@ -44,6 +40,18 @@
             }
         }
     }
+    .hc-collapse-item-header .real-fill-rate .el-link {
+        font-size: 12px;
+    }
+    .el-link {
+        text-decoration: underline;
+        &:hover {
+            text-decoration: auto;
+        }
+    }
+    .el-link + .el-link {
+        margin-left: 20px;
+    }
 }
 .data-fill-list-box .data-fill-table-form-box .hc-table-form-data-item {
     padding: 0;

src/views/data-fill/wbs.vue

@@ -74,26 +74,48 @@
                     <HcIcon v-show="isWbsTreeShow" name="arrow-left-s" />
                     <HcIcon v-show="!isWbsTreeShow" name="arrow-right-s" />
                 </div>
-                <HcCard class="bg-white" action-ui="text-center">
-                    <template #header>
-                        <HcNewSwitch
-                            :datas="authBtnTabdata" :keys="authBtnTabKey" :round="false"
-                            size="default" @change="authBtnTabClick"
-                        />
-                    </template>
-                    <!-- 切换导图或树形模式 -->
+                <HcTabCard :tabs="authBtnTabdata" :tab-key="authBtnTabKey" @change="authBtnTabClick">
                     <template #extra>
-                        <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange" />
+                        <el-button :loading="nodeSaveLoading" hc-btn type="primary" @click="NodeSaveClick">辅助保存</el-button>
+                        <HcTooltip keys="wbs_views_drawings">
+                            <el-button :disabled="!nodeDataInfo?.fileUrl" hc-btn color="#e03997" @click="viewsDrawings">图纸</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="wbs_preview">
+                            <el-button
+                                :disabled="NodeStatus === '1'"
+                                :loading="bussPdfsLoading"
+                                hc-btn
+                                color="#A16222"
+                                @click="bussPdfsClick"
+                            >
+                                预览
+                            </el-button>
+                        </HcTooltip>
+                        <el-button hc-btn color="#A16222" @click="attachmentModalShow">查看附件</el-button>
+                        <el-button hc-btn :disabled="isCanadd" color="#567722" @click="addFilelist">上传附件</el-button>
+                        <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_report">
+                            <el-button
+                                :disabled="NodeStatus === '3' || NodeStatus === '1'" :loading="reportLoading"
+                                hc-btn color="#FF976A" style="color: white;" @click="reportModalClick"
+                            >
+                                上报
+                            </el-button>
+                        </HcTooltip>
+                        <HcTooltip v-if="NodeStatus === '3'" keys="wbs_abolish">
+                            <el-button hc-btn :laoding="abolishLoaing" color="#FF976A" style="color: white;" @click="abolishOneClick">撤回上报流程</el-button>
+                        </HcTooltip>
+                        <el-button v-if="authBtnTabKey === '2'" hc-btn color="#37c0fe" :loading="syncdataloading" @click="syncdata">同步质检资料</el-button>
+                        <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_save">
+                            <el-button
+                                :disabled="NodeStatus === '3' || ListItemDatas.length <= 0"
+                                :loading="tableFormSaveLoading" hc-btn color="#12C060"
+                                style="color: white; font-weight: bold"
+                                @click="tableFormSaveClick"
+                            >
+                                保存数据
+                            </el-button>
+                        </HcTooltip>
                     </template>
-                    <el-tabs type="border-card">
-                        <el-tab-pane label="User">User</el-tab-pane>
-                        <el-tab-pane label="Config">Config</el-tab-pane>
-                        <el-tab-pane label="Role">Role</el-tab-pane>
-                        <el-tab-pane label="Task">Task</el-tab-pane>
-                    </el-tabs>
-
-
-                    <!-- 清表列表 -->
                     <el-scrollbar v-if="ListItemDatas.length > 0" ref="ListItemScrollRef" v-loading="ListItemLoading">
                         <CollapseForm
                             ref="ListItemRef"
@@ -114,81 +136,8 @@
                             @getList="searchNodeAllTable1"
                         />
                     </el-scrollbar>
-
                     <HcStatus v-else text="暂无表单" />
-
-                    <!-- 底部按钮区域 -->
-                    <template #action>
-                        <div class="hc-table-form-action-tip">
-                            <el-alert
-                                :closable="false"
-                                class="hc-alert"
-                                show-icon
-                                style=""
-                                title="完善资料填写后记得一定要保存哦"
-                                type="warning"
-                            />
-                        </div>
-
-                        <el-button :loading="nodeSaveLoading" hc-btn type="primary" style="position: absolute;left: 10px;" @click="NodeSaveClick">辅助保存</el-button>
-
-                        <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_save">
-                            <el-button
-                                :disabled="NodeStatus === '3' || ListItemDatas.length <= 0"
-                                :loading="tableFormSaveLoading"
-                                hc-btn
-                                style="width:150px;font-weight: bold;font-size:large"
-                                type="primary"
-                                @click="tableFormSaveClick"
-                            >
-                                <HcIcon name="save" />
-                                <span>保存</span>
-                            </el-button>
-                        </HcTooltip>
-                        <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_report">
-                            <el-button
-                                :disabled="NodeStatus === '3' || NodeStatus === '1'" :loading="reportLoading"
-                                hc-btn @click="reportModalClick"
-                            >
-                                <HcIcon name="send-plane-2" />
-                                <span>上报</span>
-                            </el-button>
-                        </HcTooltip>
-                        <HcTooltip keys="wbs_preview">
-                            <el-button
-                                :disabled="NodeStatus === '1'" :loading="bussPdfsLoading" hc-btn
-                                @click="bussPdfsClick"
-                            >
-                                <HcIcon name="eye" />
-                                <span>预览</span>
-                            </el-button>
-                        </HcTooltip>
-                        <HcTooltip v-if="NodeStatus === '3'" keys="wbs_abolish">
-                            <el-button hc-btn :laoding="abolishLoaing" @click="abolishOneClick">
-                                <HcIcon name="arrow-go-back" />
-                                <span>撤回上报流程</span>
-                            </el-button>
-                        </HcTooltip>
-                        <HcTooltip keys="wbs_views_drawings">
-                            <el-button :disabled="!nodeDataInfo?.fileUrl" hc-btn @click="viewsDrawings">
-                                <HcIcon name="image" />
-                                <span>图纸</span>
-                            </el-button>
-                        </HcTooltip>
-                        <el-button hc-btn @click="attachmentModalShow">
-                            <HcIcon name="file" />
-                            <span>附件</span>
-                        </el-button>
-                        <el-button hc-btn :disabled="isCanadd" @click="addFilelist">
-                            <HcIcon name="add" />
-                            <span>附件添加</span>
-                        </el-button>
-                        <el-button v-if="authBtnTabKey === '2'" hc-btn :loading="syncdataloading" @click="syncdata">
-                            <HcIcon name="refresh" />
-                            <span>同步质检资料</span>
-                        </el-button>
-                    </template>
-                </HcCard>
+                </HcTabCard>
             </div>
         </div>
         <HcCard v-if="wbsTypeTabKey === 'map'" id-ref="wbs-node-tree-card-target">