search.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <view class="modal-box">
  3. <u-popup v-model="isShow" @close="isShow=false" mode="right" length="85%" >
  4. <u-form :model="form" ref="uForm" label-width="180" class="form-content">
  5. <u-form-item label="产品编码"><u-input v-model.trim="form.code" placeholder="请输入产品编码" input-align="right" /></u-form-item>
  6. <u-form-item label="原厂编码"><u-input v-model.trim="form.origCode" placeholder="请输入原厂编码" input-align="right" /></u-form-item>
  7. <u-form-item label="产品名称"><u-input v-model.trim="form.name" 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 class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
  13. <u-button class="handle-btn" shape="circle" 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. code: '', // 产品编码
  47. name: '', // 产品名称
  48. origCode: '', // 原厂编码
  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. nowData: {
  60. data: [],
  61. indArr: [],
  62. nowInd: 0
  63. },
  64. brandName: '',
  65. isShow:this.showModal,
  66. showTypeModal: false,
  67. brandModal:false
  68. }
  69. },
  70. methods:{
  71. // 表单清空
  72. handleClean(){
  73. this.form.code = ''
  74. this.form.name = ''
  75. this.form.origCode = ''
  76. this.form.productBrandSn = undefined
  77. this.form.productTypeSn1 = undefined
  78. this.form.productTypeSn2 = undefined
  79. this.form.productTypeSn3 = undefined
  80. this.handleSearch()
  81. },
  82. handleSearch(){
  83. let data = JSON.parse(JSON.stringify(this.form))
  84. console.log(data)
  85. this.$emit('refresh', data)
  86. this.isShow=false
  87. },
  88. // 选择品牌
  89. brandChoose(data){
  90. this.brandName = data.brandName
  91. this.form.productBrandSn = data.brandSn
  92. },
  93. // 清空品牌
  94. brandClean(){
  95. this.brandName = ''
  96. this.form.productBrandSn = undefined
  97. },
  98. // 选择分类
  99. typeChoose(obj){
  100. this.nowData = {
  101. data: obj.data,
  102. indArr: obj.indArr,
  103. nowInd: obj.nowInd
  104. }
  105. this.form.productTypeSn1 = this.nowData.data[0]&&this.nowData.data[0].productTypeSn ? this.nowData.data[0].productTypeSn : undefined
  106. this.form.productTypeSn2 = this.nowData.data[0]&&this.nowData.data[1].productTypeSn ? this.nowData.data[1].productTypeSn : undefined
  107. this.form.productTypeSn3 = this.nowData.data[0]&&this.nowData.data[2].productTypeSn ? this.nowData.data[2].productTypeSn : undefined
  108. },
  109. // 清空分类
  110. typeClean(){
  111. this.nowData = {
  112. data: [],
  113. indArr: [],
  114. nowInd: 0
  115. }
  116. this.form.productTypeSn1 = undefined
  117. this.form.productTypeSn2 = undefined
  118. this.form.productTypeSn3 = undefined
  119. }
  120. },
  121. watch:{
  122. // 父页面传过来的弹框状态
  123. showModal (newValue, oldValue) {
  124. this.isShow = newValue
  125. },
  126. // 重定义的弹框状态
  127. isShow (newValue, oldValue) {
  128. if (!newValue) {
  129. this.$emit('close')
  130. }
  131. }
  132. }
  133. }
  134. </script>
  135. <style lang="scss">
  136. .modal-box{
  137. width: 100%;
  138. .search-title {
  139. text-align: center;
  140. padding: 30upx 22upx;
  141. color: #333;
  142. border-bottom: 1px solid #eee;
  143. }
  144. .form-content{
  145. display: block;
  146. padding: 0 20upx;
  147. box-sizing: content-box;
  148. }
  149. .u-form-item{
  150. padding: 20upx 10upx;
  151. }
  152. .form-footer-btn{
  153. margin: 60upx 30upx 30upx;
  154. display: flex;
  155. justify-content: space-between;
  156. }
  157. .form-footer-btn {
  158. display: flex;
  159. padding: 20upx;
  160. margin-top: 200upx;
  161. .handle-btn {
  162. font-size: 28upx;
  163. margin: 0 30upx;
  164. width: 100%;
  165. flex: 1;
  166. }
  167. }
  168. }
  169. </style>