data_governance/src/views/homecomponents/DataManagement/QualityRules/RuleStepFour.vue

<template>
  <Row :gutter="16">
    <Col :span="12">
      <div class="modal-step2-title"><span class="modal-step2-star">* </span>基础信息&来源信息</div>
      <div class="modal-step2-body">
         <Form class="common-form common-form-modal" :model="ruleObj" :label-width="120">
          <FormItem label="规则名称："> 
            <div class="common-form-detail-text">{{ruleObj.ruleName}}</div> 
          </FormItem>
          <FormItem label="指标类型：">
            <div class="common-form-detail-text">{{ruleObj.targetName}}</div> 
          </FormItem>
          <FormItem label="规则描述：">
            <div class="common-form-detail-text">{{ruleObj.ruleDesc}}</div> 
          </FormItem>
          <FormItem label="来源应用：">
            <div class="common-form-detail-text">{{ruleObj.applicationName}}</div> 
          </FormItem>
          <FormItem label="字段：">
            <div class="common-form-detail-text">{{ruleObj.field}}</div> 
          </FormItem>
        </Form>
      </div>
    </Col>
    <Col :span="12">
    <div class="modal-step2-title modal-rule-detail"><span class="modal-step2-star">* </span>配置规则</div>
       <div class="modal-step2-body modal-step2-body-fixed common-scroll">
         <div v-show="ruleObj.targetName=='完整性'" class="common-form-detail-text">
          不能是字符串null、NULL、无、空格，不能是空
         </div>
         <div v-show="ruleObj.targetName=='一致性'" class="common-form-detail-text">
          <div class="common-form-detail-row">数据处理前字段值 = 数据处理后字段</div>
          <div class="common-form-detail-row">数据类型为 {{ruleObj.dataType == 'all' ? '任意': ruleObj.dataType}}</div>
         </div>
         <div v-show="ruleObj.targetName=='及时性（数据采集）' || ruleObj.targetName=='及时性（数据入库）'" class="common-form-detail-text">
           <Row class="common-form-detail-row">
            <Col span="3">{{ruleObj.targetName=='及时性（数据采集）' ? '数据采集' : '数据入库'}}</Col>
            <Col span="1" class="timeliness-form-col timeliness-form-col-select">
              <=
            </Col>
            <Col span="20" class="timeliness-form-col"> 
            {{ruleObj.dataValue}}ms
            </Col>
          </Row>
         </div>
         <div v-show="ruleObj.targetName=='准确性'" class="common-form-detail-text"> 
          <Row v-for="(item, index) in ruleObj.logicalValueDTOList" :key="index" class="common-form-detail-row">
            <Col span="3">条件{{index+1}}：</Col>
            <Col span="5">{{ruleObj.field}}</Col>
            <Col span="1" class="timeliness-form-col timeliness-form-col-select">{{item.logical}}</Col>
            <Col span="14" class="timeliness-form-col">
            {{item.value}}
            </Col>
          </Row>
          <Row v-if="ruleObj.logicalValueDTOList && ruleObj.logicalValueDTOList.length>1" class="common-form-detail-row">
            <Col span="7">各条件间关系表达式：</Col>
            <Col span="17">
              {{ruleObj.exprDesc}}
            </Col>
          </Row>
         </div>
       </div>
    </Col>
  </Row>
</template>
<script>
export default {
  name: "RuleStepFour",
  components:{
  },
  props: {
    currentObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      ruleObj: {},
    };
  },
  watch: {
    currentObj: {
    　handler(newValue) {
      this.ruleObj = newValue
      },
      // deep: true
    }
   },
  mounted() {
    this.ruleObj = this.currentObj
  },
  methods: {
   
  }
};
</script>
<style scoped lang="stylus">
.modal-step2-title {
  height: 42px;
  background: #0B2959;
  border: 1px solid #0D2853;
  line-height: 42px;  
  color: #fff; 
  font-size: 16px;
}
.modal-step2-star {
  color: #ed4014;
  padding-left: 6px;
}
.modal-step2-body {
 padding: 15px;
 border: 1px solid #204A8F;
 border-top: none;
 height: 388px;
}
.modal-step2-body-fixed {
  height: 387px;
  overflow: hidden;
  overflow-y: auto;
}
.common-form-detail-text {
  color: #fff;
  font-size: 14PX;
}
.common-form-detail-row {
  margin-bottom: 20px;
  line-height: 32px;
  height: 32px;
  padding: 0;
  padding-left: 20px;
}
</style>