vue+iview+select+ローカル検索またはリモート検索
4665 ワード
ケース
import m_auth from '@/../mixins/auth'
export default {
name: 'initialTest',
mixins: [m_auth],
data(){
return{
loading: false,
searchData: {
styleId: '',
wareHouseId: '',
wareShelfId: '',
},
dropList: {
StyleList: [],
WareHouseList: [],
WareShelfList: []
},
afterData: [],
formAdd: {
WareHouseId: '',
WareHouseName: '',
WareShelfId: '',
WareShelfName: '',
},
}
},
activated() {
this.getDropHouse();
},
methods: {
remoteMethod (query) {
if (query !== '') {
this.loading = true;
this.getDropStyle(query);
} else {
this.dropList.StyleList = [];
}
},
//
getDropStyle (query) {
// query != ''
let afterData = [
{
"Id":"3db8b88b-ba44-4553-801e-3a2ebcbef4b7",
"StyleName":" 111",
"StyleNumber":" 111"
},
{
"Id":"929f4880-68ed-4803-8811-3eda092d594c",
"StyleName":" 110",
"StyleNumber":" 110"
},
{
"Id":"ae36eda5-bc94-4d8a-893a-4623d0d9965a",
"StyleName":" 113",
"StyleNumber":" 113"
},
{
"Id":"d89b636e-46a5-45f3-b0fb-a5eb77230ad8",
"StyleName":" ",
"StyleNumber":"123"
}
];
this.loading = false;
if (afterData && afterData.length > 0) {
_.each(afterData , item => {
if (item.StyleName) {
this.$set(item, 'Name', item.StyleName);
}
})
this.afterData = afterData;
} else {
this.$refs.setStyle.$data.query = '';
this.afterData = []
}
},
// option label value
hanleStyleChange (value) {
console.log('vaule------>>', value);
// value : {
// label:" 110"
// value:"929f4880-68ed-4803-8811-3eda092d594c"
// }
},
//
getDropHouse (){
this.dropList.WareHouseList = [
{
"Id":"bc7669b0-d502-4683-8599-9543a6b78015",
"Name":" ",
"WareShelfList":null
},
{
"Id":"859aad02-6228-435d-ae67-fe810bc434aa",
"Name":" ",
"WareShelfList":[
{
"Id":"6bafbcb4-6ae7-4fce-849c-8ede4a06303e",
"Name":" "
}
]
}
]
},
// option value : slot, slot , label , label , value。
hanleHouseChange (value) {
this.dropList.WareShelfList = [];
let choiceValue = value;
if (this.searchData.wareHouseId) { //value : id ,
_.each( this.dropList.WareHouseList, item => {
if (choiceValue == item.Id) {
this.dropList.WareShelfList = item.WareShelfList;
return false
}
});
} else {
this.$refs.setHouseQuery.$data.query = '';
this.$refs.setShelfQuery.$data.query = '';
return false
}
},
handleHouseClear () {
this.searchData.wareHouseId = '';
this.$refs.setHouseQuery.$data.query = ''; //
this.handleShelfClear ()
},
handleShelfClear () {
this.searchData.wareShelfId = '';
this.$refs.setShelfQuery.$data.query = '';
},
edit () {
// 、
let resData = res.data;
if (resData) {
// : ,nextTick
this.formAdd['WareHouseId'] = resData.WareHouseId;
this.$nextTick( () =>{
this.formAdd = resData;
})
}
}
}
}