123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271 |
- <template>
- <view>
- <!-- 顶部筛选条件 -->
- <u-dropdown ref="uDropdown" class="uDropdown" @close="closeDropdownItem">
- <u-dropdown-item v-model="searchForm.inspectorId" :title="isAll" @change="dropdownChange" :options="screenClass"></u-dropdown-item>
- <u-dropdown-item title="检查方式" class="screen-dropdown">
- <view class="slot-content">
- <scroll-view class="scroll-view" scroll-y="true">
- <view class="screen-module">
- <view :class="['status-item', item.checked ? 'active' : '']" v-for="item in sourceTypeList" :key="item.id" @click="chooseSourceType(item)">
- {{ item.dispName }}
- </view>
- </view>
- </scroll-view>
- <u-button type="primary" @click="closeTypeDropdown">确定</u-button>
- </view>
- </u-dropdown-item>
- <u-dropdown-item v-model="searchForm.status" title="状态" :options="screenState" @change="dropdownChange"></u-dropdown-item>
- <u-dropdown-item title="筛选" class="screen-dropdown">
- <view class="slot-content">
- <scroll-view class="scroll-view" scroll-y="true">
- <view class="screen-module">
- <text class="screen-tit">时间区间:</text>
- <view class="screen-time-val">
- <text @click="onShowDatePicker('range')">{{ range.length == 0 ? '请选择' : range[0] + '~' + range[1] }}</text>
- <u-icon v-show="range.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="range=[]"></u-icon>
- </view>
- </view>
- <view class="screen-module">
- <text class="screen-tit">门店:</text>
- <view class="screen-inp-val">
- <u-input class="screen-inp" v-model="moreScreen.storeName" :height="52" placeholder="请输入" type="text" :border="true" />
- </view>
- </view>
- <view class="screen-module">
- <text class="screen-tit">巡店人:</text>
- <view class="screen-inp-val">
- <u-input class="screen-inp" v-model="moreScreen.userName" :height="52" placeholder="请输入" type="text" :border="true" />
- </view>
- </view>
- </scroll-view>
- <u-button type="primary" @click="closeDropdown">确定</u-button>
- </view>
- </u-dropdown-item>
- </u-dropdown>
- <!-- 选择时间区间 -->
- <w-picker
- :visible.sync="showPicker"
- mode="range"
- startYear="2017"
- endYear="2030"
- :value="searchForm.creatTime"
- :current="false"
- @confirm="onSelected($event,'range')"
- @cancel="onSelected"
- ref="range"></w-picker>
- </view>
- </template>
- <script>
- import wPicker from '@/components/w-picker/w-picker.vue'
- import { getLookUpDatas } from '@/api/data.js'
- export default{
- components: { wPicker },
- props: {
- defaultParams: {
- type: Object,
- default: () => {
- return {}
- }
- }
- },
- data(){
- return{
- searchForm: this.defaultParams, // 筛选条件
- screenClass: [ // 过滤条件 类型
- { label: '全部', value: '', },
- { label: '我的巡店', value: 1 }
- ],
- screenMethod: [], // 过滤条件 检查方式
- screenState: [], // 过滤条件 状态
- showPicker: false, // 是否选择创建时间
- range: [], // 筛选创建时间的默认值
- sourceTypeList: [], // 检查方式数据列表
- moreScreen: { // 数据暂存
- storeName: '', // 门店
- userName: '' // 巡店人
- }
- }
- },
- computed: {
- isAll(){
- let str = this.searchForm.inspectorId ? '我的巡店' : '全部'
- return str
- },
- // 检查方式
- sourceType() {
- return this.filterData(this.sourceTypeList)
- }
- },
- mounted() {
- this.getLookUpData('TASK_TYPE') // 获取检查方式
- this.getLookUpData('TASK_STATUS') // 获取状态
- this.init()
- },
- methods: {
- // 初始化
- init(){
- this.searchForm.creatTime = this.defaultParams.creatTime ? this.defaultParams.creatTime : []
- this.range = this.searchForm.creatTime
- this.searchForm.storeName = this.defaultParams.storeName ? this.defaultParams.storeName : ''
- this.searchForm.userName = this.defaultParams.userName ? this.defaultParams.userName : ''
- this.moreScreen.storeName = this.searchForm.storeName
- this.moreScreen.userName = this.searchForm.userName
- this.defaultSourceType()
- },
- // 巡店人、状态 筛选条件 change
- dropdownChange(val){
- this.$emit('refresh', this.searchForm)
- },
- // 检查方式 筛选条件
- closeTypeDropdown(){
- this.searchForm.typeList = this.sourceType
- this.$emit('refresh', this.searchForm)
- this.$refs.uDropdown.close()
- },
- // 筛选 筛选条件
- closeDropdown(){
- this.searchForm.creatTime = this.range
- this.searchForm.storeName = this.moreScreen.storeName
- this.searchForm.userName = this.moreScreen.userName
- this.$emit('refresh', this.searchForm)
- this.$refs.uDropdown.close()
- },
- // 默认检查方式
- defaultSourceType(){
- if(this.defaultParams.typeList){
- setTimeout(()=>{
- this.sourceTypeList.map(item => {
- if(this.defaultParams.typeList.indexOf(item.code) != -1){
- item.checked = true
- }else{
- item.checked = false
- }
- })
- },0)
- }
- },
- // 关闭
- closeDropdownItem(ind){
- if(ind == 1){ // 检查方式
- this.defaultSourceType()
- }else if(ind == 3){ // 多条件筛选
- this.moreScreen.storeName = this.searchForm.storeName
- this.moreScreen.userName = this.searchForm.userName
- this.range = this.searchForm.creatTime
- }
- },
- // 获取数据字典数据
- getLookUpData(code) {
- getLookUpDatas({ type: code }).then(res => {
- if (res.status == 200) {
- res.data.map(item => {
- item.label = item.dispName
- item.value = item.code
- item.checked = false
- })
- if (code == 'TASK_TYPE') { // 检查方式
- this.sourceTypeList = res.data
- }else if(code == 'TASK_STATUS'){ // 状态
- res.data.unshift({label: '全部', value: ''})
- this.screenState = res.data
- }
- }
- });
- },
- // 选择检查方式
- chooseSourceType(item) {
- item.checked = !item.checked
- },
- // 过滤已选数据
- filterData(data) {
- let arr = []
- data.map(item => {
- if (item.checked) {
- arr.push(item.code)
- }
- })
- return arr
- },
- // 显示日期选择
- onShowDatePicker(type){
- this.showPicker = true
- },
- // 日期选择
- onSelected(e) {
- this.showPicker = false
- if(e) {
- this.range = e.value
- }
- },
- }
- }
- </script>
- <style lang="scss">
- // 筛选条件
- .uDropdown{
- background-color: #fff;
- .screen-dropdown{
- .slot-content{
- background-color: #fff;
- .scroll-view{
- height: 300upx;
- padding: 20upx 0;
- box-sizing: border-box;
- .screen-module{
- margin: 0 30upx;
- padding: 14upx 0;
- display: flex;
- align-items: center;
- .screen-tit{
- color: #464646;
- font-size: 26upx;
- width: 140upx;
- flex-shrink: 0;
- }
- .screen-time-val{
- flex-grow: 1;
- font-size: 26upx;
- background-color: #f4f4f4;
- border-radius: 12upx;
- padding: 10upx 14upx;
- text-align: center;
- text{
- display: inline-block;
- width: 85%;
- }
- .close-circle{
- display: inline-block;
- padding-left: 3%;
- vertical-align: bottom;
- }
- }
- .screen-inp-val{
- flex-grow: 1;
- .screen-inp{
- color: #464646;
- font-size: 26upx;
- }
- }
- }
- .status-item {
- display: inline-block;
- 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;
- }
- }
- }
- }
- }
- </style>
|