分级分类任务更新

@@ -646,7 +646,7 @@ onMounted(() => {
               </span>
           </template>
           <span class="operate_btn active">
-          <el-dropdown trigger="hover" :show-timeout="50"  >
+          <el-dropdown trigger="hover" :show-timeout="50" >
               <span class="text_btn">...</span>
             <template #dropdown>
 

@@ -31,7 +31,7 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
   // 是否已登录
-  if (1) {
+  if (userStore.isLogin) {
     // 是否已根据权限动态生成并注册路由
     if (routeStore.isGenerate) {
       // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态

@@ -25,8 +25,48 @@ const selectIndex = ref(0);
 const asideSearchInput = ref("");
 const permissionList: any = ref([])
 const listLoading = ref(false)
-const currpermissionList: any = ref([])
-const templateInfo = ref({})
+const listPage = ref({
+  limit: 50,
+  curr: 1,
+  totalPages: 0
+})
+const currpermissionList: any = ref([
+  {
+    "guid": "62d01ad586774db2bb3955dfb2d18366",
+    "productGuid": null,
+    "productName": null,
+    "dataPermissionName": "当前用户",
+    "bizState": "Y",
+    "createUserName": "数往知来管理员",
+    "createTime": "2024-01-24 14:08:43",
+    "sqlScript": null,
+    "dataSourceGuid": null
+  },
+  {
+    "guid": "d68a27c1998540a2b8e8f22a2d5eebef",
+    "productGuid": null,
+    "productName": null,
+    "dataPermissionName": "组织权限",
+    "bizState": "Y",
+    "createUserName": "数往知来管理员",
+    "createTime": "2024-01-24 11:47:02",
+    "sqlScript": null,
+    "dataSourceGuid": null
+  }
+])
+const templateInfo = ref({
+  title: '医疗数据分类分级模板',
+  descGroup: [
+    { label: '模型确认人', value: '管理员 ' },
+    { label: '模型确认时间', value: '2021-12-12 09:12:13' },
+  ],
+  tags: [
+    { type: 'info', name: '医疗行业分类' },
+    { type: 'success', name: '五级' },
+    { type: 'primary', name: 'V5' },
+  ],
+  desc: '适用于各级医疗机构、卫生健康管理部门、公共卫生服务机构、相关专项业务服务机构、相关信息技术服务机构等开展医疗健康数据分类分级。适用于各级医疗机构、卫生健康管理部门、公共卫生服务机构、相关专项业务服务机构、相关信息技术服务机构等开展医疗健康数据分类分级。适用于各级医疗机构、卫生健康。'
+})
 const treeIndex: any = ref({})
 
 const treeInfo = ref({
@@ -41,7 +81,322 @@ const treeInfo = ref({
   nodeKey: 'guid',
   expandedKey: [],
   expandOnNodeClick: false,
-  data: [],
+  data: [
+    {
+      "children": [
+        {
+          "children": null,
+          "parentGuids": [
+            "c32ddd77191ff4afe149538ef4b2e0c3"
+          ],
+          "guid": "9c92df55a19cdce88f61e20a8e1e8a65",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": "11150001",
+          "organisationName": "链享供应链运营一部",
+          "bizState": "Y",
+          "createTime": "2023-10-25 14:23:31",
+          "createUserName": "测试",
+          "parentGuid": "c32ddd77191ff4afe149538ef4b2e0c3",
+          "orderNum": 1,
+          "level": 2,
+          "levelCode": "1.1",
+          "displayCreateTime": "2023-10-25 14:23:31"
+        }
+      ],
+      "parentGuids": null,
+      "guid": "c32ddd77191ff4afe149538ef4b2e0c3",
+      "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+      "organisationCode": "1115004",
+      "organisationName": "链享供应链",
+      "bizState": "Y",
+      "createTime": "2023-08-15 12:59:10",
+      "createUserName": "测试",
+      "parentGuid": "",
+      "orderNum": 2,
+      "level": 0,
+      "levelCode": "1",
+      "displayCreateTime": "2023-08-15 12:59:10"
+    },
+    {
+      "children": [
+        {
+          "children": [
+            {
+              "children": null,
+              "parentGuids": [
+                "e10332122834077907cd5ea61fa576c1",
+                "cdae7bb3cafb560482cad1b89a1e4b78"
+              ],
+              "guid": "16ea472a155c07433a63220f2ae1afe9",
+              "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+              "organisationCode": "11160011",
+              "organisationName": "链享运营一部1组",
+              "bizState": "S",
+              "createTime": "2023-10-25 13:15:57",
+              "createUserName": "测试",
+              "parentGuid": "cdae7bb3cafb560482cad1b89a1e4b78",
+              "orderNum": 1,
+              "level": 2,
+              "levelCode": "2.1.1",
+              "displayCreateTime": "2023-10-25 13:15:57"
+            }
+          ],
+          "parentGuids": [
+            "e10332122834077907cd5ea61fa576c1"
+          ],
+          "guid": "cdae7bb3cafb560482cad1b89a1e4b78",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": "1116001",
+          "organisationName": "链享运营一部",
+          "bizState": "S",
+          "createTime": "2023-10-25 13:14:15",
+          "createUserName": "测试",
+          "parentGuid": "e10332122834077907cd5ea61fa576c1",
+          "orderNum": 1,
+          "level": 1,
+          "levelCode": "2.1",
+          "displayCreateTime": "2023-10-25 13:14:15"
+        },
+        {
+          "children": null,
+          "parentGuids": [
+            "e10332122834077907cd5ea61fa576c1"
+          ],
+          "guid": "d98b44ffb35e4d17cf68f9a922e1c7b7",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": null,
+          "organisationName": "二部",
+          "bizState": "Y",
+          "createTime": "2023-10-26 09:45:36",
+          "createUserName": "测试",
+          "parentGuid": "e10332122834077907cd5ea61fa576c1",
+          "orderNum": 2,
+          "level": 1,
+          "levelCode": "2.2",
+          "displayCreateTime": "2023-10-26 09:45:36"
+        }
+      ],
+      "parentGuids": null,
+      "guid": "e10332122834077907cd5ea61fa576c1",
+      "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+      "organisationCode": "1115005",
+      "organisationName": "链享医药",
+      "bizState": "Y",
+      "createTime": "2023-09-12 15:59:35",
+      "createUserName": "测试",
+      "parentGuid": null,
+      "orderNum": 3,
+      "level": 0,
+      "levelCode": "2",
+      "displayCreateTime": "2023-09-12 15:59:35"
+    },
+    {
+      "children": [
+        {
+          "children": null,
+          "parentGuids": [
+            "9bd46f0f4fcf429518fae6ecb4849a9e"
+          ],
+          "guid": "870f23ae47e036eb88b35f726c31959b",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": null,
+          "organisationName": "运用三部",
+          "bizState": "Y",
+          "createTime": "2024-04-28 16:33:24",
+          "createUserName": "数往知来管理员",
+          "parentGuid": "9bd46f0f4fcf429518fae6ecb4849a9e",
+          "orderNum": 3,
+          "level": 1,
+          "levelCode": "3.3",
+          "displayCreateTime": "2024-04-28 16:33:24"
+        },
+        {
+          "children": null,
+          "parentGuids": [
+            "9bd46f0f4fcf429518fae6ecb4849a9e"
+          ],
+          "guid": "e06049046241dd71b153f227dbe7f801",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": null,
+          "organisationName": "运营二部",
+          "bizState": "Y",
+          "createTime": "2023-11-14 16:01:50",
+          "createUserName": "数往知来管理员",
+          "parentGuid": "9bd46f0f4fcf429518fae6ecb4849a9e",
+          "orderNum": 40,
+          "level": 1,
+          "levelCode": "3.2",
+          "displayCreateTime": "2023-11-14 16:01:50"
+        },
+        {
+          "children": null,
+          "parentGuids": [
+            "9bd46f0f4fcf429518fae6ecb4849a9e"
+          ],
+          "guid": "731cd185c868da8af48b492068ffaed4",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": null,
+          "organisationName": "运营一部",
+          "bizState": "Y",
+          "createTime": "2023-11-14 15:19:35",
+          "createUserName": "测试",
+          "parentGuid": "9bd46f0f4fcf429518fae6ecb4849a9e",
+          "orderNum": 41,
+          "level": 1,
+          "levelCode": "3.1",
+          "displayCreateTime": "2023-11-14 15:19:35"
+        }
+      ],
+      "parentGuids": null,
+      "guid": "9bd46f0f4fcf429518fae6ecb4849a9e",
+      "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+      "organisationCode": null,
+      "organisationName": "药企服务事业部1",
+      "bizState": "Y",
+      "createTime": "2023-11-14 14:49:14",
+      "createUserName": "数往知来管理员",
+      "parentGuid": "",
+      "orderNum": 4,
+      "level": 0,
+      "levelCode": "3",
+      "displayCreateTime": "2023-11-14 14:49:14"
+    },
+    {
+      "children": [
+        {
+          "children": null,
+          "parentGuids": [
+            "23be149ea3167a3f7f2d383023336efe"
+          ],
+          "guid": "e5f2b4958ee2d99309a41e0c6e1447c8",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": null,
+          "organisationName": "智能存储装备部",
+          "bizState": "Y",
+          "createTime": "2023-11-14 16:09:36",
+          "createUserName": "数往知来管理员",
+          "parentGuid": "23be149ea3167a3f7f2d383023336efe",
+          "orderNum": 51,
+          "level": 1,
+          "levelCode": "4.1",
+          "displayCreateTime": "2023-11-14 16:09:36"
+        }
+      ],
+      "parentGuids": null,
+      "guid": "23be149ea3167a3f7f2d383023336efe",
+      "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+      "organisationCode": null,
+      "organisationName": "医药物联网事业部",
+      "bizState": "Y",
+      "createTime": "2023-11-14 15:11:35",
+      "createUserName": "数往知来管理员",
+      "parentGuid": "",
+      "orderNum": 5,
+      "level": 0,
+      "levelCode": "4",
+      "displayCreateTime": "2023-11-14 15:11:35"
+    },
+    {
+      "children": null,
+      "parentGuids": null,
+      "guid": "1d82e875163749ca9ae45809ec432ae8",
+      "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+      "organisationCode": null,
+      "organisationName": "财务管理中心",
+      "bizState": "S",
+      "createTime": "2023-11-14 15:14:07",
+      "createUserName": "数往知来管理员",
+      "parentGuid": "",
+      "orderNum": 6,
+      "level": 0,
+      "levelCode": "6",
+      "displayCreateTime": "2023-11-14 15:14:07"
+    },
+    {
+      "children": null,
+      "parentGuids": null,
+      "guid": "cd9e6a0c76102364a9e88b79b28b0b32",
+      "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+      "organisationCode": null,
+      "organisationName": "资产服务",
+      "bizState": "Y",
+      "createTime": "2024-08-14 11:40:33",
+      "createUserName": "数往知来管理员",
+      "parentGuid": "",
+      "orderNum": 7,
+      "level": 0,
+      "levelCode": "9",
+      "displayCreateTime": "2024-08-14 11:40:33"
+    },
+    {
+      "children": [
+        {
+          "children": null,
+          "parentGuids": [
+            "dac448b77fa35f798bb4a06d8fd86334"
+          ],
+          "guid": "cb76777efe69182cfb2c75d41944553c",
+          "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+          "organisationCode": null,
+          "organisationName": "审批1",
+          "bizState": "Y",
+          "createTime": "2024-01-17 14:28:36",
+          "createUserName": "数往知来管理员",
+          "parentGuid": "dac448b77fa35f798bb4a06d8fd86334",
+          "orderNum": 100,
+          "level": 1,
+          "levelCode": "8.1",
+          "displayCreateTime": "2024-01-17 14:28:36"
+        }
+      ],
+      "parentGuids": null,
+      "guid": "dac448b77fa35f798bb4a06d8fd86334",
+      "tenantGuid": "9e5b9d7bfd8c4f4f8079e05de19bf7e0",
+      "organisationCode": null,
+      "organisationName": "审批组织",
+      "bizState": "Y",
+      "createTime": "2024-01-16 11:38:24",
+      "createUserName": "数往知来管理员",
+      "parentGuid": "",
+      "orderNum": 99,
+      "level": 0,
+      "levelCode": "8",
+      "displayCreateTime": "2024-01-16 11:38:24"
+    }
+  ],
+});
+
+const expand1 = ref(true)
+const expand2 = ref(true)
+
+const taskFormItems: any = ref([
+  {
+    label: '任务名称',
+    type: 'input',
+    placeholder: '请输入',
+    field: 'taskName',
+    default: '',
+    maxlength: 50,
+    required: true
+  },
+  {
+    label: '分级分类目录名称',
+    type: 'input',
+    placeholder: '请输入',
+    field: 'catalogName',
+    default: '',
+    maxlength: 50,
+    required: true
+  },
+])
+
+const taskFormRules = ref({
+  taskName: [
+    { required: true, trigger: 'blur', message: "请填写任务名称" }
+  ],
+  catalogName: [
+    { required: true, trigger: 'blur', message: "请填写分级分类目录名称" }
+  ],
 });
 
 const page = ref({
@@ -57,6 +412,7 @@ const page = ref({
 });
 const searchItemValue: any = ref({});
 const currTableData: any = ref({});
+
 const tableInfo = ref({
   id: "mapping-table",
   fields: [
@@ -74,32 +430,33 @@ const tableInfo = ref({
     ...page.value,
   },
   actionInfo: {
-    label: "操作",
-    type: "btn",
-    width: 200,
-    btns: (scope) => {
-      let row = scope.row, btnArr: any = [];
-      if (row.approveState == 'Y') {
-        if (row.listingStatus == 'Y') {
-          btnArr.splice(0, 0, { label: "详情", value: "detail" });
-        } else {
-          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
-        }
-      } else {
-        if (row.approveState == 'A') {
-          btnArr.splice(0, 0, { label: "详情", value: "detail" });
-        } else {
-          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
-        }
-      }
-      return btnArr;
-    },
+    show: false
   },
 });
 
+const metadataTableInfo = ref({
+  id: "metadata-table",
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+    { label: "数据库名称", field: "damCode", width: 200 },
+    { label: "数据库名", field: "damTypeName", width: 200 },
+    { label: "总表数", field: "damName", width: 120, align: "right" },
+    { label: "存储量(约/MB)", field: "damTypeName", width: 200, align: "right" },
+  ],
+  loading: false,
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    show: false
+  },
+})
+
 const nodeClick = (data) => {
   treeIndex.value = data
-  toSearch({})
 }
 
 const getTableData = () => {
@@ -132,24 +489,13 @@ const tableBtnClick = (scope, btn) => {
   }
 };
 
-const toPath = (type) => {
-  if (type == 'add') {
-    router.push({
-      name: "productListingDetail",
-      query: {
-        type
-      },
-    });
-  } else {
-    router.push({
-      name: "productListingDetail",
-      query: {
-        guid: currTableData.value.guid,
-        name: currTableData.value.damName,
-        type
-      },
-    });
-  }
+const toPath = (type = null) => {
+  router.push({
+    name: "taskConfig",
+    query: {
+      type
+    },
+  });
 }
 
 const tablePageChange = (info) => {
@@ -203,8 +549,51 @@ const querySearch = (queryString: string) => {
 
 const btnClick = async (btn, bType = null) => {
   const type = btn.value;
+  if (type == 'next') {
+    step.value++;
+  } else if (type == 'prev') {
+    step.value--;
+  } else {
+    toPath()
+  }
+};
+
+// 监听滚动事件
+const handleScroll = () => {
+  if (listPage.value.curr < listPage.value.totalPages) {
+    listPage.value.curr++
+    getPermissionList({})
+  }
+}
+
+const changTable = () => {
+  // toSearch({})
 };
 
+const getPermissionList = (val, init = false) => {
+  let params: any = val ? { ...val } : {}
+  params.pageIndex = listPage.value.curr;
+  params.pageSize = listPage.value.limit;
+  listLoading.value = true
+  // getPermissionDictList(params).then((res: any) => {
+  //   if (res.code == proxy.$passCode) {
+  //     const data = res.data?.records || []
+  //     if (init) {
+  //       permissionList.value = JSON.parse(JSON.stringify(data))
+  //       currpermissionList.value = JSON.parse(JSON.stringify(data))
+  //       listPage.value.totalPages = res.data.totalPages
+  //       toSearch({})
+  //     } else {
+  //       permissionList.value.push(...JSON.parse(JSON.stringify(data)))
+  //       querySearch(asideSearchInput.value)
+  //     }
+  //   }
+  //   listLoading.value = false
+  // }).catch(() => {
+  //   listLoading.value = false
+  // })
+}
+
 onActivated(() => {
 
 })
@@ -217,7 +606,7 @@ onBeforeMount(() => {
 
 <template>
   <div class="container_wrap full flex">
-    <div class="aside_wrap">
+    <div class="aside_wrap" v-show="step == 0">
       <div class="aside_title">选择分类分级模板</div>
       <div class="aside_search">
         <el-input v-model.trim="asideSearchInput" placeholder="请输入关键字" :prefix-icon="Search" clearable
@@ -228,40 +617,60 @@ onBeforeMount(() => {
           @click="selectIndex = i; changTable();" v-preReClick>{{ item.dataPermissionName }}</div>
       </div>
     </div>
-    <div class="main_wrap">
-      <div class="template_panel">
-        <div class="panel_title">
-          <p class="title_text">{{ templateInfo.title }}</p>
-          <div class="title_desc">
-            <p class="desc_group" v-for="desc in templateInfo.descGroup">
-              <span class="desc_label">{{ desc.label }}：</span>
-              <span class="desc_value">{{ desc.value }}</span>
-            </p>
+    <div class="main_wrap" :class="{full: step == 1}">
+      <div class="content_main" v-show="step == 0">
+        <div class="template_panel">
+          <div class="panel_title">
+            <span class="title_text">{{ templateInfo.title }}</span>
+            <div class="title_desc">
+              <div class="desc_group" v-for="desc in templateInfo.descGroup">
+                <span class="desc_label">{{ desc.label }}：</span>
+                <span class="desc_value">{{ desc.value }}</span>
+              </div>
+            </div>
           </div>
+          <div class="panel_tags">
+            <el-tag v-for="tag in templateInfo.tags" :type="tag.type">{{ tag.name }}</el-tag>
+          </div>
+          <p class="panel_desc">{{ templateInfo.desc }}</p>
         </div>
-        <div class="panel_tags">
-          <el-tag v-for="tag in templateInfo.tags" :type="tag.type">{{ tag.name }}</el-tag>
+        <div class="panel_content">
+          <div class="box_left">
+            <div class="aside_title">分类分级目录</div>
+            <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
+          </div>
+          <div class="box_right">
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item>全部</el-breadcrumb-item>
+              <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+              <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+              <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+            </el-breadcrumb>
+            <div class="table_panel_wrap">
+              <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+            </div>
+          </div>
         </div>
-        <p class="panel_desc">{{ templateInfo.desc }}</p>
       </div>
-      <div>
-        <div class="box_left aside_wrap">
-          <div class="aside_title">组织列表</div>
-          <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
-        </div>
-        <div class="box_right">
-          <div class="panel_title">人员信息</div>
-          <div class="table_panel_wrap">
-            <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+      <div class="content_main panel" v-show="step == 1">
+        <ContentWrap id="id-approveInfo" title="创建任务" expandSwicth style="margin-top: 15px" :isExpand="expand1"
+          @expand="(v) => expand1 = v">
+          <div class="form_panel">
+            <Form ref="taskFormRef" formId="edit-standard-form" :itemList="taskFormItems" :rules="taskFormRules"
+              col="col3" />
           </div>
-        </div>
+        </ContentWrap>
+        <ContentWrap id="id-approveInfo" title="选择元数据" expandSwicth style="margin-top: 15px" :isExpand="expand2"
+          @expand="(v) => expand2 = v">
+          <Table :tableInfo="metadataTableInfo" />
+        </ContentWrap>
       </div>
       <div class="tool_btns">
         <div class="btns">
           <el-button @click="btnClick({ value: 'cancel' })" v-if="step == 0">取消</el-button>
           <el-button @click="btnClick({ value: 'prev' })" v-if="step == 1">上一步</el-button>
           <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step == 0">下一步</el-button>
-          <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step == 1">后台运行</el-button>
+          <el-button type="primary" @click="btnClick({ value: 'path' })" v-if="step == 1">后台运行</el-button>
         </div>
       </div>
     </div>
@@ -269,33 +678,156 @@ onBeforeMount(() => {
 </template>
 
 <style scoped lang="scss">
-.table_tool_wrap {
-  width: 100%;
-  height: 40px !important;
-  padding: 0 8px;
-
-  .table_title {
-    height: 40px;
-    line-height: 40px;
-    font-weight: 600;
-    font-size: 16px;
-    color: #212121;
+.container_wrap {
+  .aside_wrap {
+    width: 199px;
+    border-right: 1px solid #d9d9d9;
+    box-shadow: none;
+
+    .aside_title {
+      width: calc(100% - 32px);
+      display: inline-block;
+    }
+
+    .icon-add.el-icon {
+      width: 24px;
+      height: 24px;
+      vertical-align: middle;
+      cursor: pointer;
+
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .tree_panel {
+      height: calc(100% - 72px);
+      padding-top: 0;
+      border-bottom: 1px solid #d9d9d9;
+
+      :deep(.el-tree) {
+        margin: 0;
+        height: calc(100% - 32px);
+        overflow: hidden auto;
+      }
+    }
+
+    .page_nav_wrap.concise {
+      justify-content: center;
+    }
+
   }
 }
 
-.table_panel_wrap {
-  width: 100%;
-  height: calc(100% - 40px);
-  padding: 0px 8px 0;
-}
+.container_wrap {
+  overflow: hidden auto;
+
+  .main_wrap {
+    padding: 0;
 
-.card-noData {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    &.full {
+      width: 100%;
+    }
+
+    .content_main {
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 45px);
+      overflow: hidden auto;
+      flex: 1;
+
+      &.panel {
+        padding: 0 16px;
+      }
+
+      .template_panel {
+        padding: 0 8px;
+
+        .panel_title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin: 8px 0;
+
+          .title_text {
+            font-size: 16px;
+            color: #212121;
+            line-height: 24px;
+            font-weight: 600;
+          }
+
+          .title_desc {
+            display: flex;
+
+            .desc_group {
+              margin-left: 16px;
+            }
+          }
+        }
+
+        .panel_tags {
+          .el-tag {
+            margin-right: 8px;
+          }
+        }
+
+        .panel_desc {
+          margin: 8px 0;
+          font-size: 14px;
+          color: #666;
+        }
+      }
+
+      .panel_content {
+        height: 100%;
+        display: flex;
+        flex: 1;
+        border-top: 1px solid #d9d9d9;
+
+        .box_left {
+          width: 240px;
+          height: 100%;
+          border-right: 1px solid #d9d9d9;
+
+          .aside_title {
+            padding: 0 8px;
+            height: 40px;
+            line-height: 40px;
+            font-size: 14px;
+            color: #212121;
+            font-weight: 600;
+          }
+
+          .tree_panel {
+            padding: 0;
+          }
+        }
+
+        .box_right {
+          width: 100%;
+
+          .el-breadcrumb {
+            padding: 8px;
+          }
+        }
+      }
+
+      .table_panel_wrap {
+        width: 100%;
+        height: calc(100% - 30px);
+        padding: 8px 8px 0;
+      }
+    }
+
+    .tool_btns {
+      height: 44px;
+      margin: 0 -8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-top: 1px solid #d9d9d9;
+    }
+  }
 }
 </style>