创建项目

src/views/project/info/detail.vue

@@ -1,7 +1,7 @@
 <template>
     <hc-drawer v-model="isShow" to-id="hc-project-list" is-close @close="drawerClose">
         <div class="hc-project-info-drawer relative h-full">
-            <hc-tab-card scrollbar :tabs="tabsData" :tab-key="tabsKey" is-action-btn :disabled="isDisabled" @change="tabsChange">
+            <hc-tab-card :scrollbar="tabsKey === '1'" :tabs="tabsData" :tab-key="tabsKey" is-action-btn :disabled="isDisabled" @change="tabsChange">
                 <HcInfo v-if="tabsKey === '1'" ref="infoRef" v-model="basicForm" />
                 <HcTemplate v-if="tabsKey === '2'" ref="tempRef" v-model="basicForm" />
                 <template #action>

src/views/project/info/template.vue

@@ -1,9 +1,45 @@
 <template>
-    <div class="hc-project-wbs-template">
-        <div class="wbs-template-segmented">
-            <el-segmented v-model="templateType" :options="templateTypeData" />
+    <div class="hc-project-wbs-template relative h-full">
+        <div class="wbs-template-segmented relative mb-14px text-center">
+            <el-segmented v-model="templateType" :options="templateTypeData" size="large" @change="templateTypeChange" />
+        </div>
+        <div class="hc-flex-center relative mb-14px">
+            <span>选择WBS：</span>
+            <el-select v-model="wbsId" placeholder="请选择WBS" class="w-500px" size="large" @change="wbsChange">
+                <el-option-group v-for="group in treeList" :key="group.label" :label="group.label">
+                    <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-option-group>
+            </el-select>
+        </div>
+        <div class="wbs-template-body">
+            <div class="left">
+                <hc-card-item scrollbar title="7020项">
+                    <template #extra>
+                        <el-checkbox v-model="allChecked" label="默认全部引用" size="large" />
+                    </template>
+                    内容区域
+                </hc-card-item>
+            </div>
+            <div class="action">
+                <div class="relative">
+                    <div class="relative">
+                        <el-button hc-btn style="border-radius: 3px">
+                            <i class="i-ri-arrow-right-line" />
+                        </el-button>
+                    </div>
+                    <div class="relative mt-14px">
+                        <el-button hc-btn style="border-radius: 3px">
+                            <i class="i-ri-arrow-left-line" />
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+            <div class="right">
+                <hc-card-item scrollbar title="0项">
+                    内容区域
+                </hc-card-item>
+            </div>
         </div>
-        111
     </div>
 </template>
 
@@ -37,17 +73,62 @@ const templateTypeData = [
     { value:1, label: '质检' }, { value:2, label: '试验' },
     { value:3, label: '计量' }, { value:5, label: '征拆' },
 ]
+const templateTypeChange = () => {
+
+}
+
+const wbsId = ref('')
+const treeList = ref([])
+const wbsChange = () => {
+
+}
+
+const allChecked = ref(false)
 </script>
 
 <style lang="scss">
 .hc-project-wbs-template {
-    position: relative;
-    height: 100%;
-    .wbs-template-segmented {
+    .wbs-template-segmented .el-segmented {
+        --el-border-radius-base: 50px;
+        .el-segmented__item {
+            padding: 0 18px;
+        }
+    }
+    .wbs-template-body {
         position: relative;
-        text-align: center;
-        .el-segmented {
-            --el-border-radius-base: 16px;
+        height: calc(100% - 120px);
+        display: flex;
+        .hc-card-item-box {
+            background: white !important;
+            border: 1px solid #eee;
+            border-radius: 5px;
+            padding: 0;
+            .hc-card-item-header {
+                height: 40px;
+                padding: 0 12px;
+                margin-bottom: 0;
+                background: #f9f9f9;
+                border-bottom: 1px solid #eee;
+            }
+            .hc-card-item-body {
+                padding: 12px;
+                height: calc(100% - 40px) !important;
+            }
+        }
+        .left {
+            position: relative;
+            flex: 1;
+        }
+        .action {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 14px;
+        }
+        .right {
+            position: relative;
+            flex: 1;
         }
     }
 }