searchParts.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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. export default{
  25. components: { productBrand },
  26. props:{
  27. showModal:{
  28. type: Boolean,
  29. default: false
  30. }
  31. },
  32. data(){
  33. return{
  34. form: {
  35. productCode:'',
  36. productName:'',
  37. productCommonCode:'',
  38. productCommonName:'',
  39. onlineFalg:undefined
  40. },
  41. customBtnStyle: { // 自定义按钮样式
  42. borderColor: this.$config('primaryColor'),
  43. backgroundColor: this.$config('primaryColor'),
  44. color: '#fff'
  45. },
  46. nowData: {
  47. data: [],
  48. indArr: [],
  49. nowInd: 0
  50. },
  51. isShow:this.showModal,
  52. onlineFalgModal: false,
  53. onlineFalgName: '',
  54. onlineFlagList: []
  55. }
  56. },
  57. methods:{
  58. // 表单清空
  59. handleClean(){
  60. this.form.productCode = ''
  61. this.form.productName = ''
  62. this.form.productCommonCode = ''
  63. this.form.productCommonName = ''
  64. this.clearOnlineFlag()
  65. setTimeout(()=>{
  66. this.handleSearch()
  67. },300)
  68. },
  69. handleSearch(){
  70. let data = JSON.parse(JSON.stringify(this.form))
  71. this.$emit('refresh', data)
  72. this.isShow=false
  73. },
  74. clearOnlineFlag(){
  75. this.onlineFalgName = ''
  76. this.form.onlineFalg = undefined
  77. },
  78. // 上线 change
  79. onlineFalgChange(ind){
  80. this.form.onlineFalg = this.onlineFlagList[ind].code || undefined
  81. this.onlineFalgName = this.onlineFlagList[ind].dispName || ''
  82. },
  83. getStateList(){ //获取上线
  84. this.onlineFlagList = this.$store.state.vuex_onlineFlagList
  85. if(this.form.onlineFalg){
  86. const b = this.onlineFlagList.find(item => item.code == this.form.onlineFalg)
  87. this.onlineFalgName = b ? b.dispName : ''
  88. }
  89. }
  90. },
  91. watch:{
  92. // 父页面传过来的弹框状态
  93. showModal (newValue, oldValue) {
  94. this.isShow = newValue
  95. },
  96. // 重定义的弹框状态
  97. isShow (newValue, oldValue) {
  98. if (!newValue) {
  99. this.$emit('close')
  100. }else{
  101. this.getStateList()
  102. }
  103. }
  104. }
  105. }
  106. </script>
  107. <style lang="scss">
  108. .modal-box{
  109. width: 100%;
  110. .search-title {
  111. text-align: center;
  112. padding: 30upx 22upx;
  113. color: #333;
  114. border-bottom: 1px solid #eee;
  115. }
  116. .form-content{
  117. display: block;
  118. padding: 0 20upx;
  119. box-sizing: content-box;
  120. }
  121. .u-form-item{
  122. padding: 20upx 10upx;
  123. }
  124. .form-footer-btn{
  125. margin: 60upx 30upx 30upx;
  126. display: flex;
  127. justify-content: space-between;
  128. }
  129. .form-footer-btn {
  130. display: flex;
  131. padding: 20upx;
  132. margin-top: 200upx;
  133. .handle-btn {
  134. font-size: 28upx;
  135. margin: 0 30upx;
  136. width: 100%;
  137. flex: 1;
  138. }
  139. }
  140. }
  141. </style>