<template>
<section class="inquireDetail pagex">
<div class="inquiry-information boxsiz">
<p class="tit">询价信息</p>
<div class="input-box">
<span class="p-text">型号</span>
<input type="text" placeholder="" disabled :value="inquiry_info.goods_name" style="width: 176px;margin-right: 30px; "/>
<span class="p-text">品牌</span>
<input type="text" placeholder="" disabled :value="inquiry_info.brand_name" style="width: 100px;margin-right: 30px; "/>
<span class="p-text">数量</span>
<input type="text" placeholder="" disabled :value="inquiry_info.inquiry_number" style="width: 100px ;margin-right: 30px;"/>
<span class="p-text">批次</span>
<input type="text" placeholder="" disabled :value="inquiry_info.batch" style="width: 100px;margin-right: 30px; "/>
<span class="p-text">交货日期</span>
<input type="text" placeholder="" disabled :value="inquiry_info.delivery_time" style="width: 100px;margin-right: 30px; "/>
<span class="p-text">询价单号</span>
<input type="text" placeholder="" disabled :value="inquiry_info.inquiry_sn" style="width: 138px "/>
</div>
<p class="text">
<span>状态：</span>
<em v-if="inquiry_info.status == 1">待报价</em>
<em v-else-if="inquiry_info.status == 9">待报价</em>
<em v-else-if="inquiry_info.status == -1">已关闭</em>
<em v-else-if="inquiry_info.status == 2">已报价</em>
</p>
</div>
<div class="quote boxsiz">
<p class="tit">询价信息</p>
<div class="btn-nav clr">
<div class="fl dcg" @click="added" style="margin-left: 0px;">新增</div>
<div class="fl dcg updatex" @click="modify">修改</div>
<div class="fl dcg delbtn" @click="del">删除</div>
</div>
<div class="data-box th-all">
<el-table :data="quote_list" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="40" align="center"></el-table-column>
<el-table-column prop="goods_name" label="报价型号" width="200"></el-table-column>
<el-table-column prop="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==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="100"></el-table-column>
<el-table-column prop="currency" label="币种" width="100">
<template slot-scope="scope">
<span v-if="scope.row.currency==1">人民币</span>
<span v-else-if="scope.row.currency==2">美元</span>
<span v-else-if="scope.row.currency==3">港币</span>
<span v-else-if="scope.row.currency==4">欧元</span>
<span v-else-if="scope.row.currency==5">英磅</span>
</template>
</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="200"></el-table-column>
<el-table-column prop="moq" label="起订量" width="100"></el-table-column>
<el-table-column prop="price_other" label="其他费用" width="100"></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>
</div>
</div>
<div class="assistant">
<i class="ic"></i>
<ul class="tab row verCenter">
<li @click="tab(index)" class="boxsiz row rowCenter verCenter" :class="{'curr':active==index}" v-for="(item,index) in textArr" :key="index">{{item}}</li>
</ul>
<div class="data-box th-all">
<template v-if="active==0">
<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column fixed prop="goods_name" label="型号" width="180">
</el-table-column>
<el-table-column fixed prop="goods_sn" label="供应商内部型号编码" width="180">
</el-table-column>
<el-table-column fixed prop="brand_name" label="品牌" width="180">
</el-table-column>
<el-table-column prop="batch_sn" label="封装" width="180">
</el-table-column>
<el-table-column prop="moq" label="起订量" width="150">
</el-table-column>
<el-table-column prop="mpq" label="标准包装量" width="150">
</el-table-column>
<el-table-column prop="stock" label="库存数量" width="150">
</el-table-column>
<el-table-column prop="cn_ladder_price" label="国内含税价（￥）" width="140">
<template slot-scope="scope" v-if="scope.row.cn_ladder_price&&scope.row.cn_ladder_price.length>0">
<div class="price-more">
<el-tooltip placement="bottom" effect="light">
<div slot="content">
<div class="boxxrth2021">
<p class="clr" v-for="item in scope.row.cn_ladder_price">
<span class="fl">{{item.purchases}}+</span>
<span class="fl">¥{{item.price}}</span>
</p>
</div>
</div>
<div class="more-search-btn">查看更多</div>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column prop="hk_ladder_price" label="香港交货价（＄）" width="150">
<template slot-scope="scope" v-if="scope.row.hk_ladder_price&&scope.row.hk_ladder_price.length>0">
<div class="price-more">
<el-tooltip placement="bottom" effect="light">
<div slot="content">
<div class="boxxrth2021">
<p class="clr" v-for="item in scope.row.hk_ladder_price">
<span class="fl">{{item.purchases}}+</span>
<span class="fl">¥{{item.price}}</span>
</p>
</div>
</div>
<div class="more-search-btn">查看更多</div>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column prop="cn_delivery_time" label="大陆交期" width="150">
</el-table-column>
<el-table-column prop="hk_delivery_time" label="香港交期" width="150">
</el-table-column>
<el-table-column prop="goods_status" label="状态" width="150">
<template slot-scope="scope">
<span v-if="scope.row.goods_status==1" class="f-green">上架</span>
<span v-else-if="scope.row.goods_status==3">下架</span>
</template>
</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>
</template>
<template v-else-if="active==1">
<el-table :data="historyList" border style="width: 100%">
<el-table-column prop="goods_name" label="报价型号" width="200"></el-table-column>
<el-table-column prop="brand_name" label="报价品牌" width="200"></el-table-column>
<el-table-column prop="status" label="状态" min-width="100">
<template slot-scope="scope">
<span v-if="scope.row.status==2" class="f-green">已报价</span>
<span v-else-if="scope.row.status==1" class="f-yellow1">待报价</span>
<span v-else-if="scope.row.status==9">已删除</span>
<span v-else-if="scope.row.status==-1" class="f-red1">已关闭</span>
</template>
</el-table-column>
<el-table-column prop="" label="是否有效" width="100"></el-table-column>
<el-table-column prop="price_origin" label="价格" width="100"></el-table-column>
<el-table-column prop="currency" 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="100"></el-table-column>
<el-table-column prop="moq" label="起订量" width="100"></el-table-column>
<el-table-column prop="price_other" label="其他费用" width="200"></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-column prop="expire_time" label="型号" width="100"></el-table-column>
<el-table-column prop="expire_time" label="品牌" width="100"></el-table-column>
<el-table-column prop="inquiry_sn" 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>
</template>
</div>
</div>
<!--新增弹窗-->
<el-dialog :title="title" :visible.sync="dialogVisible" width="656px" class="xx">
<div class="dialog-form">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<div class="row bothSide">
<div class="box">
<el-form-item label="报价型号" prop="goods_name">
<el-input v-model="ruleForm.goods_name" :disabled="isModify" placeholder="请输入型号" :value="ruleForm.goods_name"></el-input>
</el-form-item>
<el-form-item label="报价数量" prop="quote_number">
<el-input v-model="ruleForm.quote_number" placeholder="请输入数量" :value="ruleForm.quote_number"></el-input>
</el-form-item>
<el-form-item label="币种">
<el-select v-model="ruleForm.currency" @change="currentChange">
<el-option label="RMB" value="1"></el-option>
<el-option label="USD" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="批次" prop="batch">
<el-input v-model="ruleForm.batch" placeholder="请输入D/C" :value="ruleForm.batch"></el-input>
</el-form-item>
<el-form-item label="最小包装数量">
<el-input v-model="ruleForm.mpq" placeholder="请输入MPQ" :value="ruleForm.mpq"></el-input>
</el-form-item>
<el-form-item label="其他费用" class="updatebox">
<el-input placeholder="" v-model="ruleForm.price_other" placeholder="请输入其他费用" :value="ruleForm.price_other"></el-input>
<div class="selectdw">
<el-select v-model="ruleForm.unit" placeholder="RGB" class="placehoload">
<el-option label="RGB" value="RGB"></el-option>
<el-option label="USD" value="USD"></el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="box">
<el-form-item label="报价品牌" prop="brand_s">
<el-autocomplete :disabled="isModify" :value="ruleForm.brand" v-model="ruleForm.brand" :trigger-on-focus="true" :fetch-suggestions="querySearchAsync" placeholder="请输入品牌" @select="handleSelectBrandName"></el-autocomplete>
</el-form-item>
<el-form-item label="价格" prop="price_origin">
<el-input v-model="ruleForm.price_origin" placeholder="请输入价格" :value="ruleForm.price_origin"></el-input>
</el-form-item>
<el-form-item label="税率">
<el-input disabled v-model="ruleForm.tax_rate" style="width: 100px" :value="ruleForm.tax_rate"></el-input>
</el-form-item>
<el-form-item label="货期" prop="delivery_time_val" class="updatebox">
<el-input placeholder="" v-model="ruleForm.delivery_time_val" :value="ruleForm.delivery_time" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" @keyup.native="keyup(ruleForm.delivery_time_val)"></el-input>
<div class="selectdw">
<el-select v-model="ruleForm.delivery_time_unit" placeholder="天" class="placehoload" @change="unitChange">
<el-option label="天" value="天"></el-option>
<el-option label="周" value="周"></el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="起订量">
<el-input v-model="ruleForm.moq" placeholder="请输入起订量" :value="ruleForm.moq"></el-input>
</el-form-item>
<el-form-item label="报价有效期" prop="expire_time">
<el-date-picker type="date" placeholder="选择报价有效期" v-model="ruleForm.expire_time"></el-date-picker>
</el-form-item>
</div>
</div>
<el-form-item label="备注">
<el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入备注"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</div>
</el-dialog>
<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,
Message,
MessageBox,
Dialog,
Pagination,
Autocomplete,
Loading,
Tooltip
} from 'element-ui'
Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Autocomplete).use(Loading).use(Tooltip);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination);
export default {
name: "InquireDetail",
data() {
return {
active: 0,
total: 0,
limit: 2,
page: 1,
tableData: [],
multipleSelection: [],
quote_info: {},
inquiry_info: {},
quote_list: [],
title: '新增',
isModify: false,
tableData: [],
historyList: [],
ruleForm: {
inquiry_id: '',
inquiry_sn: '',
inquiry_items_id: '',
quote_id: '',
goods_name: '',
quote_number: '',
currency: '1',
batch: '',
mpq: '',
price_other: '',
unit: '',
brand: '',
brand_s: '',
price_origin: '',
tax_rate: '13%',
delivery_time: '',
delivery_time_val: '',
delivery_time_unit: '天',
moq: '',
expire_time: '',
remark: ''
},
rules: {
goods_name: [
{required: true, message: '请输入报价型号', trigger: 'blur'}
],
quote_number: [
{required: true, message: '请输入报价数量', trigger: 'blur'}
],
currency: [
{required: true, message: '请选择币种', trigger: 'blur'}
],
batch: [
{required: true, message: '请输入批次', trigger: 'blur'}
],
brand: [
{required: true, message: '请选择报价品牌'}
],
price_origin: [
{required: true, message: '请输入价格', trigger: 'blur'},
],
delivery_time_val: [
{required: true, message: '请输入货期', trigger: 'blur'}
],
expire_time: [
{required: true, message: '请输入报价有效期', trigger: 'blur'}
]
},
dialogVisible: false,
brandList: [],
textArr: ['匹配库存', '历史报价']
};
},
watch: {},
created() {
this.getData();
},
methods: {
getData() {
this.$http('get', "/api/inquiry/detail", {
inquiry_item_id: this.$route.query.id
}).then(res => {
if (res.err_code === 0) {
this.inquiry_info = res.data.inquiry_info;
this.quote_list = res.data.quote_list;
this.ruleForm.inquiry_sn = res.data.inquiry_info.inquiry_sn;
this.ruleForm.inquiry_id = res.data.inquiry_info.inquiry_id;
this.ruleForm.inquiry_items_id = res.data.inquiry_info.id;
this.getSkulist();
} else {
Message(res.err_msg);
}
});
},
getSkulist() {
this.$http('get', "/api/sku/list", {
brand_id: this.inquiry_info.brand_id,
goods_name: this.inquiry_info.goods_name,
goods_status: 1,
}).then(res => {
if (res.err_code === 0) {
this.tableData = res.data.list || [];
this.total = Number(res.data.count) || 0;
} else {
Message(res.err_msg);
}
})
},
getHistory() {
this.$http('get', "/api/quote/history", {
page: this.page,
limit: this.limit,
goods_name: this.inquiry_info.goods_name,
brand_name: this.inquiry_info.brand_name,
inquiry_items_id: this.$route.query.id
}).then(res => {
if (res.err_code === 0) {
this.total = res.data.total;
this.historyList = res.data.list || [];
} else {
Message(res.err_msg);
}
})
},
handleCurrentChange(val) {
this.page = val;
this.getHistory();
},
onSubmit() {
this.page = 1;
this.getData();
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
tab(index) {
this.active = index;
this.page = 1;
if (index == 1) {
this.getHistory();
} else if (index == 1) {
this.getSkulist();
}
},
keyup(val) {
if (this.ruleForm.delivery_time_unit == '天') {
if (val >= 6) {
this.ruleForm.delivery_time_val = 6;
}
this.ruleForm.delivery_time = this.ruleForm.delivery_time_val;
} else if (this.ruleForm.delivery_time_unit == '周') {
this.ruleForm.delivery_time = this.ruleForm.delivery_time_val * 7;
}
},
unitChange(val) {
if (val == '周') {
this.ruleForm.delivery_time = this.ruleForm.delivery_time_val * 7;
} else {
this.ruleForm.delivery_time = this.ruleForm.delivery_time_val;
}
},
currentChange(val) {
if (val == 1) {
this.ruleForm.tax_rate = '13%';
} else if (val == 2) {
this.ruleForm.tax_rate = '0';
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let loadingInstance = Loading.service({
background: 'rgba(0, 0, 0, 0)'
});
this.$http('post', "/api/quote/save", this.ruleForm).then(res => {
if (res.err_code == 0) {
Message('保存成功');
setTimeout(() => {
window.location.reload();
}, 3000)
} else {
Message(res.err_msg);
}
loadingInstance.close();
}).catch(err => {
loadingInstance.close();
});
} else {
console.log(this.ruleForm.delivery_time);
return false;
}
});
},
querySearchAsync(queryString, cb) {
this.$http('get', "/api/search/getbrand", {
brand_name: this.ruleForm.brand
}).then(res => {
if (res.err_code == 0) {
var arrlist_ = res.data || [];
this.brandList = [];
this.ruleForm.brand = "";
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);
}
})
},
handleSelectBrandName(item) {
let brand_ss = [{brand_id: '', brand_name: ''}];
brand_ss[0].brand_id = item.value;
brand_ss[0].brand_name = item.brand_id;
this.ruleForm.brand_s = JSON.stringify(brand_ss);
},
added() {
this.title = '新增';
this.dialogVisible = true;
this.isModify = false;
this.ruleForm.brand = '';
this.ruleForm.tax_rate = '13%';
this.ruleForm.moq = '';
this.ruleForm.mpq = '';
this.ruleForm.price_other = '';
this.ruleForm.quote_id = '';
this.$refs['ruleForm'].resetFields();
},
modify() {
var arr = [];
if (this.multipleSelection.length == 0) {
Message("请至少选择一条询价信息");
return;
}
if (this.multipleSelection.length > 1) {
Message("请选择一条询价信息");
return;
}
for (var i = 0; i < this.multipleSelection.length; i++) {
arr.push(this.multipleSelection[i]['id'])
}
this.title = '修改';
this.dialogVisible = true;
this.ruleForm.quote_id = arr.join(",");
this.isModify = true;
this.$http('get', "/api/quote/getinfo", {
id: arr.join(",")
}).then(res => {
if (res.err_code === 0) {
this.ruleForm.goods_name = res.data.quote_info.goods_name;
this.ruleForm.quote_number = res.data.quote_info.quote_number;
this.ruleForm.currency = res.data.quote_info.currency.toString();
this.ruleForm.batch = res.data.quote_info.batch;
this.ruleForm.mpq = res.data.quote_info.mpq;
this.ruleForm.price_other = res.data.quote_info.price_other;
this.ruleForm.unit = res.data.quote_info.unit;
this.ruleForm.brand = res.data.quote_info.brand_name;
this.ruleForm.brand_s = res.data.quote_info.brand_name;
this.ruleForm.price_origin = res.data.quote_info.price_origin;
this.ruleForm.tax_rate = res.data.quote_info.tax_rate;
this.ruleForm.delivery_time = res.data.quote_info.delivery_time;
this.ruleForm.delivery_time_val = this.ruleForm.delivery_time;
this.ruleForm.delivery_time_unit = '天'
this.ruleForm.moq = res.data.quote_info.moq;
this.ruleForm.expire_time = res.data.quote_info.expire_time;
this.ruleForm.remark = res.data.quote_info.remark;
let brand_ss = [{brand_id: '', brand_name: ''}];
brand_ss[0].brand_id = res.data.quote_info.brand_id;
brand_ss[0].brand_name = res.data.quote_info.brand_name;
this.ruleForm.brand_s = JSON.stringify(brand_ss);
} else {
Message(res.err_msg);
}
})
},
del() {
var arr = [];
if (this.multipleSelection.length == 0) {
Message("请至少选择一条数据");
return;
}
for (var i = 0; i < this.multipleSelection.length; i++) {
arr.push(this.multipleSelection[i]['supplier_auto_inquiry_id'])
}
MessageBox.confirm('确认到删除当前勾选数据吗？', {
type: 'error'
}).then(() => {
this.$http('post', "/api/inquiry/delete", {
ids: arr.join(",")
}).then(res => {
if (res.err_code === 0) {
Message("删除成功");
this.getData();
} else {
Message(res.err_msg);
}
})
})
}
},
components: {
Menu
}
};
</script>
<style scoped>
@import "../../assets/css/list/inquireDetail.min.css";
</style>