416 lines
16 KiB
Vue
416 lines
16 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-form label-width="100px">
|
||
|
|
<el-row style="letter-spacing: 3px;" :gutter="5">
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-card id="scroll" class="box-card scrollable" :style="{'overflow': 'auto','max-height': scrollableHeight,'height': scrollableHeight}">
|
||
|
|
<el-form-item label="目录:">
|
||
|
|
<el-button class="block" size="mini" :type="selectedModelTag==item.name_0?'warning':'primary'" plain @click="selModelTag(item)" v-for="(item, index) in modelList" :key="index">{{item.name_0}}</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="备注:" v-if="showRemarkList">
|
||
|
|
<div v-for="(item, index) in remarkList" :key="index" style="line-height: 25px">
|
||
|
|
{{index+1}}、{{item.remark_0}}
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="型号:" v-if="showXinghList">
|
||
|
|
<el-button class="block" size="mini" :type="selectedXinghTag==item.name_0?'warning':'primary'" plain @click="selXinghTag(item)" v-for="(item, index) in xinghList" :key="index">{{item.name_0}}</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="子类:" v-if="showZlList">
|
||
|
|
<el-button class="block" size="mini" :type="selectedZlTag==item.name_0?'warning':'primary'" plain @click="selZlTag(item)" v-for="(item, index) in zlList" :key="index">{{item.name_0}}</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="衍生型号:" v-if="showYsxhList">
|
||
|
|
<el-button class="block" size="mini" :type="selectedYsxhTag==item.name_0?'warning':'primary'" plain @click="selYsxhTag(item)" v-for="(item, index) in ysxhList" :key="index">{{item.name_0}}</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="截面:" v-if="showJmList">
|
||
|
|
<el-button class="block" size="mini" :type="selectedJmTag==item.section?'warning':'primary'" plain @click="selJmTag(item)" v-for="(item, index) in jmList" :key="index">{{item.section}}</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-table width="100%" v-loading="searchResultLoading" ref="searchResultTable" :data="searchResultPagedData" @row-dblclick="handleRowDblclick">
|
||
|
|
<el-table-column label="uid" align="center" prop="uid_0" v-if="false"/>
|
||
|
|
<el-table-column label="型号" align="center" prop="name_0" width="280"/>
|
||
|
|
<el-table-column label="电压" align="center" prop="voltage" width="120"/>
|
||
|
|
<el-table-column label="红本价(元)" align="center" prop="price" width="120"/>
|
||
|
|
<el-table-column label="单位" align="center" prop="stu"/>
|
||
|
|
</el-table>
|
||
|
|
<pagination
|
||
|
|
v-show="searchResultTotal>0"
|
||
|
|
:total="searchResultTotal"
|
||
|
|
:page.sync="searchResultCurrentPage"
|
||
|
|
:limit.sync="searchResultPageSize"
|
||
|
|
@size-change="handleSearchResultSizeChange"
|
||
|
|
@current-change="handleSearchResultCurrentChange"
|
||
|
|
/>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-card id="scroll" class="box-card scrollable" :style="{'overflow': 'auto','max-height': scrollableHeight,'height': scrollableHeight}">
|
||
|
|
<span>批量调折扣率:
|
||
|
|
<el-input-number v-model="perc" size="small" controls-position="right" :min="0" :max="6" :step="0.5"></el-input-number>%
|
||
|
|
<el-input-number v-model="perc2" size="small" controls-position="right" :min="0" :max="6" :step="0.5"></el-input-number>%
|
||
|
|
</span>
|
||
|
|
<el-table width="100%;" style="margin-top:5px" ref="selectedResultTable" :data="selectedResultData">
|
||
|
|
<el-table-column label="操作" align="center" width="60" class-name="small-padding fixed-width">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text" @click="handleDeleteClick(scope.$index)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="uid" align="center" prop="uid_0" v-if="false"/>
|
||
|
|
<el-table-column label="型号" align="center" prop="name_0" width="180"/>
|
||
|
|
<el-table-column label="电压" align="center" prop="voltage" width="120"/>
|
||
|
|
<el-table-column label="红本价(元)" align="center" prop="price" width="100"/>
|
||
|
|
<el-table-column label="单位" align="center" prop="stu" width="80"/>
|
||
|
|
<el-table-column label="调价比例" align="center" prop="percent" width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input v-model="scope.row.percent"/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="单价" align="center" prop="setPrice" width="100"/>
|
||
|
|
<el-table-column label="数量调整" align="center" prop="count" width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input v-model="scope.row.count"/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="总价" align="center" prop="allPrice" width="100"/>
|
||
|
|
</el-table>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style>
|
||
|
|
.block {
|
||
|
|
margin: 5px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
/*卡片内容滚动条设置*/
|
||
|
|
.scrollable::-webkit-scrollbar {
|
||
|
|
display: none; /* 对于Webkit浏览器 */
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
import { productList,productRemarkList,productXinghList,judgeparent,productZlList,productYsxhListCheck,productYsxhList,productJmListCheck,productJmList,searchData} from "@/api/redBook/redBook";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "productSelect",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
//内容高度
|
||
|
|
scrollableHeight:null,
|
||
|
|
//选中的目录tag
|
||
|
|
selectedModelTag:"",
|
||
|
|
selectedModelUid:"",
|
||
|
|
//选中的型号tag
|
||
|
|
selectedXinghTag:"",
|
||
|
|
selectedXinghUid:"",
|
||
|
|
//选中的子类tag
|
||
|
|
selectedZlTag:"",
|
||
|
|
selectedZlUid:"",
|
||
|
|
//选中的衍生型号tag
|
||
|
|
selectedYsxhTag:"",
|
||
|
|
selectedYsxhUid:"",
|
||
|
|
//选中的截面tag
|
||
|
|
selectedJmTag:"",
|
||
|
|
|
||
|
|
//目录
|
||
|
|
modelList: [],
|
||
|
|
//备注信息
|
||
|
|
showRemarkList: false,
|
||
|
|
remarkList: [],
|
||
|
|
//型号
|
||
|
|
showXinghList: false,
|
||
|
|
xinghList: [],
|
||
|
|
//子类
|
||
|
|
showZlList: false,
|
||
|
|
ZlList: [],
|
||
|
|
//衍生型号
|
||
|
|
showYsxhList: false,
|
||
|
|
ysxhList: [],
|
||
|
|
//截面
|
||
|
|
showJmList: false,
|
||
|
|
jmList: [],
|
||
|
|
|
||
|
|
/**==============查询结果========================= */
|
||
|
|
// 遮罩层
|
||
|
|
searchResultLoading: false,
|
||
|
|
// 查询结果数据
|
||
|
|
searchResultTotal: 0,
|
||
|
|
searchResultCurrentPage: 1,
|
||
|
|
searchResultPageSize: 10,
|
||
|
|
searchResultData: [],
|
||
|
|
|
||
|
|
//已选择的数据
|
||
|
|
selectedResultData: [],
|
||
|
|
|
||
|
|
//折扣率 初始值
|
||
|
|
perc: 0,
|
||
|
|
perc2: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.productList();
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
/*设置内容高度*/
|
||
|
|
this.scrollableHeight = (window.innerHeight - 130) + 'px';
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//目录选择
|
||
|
|
selModelTag(item){
|
||
|
|
this.showRemarkList = false,
|
||
|
|
this.remarkList = [],
|
||
|
|
|
||
|
|
this.selectedXinghTag = '';
|
||
|
|
this.showXinghList = false,
|
||
|
|
this.xinghList = [],
|
||
|
|
|
||
|
|
this.selectedZlTag = '';
|
||
|
|
this.showZlList = false,
|
||
|
|
this.ZlList = [],
|
||
|
|
|
||
|
|
this.selectedYsxhTag = '';
|
||
|
|
this.showYsxhList = false,
|
||
|
|
this.ysxhList = [],
|
||
|
|
|
||
|
|
this.selectedJmTag = '';
|
||
|
|
this.showJmList = false,
|
||
|
|
this.jmList = [],
|
||
|
|
|
||
|
|
this.searchResultCurrentPage = 1,
|
||
|
|
this.searchResultPageSize = 10,
|
||
|
|
this.searchResultData = [],
|
||
|
|
|
||
|
|
this.selectedModelTag = item.name_0;
|
||
|
|
console.log(this.selectedModelTag)
|
||
|
|
//显示备注信息
|
||
|
|
this.productRemarkList(item.uid_0)
|
||
|
|
//显示型号
|
||
|
|
this.productXinghList(item.uid_0)
|
||
|
|
},
|
||
|
|
//获取目录
|
||
|
|
productList(){
|
||
|
|
productList().then(response => {
|
||
|
|
console.log(response)
|
||
|
|
this.modelList = response;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取备注信息
|
||
|
|
productRemarkList(sid){
|
||
|
|
this.params = {uid_0:sid}
|
||
|
|
productRemarkList(this.params).then(response => {
|
||
|
|
this.remarkList = response;
|
||
|
|
this.showRemarkList = this.remarkList.length>0?true:false
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取型号
|
||
|
|
productXinghList(sid){
|
||
|
|
this.params = {uid_0:sid}
|
||
|
|
productXinghList(this.params).then(response => {
|
||
|
|
this.xinghList = response;
|
||
|
|
this.showXinghList = this.xinghList.length>0?true:false
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//型号选择
|
||
|
|
selXinghTag(item){
|
||
|
|
this.selectedZlTag = '';
|
||
|
|
this.showZlList = false,
|
||
|
|
this.ZlList = [],
|
||
|
|
|
||
|
|
this.selectedYsxhTag = '';
|
||
|
|
this.showYsxhList = false,
|
||
|
|
this.ysxhList = [],
|
||
|
|
|
||
|
|
this.selectedJmTag = '';
|
||
|
|
this.showJmList = false,
|
||
|
|
this.jmList = [],
|
||
|
|
|
||
|
|
this.searchResultCurrentPage = 1,
|
||
|
|
this.searchResultPageSize = 10,
|
||
|
|
this.searchResultData = [],
|
||
|
|
|
||
|
|
this.selectedXinghTag = item.name_0;
|
||
|
|
console.log(this.selectedXinghTag)
|
||
|
|
//判断是否为父节点，如果有说明下面还有子类显示，如果没有则直接显示衍生型号
|
||
|
|
this.judgeparent(item)
|
||
|
|
},
|
||
|
|
//判断是否为父节点，如果有说明下面还有子类显示，如果没有则直接显示衍生型号
|
||
|
|
judgeparent(item){
|
||
|
|
this.params = {uid_0:item.uid_0}
|
||
|
|
judgeparent(this.params).then(response => {
|
||
|
|
if(response){//存在子类
|
||
|
|
this.productZlList(item.uid_0)
|
||
|
|
}else{//判断是否存在衍生型号
|
||
|
|
this.productYsxhListCheck(item.uid_0,item.name_0)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取子类
|
||
|
|
productZlList(sid){
|
||
|
|
this.params = {uid_0:sid}
|
||
|
|
productZlList(this.params).then(response => {
|
||
|
|
this.zlList = response;
|
||
|
|
this.showZlList = this.zlList.length>0?true:false
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//判断是否存在衍生型号
|
||
|
|
productYsxhListCheck(sid,name){
|
||
|
|
this.params = {uid_0:sid}
|
||
|
|
productYsxhListCheck(this.params).then(response => {
|
||
|
|
if(response){//存在衍生型号
|
||
|
|
this.productYsxhList(sid,name)
|
||
|
|
}else{
|
||
|
|
this.selectedYsxhUid = sid;
|
||
|
|
this.selectedYsxhTag = name;
|
||
|
|
//检查是否存在截面
|
||
|
|
this.productJmListCheck(sid,name)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取衍生型号
|
||
|
|
productYsxhList(sid,name){
|
||
|
|
this.params = {uid_0:sid,name_0:name}
|
||
|
|
productYsxhList(this.params).then(response => {
|
||
|
|
this.ysxhList = response;
|
||
|
|
this.showYsxhList = this.ysxhList.length>0?true:false
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
//子类选择
|
||
|
|
selZlTag(item){
|
||
|
|
this.selectedYsxhTag = '';
|
||
|
|
this.showYsxhList = false,
|
||
|
|
this.ysxhList = [],
|
||
|
|
|
||
|
|
this.selectedJmTag = '';
|
||
|
|
this.showJmList = false,
|
||
|
|
this.jmList = [],
|
||
|
|
|
||
|
|
this.searchResultCurrentPage = 1,
|
||
|
|
this.searchResultPageSize = 10,
|
||
|
|
this.searchResultData = [],
|
||
|
|
|
||
|
|
this.selectedZlTag = item.name_0;
|
||
|
|
console.log(this.selectedZlTag)
|
||
|
|
|
||
|
|
this.productYsxhListCheck(item.uid_0,item.name_0)
|
||
|
|
},
|
||
|
|
|
||
|
|
//衍生型号选择
|
||
|
|
selYsxhTag(item){
|
||
|
|
this.selectedJmTag = '';
|
||
|
|
this.selectedYsxhUid = item.uid_0;
|
||
|
|
this.showJmList = false,
|
||
|
|
this.jmList = [],
|
||
|
|
|
||
|
|
this.searchResultCurrentPage = 1,
|
||
|
|
this.searchResultPageSize = 10,
|
||
|
|
this.searchResultData = [],
|
||
|
|
|
||
|
|
this.selectedYsxhTag = item.name_0;
|
||
|
|
console.log(this.selectedYsxhTag)
|
||
|
|
this.productJmListCheck(item.uid_0,item.name_0)
|
||
|
|
},
|
||
|
|
//判断是否存在截面
|
||
|
|
productJmListCheck(sid,name){
|
||
|
|
this.params = {uid_0:sid}
|
||
|
|
productJmListCheck(this.params).then(response => {
|
||
|
|
if(response){//存在截面
|
||
|
|
this.productJmList(sid,name)
|
||
|
|
}else{
|
||
|
|
//输出结果
|
||
|
|
console.log("结果表格输出")
|
||
|
|
//TODO 直接输出结果表格
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取截面
|
||
|
|
productJmList(sid,name){
|
||
|
|
this.params = {uid_0:sid,name_0:name}
|
||
|
|
productJmList(this.params).then(response => {
|
||
|
|
this.jmList = response;
|
||
|
|
this.showJmList = this.jmList.length>0?true:false
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//截面选择
|
||
|
|
selJmTag(item){
|
||
|
|
this.selectedJmTag = item.section;
|
||
|
|
console.log(this.selectedYsxhTag)
|
||
|
|
console.log(this.selectedYsxhUid)
|
||
|
|
|
||
|
|
this.searchResultCurrentPage = 1,
|
||
|
|
this.searchResultPageSize = 10,
|
||
|
|
this.searchResultData = [],
|
||
|
|
|
||
|
|
this.searchResultLoading = true;
|
||
|
|
this.searchData(this.selectedYsxhUid,item.section)
|
||
|
|
},
|
||
|
|
|
||
|
|
//查询数据
|
||
|
|
searchData(sid,section){
|
||
|
|
this.params = {uid_0:sid,section:section,name_0:this.selectedYsxhTag}
|
||
|
|
searchData(this.params).then(response => {
|
||
|
|
console.log(response)
|
||
|
|
this.searchResultData = response;
|
||
|
|
this.searchResultTotal = this.searchResultData.length;
|
||
|
|
this.searchResultCurrentPage = 1;
|
||
|
|
this.searchResultLoading = false;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//双击事件
|
||
|
|
handleRowDblclick(row, event, column){
|
||
|
|
const price = row.price;
|
||
|
|
const percent = '1';
|
||
|
|
const count = '1';
|
||
|
|
row.percent = percent;
|
||
|
|
row.setPrice = price;
|
||
|
|
row.count = count;
|
||
|
|
const allPrice = this.toDecimal(count*price);
|
||
|
|
row.allPrice = allPrice;
|
||
|
|
this.selectedResultData.push(row)
|
||
|
|
},
|
||
|
|
toDecimal(x){
|
||
|
|
var f = parseFloat(x);
|
||
|
|
if (isNaN(f)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
f = Math.round(x*100)/100;
|
||
|
|
return f;
|
||
|
|
},
|
||
|
|
|
||
|
|
//删除已选数据
|
||
|
|
handleDeleteClick(index){
|
||
|
|
this.selectedResultData.splice(index, 1)
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 切换每页显示条数 */
|
||
|
|
handleSearchResultSizeChange(val) {
|
||
|
|
this.bankCodePageSize = val;
|
||
|
|
this.bankCodeCurrentPage = 1;
|
||
|
|
},
|
||
|
|
/** 页码选择 */
|
||
|
|
handleSearchResultCurrentChange(val) {
|
||
|
|
this.bankCodeCurrentPage = val;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
updated(){
|
||
|
|
// 监听数据变化时，滚动条保持在底部
|
||
|
|
let div = document.getElementById("scroll")
|
||
|
|
div.scrollTop = div.scrollHeight
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 计算出当前页的查询结果数据列表
|
||
|
|
searchResultPagedData() {
|
||
|
|
console.log(this.searchResultData)
|
||
|
|
const startIndex = (this.searchResultCurrentPage - 1) * this.searchResultPageSize;
|
||
|
|
const endIndex = startIndex + this.searchResultPageSize;
|
||
|
|
return this.searchResultData.slice(startIndex, endIndex);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|