search.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <view class="modal-box">
  3. <u-popup v-model="isShow" :customStyle="customStyle" @close="isShow=false" mode="right" >
  4. <u-form :model="form" ref="uForm" label-width="180">
  5. <u-form-item label="产品编码"><u-input v-model.trim="form.productCode" placeholder="请输入产品编码" input-align="right" /></u-form-item>
  6. <u-form-item label="原厂编码"><u-input v-model.trim="form.productOrigCode" placeholder="请输入原厂编码" input-align="right" /></u-form-item>
  7. <u-form-item label="产品名称"><u-input v-model.trim="form.productName" placeholder="请输入产品名称" input-align="right" /></u-form-item>
  8. <u-form-item label="产品品牌"><u-input v-model="brandName" @click="brandModal=true" disabled placeholder="请选择产品品牌" input-align="right" /></u-form-item>
  9. <u-form-item label="产品分类"><u-input v-model="productTypeNameArr" @click="showTypeModal=true" disabled placeholder="请选择产品分类" input-align="right" /></u-form-item>
  10. </u-form>
  11. <view class="form-footer-btn">
  12. <u-button size="medium" hover-class="none" @click="handleClean">清空</u-button>
  13. <u-button size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  14. </view>
  15. </u-popup>
  16. <!-- 产品品牌 -->
  17. <productBrand :openModal="brandModal" :itemSn="form.productBrandSn" @choose="brandChoose" @clean="brandClean" @close="brandModal=false" />
  18. <!-- 产品分类 -->
  19. <productType :openModal="showTypeModal" :nowData="nowData" @choose="typeChoose" @clean="typeClean" @close="showTypeModal=false" />
  20. </view>
  21. </template>
  22. <script>
  23. import productBrand from '@/pages/common/productBrand.vue'
  24. import productType from '@/pages/common/productType.vue'
  25. import { dealerProductTypeList } from '@/api/dealerProductType'
  26. export default{
  27. components: { productBrand, productType },
  28. props:{
  29. showModal:{
  30. type: Boolean,
  31. default: false
  32. }
  33. },
  34. computed: {
  35. productTypeNameArr: function() {
  36. let str = ''
  37. this.nowData.data.map(item => {
  38. str += item.productTypeName+' / '
  39. })
  40. return str ? str.substr(0, str.length-3) : ''
  41. }
  42. },
  43. data(){
  44. return{
  45. form: {
  46. productCode: '', // 产品编码
  47. productName: '', // 产品名称
  48. productOrigCode: '', // 原厂编码
  49. productBrandSn: undefined, // 产品品牌
  50. productTypeSn1: undefined, // 产品分类1
  51. productTypeSn2: undefined, // 产品分类2
  52. productTypeSn3: undefined, // 产品分类3
  53. },
  54. customBtnStyle: { // 自定义按钮样式
  55. borderColor: this.$config('primaryColor'),
  56. backgroundColor: this.$config('primaryColor'),
  57. color: '#fff'
  58. },
  59. customStyle:{
  60. width:"100%",
  61. padding:"10px",
  62. },
  63. nowData: {
  64. data: [],
  65. indArr: [],
  66. nowInd: 0
  67. },
  68. brandName: '',
  69. isShow:this.showModal,
  70. showTypeModal: false,
  71. brandModal:false
  72. }
  73. },
  74. methods:{
  75. // 表单清空
  76. handleClean(){
  77. this.form.productCode = ''
  78. this.form.productName = ''
  79. this.form.productOrigCode = ''
  80. this.form.productBrandSn = undefined
  81. this.form.productTypeSn1 = undefined
  82. this.form.productTypeSn2 = undefined
  83. this.form.productTypeSn3 = undefined
  84. // this.handleSearch()
  85. },
  86. handleSearch(){
  87. let params = JSON.parse(JSON.stringify(this.form))
  88. console.log(params)
  89. uni.navigateTo({ url: "/pages/sales/productPricing?data="+JSON.stringify(params) })
  90. },
  91. // 选择品牌
  92. brandChoose(data){
  93. this.brandName = data.brandName
  94. this.form.productBrandSn = data.brandSn
  95. },
  96. // 清空品牌
  97. brandClean(){
  98. this.brandName = ''
  99. this.form.productBrandSn = undefined
  100. },
  101. // 选择分类
  102. typeChoose(obj){
  103. this.nowData = {
  104. data: obj.data,
  105. indArr: obj.indArr,
  106. nowInd: obj.nowInd
  107. }
  108. this.form.productTypeSn1 = this.nowData.data[0]&&this.nowData.data[0].productTypeSn ? this.nowData.data[0].productTypeSn : undefined
  109. this.form.productTypeSn2 = this.nowData.data[0]&&this.nowData.data[1].productTypeSn ? this.nowData.data[1].productTypeSn : undefined
  110. this.form.productTypeSn3 = this.nowData.data[0]&&this.nowData.data[2].productTypeSn ? this.nowData.data[2].productTypeSn : undefined
  111. },
  112. // 清空分类
  113. typeClean(){
  114. this.nowData = {
  115. data: [],
  116. indArr: [],
  117. nowInd: 0
  118. }
  119. this.form.productTypeSn1 = undefined
  120. this.form.productTypeSn2 = undefined
  121. this.form.productTypeSn3 = undefined
  122. }
  123. },
  124. watch:{
  125. showModal(nVal,oVal){
  126. this.isShow=nVal
  127. },
  128. isShow (newValue, oldValue) {
  129. if (!newValue) {
  130. this.$emit('close')
  131. }
  132. }
  133. }
  134. }
  135. </script>
  136. <style lang="scss">
  137. .modal-box{
  138. width: 100%;
  139. .u-form-item{
  140. padding: 20upx 10upx;
  141. }
  142. .form-footer-btn{
  143. margin: 60upx 30upx 30upx;
  144. display: flex;
  145. justify-content: space-between;
  146. }
  147. .form-footer-btn uni-button{
  148. width: 40%;
  149. margin: 0 auto;
  150. font-size: 30upx;
  151. }
  152. }
  153. </style>