435 lines
11 KiB
Vue
435 lines
11 KiB
Vue
<!-- 未处理维修开单 / 预约维修开单-->
|
||
<template>
|
||
<view>
|
||
<view style="padding: 24rpx;" v-if="statusType==1">
|
||
<u-form label-width="80" :model="form" ref="uForm" :rules="rules">
|
||
<u-form-item border-bottom label="配件名称" class="forms-item" prop="name">
|
||
<u-input border="none" v-model="form.name" placeholder="请输入配件名称" input-align="right"
|
||
@input="inputName"></u-input>
|
||
</u-form-item>
|
||
<view class="bg-white pb-3 primary-radius">
|
||
<u-form-item border-bottom label="入库类型" class="forms-item">
|
||
<u-input disabled disabledColor="#fff" border="none" v-model="companyName" placeholder="入库类型"
|
||
input-align="right" disable></u-input>
|
||
</u-form-item>
|
||
<view @click="categoryShow = true">
|
||
<u-form-item border-bottom label="配件类目" class="forms-item" prop="cateName">
|
||
<u-input :disabled="categoryShow" disabledColor="#fff" border="none" v-model="form.cateName"
|
||
placeholder="请选择配件类目" input-align="right">
|
||
<template slot="suffix">
|
||
<image style="width: 8rpx;height: 16rpx;" src="@/static/images/icon/arrow-right.png"
|
||
mode=""></image>
|
||
</template>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
<view @click="modelShow = true">
|
||
<u-form-item border-bottom label="适用车系" class="forms-item" prop="modelName">
|
||
<u-input :disabled="modelShow" disabledColor="#fff" border="none" v-model="form.modelName"
|
||
placeholder="请选择适用车系" input-align="right">
|
||
<template slot="suffix">
|
||
<image style="width: 8rpx;height: 16rpx;" src="@/static/images/icon/arrow-right.png"
|
||
mode=""></image>
|
||
</template>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
<u-form-item border-bottom label="配件主图" class="forms-item">
|
||
<view class="image-box" @click="getImage">
|
||
<image v-if="form.image" class="upload-bg" :src="form.image" mode=""></image>
|
||
<image v-else class="upload-bg" src="@/static/images/icon/plus_box.png" mode="">
|
||
</image>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item border-bottom label="配件品牌" class="forms-item" prop="brandName">
|
||
<u-input border="none" v-model="form.brandName" placeholder="请输入配件品牌"
|
||
input-align="right"></u-input>
|
||
</u-form-item>
|
||
<u-form-item border-bottom label="配件规格" class="forms-item" prop="sku">
|
||
<u-input border="none" v-model="form.sku" placeholder="请输入配件规格" input-align="right"></u-input>
|
||
</u-form-item>
|
||
<u-form-item border-bottom label="采购价格" class="forms-item" prop="procurePrice">
|
||
<u-input border="none" type="number" v-model="form.procurePrice" placeholder="请输入采购价格"
|
||
input-align="right"></u-input>
|
||
<view class="price-label">元/个</view>
|
||
</u-form-item>
|
||
<u-form-item border-bottom label="零售价格" class="forms-item" prop="price">
|
||
<u-input border="none" type="number" v-model="form.price" placeholder="请输入零售价格"
|
||
input-align="right"></u-input>
|
||
<view class="price-label">元/个</view>
|
||
</u-form-item>
|
||
<u-form-item border-bottom label="购买数量" class="forms-item" prop="stock">
|
||
<u-input border="none" type="number" v-model="form.stock" placeholder="请输入购买数量"
|
||
input-align="right"></u-input>
|
||
</u-form-item>
|
||
<view @click="merchantShow = true">
|
||
<u-form-item border-bottom label="供应商" @click="openType('typelist')" class="forms-item">
|
||
<u-input :disabled="merchantShow" disabledColor="#fff" border="none"
|
||
v-model="form.supplierName" placeholder="请选择供应商" input-align="right">
|
||
<template slot="suffix">
|
||
<image style="width: 8rpx;height: 16rpx;" src="@/static/images/icon/arrow-right.png"
|
||
mode=""></image>
|
||
</template>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
</view>
|
||
</u-form>
|
||
<view class="bottom-button">
|
||
<u-button shape="circle" :customStyle="{height: '80rpx',fontSize: '24rpx',margin: 0}" color="#13AFA8"
|
||
@click="submitForm">
|
||
提交
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="ok-add">
|
||
<image src="@/static/images/accessory/add_ok.png" mode=""></image>
|
||
<view class="ok-add-title">
|
||
你的维修工单已经预约成功，可在我的工单里面查看进度
|
||
</view>
|
||
<view class="ok-add-accessories f-jc-c">
|
||
<u-button shape="circle" :customStyle="{width:'264rpx',height: '80rpx',fontSize: '34rpx',margin: 0}"
|
||
color="#13AFA8" @click="navigatorFn(1)">
|
||
配件管理
|
||
</u-button>
|
||
</view>
|
||
<view class="ok-add-continue" @click="navigatorFn(2)">继续入库</view>
|
||
</view>
|
||
</view>
|
||
<!-- 车系选择器 -->
|
||
<u-picker :show="modelShow" title="入库类型" :columns="modelColumns" keyName="name" @confirm="modelConfirm"
|
||
@close="modelShow=false" @cancel="modelShow=false" closeOnClickOverlay></u-picker>
|
||
<!-- 类型选择器 -->
|
||
<u-picker :show="categoryShow" title="入库类型" :columns="categoryColumns" keyName="name" @confirm="categoryConfirm"
|
||
@close="categoryShow=false" @cancel="categoryShow=false" closeOnClickOverlay></u-picker>
|
||
<!-- 供应商选择 -->
|
||
<u-picker :show="merchantShow" title="入库类型" :columns="merchantColumns" keyName="name" @confirm="merchantConfirm"
|
||
@close="merchantShow=false" @cancel="merchantShow=false" closeOnClickOverlay></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
modelBrandList
|
||
} from "@/api/system/config.js"
|
||
import {
|
||
categoryList,
|
||
getCategory,
|
||
supplierList
|
||
} from "@/api/accessory/index.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
//车系弹出层
|
||
modelShow: false,
|
||
modelColumns:[],
|
||
//供应商弹出
|
||
merchantShow: false,
|
||
merchantColumns: [],
|
||
//类目弹出层
|
||
categoryShow: false,
|
||
categoryColumns: [],
|
||
statusType: 1,
|
||
accidentImageList: [],
|
||
companyName: '外采',
|
||
form: {
|
||
companyName: '',
|
||
supplierId: '', //供应商ID
|
||
image: ""
|
||
},
|
||
rules: {
|
||
sku: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入品牌规格',
|
||
trigger: ['blur']
|
||
},
|
||
name: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入配件名称',
|
||
trigger: ['blur']
|
||
},
|
||
price: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入零售价格',
|
||
trigger: ['blur']
|
||
},
|
||
procurePrice: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入采购价格',
|
||
trigger: ['blur']
|
||
},
|
||
cateId: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择配件类目',
|
||
trigger: ['blur']
|
||
},
|
||
brandName: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择配件品牌',
|
||
trigger: ['blur']
|
||
},
|
||
stock: {
|
||
type: 'number',
|
||
required: true,
|
||
message: '请输入入库数量',
|
||
trigger: ['blur']
|
||
}
|
||
},
|
||
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.statusType = option.type
|
||
//获取配件类目
|
||
categoryList({
|
||
page: 1,
|
||
limit: 100
|
||
}).then(res => {
|
||
this.categoryColumns = [res.data]
|
||
})
|
||
//供应商列表
|
||
supplierList().then(res => {
|
||
this.merchantColumns = [res.data]
|
||
})
|
||
//车系列表
|
||
modelBrandList().then(res => {
|
||
console.log(res);
|
||
let arr=[]
|
||
res.data.forEach(item=>{
|
||
item.carModelList.forEach(item2=>{
|
||
arr.push(item2)
|
||
})
|
||
})
|
||
this.modelColumns=[arr]
|
||
})
|
||
},
|
||
methods: {
|
||
//配件名称
|
||
inputName(e) {
|
||
if (e) {
|
||
getCategory({
|
||
name: e
|
||
}).then(res => {
|
||
if (res.data) {
|
||
this.form = res.data
|
||
this.categoryColumns[0].forEach(item => {
|
||
if (this.form.cateId == item.id) {
|
||
this.form.cateName = item.name
|
||
}
|
||
})
|
||
this.merchantColumns[0].forEach(item => {
|
||
if (this.form.supplierId == item.id) {
|
||
this.form.supplierName = item.name
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//打开弹出层
|
||
openType(type) {
|
||
if (type == '') {
|
||
this.categoryShow = true
|
||
}
|
||
},
|
||
//确认车系
|
||
modelConfirm(e){
|
||
this.modelShow = false
|
||
this.form.modelId = e.value[0].id
|
||
this.form.modelName = e.value[0].name
|
||
},
|
||
//确认选择类目
|
||
categoryConfirm(e) {
|
||
this.categoryShow = false
|
||
this.form.cateId = e.value[0].id
|
||
this.form.cateName = e.value[0].name
|
||
},
|
||
//确认选择供应商
|
||
merchantConfirm(e) {
|
||
this.merchantShow = false
|
||
this.form.supplierId = e.value[0].id
|
||
this.form.supplierName = e.value[0].name
|
||
},
|
||
//跳
|
||
navigatorFn(type) {
|
||
uni.redirectTo({
|
||
url: type == 1 ? '/pages/repair/accessory/access_message/access_message' :
|
||
'/pages/repair/accessory/add_warehouse/add_warehouse'
|
||
})
|
||
},
|
||
//提交
|
||
submitForm() {
|
||
// this.statusType = 2
|
||
this.$refs.uForm.validate().then(res => {
|
||
uni.$u.toast('校验通过')
|
||
uni.navigateBack()
|
||
let obj = {
|
||
type: 1,
|
||
value: this.form
|
||
}
|
||
this.$store.commit('SET_MATERIALS', obj)
|
||
}).catch(errors => {
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
},
|
||
//传图片
|
||
getImage() {
|
||
this.$util.uploadImageOne({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
dir: 'lxkimage/public/product/'
|
||
}, null, res => {
|
||
this.form.image = res.data
|
||
// this.accidentImageList.push(res.data)
|
||
// if (this.accidentImageList.length == 1) this.form.accidentImage = res.data
|
||
// else this.form.accidentImage = this.accidentImageList.join(',')
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
DelPic(index) {
|
||
this.accidentImageList.splice(index, 1)
|
||
if (this.accidentImageList.length == 1) this.form.accidentImage = res.data
|
||
else if (this.accidentImageList.length) this.form.accidentImage = this.accidentImageList.join(',')
|
||
else this.form.accidentImage = ''
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.bottom-button {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
padding: 18rpx 24rpx 24rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.navbar {
|
||
width: 750rpx;
|
||
background-color: #fff;
|
||
|
||
.navbar-content {
|
||
padding: 8rpx 24rpx;
|
||
|
||
.back-icon {
|
||
margin-right: 24rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
image {
|
||
width: 18rpx;
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
|
||
.navbar-btn {
|
||
margin-left: 24rpx;
|
||
width: 144rpx;
|
||
height: 56rpx;
|
||
|
||
image {
|
||
margin-right: 8rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.forms-item {
|
||
padding: 12rpx 32rpx;
|
||
background-color: #fff;
|
||
border-radius: 8rpx;
|
||
|
||
.right-icon {
|
||
width: 8rpx;
|
||
height: 16rpx;
|
||
}
|
||
}
|
||
|
||
.forms-title {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
color: #222222;
|
||
line-height: 92rpx;
|
||
}
|
||
|
||
.btn-bottom {
|
||
margin-top: 188rpx;
|
||
padding: 0 24rpx;
|
||
|
||
.btn {
|
||
height: 96rpx;
|
||
}
|
||
}
|
||
|
||
.form-item {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.image-box {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: end;
|
||
|
||
.upload-bg {
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
}
|
||
}
|
||
|
||
.price-label {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.ok-add {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
margin: 0rpx auto;
|
||
text-align: center;
|
||
padding-top: 136rpx;
|
||
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
|
||
|
||
.ok-add-title {
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #555555;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.ok-add-accessories {
|
||
margin: 96rpx 0 32rpx 0;
|
||
}
|
||
|
||
.ok-add-continue {
|
||
font-size: 34rpx;
|
||
font-weight: 400;
|
||
color: #13AFA8;
|
||
}
|
||
|
||
image {
|
||
width: 148rpx;
|
||
height: 148rpx;
|
||
}
|
||
}
|
||
</style> |