111

src/views/project/tree/drawer-temp.vue

@@ -28,9 +28,36 @@
                     </template>
                 </hc-card>
             </template>
-            <hc-card>
-                1111
-            </hc-card>
+            <hc-tab-card :tabs="tabsData" :tab-key="tabsKey" @change="tabsChange">
+                <template v-if="tabsKey === 'second'">
+                    <div class="hc-flex mb-10px">
+                        <el-button type="primary" plain @click="setHighestClick">设置为最高并卷层级</el-button>
+                        <el-button type="primary" plain @click="setClassifyClick">设置为分类卷并卷</el-button>
+                        <el-button type="primary" plain @click="setIndependence">设置为独立组卷</el-button>
+                    </div>
+                    <div class="hc-tab-scroll-class-second">
+                        <el-scrollbar>
+                            <hc-data-tree
+                                ref="secondTree" is-load-menu :h-props="secondTreeProps" tree-key="id" :datas="secondTreeData"
+                                show-checkbox check-strictly @load-menu="secondTreeMenu" @menu-tap="secondTreeMenuClick"
+                            >
+                                <template #name="{ data }">
+                                    <div class="config_type">最</div>
+                                    <template v-if="Number(data.archiveAutoGroupSelect) === 1">
+                                        <div v-if="Number(data.archiveAutoType) === 1" class="config_type">最</div>
+                                        <div v-if="Number(data.archiveAutoType) === 2" class="config_type">分</div>
+                                        <div v-if="Number(data.archiveAutoType) === 3" class="config_type">独</div>
+                                    </template>
+                                    <span class="text-16px font-400">{{ data.title }}</span>
+                                </template>
+                            </hc-data-tree>
+                        </el-scrollbar>
+                    </div>
+                </template>
+                <template v-if="tabsKey === 'first'">
+                    内容区域
+                </template>
+            </hc-tab-card>
         </hc-body>
         <!-- 树节点新增 -->
         <HcTreeNodeForm v-model="isTreeFormShow" :info="dataInfo" :data="treeFormData" :node="treeFormNode" :type="treeFormType" @finish="pseudoRefresh" />
@@ -42,7 +69,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { HcDelMsg, HcFirmMsg } from 'hc-vue3-ui'
-import { arrToId, getArrValue, isNullES } from 'js-fast-way'
+import { getArrValue, isNullES } from 'js-fast-way'
 import HcTreeNodeForm from './tree-form.vue'
 import HcTreeNodeSort from './tree-sort.vue'
 import mainApi from '~api/project/tree'
@@ -75,7 +102,8 @@ watch(isShow, (val) => {
 
 //处理相关数据
 const getDataApi = () => {
-
+    getTreeAllData()
+    getSecondTreeData()
 }
 
 //树搜索
@@ -193,6 +221,14 @@ const getTreeAllData = async () => {
     treeData.value = getArrValue(data)
 }
 
+//立卷规则树
+const getSecondTreeData = async () => {
+    const { data } = await mainApi.allTree({
+        projectId: dataInfo.value.id,
+    })
+    secondTreeData.value = getArrValue(data)
+}
+
 //懒加载树
 const treeLoadNode = async ({ item, level }, resolve) => {
     const parentId = level === 0 ? 0 : item.id
@@ -239,6 +275,50 @@ const treeNodeTap = ({ data }) => {
     nodeInfo.value = data
 }
 
+//右边选项卡
+const tabsKey = ref('second')
+const tabsData = ref([
+    { key: 'second', name: '立卷规则' },
+    { key: 'first', name: '工程文件入口配置' },
+])
+const tabsChange = ({ key }) => {
+    tabsKey.value = key
+}
+
+//立卷规则树
+const secondTree = ref(null)
+const secondTreeData = ref([])
+const secondTreeProps = {
+    label: 'title',
+}
+
+//立卷规则树右键菜单
+const secondTreeMenu = (_, resolve) => {
+    resolve([
+        { icon: 'eye', label: '查看配置', key: 'rank' },
+        { icon: 'delete-bin', label: '删除', key: 'del' },
+    ])
+}
+const secondTreeMenuClick = ({ key, data, node }) => {
+    console.log(key)
+}
+
+
+//设置为最高并卷层级
+const setHighestClick = () => {
+
+}
+
+//设置为分类卷并卷
+const setClassifyClick = () => {
+
+}
+
+//设置为独立组卷
+const setIndependence = () => {
+
+}
+
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false
@@ -247,5 +327,24 @@ const drawerClose = () => {
 </script>
 
 <style scoped lang="scss">
-
+.hc-tab-scroll-class-second {
+    position: relative;
+    height: calc(100% - 42px);
+}
+.hc-tab-scroll-class-second :deep(.hc-tree-node .data-custom-tree-node .label) {
+    display: flex;
+}
+.hc-tab-scroll-class-second :deep(.config_type) {
+    position: relative;
+    height: 18px;
+    width: 18px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fb5c5c;
+    color: white;
+    border-radius: 3px;
+    margin-right: 5px;
+}
 </style>