search.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  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.vinCode" placeholder="请输入VIN"/></u-form-item>
  10. <u-form-item label="车辆品牌"><u-input v-model.trim="form.brandName" placeholder="请输入车辆品牌"/></u-form-item>
  11. <u-form-item label="车型"><u-input v-model.trim="form.modelName" placeholder="请输入车型"/></u-form-item>
  12. <u-form-item label="空调滤清器" label-position="top">
  13. <u-radio-group v-model="form.airConditionerFilterFlag" :size="28">
  14. <u-radio
  15. v-for="(item, index) in list" :key="index"
  16. :name="item.val" :disabled="item.disabled"
  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="form.airFilterFlag" :size="28">
  24. <u-radio
  25. v-for="(item, index) in list" :key="index"
  26. :name="item.val" :disabled="item.disabled"
  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="form.engineOilFilterFlag" :size="28">
  34. <u-radio
  35. v-for="(item, index) in list" :key="index"
  36. :name="item.val" :disabled="item.disabled"
  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. airConditionerFilterFlag:null,
  68. airFilterFlag:null,
  69. engineOilFilterFlag:null,
  70. vinCode: undefined,
  71. brandName: undefined,//车辆品牌
  72. modelName: undefined//车型
  73. },
  74. customBtnStyle: { // 自定义按钮样式
  75. borderColor: this.$config('primaryColor'),
  76. backgroundColor: this.$config('primaryColor'),
  77. color: '#fff'
  78. },
  79. list: [
  80. {
  81. name: '有适配',
  82. val:1,
  83. disabled: false
  84. },
  85. {
  86. name: '无适配',
  87. val:2,
  88. disabled: false
  89. },
  90. {
  91. name: '空(--)',
  92. val:0,
  93. disabled: false
  94. }
  95. ],
  96. showDate: false, // 是否显示时间弹窗
  97. isShow:this.showModal,
  98. showTypeModal: false,
  99. brandModal:false
  100. }
  101. },
  102. methods:{
  103. // 时间 change
  104. dateChange(date){
  105. this.form.date = date.startDate + ' ~ ' + date.endDate
  106. this.form.beginDate = date.startDate + ' 00:00:00'
  107. this.form.endDate = date.endDate + ' 23:59:59'
  108. },
  109. // 清空创建时间
  110. clearTime(){
  111. this.form.date = ''
  112. this.form.beginDate = ''
  113. this.form.endDate = ''
  114. },
  115. // 表单清空
  116. handleClean(){
  117. this.form={
  118. date: '',
  119. beginDate: '',
  120. endDate: '',
  121. airConditionerFilterFlag:undefined,
  122. airFilterFlag:undefined,
  123. engineOilFilterFlag:undefined,
  124. vinCode: undefined,
  125. brandName: undefined,//车辆品牌
  126. modelName: undefined//车型
  127. }
  128. setTimeout(()=>{
  129. this.handleSearch()
  130. },300)
  131. },
  132. handleSearch(){
  133. let data = JSON.parse(JSON.stringify(this.form))
  134. this.$emit('refresh', data)
  135. this.isShow=false
  136. },
  137. },
  138. watch:{
  139. // 父页面传过来的弹框状态
  140. showModal (newValue, oldValue) {
  141. this.isShow = newValue
  142. },
  143. // 重定义的弹框状态
  144. isShow (newValue, oldValue) {
  145. if (!newValue) {
  146. this.$emit('close')
  147. }
  148. }
  149. }
  150. }
  151. </script>
  152. <style lang="scss">
  153. .modal-box{
  154. width: 100%;
  155. .form-content{
  156. display: block;
  157. padding: 0 20upx;
  158. box-sizing: content-box;
  159. }
  160. .u-form-item{
  161. padding: 10upx;
  162. }
  163. .form-footer-btn{
  164. margin: 30upx;
  165. display: flex;
  166. justify-content: space-between;
  167. }
  168. .form-footer-btn {
  169. display: flex;
  170. padding: 20upx;
  171. .handle-btn {
  172. font-size: 28upx;
  173. margin: 0 30upx;
  174. width: 100%;
  175. flex: 1;
  176. }
  177. }
  178. }
  179. </style>