<template>
|
<view class="main">
|
<u--form labelPosition="top"
|
labelWidth="20%"
|
:borderBottom="false"
|
:model="dataForm"
|
ref="uForm">
|
<u-form-item label="一级品类"
|
prop="firstClass"
|
:borderBottom="false">
|
<u-cell-group>
|
<u-cell :title="dataForm.firstClass"
|
value="请选择"
|
@click="firstClassSelect">
|
<u-icon name="arrow-right"
|
slot="right-icon"
|
size="30"></u-icon></u-cell>
|
</u-cell-group>
|
</u-form-item>
|
<u-form-item label="二级品名"
|
prop="secondClass"
|
:borderBottom="false">
|
<u-cell-group>
|
<u-cell :title="dataForm.secondClass"
|
value="请选择"
|
@click="secondClassSelect">
|
<u-icon name="arrow-right"
|
slot="right-icon"
|
size="30"></u-icon></u-cell>
|
</u-cell-group>
|
</u-form-item>
|
<u-form-item label="规格"
|
prop="specifications"
|
borderBottom>
|
<u-input v-model="dataForm.specifications"
|
placeholder="请输入规格"
|
border="bottom"
|
@input="$u.debounce(specInputHandle, 500)"></u-input>
|
</u-form-item>
|
</u--form>
|
<Transition name="slide-fade">
|
<view class="spec-main"
|
v-show="specList.length!==0&&haveSelectd">
|
<view class="spec-main_content"
|
v-for="item in specList"
|
:key="item.id">
|
<view class="spec-main_item"
|
@click.stop="specSelectHandle(item.spec)">
|
{{item.spec}}
|
</view>
|
</view>
|
</view>
|
</Transition>
|
<view style="margin-top: 20rpx;">
|
<u-button type="primary"
|
shape="circle"
|
text="提交"
|
@click.stop="formHandle"></u-button>
|
</view>
|
<!-- 一级 -->
|
<u-action-sheet :actions="firstClassActionsList"
|
:show="firstClassShow"
|
cancelText='取消'
|
:closeOnClickOverlay='true'
|
@close='firstClassClose'
|
@select="firstClassSelectClick"></u-action-sheet>
|
<!-- 二级 -->
|
<u-action-sheet :actions="secondClassActionsList"
|
:show="secondClassShow"
|
cancelText='取消'
|
:closeOnClickOverlay='true'
|
@close='secondClassClose'
|
@select="secondClassSelectClick"></u-action-sheet>
|
</view>
|
</template>
|
|
<script>
|
import { mapState, mapMutations } from "vuex"
|
export default {
|
data() {
|
return {
|
dataForm: {
|
firstClass: "",
|
secondClass: "",
|
specifications: ""
|
},
|
index: '',
|
takeCoalId: "",
|
// 一级品类操作菜单
|
firstClassActionsList: [],
|
firstClassShow: false,
|
// 二级品类操作菜单
|
secondClassActionsList: [],
|
secondClassShow: false,
|
// 规格选择
|
specList: [],
|
haveSelectd: true,
|
// 判断是修改品名与规格还是不合格品名
|
productName: false,
|
unqualified: false,
|
//
|
showWeighCopyStorge: []
|
}
|
},
|
computed: {
|
...mapState(["globalShowWeigh"]),
|
},
|
onLoad(params) {
|
this.index = params.index || ""
|
this.takeCoalId = params.takeCoalId || ''
|
this.getFirstCategoryName()
|
this.productName = params.productName === "true" || false
|
this.unqualified = params.unqualified === "true" || false
|
this.showWeighCopyStorge = JSON.parse(JSON.stringify(uni.getStorageSync('showWeighCopyStorge')))
|
},
|
methods: {
|
...mapMutations(['changeglobalShowWeigh']),
|
getFirstCategoryName() {
|
uni.showLoading({
|
title: "加载中"
|
})
|
this.$reqGet("getFirstCategoryName").then(res => {
|
if (res.code === 0) {
|
uni.hideLoading()
|
this.firstClassActionsList = res.data.map(v => {
|
return {
|
...v,
|
name: v.firstCategoryName
|
}
|
})
|
this.dataForm.firstClass = this.firstClassActionsList[0].firstCategoryName
|
} else {
|
uni.hideLoading()
|
this.$u.toast('加载失败')
|
}
|
})
|
},
|
//一级品类菜单
|
firstClassSelect() {
|
this.firstClassShow = true
|
},
|
firstClassClose() {
|
this.firstClassShow = false
|
},
|
firstClassSelectClick(val) {
|
this.dataForm.firstClass = val.name
|
},
|
// 二级品类选择
|
getSecondCategoryName() {
|
uni.showLoading({
|
title: "加载中"
|
})
|
this.$reqGet('getSecondCategoryName', { firstCategoryName: this.dataForm.firstClass }).then(
|
res => {
|
if (res.code === 0) {
|
uni.hideLoading()
|
this.secondClassActionsList = res.data.map(v => {
|
return {
|
...v,
|
name: v.secondCategoryName
|
}
|
})
|
} else {
|
uni.hideLoading()
|
this.$u.toast('加载失败')
|
}
|
})
|
},
|
//二级品类菜单
|
async secondClassSelect() {
|
await this.getSecondCategoryName()
|
this.secondClassShow = true
|
},
|
secondClassClose() {
|
this.secondClassShow = false
|
},
|
secondClassSelectClick(val) {
|
this.dataForm.secondClass = val.name
|
},
|
// 选择规格
|
specInputHandle() {
|
if (!this.dataForm.secondClass) return this.$u.toast('请先选择上方品名')
|
this.$reqGet('getSpec', {
|
firstCategoryName: this.dataForm.firstClass,
|
secondCategoryName: this.dataForm
|
.secondClass,
|
specText: this.dataForm.specifications
|
}).then(res => {
|
if (res.code === 0) {
|
this.specList = res.data
|
} else {
|
uni.hideLoading()
|
this.$u.toast('加载失败')
|
}
|
})
|
},
|
specSelectHandle(val) {
|
this.dataForm.specifications = val
|
this.haveSelectd = false
|
},
|
formHandle() {
|
this.showWeighCopyStorge = this.globalShowWeigh
|
if (this.productName) {
|
this.showWeighCopyStorge[this.index].modifyProductName = this.dataForm.secondClass + '/' + this
|
.dataForm.specifications
|
this.showWeighCopyStorge[this.index].breed = this.dataForm.secondClass
|
this.showWeighCopyStorge[this.index].spec = this.dataForm.specifications
|
}
|
if (this.unqualified) {
|
this.showWeighCopyStorge[this.index].unqualifiedBreed = this.dataForm.secondClass + '/' + this.dataForm
|
.specifications
|
this.showWeighCopyStorge[this.index].breed = this.dataForm.secondClass
|
this.showWeighCopyStorge[this.index].spec = this.dataForm.specifications
|
}
|
this.changeglobalShowWeigh(this.showWeighCopyStorge)
|
uni.setStorageSync('showWeighCopyStorgeOther', this.globalShowWeigh)
|
uni.redirectTo({
|
url: `/pages/driver-page/driver-index/bill-of-lading-details/weighDetail/weighDetail?dataForm=${JSON.stringify(this.dataForm)}&orderPlanId=${this.takeCoalId}&index=${this.index}&havedSubmit=${true}`
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss"
|
scoped>
|
.main {
|
width: 94%;
|
margin: 10px;
|
position: relative;
|
}
|
|
.slide-fade-enter-active {
|
transition: all 0.3s ease-out;
|
}
|
|
.spec-main {
|
width: 96%;
|
margin: auto;
|
height: 600rpx;
|
overflow: scroll;
|
background: #f0f0f0;
|
box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
|
border-radius: 20rpx;
|
position: relative;
|
top: vww(5);
|
|
&_content {
|
width: 90%;
|
margin: auto;
|
padding-top: vww(10);
|
|
.spec-main_item {
|
padding: vww(5);
|
color: #515151;
|
border-bottom: 1px solid #e3e3e3;
|
font-size: 40rpx;
|
}
|
}
|
}
|
</style>
|
