ISMSAdminWeb-SLG-robot/src/views/dataQuery/query/config.vue

<template>
  <el-form ref="form" :model="form" label-width="100px" size="mini">
    <el-row>
      <el-col :span="12">
        <el-form-item label="数据库类型">
          <el-select v-model="form.dbType">
            <el-option label="MySql" value="MySql"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="页面标题">
          <el-input v-model="form.title"> </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="SQL">
      <el-input
        v-model="form.sqlString"
        type="textarea"
        :rows="5"
        v-on:change="sqlChange"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="18">
        <el-form-item label="排序">
          <el-tooltip
            class="item"
            effect="dark"
            content="直接写入sql的order by子句"
            placement="bottom-start"
          >
            <el-input v-model="form.orderBy"></el-input>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="限制条数">
          <el-input-number v-model="form.limit" :min="1" :max="1000"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3">
        <el-form-item label="分页显示">
          <el-tooltip
            class="item"
            effect="dark"
            content="开启分页后，限制条数设置无效"
            placement="bottom-start"
          >
            <el-checkbox v-model="form.pagination" size="mini"></el-checkbox>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="每页条数">
          <el-input-number v-model="form.pageSize" :min="1" :max="1000"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="条数选择">
          <el-input v-model="form.pageSizeList"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="自动刷新变量">
          <el-input v-model="form.refreshKey"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3">
        <el-form-item label="数据导出">
          <el-checkbox v-model="form.export" size="mini"></el-checkbox>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-tabs v-model="tabName" type="card">
          <el-tab-pane label="列设置" name="columns">
            <el-table border :data="form.columns" :cell-style="{ padding: '1px' }">
              <el-table-column label="显示" width="50" align="center">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.show" size="mini"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="固定" width="50" align="center">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.fixed" size="mini"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="导出" width="50" align="center">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.export" size="mini"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column
                prop="prop"
                :show-overflow-tooltip="true"
                label="字段名"
                width="130"
                align="center"
              >
              </el-table-column>
              <el-table-column label="标题" width="130" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.label" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="宽度" width="70" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.width" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="对齐" width="70" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.align" size="mini" placeholder="">
                    <el-option label="左" value="left"> </el-option>
                    <el-option label="中" value="center"> </el-option>
                    <el-option label="右" value="right"> </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="查询设置" name="filters">
            <el-table border :data="form.filters" :cell-style="{ padding: '1px' }">
              <el-table-column
                prop="Name"
                :show-overflow-tooltip="true"
                label="查询项"
                width="110"
                align="center"
              >
              </el-table-column>
              <el-table-column label="标签" width="110" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.displayName" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="类型" width="100" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.type" size="mini" placeholder="">
                    <el-option label="输入框" value="input"> </el-option>
                    <el-option label="下拉框(单)" value="select"> </el-option>
                    <el-option label="下拉框(多)" value="select-multi"> </el-option>
                    <el-option label="日期" value="date"> </el-option>
                    <el-option label="日期时间" value="datetime"> </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="默认值" width="100" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.defaultValue" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="数据源" width="80" align="center">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.dataSource"
                    size="mini"
                    placeholder=""
                    :disabled="!scope.row.type.startsWith('select')"
                  >
                    <el-option label="固定值" value="string"> </el-option>
                    <el-option label="字典" value="dict"> </el-option>
                    <el-option label="Sql" value="sql"> </el-option>
                    <el-option label="DP" value="dp"> </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="表达式" width="*" align="center">
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :disabled="scope.row.dataSource ? false : true"
                    :content="tooltip.datasource[scope.row.dataSource]"
                    placement="top"
                  >
                    <el-input
                      v-model="scope.row.dataSourceExpression"
                      size="mini"
                      :disabled="!scope.row.type.startsWith('select')"
                    ></el-input>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="联动依赖" width="200" align="center">
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="下拉框有效，多个以英文逗号分隔，仅能依赖其他下拉框"
                    placement="top"
                  >
                    <el-input
                      v-model="scope.row.dependency"
                      size="mini"
                      :disabled="
                        !scope.row.type.startsWith('select') ||
                        ['sql', 'dp'].indexOf(scope.row.dataSource) < 0
                      "
                    ></el-input>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-form-item> </el-form-item>
    <el-form-item label="数据闪烁功能">
      <el-checkbox v-model="form.flash" size="mini"></el-checkbox>
    </el-form-item>
    <el-row>
      <el-col :span="7">
        <el-form-item label="闪烁列">
          <el-input v-model="form.flashColumn"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="闪烁频率（ms）" label-width="130px">
          <el-input v-model="form.flashInterval"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="闪烁条件">
          <el-input v-model="form.flashFilter"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="闪烁颜色">
      <el-input v-model="form.flashColorFilter"></el-input>
    </el-form-item>
    <el-row>
      <el-col> </el-col>
    </el-row>
    <el-row>
      <el-col> </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getConfig } from '@/api/dataQuery/query'
import { getColumnsAndFilters, setConfig, getDepartmentList } from '@/api/dataQuery/config'
export default {
  data() {
    return {
      tabName: 'columns',
      form: {
        configName: 'alarmreal',
        dbType: 'MySql',
        sqlString: '',
        connectionString: '',
        columns: [],
        filters: [],
      },
      tooltip: {
        datasource: {
          string: '示例：[{value:"val1",label:"label1"},{value:"val2",label:"label2"},……]',
          dict: '直接输入字典分类编码',
          sql: '符合mysql查询的sql语句',
          dp: 'dp中的udp维度',
        },
      },
    }
  },
  methods: {
    //sql变化后获取新的列
    sqlChange() {
      let p = {
        configname: this.form.configName,
        sql: this.form.sqlString,
        connection: this.form.connectionString,
      }
      let _this = this
      getColumnsAndFilters(p)
        .then(function (response) {
          let data = response.data
          console.log(data)
          _this.form.columns = data.columns
          _this.form.filters = data.filters
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    saveForm(index) {
      console.log(this)
      let _this = this
      if (this.form.pageSizeList) {
        if (this.form.pageSizeList instanceof Array) {
          this.form.pageSizeList = this.form.pageSizeList.join(',')
        }
        this.form.pageSizeList = this.form.pageSizeList.split(',')
      }
      setConfig(this.form)
        .then(function (response) {
          console.log(response.data)
          let obj = response.data
          if (obj.Tag == 1) {
            ys.msgSuccess('保存成功')
            //parent.layer.close(index);
            //parent.vue.loadTableData();
          } else {
            ys.msgError(obj.Message)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    loadConfig() {
      let _this = this
      getConfig({ configname: this.form.ConfigName })
        .then(function (response) {
          let data = response.data
          _this.form = data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    loadDepartment() {
      let _this = this
      getDepartmentList()
        .then(function (response) {
          let data = response.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getConfigName() {
      return this.$parent.$parent.resolveConfigName()
    },
  },
  mounted() {
    this.form.ConfigName = this.getConfigName()
    this.loadConfig()
  },
}
</script>

<style lang="scss" scoped></style>