+1

src/views/mock/httprule.vue

@@ -2,53 +2,50 @@
   <div class="app-container">
     <el-header style="height:auto;!improtant">
       <div class="filter-container" style="padding-bottom: 20px;!improtant">
-        <el-input v-model="listQuery.ruleDesc" placeholder="规则描述" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.ruleDesc" placeholder="描述" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.execSort" placeholder="优先级" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-        <!-- <el-input-number v-model="listQuery.execSort" label="优先级" :min="1" :max="100" /> -->
         <el-select v-model="listQuery.status" class="filter-item" filterable clearable placeholder="状态">
           <el-option v-for="item in ruleStatus" :key="item.key" :label="item.display_name" :value="item.key" />
         </el-select>
         <!-- <el-input v-model="listQuery.interfaceName" placeholder="接口类" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
-        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
-          搜索
-        </el-button>
-        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
-          新增
-        </el-button>
-        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
-          显示返回值
-        </el-checkbox>
-        <el-button style="float: right;" type="primary" @click="prev">
-          返回
-        </el-button>
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索 </el-button>
+        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate"> 新增 </el-button>
+        <el-checkbox v-model="showRules" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1"> 显示条件 </el-checkbox>
+        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:1%;" @change="tableKey=tableKey+1"> 显示返回值 </el-checkbox>
+        <el-button style="float: right;" type="primary" @click="prev"> 返回 </el-button>
       </div>
     </el-header>
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      fit
-      highlight-current-row
-      style="width: 100%;"
-      :header-cell-style="styleObj"
-      @sort-change="sortChange"
-    >
-      <el-table-column label="规则ID" prop="id" sortable="custom" align="center" min-width="80px">
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" fit highlight-current-row style="width: 100%;">
+
+      <el-table-column label="结果ID" prop="id" sortable="custom" align="center" min-width="80px">
         <template slot-scope="scope">
-          <span>{{ scope.row.id }}</span>
+          <el-popover trigger="hover" placement="top">
+            <p>创建人: {{ scope.row.creator }}</p>
+            <p>更新人: {{ scope.row.updator }}</p>
+            <div slot="reference" class="name-wrapper">
+              {{ scope.row.id }}
+            </div>
+          </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="规则描述" prop="desc" sortable="custom" align="center" min-width="80px">
+
+      <el-table-column label="描述" prop="desc" sortable="custom" align="center" min-width="80px">
         <template slot-scope="scope">
-          <span v-show="desc">{{ scope.row.ruleDesc|lengthFilter }}</span>
+          <el-popover trigger="hover" placement="top">
+            <p>创建人: {{ scope.row.creator }}</p>
+            <p>更新人: {{ scope.row.updator }}</p>
+            <div slot="reference" class="name-wrapper">
+              <span v-show="desc">{{ scope.row.ruleDesc|lengthFilter }}</span>
+            </div>
+          </el-popover>
           <!--<span v-show="listQuery.ruleDescSeen" @mouseleave="descLeave">{{ scope.row.ruleDesc}}</span>-->
         </template>
       </el-table-column>
+
       <el-table-column label="接口ID" min-width="80px" align="center">
-        <!-- <template slot-scope="scope"> -->
-        <span>{{ this.$route.path.split('/')[3] }}</span>
-        <!-- </template> -->
+        {{ this.$route.path.split('/')[3] }}
       </el-table-column>
+
       <!--<el-table-column label="方法协议" min-width="150px" align="center">-->
       <!--&lt;!&ndash; <template slot-scope="scope"> &ndash;&gt;-->
       <!--<span>{{ this.$route.query.methodProtocol }}</span>-->
@@ -60,106 +57,113 @@
       <!--&lt;!&ndash; <el-tag>{{ row.type | typeFilter }}</el-tag> &ndash;&gt;-->
       <!--</template>-->
       <!--</el-table-column>-->
+
       <el-table-column label="优先级" min-width="110px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.execSort }}</span>
-        </template>
+        <template slot-scope="scope">{{ scope.row.execSort }}</template>
       </el-table-column>
+
       <el-table-column label="http请求URL" min-width="110px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.httpUrl }}</span>
-        </template>
+        <template slot-scope="scope">{{ scope.row.httpUrl }}</template>
       </el-table-column>
-      <!-- <el-table-column label="创建人" min-width="110px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.creator }}</span>
-        </template>
-      </el-table-column> -->
+
       <el-table-column label="状态" class-name="status-col" min-width="100">
         <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ statusMappings.get(row.status) }}
-          </el-tag>
-        </template>
+          <el-tag :type="row.status | statusFilter">{{ statusMappings.get(row.status) }}</el-tag></template>
       </el-table-column>
+
+      <el-table-column label="创建人" min-width="110px" align="center">
+        <template slot-scope="scope">{{ scope.row.creator }}</template>
+      </el-table-column>
+
+      <el-table-column label="更新人" min-width="110px" align="center">
+        <template slot-scope="scope">{{ scope.row.updator }}</template>
+      </el-table-column>
+
+      <el-table-column v-if="showRules" label="条件" min-width="110px" align="center">
+        <template slot-scope="scope"><span style="color:red;">{{ scope.row.metaRuleList }}</span></template>
+      </el-table-column>
+
       <el-table-column v-if="showReviewer" label="返回值" min-width="110px" align="center">
-        <template slot-scope="scope">
-          <span style="color:red;">{{ scope.row.returnMessage }}</span>
-        </template>
+        <template slot-scope="scope"><span style="color:red;">{{ scope.row.returnMessage }}</span></template>
       </el-table-column>
+
       <el-table-column label="操作" align="center" min-width="370" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleCheck(row)">
-            查看
-          </el-button>
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">
-            编辑
-          </el-button>
-          <el-button type="primary" size="mini" @click="handleCopy(row)">
-            复制
-          </el-button>
-          <el-button type="primary" size="mini">
-            测试
-          </el-button>
-          <el-button v-if="row.status!=1" size="mini" type="success" @click="handleModifyStatus(row, 1)">
-            开启
-          </el-button>
-          <el-button v-if="row.status!=0" size="mini" type="danger" @click="handleModifyStatus(row, 0)">
-            关闭
-          </el-button>
+          <el-button type="primary" size="mini" @click="handleCheck(row)"> 查看 </el-button>
+          <el-button type="primary" size="mini" @click="handleUpdate(row)"> 编辑 </el-button>
+          <el-button type="primary" size="mini" @click="handleCopy(row)"> 复制 </el-button>
+          <el-button type="primary" size="mini"> 测试 </el-button>
+          <el-button v-if="row.status!=1" size="mini" type="success" @click="handleModifyStatus(row, 1)"> 开启 </el-button>
+          <el-button v-if="row.status!=0" size="mini" type="danger" @click="handleModifyStatus(row, 0)"> 关闭 </el-button>
         </template>
       </el-table-column>
     </el-table>
+
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.curIndex" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%" @open="returnMessageData">
-      <el-form ref="ruleDataForm" :rules="roleDataRules" :model="ruleData" label-position="left" label-width="120px" style="width: 500px; margin-left:80px;">
-        <el-form-item label="规则" prop="whenScript">
-          <el-input v-model="ruleData.whenScript" placeholder="any" disabled />
+
+      <el-form ref="ruleForm" :rules="rulesCheck" :model="ruleForm" label-width="150px" style="width: 83%;">
+        <el-row v-if="isNotAnyRequest" class="set-Width">
+          <el-col :span="4">
+            <el-form-item label="条件" prop="expression1">
+              <el-select v-model="ruleForm.expression1" clearable placeholder="请选择表达式" style="width: 8vw;" fiterable size="medium" @change="chooseTest1">
+                <el-option v-for="item in expressOptions" :key="item.desc" :label="item.descChn" :value="item.desc" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="" prop="expression2">
+              <el-input v-model="ruleForm.expression2" clearable placeholder="请输入参数" style="width: 8vw;" filterable size="medium" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="" prop="judgeType">
+              <el-select v-model="ruleForm.judgeType" clearable placeholder="请选择运算方式" style="width: 8vw;" filterable size="medium">
+                <el-option v-for="item1 in operatorOptions" :key="item1.character" :label="item1.desc" :value="item1.character" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="" prop="judgeValue">
+              <el-input v-model="ruleForm.judgeValue" clearable placeholder="请输入值" style="width: 8vw;" filterable size="medium" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item v-if="showguiz" label="条件" prop="whenScript">
+          <el-select v-model="ruleForm.whenScript" clearable placeholder="请选择表达式" fiterable @change="chooseTest1">
+            <el-option v-for="item1 in expressOptions" :key="item1.d6sc" :label="item1.descChn" :value="item1.desc" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="规则描述" prop="ruleDesc">
-          <el-input v-model="ruleData.ruleDesc" placeholder="请输入规则描述" />
+        <el-form-item label="描述" prop="ruleDesc" style="width:52vw; white-space:nowrap;">
+          <el-input v-model="ruleForm.ruleDesc" placeholder="请输入描述" />
         </el-form-item>
         <el-form-item label="优先级" prop="execSort">
-          <el-input-number v-model="ruleData.execSort" label="优先级" :min="1" :max="100" title="值越大，优先级越高" />
+          <el-tooltip class="item" effect="light" content="值越大，优先级越高" placement="right">
+            <el-input-number v-model="ruleForm.execSort" label="优先级" :min="1" :max="100" />
+          </el-tooltip>
         </el-form-item>
-        <el-form-item label="返回值" prop="returnMessage">
-          <el-input v-model="ruleData.returnMessage" :autosize="{ minRows: 3, maxRows: 10}" type="textarea" :placeholder="jsonTit" />
+        <el-form-item label="返回值" prop="returnMessage" style="width:52vw;margin-top: 4%;">
+          <el-input v-model="ruleForm.returnMessage" :autosize="{ minRows: 3, maxRows: 10}" type="textarea" :placeholder="jsonTit" />
         </el-form-item>
       </el-form>
+
       <div slot="footer" class="dialog-footer">
-        <el-button @click="clear(), dialogFormVisible = false">
-          取消
-        </el-button>
-        <el-button v-if="showSubmit" type="primary" @click="dialogStatus==='create'?createData():updateData()">
-          确定
-        </el-button>
+        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
+        <el-button v-if="showSubmit" type="primary" @click=" dialogStatus === 'create'?createData(ruleForm):updateData(ruleForm)"> 确定 </el-button>
       </div>
     </el-dialog>
-    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
-      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
-        <el-table-column prop="key" label="Channel" />
-        <el-table-column prop="pv" label="Pv" />
-      </el-table>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule, changeStatus } from '@/api/httprule'
+import { fetchEnvInfo, fetchRuleById, fetchRuleList, createRule, updateRule, changeStatus, getHttpOp, getExpress } from '@/api/httprule'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 
-// var envSelections = []
-
-const ruleStatus = [
-  { key: 1, display_name: '已开启' },
-  { key: 0, display_name: '未开启' },
-  { key: '', display_name: '全部显示' }
-]
+const ruleStatus = [{ key: 1, display_name: '已开启' }, { key: 0, display_name: '未开启' }, { key: '', display_name: '全部显示' }]
 
 export default {
   name: 'Httprule',
@@ -167,11 +171,7 @@ export default {
   directives: { waves },
   filters: {
     statusFilter(status) {
-      const statusMap = {
-        1: 'success',
-        draft: 'info',
-        0: 'danger'
-      }
+      const statusMap = { 1: 'success', draft: 'info', 0: 'danger' }
       return statusMap[status]
     },
     lengthFilter(value) {
@@ -180,7 +180,6 @@ export default {
       }
       return value
     }
-
   },
   data() {
     return {
@@ -215,6 +214,7 @@ export default {
       list: null,
       total: 0,
       listLoading: true,
+      showRule: false,
       statusMappings: new Map([[1, '已开启'], [0, '未开启']]),
       ruleStatus,
       listQuery: {
@@ -227,55 +227,95 @@ export default {
         methodName: '',
         methodProtocol: 'http',
         ruleDesc: '',
-        ruleDescSeen: false
+        ruleDescSeen: false,
+        formLabelWidths: '7px',
+        paramtions: {}
       },
       showSubmit: true,
       jsonTit: `{ 'code': 200, 'data': { 'crowdComposition': 'U_866', 'campaignId': 789, 'id': 4606, 'class': 'com.didi.prado.config.api.dto.CampaignCrowdDTO'}}`,
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
-      statusOptions: ['published', 'draft', 'deleted'],
+      // sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
+      operatorOptions: [],
+      expressOptions: [],
+      expressOptionWithutAny: [],
+      // statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
-      ruleData: {
-        methodId: 0,
-        updator: '',
-        methodName: '',
-        execSort: 1,
-        whenScript: '',
-        ruleDesc: '',
-        returnMessage: '',
-        curIndex: 1,
-        pageSize: 20,
-        methodProtocol: 'http'
-      },
+      metaRule: [],
+      showRules: false,
       dialogFormVisible: false,
+      showguiz: true,
       dialogStatus: '',
       textMap: {
         update: '编辑',
         create: '新增规则'
       },
-      dialogPvVisible: false,
-      pvData: [],
-      roleDataRules: {
-        whenScript: [{ required: true, message: '规则不能为空', trigger: 'change' }],
-        execSort: [{ required: true, message: '优先级1-100', trigger: 'change' }],
-        returnMessage: [{ required: true, message: '不能为空', trigger: 'change' }],
-        ruleDesc: [{ required: true, message: '规则描述不能为空', trigger: 'change' }]
-        // interfaceName: [{ required: true, message: '接口名称不能为空', trigger: 'change' }],
-        // serviceVersion: [{ required: true, message: '服务版本不能为空', trigger: 'change' }],
-        // protocol: [{ required: true, message: '请选择协议类型', trigger: 'change' }],
-        // consumerIds: [{ required: false, message: '请选择消费者', trigger: 'change' }],
-        // methodName: [{ required: true, message: '方法名称不能为空', trigger: 'change' }],
-        // methodParamsTypes: [{ required: true, message: '入参类型不能为空', trigger: 'change' }],
-        // returnDataStructure: [{ required: true, message: '返回值类型不能为空', trigger: 'change' }]
-      },
-      downloadLoading: false,
-      desc: true
+      desc: true,
+      dataFrom: {}
     }
   },
   created() {
     this.getList()
     this.getFormatJsonStrFromStringRule(this.jsonTit)
+    this.getHttpOp()
+    this.getExpress()
   },
   methods: {
+    // getExpressOpt(index) {
+    //   if (index === 0) {
+    //     return this.expressOptions
+    //   } else {
+    //     return this.expressOptionWithutAny
+    //   }
+    // },
+    chooseTest1(val) {
+      if (val === 'any') {
+        this.$set(this.ruleForm, 'whenScript', val)
+        this.isNotAnyRequest = false
+        this.showguiz = true
+        this.isAnyshow = true
+      } else {
+        this.$set(this.ruleForm, 'expression1', val)
+        this.exression2
+        this.isNotAnyRequest = true
+        this.showguiz = false
+      }
+      // if (this.ruleForm.metaRuleList[0].expression1 === 'any request') {
+      //   this.isNotAnyRequest = false
+      //   this.isAnyshow = true
+      // } else {
+      //   this.isNotAnyRequest = true
+
+      // this.paramOptions.push(0,0,{ name: 'any', value: 0 })
+      // }
+    },
+
+    // chooseTest2(val) {
+    //   this.expression2 = val
+    // },
+    // chooseTest3(val) {
+    //   this.ruleForm.metaRuleList.judgeType = val
+    // },
+    // chooseTest4(val) {
+    //   this.ruleForm.metaRuleList.judgeValue = val
+    // },
+
+    // 获取运算符
+    getHttpOp() {
+      getHttpOp().then(response => {
+        this.operatorOptions = response.data
+      })
+    },
+    // 获取规则表达式
+    getExpress() {
+      getExpress().then(response => {
+        this.expressOptions = response.data
+        // this.expressOptions.forEach((opt, index) => {
+        //   if (opt.desc === 'any request') {
+        //     return true
+        //   }
+        //   this.expressOptionWithutAny.push(opt)
+        // })
+      })
+    },
     prev() {
       this.$router.go(-1)
     },
@@ -290,7 +330,7 @@ export default {
       })
     },
     returnMessageData() {
-      this.getFormatJsonStrFromStringRule1(this.ruleData.returnMessage)
+      this.getFormatJsonStrFromStringRule1(this.ruleForm.returnMessage)
     },
     getFormatJsonStrFromStringRule: function(jsonStr) {
       var res = ''
@@ -332,10 +372,10 @@ export default {
         res += ele
       }
       // eslint-disable-next-line no-return-assign
-      return this.ruleData.returnMessage = res
+      return this.ruleForm.returnMessage = res
     },
     updateEnvChannel(v) {
-      this.ruleData.envChannel = v
+      this.ruleForm.envChannel = v
       this.envSelections = []
       fetchEnvInfo(v).then(response => {
         for (var sel of response.data) {
@@ -347,50 +387,41 @@ export default {
       })
     },
     handleFilter() {
-      // this.listQuery.page = 1
       this.listQuery.methodStatus = this.listQuery.value
       this.getList()
     },
-    sortChange(data) {
-      const { prop, order } = data
-      if (prop === 'id') {
-        this.sortByID(order)
-      }
-    },
-    sortByID(order) {
-      if (order === 'ascending') {
-        this.listQuery.sort = '+id'
-      } else {
-        this.listQuery.sort = '-id'
-      }
-      this.handleFilter()
-    },
-    resetServiceData() {
-      this.ruleData = {
-        methodId: 0,
-        updator: '',
-        execSort: 1,
-        whenScript: '',
-        returnMessage: '',
-        curIndex: 1,
-        pageSize: 20
-      }
-    },
+    // sortChange(data) {
+    //   const { prop, order } = data
+    //   if (prop === 'id') {
+    //     this.sortByID(order)
+    //   }
+    // },
+    // sortByID(order) {
+    //   if (order === 'ascending') {
+    //     this.listQuery.sort = '+id'
+    //   } else {
+    //     this.listQuery.sort = '-id'
+    //   }
+    //   this.handleFilter()
+    // },
     handleCreate() {
-      this.resetServiceData()
       this.dialogStatus = 'create'
       this.dialogFormVisible = true
       this.showSubmit = true
+      this.ruleForm = {}
+      this.$set(this.ruleForm, 'whenScript', 'any')
+      this.$set(this.ruleForm, 'execSort', '1')
+      this.$set(this.ruleForm, 'returnMessage', '')
+
       this.$nextTick(() => {
-        this.$refs['ruleDataForm'].clearValidate()
+        this.$refs['ruleForm'].clearValidate()
       })
     },
-    createData() {
-      const shouldJson = this.ruleData.returnMessage
-      console.log('dasdsadsad' + typeof (shouldJson))
-      if (this.ruleData.whenScript === '') { this.ruleData.whenScript = 'any' }
-      if (typeof shouldJson === 'string') {
-        this.$refs['ruleDataForm'].validate((valid) => {
+
+    // 新增Data
+    createData(vel) {
+      if (typeof vel.returnMessage === 'string') {
+        this.$refs['ruleForm'].validate((valid) => {
           if (valid) {
             this.dataFrom = vel
             this.dataFrom.creator = this.userNames
@@ -398,8 +429,6 @@ export default {
             this.dataFrom.updator = ''
             this.dataFrom.methodId = parseInt(this.$route.path.split('/')[3])
             this.dataFrom.methodProtocol = 'http'
-            this.dataFrom = vel
-            this.dataFrom = vel
 
             this.showguiz === false ? this.dataFrom.whenScript = '' : ''
             this.isNotAnyRequest === false ? this.dataFrom.metaRuleList = [] : this.dataFrom.metaRuleList = [{ 'operator': '', 'expression': vel.expression1 + '.' + vel.expression2, 'judgeType': vel.judgeType, 'judgeValue': vel.judgeValue }]
@@ -413,35 +442,40 @@ export default {
               if (response.code === 200) {
                 this.dialogFormVisible = false
                 this.getList()
-                this.$notify({
-                  title: 'Success',
-                  message: 'Created Successfully',
-                  type: 'success',
-                  duration: 2000
-                })
+                this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 2000 })
               } else {
-                this.$notify({
-                  title: 'Failed',
-                  message: 'Created Failed',
-                  type: 'error',
-                  duration: 2000
-                })
+                this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 2000 })
               }
             })
           }
         })
       }
     },
+
+    // 编辑Data
     handleUpdate(row) {
       var queryData = { id: row.id }
       fetchRuleById(queryData).then(response => {
-        var row_data = response.data.mockRuleList
-        this.ruleData = Object.assign({}, row_data[0])
+        this.ruleForm = response.data.mockRuleList[0]
+        if (this.ruleForm.whenScript !== '') {
+          this.isNotAnyRequest = false
+          this.showguiz = true
+        }
+        if (this.ruleForm.metaRuleList.length !== 0) {
+          this.isNotAnyRequest = true
+          this.showguiz = false
+          for (var a of this.ruleForm.metaRuleList) {
+            this.ruleForm.expression1 = a.expression.split('.')[0]
+            this.ruleForm.expression2 = a.expression.split('.')[1]
+            this.ruleForm.judgeType = a.judgeType
+            this.ruleForm.judgeValue = a.judgeValue
+          }
+        }
         this.dialogStatus = 'update'
         this.dialogFormVisible = true
         this.showSubmit = true
         this.$nextTick(() => {
-          this.$refs['ruleDataForm'].clearValidate()
+          this.$refs['ruleForm'].clearValidate()
         })
       })
     },
@@ -453,66 +487,84 @@ export default {
       changeStatus(statusData).then(response => {
         if (response.code === 200) {
           row.status = status
-          this.$message({
-            message: '规则ID:' + row.id.toString() + ' 操作成功！',
-            type: 'success'
-          })
+          this.$message({ message: row.id.toString() + ' 操作成功！', type: 'success' })
         } else {
-          this.$message({
-            message: '规则ID:' + row.id.toString() + ' 操作失败！',
-            type: 'danger'
-          })
+          this.$message({ message: row.id.toString() + ' 操作失败！', type: 'danger' })
         }
       })
     },
+
+    // 复制Data
     handleCopy(row) {
-      // this.ruleData = {
-      //   // id: row.id,
-      //   customName: row.customName,
-      //   httpUrl: row.httpUrl,
-      //   execSort: row.execSort,
-      //   whenScript: row.whenScript,
-      //   methodProtocol: row.methodProtocol,
-      //   status: row.status,
-      //   returnMessage: row.returnMessage
-      // }
-      this.ruleData = Object.assign({}, row) // copy obj
-      this.ruleData.timestamp = new Date(this.ruleData.timestamp)
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
-      this.showSubmit = true
-      this.$nextTick(() => {
-        this.$refs['ruleDataForm'].clearValidate()
-      })
-    },
-    updateData() {
-      this.$refs['ruleDataForm'].validate((valid) => {
-        if (valid) {
-          //   const tempData = Object.assign({}, this.ruleData)
-          const tempData = {
-            id: this.ruleData.id,
-            methodId: parseInt(this.$route.path.split('/')[3]),
-            updator: '',
-            execSort: this.ruleData.execSort,
-            whenScript: this.ruleData.whenScript,
-            returnMessage: this.ruleData.returnMessage,
-            mehtodName: this.$route.query.methodName,
-            methodProtocol: this.$route.query.methodProtocol,
-            ruleDesc: this.ruleData.ruleDesc
+      var queryData = { id: row.id }
+      fetchRuleById(queryData).then(response => {
+        this.ruleForm = response.data.mockRuleList[0]
+        if (this.ruleForm.whenScript !== '') {
+          this.isNotAnyRequest = false
+          this.showguiz = true
+        }
+        if (this.ruleForm.metaRuleList.length !== 0) {
+          this.isNotAnyRequest = true
+          this.showguiz = false
+          for (var a of this.ruleForm.metaRuleList) {
+            this.ruleForm.expression1 = a.expression.split('.')[0]
+            this.ruleForm.expression2 = a.expression.split('.')[1]
+            this.ruleForm.judgeType = a.judgeType
+            this.ruleForm.judgeValue = a.judgeValue
           }
-          updateRule(tempData).then(() => {
-            this.getList()
-            this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Update Successfully',
-              type: 'success',
-              duration: 2000
-            })
-          })
         }
+        this.dialogStatus = 'create'
+        this.dialogFormVisible = true
+        this.showSubmit = true
+        this.$nextTick(() => {
+          this.$refs['ruleForm'].clearValidate()
+        })
       })
     },
+
+    // 编辑提交
+    updateData(vel) {
+      if (typeof vel.returnMessage === 'string') {
+        this.$refs['ruleForm'].validate((valid) => {
+          if (valid) {
+            this.dataFrom = vel
+            // this.dataFrom.creator = this.userNames
+            this.dataFrom.updator = this.userNames
+            this.dataFrom.methodId = parseInt(this.$route.path.split('/')[3])
+            this.dataFrom.methodProtocol = 'http'
+            this.dataFrom = vel
+            this.dataFrom = vel
+            if (this.showguiz === false) {
+              delete this.dataFrom.whenScript
+            }
+            // this.showguiz === false ? this.dataFrom.whenScript = '' : ''
+            this.isNotAnyRequest === false ? this.dataFrom.metaRuleList = [] : this.dataFrom.metaRuleList = [{ 'operator': '', 'expression': vel.expression1 + '.' + vel.expression2, 'judgeType': vel.judgeType, 'judgeValue': vel.judgeValue }]
+            delete this.dataFrom.expression1
+            delete this.dataFrom.expression2
+            delete this.dataFrom.judgeType
+            delete this.dataFrom.judgeValue
+            //   const tempData = Object.assign({}, this.ruleData)
+            // const tempData = {
+            //   id: this.ruleForm.id,
+            //   methodId: parseInt(this.$route.path.split('/')[3]),
+            //   updator: '',
+            //   execSort: this.ruleForm.execSort,
+            //   whenScript: this.ruleForm.whenScript,
+            //   returnMessage: this.ruleForm.returnMessage,
+            //   mehtodName: this.$route.query.methodName,
+            //   methodProtocol: this.$route.query.methodProtocol,
+            //   metaRuleList: [],
+            //   ruleDesc: this.ruleForm.ruleDesc
+            // }
+            updateRule(this.dataFrom).then(() => {
+              this.getList()
+              this.dialogFormVisible = false
+              this.$notify({ title: 'Success', message: 'Update Successfully', type: 'success', duration: 2000 })
+            })
+          }
+        })
+      }
+    },
     formatJson(filterVal, jsonData) {
       return jsonData.map(v => filterVal.map(j => {
         if (j === 'timestamp') {
@@ -522,29 +574,43 @@ export default {
         }
       }))
     },
+
+    // 查看
     handleCheck(row) {
       var queryData = { id: row.id }
       fetchRuleById(queryData).then(response => {
-        console.log('aaaaaaaaa' + response)
         var row_data = response.data.mockRuleList
-        this.ruleData = Object.assign({}, row_data[0])
+        this.ruleForm = Object.assign({}, row_data[0])
+        if (this.ruleForm.whenScript !== '') {
+          this.isNotAnyRequest = false
+          this.showguiz = true
+        }
+        if (this.ruleForm.metaRuleList.length !== 0) {
+          this.isNotAnyRequest = true
+          this.showguiz = false
+          for (var a of this.ruleForm.metaRuleList) {
+            this.ruleForm.expression1 = a.expression.split('.')[0]
+            this.ruleForm.expression2 = a.expression.split('.')[1]
+            this.ruleForm.judgeType = a.judgeType
+            this.ruleForm.judgeValue = a.judgeValue
+          }
+        }
         this.dialogStatus = 'update'
         this.dialogFormVisible = true
         this.showSubmit = false
         this.$nextTick(() => {
-          this.$refs['ruleDataForm'].clearValidate()
+          this.$refs['ruleForm'].clearValidate()
         })
       })
-    },
-    descEnter(index, row) {
-      console.log(index, row + 'sss')
-      this.listQuery.ruleDescSeen = true
-      this.desc = false
-    },
-    descLeave(row) {
-      this.listQuery.ruleDescSeen = false
-      this.desc = true
     }
+    // descEnter(index, row) {
+    //   this.listQuery.ruleDescSeen = true
+    //   this.desc = false
+    // },
+    // descLeave(row) {
+    //   this.listQuery.ruleDescSeen = false
+    //   this.desc = true
+    // }
   }
 }
 </script>
@@ -552,6 +618,8 @@ export default {
 <style>
 .el-notification.right{
   position: fixed;
-  right: 38.5%;
-}
+  right: 38.5%;}
+  .set-Width .el-form-item__error {
+    width: 90px;
+  }
 </style>