施工质检，监理质检改成tab

src/global/components/hc-new-switchtype/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="hc-new-switch" :class="[`size-${size ?? 'large'}`, round ? 'round' : '', isDisabled ? 'disabled' : '']">
+        <template v-for="item in datas">
+            <div class="switch-bg" :class="item?.key == keyVal?'dots':''" @click="switchClick(item)">{{item?.name}}</div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import {ref,watch} from "vue";
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([])
+    },
+    keys: {
+        type: [String,Number],
+        default: ''
+    },
+    size: { //large / default /small
+        type: [String,Number],
+        default: 'large'
+    },
+    round: {
+        type: Boolean,
+        default: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+})
+
+//监听
+const keyVal = ref(props.keys)
+const isDisabled = ref(props.disabled)
+
+//监听
+watch(() => [
+    props.keys,
+    props.disabled
+], ([keys, disabled]) => {
+    keyVal.value = keys;
+    isDisabled.value = disabled;
+})
+
+//事件
+const emit = defineEmits(['change'])
+const switchClick = (item) => {
+    if (!isDisabled.value) {
+        if (item?.key == keyVal.value) return;
+        emit('change', item)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-new-switch {
+    isolation: isolate;
+    position: relative;
+    overflow: hidden;
+    height: 40px;
+    font-size: 14px;
+    background: #f1f5f8;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 4px;
+    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15) inset, -4px -4px 8px 0 #ffffff inset;
+    .switch-bg {
+        color: #838791;
+        padding: 0 14px;
+        border-radius: 4px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &.dots {
+            color: #ffffff;
+            background: linear-gradient(90deg,var(--el-color-primary-light-5), var(--el-color-primary) 100%);
+            box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -3px -2px 8px 0 #ffffff;
+            transition: .1s;
+        }
+        &:not(.dots) {
+            cursor: pointer;
+        }
+    }
+    // &.round {
+    //     border-radius: 40px;
+    //     .switch-bg {
+    //         border-radius: 80px;
+    //     }
+    // }
+    &.size-default {
+        height: 32px;
+        font-size: 13px;
+        .switch-bg {
+            height: 25px;
+        }
+    }
+    &.disabled {
+        .switch-bg {
+            opacity: 0.5;
+            cursor: no-drop;
+        }
+    }
+}
+
+</style>

src/global/components/index.js

@@ -12,6 +12,7 @@ import HcSmsAuth from './hc-sms-auth/index.vue'
 import HcMenuSimple from './hc-menu-simple/index.vue'
 import HcDatePicker from './hc-date-picker/index.vue'
 import HcNewSwitch from './hc-new-switch/index.vue'
+import HcNewSwitchtype from './hc-new-switchtype/index.vue'
 import HcDragModal from './hc-drag-modal/index.vue'
 import HcReportModal from './hc-report-modal/index.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
@@ -38,6 +39,7 @@ export const setupComponents = (App) => {
     App.component('HcMenuSimple', HcMenuSimple)
     App.component('HcDatePicker', HcDatePicker)
     App.component('HcNewSwitch', HcNewSwitch)
+    App.component('HcNewSwitchtype', HcNewSwitchtype)
     App.component('HcDragModal', HcDragModal)
     App.component('HcReportModal', HcReportModal)
     App.component('HcTasksUser', HcTasksUser)

src/views/data-fill/wbs.vue

@@ -144,14 +144,15 @@
                                 <span>查看图纸</span>
                             </el-button>
                         </HcTooltip>
-                        <el-button :type="authBtnTabKey === '1'?'primary':''" hc-btn @click="authBtnTabClick('1')">
+                        <!-- <el-button :type="authBtnTabKey === '1'?'primary':''" hc-btn @click="authBtnTabClick('1')">
                             <HcIcon name="folder-user"/>
                             <span>施工自检</span>
                         </el-button>
                         <el-button :type="authBtnTabKey === '2'?'primary':''" hc-btn @click="authBtnTabClick('2')">
                             <HcIcon name="folder-shield"/>
                             <span>监理质检</span>
-                        </el-button>
+                        </el-button> -->
+                         <HcNewSwitchtype :datas="authBtnTabdata" :keys="authBtnTabKey" @change="authBtnTabClick" style="margin-left:20px"/>
                     </template>
                     <!--切换导图或树形模式-->
                     <template #extra>
@@ -456,8 +457,8 @@ const authBtnTabKey = ref('1')
 const authBtnTabClick = (val) => {
     if (!primaryKeyId.value) {
         window?.$message?.warning('请先在左侧项目树选择一个节点')
-    } else if (val !== authBtnTabKey.value) {
-        authBtnTabKey.value = val
+    } else if (val['key'] !== authBtnTabKey.value) {
+        authBtnTabKey.value = val['key']
         getTableDataAll()
     }
 }
@@ -482,6 +483,10 @@ const wbsTypeTab = ref([
     {key:'map',  name: '导图结构填报'},
     {key:'tree', name: '树形结构填报'}
 ]);
+const authBtnTabdata = ref([
+    {key:'1',  name: '施工质检'},
+    {key:'2', name: '监理质检'}
+]);
 const wbsTypeTabChange = (item) => {
     wbsTypeTabKey.value = item?.key;
     ListItemDatas.value = []