search.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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="150" class="form-content">
  5. <u-form-item label="扫描时间" prop="date" class="form-item">
  6. <u-input clearable v-model="form.date" disabled placeholder="请选择扫描时间区间" class="form-item-inp" @click="showDate=true" />
  7. <u-icon v-show="form.date.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="clearTime"></u-icon>
  8. </u-form-item>
  9. <u-form-item label="VIN"><u-input v-model.trim="form.code" placeholder="请输入VIN"/></u-form-item>
  10. <u-form-item label="车辆品牌"><u-input v-model.trim="form.origCode" placeholder="请输入车辆品牌"/></u-form-item>
  11. <u-form-item label="车型"><u-input v-model.trim="form.name" placeholder="请输入车型"/></u-form-item>
  12. <u-form-item label="空调滤清器" label-position="top">
  13. <u-radio-group v-model="value" :size="28">
  14. <u-radio
  15. v-for="(item, index) in list" :key="index"
  16. :name="item.val"
  17. >
  18. {{item.name}}
  19. </u-radio>
  20. </u-radio-group>
  21. </u-form-item>
  22. <u-form-item label="空气滤清器" label-position="top">
  23. <u-radio-group v-model="value" :size="28">
  24. <u-radio
  25. v-for="(item, index) in list" :key="index"
  26. :name="item.val"
  27. >
  28. {{item.name}}
  29. </u-radio>
  30. </u-radio-group>
  31. </u-form-item>
  32. <u-form-item label="机油滤清器" label-position="top">
  33. <u-radio-group v-model="value" :size="28">
  34. <u-radio
  35. v-for="(item, index) in list" :key="index"
  36. :name="item.val"
  37. >
  38. {{item.name}}
  39. </u-radio>
  40. </u-radio-group>
  41. </u-form-item>
  42. </u-form>
  43. <view class="form-footer-btn">
  44. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
  45. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  46. </view>
  47. </u-popup>
  48. <!-- 选择日期范围 -->
  49. <u-calendar v-model="showDate" @change="dateChange" mode="range"></u-calendar>
  50. </view>
  51. </template>
  52. <script>
  53. export default{
  54. components: { },
  55. props:{
  56. showModal:{
  57. type: Boolean,
  58. default: false
  59. }
  60. },
  61. data(){
  62. return{
  63. form: {
  64. date: '',
  65. beginDate: '',
  66. endDate: '',
  67. code: '', // 产品编码
  68. name: '', // 产品名称
  69. origCode: '', // 原厂编码
  70. productBrandSn: undefined, // 产品品牌
  71. productTypeSn1: undefined, // 产品分类1
  72. productTypeSn2: undefined, // 产品分类2
  73. productTypeSn3: undefined, // 产品分类3
  74. },
  75. customBtnStyle: { // 自定义按钮样式
  76. borderColor: this.$config('primaryColor'),
  77. backgroundColor: this.$config('primaryColor'),
  78. color: '#fff'
  79. },
  80. list: [
  81. {
  82. name: '有适配',
  83. val:'1',
  84. disabled: false
  85. },
  86. {
  87. name: '无适配',
  88. val:'0',
  89. disabled: false
  90. },
  91. {
  92. name: '空(--)',
  93. val:'',
  94. disabled: false
  95. }
  96. ],
  97. showDate: false, // 是否显示时间弹窗
  98. isShow:this.showModal,
  99. showTypeModal: false,
  100. brandModal:false
  101. }
  102. },
  103. methods:{
  104. // 时间 change
  105. dateChange(date){
  106. this.form.date = date.startDate + ' ~ ' + date.endDate
  107. this.form.beginDate = date.startDate
  108. this.form.endDate = date.endDate
  109. },
  110. // 清空创建时间
  111. clearTime(){
  112. this.form.date = ''
  113. this.form.beginDate = ''
  114. this.form.endDate = ''
  115. },
  116. // 表单清空
  117. handleClean(){
  118. this.form.code = ''
  119. this.form.name = ''
  120. this.form.origCode = ''
  121. setTimeout(()=>{
  122. this.handleSearch()
  123. },300)
  124. },
  125. handleSearch(){
  126. let data = JSON.parse(JSON.stringify(this.form))
  127. console.log(data)
  128. this.$emit('refresh', data)
  129. this.isShow=false
  130. },
  131. },
  132. watch:{
  133. // 父页面传过来的弹框状态
  134. showModal (newValue, oldValue) {
  135. this.isShow = newValue
  136. },
  137. // 重定义的弹框状态
  138. isShow (newValue, oldValue) {
  139. if (!newValue) {
  140. this.$emit('close')
  141. }
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="scss">
  147. .modal-box{
  148. width: 100%;
  149. .form-content{
  150. display: block;
  151. padding: 0 20upx;
  152. box-sizing: content-box;
  153. }
  154. .u-form-item{
  155. padding: 10upx;
  156. }
  157. .form-footer-btn{
  158. margin: 30upx;
  159. display: flex;
  160. justify-content: space-between;
  161. }
  162. .form-footer-btn {
  163. display: flex;
  164. padding: 20upx;
  165. .handle-btn {
  166. font-size: 28upx;
  167. margin: 0 30upx;
  168. width: 100%;
  169. flex: 1;
  170. }
  171. }
  172. }
  173. </style>