Newer
Older
operation_web / src / components / model / sqlSource.vue
@yuwj yuwj on 27 Jan 2021 9 KB 集成数据滤网模块
<!-- 连接管理 -  符合数据库列表进行定制的内容 -->
<template>
  <div id="sqlSource text-center">

    <p class="sqlType">数据库类型:{{ruleForm.dbType}}</p>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="randerWidth" class="demo-ruleForm">

      <el-col :span='12'>
        <el-form-item label="连接名称:" prop="dataSourceName">
          <el-input v-model="ruleForm.dataSourceName" :disabled="dataSourceDis" placeholder="请输入连接名称"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span='12' style='height:62px;'>
        <el-form-item label="连接url:" prop="url">
          <el-col :span='22'>
            <el-input v-model="ruleForm.url" placeholder="请输入连接url"></el-input>

          </el-col>
          <el-col :span='2' class="text-right">
            <div class="aboutType">
              <el-tooltip class="item" effect="dark" :content="'点击图标复制示例:'+examples" placement="top-start">
                <span><i class="iconfont icon-49" v-clipboard:success="onCopy" v-clipboard:error="onError"
                    v-clipboard:copy="examples"></i>
                </span>
              </el-tooltip>
            </div>
          </el-col>
        </el-form-item>
      </el-col>

      <el-col :span='12'>
        <el-form-item label="用户名:" prop="userName">
          <el-input v-model="ruleForm.userName" @keyup.native="notEmpty(ruleForm.userName,'userName')"
            placeholder="请输入用户名"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span='12'>
        <el-form-item label="用户密码:" prop="userPassword">
          <el-input type='password' v-model="ruleForm.userPassword"
            @keyup.native="notEmpty(ruleForm.userPassword,'userPassword')" placeholder="请输入用户密码">
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span='12'>
        <el-form-item label="备注:">
          <el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span='12'>
        <el-form-item v-show='!messageQueue' label="数据库属性串:">
          <el-input v-model="ruleForm.properties" placeholder="请输入数据库属性串"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span='24'>
        <el-form-item v-show='!messageQueue' label="额外数量连接属性:" prop="extendProperties">
          <el-input type="textarea" v-model="ruleForm.extendProperties" placeholder="请输入额外数量连接属性"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span='24'>
        <el-form-item label="交换机名称:" v-show='messageQueue'>
          <el-input v-model="exchange" placeholder="请输入交换机名称"></el-input>
        </el-form-item>
      </el-col>

    </el-form>

    <span slot="footer" class="dialog-footer" :style='modelFloor'>
      <el-button @click.native='connectionTesting' size='mini' class="f_left connection">连 接 测 试</el-button>
      <p class="f_left" :style='errorText' v-show='errorConnect'>{{errorHtml}}</p>
      <el-button type="primary" v-show='editAdd' @click="submitForm(1)">添 加</el-button>
      <el-button type="primary" v-show='!editAdd' @click="submitForm(2)">修 改</el-button>
      <el-button @click.native="dataEdits">取 消</el-button>
    </span>
  </div>
</template>

<script>
  import {
    isJSON,
    notify
  } from '../util/item'
  import project from '../mixins/project'

  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else if (!isJSON(value)) {
          callback(new Error('额外数量连接属性,为JSON格式'))
        } else {
          callback();
        }
      };

      return {
        errorText: {
          color: '#F56C6C',
          lineHeight: '45px',
          marginLeft: '10px'
        },
        randerWidth: '',
        errorHtml: "",
        editAdd: true,
        examples: '',
        messageQueue: false,
        dataSourceDis: false,
        errorConnect: false,
        exchange: '',
        editId: '',
        testPass: 0,
        ruleForm: {
          dataSourceName: '',
          dbType: '',
          userName: '',
          extendProperties: '',
          userPassword: '',
          properties: '',
          url: '',
          mark: '',
        },
        modelFloor: {
          display: 'block',
          textAlign: 'right',
          padding: '0 0 22px 0'
        },
        rules: {
          dataSourceName: [{
            required: true,
            message: '请输入连接名称',
            trigger: 'blur'
          }],
          extendProperties: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          url: [{
            required: true,
            message: '请输入连接url',
            trigger: 'blur'
          }],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          userPassword: [{
            required: true,
            message: '请输入用户密码',
            trigger: 'blur'
          }]
        }
      };
    },
    mixins: [project],
    components: {},
    computed: {},
    mounted() {},
    methods: {
      mysqlVal(val, row = '') {
        /**
         * 数据库类型的判断
         * @param {String} val 数据库类型
         * @param {Object} row 表格参数
         */
        this.dataSourceDis = false;

        this.resetForm('ruleForm')
        this.editAdd = true;

        // 连接名为小写
        this.ruleForm.dbType = val;
        let low = val.toLocaleLowerCase();

        // 数据库类型示例
        if (val === 'MongoDB') {
          this.examples = '127.0.0.1:27010/monitoring';
        } else {
          this.examples = `jdbc:${low}://server:1433;databasename=test`
        }
        this.randerWidth = '170px';

        if (val === 'RabbitMQ') {
          this.messageQueue = true;
          this.randerWidth = '120px';
          this.examples = '127.0.0.1:5672'

          // 新增窗口队列
          if (row === '') {
            this.exchange = ''
            // this.dataSourceFlage = false;
          } else {
            // 修改窗口队列
            let properties = JSON.parse(row['properties']);
            this.exchange = properties['exchange']
            // this.dataSourceFlage = true;
          }
          return
        }
        this.messageQueue = false;

      },
      editVal(row) {
        /**
         * 修改窗口
         * @param {Object} row 表格行点击参数
         */
        this.mysqlVal(row.dbType, row);
        this.editAdd = false;
        this.dataSourceDis = true;
        let {
          keys
        } = Object;
        this.editId = row.id;
        for (let item of keys(this.ruleForm)) {
          this.ruleForm[item] = row[item]
        }
      },
      connectionTesting() {
        /**
         * 连接测试,数据矫正
         */
        this.correct('ruleForm', () => {

          // 消息队列
          this.$http.post(this.nozzle.testSource, this.ruleForm).then(response => {
            if (response.data.code === 200) {
              this.testPass = 200;
              this.errorConnect = true;
              this.errorText.color = '#41ca4c'
              this.errorHtml = '测试连接成功';
            } else {
              this.testPass = 0;
              this.errorHtml = response.data.data
              this.errorConnect = true;
              this.errorText.color = '#F56C6C'
            }
          })
        })

      },
      dataEdits() {
        /**
         * 按钮取消事件
         */

        this.errorConnect = false;
        this.testPass = 0;
        this.$emit('dataEdits', false);
      },
      async addParameter(api, dif = 1) {
        // 新增数据传值
        let datas = this.ruleForm;

        // 消息队列
        if (this.ruleForm.dbType === "RabbitMQ") {
          datas['properties'] = JSON.stringify({
            exchange: this.exchange
          });
        }

        // 修改数据
        if (dif === 2) {
          datas['id'] = this.editId;
        }

        const response = await this.$http.post(api, datas);
        notify(response);
        if (response.data.code === 200) {
          this.updateData();
        }
      },
      resetForm(formName) {
        // 清空表格数据
        this.$refs[formName].resetFields();
      },
      correct(formName, cb, dif = 1) {
        // 数据矫正
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 连接测试
            // if (dif === 2) {
            //   if (this.testPass === 0) {
            //     this.$notify({
            //       type: 'warning',
            //       message: '请先完成连接测试'
            //     })
            //     return
            //   }
            // }
            cb()
            return true
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      updateData() {
        /**
         * 更新数据
         */
        this.$emit('updateData')
      },
      submitForm(dif) {
        // 添加数据,修改数据
        this.correct('ruleForm', () => {
          let api = '';
          if (dif === 1) {
            api = this.nozzle.addSource;
            this.addParameter(api)
          } else {
            api = this.nozzle.updateSource;
            this.addParameter(api, 2)
          }
          this.dataEdits();
        }, 2)

      }
    }
  }

</script>

<style>
  #sqlSource {
    width: 100%;
  }

  .sqlType {
    font-size: 16px;
    color: #001529;
    margin-bottom: 20px;
    padding-left: 11px;
  }

  .connection {
    margin-top: 5px;
  }

</style>