价格体系配置

src/router/views/index.js

@@ -1551,7 +1551,22 @@ export default [
       },
     ],
   },
-
+  {
+    path: '/Pricesystem/PricesyHome',
+    component: Layout,
+    redirect: '/Pricesystem/PricesyHome',
+    children: [
+      {
+        meta: {
+          i18n: 'dict',
+          keepAlive: true,
+        },
+        path: '/Pricesystem/PricesyHome',
+        name: '价格体系配置',
+        component: () => import('@/views/Pricesystem/PricesyHome.vue'),
+      },
+    ],
+  },
   // {
   //   // 这是父路由，财务主页面
   //   path: '/financialsector/FinanceHome',

src/views/Pricesystem/PricesyHome.vue

@@ -0,0 +1,232 @@
+<template>
+    <div class="content_box" v-loading='ServiceTypeLoading'>
+      <div class="header">
+
+        <!-- <div class="el_Template">
+          <span class="name">模板名称</span>
+          <el-input v-model="form.TemplateName" style="width: 240px" placeholder="请输入模板名称" />
+        </div>
+  
+  
+ 
+        <div class="el_Service">
+          <span class="name">品牌</span>
+          <el-select
+            v-model="form.brand"
+            filterable
+            placeholder="请选择品牌"
+            :popper-append-to-body="false"
+            style="width: 340px"
+          >
+            <el-option
+              v-for="item in brand"
+              :key="item.value"
+              :label="item.brandName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div> -->
+  
+        <!-- 服务类型  -->
+        <div class="el_Service">
+          <span class="name">服务类型</span>
+          <el-select
+            v-model="form.ServiceType"
+            filterable
+            placeholder="请选择服务类型"
+            :popper-append-to-body="false"
+            style="width: 340px"
+            multiple
+            @remove-tag="removeTag"
+            :loading='ServiceTypeLoading'
+          >
+            <el-option
+              v-for="item in ServiceList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              <el-checkbox v-model="item.check" @change="isChecked(item)">
+                {{ item.label }}
+              </el-checkbox>
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+  
+      <!-- 模板内容 -->
+      <div class="content" >
+        <el-tabs type="border-card" v-model="Tabmenu">
+          <template v-for="item in ServiceList" :key="item.label">
+            <el-tab-pane :name="item.label" v-if="item.state" :label="item.label">
+              <span v-if="item.label == '提货'"><FinancialBill /></span>
+              <span v-if="item.label == '干线'"><FinancialTrunkLine @request-data="provideData" :templateData="templateInfo"/></span>
+              <span v-if="item.label == '仓储'"
+                ><FinancialWarehousing @request-data="provideData" :templateData="templateInfo"
+              /></span>
+              <span v-if="item.label == '配送'"><FinancialDelivery @request-data="provideData" :templateData="templateInfo"/></span>
+              <span v-if="item.label == '安装'">安装</span>
+            </el-tab-pane>
+          </template>
+        </el-tabs>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, defineAsyncComponent } from 'vue';
+  import { getDictionaryBiz } from '@/api/system/dict'; //字典
+  import { $_basicdataBrande} from '@/api/financialsector/index'; //价格模板
+  //仓储模板
+  const FinancialWarehousing = defineAsyncComponent(() =>
+    import('@/views/financialsector/Financialse/FinancialWarehousing.vue')
+  );
+  /** 提货模板 */
+  const FinancialBill = defineAsyncComponent(() =>
+    import('@/views/financialsector/Financialse/FinancialBill.vue')
+  );
+  /** 干线模板 */
+  const FinancialTrunkLine = defineAsyncComponent(() =>
+    import('@/views/financialsector/Financialse/FinancialTrunkLine.vue')
+  );
+  // 配送模板
+  const FinancialDelivery = defineAsyncComponent(() =>
+    import('@/views/financialsector/Financialse/FinancialDelivery.vue')
+  );
+  const ServiceTypeLoading=ref(true);//菜单加载
+  const form = ref({});
+  const brand=ref([]);//品牌
+  const Tabmenu = ref('仓储');
+  const templateInfo = ref({});
+  // 菜单列表
+  const ServiceList = ref([]);
+  // 字典公共函数
+  function updateDictionary(targetArray, dictionaryType) {
+    getDictionaryBiz(dictionaryType).then(res => {
+      console.log(res, '字典');
+      if(res.data.code ==200){
+        if(res.data.data.length){
+          res.data.data.forEach(item => {
+           targetArray.push({
+          value: item.dictKey,
+          label: item.dictValue,
+          id:item.id,
+        });
+      });
+     }
+    }
+  }).catch(()=>{
+  }).finally(()=>{
+    ServiceTypeLoading.value=false;
+  });
+  }
+  // 页面初始化必要请求
+  const onLoad=()=>{
+    updateDictionary(ServiceList.value,'service_type');//菜单加载
+    let data={
+      current:1,
+      size:1000,
+    }
+    $_basicdataBrande(data).then(res=>{
+      console.log(res,'品牌');
+      if(res.data.code == 200){
+        brand.value=res.data.data
+      }
+    })
+  }
+  onLoad()
+  // 点击菜单
+  const isChecked = val => {
+    //菜单隐藏/显示
+    val.state = !val.state;
+    //设置激活菜单
+    Tabmenu.value = val.label;
+    // 如果当前菜单被关闭则显示最新菜单
+    if (!val.state && form.value.ServiceType.length) {
+      Tabmenu.value = ServiceList.value.find(res => res.state).label;
+    }
+  };
+  // 点击移除
+  const removeTag = value => {
+    ServiceList.value.find(res => res.value == value).check = false;
+    ServiceList.value.find(res => res.value == value).state = false;
+    // 激活菜单设置为已经存在的
+    if (form.value.ServiceType.length) {
+      Tabmenu.value = ServiceList.value.find(res => res.state).label;
+    }
+  };
+  
+  //   给子页面传递数据
+  const provideData = (data) => {
+    console.log(data,'来自子页面的数据');
+    console.log(form.value,'form.value');
+  
+    templateInfo.value = form.value;
+    if(data){
+      templateInfo.value.code=data;//接收来自子页面第一次保存的返回值
+    }
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .content_box {
+    width: 100%;
+    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;
+        .el-checkbox__label {
+          width: 100%;
+          margin-left: 20px;
+        }
+      }
+  
+      .name {
+        font-size: 16px;
+      }
+    }
+  }
+  
+  .el-checkbox {
+    width: 100% !important;
+    padding-left: 10px;
+    box-sizing: border-box;
+    .el-checkbox__label {
+      margin-left: 20px;
+    }
+  }
+  .el-select-dropdown__item {
+    padding: 0;
+  }
+  .el-select-dropdown__item::after {
+    content: '';
+    display: none;
+  }
+  .content {
+    margin-top: 6px;
+    height: 100%;
+  }
+  </style>
+