logpm_page/src/views/Pricesystem/PricesyHome.vue

<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>