searchParts.vue 4.4 KB

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