search.vue 5.9 KB

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