search.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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" @clear="clearTime" type="select" placeholder="请选择扫描时间区间" class="form-item-inp" @click="showDate=true" />
  7. </u-form-item>
  8. <u-form-item label="VIN"><u-input v-model.trim="form.vinCode" placeholder="请输入VIN"/></u-form-item>
  9. <u-form-item label="车辆品牌"><u-input v-model.trim="form.brandName" placeholder="请输入车辆品牌"/></u-form-item>
  10. <u-form-item label="车型"><u-input v-model.trim="form.modelInfo" placeholder="请输入车型"/></u-form-item>
  11. <u-form-item label="空调滤清器" label-position="top">
  12. <u-checkbox-group :size="28">
  13. <u-checkbox
  14. v-for="(item, index) in list0"
  15. :key="index"
  16. :name="item.val"
  17. v-model="item.checked"
  18. :disabled="item.disabled"
  19. @change="(e)=>{checkboxChange(e,'airConditionerFilterFlag',list0)}"
  20. >
  21. {{item.name}}
  22. </u-checkbox>
  23. </u-checkbox-group>
  24. </u-form-item>
  25. <u-form-item label="空气滤清器" label-position="top">
  26. <u-checkbox-group :size="28">
  27. <u-checkbox
  28. v-for="(item, index) in list1"
  29. :key="index"
  30. :name="item.val"
  31. :disabled="item.disabled"
  32. v-model="item.checked"
  33. @change="(e)=>{checkboxChange(e,'airFilterFlag',list1)}"
  34. >
  35. {{item.name}}
  36. </u-checkbox>
  37. </u-checkbox-group>
  38. </u-form-item>
  39. <u-form-item label="机油滤清器" label-position="top">
  40. <u-checkbox-group :size="28">
  41. <u-checkbox
  42. v-for="(item, index) in list2"
  43. :key="index"
  44. :name="item.val"
  45. :disabled="item.disabled"
  46. v-model="item.checked"
  47. @change="(e)=>{checkboxChange(e,'engineOilFilterFlag',list2)}"
  48. >
  49. {{item.name}}
  50. </u-checkbox>
  51. </u-checkbox-group>
  52. </u-form-item>
  53. </u-form>
  54. <view class="form-footer-btn">
  55. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
  56. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  57. </view>
  58. </u-popup>
  59. <!-- 选择日期范围 -->
  60. <u-calendar v-model="showDate" ref="dataInit" @change="dateChange" mode="range"></u-calendar>
  61. </view>
  62. </template>
  63. <script>
  64. export default{
  65. components: { },
  66. props:{
  67. showModal:{
  68. type: Boolean,
  69. default: false
  70. }
  71. },
  72. data(){
  73. return{
  74. form: {
  75. date: '',
  76. beginDate: '',
  77. endDate: '',
  78. airConditionerFilterFlag:null,
  79. airFilterFlag:null,
  80. engineOilFilterFlag:null,
  81. vinCode: undefined,
  82. brandName: undefined,//车辆品牌
  83. modelInfo: undefined//车型
  84. },
  85. customBtnStyle: { // 自定义按钮样式
  86. borderColor: this.$config('primaryColor'),
  87. backgroundColor: this.$config('primaryColor'),
  88. color: '#fff'
  89. },
  90. list: [
  91. {
  92. name: '有适配',
  93. val:1,
  94. disabled: false,
  95. checked: false
  96. },
  97. {
  98. name: '无适配',
  99. val:2,
  100. disabled: false,
  101. checked: false
  102. },
  103. {
  104. name: '空(--)',
  105. val:0,
  106. disabled: false,
  107. checked: false
  108. }
  109. ],
  110. list0:[],
  111. list1:[],
  112. list2:[],
  113. showDate: false, // 是否显示时间弹窗
  114. isShow:this.showModal,
  115. showTypeModal: false,
  116. brandModal:false
  117. }
  118. },
  119. methods:{
  120. // 时间 change
  121. dateChange(date){
  122. this.form.date = date.startDate + ' ~ ' + date.endDate
  123. this.form.beginDate = date.startDate + ' 00:00:00'
  124. this.form.endDate = date.endDate + ' 23:59:59'
  125. },
  126. // 清空创建时间
  127. clearTime(){
  128. this.$refs.dataInit.init();
  129. this.form.date = ''
  130. this.form.beginDate = ''
  131. this.form.endDate = ''
  132. },
  133. checkboxChange(e,key,list){
  134. list.map(item => {
  135. item.checked = item.val == e.name
  136. })
  137. this.form[key] = e.value ? e.name : ''
  138. },
  139. // 表单清空
  140. handleClean(){
  141. this.form={
  142. date: '',
  143. beginDate: '',
  144. endDate: '',
  145. airConditionerFilterFlag:null,
  146. airFilterFlag:null,
  147. engineOilFilterFlag:null,
  148. vinCode: undefined,
  149. brandName: undefined,//车辆品牌
  150. modelInfo: undefined//车型
  151. }
  152. this.$refs.dataInit.init();
  153. setTimeout(()=>{
  154. this.handleSearch()
  155. },300)
  156. },
  157. handleSearch(){
  158. let data = JSON.parse(JSON.stringify(this.form))
  159. this.$emit('refresh', data)
  160. this.isShow=false
  161. },
  162. setOptionVal(list,key){
  163. list.map(item => {
  164. item.checked = item.val === this.form[key]
  165. })
  166. }
  167. },
  168. watch:{
  169. // 父页面传过来的弹框状态
  170. showModal (newValue, oldValue) {
  171. this.isShow = newValue
  172. },
  173. // 重定义的弹框状态
  174. isShow (newValue, oldValue) {
  175. if (!newValue) {
  176. this.$emit('close')
  177. }else{
  178. this.list0 = JSON.parse(JSON.stringify(this.list))
  179. this.list1 = JSON.parse(JSON.stringify(this.list))
  180. this.list2 = JSON.parse(JSON.stringify(this.list))
  181. this.setOptionVal(this.list0,'airConditionerFilterFlag')
  182. this.setOptionVal(this.list1,'airFilterFlag')
  183. this.setOptionVal(this.list2,'engineOilFilterFlag')
  184. }
  185. }
  186. }
  187. }
  188. </script>
  189. <style lang="scss">
  190. .modal-box{
  191. width: 100%;
  192. .form-content{
  193. display: block;
  194. padding: 0 20upx;
  195. box-sizing: content-box;
  196. }
  197. .u-form-item{
  198. padding: 10upx;
  199. }
  200. .form-footer-btn{
  201. margin: 30upx;
  202. display: flex;
  203. justify-content: space-between;
  204. }
  205. .form-footer-btn {
  206. display: flex;
  207. padding: 20upx;
  208. .handle-btn {
  209. font-size: 28upx;
  210. margin: 0 30upx;
  211. width: 100%;
  212. flex: 1;
  213. }
  214. }
  215. }
  216. </style>