前端样式开发
注意:此 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_