search.vue 5.2 KB

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