Merge pull request '报关清关级别客户名称搜索' (#119) from master-dev into master
Reviewed-on: http://git.xdadan.loc/tanex/emis-frontend/pulls/119
This commit is contained in:
wuteng
commit
eb1bd127a5
201
src/views/emis/EmisBaseTools/CustomLevelSimplePicker.vue
Normal file
201
src/views/emis/EmisBaseTools/CustomLevelSimplePicker.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div :id="createdId">
|
||||
<el-popover
|
||||
trigger="click"
|
||||
ref="popoverRef"
|
||||
effect="light"
|
||||
:show-arrow="false"
|
||||
>
|
||||
<div >
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="comboGridTable"
|
||||
style="width: 100%;"
|
||||
:data="optionItems"
|
||||
@row-click="onRowClick"
|
||||
:row-key="row => row.empCode"
|
||||
stripe
|
||||
:row-style="isRed"
|
||||
element-loading-text="Loading"
|
||||
>
|
||||
<el-table-column :label="$t('客户名称')" align="left" prop="customerName" width="190" />
|
||||
<el-table-column :label="$t('主归属网点')" align="center" prop="ownerSiteName" min-width="100" />
|
||||
<el-table-column :label="$t('月结卡号')" align="left" prop="monthlyPayCode" width="120" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-show="pagination"
|
||||
small
|
||||
:total="total"
|
||||
:page-size="5"
|
||||
layout="prev, pager, next, total"
|
||||
@current-change="changePage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
slot="reference"
|
||||
ref="inputValue"
|
||||
:value="svalue"
|
||||
:placeholder="placeholder"
|
||||
@input="handleInput"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@clear="onClear"
|
||||
clearable
|
||||
>
|
||||
<template slot="suffix">
|
||||
<!-- <i class="el-icon-arrow-down select-down" :class="visible&&'rotate180'"></i> -->
|
||||
<i slot="suffix" class="el-icon-search"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
|
||||
</el-popover>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import emitter from 'element-ui/src/mixins/emitter';
|
||||
import { listMonthUser } from "@/api/emis/emisCustomerUser";
|
||||
export default {
|
||||
name: "CustomLevelSimplePicker",
|
||||
mixins: [emitter],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: false
|
||||
},
|
||||
isInitiated:{
|
||||
type: [Boolean,String],
|
||||
required: false,
|
||||
default:false
|
||||
},
|
||||
placeholder:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
disabled:{
|
||||
type: [Boolean,String],
|
||||
required: false
|
||||
},
|
||||
pagination: {
|
||||
type: Boolean, default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
createdId: '0',
|
||||
loading:false,
|
||||
|
||||
total:0,
|
||||
optionItems: [],
|
||||
|
||||
// 缺省值
|
||||
defaultTotal:0,
|
||||
defaultItems:null,
|
||||
|
||||
sId: null,
|
||||
svalue: this.value,
|
||||
|
||||
isInputing: false,
|
||||
|
||||
queryParams:{
|
||||
pageNum:1,
|
||||
pageSize:5,
|
||||
searchValue:null
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newVal,oldVal) {
|
||||
this.svalue=this.value;
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.createdId = String(new Date().getTime()) // 给个随机id 判断是否clickoutside
|
||||
},
|
||||
created() {
|
||||
if(this.svalue!=null){
|
||||
this.svalue = this.value;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFocus(){
|
||||
// 第一次点击时需要初始化
|
||||
if(!this.defaultItems){
|
||||
this.queryParams.pageNum=1;
|
||||
this.queryData(null,null);
|
||||
}else{
|
||||
this.total = this.defaultTotal;
|
||||
this.optionItems = [...this.defaultItems];
|
||||
}
|
||||
// this.$refs.popoverRef.doShow();
|
||||
},
|
||||
handleInput(val) {
|
||||
if(val == null ) return;
|
||||
this.isInputing = true;
|
||||
this.svalue = val;
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryData(val,null)
|
||||
|
||||
},
|
||||
onRowClick(row, column, event) {
|
||||
this.svalue=row.name;
|
||||
|
||||
this.isInputing = false;
|
||||
|
||||
this.sId=row.id;
|
||||
|
||||
this.$emit("input", this.svalue);
|
||||
this.$emit("onChange",row);
|
||||
this.$refs.popoverRef.doClose();
|
||||
},
|
||||
isRed({ row }) {
|
||||
if (row.id == this.sId) {
|
||||
return {
|
||||
"color": "red",
|
||||
"font-weight": "bold",
|
||||
};
|
||||
}
|
||||
},
|
||||
changePage(cur) {
|
||||
this.queryParams.pageNum = cur
|
||||
this.queryData(this.queryParams.searchValue)
|
||||
},
|
||||
onClear(el){
|
||||
this.svalue = null;
|
||||
|
||||
this.$emit("input", this.svalue);
|
||||
this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
|
||||
},
|
||||
onBlur(el) {
|
||||
this.$emit("input", this.svalue);
|
||||
this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
|
||||
},
|
||||
queryData(val,key) {
|
||||
this.loading = true;
|
||||
this.loading = true;
|
||||
this.queryParams.searchValue = val;
|
||||
this.queryParams.customerName = val;
|
||||
|
||||
listMonthUser(this.queryParams).then(response => {
|
||||
this.loading = false;
|
||||
this.total = response.total;
|
||||
this.optionItems = response.rows;
|
||||
|
||||
// 初始值存储
|
||||
if(key==null && val==null){
|
||||
this.defaultTotal = this.total+0;
|
||||
this.defaultItems=[...this.optionItems]
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
getIndex($index) {
|
||||
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -4,7 +4,7 @@
|
||||
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customerName">
|
||||
<el-input v-model="form.customerName" placeholder="" />
|
||||
<CustomLevelSimplePicker v-model="form.customerName" placeholder="请选择客户名称" @onChange="handleCustomerChange"></CustomLevelSimplePicker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@ -66,9 +66,13 @@
|
||||
|
||||
<script>
|
||||
import { getCustomsLevel, addCustomsLevel, updateCustomsLevel } from "@/api/emis/emisCustomsLevel";
|
||||
import CustomLevelSimplePicker from "@/views/emis/EmisBaseTools/CustomLevelSimplePicker.vue";
|
||||
|
||||
export default {
|
||||
name: "LevelForm",
|
||||
components: {
|
||||
CustomLevelSimplePicker
|
||||
},
|
||||
props:{
|
||||
id:{
|
||||
type:[Number,Array]
|
||||
@ -78,7 +82,6 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
dicts: ['emis_customs_level'],
|
||||
data() {
|
||||
return {
|
||||
@ -170,6 +173,9 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCustomerChange(val){
|
||||
this.form.customerName=val.customerName;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user