logpm_page/src/views/financialsector/FinanceHome.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.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 /></span>
            <span v-if="item.label == '仓储'"
              ><FinancialWarehousing :templateData="templateInfo"
            /></span>
            <span v-if="item.label == '配送'"><FinancialDelivery /></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'; //字典
//仓储模板
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 Tabmenu = ref('仓储');
const templateInfo = ref({
  name: '参数',
});
// 菜单列表
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');//菜单加载
}
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;
  }
};
</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>