Source/UBCS-WEB/src/components/code-dialog-page/formulaEditor.vue

@@ -45,168 +45,169 @@
        <!-- 右侧运算符 -->
        <el-col :span="10">
          <el-card
            class="box-card"
            style="height: 33vh;">
            class="box-card formula-box-card"
            data-v-49729759
            style="height: 35vh;">
            <div slot="header" class="clearfix">
              <span style="font-size: medium">运算符</span>
            </div>
            <div class="text item">
            <div class="formula-editor-total">
              <div class="formula-editor">
                <div class="one">
                  <button
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '7' })"
                  >
                    7
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '8' })"
                  >
                    8
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '9' })"
                  >
                    9
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '/' })"
                  >
                    /</button
                  ><br />
                    /</el-button>
                  <br />
                </div>
                <div class="one">
                  <button
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '4' })"
                  >
                    4
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '5' })"
                  >
                    5
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '6' })"
                  >
                    6
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '*' })"
                  >
                    *</button
                  ><br />
                    *</el-button>
                  <br />
                </div>
                <div class="one">
                  <button
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '1' })"
                  >
                    1
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '2' })"
                  >
                    2
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '3' })"
                  >
                    3
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '>' })"
                  >
                    -</button
                  ><br />
                    -</el-button>
                  <br />
                </div>
                <div class="one">
                  <button
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '0' })"
                  >
                    0
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '00' })"
                  >
                    00
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '.' })"
                  >
                    .
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '+' })"
                  >
                    +</button
                  ><br />
                    +</el-button>
                  <br/>
                </div>
                <div class="one">
                  <button
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '->' })"
                  >
                    ->
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '==' })"
                  >
                    ==
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '(' })"
                  >
                    (
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: ')' })"
                  >
                    )</button
                  ><br />
                    )</el-button>
                  <br />
                </div>
                <div class="one">
                  <button
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '<' })"
                  >
                    &lt;
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '>' })"
                  >
                    &gt;
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '<=' })"
                  >
                    &lt;=
                  </button>
                  <button
                  </el-button>
                  <el-button type="primary"
                    class="formula-editor-btn-sm"
                    @click="dbClickAddContent({ formula: '>=' })"
                  >
                    &gt;=
                  </button>
                  </el-button>
                </div>
              </div>
            </div>
@@ -311,9 +312,9 @@
                    :show-header="false"
                    style="width: 100%"
                  >
                    <el-table-column prop="formula" width="40">
                    <el-table-column prop="formula" width="120">
                    </el-table-column>
                    <el-table-column prop="desc" width="100"> </el-table-column>
                    <el-table-column prop="desc" width="200"> </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="系统变量" name="second">
@@ -323,9 +324,9 @@
                    :show-header="false"
                    style="width: 100%"
                  >
                    <el-table-column prop="formula" width="150">
                    <el-table-column prop="formula" width="200">
                    </el-table-column>
                    <el-table-column prop="desc" width="150"> </el-table-column>
                    <el-table-column prop="desc" width="200"> </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
@@ -337,11 +338,20 @@

  </el-dialog>
</template>
  

  <script>
export default {
  name: "formulaEditor",
  props: {
    // 对话框显示隐藏控制
    visible: {
        type: "Boolean",
        default: false,
    },
    componentRuleText:{
      type:String,
      default: ""
    },
    //本场景变量
    thisSceneTableData: {
      type: Array,
@@ -353,7 +363,7 @@
  },
  data() {
    return {
      isShowformulaEdit: false, //公式编辑框对话框显示控制
      isShowformulaEdit: this.visible, //公式编辑框对话框显示控制
      formulaContent: '', //公式编辑框内容,方便值的回传
      activeName: 'first', //当前活动的tab
      activeNameAttr: 'first', //变量中的当前活动tab
@@ -638,6 +648,15 @@
      ],
    };
  },
  watch: {
      // 监听父组件传的窗口显示隐藏的值
      visible (){
          this.isShowformulaEdit = this.visible;
      }
  },
  mounted() {
    this.formulaContent=this.componentRuleText
  },
  methods: {

    //双击添加公式内容
@@ -652,6 +671,7 @@
    //关闭时清空上次公式内容
    closeFormulaEdit(){
      this.resetFormulaContent();
      this.$emit('update:visible',false);
    },
    //编辑完成公式内容回显并关闭对话框
    saveFormulaContent(){
@@ -661,24 +681,36 @@
          return;
      }
      //公式内容回显
      this.$emit('updateFormulaContent', this.formulaContent) // 触发update:data将子组件值传递给父组件
      this.isShowformulaEdit = false;  
      // 触发update:data将子组件值传递给父组件
      this.$emit('updateFormulaContent', this.formulaContent)
      this.isShowformulaEdit = false;
    },

  },
};
</script>
  

<style scoped>

  .formula-box-card >>> .el-card__body {
    padding: 0px;
    height: 85%;
    width: 100%;
  }

  .formula-editor-total {
    /* margin-top: 3px; */
    height: 100%;
    width: 100%;
  }

  .formula-editor{
    margin-top: -15px;
    margin-left: 4vw;
    /*设置弹性盒子*/
    display: flex;
    /*子元素以竖列排列，一共有6列*/
    flex-direction:column;
    width: 310px;
    height: 185px;
    width: 100%;
    height: 100%;
    /*左右均匀排列*/
    justify-content: space-around;
    /*上下均匀排列*/
@@ -689,17 +721,21 @@
    display: flex;
    /*以行排列*/
    flex-direction: row;
    width: 223px;
    height: 80px;
    width: auto;
    height: auto;
    justify-content: space-between;
    align-items: center;
   }    
   }

  .formula-editor-btn-sm {
    width: 55px;
    height: 29px;
    background: rgb(153, 214, 240);
    border-radius: 10%;
    width: 4.5vw;
    height: 4vh;
    margin-left: 10px;
    text-align: center;
    line-height: 0;
    /* background: rgb(153, 214, 240); */
    background: #87c2fc;
    /* border-radius: 10%; */
  }

</style>