wangyifang
/
sepax-products-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lr 下拉搜索

Browse Source
master
lion 9 months ago
parent ea8718d002
commit f245868fb0
1 changed files with 159 additions and 117 deletions
Show Stats Download Patch File Download Diff File

276
src/views/resource/components/addLr.vue
Unescape View File

@ -47,30 +47,32 @@
<el-input placeholder="Please Input" style="width:100%" v-model="form.source"></el-input>
</div>
</div>
</template>
<template v-slot:is_top>
<div class="xy-table-item">
<div class="xy-table-item-label" style="font-weight: bold">
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>Top：
</div>
<div class="xy-table-item-content">
<el-select style="width:100%" v-model="form.is_top" placeholder="Please Select">
<el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value" :value="item.id"></el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:is_visible>
<div class="xy-table-item">
<div class="xy-table-item-label" style="font-weight: bold">
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>Visible：
</div>
<div class="xy-table-item-content">
<el-select style="width:100%" v-model="form.is_visible" placeholder="Please Select">
<el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value" :value="item.id"></el-option>
</el-select>
</div>
</div>
<template v-slot:is_top>
<div class="xy-table-item">
<div class="xy-table-item-label" style="font-weight: bold">
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>Top：
</div>
<div class="xy-table-item-content">
<el-select style="width:100%" v-model="form.is_top" placeholder="Please Select">
<el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value"
:value="item.id"></el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:is_visible>
<div class="xy-table-item">
<div class="xy-table-item-label" style="font-weight: bold">
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>Visible：
</div>
<div class="xy-table-item-content">
<el-select style="width:100%" v-model="form.is_visible" placeholder="Please Select">
<el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value"
:value="item.id"></el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:date>
<div class="xy-table-item">
@ -101,10 +103,11 @@
</div>
<div class="xy-table-item-content">
<el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
:auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess" :on-remove="handleRemove">
:auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess"
:on-remove="handleRemove">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
@ -116,12 +119,25 @@
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>PN：
</div>
<div class="xy-table-item-content">
<el-select v-loadmore="loadMore" style="width:100%" filterable v-model="form.product_numbers" multiple collapse-tags
placeholder="Please Select">
<el-select :remote-method="remoteMethod" v-loadmore="loadMore"
style="width:100%" v-model="form.product_numbers" multiple
placeholder="Please Select">
<div style="display: flex;align-items: center;padding:10px">
<el-input size="small" v-model="number_keyword" placeholder="Please Input Part Number"></el-input>
<el-button size="small" style="margin-left:10px" @click="remoteMethod" type="primary">搜索</el-button>
<el-button size="small" style="margin-left:10px" @click="clearMethod" type="info">清空</el-button>
</div>
<el-option v-for="item in productList" :key="item.id" :label="item.number" :value="item.id">
</el-option>
<div v-if="productPage>lastPage" style="text-align: center;">There is no more data</div>
<div v-else style="text-align: center;">Loading More</div>
<div v-if="loading" style="text-align: center;">
Loading....
</div>
<div v-else>
<div v-if="productPage>=lastPage" style="text-align: center;">There is no more data</div>
<div v-else style="text-align: center;">Loading More</div>
</div>
</el-select>
</div>
</div>
@ -195,11 +211,13 @@
data() {
return {
table_name: 'literature_references',
loading: false,
isShow: false,
id: '',
type: 'add',
productPage:1,
lastPage:0,
type: 'add',
productPage: 1,
lastPage: 0,
number_keyword:'',
productList: [],
categoryList: [],
applicationList: [],
@ -207,18 +225,18 @@
uploadOther: {
token: ""
},
action: `${process.env.VUE_APP_UPLOAD_API}`,
showProgress:false,
uploadProgress:0,
action: `${process.env.VUE_APP_UPLOAD_API}`,
showProgress: false,
uploadProgress: 0,
filesList: [],
form: {
category_ids: [],
application_ids: [],
year: "",
title: "",
source: '',
is_top:0,
is_visible:1,
source: '',
is_top: 0,
is_visible: 1,
date: '',
link: '',
files: [],
@ -249,22 +267,22 @@
this.getApplicationList()
// this.getAppSpecial()
},
methods: {
handleRemove(file, fileList) {
this.filesList = fileList
},
handlesuccess(response, file, fileList) {
if (response && response.hasOwnProperty('errcode')) {
this.$Message.warning(response.errmsg || '')
this.filesList = []
return
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
console.log("uploadProgress",this.showProgress,uploadProgress,event)
methods: {
handleRemove(file, fileList) {
this.filesList = fileList
},
handlesuccess(response, file, fileList) {
if (response && response.hasOwnProperty('errcode')) {
this.$Message.warning(response.errmsg || '')
this.filesList = []
return
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
console.log("uploadProgress", this.showProgress, uploadProgress, event)
},
async getApplicationList() {
@ -295,31 +313,54 @@
})
this.appSpecialList = res.data
},
changeItem(e){
console.log("e",e)
},
remoteMethod(query) {
async getProductList() {
this.productPage =1
this.productList = []
this.getProductList(query)
},
clearMethod(){
this.productPage =1
this.number_keyword = ''
this.productList = []
if (this.form.product_numbers_details && this.form.product_numbers_details.length > 0) {
this.productList.unshift(...this.form.product_numbers_details)
}
this.getProductList()
},
async getProductList(query) {
this.loading = true;
const res = await getProduct({
page_size: 100,
page: this.productPage
})
this.lastPage = res.last_page
if(this.type==='editor'){
const uniqueB = res.data.filter(itemB =>
!this.form.product_numbers_details.some(itemC => itemC.id === itemB.id)
);
this.productList.push(...uniqueB)
}else{
this.productList.push(...res.data)
}
page: this.productPage,
filter: [{
key: 'number',
op: 'like',
value: this.number_keyword?this.number_keyword:''
}]
})
this.lastPage = res.last_page
if (this.type === 'editor') {
const uniqueB = res.data.filter(itemB =>
!this.form.product_numbers_details.some(itemC => itemC.id === itemB.id)
);
this.productList.push(...uniqueB)
} else {
this.productList.push(...res.data)
}
this.loading = false
},
loadMore() {
// 这里写入要触发的方法
this.productPage += 1;
if(this.productPage>this.lastPage){
return
}
this.getProductList();
},
loadMore() {
// 这里写入要触发的方法
this.productPage += 1;
if (this.productPage > this.lastPage) {
return
}
this.getProductList();
},
submit() {
@ -328,19 +369,19 @@
this.form.id = this.id
} else {
this.form.id = ''
}
let _files = []
if (this.filesList.length > 0) {
for (var h of this.filesList) {
if (h.response) {
_files.push(h.response.id)
} else {
_files.push(h.id)
}
}
this.form.files = _files
} else {
this.form.files = []
}
let _files = []
if (this.filesList.length > 0) {
for (var h of this.filesList) {
if (h.response) {
_files.push(h.response.id)
} else {
_files.push(h.id)
}
}
this.form.files = _files
} else {
this.form.files = []
}
console.log("this.form", this.form)
// return
@ -365,27 +406,27 @@
}).then(res => {
this.form = this.base.requestToForm(res, this.form)
this.form.date = res.date ? res.date : this.$moment().format('YYYY-MM-DD HH:mm:ss')
this.form.is_visible = res.is_visible ? res.is_visible : 0
this.form.is_visible = res.is_visible ? res.is_visible : 0
this.form.is_top = res.is_top ? res.is_top : 0
this.form.category_ids = res.category_ids ? res.category_ids : []
this.form.product_numbers = res.product_numbers ? res.product_numbers : []
this.form.separation_mode = res.separation_mode ? res.separation_mode : []
this.form.broad_sample_type = res.broad_sample_type ? res.broad_sample_type : []
this.form.specific_sample = res.specific_sample ? res.specific_sample : []
if(res.product_numbers_details && res.product_numbers_details.length>0){
this.productList.unshift(...res.product_numbers_details)
}
if (res.files_details && res.files_details.length > 0) {
this.filesList = []
res.files_details.map(item => {
this.filesList.push({
name: item.original_name,
id: item.id,
url: item.url
})
})
this.form.specific_sample = res.specific_sample ? res.specific_sample : []
if (res.product_numbers_details && res.product_numbers_details.length > 0) {
this.productList.unshift(...res.product_numbers_details)
}
if (res.files_details && res.files_details.length > 0) {
this.filesList = []
res.files_details.map(item => {
this.filesList.push({
name: item.original_name,
id: item.id,
url: item.url
})
})
}
})
}
@ -394,30 +435,30 @@
isShow(newVal) {
if (newVal) {
if (this.type === 'editor') {
this.getDetail()
this.getDetail()
this.getProductList()
} else {
this.form.date = this.$moment().format('YYYY-MM-DD HH:mm:ss')
this.form.date = this.$moment().format('YYYY-MM-DD HH:mm:ss')
this.getProductList()
}
} else {
this.id = ''
this.filesList = []
this.showProgress = false;
this.uploadProgress = 0;
this.productList = []
this.id = ''
this.filesList = []
this.showProgress = false;
this.uploadProgress = 0;
this.productList = []
this.productPage = 1
this.form = {
category_ids: [],
application_ids: [],
year: "",
title: "",
source: '',
is_top:0,
is_visible:1,
source: '',
is_top: 0,
is_visible: 1,
date: '',
link: '',
link: '',
files: [],
product_numbers: [],
separation_mode: [],
@ -433,7 +474,8 @@
</script>
<style scoped lang="scss">
::v-deep .files{
::v-deep .files,
::v-deep .product_numbers{
flex-basis: 100%;
}
</style>

Write Preview
Loading…
Cancel
Save