|
@@ -1,34 +1,37 @@
|
|
<template>
|
|
<template>
|
|
<!-- 待办单查询 -->
|
|
<!-- 待办单查询 -->
|
|
- <u-popup v-model="isshow" class="search-popup" mode="right" @close="handleClose" :custom-style="{top:'var(--status-bar-height)'}" length="80%">
|
|
|
|
- <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 v-model="form.time" disabled placeholder="请选择发起时间区间" @click="showPicker=true"/>
|
|
|
|
- </u-form-item>
|
|
|
|
- <u-form-item label="门店" prop="storeName">
|
|
|
|
- <u-input v-model="form.storeName" placeholder="请输入门店名称" />
|
|
|
|
- </u-form-item>
|
|
|
|
- <u-form-item label="巡店人" prop="userName">
|
|
|
|
- <u-input v-model="form.userName" placeholder="请输入巡店人名称" />
|
|
|
|
- </u-form-item>
|
|
|
|
- <u-form-item label="单据状态" prop="status">
|
|
|
|
- <u-input v-model="form.status" placeholder="请输入巡店人名称" />
|
|
|
|
- </u-form-item>
|
|
|
|
- <u-form-item label="检查方式" prop="status">
|
|
|
|
- <u-input v-model="form.status" placeholder="请输入巡店人名称" />
|
|
|
|
- </u-form-item>
|
|
|
|
- <u-form-item label="过期状态" prop="status">
|
|
|
|
- <u-input v-model="form.status" placeholder="请输入巡店人名称" />
|
|
|
|
- </u-form-item>
|
|
|
|
- </u-form>
|
|
|
|
- <view class="uni-list-btns">
|
|
|
|
- <button type="primary" @click="pageInit(false)">查询</button>
|
|
|
|
- <button type="info" @click="resetForm">重置</button>
|
|
|
|
- </view>
|
|
|
|
- <!-- 时间选择器 -->
|
|
|
|
- <mx-date-picker :show="showPicker" type="range" :value="form.time" :show-tips="true" @confirm="onSelected" @cancel="onSelected" />
|
|
|
|
- </u-popup>
|
|
|
|
|
|
+ <div class="modal-content">
|
|
|
|
+ <u-popup v-model="isshow" class="search-popup" mode="right" @close="handleClose" :custom-style="{top:'var(--status-bar-height)'}" length="90%">
|
|
|
|
+ <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-form-item>
|
|
|
|
+ <u-form-item label="门店" prop="storeName">
|
|
|
|
+ <u-input v-model="form.storeName" placeholder="请输入门店名称" />
|
|
|
|
+ </u-form-item>
|
|
|
|
+ <u-form-item label="巡店人" prop="userName">
|
|
|
|
+ <u-input v-model="form.userName" placeholder="请输入巡店人名称" />
|
|
|
|
+ </u-form-item>
|
|
|
|
+ <u-form-item label="单据状态" prop="status" label-position="top">
|
|
|
|
+ <view :class="['status-item', item.checked ? 'active' : '']" v-for="item in statusList" :key="item.id" @click="chooseStatus(item)">
|
|
|
|
+ {{item.dispName}}
|
|
|
|
+ </view>
|
|
|
|
+ </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" @click="handleSearch">查询</button>
|
|
|
|
+ <button type="info" @click="resetForm">重置</button>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 时间选择器 -->
|
|
|
|
+ <mx-date-picker class="date-picker" :show="showPicker" type="range" format="yyyy-mm-dd" :value="form.time" :show-tips="true" @confirm="onSelected" @cancel="showPicker=false" />
|
|
|
|
+ </u-popup>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -61,21 +64,145 @@
|
|
return {
|
|
return {
|
|
isshow: this.visible, // 显示隐藏
|
|
isshow: this.visible, // 显示隐藏
|
|
showPicker: false, // 是否显示时间弹窗
|
|
showPicker: false, // 是否显示时间弹窗
|
|
|
|
+ statusList: [
|
|
|
|
+ {
|
|
|
|
+ id: 1,
|
|
|
|
+ code: 'pending',
|
|
|
|
+ dispName: '待整改',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 12,
|
|
|
|
+ code: 'check_pending',
|
|
|
|
+ dispName: '待审核',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 13,
|
|
|
|
+ code: 'finished',
|
|
|
|
+ dispName: '整改完成',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 14,
|
|
|
|
+ code: 'expired',
|
|
|
|
+ dispName: '已过期',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ ], // 状态列表
|
|
|
|
+ sourceTypeList: [
|
|
|
|
+ {
|
|
|
|
+ id: 1,
|
|
|
|
+ code: 'remote_check',
|
|
|
|
+ dispName: '远程巡店',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 12,
|
|
|
|
+ code: 'spot_check',
|
|
|
|
+ dispName: '现场巡店',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 13,
|
|
|
|
+ code: 'point_check',
|
|
|
|
+ dispName: '点检',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 14,
|
|
|
|
+ code: 'manual',
|
|
|
|
+ dispName: '手动创建',
|
|
|
|
+ checked: false
|
|
|
|
+ },
|
|
|
|
+ ], // 检查方式列表
|
|
form: {
|
|
form: {
|
|
- time: null,
|
|
|
|
|
|
+ time: '', // 发起时间区间
|
|
|
|
+ storeName: '', // 门店名称
|
|
|
|
+ userName: '' // 巡店人
|
|
},
|
|
},
|
|
|
|
+ beginDate: null, // 开始时间
|
|
|
|
+ endDate: null, // 结束时间
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ // 已选单据状态
|
|
|
|
+ status() {
|
|
|
|
+ return this.filterData(this.statusList)
|
|
|
|
+ },
|
|
|
|
+ // 检查方式
|
|
|
|
+ sourceType () {
|
|
|
|
+ return this.filterData(this.sourceTypeList)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
// 关闭弹窗
|
|
// 关闭弹窗
|
|
handleClose () {
|
|
handleClose () {
|
|
this.isshow = false
|
|
this.isshow = false
|
|
|
|
+ },
|
|
|
|
+ // 打开时间选择弹框
|
|
|
|
+ openPicker () {
|
|
|
|
+ this.showPicker = true
|
|
|
|
+ console.log(111)
|
|
|
|
+ // this.$emit('openPicke')
|
|
|
|
+ },
|
|
|
|
+ // 确认日期选择
|
|
|
|
+ onSelected (v) {
|
|
|
|
+ console.log(v,'vvvvvvvv')
|
|
|
|
+ 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
|
|
|
|
+ },
|
|
|
|
+ // 选择单据状态
|
|
|
|
+ chooseStatus (item) {
|
|
|
|
+ item.checked = !item.checked
|
|
|
|
+ },
|
|
|
|
+ // 选择检查方式
|
|
|
|
+ chooseSourceType (item) {
|
|
|
|
+ item.checked = !item.checked
|
|
|
|
+ },
|
|
|
|
+ // 查询
|
|
|
|
+ handleSearch () {
|
|
|
|
+ let params = {
|
|
|
|
+ beginDate: this.beginDate,
|
|
|
|
+ endDate: this.endDate,
|
|
|
|
+ storeName: this.form.storeName,
|
|
|
|
+ userName: this.form.userName,
|
|
|
|
+ status: this.status,
|
|
|
|
+ sourceType: this.sourceType
|
|
|
|
+ }
|
|
|
|
+ this.$emit('refresh',params)
|
|
|
|
+ this.isshow = false
|
|
|
|
+ },
|
|
|
|
+ // 重置
|
|
|
|
+ resetForm () {
|
|
|
|
+ this.$refs.uForm.resetFields()
|
|
|
|
+ this.statusList.map(item=>{
|
|
|
|
+ item.checked = false
|
|
|
|
+ })
|
|
|
|
+ this.sourceTypeList.map(item=>{
|
|
|
|
+ item.checked = false
|
|
|
|
+ })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
+ .modal-content {
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
.search-popup{
|
|
.search-popup{
|
|
.search-title{
|
|
.search-title{
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -85,6 +212,19 @@
|
|
}
|
|
}
|
|
.form-content {
|
|
.form-content {
|
|
padding: 0 20upx;
|
|
padding: 0 20upx;
|
|
|
|
+ .status-item {
|
|
|
|
+ width: 30%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 60upx;
|
|
|
|
+ background-color: #e2e2e2;
|
|
|
|
+ color: #333;
|
|
|
|
+ font-size: 24upx;
|
|
|
|
+ margin: 0 10upx;
|
|
|
|
+ }
|
|
|
|
+ .active {
|
|
|
|
+ background-color: #ffaa00;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.uni-list{
|
|
.uni-list{
|
|
margin: 20upx;
|
|
margin: 20upx;
|
|
@@ -112,4 +252,6 @@
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
+ .date-picker{
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|