table 横竖数据结构转换

<template>
  <div>
    <!-- <el-card shadow="never" class="mb-2">
        
      </el-card> -->


    <!-- <h1 style="font-size:30px;color:red">这是编辑模块</h1> -->
    <!-- <el-select @change="selectTemplate" v-model="TemplateValue" placeholder="选择食品模版" style="width: 135px;">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select> -->
    <!-- <el-button style="margin: 26px" type="primary" @click="openKnow">添加科普知识</el-button> -->


    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor id="pdfRef" style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
        :mode="mode" @onCreated="handleCreated" @onChange="handleChange" />
    </div>

    <PopKnowlodge ref="childRef" @childTransAction="updateKnowledge" />


    <div id="other" v-show="false">
      <!-- v-show="false" -->
      <h1>横向日餐</h1>
      <table border="1" width="100%" cellpadding="0" cellspacing="0" align="center">
        <tbody v-for="(day, dayIndex) in RecipeData">
          <tr>
            <td :rowspan="day.consumptionMealSchedules.length">&nbsp;{{ day.measurementDate }}</td>
            <td>{{ day.consumptionMealSchedules[0].refMealScheduleName }}</td>
            <td>
              <div>{{ ConvertFoodArray(day.consumptionMealSchedules[0].dishes) }}</div>
            </td>
          </tr>
          <tr v-for="(each, Eaindex) in NewMealSchedulesArray(day.consumptionMealSchedules)" :key="Eaindex">
            <td>{{ each.refMealScheduleName }}</td>
            <td>
              <div>{{ ConvertFoodArray(each.dishes) }}</div>
            </td>
          </tr>
        </tbody>
      </table>

      <h1>纵向日餐</h1>
      <table style="margin-top:20px;width:100%;">
        <thead>
          <tr>
            <th>餐次/日期</th>
            <th v-for="day in RecipeData" :key="day.measurementDate">{{ day.measurementDate }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="meal in uniqueMealSchedules" :key="meal">
            <td>{{ meal }}</td>
            <td v-for="day in RecipeData" :key="`${day.measurementDate}-${meal}`">

              <div class="food-all">
                <span>{{ getMealDishes(day, meal) }}</span>

              </div>

            </td>
          </tr>
        </tbody>
      </table>
      <h1>带量食谱</h1>
      <table border="1" style="margin-top:20px;" width="100%" cellpadding="0" cellspacing="0" align="center">
        <thead>
          <tr>
            <th>餐次/日期</th>
            <th colspan="2" v-for="day in RecipeData" :key="day.measurementDate">{{ day.measurementDate }}</th>
          </tr>
        </thead>
        <tbody v-for="meal in uniqueMealSchedules" :key="meal">
          <tr>
            <td>{{ meal }}</td>
            <td v-for="(day, dayIndex) in doubleCycleIngredients" :key="dayIndex">
              <span v-if="dayIndex % 2 === 0"> {{ getDoubleIngredientsItem(day, dayIndex, meal) }}</span>
              <span v-else v-for="(item, index) in  getDoubleIngredientsItem(day, dayIndex, meal).consumptionItems">

                <span
                  v-if="ingredientFindValue(getDoubleIngredientsItem(day, dayIndex, meal), item, item.inputNetContentUnit) > 0">{{
                    item.ingredientName }} {{ ingredientFindValue(getDoubleIngredientsItem(day, dayIndex, meal), item,
    item.inputNetContentUnit) }} 克
                  <span v-if="index < getDoubleIngredientsItem(day, dayIndex, meal).consumptionItems.length - 1 && getDoubleIngredientsItem(day, dayIndex, meal).consumptionItems.length>=1">，</span>
                </span>
              </span>
            </td>

          </tr>
        </tbody>


      </table>
    </div>
  </div>
</template>
  
<script setup lang="ts">

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import PopKnowlodge from "./PopKnowlodge.vue";
import { ref, reactive, nextTick, defineEmits, shallowRef } from "vue";

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { richTextData } from "@/utils/richTemplateData";
import { getWeekDataList, mergeAndUnique } from "@/utils/weekDate";
const options = richTextData();
const childRef = ref();
const TemplateValue = ref("")
const knowledgeVal = ref("");
const resultReport = ref("");
const editorRef = shallowRef();
const mode = ref("simple");
const editorConfig = { placeholder: "请输入内容..." };
const emit = defineEmits(['editEditorAction'])
const weekFoods = ref([])
const keysItem = ref(['dayOfWeek', 'measurementDate', 'foodsText'])
const items = ref([{ id: 11, name: 'John Doe', age: 30 },
{ id: 22, name: 'Jane Smith', age: 25 },])
const KnowledgeJudge = ref("need");

const RecipeData = ref([])
const uniqueMealSchedules = ref([])

const doubleCycleIngredients = ref([])
const toolbarConfig = {
  toolbarKeys: [
    // 一些常用的菜单 key
    "bold", // 加粗
    "italic", // 斜体
    "through", // 删除线
    "underline", // 下划线
    "bulletedList", // 无序列表
    "numberedList", // 有序列表
    "color", // 文字颜色
    "insertLink", // 插入链接
    "fontSize", // 字体大小
    "lineHeight", // 行高
    // 'uploadImage', // 上传图片
    // 'uploadVideo',//上传视频
    "delIndent", // 缩进
    "indent", // 增进
    // 'deleteImage',//删除图片
    "divider", // 分割线
    "insertTable", // 插入表格
    "justifyCenter", // 居中对齐
    "justifyJustify", // 两端对齐
    "justifyLeft", // 左对齐
    "justifyRight", // 右对齐
    "undo", // 撤销
    "redo", // 重做
    "clearStyle" // 清除格式
    // 'fullScreen' // 全屏
  ]
};




const valueHtml = ref(
  '<h1 style="text-align: center;font-size:40px;"><strong>分析评价指导报告</strong></p><p><br></h1>'
);

const openKnow = () => {
  childRef.value.childMethod("edit", null);
};

const jumpKnowedjge = () => {
  childRef.value.childMethod("edit", null);
}

const NewMealSchedulesArray = (xinArray) => {
  return xinArray.slice(1);
}

const ConvertFoodArray = (array) => {
  if (array) {
    return array.join('，');
  } else {
    return ''
  }
}



function getMealDishes(day, mealScheduleName) {

  const mealSchedule = day.consumptionMealSchedules.find(
    schedule => schedule.refMealScheduleName === mealScheduleName
  );
  if (mealSchedule) {
    // console.log(mealSchedule.dishes)
    return mealSchedule.dishes.join('，');
  }
  return [];
}



const unitList = ref([
  { unitName: "克", unitValue: 1 },
  { unitName: "千克", unitValue: 1000 },

  { unitName: "毫升", unitValue: "1" },
  { unitName: "升", unitValue: "1000" }
]);



const ingredientFindValue = (itemDay, itemVal, itemUnit) => {
  // console.log(itemVal.ingredientName)
  // console.log(itemDay)
  // return
  // // var objItem ={}
  // // itemDay.consumptionMealSchedules.map(item => {
  // //   if(item.consumptionItems){
  // //     item.consumptionItems.map(each =>{
  // //       if(each.id === each.id){
  // //         objItem = item
  // //       }
  // //     })
  // //   }

  // // });

  // // console.log(itemVal)
  // // console.log(objItem)
  const result = itemVal.computed.intakeValue / itemDay.diners;
  if (result % 1 !== 0) {
    return result.toFixed(0);
  }
  return result;


}

const ConversionValue = (numVal, itemUnit) => {
  if (itemUnit === '克') {
    return numVal
  }
  if (itemUnit === '千克') {
    return numVal / 1000
  }
  if (itemUnit === '毫升') {
    return numVal
  }
  if (itemUnit === '升') {
    return numVal / 1000
  }
}

// mmmmm
const getDoubleIngredientsItem = (itemVal, itemIndex, mealType) => {
  // console.log(itemVal)
  var objIngredients = {};
  let newIngredients = [];
  itemVal.consumptionMealSchedules.map(each => {
    if (each.refMealScheduleName === mealType) {
      objIngredients = each
      newIngredients.push(each.dishes)
    }

  });
  if (itemIndex % 2 === 0) {
    return newIngredients.join('，');
  } else {

    return objIngredients
  }

}
const getEditorValMethod = (EditorValue, allFood, newArray) => {
  RecipeData.value = newArray
  valueHtml.value = '<h1 style="text-align: center;font-size:40px;"><strong>分析评价指导报告</strong></p><p><br></h1>'
  if (allFood === undefined) {
    valueHtml.value = EditorValue;
    return
  } else {


    const allMealSchedules = RecipeData.value.flatMap(day => day.consumptionMealSchedules);
    console.log('欢笑', [...new Set(allMealSchedules.map(schedule => schedule.refMealScheduleName))])
    uniqueMealSchedules.value = [...new Set(allMealSchedules.map(schedule => schedule.refMealScheduleName))];
  }


  let twoArray = [];
  newArray.forEach((obj) => {
    twoArray.push(obj);
    twoArray.push(obj);
  });

  console.log("双的", twoArray)
  doubleCycleIngredients.value = twoArray;

  const tempDiv = document.getElementById("other");
  console.log('最终的不同数据', RecipeData)

  nextTick(() => {
    valueHtml.value = valueHtml.value + tempDiv.innerHTML + EditorValue;
  })

}

const changeWeekDay = (dayWeek) => {
  if (dayWeek === "MONDAY") {
    return "星期一"
  }
  if (dayWeek === "TUESDAY") {
    return "星期二"
  }
  if (dayWeek === "WEDNESDAY") {
    return "星期三"
  }
  if (dayWeek === "THURSDAY") {
    return "星期四"
  }
  if (dayWeek === "FRIDAY") {
    return "星期五"
  }
  if (dayWeek === "SATURDAY") {
    return "星期六"
  }
  if (dayWeek === "SUNDAY") {
    return "星期日"
  }
}


const handleChange = editor => {
  emit('editEditorAction', valueHtml.value)

};



const handleCreated = editor => {
  editorRef.value = editor;
  // 记录 editor 实例，重要！
};




const updateKnowledge = val => {

  if (KnowledgeJudge.value === "done") {
    return
  }

  valueHtml.value =
    valueHtml.value +
    "<h2><strong>科普小知识</strong></h2>" +
    "<p>" +
    val +
    "</p>";

  KnowledgeJudge.value = "done"

  console.log("执行到了");

};


defineExpose({
  getEditorValMethod,
  jumpKnowedjge
});

</script>
  
<style>
.button-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

#other table,
#other th,
#other td {
  border: 1px solid black;
}

.display {
  opacity: 1;
  width: 1160px;
  position: absolute;
}

.el-date-table__row .disabled {
  background: #999 !important;
}







#other table {
  border-collapse: collapse;
  width: 100%;
}

#other th,
#other td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;

  text-align: center;
  /* 水平居中 */
  vertical-align: middle;
  /* 垂直居中 */
}

.in-table {
  /* border:1px solid black */
}


.nihao .in-table:first-child {
  /* border: 19px solid green!important; */
}

.td-tabl tr:first-child {
  border-top: 1px solid black !important;
}

.nihao .in-table:nth-child(2n) {
  color: red;
}

.food-name {
  display: block;
}

.food-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.food-all {
  flex-shrink: 0
}


.element-ul {
  width: 80%;
  border: 1px solid black;
}

.element-ul li :nth-child(2n) {
  /* background: red; */
}

.element-ul li:nth-child(even) {
  border-top: 1px solid black;
}


.element-ul li {
  display: flex !important;
}

.element-ul span {
  width: 100%;
  text-align: center;

}

.element-name {
  display: block;
  border-right: 1px solid black;
}</style>