400 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			400 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <view class="risk-record-page">
 | 
						|
	  <u-sticky>
 | 
						|
	  	<view class="filter-bar">
 | 
						|
	  		<view class="filter filter-date-range" @click="handleShowPicker({title: '时间区间', name: 'dateRange'})">
 | 
						|
	  			<text>{{dateFilterTxt}}</text>
 | 
						|
	  			<u-icon size="14" style="margin-left: 4px;" name="arrow-down"></u-icon>
 | 
						|
	  		</view>
 | 
						|
	  		<uni-search-bar class="search-bar" radius="100" :value="keyword" @confirm="handleSearch"
 | 
						|
	  			@cancel="handleCancelSearch" @clear="handleCancelSearch" placeholder="搜索待办人员"></uni-search-bar>
 | 
						|
	  		
 | 
						|
	  	</view>
 | 
						|
	  	</u-sticky>
 | 
						|
    <view class="main">
 | 
						|
      <view class="content-list">
 | 
						|
        <common-card
 | 
						|
          :dataSource="item"
 | 
						|
          v-for="item in lists"
 | 
						|
		  class="content"
 | 
						|
          @click="handleToEdit"
 | 
						|
        >
 | 
						|
          <view>
 | 
						|
			<!-- <view class="field">
 | 
						|
			  <text class="label">消息标题:</text>
 | 
						|
			  <text class="value">{{item.NOTICE_TITLE}}</text>
 | 
						|
			</view> -->
 | 
						|
			<view class="field">
 | 
						|
				<text class="label">待办人:</text>
 | 
						|
				<text class="status">{{item.USER_NAME}}</text>
 | 
						|
			</view>
 | 
						|
			<view class="field">
 | 
						|
			   <text class="label">开始时间:</text>
 | 
						|
			   <text class="value">{{$u.timeFormat(item.TASK_STARTDT,'yyyy-mm-dd')}}</text>
 | 
						|
			 </view>
 | 
						|
			<view class="field">
 | 
						|
			   <text class="label">结束时间:</text>
 | 
						|
			   <text class="value">{{$u.timeFormat(item.TASK_ENDDT,'yyyy-mm-dd')}}</text>
 | 
						|
			 </view>
 | 
						|
			 <view class="field">
 | 
						|
			 	<text class="label">消息状态:</text>
 | 
						|
			 	<text class="value">{{item.NOTICE_STATUS}}</text>
 | 
						|
			 </view>
 | 
						|
          </view>
 | 
						|
        </common-card>
 | 
						|
      </view>
 | 
						|
	  <view v-if="!lists.length" class="empty-wrap">
 | 
						|
	  	<u-empty text="暂无数据" icon="/static/empty@2x.png">
 | 
						|
	  	</u-empty>
 | 
						|
	  </view>
 | 
						|
	  <view >
 | 
						|
		  <u-modal :show="show" @cancel="cancel" :title="title" @confirm="confirm" :showCancelButton="true">
 | 
						|
		    <!-- 这里是modal的内容 -->
 | 
						|
		    <view>
 | 
						|
			<u--form>
 | 
						|
		      <u-form-item label="转给" prop="UserName" @click="handleChangeMonitor()">
 | 
						|
		      	  
 | 
						|
		      	<u--input disabledColor="#fff" v-model="UserName" disabled placeholder="请选择人员" suffixIcon="arrow-right" suffixIconStyle="font-size:12px" fontSize="14px"
 | 
						|
		      		customStyle="margin:0px;display:flex;padding:3px 9px" border="none" >
 | 
						|
		      	</u--input>
 | 
						|
		    </u-form-item>
 | 
						|
			</u--form>
 | 
						|
		    </view>
 | 
						|
		    <!-- 这里是modal的底部按钮 -->
 | 
						|
		    <view slot="footer" class="footer">
 | 
						|
		      <u-button @click="show = false">关闭</u-button>
 | 
						|
		    </view>
 | 
						|
		  </u-modal>
 | 
						|
	  	
 | 
						|
	  	</view>
 | 
						|
    </view>
 | 
						|
    <u-picker
 | 
						|
      :show="comPickerInfo.showPicker"
 | 
						|
      :columns="comPickerInfo.columns"
 | 
						|
      @confirm="onConfirmPicker"
 | 
						|
	  :defaultIndex="[0]"
 | 
						|
      @cancel="closePicker"
 | 
						|
    ></u-picker>
 | 
						|
	<query-selector :show="showPopupMonitor" :total="curTotalMonitor" :lists="monitorLists" :defaultValue="currentOperateMonitor.NAME" @close="handleClosePopupMonitor" @search="handleSearchMonitor"
 | 
						|
		@select="handleSelectedMonitor" />
 | 
						|
  </view>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
  import {
 | 
						|
	  getNotificationTaskList,
 | 
						|
	  getUserLists,
 | 
						|
	  getChangeUser
 | 
						|
  } from '../../../../services/apply/FMServices/FMServices.js'
 | 
						|
  import {
 | 
						|
    extendInclude, extendRule,extendFilterGroup,extendOrder,guid,
 | 
						|
    initFilter,initFilterGroup,extendGroupRule,extendIgnoreDataRule
 | 
						|
  } from '../../../../utils/common'
 | 
						|
  import UniSearchBar from '../../../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'
 | 
						|
 | 
						|
  export default {
 | 
						|
    components: { UniSearchBar },
 | 
						|
    data() {
 | 
						|
      return {
 | 
						|
		  title:'选择转办人',
 | 
						|
		  UserName:'',
 | 
						|
		  ID:null,
 | 
						|
		  UserID:null,
 | 
						|
		show :false,
 | 
						|
        pageIndex: 1,
 | 
						|
		curTotalMonitor: 0,
 | 
						|
		monitorLists: [],
 | 
						|
		currentOperateMonitor: {},
 | 
						|
		showPopupMonitor: false,
 | 
						|
        total: 0,
 | 
						|
        lists: [],
 | 
						|
        keyword: '',
 | 
						|
        searchStartTime: '',
 | 
						|
        dateFilterTxt: '时间区间',
 | 
						|
        comPickerInfo: {
 | 
						|
          showPicker: false,
 | 
						|
          columns: [],
 | 
						|
          title: '',
 | 
						|
          name: ''
 | 
						|
        }
 | 
						|
      }
 | 
						|
    },
 | 
						|
    onLoad() {
 | 
						|
      this.loadData()
 | 
						|
    },
 | 
						|
    methods: {
 | 
						|
     handleSearch(obj) {
 | 
						|
     	this.keyword = obj.value
 | 
						|
     },
 | 
						|
	 handleToEdit(obj) {
 | 
						|
	   this.show = true
 | 
						|
	   this.ID = obj.ID
 | 
						|
	 },
 | 
						|
      cancel() {
 | 
						|
        this.show = false
 | 
						|
		this.ID=null
 | 
						|
		this.UserID=null
 | 
						|
		this.UserName=''
 | 
						|
      },
 | 
						|
		confirm(){
 | 
						|
			const orgId = uni.getStorageSync('orgId')
 | 
						|
			const json = initFilter(orgId, this.ID, '', 0, 1,this.UserID)
 | 
						|
			if(this.ID==null || this.UserID==null)
 | 
						|
			{
 | 
						|
				this.show =false;
 | 
						|
				uni.$showErrorInfo('未选择转办人!')
 | 
						|
				return 
 | 
						|
			}
 | 
						|
			getChangeUser(json).then(res => {
 | 
						|
				this.show = false
 | 
						|
				this.ID=null
 | 
						|
				this.UserID=null
 | 
						|
				this.UserName=''
 | 
						|
				uni.$showMsgFunc('转办成功!', () => {
 | 
						|
					uni.navigateBack()
 | 
						|
				}, 'success', 1000)
 | 
						|
			}).catch((error) => {
 | 
						|
			this.show = false
 | 
						|
			this.ID=null
 | 
						|
			this.UserID=null
 | 
						|
			this.UserName=''
 | 
						|
			uni.$showErrorInfo(error);
 | 
						|
		})
 | 
						|
		},
 | 
						|
		handleChangeMonitor() {
 | 
						|
			this.currentOperateMonitor = []
 | 
						|
			this.showPopupMonitor = true
 | 
						|
			this.handleSearchMonitor('init')
 | 
						|
		},
 | 
						|
		handleSelectedMonitor(val) {
 | 
						|
			this.showPopupMonitor = false
 | 
						|
			this.currentOperateMonitor = val
 | 
						|
			this.UserName = val.NAME
 | 
						|
			this.UserID = val.ID
 | 
						|
			// this.dataModel.Nav_MonitorUser = val
 | 
						|
			// this.dataModel.MONITOR_USER_ID = val.ID
 | 
						|
		},
 | 
						|
		handleSearchMonitor(val, pageIndex) {
 | 
						|
			const orgId = uni.getStorageSync('orgId')
 | 
						|
			const json = initFilter(orgId, "", "NAME", '', pageIndex)
 | 
						|
			extendRule(json, 'ENABLE_STATUS', 1, '0')
 | 
						|
			if (val !== 'init') {
 | 
						|
				const tempGroup = initFilterGroup(false);
 | 
						|
				extendGroupRule(tempGroup, 'NAME', 9, val)
 | 
						|
				extendFilterGroup(json, tempGroup);
 | 
						|
			}
 | 
						|
			json.Limit = 20
 | 
						|
			if (pageIndex) {
 | 
						|
				json.Start = (pageIndex - 1) * 20;
 | 
						|
			}
 | 
						|
		
 | 
						|
			getUserLists(json).then(res => {
 | 
						|
				if (res.IsSuccessful) {
 | 
						|
					this.monitorLists = res.Data.map(i => {
 | 
						|
						return {
 | 
						|
							...i,
 | 
						|
							name: i.NAME,
 | 
						|
							code: i.CODE
 | 
						|
						}
 | 
						|
					})
 | 
						|
					this.curTotalMonitor = res.TotalCount
 | 
						|
				}
 | 
						|
			})
 | 
						|
		},
 | 
						|
		handleClosePopupMonitor() {
 | 
						|
			this.showPopupMonitor = false
 | 
						|
			// this.showPopupCertificate = false
 | 
						|
		},
 | 
						|
      handleCancelSearch() {
 | 
						|
      	this.keyword = ''
 | 
						|
      },
 | 
						|
      loadData() {
 | 
						|
        const orgId = uni.getStorageSync('orgId')
 | 
						|
        const json = initFilter(orgId, "", "CREATE_TIME", 1, this.pageIndex)
 | 
						|
			if (this.keyword) {
 | 
						|
				extendRule(json, 'USER_NAME', 9, this.keyword)
 | 
						|
			}
 | 
						|
			if (this.searchStartTime) {
 | 
						|
				extendRule(json, 'CREATE_TIME', 6, this.searchStartTime)
 | 
						|
			}
 | 
						|
        getNotificationTaskList(json).then(res => {
 | 
						|
          this.total = res.TotalCount
 | 
						|
		  for (let i = 0; i < res.Data.length; i++) {
 | 
						|
		  	if (res.Data[i].NOTICE_STATUS == 0) {
 | 
						|
		  		res.Data[i].NOTICE_STATUS = "未处理";
 | 
						|
		  	}else if(res.Data[i].NOTICE_STATUS == 1) {
 | 
						|
		  		res.Data[i].NOTICE_STATUS = "已完成";
 | 
						|
		  	}else if(res.Data[i].NOTICE_STATUS == 2) {
 | 
						|
		  		res.Data[i].NOTICE_STATUS = "超时完成";
 | 
						|
		  	}
 | 
						|
		  }
 | 
						|
          const newRes = (res.Data || []).map(i => {
 | 
						|
            return {
 | 
						|
              ...i,
 | 
						|
              title: i.NOTICE_TITLE,
 | 
						|
            }
 | 
						|
          })
 | 
						|
          if (this.pageIndex !== 1) {
 | 
						|
            this.lists = this.lists.concat(newRes)
 | 
						|
          } else {
 | 
						|
            this.lists = newRes
 | 
						|
          }
 | 
						|
        })
 | 
						|
      },
 | 
						|
      handleShowPicker(p) {
 | 
						|
        let column = []
 | 
						|
        if (p.name === 'dateRange') {
 | 
						|
			column = ['全部', '当天', '最近三天', '最近一周', '最近一月']
 | 
						|
        }
 | 
						|
        this.comPickerInfo = {
 | 
						|
          showPicker: true,
 | 
						|
          title: p.title,
 | 
						|
          name: p.name,
 | 
						|
          columns: [column]
 | 
						|
        }
 | 
						|
      },
 | 
						|
      onConfirmPicker(e) {
 | 
						|
      	if (this.comPickerInfo.name === 'dateRange') {
 | 
						|
      		let currentDate = new Date();
 | 
						|
      		if (e.indexs[0] === 2) {
 | 
						|
      			currentDate.setDate(currentDate.getDate() - 3);
 | 
						|
      		} else if (e.indexs[0] === 3) {
 | 
						|
      			currentDate.setDate(currentDate.getDate() - 7);
 | 
						|
      		} else if (e.indexs[0] === 4) {
 | 
						|
      			currentDate.setDate(currentDate.getMonth());
 | 
						|
      		}
 | 
						|
      		if (e.indexs[0] === 0) {
 | 
						|
      			this.searchStartTime = ''
 | 
						|
      			this.dateFilterTxt = '时间区间'
 | 
						|
      		} else {
 | 
						|
      			this.dateFilterTxt = e.value[0]
 | 
						|
      			this.searchStartTime = uni.$u.timeFormat(currentDate, 'yyyy-mm-dd 00:00:00');
 | 
						|
      		}
 | 
						|
      	}
 | 
						|
      	this.closePicker()
 | 
						|
      },
 | 
						|
      closePicker() {
 | 
						|
        this.comPickerInfo = {
 | 
						|
          showPicker: false,
 | 
						|
          columns: [],
 | 
						|
          title: '',
 | 
						|
          name: ''
 | 
						|
        }
 | 
						|
      },
 | 
						|
    },
 | 
						|
	onReachBottom() {
 | 
						|
		// 页码 +1
 | 
						|
		if (this.total > 10 * this.pageIndex)
 | 
						|
			this.pageIndex++
 | 
						|
		// 重新获取列表数据
 | 
						|
	},
 | 
						|
	watch: {
 | 
						|
		pageIndex(n, o) {
 | 
						|
			this.loadData()
 | 
						|
		},
 | 
						|
		keyword(n, o) {
 | 
						|
			this.pageIndex = 1
 | 
						|
			this.keyword = n
 | 
						|
			this.loadData()
 | 
						|
		},
 | 
						|
		searchStartTime(n, o) {
 | 
						|
			this.pageIndex = 1
 | 
						|
			this.searchStartTime = n
 | 
						|
			this.loadData()
 | 
						|
		},
 | 
						|
	}
 | 
						|
  }
 | 
						|
</script>
 | 
						|
 | 
						|
<style>
 | 
						|
	.risk-record-page {
 | 
						|
		position: relative;
 | 
						|
	}
 | 
						|
 | 
						|
	.risk-record-page .main {
 | 
						|
			padding: 0px 16px;
 | 
						|
			position: relative;
 | 
						|
		}
 | 
						|
	
 | 
						|
		.risk-record-page>>>.uni-searchbar {
 | 
						|
			padding: 0px;
 | 
						|
			display: flex;
 | 
						|
			align-items: center;
 | 
						|
			font-size: 12px;
 | 
						|
	
 | 
						|
			.uni-searchbar__box {
 | 
						|
				height: 30px;
 | 
						|
			}
 | 
						|
	
 | 
						|
			.uni-searchbar__box-icon-clear {
 | 
						|
				display: flex;
 | 
						|
				align-items: center;
 | 
						|
			}
 | 
						|
	
 | 
						|
			.uni-input-placeholder {}
 | 
						|
	
 | 
						|
			.uni-searchbar__box-search-input {
 | 
						|
				font-size: 12px;
 | 
						|
			}
 | 
						|
	
 | 
						|
			.uni-searchbar__text-placeholder {
 | 
						|
				font-size: 12px;
 | 
						|
				margin-left: 0px;
 | 
						|
			}
 | 
						|
	
 | 
						|
			.uni-text {
 | 
						|
				font-size: 12px;
 | 
						|
			}
 | 
						|
		}
 | 
						|
	
 | 
						|
		.filter-bar .search-bar {
 | 
						|
			margin-left: 20px;
 | 
						|
			margin-right: 20px;
 | 
						|
			width: 100%;
 | 
						|
			display: flex;
 | 
						|
			flex: 1;
 | 
						|
			align-items: center;
 | 
						|
			font-size: 12px;
 | 
						|
		}
 | 
						|
	
 | 
						|
		.filter-bar {
 | 
						|
			display: flex;
 | 
						|
			justify-content: space-between;
 | 
						|
			align-items: center;
 | 
						|
			background-color: #ffffff;
 | 
						|
			padding: 10px 16px 10px 16px;
 | 
						|
			box-shadow: 0px 0px 5px 0px #eaedf4;
 | 
						|
		}
 | 
						|
 | 
						|
	.filter-bar .filter {
 | 
						|
		display: flex;
 | 
						|
		align-items: center;
 | 
						|
		font-size: 12px;
 | 
						|
		line-height: 18px;
 | 
						|
		color: #333;
 | 
						|
	}
 | 
						|
 | 
						|
	.content-list {
 | 
						|
		padding: 10px 0;
 | 
						|
	}
 | 
						|
 | 
						|
	.content .field {
 | 
						|
		font-size: 12px;
 | 
						|
		line-height: 18px;
 | 
						|
		margin-bottom: 4px;
 | 
						|
	}
 | 
						|
 | 
						|
	.content .field .label {
 | 
						|
		color: #666;
 | 
						|
	}
 | 
						|
 | 
						|
	.content .field .value {
 | 
						|
		color: #333333;
 | 
						|
	}
 | 
						|
	.status {
 | 
						|
		background-color: rgba(5, 109, 232, 0.1);
 | 
						|
		color: #056DE8;
 | 
						|
		padding: 0px 5px 0px 5px;
 | 
						|
		border-radius: 5px;
 | 
						|
	}
 | 
						|
</style> |