rongxing-vue/src/views/modules/common/Chooselist.vue

<template>
  <el-dialog :title="baseListData.description" center
             :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false"
             :visible.sync="visible"
             width="685px" v-drag>
    <el-form label-position="top"
             inline="inline"
             size="mini"
             label-width="120px">
      <el-form-item v-if="" :label="baseListData.caption1" v-if="baseListData.caption1!='' && baseListData.caption1!=null">
        <el-input v-model="param1"></el-input>
      </el-form-item>
      <el-form-item :label="baseListData.caption2" v-if="baseListData.caption2!='' && baseListData.caption2!=null">
        <el-input v-model="param2"></el-input>
      </el-form-item>
      <el-form-item :label="baseListData.caption4" v-if="baseListData.caption4!='' && baseListData.caption4!=null">

        <el-input v-model="param4"></el-input>
      </el-form-item>
      <el-form-item :label="baseListData.caption3" v-if="baseListData.caption3!='' && baseListData.caption3!=null">
        <el-select v-model="param3">
          <el-option label="全部" value=""></el-option>
          <el-option label="在用" value="Y"></el-option>
          <el-option label="不在用" value="N"></el-option>
        </el-select>
      </el-form-item>
      <el-button style="margin-top: 18px" type="primary" @click="getDataList(false)">查询
      </el-button>
    </el-form>

    <el-table
      :height="height"
      :data="dataList"
      border
      @row-dblclick="getRowData"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          {{ scope.row[item.columnProp] }}
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>

</template>

<script>


import {
  getChooselist,
  getChooselistData
} from "@/api/chooselist/chooselist.js"

export default {
  data() {
    return {
      height: 200,
      title: '列表',
      columnList: [],
      queryTable: {},
      visible: false,
      dataListLoading: true,
      fullscreenLoading: false,
      param1: '',
      param2: '',
      param3: '',
      param: '',
      param4: this.$store.state.user.site,
      dataList: [],
      baseListData: {
        caption1: '',
        caption2: '',
        caption3: '',
        caption4: '',
        description: '',
        fieldname1: '',
        fieldname2: '',
        sqlcode: '',
        tagno: '',
      },
      defaultParam: false
    }
  },
  methods: {

    // 获取 用户的配置
    init(tagNo,param) {
      this.visible = true;
      this.param = param
      // 根据 tagNo 获取列表
      getChooselist({"tagNo": tagNo}).then(({data}) => {
        this.columnList = []
        this.baseListData = data.data
        let start = data.data.sqlcode.indexOf("Select")
        let end = data.data.sqlcode.indexOf("from")
        let length = end - start
        let columns = data.data.sqlcode.trim().substring(start + 6, length).trim()
        let props = columns.split(",")
        props.forEach((item, index) => {
          let name = '信息列'
          switch (index) {
            case 0:
              name = this.baseListData.caption1
              break;
            case 1:
              name = this.baseListData.caption2
              break;
            case 2:
              name = this.baseListData.caption3
              break;
            case 3:
              name = this.baseListData.caption4
              break;
          }
          let column = {
            "columnProp": item.trim(),
            "columnLabel": name,
            "columnHidden": false,
            "columnImage": false,
            "columnSortable": false,
            "columnWidth": null,
            "format": null,
            "sortLv": index,
            "status": true,
            "fixed": false,
            "serialNumber": null,
            "columnType": null,
            "align": null
          }
          this.columnList.push(column)
        })
        this.getDataList(true)
      })
      this.dataListLoading = false

    },
    getDataList(bool) {
      let sql = this.baseListData.sqlcode
      if (bool){
        sql += " and  (" + this.baseListData.fieldname1 + " like '%" + this.param + "%' OR "+this.baseListData.fieldname2 + " like '%" + this.param + "%'" +" ) "
      }
      if (this.param1) {
        sql += " and " + this.baseListData.fieldname1 + " like '%" + this.param1 + "%'"
      }
      if (this.param2) {
        sql += " and " + this.baseListData.fieldname2 + " like '%" + this.param2 + "%'"
      }
      if (this.param3) {
        sql += " and active like '%" + this.param3 + "%'"
      }
      if (this.baseListData.caption4) {
        sql += " and site=" + this.param4
      }
      getChooselistData({"sqlcode": sql}).then(({data}) => {
        if (data.code == 0) {
          this.dataList = data.baseListData;
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getRowData(row) {
      this.visible = false
      this.$emit('getBaseData',row)
    }
  }
}
</script>
<style>


</style>