<template> <!-- 待办单查询 --> <div class="modal-content"> <u-popup v-model="isShow" class="search-popup" mode="right" @close="handleClose" length="85%"> <view class="search-title">筛选</view> <u-form class="form-content" :model="form" ref="uForm" label-width="150"> <u-form-item label="创建时间" prop="time"> <u-input clearable v-model="form.time" disabled placeholder="请选择创建时间区间" @click="openPicker" /> <u-icon v-show="form.time.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="clearTime"></u-icon> </u-form-item> <u-form-item label="门店" prop="storeName"><u-input v-model="form.storeName" :maxlength="30" placeholder="请输入门店名称" /></u-form-item> <u-form-item label="检查方式" prop="sourceType" label-position="top"> <view :class="['status-item', item.checked ? 'active' : '']" v-for="item in sourceTypeList" :key="item.id" @click="chooseSourceType(item)"> {{ item.dispName }} </view> </u-form-item> </u-form> <view class="uni-list-btns"> <button type="primary" :style="{background: $config('buttonColors')}" @click="handleSearch">查询</button> <button type="info" @click="resetForm">重置</button> </view> </u-popup> <!-- 时间选择器 --> <w-picker class="date-picker" :visible.sync="showPicker" mode="range" :current="true" fields="day" @confirm="onSelected($event, 'range')" @cancel="showPicker = false" ref="date" ></w-picker> </div> </template> <script> import wPicker from '@/components/w-picker/w-picker.vue' import { getLookUpDatas } from '@/api/data.js' export default { components: { wPicker }, props: { visible: { type: Boolean, default: false }, defaultParams: { type: Object, default: () => { return {}; } } }, watch: { visible(newValue, oldValue) { if (newValue) { this.isShow = newValue } }, isShow(newValue, oldValue) { if (newValue) { } else { this.init() this.$emit('close') } } }, data() { return { isShow: this.visible, // 显示隐藏 showPicker: false, // 是否显示时间弹窗 sourceTypeList: [], // 检查方式列表 form: { time: '', // 发起时间区间 storeName: '', // 门店名称 }, beginDate: null, // 开始时间 endDate: null // 结束时间 }; }, computed: { // 检查方式 sourceType() { return this.filterData(this.sourceTypeList); } }, mounted() { // 获取检查方式 this.getLookUpData('TASK_TYPE') this.init() }, methods: { // 初始化数据 init(){ if(this.defaultParams.beginDate && this.defaultParams.endDate){ this.form.time = this.defaultParams.beginDate + ' ~ ' + this.defaultParams.endDate } this.beginDate = this.defaultParams.beginDate ? this.defaultParams.beginDate : '' this.endDate = this.defaultParams.endDate ? this.defaultParams.endDate : '' this.form.storeName = this.defaultParams.storeName ? this.defaultParams.storeName : '' this.defaultSourceType() }, // 默认检查方式 defaultSourceType(){ if(this.defaultParams.sourceType){ setTimeout(()=>{ this.sourceTypeList.map(item => { if(this.defaultParams.sourceType.indexOf(item.code) != -1){ item.checked = true }else{ item.checked = false } }) },0) } }, // 清空创建时间 clearTime(){ this.form.time = '' this.beginDate = '' this.endDate = '' }, // 获取数据字典数据 getLookUpData(code) { getLookUpDatas({ type: code }).then(res => { if (res.status == 200) { res.data.map(item => { item.checked = false }) if (code == 'TASK_TYPE') { this.sourceTypeList = res.data } } }); }, // 关闭弹窗 handleClose() { this.isShow = false }, // 打开时间选择弹框 openPicker() { this.showPicker = true }, // 确认日期选择 onSelected(v) { this.form.time = v.value[0] + ' ~ ' + v.value[1] this.beginDate = v.value[0] this.endDate = v.value[1] this.showPicker = false }, // 过滤已选数据 filterData(data) { let arr = [] data.map(item => { if (item.checked) { arr.push(item.code) } }); return arr }, // 选择检查方式 chooseSourceType(item) { item.checked = !item.checked }, // 查询 handleSearch() { let params = { beginDate: this.beginDate, endDate: this.endDate, storeName: this.form.storeName, sourceType: this.sourceType }; this.$emit('refresh', params) this.isShow = false }, // 重置 resetForm() { this.$refs.uForm.resetFields() this.sourceTypeList.map(item => { item.checked = false }); this.$emit('refresh', {}) this.isShow = false } } }; </script> <style lang="scss" scoped> .modal-content { position: relative; } .search-popup { .search-title { text-align: center; padding: 22upx; color: #333; border-bottom: 1px solid #eee; } .form-content { padding: 0 20upx; .status-item { width: 30%; text-align: center; line-height: 60upx; background-color: #F8F8F8; color: #333; border-radius: 6upx; font-size: 24upx; margin: 0 10upx; } .active { background-color: #ffaa00; color: #fff; } } .uni-list { margin: 20upx; .uni-list-cell { display: flex; align-items: center; border-bottom: 1px dashed #eeeeee; .uni-list-cell-db { flex: 1; } .uni-input { height: 2.5em; line-height: 2.5em; } } } .uni-list-btns { display: flex; padding: 20upx; uni-button { font-size: 28upx; margin: 0 30upx; flex: 1; } } } .date-picker { } </style>