<template>
<section class="quote pagex">
<div class="quote-con">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="报价型号">
<el-autocomplete @keyup.enter.native="onSubmit" v-model="formInline.goods_name" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync" placeholder="请输入型号" @select="handleSelectGoodsName"></el-autocomplete>
</el-form-item>
<el-form-item label="品牌">
<el-autocomplete @keyup.enter.native="onSubmit" v-model="formInline.brand_name" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync2" placeholder="请输入品牌" @select="handleSelectBrandName"></el-autocomplete>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="formInline.status" placeholder="请选择">
<el-option label="比价中" value="1"></el-option>
<el-option label="已选中" value="2"></el-option>
<el-option label="已确认" value="3"></el-option>
<el-option label="已成单" value="4"></el-option>
<el-option label="已关闭" value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label="最近报价时间">
<el-date-picker v-model="formInline.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<div @click="onSubmit" class="search-btn">搜索</div>
</el-form-item>
</el-form>
<div class="btn-nav clr">
<div class="fl dcg" @click="exportChange">导出</div>
<div class="fl dcg" @click="close">关闭</div>
<div class="fl dcg delbtn" @click="del">删除</div>
</div>
<div class="data-box th-all">
<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center"></el-table-column>
<el-table-column prop="goods_name" fixed="left" label="型号" width="200">
<template slot-scope="scope">
<div class="price-mores">
<el-tooltip effect="light" placement="bottom-start" popper-class="popper-class-box">
<div slot="content">
<p class="p-text row verCenter">
<em class="row">型号</em>
<span class="row verCenter boxsiz">{{scope.row.goods_name}}</span>
</p>
<p class="p-text row verCenter">
<em class="row">品牌</em>
<span class="row verCenter boxsiz">{{scope.row.brand_name}}</span>
</p>
<p class="p-text row verCenter">
<em class="row">数量</em>
<span class="row verCenter boxsiz">{{scope.row.quote_number}}</span>
</p>
<p class="p-text row verCenter">
<em class="row">批次</em>
<span class="row verCenter boxsiz">{{scope.row.batch}}</span>
</p>
<p class="p-text row verCenter">
<em class="row">交货日期</em>
<span class="row verCenter boxsiz">{{scope.row.delivery_time}}</span>
</p>
</div>
<div class="more-search-btn">{{scope.row.goods_name}}</div>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column prop="brand_name" fixed="left" label="品牌" width="200"></el-table-column>
<el-table-column prop="inquiry_sn" label="询价单号" width="200"></el-table-column>
<el-table-column prop="quote_goods_name" label="报价型号" width="200"></el-table-column>
<el-table-column prop="quote_brand_name" label="报价品牌" width="200"></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<span v-if="scope.row.status==1" class="f-green">比价中</span>
<span v-else-if="scope.row.status==2" class="f-yellow1">已选中</span>
<span v-else-if="scope.row.status==3">已确认</span>
<span v-else-if="scope.row.status==4">已成单</span>
<span v-else-if="scope.row.status==5" class="f-red1">已关闭</span>
<span v-else-if="scope.row.status==9" class="f-red1">已删除</span>
<span v-else-if="scope.row.status==-1" class="f-red1">已撤销</span>
</template>
</el-table-column>
<el-table-column prop="expire_status_val" label="是否有效" width="100"></el-table-column>
<el-table-column prop="quote_number" label="报价数量" width="100"></el-table-column>
<el-table-column prop="price_origin" label="价格" width="200">
<template slot-scope="scope">
<span>{{scope.row.price_origin|floatZero}}</span>
</template>
</el-table-column>
<el-table-column prop="currency_val" label="币种" width="100"></el-table-column>
<el-table-column prop="tax_rate" label="税率" width="100"></el-table-column>
<el-table-column prop="batch" label="批次" width="100"></el-table-column>
<el-table-column prop="delivery_time" label="货期" width="100"></el-table-column>
<el-table-column prop="mpq" label="最小包装数量" width="150"></el-table-column>
<el-table-column prop="moq" label="起订量" width="100"></el-table-column>
<el-table-column prop="price_other" label="其他费用" width="100">
<template slot-scope="scope">
<span>{{scope.row.price_other|floatZero}}</span>
</template>
</el-table-column>
<el-table-column prop="expire_time" label="报价有效期" width="200"></el-table-column>
<el-table-column prop="remark" label="备注" width="200"></el-table-column>
<el-table-column prop="create_time" label="最近报价时间" width="200"></el-table-column>
</el-table>
<el-pagination layout="prev, pager, next,jumper" :page-size="limit" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
</div>
</div>
<Menu/>
</section>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {
Form,
FormItem,
Select,
Option,
Input,
DatePicker,
Button,
Dropdown,
DropdownMenu,
DropdownItem,
Table,
TableColumn,
MessageBox,
Message,
Dialog,
Pagination,
Autocomplete,
Tooltip
} from 'element-ui'
import {
NODE_ENVS
} from "../../ajax";
import Tool from '../../tool'
Vue.prototype.$message=Message
Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Autocomplete).use(Tooltip);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination);
export default {
name: "inquire",
data() {
return {
total: 0,
limit: 10,
page: 1,
tableData: [],
multipleSelection: [],
formInline: {
goods_name: '',
brand_id: '',
brand_name:"",
date: '',
status: ''
}
};
},
watch: {
'formInline.date'(val){
if(!val){
this.formInline.date=[]
}
},
'formInline.brand_name'(val){
if(!val){
this.formInline.brand_id=""
return
}
var arr_=[]
this.brandList=this.brandList||[]
for(var i=0;i<this.brandList.length;i++){
arr_.push(this.brandList[i].value)
}
if(arr_.indexOf(val)==-1){
this.formInline.brand_id=""
}
}
},
created() {
this.getData();
},
computed: {},
methods: {
getData() {
console.log(this.formInline)
this.$http('get', "/api/quote/getlist", {
page: this.page,
limit: this.limit,
goods_name: this.formInline.goods_name,
brand_id: this.formInline.brand_id,
brand_name: this.formInline.brand_name,
start_time: this.formInline.date ? this.formInline.date[0] : '',
end_time: this.formInline.date ? this.formInline.date[1] : '',
status: this.formInline.status
}).then(res => {
if (res.err_code === 0) {
this.tableData = res.data.list || [];
this.total = res.data.total;
} else {
this.$message(res.err_msg);
}
})
},
onSubmit() {
this.page = 1;
this.getData();
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleCurrentChange(val) {
this.page = val;
this.getData();
},
exportChange() {
var arr = [];
if (this.multipleSelection.length == 0) {
this.$message("请至少选择一条数据");
return;
}
for (var i = 0; i < this.multipleSelection.length; i++) {
arr.push(this.multipleSelection[i]['id'])
}
window.location.href =NODE_ENVS+ '/api/quote/export?ids=' + arr.join(",")+'&token='+Tool.getCookie('token') ;;
},
close() {
var arr = [];
if (this.multipleSelection.length == 0) {
this.$message("请至少选择一条数据");
return;
}
for (var i = 0; i < this.multipleSelection.length; i++) {
arr.push(this.multipleSelection[i]['id'])
}
this.$http('post', "/api/quote/close", {
ids: arr.join(",")
}).then(res => {
if (res.err_code === 0) {
this.$message("关闭成功");
this.getData();
} else {
this.$message(res.err_msg);
}
})
},
del() {
var arr = [];
if (this.multipleSelection.length == 0) {
this.$message("请至少选择一条数据");
return;
}
for (var i = 0; i < this.multipleSelection.length; i++) {
arr.push(this.multipleSelection[i]['id'])
}
MessageBox.confirm('确认到删除当前勾选数据吗？', {
type: 'error'
}).then(() => {
this.$http('post', "/api/quote/delete", {
ids: arr.join(",")
}).then(res => {
if (res.err_code === 0) {
this.$message("删除成功");
this.getData();
} else {
this.$message(res.err_msg);
}
})
}).catch(()=>{
})
},
handleSelectGoodsName(item) {
this.formInline.goods_name = item.value
},
handleSelectBrandName(item) {
this.formInline.brand_name = item.value;
this.formInline.brand_id = item.brand_id;
},
querySearchAsync(queryString, cb) {
this.$http('get', "/api/search/getspu", {
spu_name: this.formInline.goods_name
}).then(res => {
if (res.err_code == 0) {
var arrlist_ = res.data || [];
var arr_ = []
for (var i = 0; i < arrlist_.length; i++) {
arr_.push({value: arrlist_[i]['spu_name']})
}
cb(arr_);
}
})
},
querySearchAsync2(queryString, cb) {
this.$http('get', "/api/search/getbrand", {
brand_name: this.formInline.brand_name,
type:2
}).then(res => {
if (res.err_code == 0) {
var arrlist_ = res.data || [];
this.brandList = []
this.formInline.brand_id = ""
for (var i = 0; i < arrlist_.length; i++) {
this.brandList.push({value: arrlist_[i]['brand_name'], brand_id: arrlist_[i]['brand_id']})
}
cb(this.brandList);
}
})
}
},
components: {
Menu
}
};
</script>
<style scoped>
@import "../../assets/css/list/quote.min.css";
</style>