NEZ-343 feat: expr（部分）

nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

@@ -28,10 +28,19 @@
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
           </el-form-item>
           <!--expr-->
-          <el-form-item :label="$t('alert.config.expr')" prop="expr">
+          <!--<el-form-item :label="$t('alert.config.expr')" prop="expr">
             <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.expr" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
-          </el-form-item>
+          </el-form-item>-->
+          <promql-input
+            ref="promql"
+            :expression-list.sync="expressions"
+            :index="0"
+            :styleType="2"
+            :plugins="['metric']"
+            @change="expressionChange"
+            @removeExpression="removeExpression"
+          ></promql-input>
           <!--operator-->
           <el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
             <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.operator" placeholder=""  size="small">
@@ -122,14 +131,18 @@
 
 <script>
   import chartDataFormat from "../../charts/chartDataFormat";
-
+  import promqlInput from "../../page/dashboard/explore/promqlInput";
   export default {
     name: "alertConfigBox",
     props: {
       parentAlertRule: Object
     },
+    components: {
+      'promql-input': promqlInput,
+    },
     data() {
       return {
+        expressions: [],
         alertRule: {id: '', receiverShow: [], receiver: ''},
         rightBox: {show: false, isEdit: false, title: ''},
         rules:{