<template>
|
<view class="uni-task-menu-search">
|
<view class="cantainer-menu-content">
|
<view class="uni-panel-line">
|
<view class="uni-panel-search-content">
|
<view class="uni-panel-search-ico">
|
<uni-icons color="#333" size="20" type="search" />
|
</view>
|
<input class="uni-panel-search-input" type="text" v-model="searchtext" placeholder="输入任务名称" />
|
<text class="uni-panel-search-ico fs-delete_solid_circle" style="color: gray;" v-if="searchtext"
|
@click="clickCancelKey"></text>
|
</view>
|
</view>
|
<view class="uni-panel-line">
|
项目
|
</view>
|
|
<view class="uni-panel-line" v-if="projList.length > 0">
|
<view class="uni-panel-search-content">
|
<view class="uni-panel-search-left" @click="clickShowProj">
|
<uni-icons color="#333" size="20" type="search" />
|
<text class="uni-down-arrow"></text>
|
</view>
|
<input class="uni-panel-search-input" type="text" v-model="searchProjText" placeholder="输入项目名称" />
|
<text class="uni-panel-search-ico fs-delete_solid_circle" style="color: gray;" v-if="searchProjText"
|
@click="clickCancelProjKey"></text>
|
|
</view>
|
</view>
|
<view class="uni-panel-line" v-if="showProjList">
|
<view class="uni-proj-content">
|
<view class="uni-proj-item" v-for="(item) in projList" :key="item.id" @click="menuSelChange(item)">
|
{{item.name}}
|
</view>
|
</view>
|
</view>
|
|
<view class="uni-panel-line">
|
任务排序
|
</view>
|
|
<view class="uni-panel-line">
|
<uni-data-select v-model="taskSortCur" :localdata="taskSortTypes" :clear="false"></uni-data-select>
|
</view>
|
<view class="uni-panel-line" v-if="taskType!='需要我审核的'">
|
任务状态
|
</view>
|
<view class="uni-panel-line" v-if="taskType!='需要我审核的'">
|
<uni-data-select v-model="taskStatusCur" :localdata="taskStatusGroup" clear></uni-data-select>
|
</view>
|
<view class="uni-panel-line">
|
任务重要紧急度
|
</view>
|
|
<view class="uni-panel-line">
|
<uni-data-select v-model="taskQuadrantCur" :localdata="taskQuadrantTypes" clear></uni-data-select>
|
</view>
|
</view>
|
<view class="uni-panel-bottom">
|
<button class="uni-panel-button" @click="clickReset">清空搜索</button>
|
<button class="uni-panel-button" @click="clickFinish">搜索</button>
|
</view>
|
<!-- 普通菜单 -->
|
<uni-popup ref="popupMenu" background-color="transparent" maskBackgroundColor="rgba(0, 0, 0, 0.2)">
|
<view class="popup-content" @click="closeMenu">
|
<view class="popup-content-menu ">
|
<button class="popup-content-menu-item" v-for="(item,index) in projList" :key="index"
|
@click="menuSelChange(item)">
|
{{item.name}}
|
</button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<script>
|
import Session from "@/common/utils.js"
|
import {
|
showModal,
|
showToast,
|
showLoading,
|
hideLoading
|
} from "@/common/Page.js"
|
import {
|
getPrjList as taskGetPrjList,
|
} from "@/api/gungho/task.js"
|
export default {
|
name: "pageTaskMenuSearch",
|
emits: ['selTaskFactor'],
|
props: {
|
taskType: {
|
type: String,
|
default () {
|
return ""
|
}
|
},
|
taskSort: {
|
type: Number,
|
default () {
|
return 5
|
}
|
},
|
|
taskSearchKey: {
|
type: String,
|
default () {
|
return ""
|
}
|
},
|
taskProjKey: {
|
type: String,
|
default () {
|
return ""
|
}
|
},
|
taskStatus: {
|
type: Array,
|
default () {
|
return ["待完成"]
|
}
|
},
|
taskQuadrant: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
searchtext: '',
|
searchProjText: '',
|
taskSortCur: "5",
|
taskStatusCur: "待完成",
|
taskQuadrantCur: "",
|
taskStatusGroup: [{
|
value: '待完成',
|
text: '待完成',
|
},
|
{
|
value: '已完成',
|
text: '已完成'
|
},
|
{
|
value: '已提交',
|
text: '已提交'
|
},
|
{
|
value: '已超期',
|
text: '已超期'
|
},
|
{
|
value: '退回',
|
text: '退回'
|
},
|
],
|
taskQuadrantTypes: [{
|
value: '3',
|
text: '重要紧急'
|
},
|
{
|
value: '2',
|
text: '紧急不重要'
|
},
|
{
|
value: '1',
|
text: '重要不紧急',
|
},
|
{
|
value: '0',
|
text: '不重要不紧急',
|
}
|
|
],
|
showProjList: false,
|
projList: [],
|
|
}
|
},
|
computed: {
|
taskSortTypes() {
|
if (this.taskType == '需要我审核的') {
|
let list = [{
|
value: '0',
|
text: '按优先级最高',
|
},
|
{
|
value: '3',
|
text: '按截止时间最近'
|
},
|
{
|
value: '4',
|
text: '按创建时间最早'
|
},
|
{
|
value: '5',
|
text: '按创建时间最晚',
|
},
|
{
|
value: '6',
|
text: '按提交时间最早'
|
},
|
{
|
value: '7',
|
text: '按提交时间最晚',
|
},
|
]
|
return list
|
|
}
|
let list = [{
|
value: '0',
|
text: '按优先级最高',
|
},
|
{
|
value: '1',
|
text: '按开始时间最早'
|
},
|
{
|
value: '2',
|
text: '按开始时间最晚'
|
},
|
{
|
value: '3',
|
text: '按截止时间最近'
|
},
|
{
|
value: '4',
|
text: '按创建时间最早'
|
},
|
{
|
value: '5',
|
text: '按创建时间最晚',
|
},
|
]
|
return list
|
}
|
|
},
|
watch: {
|
taskType(newVal) {
|
this.loadMyTaskPrjList()
|
},
|
|
taskSearchKey(newVal) {
|
this.searchtext = newVal
|
},
|
taskProjKey(newVal) {
|
this.searchProjText = newVal
|
},
|
taskSort(newVal) {
|
|
this.taskSortCur = `${newVal}`
|
|
|
},
|
taskStatus(newVal) {
|
let values = newVal
|
console.log("taskStatus", newVal)
|
if (Array.isArray(values)) {
|
if (values.length > 0) {
|
this.taskStatusCur = values[0]
|
}
|
// let items = this.taskStatusGroup
|
// for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
// delete items[i].checked
|
// for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
|
// if (items[i].value === values[j]) {
|
// items[i].checked = true
|
// }
|
// }
|
// }
|
}
|
},
|
taskQuadrant(newVal) {
|
let values = newVal
|
if (Array.isArray(values)) {
|
if (values.length > 0) {
|
this.taskQuadrantTypes = values[0]
|
}
|
// let items = this.taskQuadrantTypes
|
// for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
// delete items[i].checked
|
// for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
|
// if (items[i].value === values[j]) {
|
// items[i].checked = true
|
// }
|
// }
|
// }
|
}
|
},
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
loadMyTaskPrjList() {
|
this.projList = []
|
let tyle = 0
|
if (this.taskType == '我创建的') {
|
tyle = 1
|
} else if (this.taskType == '我负责的') {
|
tyle = 2
|
} else if (this.taskType == '我相关的') {
|
tyle = 3
|
} else if (this.taskType == '我的任务') {
|
tyle = 0
|
} else {
|
this.setData({
|
showProjList: false
|
})
|
return
|
}
|
|
taskGetPrjList().then((res) => {
|
this.projList = res || []
|
}).catch((rej) => {
|
this.projList = []
|
console.log("loadMyTaskPrjList failed", rej)
|
showModal(rej, "错误", false)
|
})
|
|
},
|
|
radioSortChange(index) {
|
this.taskSortCur = index;
|
},
|
radioStatusChange(index) {
|
this.taskStatusCur = index;
|
},
|
radioQuadrantChange(index) {
|
this.taskQuadrantCur = index;
|
},
|
checkboxStatusChange(evt) {
|
let values = evt.detail.value
|
let items = this.taskStatusGroup
|
for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
delete items[i].checked
|
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
|
if (items[i].value === values[j]) {
|
items[i].checked = true
|
}
|
}
|
}
|
},
|
checkboxQuadrantChange(evt) {
|
let values = evt.detail.value
|
let items = this.taskQuadrantTypes
|
for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
delete items[i].checked
|
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
|
if (items[i].value === values[j]) {
|
items[i].checked = true
|
}
|
}
|
}
|
},
|
clickReset() {
|
this.searchtext = ""
|
this.searchProjText = ""
|
this.taskSortCur = '5'
|
this.taskStatusCur = ''
|
this.taskQuadrantCur = ''
|
this.$emit('selTaskFactor', {
|
sort: this.taskSortCur,
|
status: [],
|
quadrant: [],
|
key: this.searchtext,
|
keyProj: this.searchProjText
|
})
|
// console.log("clickReset");
|
},
|
clickFinish() {
|
var _this = this
|
let sStatus = []
|
let sQuadrant = []
|
// let sSort = "-1"
|
// if (_this.taskSortCur >= 0)
|
// sSort = _this.taskSortTypes[_this.taskSortCur].value
|
// let sQuadrant = []
|
// let items = this.taskStatusGroup
|
// for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
// if (items[i].checked) {
|
// sStatus.push(items[i].value)
|
// }
|
// }
|
// items = this.taskQuadrantTypes
|
// for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
// if (items[i].checked) {
|
// sQuadrant.push(items[i].value)
|
// }
|
// }
|
if (_this.taskStatusCur)
|
sStatus.push(_this.taskStatusCur)
|
if (_this.taskQuadrantCur)
|
sQuadrant.push(_this.taskQuadrantCur)
|
this.$emit('selTaskFactor', {
|
sort: Number(_this.taskSortCur),
|
status: sStatus,
|
quadrant: sQuadrant,
|
key: this.searchtext,
|
keyProj: this.searchProjText
|
})
|
|
|
|
},
|
clickCancelKey() {
|
this.searchtext = ""
|
},
|
clickCancelProjKey() {
|
|
this.setData({
|
showProjList: false,
|
searchProjText: ""
|
})
|
},
|
clickShowProj() {
|
if (this.projList.length > 0) {
|
console.log("clickShowProj")
|
this.setData({
|
showProjList: !this.showProjList
|
})
|
}
|
|
},
|
menuSelChange(item) {
|
this.setData({
|
showProjList: false,
|
searchProjText: item.name
|
})
|
},
|
showError(ex) {
|
let tip = typeof ex == 'string' ? ex : typeof ex.err_msg == 'string' ? ex.err_msg : typeof ex.errMsg ==
|
'string' ? ex.errMsg : ""
|
showModal(tip, "提示", false)
|
},
|
|
},
|
mounted() {
|
this.searchProjText = this.taskProjKey
|
this.searchtext = this.taskSearchKey
|
if (this.taskSort == -1) {
|
this.taskSortCur = '5'
|
} else {
|
// let curIndex = this.taskSortTypes.findIndex((item, index, arr) => {
|
// return item.value == this.taskSort;
|
// })
|
// this.taskSortCur = curIndex
|
this.taskSortCur = `${this.taskSort}`
|
}
|
|
let values = this.taskStatus
|
if (Array.isArray(values)) {
|
if (values.length > 0) {
|
this.taskStatusCur = values[0]
|
}
|
// let items = this.taskStatusGroup
|
// for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
// delete items[i].checked
|
// for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
|
// if (items[i].value === values[j]) {
|
// items[i].checked = true
|
// }
|
// }
|
// }
|
}
|
values = this.taskQuadrant
|
if (Array.isArray(values)) {
|
if (values.length > 0) {
|
this.taskQuadrantTypes = values[0]
|
}
|
}
|
this.loadMyTaskPrjList()
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.uni-task-menu-search {
|
display: flex;
|
background-color: transparent;
|
flex-direction: column !important;
|
width: 540rpx;
|
height: 100%;
|
margin-top: 10rpx;
|
|
.cantainer-menu-content {
|
display: flex;
|
flex: 1;
|
flex-direction: column !important;
|
width: 100%;
|
padding: 2px 0 8px;
|
overflow: auto;
|
bottom: 60px;
|
}
|
|
.uni-panel-bottom {
|
display: flex;
|
width: 100%;
|
height: 60px;
|
background-color: #eee;
|
}
|
|
.uni-panel-button {
|
flex: 1;
|
color: #fff;
|
margin: 6px 5px 8px;
|
border-radius: 8px;
|
background-color: #00aaff;
|
}
|
|
.uni-panel-disable-button {
|
flex: 1;
|
margin: 6px 5px 8px;
|
background-color: #fff;
|
color: #aaa;
|
}
|
|
.uni-panel-line {
|
width: calc(100% - 45rpx);
|
padding: 10rpx 30rpx 10rpx 15rpx;
|
}
|
|
.uni-panel-title {
|
font-weight: 500;
|
}
|
|
.uni-panel-search {
|
|
display: flex;
|
align-items: center !important;
|
padding: 0 4px;
|
font-size: 14px;
|
top: 0;
|
}
|
|
.uni-panel-search-content {
|
display: flex;
|
width: 100%;
|
background-color: #fff;
|
border: 1px solid #eee;
|
border-radius: 5px;
|
padding: 2px;
|
flex-direction: row !important;
|
align-items: center;
|
}
|
|
|
|
.uni-panel-search-content:focus {
|
border: 1px solid blue;
|
}
|
|
.uni-panel-search-input {
|
flex: 1;
|
margin: 4px 5px;
|
}
|
|
.uni-panel-search-ico {
|
display: flex;
|
margin: 4px 0;
|
font-size: 18px;
|
|
}
|
|
.uni-panel-search-left {
|
display: flex;
|
flex-direction: row !important;
|
justify-content: center;
|
|
.uni-down-arrow {
|
display: flex;
|
margin-left: -2px;
|
margin-top: 10px;
|
border: 7px solid #ffffff;
|
border-color: transparent;
|
border-top-color: #333
|
}
|
}
|
|
.uni-proj-content {
|
display: flex;
|
flex-direction: column !important;
|
border: 1px solid #dcdee2;
|
|
margin-top: -20rpx;
|
border-top: 0;
|
padding: 10px;
|
.uni-proj-item {
|
display: flex;
|
flex-direction: row !important;
|
align-items: center;
|
background-color: #eeeeee80;
|
font-size: 14px;
|
// height: 32px;
|
// line-height: 32px;
|
border-bottom: 1px solid #eee;
|
padding: 8px;
|
white-space: nowrap !important;
|
overflow: hidden !important;
|
text-overflow: ellipsis !important;
|
}
|
}
|
}
|
</style>
|
