search.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  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" ref="dataInit" @change="dateChange" mode="range"></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. }
  119. },
  120. methods:{
  121. // 时间 change
  122. dateChange(date){
  123. this.form.date = date.startDate + ' ~ ' + date.endDate
  124. this.form.beginDate = date.startDate + ' 00:00:00'
  125. this.form.endDate = date.endDate + ' 23:59:59'
  126. },
  127. // 清空创建时间
  128. clearTime(){
  129. this.$refs.dataInit.init();
  130. this.form.date = ''
  131. this.form.beginDate = ''
  132. this.form.endDate = ''
  133. },
  134. checkboxChange(e,key,list){
  135. list.map(item => {
  136. item.checked = item.val == e.name
  137. })
  138. this.form[key] = e.value ? e.name : ''
  139. },
  140. // 表单清空
  141. handleClean(){
  142. this.form={
  143. date: '',
  144. beginDate: '',
  145. endDate: '',
  146. airConditionerFilterFlag:null,
  147. airFilterFlag:null,
  148. engineOilFilterFlag:null,
  149. vinCode: undefined,
  150. brandName: undefined,//车辆品牌
  151. modelInfo: undefined//车型
  152. }
  153. this.$refs.dataInit.init();
  154. setTimeout(()=>{
  155. this.handleSearch()
  156. },300)
  157. },
  158. handleSearch(){
  159. let data = JSON.parse(JSON.stringify(this.form))
  160. this.$emit('refresh', data)
  161. this.isShow=false
  162. },
  163. setOptionVal(list,key){
  164. list.map(item => {
  165. item.checked = item.val === this.form[key]
  166. })
  167. }
  168. },
  169. watch:{
  170. // 父页面传过来的弹框状态
  171. showModal (newValue, oldValue) {
  172. this.isShow = newValue
  173. },
  174. // 重定义的弹框状态
  175. isShow (newValue, oldValue) {
  176. if (!newValue) {
  177. this.$emit('close')
  178. }else{
  179. this.list0 = JSON.parse(JSON.stringify(this.list))
  180. this.list1 = JSON.parse(JSON.stringify(this.list))
  181. this.list2 = JSON.parse(JSON.stringify(this.list))
  182. this.setOptionVal(this.list0,'airConditionerFilterFlag')
  183. this.setOptionVal(this.list1,'airFilterFlag')
  184. this.setOptionVal(this.list2,'engineOilFilterFlag')
  185. }
  186. }
  187. }
  188. }
  189. </script>
  190. <style lang="scss">
  191. .modal-box{
  192. width: 100%;
  193. .form-content{
  194. display: block;
  195. padding: 0 20upx;
  196. box-sizing: content-box;
  197. }
  198. .u-form-item{
  199. padding: 10upx;
  200. }
  201. .form-footer-btn{
  202. margin: 30upx;
  203. display: flex;
  204. justify-content: space-between;
  205. }
  206. .form-footer-btn {
  207. display: flex;
  208. padding: 20upx;
  209. .handle-btn {
  210. font-size: 28upx;
  211. margin: 0 30upx;
  212. width: 100%;
  213. flex: 1;
  214. }
  215. }
  216. }
  217. </style>