<template> <view class="modal-box"> <u-popup v-model="isShow" @close="isShow=false" mode="right" length="85%" > <u-form :model="form" ref="uForm" label-width="200" class="form-content"> <u-form-item label="产品编码"><u-input v-model.trim="form.code" placeholder="请输入产品编码" input-align="right" /></u-form-item> <u-form-item label="原厂编码"><u-input v-model.trim="form.origCode" placeholder="请输入原厂编码" input-align="right" /></u-form-item> <u-form-item label="产品名称"><u-input v-model.trim="form.name" placeholder="请输入产品名称" input-align="right" /></u-form-item> <u-form-item label="产品品牌"><u-input v-model="brandName" @click="brandModal=true" disabled placeholder="请选择产品品牌" input-align="right" /></u-form-item> <u-form-item label="产品分类"><u-input v-model="productTypeNameArr" @click="showTypeModal=true" disabled placeholder="请选择产品分类" input-align="right" /></u-form-item> <u-form-item label="产品状态" class="form-item"> <u-input v-model="onlineFalgName" @click="onlineFalgModal=true" disabled placeholder="请选择产品状态" input-align="right" /> <u-icon v-show="onlineFalgName.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="clearOnlineFlag"></u-icon> </u-form-item> <u-form-item label="显示未入库产品"> <view class="flex justify_end" style="width: 100%;"><u-switch v-model="form.putStockFlag"></u-switch></view> </u-form-item> </u-form> <view class="form-footer-btn"> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button> </view> </u-popup> <!-- 产品品牌 --> <productBrand :openModal="brandModal" :itemSn="form.productBrandSn" @choose="brandChoose" @clean="brandClean" @close="brandModal=false" /> <!-- 产品分类 --> <productType :openModal="showTypeModal" :nowData="nowData" @choose="typeChoose" @clean="typeClean" @close="showTypeModal=false" /> <!-- 选择产品状态 --> <u-picker v-model="onlineFalgModal" @confirm="onlineFalgChange" :range="onlineFlagList" range-key="dispName" mode="selector"></u-picker> </view> </template> <script> import productBrand from '@/pages/common/productBrand.vue' import productType from '@/pages/common/productType.vue' import { dealerProductTypeList } from '@/api/dealerProductType' export default{ components: { productBrand, productType }, props:{ showModal:{ type: Boolean, default: false } }, computed: { productTypeNameArr: function() { let str = '' this.nowData.data.map(item => { str += item.productTypeName+' / ' }) return str ? str.substr(0, str.length-3) : '' } }, data(){ return{ form: { code: '', // 产品编码 name: '', // 产品名称 origCode: '', // 原厂编码 productBrandSn: undefined, // 产品品牌 productTypeSn1: undefined, // 产品分类1 productTypeSn2: undefined, // 产品分类2 productTypeSn3: undefined, // 产品分类3 onlineFalg: undefined, putStockFlag: false }, customBtnStyle: { // 自定义按钮样式 borderColor: this.$config('primaryColor'), backgroundColor: this.$config('primaryColor'), color: '#fff' }, nowData: { data: [], indArr: [], nowInd: 0 }, brandName: '', isShow:this.showModal, showTypeModal: false, brandModal:false, onlineFalgModal: false, onlineFalgName: '', onlineFlagList: [] } }, methods:{ // 表单清空 handleClean(){ this.form.code = '' this.form.name = '' this.form.origCode = '' this.form.putStockFlag = false this.brandClean() this.typeClean() this.clearOnlineFlag() setTimeout(()=>{ this.handleSearch() },300) }, handleSearch(){ let data = JSON.parse(JSON.stringify(this.form)) data.putStockFlag = data.putStockFlag ? 1 : 0 console.log(data) this.$emit('refresh', data) this.isShow=false }, // 选择品牌 brandChoose(data){ this.brandName = data.brandName this.form.productBrandSn = data.brandSn }, // 清空品牌 brandClean(){ this.brandName = '' this.form.productBrandSn = undefined }, // 选择分类 typeChoose(obj){ this.nowData = { data: obj.data, indArr: obj.indArr, nowInd: obj.nowInd } this.form.productTypeSn1 = this.nowData.data[0]&&this.nowData.data[0].productTypeSn ? this.nowData.data[0].productTypeSn : undefined this.form.productTypeSn2 = this.nowData.data[0]&&this.nowData.data[1].productTypeSn ? this.nowData.data[1].productTypeSn : undefined this.form.productTypeSn3 = this.nowData.data[0]&&this.nowData.data[2].productTypeSn ? this.nowData.data[2].productTypeSn : undefined }, // 清空分类 typeClean(){ this.nowData = { data: [], indArr: [], nowInd: 0 } this.form.productTypeSn1 = undefined this.form.productTypeSn2 = undefined this.form.productTypeSn3 = undefined }, clearOnlineFlag(){ this.onlineFalgName = '' this.form.onlineFalg = undefined }, // 产品状态 change onlineFalgChange(ind){ this.form.onlineFalg = this.onlineFlagList[ind].code || undefined this.onlineFalgName = this.onlineFlagList[ind].dispName || '' }, getStateList(){ this.onlineFlagList = this.$store.state.vuex_onlineFlagList if(this.form.onlineFalg){ const b = this.onlineFlagList.find(item => item.code == this.form.onlineFalg) this.onlineFalgName = b ? b.dispName : '' } } }, watch:{ // 父页面传过来的弹框状态 showModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') }else{ this.getStateList() } } } } </script> <style lang="scss"> .modal-box{ width: 100%; .search-title { text-align: center; padding: 30upx 22upx; color: #333; border-bottom: 1px solid #eee; } .form-content{ display: block; padding: 0 20upx; box-sizing: content-box; } .u-form-item{ padding: 20upx 10upx; } .form-footer-btn{ margin: 60upx 30upx 30upx; display: flex; justify-content: space-between; } .form-footer-btn { display: flex; padding: 20upx; margin-top: 200upx; .handle-btn { font-size: 28upx; margin: 0 30upx; width: 100%; flex: 1; } } } </style>