基础规范修改

src/views/tentative/basic/rule.vue

@@ -1,8 +1,132 @@
 <template>
     <hc-body split>
         <template #left>
-            <hc-card scrollbar />
+            <hc-card scrollbar>
+                <TestTree
+                    :auto-expand-keys="treeAutoExpandKeys" :project-id="projectId" :tenant-id="userInfo?.tenant_id"
+                    :wbs-temp-id="projectInfo?.referenceWbsTemplateIdTrial" :wbs-type="2" :entrust="1"
+                    @node-tap="wbsElTreeClick"
+                />
+            </hc-card>
         </template>
-        <hc-card />
+        <hc-card>
+            <template #header>
+                {{ headerTitle }}
+            </template>
+            <div v-loading="ruleLoading" class="rule-box">
+                <div v-for="(item, index) in ruleItemOptions" :key="index" class="rule-box-item" @click="ruleDetailClick(item)">
+                    <div class="rule-box-item-icon">
+                        <i class="ri-file-fill" style=" cursor: pointer; font-size: 48px;color:orange" />
+                    </div>
+                    <div class="rule-box-item-title">{{ item.name }}</div>
+                </div>
+            </div>
+        </hc-card>
     </hc-body>
-</template>
+</template>
+
+<script setup>
+import { onActivated, onUnmounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import { getStoreValue, setStoreValue } from '~src/utils/storage'
+import TestTree from '../material/components/TestTree.vue'
+//自动展开缓存
+const treeAutoExpandKeys = ref(getStoreValue('testTreeExpandKeys') || [])
+
+//变量
+const useAppState = useAppStore()
+const userInfo = ref(useAppState.getUserInfo)
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+const projectInfo = ref(useAppState.getProjectInfo)
+const nodeItemInfo = ref(null)
+
+//树被点击
+const wbsElTreeClick = ({ node, data, keys }) => {
+    nodeItemInfo.value = data
+   
+    //缓存自动展开
+    treeAutoExpandKeys.value = keys
+    setStoreValue('testTreeExpandKeys', keys)
+    //改变搜索表单数据
+    searchForm.value.nodeId = data['primaryKeyId'] || ''
+    searchForm.value.current = 1
+    getTableData()
+}
+
+//搜索表单
+const ruleLoading = ref(false)
+const ruleItemOptions = ref([
+    { name:'测试规范1', id:1 },
+    { name:'测试规范2', id:2 },
+    { name:'测试规范3', id:3 },
+    { name:'测试规范4', id:4 },
+    { name:'测试规范5', id:5 },
+    { name:'测试规范6', id:6 },
+    { name:'测试规范7', id:7 },
+
+  
+
+
+])
+
+const searchForm = ref({
+    startTime: null, endTime: null, queryValue: null, nodeId: '',
+    current: 1, size: 20, total: 0,
+})
+const ruleDetailClick = (item)=>{
+    console.log(123)
+}
+const getTableData = async () => {
+    // const nodeId = primaryKeyId.value
+    // if (isNullES(nodeId)) return
+    // tableLoading.value = true
+    // const { error, code, data } = await samplingApi.queryPage({
+    //     projectId: projectId.value,
+    //     nodeId,
+    //     ...searchForm.value,
+    // })
+    // //处理数据
+    // tableLoading.value = false
+    // if (!error && code === 200) {
+    //     tableData.value = getArrValue(data['records'])
+    //     searchForm.value.total = data.total || 0
+    // } else {
+    //     tableData.value = []
+    //     searchForm.value.total = 0
+    // }
+}
+const headerTitle = ref('规范文件夹')
+</script>
+
+<style lang="scss" scoped>
+.rule-box{
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr); 
+    grid-template-rows: repeat(4, 1fr);
+   gap: 50px;
+  padding: 20px;
+  height: 100%;
+  overflow-y:auto;
+
+  .rule-box-item{
+      text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .rule-box-item-icon {
+      margin-bottom: 8px;
+ 
+  }
+    .rule-box-item-title {
+      font-size: 14px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+}
+</style>