财务主页搭建

src/router/views/index.js

@@ -1522,6 +1522,49 @@ export default [
     ],
   },
 
+
+
+// {
+//   // 这是父路由，财务主页面
+//   path: '/financialsector/FinanceHome',
+//   component: Layout,
+//   redirect: '/financialsector/FinanceHome',
+//   children: [
+//     {
+//       // 这是父页面的默认视图
+//       meta: {
+//         i18n: 'dict',
+//         keepAlive: false,
+//       },
+//       path: '/financialsector/FinanceHome', 
+//       name: '财务', 
+//       component: () => import('@/views/financialsector/FinanceHome.vue'),
+//     },
+//     {
+//       // 子页面
+//       meta: {
+//         i18n: 'dict',
+//         keepAlive: false,
+//       },
+//       path: '/financialsector/Financialse/FinancialWarehousing',
+//       name: '新增模板',
+//       component: () => import('@/views/financialsector/Financialse/FinancialWarehousing.vue'),
+//     },
+//   ],
+// },
+
+
+
+
+
+
+
+
+
+
+
+
+
   // {
   //   path: '/aftersales/aftersalesWorkOrderSS',
   //   component: Layout,

src/views/financialsector/FinanceHome.vue

@@ -31,42 +31,78 @@
         </el-select>
       </div>
     </div>
+
+    <!-- 模板内容 -->
+    <div class="content">
+      <el-tabs type="border-card">
+        <template v-for="item in ServiceList" :key="item.label">
+          <el-tab-pane v-if="item.state" :label="item.label" >
+            <span v-if="item.label == '提货'">提货</span>
+            <span v-if="item.label == '干线'">干线</span>
+            <span v-if="item.label == '仓储'"><FinancialWarehousing :templateData="templateInfo"/></span>
+            <span v-if="item.label == '配送'">配送</span>
+            <span v-if="item.label == '安装'">安装</span>
+          </el-tab-pane>
+        </template>
+      </el-tabs>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+
+import { ref, defineAsyncComponent } from 'vue';
+
+const FinancialWarehousing = defineAsyncComponent(() =>
+  import('@/views/financialsector/Financialse/FinancialWarehousing.vue')
+);
 const form = ref({});
+const tabNum=ref('干线')
+const templateInfo=ref({
+  name:'参数'
+})
 const ServiceList = ref([
   {
     label: '提货',
     value: '1',
+    state: false,
+    check: false,
   },
   {
     label: '干线',
     value: '2',
+    state: false,
+    check: false,
   },
   {
     label: '仓储',
     value: '3',
+    state: false,
+    check: false,
   },
   {
     label: '配送',
     value: '4',
+    state: false,
+    check: false,
   },
   {
     label: '安装',
     value: '5',
+    state: false,
+    check: false,
   },
 ]);
+// 点击菜单
 const isChecked = val => {
-  console.log(val);
+  console.log(val,'点击的');
+  val.state=!val.state
+};
+// 点击移除
+const removeTag = value => {
+  ServiceList.value.find(res => res.value == value).check  = false;
+  ServiceList.value.find(res => res.value == value).state  = false;
 };
-const removeTag=(value) =>{
-console.log(value,'value');
-ServiceList.value.find(res=>res.value==value).check=false
-}
-
 </script>
 
 <style scoped lang="scss">
@@ -75,15 +111,25 @@ ServiceList.value.find(res=>res.value==value).check=false
   height: 100%;
 }
 .header {
+  border-bottom: 1px solid #ccc;
+  padding: 10px;
+  box-shadow: -1px -1px 3px;
   .el_Template {
+    display: flex;
+    align-items: center;
     .name {
       font-size: 16px;
+      margin-right: 10px;
     }
   }
   display: flex;
   .el_Service {
     margin-left: 30px;
-
+    display: flex;
+    align-items: center;
+    .name {
+      margin-right: 10px;
+    }
     .el-checkbox {
       width: 100% !important;
       padding: 0 30px;
@@ -113,4 +159,7 @@ ServiceList.value.find(res=>res.value==value).check=false
   content: '';
   display: none;
 }
+.content {
+  margin-top: 6px;
+}
 </style>

src/views/financialsector/Financialse/FinancialWarehousing.vue

@@ -237,9 +237,17 @@
 </template>
 
 <script setup>
+
 import { ref } from 'vue';
+import { defineProps } from 'vue';
+// 接收参数
+const props = defineProps({
+  templateData: Object 
+});
+console.log(props,'来自父页面参数');
 const Storageloading = ref(false); //仓储品类加载
 const goriesloading = ref(false); //仓储品类加载
+console.log('仓储子页面');
 const form = ref({
   CalculationBasis: '1', // 计算基准
   Distinguishcategories: '1', //是否区分品类