浏览代码

优化切换按钮的样式,新增附件列表的弹窗

ZaiZai 2 年之前
父节点
当前提交
11e652325e
共有 3 个文件被更改,包括 226 次插入3 次删除
  1. 1 0
      src/global/components/hc-new-switch/index.vue
  2. 50 0
      src/styles/data-fill/wbs.scss
  3. 175 3
      src/views/data-fill/wbs.vue

+ 1 - 0
src/global/components/hc-new-switch/index.vue

@@ -66,6 +66,7 @@ const switchClick = (item) => {
     display: inline-flex;
     align-items: center;
     padding: 0 4px;
+    user-select: none;
     box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15) inset, -4px -4px 8px 0 #ffffff inset;
     .switch-bg {
         color: #838791;

+ 50 - 0
src/styles/data-fill/wbs.scss

@@ -253,3 +253,53 @@
 .no-move {
     transition: transform 0s;
 }
+
+.hc-attachment-card {
+    position: relative;
+    .hc-attachment-header {
+        position: relative;
+        background: #E7EEF4;
+        font-size: 18px;
+        padding: 10px 18px;
+        border-radius: 4px 4px 0 0;
+    }
+    .hc-attachment-content {
+        position: relative;
+        background: white;
+        padding: 2px;
+        border-radius: 0 0 4px 4px;
+        .hc-attachment-item {
+            position: relative;
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background 0.2s;
+            .hc-attachment-file-name {
+                position: relative;
+                flex: 1;
+                display: flex;
+                align-items: center;
+                .name {
+                    position: relative;
+                    flex: 1;
+                    margin-left: 6px;
+                }
+            }
+            .hc-attachment-btn-box {
+                position: relative;
+            }
+            &:hover {
+                background: var(--el-color-primary-light-9);
+            }
+        }
+        .hc-attachment-item + .hc-attachment-item {
+            border-top: 1px dashed #efeded;
+        }
+    }
+}
+.hc-attachment-card + .hc-attachment-card {
+    margin-top: 24px;
+}
+

+ 175 - 3
src/views/data-fill/wbs.vue

@@ -71,7 +71,7 @@
                             <span>图纸</span>
                         </el-button>
                     </HcTooltip>
-                    <el-button hc-btn @click="viewsDrawings">
+                    <el-button hc-btn>
                         <HcIcon name="file"/>
                         <span>附件</span>
                     </el-button>
@@ -230,7 +230,7 @@
                                 <span>图纸</span>
                             </el-button>
                         </HcTooltip>
-                        <el-button hc-btn>
+                        <el-button hc-btn @click="attachmentModalShow">
                             <HcIcon name="file"/>
                             <span>附件</span>
                         </el-button>
@@ -413,11 +413,177 @@
          type="wbs"
          :typeData="reportTypeData"
         :taskName="reportTaskName" :ids="reportIds" :addition="reportAddition" @hide="showReportModal = false" @finish="showReportFinish"/>
+
+        <!--查看附件-->
+        <HcDialog :show="attachmentModal" title="附件列表" widths="780px" isTable :footer="false" @close="attachmentModal = false">
+            <div class="hc-attachment-card">
+                <div class="hc-attachment-header">表单名称</div>
+                <div class="hc-attachment-content">
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="hc-attachment-card">
+                <div class="hc-attachment-header">表单名称</div>
+                <div class="hc-attachment-content">
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="hc-attachment-card">
+                <div class="hc-attachment-header">表单名称</div>
+                <div class="hc-attachment-content">
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="hc-attachment-item">
+                        <div class="hc-attachment-file-name">
+                            <HcIcon name="attachment"/>
+                            <div class="name">文件名称</div>
+                        </div>
+                        <div class="hc-attachment-btn-box">
+                            <el-button type="primary" plain size="small">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                            <el-button type="danger" plain size="small" style="margin-left: 16px">
+                                <HcIcon name="close"/>
+                                <span>删除</span>
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </HcDialog>
+
     </div>
 </template>
 
 <script setup>
-import { Warning ,DocumentCopy,CaretLeft,CaretRight } from '@element-plus/icons-vue'
 import {ref,watch,onMounted} from "vue";
 import {useRouter, useRoute} from 'vue-router'
 import {useAppStore} from "~src/store";
@@ -1535,6 +1701,12 @@ const abolishOneSave = async () => {
     }
 }
 
+//附件列表
+const attachmentModal = ref(false)
+const attachmentModalShow = () => {
+    attachmentModal.value = true
+}
+
 
 //划分变更
 const divisionClick = () => {