效果图
插件
项目中存放的位置:src\components\remoteSelect\remoteSelect.vue
代码
<template>
<el-select
filterable
remote
v-model="ivalue"
clearable
:multiple="multiple"
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading"
style="width:100%"
@change="ichange"
@focus="focusMethod()"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label?item.label.replace(/<[^>]+>/g,''):''"
:value="item.value"
>
<span >{{item.label}}</span>
</el-option>
</el-select>
</template>
<!--
文件上传 支持多个文件上传
uploadAttrs el-upload属性
tooltip 上传文件的提示
bottonText 上传的按钮提示
-->
<script>
import Vue from 'vue'
export default {
name: 'SelectDialog',
props: {
title: {
type: String,
default: '请选择'
},
placeholder: {
type: String,
default: '请输入关键词'
},
searchKey: {
type: String,
default: 'f_name'
},
idKey: {
type: String,
default: 'fId'
},
labelKey: {
type: String,
default: 'fName'
},
labelFormatter: {
type: Function,
default: (source, label, value) => {
// console.log('labelFormatterrrr2', source)
return label
}
},
valueItem: {
type: Object
},
requestUrl: {
type: String,
default: '/tdlimsitem'
},
change: {
type: Function,
default: () => {}
},
clear: {
type: Function,
default: () => {}
},
sure: {
type: Function,
default: () => {}
},
//筛选条件
extparam: {
type: Object,
default: () => {
return {}
}
},
sortType: {
type: String,
default: null
},
sortBy: {
type: String,
default: null
},
value: {
// type: Object,
default: () => {
if (this.multiple) {
return []
}
return ''
}
},
multiple: {
type: Boolean,
default: false
}
},
async mounted () {
// console.log('mounted',this.value);
// let value =this.value;
// if(value&&value.length>0){
// this.fileList=JSON.parse(value);
// }
// console.log('this.valueItem', this.valueItem, 'this.value', this.value)
await this.initValue()
},
watch: {
valueItem: {
handler: function (valueItem) {
console.log('watch', valueItem)
let item = this.valueItem
let option = {}
option.value = item[this.idKey]
option.label = this.labelFormatter(item, item[this.labelKey], option.value)
option.source = item
this.ivalue = option.label
this.options = [option]
this.remoteMap[option.value] = item
},
deep: true
},
value: {
handler: async function (value) {
if (!value) {
return
}
await this.initValue()
this.ivalue = this.value
// console.log('this.valueItem5', value)
},
deep: true
}
},
data () {
return {
options: [],
ivalue: null,
loading: false,
downloading: false,
remoteMap: {},
query: '',
tempSearchKey: ''
}
},
methods: {
async initValue () {
if (this.valueItem) {
console.log('this.valueItem1', this.valueItem)
let item = this.valueItem
let option = {}
option.value = item[this.idKey]
option.label = this.labelFormatter(item, item[this.labelKey], option.value)
option.source = item
this.options = [option]
this.remoteMap[option.value] = item
} else if (this.multiple && this.value) {
console.log('this.valueItem2', this.valueItem)
// 初始化多选内容
let values = this.value
if (!(values instanceof Array)) {
values = this.value.split(',')
}
let tempOptions = []
let workOptions = this.options
for (let i = 0; i < values.length; i++) {
const value = values[i]
await this.$http({
url: this.$http.adornUrl(`${this.requestUrl}/info/${value}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
let item = data.data
let result = {}
let iid = item[this.idKey]
let ilabel = item[this.labelKey]
this.remoteMap[iid] = item
result.value = iid
result.label = this.labelFormatter(item, ilabel, iid)
result.source = item
// 如果当前列表中存在则不添加
let existOption = false
for (let s = 0; s < workOptions.length; s++) {
const workOption = workOptions[s]
if (workOption.value == iid) {
existOption = true
break
}
}
if (existOption) {
return
}
tempOptions.push(result)
this.remoteMap[data.data[this.idKey]] = data.data
} else {
}
})
}
console.log('this.options', JSON.stringify(this.value), JSON.stringify(this.options))
if (tempOptions.length > 0) {
this.options.concat(tempOptions)
}
if (this.ivalue != values) {
// console.log('ivalue2', this.ivalue, values)
this.ivalue = values
}
} else if (this.value) {
// console.log('this.valueItem3', this.valueItem)
// console.log('this.value', this.value)
const value = this.value
await this.$http({
url: this.$http.adornUrl(`${this.requestUrl}/info/${value}`),
method: 'get',
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
let item = data.data
let result = {}
let iid = item[this.idKey]
let ilabel = item[this.labelKey]
this.remoteMap[iid] = item
result.value = iid
result.label = this.labelFormatter(item, ilabel, iid)
let exist = false
for (let i = 0; i < this.options.length; i++) {
const element = this.options[i]
if (element.value == result.value) {
exist = true
break
}
}
if (!exist) {
this.options = [result]
this.remoteMap[data.data[this.idKey]] = data.data
}
} else {
}
})
this.ivalue = value
} else {
// console.log('this.valueItem4')
}
},
focusMethod () {
if (!this.options || this.options.length == 0) {
this.remoteMethod('')
}
},
remoteMethod (query) {
if (1 === 1) {
this.loading = true
let params = {
prop: this.sortBy,
order: this.sortType,
page: 1,
limit: 15
}
params = Object.assign({}, params, this.extparam)
params[this.searchKey] = query
this.tempSearchKey = query
this.$http({
url: this.$http.adornUrl(`${this.requestUrl}/list`),
method: 'get',
params
}).then(({ data }) => {
if (data && data.code === 0) {
this.options = data.data.list.map(item => {
let result = {}
let iid = item[this.idKey]
let ilabel = item[this.labelKey]
this.remoteMap[iid] = item
result.value = iid
result.label = this.labelFormatter(item, ilabel, iid)
return result
})
} else {
this.options = []
}
this.loading = false
})
} else {
this.options = []
}
},
ichange (value) {
if (this.multiple) {
// 遍历数组中所有的内容
let itemArray = []
for (let i = 0; i < value.length; i++) {
const itemValue = value[i]
itemArray.push(this.remoteMap[itemValue])
}
this.$emit('input', value, itemArray)
this.change(value, itemArray)
} else {
// console.log('point1')
if (!value) {
this.$emit('input', value, {})
this.change(value, value, {})
// console.log('point2')
return
}
this.$emit('input', this.remoteMap[value][this.idKey], this.remoteMap[value])
this.change(value, this.remoteMap[value][this.idKey], this.remoteMap[value])
console.log('point3')
}
},
handleClose (isData) {
if (isData && this.ivalue != null && this.ivalue != '') {
this.sure(this.ivalue, this.remoteMap[this.ivalue])
}
}
}
}
</script>
vue中运用(前台)
引入插件:
import RemoteSelect from '../../../components/remoteSelect/remoteSelect.vue'
<el-form-item >
合同号 : <remote-select
v-model="dataForm.f_contract_bill_no"
placeholder="合同号"
requestUrl="/truckscalemeasurement/getContractBillNoList" //获取数据路径
idKey="fContractBillNo"
labelKey="fContractBillNo" //对应实体类
searchKey="f_contract_bill_no" //查询字段(对应数据库)
:extparam="{f_workflow_step__ge:'100000010000'}" //筛选条件
style="width: 170px"
clearable
/>
</el-form-item>
后台支撑代码
TruckScaleMeasurementDao
@Mapper
public interface TruckScaleMeasurementDao extends BaseMapper<TruckScaleMeasurementEntity> {
//查询条件展示(合同号)
@Select("SELECT f_contract_bill_no FROM truck_scale_measurement ${ew.customSqlSegment} GROUP BY f_contract_bill_no ")
List<TruckScaleMeasurementEntity> getContractBillNoList(@Param(Constants.WRAPPER) QueryWrapper<TruckScaleMeasurementEntity> query);
}
TruckScaleMeasurementService
public interface TruckScaleMeasurementService extends IService<TruckScaleMeasurementEntity> {
//合同号称列表
List<TruckScaleMeasurementEntity> getContractBillNoList(Map<String, Object> params);
}
TruckScaleMeasurementApi
@Slf4j
@RestController
public class TruckScaleMeasurementApi extends AbstractController {
@Autowired
private TruckScaleMeasurementService truckScaleMeasurementService;
private final SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyyMMdd_HHmmss");
/**
* 物料名称列表
*/
@GetMapping(value = "/truckscalemeasurement/getContractBillNoList/list")
@PreAuthorize("hasAuthority('limsweighing:truckscalemeasurement:list')")
public Result<?> getContractBillNoList(@RequestParam Map<String, Object> params){
List<TruckScaleMeasurementEntity> truckScaleMeasurementEntities = truckScaleMeasurementService.getContractBillNoList(params);
Map map=new HashMap();
map.put("list",truckScaleMeasurementEntities);
return Result.succeed("succeed", map);
}
}
TruckScaleMeasurementServiceImpl
@Service("truckScaleMeasurementService")
public class TruckScaleMeasurementServiceImpl extends ServiceImpl<TruckScaleMeasurementDao, TruckScaleMeasurementEntity> implements TruckScaleMeasurementService {
@Autowired
private TruckScaleMeasurementService truckScaleMeasurementService;
//获取合同号名称列表
@Override
public List<TruckScaleMeasurementEntity> getContractBillNoList(Map<String, Object> params) {
QueryWrapper<TruckScaleMeasurementEntity> query=new QueryWrapper<>();
//设置展示条件
// query=query.ge("f_workflow_step","100000010000");
// f_contract_bill_no
String fbillno = (String) params.get("fBillNo");
if (fbillno != null&&fbillno.length()>0) {
query.in("f_bill_no", fbillno.split(","));
}else {
//流程步骤 f_workflow_step__ge
String f_workflow_step__ge= (String) params.get("f_workflow_step__ge");
if (f_workflow_step__ge != null && f_workflow_step__ge.length()>0) {
query=query.ge("f_workflow_step",f_workflow_step__ge);
}
//合同号 f_contract_bill_no
String f_contract_bill_no= (String) params.get("f_contract_bill_no");
if (f_contract_bill_no != null && f_contract_bill_no.length()>0) {
query=query.like("f_contract_bill_no",f_contract_bill_no);
}
}
List<TruckScaleMeasurementEntity> list=this.getBaseMapper().getContractBillNoList(query);
return list;
}
}