修改

public/index.html

@@ -22,7 +22,7 @@
   <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
   <link rel="icon" href="<%= BASE_URL %>favicon.png">
   <!-- 在 public/index.html 中添加 -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
 
    <!-- Luckysheet 样式 -->
  <link rel="stylesheet" href="/plugins/css/pluginsCss.css" />

src/api/exctab/exceltab.js

@@ -81,4 +81,12 @@ export const saveExcelJson = (form) => {
     method: 'post',
     data:form
   })
+}
+//预览pdf
+export const getExcelPdf= (form) => {
+  return request({
+    url: '/api/blade-manager/exceltab/get-excel-pdf',
+    method: 'post',
+    data:form
+  })
 }

src/components/PdfView.vue

@@ -1,11 +1,27 @@
 <template>
   <el-drawer
+  show-close
     size="100%"
     append-to-body
     title="查看pdf文件"
     :visible="drawerVisible"
+     :with-header="false"
     :before-close="handleClose">
-    <div style="height: 100%;">
+     <div style="height: 100%;">
+      <!-- 保存按钮 -->
+      <div style="position: absolute; top: 20px; right: 20px; z-index: 100;">
+        <el-button 
+        v-if="isSave"
+        :loading="saveExcelJsonLoadPdf"
+          type="primary" 
+          icon="el-icon-save" 
+          @click="savePdf"
+          size="mini"
+        >
+          保存表格
+        </el-button>
+      </div>
+      
       <viewPdf :pdfUrl="pdfUrl" v-if="drawerVisible"/>
     </div>
   </el-drawer>
@@ -16,21 +32,39 @@ import viewPdf from './viePdf.vue'
 
 export default {
   components: { viewPdf },
+  props: {
+    saveExcelJsonLoadPdf: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    saveExcelJsonLoadPdf(newVal) {
+     this.saveExcelJsonLoadPdf = newVal
+    }
+  },
   data() {
     return {
       drawerVisible: false,
-      pdfUrl: ''
+      pdfUrl: '',
+      isSave:false
     }
   },
   methods: {
     // 暴露给父组件调用的方法
-    show(url) {
+    show(url,val) {
+      console.log(url,'url');
+      
       this.pdfUrl = url
       this.drawerVisible = true
+      this.isSave = val
     },
     handleClose(done) {
       this.drawerVisible = false
       done()
+    },
+    savePdf() {
+      this.$emit('save-pdf')
     }
   }
 }

src/components/viePdf.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="pdf-viewer">
-    <div class="pdf-content">
-      <canvas ref="pdfCanvas"></canvas>
-    </div>
-    <div class="pagination">
-      <button @click="prevPage">上一页</button>
-      <span>{{ pageNum }} / {{ pageCount }}</span>
-      <button @click="nextPage">下一页</button>
 
+    
+    <!-- PDF内容区域 -->
+    <div class="pdf-content">
+      <div class="pdf-container">
+        <canvas ref="pdfCanvas"></canvas>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+// 导入pdfjs库
 window.pdfjsLib = pdfjsLib
 pdfjsLib.GlobalWorkerOptions.workerSrc = 
-  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'
+  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js'
 
 export default {
-   props: {
+  props: {
     pdfUrl: {
       type: String,
       required: true
@@ -26,111 +26,173 @@ export default {
   },
   data() {
     return {
-      dialogVisible: false,
-      pdfDoc: null,
-      pageNum: 1,
-      pageCount: 0,
-   
+      pdfDoc: null,       // PDF文档实例
+      pageNum: 1,         // 当前页码
+      pageCount: 0,       // 总页数
+      scale: 1.3,           // 缩放比例，1表示原始大小
+      isLoading: false    // 加载状态
     }
   },
-   watch: {
-    // 观察 pdfUrl 的变化
-    pdfUrl(newVal) {
-      console.log(newVal,'newVal');
- 
-      if (newVal !== this.pdfUrl) {
-         this.dialogVisible = false
-        this.openPdf();
+  watch: {
+    // 监听PDF URL变化，重新加载PDF
+    pdfUrl: {
+      handler(newVal) {
+        if (newVal) {
+          this.pageNum = 1
+          this.scale = 1.3
+          this.loadPdf()
+        }
+      },
+      immediate: true
+    },
+    // 监听页码变化，重新渲染页面
+    pageNum(newVal) {
+      if (this.pdfDoc) {
+        this.renderPage(newVal)
+      }
+    },
+    // 监听缩放比例变化，重新渲染页面
+    scale(newVal) {
+      if (this.pdfDoc) {
+        this.renderPage(this.pageNum)
       }
     }
   },
-  mounted() {
-   
-      
-    console.log( this.pdfUrl,' this.pdfUrl1111111');
-     this.openPdf()
-  },
   methods: {
-    goBack(){
-        this.dialogVisible = false
-      this.$router.go(-1)
-    },
-    openPdf() {
-      this.dialogVisible = true
-      this.loadPdf()
-    },
-    closeDialog() {
-      this.pdfDoc = null
-      this.pageNum = 1
-    },
+    // 加载PDF文档
     async loadPdf() {
+      if (!this.pdfUrl) return
+      
+      this.isLoading = true
       try {
-        // 加载 PDF 文档
         const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
         this.pdfDoc = await loadingTask.promise
         this.pageCount = this.pdfDoc.numPages
         this.renderPage(this.pageNum)
       } catch (error) {
-        this.$message.error('加载 PDF 失败: ' + error.message)
+        console.error('加载PDF失败:', error)
+        this.$message.error('加载PDF失败: ' + error.message)
+      } finally {
+        this.isLoading = false
       }
     },
+    
+    // 渲染指定页码
     async renderPage(num) {
+      if (!this.pdfDoc) return
+      
+      this.isLoading = true
       try {
         const page = await this.pdfDoc.getPage(num)
         const canvas = this.$refs.pdfCanvas
         const ctx = canvas.getContext('2d')
-        const viewport = page.getViewport({ scale:1 })
-
+        
+        // 获取PDF原始尺寸的视口，使用当前缩放比例
+        const viewport = page.getViewport({ scale: this.scale })
+        
+        // 设置canvas尺寸以匹配PDF页面尺寸
         canvas.height = viewport.height
         canvas.width = viewport.width
-
+        
+        // 渲染PDF页面
         await page.render({
           canvasContext: ctx,
           viewport: viewport
         }).promise
       } catch (error) {
-        this.$message.error('渲染 PDF 页面失败: ' + error.message)
+        console.error('渲染PDF页面失败:', error)
+        this.$message.error('渲染PDF页面失败: ' + error.message)
+      } finally {
+        this.isLoading = false
       }
     },
+    
+    // 上一页
     prevPage() {
-      if (this.pageNum <= 1) return
-      this.pageNum--
-      this.renderPage(this.pageNum)
+      if (this.pageNum > 1) {
+        this.pageNum--
+      }
     },
+    
+    // 下一页
     nextPage() {
-      if (this.pageNum >= this.pageCount) return
-      this.pageNum++
-      this.renderPage(this.pageNum)
+      if (this.pageNum < this.pageCount) {
+        this.pageNum++
+      }
+    },
+    
+    // 放大
+    zoomIn() {
+      if (this.scale < 3) {
+        this.scale += 0.1
+      }
+    },
+    
+    // 缩小
+    zoomOut() {
+      if (this.scale > 0.5) {
+        this.scale -= 0.1
+      }
+    },
+    
+    // 重置为原始大小
+    resetZoom() {
+      this.scale = 1.25
     }
   }
 }
 </script>
 
-
 <style scoped>
 .pdf-viewer {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 或者固定高度如 800px */
-  text-align: center;
 
+  overflow: auto;
 }
 
+
+
+
+/* PDF内容区域 */
 .pdf-content {
   flex: 1;
-  overflow: auto; /* 内容超出时显示滚动条 */
-  border: 1px solid #ddd;
-  margin-bottom: 10px;
-}
-
-.pagination {
+  overflow: auto;
+  padding: 20px;
+  background-color: #f9f9f9;
   display: flex;
   justify-content: center;
-  align-items: center;
-  gap: 20px;
-  padding: 10px;
-  background: #f5f5f5;
-  position: sticky;
-  bottom: 0;
+  align-items: flex-start;
+}
+
+.pdf-container {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  background-color: white;
+  margin: 0 auto;
+}
+
+/* 加载状态指示器 */
+.pdf-content::after {
+  content: '';
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin: -20px 0 0 -20px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #42b983;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.pdf-content.loading::after {
+  display: block;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
-</style>
+</style>

src/views/codeRule/ruleManage.vue

@@ -510,7 +510,7 @@ import PreviewResult from './PreviewResult.vue'
 import {getPage,edit,add,deleteItem,getById, addInfo,editInfo,getInfoPage,deleteItemInfo,updateTypeByTwo,standardUpdate } from "@/api/ruleManage/fileRule.js";
 import { getStore, setStore } from "@/util/store";
  import { getDictionary } from "@/api/system/dict";
- import PdfView from '../../components/PdfView.vue';
+ import PdfView from '@/components/PdfView.vue';
   export default {
   components: {
     ConditionsSet,

src/views/exctab/excelmodel/excelmodel.vue

@@ -117,6 +117,7 @@
               <el-link v-if="from.templateExtension" underline class="marleft10 colorblue"
                 style="text-decoration:underline;" @click="downloadExcelModel()">下载模板</el-link>
                <el-button type="success" size="mini" @click="saveExcelInfo" :loading="saveExcelJsonLoad" style="margin-left: 5px;">保存数据</el-button>
+                <el-button type="primary" size="mini" @click="preViewInfoPdf" style="margin-left: 5px;"  :loading="pdfLoad">预览</el-button>
              </div>
               </div>
            
@@ -135,6 +136,7 @@
             <div v-if='excelshow' style="width:100%;height:100%;" id="fullscreen_content">
               <!-- <vab-only-office :option='exceloption' /> -->
                <lucky-sheet
+               v-loading="initLoad"
                 ref="luckySheet"
                 @data-change="handleDataChange"
                 :initialData="initialData"
@@ -246,7 +248,12 @@
         <el-button type="primary" @click="aumbitexcelmoudel">确 定上传</el-button>
       </span>
     </el-dialog>
-
+     <!--  预览pdf -->
+            <PdfView
+              ref="pdfDrawerExcelRef"
+              @save-pdf="saveExcelInfoPdf"
+              :saveExcelJsonLoadPdf="saveExcelJsonLoadPdf"
+            />
   </div>
 </template>
 
@@ -258,13 +265,13 @@ import {
 } from '@/api/exctab/excelmodel';
 import ManualSorting from '@/components/WbsTree/ManualSorting'
 import VabOnlyOffice from '@/components/online-office/index'
-import { log } from '@antv/g2plot/lib/utils';
+ import PdfView from '@/components/PdfView.vue';
 import screenfull from "screenfull";
 import LuckySheet from '@/components/lucky-sheet-editor/LuckySheet.vue'
-import {getExcelJson,saveExcelJson} from '@/api/exctab/exceltab';
+import {getExcelJson,saveExcelJson,getExcelPdf} from '@/api/exctab/exceltab';
 export default {
   components: {
-    ManualSorting, VabOnlyOffice,LuckySheet
+    ManualSorting, VabOnlyOffice,LuckySheet,PdfView
   },
   data() {
     return {
@@ -372,7 +379,12 @@ export default {
       dataList: [],
       fileobj: [],
       initialData: [],
+      initLoad: false,
       saveExcelJsonLoad: false,
+      pdfLoad: false,
+      pdfDrawerExcelRef: null,
+      saveExcelJsonLoadPdf: false,
+      saveDataInfo: {},
     }
   },
   computed: {
@@ -1111,11 +1123,13 @@ s
       // 可以在这里将数据发送到后端保存
     },
     async getInitialData(){
+      this.initLoad=true
         const { data: res } = await getExcelJson(
         {
           url: this.from.fileUrl,
          
         })
+         this.initLoad=false
       if (res.code == 200) {
     
         this.initialData = JSON.parse(res.data)
@@ -1129,12 +1143,47 @@ s
     },
     //保存表格数据
 async saveExcelInfo() {
-  this.saveExcelJsonLoad = true; // 开始加载
+
+      const saveData = await this.$refs.luckySheet.getData();
+      this.saveDataInfo = saveData
+      this.saveExcelJsonLoad = true; // 开始加载
+      try {
+      
+        const { data: res } = await getExcelPdf({
+          key: this.from.id,
+          jsonExcel: JSON.stringify(saveData)
+        });
+        
+        if (res.code === 200) {
+          console.log(res.data,'data');
+
+          this.$nextTick(() => {
+            this.$refs.pdfDrawerExcelRef.show(res.data,true)
+          
+          })
+          
+        } else {
+          this.$message.error(res.msg);
+        
+        }
+      } catch (error) {
+
+      } finally {
+        // 无论成功还是失败，最终都会执行这里
+        this.saveExcelJsonLoad = false;
+      }
+
+
+},
+async saveExcelInfoPdf() {
+  this.saveExcelJsonLoadPdf = true; // 开始加载
+  console.log(this.saveDataInfo ,'this.saveDataInfo ');
+  
   try {
-    const saveData = await this.$refs.luckySheet.getData();
+    // const saveData = await this.$refs.luckySheet.getData();
     const { data: res } = await saveExcelJson({
       key: this.from.id,
-      jsonExcel: JSON.stringify(saveData)
+      jsonExcel: JSON.stringify(this.saveDataInfo )
     });
     
     if (res.code === 200) {
@@ -1150,9 +1199,41 @@ async saveExcelInfo() {
 
   } finally {
     // 无论成功还是失败，最终都会执行这里
-    this.saveExcelJsonLoad = false;
+    this.saveExcelJsonLoadPdf = false;
   }
-}
+},
+//预览pdf
+ async preViewInfoPdf(){
+  console.log('预览');
+  this.pdfLoad = true; // 开始加载
+
+  try {
+   
+    const { data: res } = await getExcelPdf({
+      key: this.from.id,
+    
+    });
+    
+    if (res.code === 200) {
+      console.log(res.data,'data');
+
+      this.$nextTick(() => {
+        this.$refs.pdfDrawerExcelRef.show(res.data,false)
+       
+      })
+      
+    } else {
+      this.$message.error(res.msg);
+     
+    }
+  } catch (error) {
+
+  } finally {
+    // 无论成功还是失败，最终都会执行这里
+    this.pdfLoad = false;
+  }
+  }
+
   },
   created() {
     this.excelType()//清表类型

src/views/formula/component/formulaItem copy.vue

@@ -1,59 +0,0 @@
-<template>
-  <span :class="getItemClass(item)" @click="itemClick(item)">
-    {{item.name}}
-    
-  </span>
-  
-</template>
-
-<script>
-export default {
-  name: "formulaItem",
-  props: {
-    item: {
-      type: Object,
-      default: function () {
-        return {};
-      }
-    },
-   
-  },
-  data(){
-    return{
-
-    }
-  },
-  methods:{
-    itemClick(item){
-      item.selected = !item.selected;
-      this.$emit('click',{
-        selected:item.selected,
-        item
-      })
-    },
-    getItemClass(item){
-      let obj = {};
-      // obj[item.type.toLocaleLowerCase()+'-class']=true;
-      obj['element-class']=true;
-      if(item.selected){
-        obj.selected = true;
-      }
-      return obj;
-    }
-  }
-}
-</script>
-<style scoped lang="scss">
-  .element-class{
-    cursor: pointer;
-    padding: 0 3px;
-    &.selected{
-      color: rgba(64,149,229,1);
-    }
-  }
-  .text-blue{
-    font-size: 20px;
-    color: rgba(64,149,229,1);
-    font-weight:bold;
-  }
-</style>

src/views/formula/component/formulaItem.vue

@@ -1,7 +1,9 @@
 <template>
   <span :class="getItemClass(item)" @click="itemClick(item)">
     {{item.name}}
+    
   </span>
+  
 </template>
 
 <script>
@@ -14,6 +16,7 @@ export default {
         return {};
       }
     },
+   
   },
   data(){
     return{
@@ -45,7 +48,12 @@ export default {
     cursor: pointer;
     padding: 0 3px;
     &.selected{
-      color: #f0720a;
+      color: rgba(64,149,229,1);
     }
   }
+  .text-blue{
+    font-size: 20px;
+    color: rgba(64,149,229,1);
+    font-weight:bold;
+  }
 </style>

src/views/formula/component/formulaItem1.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-tag 
+    v-if="item.type === 'Element'"
+    type="info"   
+    :effect="item.selected ? 'dark' : 'plain'"
+    @click="itemClick(item)"
+    class="ellipse-tag"
+    :class="{'selected-tag': item.selected}"
+  > 
+    {{ item.name }}
+  </el-tag>
+  <span 
+    :class="getItemClass(item)" 
+    @click="itemClick(item)" 
+    v-else
+    class="element-span"
+  >
+    {{ item.name }}
+  </span>
+</template>
+
+<script>
+export default {
+  name: "formulaItem",
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  methods: {
+    itemClick(item) {
+      // 切换选中状态
+      item.selected = !item.selected;
+      this.$emit('click', {
+        selected: item.selected,
+        item
+      });
+    },
+    getItemClass(item) {
+      return {
+        'element-class': true,
+        'selected': item.selected
+      };
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+// 共用样式
+.element-class, .ellipse-tag {
+  display: inline-flex;
+  align-items: center; // 纵向居中对齐
+  justify-content: center;
+  vertical-align: middle; // 确保与其他元素对齐
+  box-sizing: border-box;
+}
+
+.element-class {
+  cursor: pointer;
+  padding: 0 3px;
+  height: 32px; // 与tag保持一致高度
+  
+  &.selected {
+    color: #f0720a;
+  }
+}
+
+// 标签样式
+.ellipse-tag {
+  border-radius: 50px !important; // 椭圆样式
+  padding: 0 12px !important;
+  height: 32px; // 固定高度确保对齐
+  transition: all 0.2s ease; // 平滑过渡效果
+  background-color: #E7E7E7 !important; // 默认背景色
+  border-color: #E7E7E7 !important;    // 默认边框色
+  color: #333 !important;              // 默认文字色
+  
+  &.selected-tag {
+    background-color: #909399 !important; // 选中状态背景色
+    border-color: #909399 !important;    // 选中状态边框色
+    color: #fff !important;              // 选中状态文字色
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// 确保span和tag在同一行时对齐
+.element-span {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+}
+</style>
+    

src/views/formula/component/funComponent/ifelse copy.vue

@@ -0,0 +1,733 @@
+<template>
+  <div class="ifelse-box">
+    <div class="flex jc-al-c">
+      <span v-if="symbol!=='|'">IF条件执行</span>
+      <el-select v-model="symbol" @change="setCondition()" size="medium" placeholder="请选择" >
+        <el-option label="大于等于" value=">="></el-option>
+        <el-option label="小于等于" value="<="></el-option>
+        <el-option label="大于" value=">"></el-option>
+        <el-option label="小于" value="<"></el-option>
+        <el-option label="等于" value="="></el-option>
+        <el-option label="小于且大于" value="<&&<"></el-option>
+        <el-option label="小于等于且大于等于" value="<=&&<="></el-option>
+        <el-option label="试验判断" value="|"></el-option>
+      </el-select>
+      <span class="mg-l-20 mg-r-10" v-if="symbol!=='|'">执行结果</span>
+      <el-select v-model="result" @change="setTF()" size="medium" placeholder="请选择" v-if="symbol!=='|'">
+        <el-option label="真假值" value="1"></el-option>
+        <el-option label="运算" value="2"></el-option>
+      </el-select>
+      <el-button class="mg-l-10" size="small" type="info" @click="showSelectEle">选择参数</el-button>
+    </div>
+
+    <div class="mg-t-20 flex jc-al-c">
+      <span class="textblod mg-r-20"  v-if="symbol!=='|'">IF</span>
+      <div class="flex jc-al-c" v-if="symbol == '<&&<' || symbol == '<=&&<='">
+        <vue-tags-input v-model="tag1" :tags="tags1" @focus="curFocusIndex = 1" @blur="inputBlur(1)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+        <span v-if="symbol == '<&&<'" class="mg-l-20 mg-r-20">&lt;</span>
+        <span v-if="symbol == '<=&&<='" class="mg-l-20 mg-r-20">≤</span>
+      </div>
+      <vue-tags-input v-model="tag2" :tags="tags2" @focus="curFocusIndex = 2" @blur="inputBlur(2)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+      <span class="mg-l-20 mg-r-20">
+        <span v-if="symbol == '>='">≥</span>
+        <span v-if="symbol == '<='">≤</span>
+        <span v-if="symbol == '>'">&gt;</span>
+        <span v-if="symbol == '<'">&lt;</span>
+        <span v-if="symbol == '='">=</span>
+        <span v-if="symbol == '<&&<'">&lt;</span>
+        <span v-if="symbol == '|'">|</span>
+      </span>
+      <vue-tags-input v-model="tag3" :tags="tags3" @focus="curFocusIndex = 3" @blur="inputBlur(3)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+    </div>
+
+    <div class="flex jc-al-c mg-t-20" v-if="result == 1">
+      <span class="textblod mg-r-10">真值</span>
+      <vue-tags-input v-model="tag4" :tags="tags4" @focus="curFocusIndex = 4" @blur="inputBlur(4)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag" @keyup.native="btKeyUp"/>
+      <span class="textblod mg-r-10 mg-l-20">假值</span>
+      <vue-tags-input v-model="tag5" :tags="tags5" @focus="curFocusIndex = 5" @blur="inputBlur(5)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag" @keyup.native="btKeyUp"/>
+    </div>
+    <div class="mg-t-20" v-if="result == 2">
+      <div class="flex">
+        <span class="textblod mg-r-10">真值</span>
+        <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 6}" @click="curFocusIndex = 6">
+          <div class="flex jc-sb mg-b-20">
+            <!-- <div>定位数据位置:</div> -->
+            <div class="icon-box">
+              <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+            </div>
+            <div>
+              <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
+              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
+              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
+              <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
+              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
+              <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+            </div>
+          </div>
+          <draggable v-model="selectEleFormula">
+            <formula-item 
+              v-for="(item,index) in selectEleFormula" :key="index" 
+              :item="item" @click="obj => eleFormulaClick(obj,index)"
+            >
+            </formula-item>
+          </draggable>
+        </div>
+      </div>
+      <div class="flex mg-t-10">
+        <span class="textblod mg-r-10">假值</span>
+        <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 7}" @click="curFocusIndex = 7">
+          <div class="flex jc-sb mg-b-20">
+            <!-- <div>定位数据位置:</div> -->
+            <div class="icon-box">
+              <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
+              <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+            </div>
+            <div>
+              <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
+              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
+              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
+              <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
+              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
+              <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+            </div>
+          </div>
+          <draggable v-model="selectEleFormula2">
+            <formula-item 
+              v-for="(item,index) in selectEleFormula2" :key="index" 
+              :item="item" @click="obj => eleFormulaClick(obj,index)"
+            >
+            </formula-item>
+          </draggable>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog title="输入值" :visible.sync="inputVisible" width="300px" append-to-body :close-on-click-modal="false">
+      <el-input v-model="inputText" placeholder="请输入内容"></el-input>
+      <div class="text-align-c mg-t-10">
+        <el-button size="small" @click="addTextHandle" type="primary">保存</el-button>
+        <el-button size="small" @click="inputVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import VueTagsInput from '@johmun/vue-tags-input';
+import formulaItem from "../formulaItem";
+import draggable from 'vuedraggable';
+export default {
+  name: "ifelse",
+  components: {
+    draggable,
+
+    VueTagsInput,
+
+    formulaItem,
+  },
+  props: {
+    formulainfo: {
+      type: Object,
+      default: function () {
+        return {};
+      }
+    },
+    curele: {
+      type: Object,
+      default: function () {
+        return {};
+      }
+    },
+
+    formulamap:{
+      type: Object,
+      default: function () {
+        return {};
+      }
+    }
+  },
+  data(){
+    return{
+      symbol:'>=',
+      result:'1',
+
+      selectEleFormula:[],
+      selectEleFormula2:[],
+
+      curFocusIndex:0,//当前在哪个输入框
+      curSeleEleIndex:-1,//公式文字里面选中的元素索引
+      symbolReg:/(\+|-|\*|\/)（.+）/,
+      inputVisible:false,
+      inputText:'',
+
+      tag1: '',
+      tags1: [],
+      tag2: '',
+      tags2: [],
+      tag3: '',
+      tags3: [],
+      tag4: '',
+      tags4: [],
+      tag5: '',
+      tags5: [],
+    }
+  },
+  mounted(){
+    //console.log(this.formulainfo.arguments[0])
+    //console.log(this.formulainfo.arguments[1])
+    let args0 = this.formulainfo.arguments[0];
+    let args1 = this.formulainfo.arguments[1];
+    let args2 = this.formulainfo.arguments[2];
+    this.initCondition(args0);
+
+    if((typeof args1 == 'string' || (typeof args1 == 'object' && (args1.type == 'Element' || args1.type == 'ParamData'))) &&
+      (typeof args2 == 'string' || (typeof args2 == 'object' && (args2.type == 'Element' || args2.type == 'ParamData')))
+    ){
+      this.initTFInput(args1,args2);
+    }else if(Array.isArray(args1) || Array.isArray(args2)){
+      this.result = '2';
+      this.initTFFormula(args1,args2)
+    }
+  },
+  methods:{
+    showSelectEle(){
+      this.$set(this.formulainfo,'showSelectEle',!this.formulainfo.showSelectEle);
+    },
+
+    beforeAddingTag(){
+
+    },
+    btKeyUp(e) {
+     //把中文标点符号转换成英文的
+     e.target.value = e.target.value.replace(/“/g,'"');
+     e.target.value = e.target.value.replace(/”/g,'"');
+     e.target.value = e.target.value.replace(/’/g,"'");
+     e.target.value = e.target.value.replace(/‘/g,"'");
+    },
+    inputHook(){
+      console.log(111)
+    },
+
+    inputBlur(num){
+      if(this['tag'+num]){
+        if(this['tags'+num] && this['tags'+num][0]){
+          this.$emit('uncheck',this['tags'+num][0].id)
+        }
+        this['tags'+num] = [];
+      }
+
+
+      if(num>=1&&num<=3){
+        this.setCondition();
+      }else if(num>=4&&num<=5){
+        this.setTF();
+      }
+    },
+
+    addText(){
+      this.inputVisible = true;
+    },
+
+    //把元素加到公式里
+    eleAddFormulaHandle(ele){
+      let eleFormula;
+      if(this.curFocusIndex == 6){
+        eleFormula = this.selectEleFormula;
+      }else if(this.curFocusIndex == 7){
+        eleFormula = this.selectEleFormula2;
+      }else{
+        return;
+      }
+
+      if(ele.tableElementKey){
+        //元素
+
+        //简单语法判断
+        if(eleFormula.length != 0){
+        let lastEle = eleFormula[eleFormula.length-1];
+        if(lastEle.type == 'Element'){
+          this.$message({
+            type: "warning",
+            message: "元素无法连续出现在元素后面"
+          });
+          return;
+        }
+        if(lastEle.type == 'Text'){
+          this.$message({
+            type: "warning",
+            message: "元素无法连续出现在输入值后面"
+          });
+          return;
+        }
+        if(lastEle.type == 'Brackets' && lastEle.name == ')'){
+          this.$message({
+            type: "warning",
+            message: "元素无法连续出现在右括号后面"
+          });
+          return;
+        }
+      }
+
+        eleFormula.push({
+          type:'Element',
+          name:ele.eName,
+          id:ele.id,
+          selected:false,
+          tableElementKey:ele.tableElementKey,
+          children:[],
+        })
+      }else if(ele.template && ele.example){
+        //运算符号
+
+        //简单语法判断
+        if(eleFormula.length == 0){
+          this.$message({
+            type: "warning",
+            message: "公式开头不能是运算符号"
+          });
+          return;
+        }else{
+          let lastEle = eleFormula[eleFormula.length-1];
+          if(lastEle.type == 'Operator'){
+            this.$message({
+              type: "warning",
+              message: "运算符号无法连续出现在运算符号后面"
+            });
+            return;
+          }
+          if(lastEle.type == 'Brackets' && lastEle.name == '('){
+            this.$message({
+              type: "warning",
+              message: "运算符号无法连续出现在左括号后面"
+            });
+            return;
+          }
+        }
+
+        eleFormula.push({
+          type:'Operator',
+          name:this.symbolReg.exec(ele.name)[1],
+          selected:false,
+          template:ele.template
+        })
+      }else if(ele.type == 'Brackets'){
+        //括号
+        eleFormula.splice(ele.selectIndex,0,{
+          type:'Brackets',
+          name:ele.name,
+          selected:false,
+        })
+      }else if(ele.type == 'Text'){
+        //输入值
+        eleFormula.push({
+          type:'Text',
+          name:ele.name,
+          selected:false,
+        })
+      }else if(ele.k){
+        //节点参数
+        eleFormula.push({
+          type:'ParamData',
+          name:ele.name,
+          selected:false,
+          id:ele.id,
+          v:ele.v,
+          k:ele.k,
+        })
+      }
+
+      this.setTF();
+    },
+
+    //点选公式中的元素
+    eleFormulaClick({selected,item},index){
+      let eleFormula;
+      if(this.curFocusIndex == 6){
+        eleFormula = this.selectEleFormula;
+      }else if(this.curFocusIndex == 7){
+        eleFormula = this.selectEleFormula2;
+      }else{
+        return;
+      }
+
+      if(selected){
+        eleFormula.forEach((ele)=>{
+          ele.selected = false;
+        })
+        item.selected = true;
+        this.curSeleEleIndex = index;
+      }else{
+        this.curSeleEleIndex = -1;
+      }
+    },
+
+    //快捷添加运算符号
+    addOperator(operator){
+      this.eleAddFormulaHandle(this.formulamap[operator]);
+    },
+
+    //删除点选公式中的元素
+    removeSelect(){
+      let eleFormula;
+      if(this.curFocusIndex == 6){
+        eleFormula = this.selectEleFormula;
+      }else if(this.curFocusIndex == 7){
+        eleFormula = this.selectEleFormula2;
+      }else{
+        return;
+      }
+
+
+      if(this.curSeleEleIndex > -1){
+        eleFormula.splice(this.curSeleEleIndex,1);
+        this.curSeleEleIndex = -1;
+      }
+
+      this.setTF();
+    },
+
+    //添加括号
+    addBrackets(text,type){
+      //type 是true 表示在元素右边插入
+      if(this.curSeleEleIndex == Number(this.curSeleEleIndex)){
+        this.eleAddFormulaHandle({
+          type:'Brackets',
+          name:text,
+          selectIndex:type?Number(this.curSeleEleIndex)+1:this.curSeleEleIndex
+        })
+        //如果在左边插入index要增1
+        if(!type){
+          this.curSeleEleIndex = Number(this.curSeleEleIndex)+1;
+        }
+      }
+    },
+
+    //添加输入值
+    addTextHandle(){
+      let eleFormula;
+      if(this.curFocusIndex == 6){
+        eleFormula = this.selectEleFormula;
+      }else if(this.curFocusIndex == 7){
+        eleFormula = this.selectEleFormula2;
+      }else{
+        return;
+      }
+
+      //简单语法判断
+      if(eleFormula.length != 0){
+        let lastEle = eleFormula[eleFormula.length-1];
+        if(lastEle.type == 'Element'){
+          this.$message({
+            type: "warning",
+            message: "输入值无法连续出现在元素后面"
+          });
+          return;
+        }
+        if(lastEle.type == 'Text'){
+          this.$message({
+            type: "warning",
+            message: "输入值无法连续出现在输入值后面"
+          });
+          return;
+        }
+        if(lastEle.type == 'Brackets' && lastEle.name == ')'){
+          this.$message({
+            type: "warning",
+            message: "输入值无法连续出现在右括号后面"
+          });
+          return;
+        }
+      }
+
+      this.eleAddFormulaHandle({
+        type:'Text',
+        name:this.inputText
+      })
+      this.inputVisible = false;
+    },
+
+    setELe(ele){
+      if(this.curFocusIndex){
+        let obj = {};
+        if(ele.k){
+          obj = {
+            type:'ParamData',
+            name:ele.name,
+            id:ele.id,
+            selected:false,
+            v:ele.v,
+            k:ele.k,
+            children:[],
+          }
+        }else{
+          obj = {
+            type:'Element',
+            name:ele.eName,
+            id:ele.id,
+            selected:false,
+            tableElementKey:ele.tableElementKey,
+            children:[],
+          }
+        }
+
+        if(this.curFocusIndex == 6 || this.curFocusIndex ==7){
+          this.eleAddFormulaHandle(ele)
+        }else{
+          if(this['tags'+this.curFocusIndex] && this['tags'+this.curFocusIndex][0]){
+            this.$emit('uncheck',this['tags'+this.curFocusIndex][0].id)
+          }
+
+          obj.text = obj.name;
+          obj.style = 'background-color: #409EFF';
+          this['tags'+this.curFocusIndex] = [obj];
+          this['tag'+this.curFocusIndex] = '';
+
+          if(this.curFocusIndex == 4 || this.curFocusIndex == 5){
+            this.setTF();
+          }else{
+            this.setCondition();
+          }
+
+          //this.curFocusIndex = 0;
+        }
+      }
+    },
+
+    //初始化真假值判断if(xxx)部分
+    initCondition(args0){
+      if(args0){
+        if(args0.length == 3){
+          //运算符号
+          this.symbol = args0[1];
+
+          //第二个空
+          if((typeof args0[0]) == 'object' && (args0[0].type == 'Element' || args0[0].type == 'ParamData')){
+            let ele = args0[0];
+            this.tags2 =  [
+              Object.assign({
+                text:ele.name,
+                style:'background-color: #409EFF',
+              },ele)]
+          }else if((typeof args0[0]) == 'string'){
+            this.tag2 = args0[0];
+          }
+
+          //第三个空
+          if((typeof args0[2]) == 'object' && (args0[2].type == 'Element' || args0[2].type == 'ParamData')){
+            let ele = args0[2];
+            this.tags3 =  [
+              Object.assign({
+                text:ele.name,
+                style:'background-color: #409EFF',
+              },ele)]
+          }else if((typeof args0[2]) == 'string'){
+            this.tag3 = args0[2];
+          }
+        }else if(args0.length == 7){
+          //运算符号
+          this.symbol = args0[1]+args0[3]+args0[5];
+
+          //第一个空
+          if((typeof args0[0]) == 'object' && (args0[0].type == 'Element' || args0[0].type == 'ParamData')){
+            let ele = args0[0];
+            this.tags1 =  [
+              Object.assign({
+                text:ele.name,
+                style:'background-color: #409EFF',
+              },ele)]
+          }else if((typeof args0[0]) == 'string'){
+            this.tag1 = args0[0];
+          }
+
+          //第二个空
+          if((typeof args0[2]) == 'object' && (args0[2].type == 'Element' || args0[2].type == 'ParamData')){
+            let ele = args0[2];
+            this.tags2 =  [
+              Object.assign({
+                text:ele.name,
+                style:'background-color: #409EFF',
+              },ele)]
+          }else if((typeof args0[2]) == 'string'){
+            this.tag2 = args0[2];
+          }
+
+          //第三个空
+          if((typeof args0[6]) == 'object' && (args0[6].type == 'Element' || args0[6].type == 'ParamData')){
+            let ele = args0[6];
+            this.tags3 =  [
+              Object.assign({
+                text:ele.name,
+                style:'background-color: #409EFF',
+              },ele)]
+          }else if((typeof args0[6]) == 'string'){
+            this.tag3 = args0[6];
+          }
+        }else if(typeof args0 == 'object' && (args0.type == 'Element' || args0.type == 'ParamData')){
+          let ele = args0;
+          this.tags2 =  [
+            Object.assign({
+              text:ele.name,
+              style:'background-color: #409EFF',
+            },ele)]
+        }
+      }
+    },
+
+    //写入参数真假值判断if(xxx)部分
+    setCondition(){
+      if(this.symbol == '<&&<' || this.symbol == '<=&&<='){
+        let arr = new Array(7).fill('');
+        let symbolArr = this.symbol.split('&&');
+        if(this.tags1.length == 0){
+          arr[0] = this.tag1;
+        }else{
+          arr[0] = this.tags1[0];
+        }
+        arr[1] = symbolArr[0];
+        if(this.tags2.length == 0){
+          arr[2] = this.tag2;
+          arr[4] = this.tag2;
+        }else{
+          arr[2] = this.tags2[0];
+          arr[4] = this.tags2[0];
+        }
+        arr[3] = '&&';
+        arr[5] = symbolArr[1];
+        if(this.tags3.length == 0){
+          arr[6] = this.tag3;
+        }else{
+          arr[6] = this.tags3[0];
+        }
+        this.formulainfo.arguments[0] = arr;
+      }else{
+        let arr = new Array(3).fill('');
+        if(this.tags2.length == 0){
+          arr[0] = this.tag2;
+        }else{
+          arr[0] = this.tags2[0];
+        }
+        arr[1] = this.symbol;
+        if(this.tags3.length == 0){
+          arr[2] = this.tag3;
+        }else{
+          arr[2] = this.tags3[0];
+        }
+        this.formulainfo.arguments[0] = arr;
+      }
+      //console.log(this.formulainfo.arguments[0])
+    },
+
+    //初始化输入框的真假值
+    initTFInput(args1,args2){
+      if((typeof args1) == 'object' && (args1.type == 'Element' || args1.type == 'ParamData')){
+        let ele = args1;
+        this.tags4 =  [
+          Object.assign({
+            text:ele.name,
+            style:'background-color: #409EFF',
+          },ele)]
+      }else if((typeof args1) == 'string'){
+        this.tag4 = args1;
+      }
+
+      if((typeof args2) == 'object' && (args2.type == 'Element' || args2.type == 'ParamData')){
+        let ele = args2;
+        this.tags5 =  [
+          Object.assign({
+            text:ele.name,
+            style:'background-color: #409EFF',
+          },ele)]
+      }else if((typeof args2) == 'string'){
+        this.tag5 = args2;
+      }
+    },
+
+    //初始化运算的真假值
+    initTFFormula(args1,args2){
+      if(Array.isArray(args1)){
+        args1.forEach((a,index)=>{
+          if(typeof a == 'string'){
+            this.$set(args1,index,{
+              type:'Text',
+              name:a,
+              selected:false,
+            })
+          }
+        })
+        this.selectEleFormula = args1;
+      }else if(typeof args1 == 'object' && (args1.type == 'Element' || args1.type == 'ParamData')){
+        this.selectEleFormula = [Object.assign({},args1)];
+      }else if(typeof args1 == 'string'){
+        this.selectEleFormula = [{
+          type:'Text',
+          name:args1,
+          selected:false,
+        }]
+      }
+
+      if(Array.isArray(args2)){
+        args2.forEach((a,index)=>{
+          if(typeof a == 'string'){
+            this.$set(args2,index,{
+              type:'Text',
+              name:a,
+              selected:false,
+            })
+          }
+        })
+        this.selectEleFormula2 = args2;
+      }else if(typeof args2 == 'object' && (args2.type == 'Element' || args2.type == 'ParamData')){
+        this.selectEleFormula2 = [Object.assign({},args2)];
+      }else if(typeof args2 == 'string'){
+        this.selectEleFormula2 = [{
+          type:'Text',
+          name:args2,
+          selected:false,
+        }]
+      }
+    },
+
+    //写入参数真假值
+    setTF(){
+      if(this.result == 1){
+        if(this.tags4.length == 0){
+          this.formulainfo.arguments[1] = this.tag4;
+        }else{
+          this.formulainfo.arguments[1] = this.tags4[0];
+        }
+        if(this.tags5.length == 0){
+          this.formulainfo.arguments[2] = this.tag5;
+        }else{
+          this.formulainfo.arguments[2] = this.tags5[0];
+        }
+      }else if(this.result == 2){
+        this.formulainfo.arguments[1] = this.selectEleFormula;
+        this.formulainfo.arguments[2] = this.selectEleFormula2;
+      }
+    },
+
+  }
+}
+</script>
+<style scoped lang="scss">
+  .textblod{
+    font-weight: bold;
+    font-size: 18px;
+  }
+  .sele-ele-box{
+    height: 100px;
+    padding: 10px;
+    // margin-top: 10px;
+  }
+  .icon-box .el-link{
+    font-size: 20px;
+    margin-right: 10px;
+  }
+</style>

src/views/formula/component/funComponent/ifelse.vue

@@ -11,6 +11,7 @@
         <el-option label="小于且大于" value="<&&<"></el-option>
         <el-option label="小于等于且大于等于" value="<=&&<="></el-option>
         <el-option label="试验判断" value="|"></el-option>
+        <el-option label="多条件" value="more"></el-option>
       </el-select>
       <span class="mg-l-20 mg-r-10" v-if="symbol!=='|'">执行结果</span>
       <el-select v-model="result" @change="setTF()" size="medium" placeholder="请选择" v-if="symbol!=='|'">
@@ -36,6 +37,19 @@
         <span v-if="symbol == '='">=</span>
         <span v-if="symbol == '<&&<'">&lt;</span>
         <span v-if="symbol == '|'">|</span>
+        <div v-if="symbol == 'more'" >
+          <el-select v-model="symbol1" @change="setCondition()" size="medium" placeholder="请选择" >
+              <el-option label=">=" value=">="></el-option>
+              <el-option label="<=" value="<="></el-option>
+              <el-option label="=" value="="></el-option>
+              <el-option label=">" value=">"></el-option>
+              <el-option label="<" value="<"></el-option>
+              <el-option label="≠" value="≠"></el-option>
+              <el-option label="包含" value="包含"></el-option>
+              <el-option label="不包含" value="不包含"></el-option>
+          
+            </el-select>
+       </div>
       </span>
       <vue-tags-input v-model="tag3" :tags="tags3" @focus="curFocusIndex = 3" @blur="inputBlur(3)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
     </div>
@@ -177,6 +191,7 @@ export default {
       tags4: [],
       tag5: '',
       tags5: [],
+      symbol1:''
     }
   },
   mounted(){

src/views/formula/edit.vue

@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="box-dashed">
-      <div class="mg-b-20">函数公式..（节点公式）</div>
+      <div class="mg-b-20">函数公式..</div>
       <div class="edit-text">
         <span>
           <formula-item

src/views/formula/edit copy.vue → src/views/formula/editc-1.vue

@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="box-dashed">
-      <div class="mg-b-20">函数公式..</div>
+      <div class="mg-b-20">函数公式..（节点公式）</div>
       <div class="edit-text">
         <span>
           <formula-item
@@ -48,7 +48,7 @@
           >
           </formula-item>
         </span>
-        <span>=</span>
+        <span style="margin-left: 5px;margin-right: 5px;">=</span>
         <span   v-for="(item,index) in processFormula"     :key="index">
           <el-tooltip class="item" effect="light" placement="top-start" :disabled="item.type!=='Element'">
             <div slot="content">{{item.tableName }}</div>
@@ -66,24 +66,16 @@
       </div>
     </div>
     <div v-show="operationVisible" class="operation-box flex1 flex flex-d-c ov-hidden">
-      <div>选择参数设置</div>
+      <div class="flex ">
+        <div>选择参数设置</div>
+        <div style="margin-left: 29%;font-weight: 700;">公式配置</div>
+      </div>
       <div class="flex flex-d-c flex1 ov-hidden">
         <el-row :gutter="20" class="flex1 ov-hidden">
           <el-col :span="8" class="h-100p">
             <el-card shadow="never" v-loading="treeLoad" class="h-100p ov-auto">
               <el-scrollbar style="height: 100%">
-                <!-- <el-tree
-                  class="filter-tree"
-                  lazy
-                  :load="loadNode"
-                  @node-click="getNodeDetail"
-                  :props="defaultProps"
-                  :expand-on-click-node="false"
-                  highlight-current
-                  node-key="id"
-                  ref="tree"
-                >
-                </el-tree> -->
+              
                 <el-tree
                   class="filter-tree"
                   :data="treeData"
@@ -100,6 +92,11 @@
             </el-card>
           </el-col>
           <el-col :span="16" class="h-100p flex flex-d-c ov-hidden">
+             <div class="operation-box-inset">
+                <div class="operation-box-inset">
+                  插入运算符
+                </div>
+             </div>
             <div class="flex" style="justify-content: space-between;width:100%">
                <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表1" style="width:45%">
                 <el-option v-if="paramDataList.length" label="选择节点参数2" value="选择节点参数"></el-option>
@@ -1844,4 +1841,8 @@ export default {
     height: 100%;
   }
 }
+.operation-box-inset{
+  display: flex;
+  flex-direction: column;
+}
 </style>