searchParts.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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="200" class="form-content">
  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.productName" placeholder="请输入产品名称" input-align="right" /></u-form-item>
  7. <u-form-item label="上线状态" class="form-item">
  8. <u-input v-model="onlineFalgName" @click="onlineFalgModal=true" clearable @clear="clearOnlineFlag" type="select" placeholder="请选择上线状态" input-align="right" />
  9. </u-form-item>
  10. <u-form-item label="通用产品编码"><u-input v-model.trim="form.productCommonCode" placeholder="请输入通用产品编码" input-align="right" /></u-form-item>
  11. <u-form-item label="通用产品名称"><u-input v-model.trim="form.productCommonName" placeholder="请输入通用产品名称" input-align="right" /></u-form-item>
  12. </u-form>
  13. <view class="form-footer-btn">
  14. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
  15. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  16. </view>
  17. </u-popup>
  18. <!-- 选择上线 -->
  19. <u-picker v-model="onlineFalgModal" @confirm="onlineFalgChange" :range="onlineFlagList" range-key="dispName" mode="selector"></u-picker>
  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. data(){
  35. return{
  36. form: {
  37. productCode:'',
  38. productName:'',
  39. productCommonCode:'',
  40. productCommonName:'',
  41. onlineFalg:undefined
  42. },
  43. customBtnStyle: { // 自定义按钮样式
  44. borderColor: this.$config('primaryColor'),
  45. backgroundColor: this.$config('primaryColor'),
  46. color: '#fff'
  47. },
  48. nowData: {
  49. data: [],
  50. indArr: [],
  51. nowInd: 0
  52. },
  53. isShow:this.showModal,
  54. onlineFalgModal: false,
  55. onlineFalgName: '',
  56. onlineFlagList: []
  57. }
  58. },
  59. methods:{
  60. // 表单清空
  61. handleClean(){
  62. this.form.productCode = ''
  63. this.form.productName = ''
  64. this.form.productCommonCode = ''
  65. this.form.productCommonName = ''
  66. this.clearOnlineFlag()
  67. setTimeout(()=>{
  68. this.handleSearch()
  69. },300)
  70. },
  71. handleSearch(){
  72. let data = JSON.parse(JSON.stringify(this.form))
  73. this.$emit('refresh', data)
  74. this.isShow=false
  75. },
  76. clearOnlineFlag(){
  77. this.onlineFalgName = ''
  78. this.form.onlineFalg = undefined
  79. },
  80. // 上线 change
  81. onlineFalgChange(ind){
  82. this.form.onlineFalg = this.onlineFlagList[ind].code || undefined
  83. this.onlineFalgName = this.onlineFlagList[ind].dispName || ''
  84. },
  85. getStateList(){ //获取上线
  86. this.onlineFlagList = this.$store.state.vuex_onlineFlagList
  87. if(this.form.onlineFalg){
  88. const b = this.onlineFlagList.find(item => item.code == this.form.onlineFalg)
  89. this.onlineFalgName = b ? b.dispName : ''
  90. }
  91. }
  92. },
  93. watch:{
  94. // 父页面传过来的弹框状态
  95. showModal (newValue, oldValue) {
  96. this.isShow = newValue
  97. },
  98. // 重定义的弹框状态
  99. isShow (newValue, oldValue) {
  100. if (!newValue) {
  101. this.$emit('close')
  102. }else{
  103. this.getStateList()
  104. }
  105. }
  106. }
  107. }
  108. </script>
  109. <style lang="scss">
  110. .modal-box{
  111. width: 100%;
  112. .search-title {
  113. text-align: center;
  114. padding: 30upx 22upx;
  115. color: #333;
  116. border-bottom: 1px solid #eee;
  117. }
  118. .form-content{
  119. display: block;
  120. padding: 0 20upx;
  121. box-sizing: content-box;
  122. }
  123. .u-form-item{
  124. padding: 20upx 10upx;
  125. }
  126. .form-footer-btn{
  127. margin: 60upx 30upx 30upx;
  128. display: flex;
  129. justify-content: space-between;
  130. }
  131. .form-footer-btn {
  132. display: flex;
  133. padding: 20upx;
  134. margin-top: 200upx;
  135. .handle-btn {
  136. font-size: 28upx;
  137. margin: 0 30upx;
  138. width: 100%;
  139. flex: 1;
  140. }
  141. }
  142. }
  143. </style>