Vue 开发 Lov 组件

前端样式开发

注意：此 LOV 只限在 FROM 表单中使用，不要再 Table 中使用。

1.开发 LOV 的配置页面

页面如下，具体的代码就不在展示了，只是对数据库的增删改查操作。

新增页面如下：

其中的 sql 类型为: sqlId 和 自定义 sql

2.在项目存放自定义组件的列表下新建 lov 文件夹，并新建 index.vue

index.vue 代码如下：

<template>
  <div class="mod-config">
    <el-input :placeholder="lovPlaceholder" v-model="newModel" class="input-with-select" clearable @clear="clearValue" :disabled="lovDisabled">
      <el-button slot="append" icon="el-icon-search" @click="butClick" :disabled="lovDisabled"></el-button>
    </el-input>
    <lov v-if="lovVisible" ref="lov" @getLovValue="getValue" :data="lovData"></lov>
  </div>
</template>
<script>
import lov from './lov.vue'
export default {
  components: { lov },
  model: {
    prop: 'lovModel'// 指向props的参数名
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    lovPlaceholder: {
      type: String,
      default: '请输入'
    },
    lovDisabled: {
      type: Boolean,
      default: false
    },
    lovModel: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      lovVisible: false,
      newModel: '',
      lovData: {}
    }
  },
  watch: {
    lovModel(val, oldVal) {
      this.newModel = val
    },
    newModel(val, oldVal) {

    }
  },
  methods: {
    butClick () {
      this.lovVisible = true
      this.$nextTick(() => {
        this.$refs.lov.init(this.$props.code)
      })
    },
    getValue (item) {
      this.newModel = item.textField
      this.lovData = item
      this.$emit('method', item)
    },
    getValueField () {
      return this.lovData.valueField
    },
    getTextField () {
      return this.lovData.textField
    },
    clearValue () {
      var item = {valueField: null}
      this.$emit('method', item)
    }
    
  }
}
</script>

解释：
lovPlaceholder：输入框占位文本
newModel：绑定的值
clearable：删除输入框中的值，但是这个输入框上两个值，这个只能删除 textField 的值，并不能删除 valueField 的值，所以我们加了 @clear=“clearValue” 这个方法，clearValue 方法将 valueField 的值置为 null 传给父组件，就可以同时删除输入框两个值了。
:disabled=“lovDisabled”：是否禁止输入框的输入；那么在父组件中使用的话必须加上 v-bind ，因为 disabled 是个 Boolean 值，不加 v-bind 的话，会默认认为传给 disabled 的是一个字符串值，虽然可以正常使用，但是控制台会报错的，所以还是加上比较好。

其中使用到的 lov.vue 的代码如下：

<template>
  <el-dialog
    :title="lovTitle"
    :close-on-click-modal="false"
    :width="lovWidth"
    :visible.sync="visible"
    :append-to-body="true">
    <form-create v-model="dataForm" :rule="rule" :option="option"></form-create>
    <span><el-button type="primary" @click="getDataList()">查询</el-button></span>
    <el-table
      :data="dataList"
      border
      ref="lovTable"
      v-loading="dataListLoading"
      @row-click="rowClick"
      @row-dblclick="rowDblclick"
      @selection-change="selectionChangeHandle"
      style="width: 100%;margin-top: 20px;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column v-for="(items, index) in tableList" 
        :key="index" 
        :prop="items.propName" 
        :label="items.labelName" 
        :header-align="items.headerAlign" 
        :align="items.align"
        :width="items.width"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {},
        lovTitle: '',
        lovWidth: '50%',
        rule: [],
        // 组件参数配置
        option: {
          form: {
            inline: true
          },
          // 显示重置表单按扭
          resetBtn: true,
 
          // 表单提交按扭事件
          submitBtn: {
            show: false
          }
        },
        dataList: [],
        dataListLoading: false,
        dataListSelections: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        tableList: [],
        lovCode: '',
        valueField: '',
        textField: '',
        lovTableData: {}
      }
    },
    methods: {
      // 初始化
      init (code) {
        this.visible = true
        this.lovCode = code
        // 初始化各项参数
        this.initData(code)
      },
      initData (code) {
        this.$http({
          url: this.$http.adornUrl(`/sys/lovheader/commonLov/${code}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.lovTitle = data.data.header.lovName
          this.lovWidth = data.data.header.weight + '%'
          this.valueField = data.data.header.valueId
          this.textField = data.data.header.valueText
          var lines = data.data.lines
          // form 表单 table 
          var ruleData = []
          var tableData = []
          if (lines.length > 0) {
            for (var i=0;i<lines.length;i++) {
                if (lines[i].isQuery) {
                  var data = {
                    type: 'input',
                    field: lines[i].columnValue,
                    props: {
                      placeholder: "请输入" + lines[i].columnText,
                      disabled: false,
                      readonly: false,
                      clearable: true // 是否显示清空按钮
                    }
                  }
                  ruleData.push(data)
                }
                if (lines[i].isShow) {
                  var table = {
                    propName: lines[i].columnValue, 
                    labelName: lines[i].columnText,
                    headerAlign: lines[i].columnAgin,
                    align: lines[i].columnAgin,
                    width: lines[i].columnWeight
                  }
                  tableData.push(table)
                }
            }
            this.rule = ruleData
            this.tableList = tableData
          }
          this.getDataList()
        }).catch(res => {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: 1500
          })
        })
      },
      // 查询
      getDataList () {
        var data = this.dataForm.form
        data.page = this.pageIndex
        data.limit = this.pageSize
        data.code = this.lovCode
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/lovheader/listCommon'),
          method: 'get',
          params: this.$http.adornParams(data)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        if (val.length > 1) {
          this.$refs.lovTable.clearSelection() // 清空用户选择
        }
        if (val.length > 0) {
          var row = val[val.length - 1]
          this.$refs.lovTable.toggleRowSelection(row, true) // 切换某一行的选中状态
          this.lovTableData = row
        }
      },
      // 确定
      dataFormSubmit () {
        this.lovClose(this.lovTableData)
      },
      // 双击事件
      rowDblclick (row, column, event) {
        this.lovClose(row)
      },
      rowClick (row, column, even) {
        this.$refs.lovTable.clearSelection()
        this.$refs.lovTable.toggleRowSelection(row)
        this.lovTableData = row
      },
      lovClose (row) {
        var value = row[this.valueField]
        var text = row[this.textField]
        var data = {
          valueField: value,
          textField: text
        }
        this.$emit('getLovValue', data)
        this.visible = false
      }
    }
  }
</script>

其中使用到了 form-create/element-ui 组件，我们可以下载使用：

npm i @form-create/element-ui

之后再 main.js 中使用：

import formCreate from "@form-create/element-ui"
Vue.use(formCreate)

2.使用

可以将 lov 组件也放在 main.js 中，或者在使用的时候在引入。
1)main.js

import Lov from "@/components/lov"
Vue.use(Lov)

2)在使用的时候在引入

import Lov from "@/components/lov"

3)在代码中使用

<Lov code="自己配置的 LOV 编码" lovPlaceholder="输入框占位文本" ref="testLov" @method="lovMethod" />

注意：获取具体的 ValueField 和 TextField 时，使用如下代码：

var value = this.$refs.testLov.getValueField()
var text = this.$refs.testLov.getTextField()

其中的 method 为方法，也可以通过此方法获取 ValueField 和 TextField 。

lovMethod (item) {
   
 this.$alert('ValueField: ' + item.valueField + " TextField: " + item.textField, '标题名称', {
   
   confirmButtonText: '确定'
 })
}

后端

sql语句：

DROP TABLE IF EXISTS `sys_lov_header`;
CREATE TABLE `sys_lov_header` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `lov_code` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT 'LOV编码',
  `lov_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin DEFAULT NULL COMMENT 'LOV名称',
  `lov_desc` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin DEFAULT NULL COMMENT 'LOV描述',
  `value_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_