朔黄人员管理页面调试

hanbaoshan

2021-01-28 262119fd58357f1d930d65a6e3252176d29b2ce5

 src/pages/datapush/index/RightEvent.vue

@@ -184,11 +184,59 @@
        <b>规则</b>
        <div class="div-border" v-html="taskEditData.eventTxt"></div>
      </div>
      <div class="config-item">
        <b>推送字段</b>
        <el-button type="primary" size="mini" @click="pushFieldDialog=true">设置</el-button>
      </div>
      <div class="save-btn">
        <el-button type="info" size="small" @click="onCancle" style="color:#222">取消</el-button>
        <el-button type="primary" @click="eventPushsSave" size="small">保存</el-button>
      </div>
    </div>
    <el-dialog
      :visible="pushFieldDialog"
      :append-to-body="false"
      :close-on-click-modal="false"
      class="dialog-push-field"
      @close="pushFieldDialog=false"
    >
      <div slot="title" class="slot-title">
        <p>请选择想要推送的字段</p>
        <div class="right">
          <el-checkbox v-model="allFieldChecked"></el-checkbox>
        </div>
      </div>
      <div class="check-area" v-for="configObj in pushFields" :key="configObj.id">
        <div class="header">
          <div class="title">{{configObj.name}}</div>
          <div class="right">
            <el-checkbox v-model="configObj.checked" @change="toggleConfigCheck(configObj)">全选</el-checkbox>
          </div>
        </div>
        <div class="flex-box flex-wrap">
          <div class="param flex-box" v-for="param in configObj.children" :key="param.id">
            <el-checkbox v-model="param.checked"></el-checkbox>
            <span class="param-name">{{param.name}}</span>
            <el-input
              v-model="param.alias"
              size="mini"
              :ref="`input_${param.id}`"
              @input="varifyField(param)"
              :style="{color:param.error?'red':'',borderColor:param.error?'red':''}"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="text-center">
        <el-button size="small">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="disabledPushFieldSet"
          @click="submitPushFieldSet"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
@@ -236,6 +284,10 @@
        operatorTypeOpionts: {},
        ruleValueOptions: []
      },
      pushFieldDialog: false,
      pushFields: [],
      allFieldChecked: false,
      disabledPushFieldSet: true,
    };
  },
  watch: {
@@ -273,18 +325,94 @@
        }
      },
      deep: true
    },
    pushFields: {
      handler (n, o) {
        let _this = this;
        let flag = false;
        n.forEach(configObj => {
          let notChecked = configObj.children.find(param => !param.checked);
          if (!notChecked) {
            configObj.checked = true;
          } else {
            configObj.checked = false;
          }
          let someoneChecked = configObj.children.find(param => param.checked);
          if (someoneChecked) {
            flag = true
          }

        });
        if (flag) {
          this.disabledPushFieldSet = false;
        } else {
          this.disabledPushFieldSet = true;
        }
      },
      deep: true
    }
  },
  created() {
    this.reAdd();
  },
  mounted() {
    // 加载字典字典
    // 加载字典
    this.findByType();
    this.getCameras();
    this.getTasks();
    this.getPushFields();
  },
  methods: {
    varifyField (param) {
      var reg = /^[A-Za-z]+[0-9-_]?$/;
      if (!reg.test(param.alias)) {
        this.$message('请输入合法字段名');
        debugger
        param.error = true;
      } else {
        param.error = false;
      }
      // this.pushFields.forEach(configObj => {
      //   configObj.children.find(param => param.error)
      // })

    },
    submitPushFieldSet () {
      let flag = false;
      this.pushFields.forEach(configObj => {
        let errorOne = configObj.children.find(param => param.checked && param.error);
        if (errorOne) {
          this.$notify({
            type: 'error',
            message: '请将选中字段输入合法字段名'
          })
          flag = true
        }
      });
      if(flag){
        return
      }
      alert('submit')
    },
    toggleConfigCheck (configObj) {
      configObj.children.forEach(child => {
        child.checked = configObj.checked
      })
    },
    getPushFields () {
      this.pushFields = [
        {          id: 'sxjxx', name: '摄像机信息', checked: false, alias: '',
          children: [
            { name: '摄像机ID', checked: false, alias: 'cameraID', id: 'cameraID', children: null },
            { name: '摄像机名称', checked: false, alias: 'cameraName', id: 'cameraName', children: null },
            { name: '摄像机地址', checked: false, alias: 'cameraAddr', id: 'cameraAddr', children: null },
            { name: '摄像机址', checked: false, alias: 'cameraAdr', id: 'cameraAdr', children: null }
          ]        },
        {          id: 'cjxx', name: '场景信息', checked: false, alias: '',
          children: [{ name: '场景ID', checked: false, alias: 'taskId', id: 'tskId', children: null }]        },
      ];

    },
    addUrl() {
      this.taskEditData.urls.push({
        checked: true,
@@ -574,7 +702,12 @@
      margin-left: 895px;
    }
  }

  .config-item {
    margin: 20px 0;
    b {
      margin-right: 10px;
    }
  }
  .el-button--text {
    text-decoration: unset;
  }
@@ -604,5 +737,72 @@
    color: #3d68e1;
    line-height: 39px;
  }
  .dialog-push-field {
    .el-button--primary.is-disabled,
    .el-button--primary.is-disabled:hover {
      background-color: #9eb4f0 !important;
      border-color: #9eb4f0 !important;
    }
    .el-dialog {
      width: 910px;
      height: 700px;
      .el-dialog__body {
        padding-top: 14px;
        height: 540px;
        overflow-y: auto;
      }
    }
    .text-center {
      text-align: center;
    }
    .slot-title {
      position: relative;
      .right {
        position: absolute;
        top: 0;
        right: 30px;
      }
    }
    .check-area {
      padding-bottom: 10px;
      .header {
        position: relative;
        background: #efefef;
        line-height: 30px;
        margin-bottom: 14px;
        font-weight: bold;
        .title {
          border-left: 3px solid #2481fa;
          padding-left: 10px;
        }
        .right {
          position: absolute;
          top: 0;
          right: 30px;
        }
      }
      .flex-box.flex-wrap {
        flex-wrap: wrap;
      }
      .param.flex-box {
        word-break: keep-all;
        align-items: center;
        margin: 0 10px;
        min-width: 260px;
        margin-bottom: 10px;
        .param-name {
          margin: 0 5px;
        }
        .el-input {
          border-color: #dcdfe6;
          color: #606266;
          .el-input__inner {
            color: inherit;
            border-color: inherit;
          }
        }
      }
    }
  }
}
</style>