|
|
@@ -3,10 +3,10 @@
|
|
|
<view class="index_container">
|
|
|
<view class="search_container">
|
|
|
<uni-row>
|
|
|
- <uni-col :xs="6" :sm="4">
|
|
|
+ <uni-col :xs="3" :sm="2">
|
|
|
<view @click="openPopup" class="popup_button_container">
|
|
|
<text class="ygoa_icon icon-filter"></text>
|
|
|
- <text class="button_text">{{ candidates[searchItem] }}</text>
|
|
|
+ <!-- <text class="button_text">筛选</text> -->
|
|
|
</view>
|
|
|
</uni-col>
|
|
|
<view class="search_bar">
|
|
|
@@ -20,7 +20,7 @@
|
|
|
</uni-search-bar>
|
|
|
</uni-col>
|
|
|
<!-- 类型 下拉框搜索 -->
|
|
|
- <uni-col v-else-if="1 == searchItem" :xs="18" :sm="20">
|
|
|
+ <uni-col v-else-if="1 == searchItem" :xs="16" :sm="18">
|
|
|
<picker class="picker_container" @change="bindPickerChange" :value="pickerItem"
|
|
|
:range="pickerItems" range-key="modelName">
|
|
|
<view class="uni-input input_text">
|
|
|
@@ -33,12 +33,18 @@
|
|
|
</view>
|
|
|
</uni-col>
|
|
|
<!-- 时间范围搜索 -->
|
|
|
- <uni-col v-else-if="2 == searchItem" :xs="18" :sm="20">
|
|
|
+ <uni-col v-else-if="2 == searchItem" :xs="16" :sm="18">
|
|
|
<view class="datetime_picker_container">
|
|
|
<uni-datetime-picker type="daterange" @change="datetimePickerChange" @clear="cancelSearch"
|
|
|
:border="false" />
|
|
|
</view>
|
|
|
</uni-col>
|
|
|
+ <!-- 清空筛选按钮 -->
|
|
|
+ <uni-col :xs="2" :sm="2">
|
|
|
+ <view @click="cancelSearch" class="clear_button_container">
|
|
|
+ <uni-icons type="clear" size="calc(24px + .5*(1rem - 16px))" color="#999"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
</view>
|
|
|
</uni-row>
|
|
|
</view>
|
|
|
@@ -53,11 +59,63 @@
|
|
|
</view>
|
|
|
<view class="popup_container">
|
|
|
<uni-popup ref="searchItemPopup" type="bottom">
|
|
|
- <uni-list>
|
|
|
- <uni-list-item @click="clickSearchItem(index)" v-for="(item, index) in candidates" :key="index"
|
|
|
- clickable :title="item">
|
|
|
- </uni-list-item>
|
|
|
- </uni-list>
|
|
|
+ <!-- 弹窗标题 -->
|
|
|
+ <!-- <view class="popup-title">流程类型分类</view> -->
|
|
|
+ <!-- 流程分类列表 -->
|
|
|
+ <uni-section title="流程类型" type="line" class="uni-section">
|
|
|
+ <uni-collapse :accordion="true">
|
|
|
+ <uni-list class="flow-category-list">
|
|
|
+ <!-- 一级分类：流程类型（遍历ftypeList） -->
|
|
|
+ <uni-collapse-item
|
|
|
+ class="flow-type-group"
|
|
|
+ :open="false"
|
|
|
+ :show-animation="true"
|
|
|
+ v-for="(type, typeIdx) in flowList.ftypeList"
|
|
|
+ :key="typeIdx"
|
|
|
+ :title="type.typeName"
|
|
|
+ >
|
|
|
+ <template v-slot:title>
|
|
|
+ <view class="group-header">
|
|
|
+ <!-- 流程类型图标（可自定义） -->
|
|
|
+ <uni-icons type="list" size="24rpx" class="group-icon" />
|
|
|
+ <!-- 流程类型名称 -->
|
|
|
+ <text class="group-name">{{ type.typeName }}</text>
|
|
|
+ <!-- 流程类型下的总数量角标 -->
|
|
|
+ <!-- <view class="badge" v-if="getTypeItemCount(type.typeId) > 0">
|
|
|
+ {{ getTypeItemCount(type.typeId) }}
|
|
|
+ </view> -->
|
|
|
+ <uni-badge :text="getTypeItemCount(type.typeId)" v-if="getTypeItemCount(type.typeId) > 0"></uni-badge>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view v-for="(item, index) in flowList.fList" :index="index" :key="item.modelId">
|
|
|
+ <!-- <uni-list-item @click="searchByModelId(item)" v-if="type.typeId === item.typeId.typeId"
|
|
|
+ clickable class=""> -->
|
|
|
+ <view
|
|
|
+ @click="searchByModelId(item)"
|
|
|
+ v-if="type.typeId === item.typeId.typeId"
|
|
|
+ style="padding: 16rpx 60rpx; background: #fff; border-bottom: 1px solid #f5f5f7;"
|
|
|
+ class="flow-item-sub"
|
|
|
+ >
|
|
|
+ <view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
|
|
+ <text class="sub-item-title">{{ item.modelName }}</text>
|
|
|
+ <uni-badge :text="getModelItemCount(item.modelId)" v-if="getModelItemCount(item.modelId) > 0"></uni-badge>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="sub-item-title"> -->
|
|
|
+ <!-- <text>{{ item.modelName }}</text> -->
|
|
|
+ <!-- 单个流程项角标（根据modelId统计待办数量） -->
|
|
|
+ <!-- <view class="badge small-badge" v-if="getModelItemCount(item.modelId) > 0">
|
|
|
+ {{ getModelItemCount(item.modelId) }}
|
|
|
+ </view> -->
|
|
|
+ <!-- </view> -->
|
|
|
+ </view>
|
|
|
+ <!-- </uni-list-item> -->
|
|
|
+ </view>
|
|
|
+ </uni-collapse-item>
|
|
|
+ </uni-list>
|
|
|
+ </uni-collapse>
|
|
|
+ </uni-section>
|
|
|
+ <!-- <uni-section title="发起人" type="line" @click="clickSearchItem('createUser')"></uni-section>
|
|
|
+ <uni-section title="时间" type="line" @click="clickSearchItem('createTime')"></uni-section> -->
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -96,6 +154,16 @@
|
|
|
handleToProcessDetail({ username, insId, tinsId, insName, control })
|
|
|
})
|
|
|
}
|
|
|
+ const staffId = userStore.user.useId
|
|
|
+ const unitId = userStore.user.unitId
|
|
|
+ getProcessList(staffId, unitId).then(res => {
|
|
|
+ flowList.value = res.returnParams // 设置flowList
|
|
|
+ // 先加载完流程列表数据，再获取待办流程数量
|
|
|
+ // 使用 setTimeout 确保流程列表先显示
|
|
|
+ setTimeout(() => {
|
|
|
+ getProcessCountsByType()
|
|
|
+ }, 500) // 延迟500毫秒调用，确保流程列表数据先加载
|
|
|
+ })
|
|
|
})
|
|
|
|
|
|
|
|
|
@@ -105,6 +173,11 @@
|
|
|
const searchItem = ref(0)
|
|
|
// 搜索项弹出层
|
|
|
const searchItemPopup = ref(null)
|
|
|
+ // 待办流程数量按类型分组
|
|
|
+ const processCountsByType = ref({})
|
|
|
+ // 待办流程数量按模型分组
|
|
|
+ const processCountsByModel = ref({})
|
|
|
+
|
|
|
// 打开搜索项弹出层
|
|
|
function openPopup() {
|
|
|
searchItemPopup.value.open()
|
|
|
@@ -115,8 +188,16 @@
|
|
|
}
|
|
|
// 选中搜索项
|
|
|
function clickSearchItem(item) {
|
|
|
- searchItem.value = item
|
|
|
- if (item == 1 && pickerItems.value.length == 1) initPickerItems()
|
|
|
+ debugger
|
|
|
+ // searchItem.value = item
|
|
|
+ // if (item == 1 && pickerItems.value.length == 1) initPickerItems()
|
|
|
+ if(item == "createUser") {
|
|
|
+
|
|
|
+ } else if(item == "createTime") {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ search(item.modelId)
|
|
|
+ }
|
|
|
closePopup()
|
|
|
}
|
|
|
// 搜索参数
|
|
|
@@ -136,11 +217,21 @@
|
|
|
// 下拉框搜索
|
|
|
const pickerItems = ref([{ modelId: '', modelName: '无' }])
|
|
|
const pickerItem = ref(0)
|
|
|
+ // 流程列表
|
|
|
+ const flowList = ref({
|
|
|
+ fList: [],
|
|
|
+ ftypeList: [
|
|
|
+ {
|
|
|
+ typeName: ''
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ })
|
|
|
// 获取流程宫格数据
|
|
|
function initPickerItems() {
|
|
|
const staffId = userStore.user.useId
|
|
|
const unitId = userStore.user.unitId
|
|
|
getProcessList(staffId, unitId).then(res => {
|
|
|
+ // flowList.value = res.returnParams // 设置flowList
|
|
|
pickerItems.value = res.returnParams.fList.map(({ modelId, modelName }) => {
|
|
|
return { modelId, modelName }
|
|
|
})
|
|
|
@@ -157,6 +248,13 @@
|
|
|
function datetimePickerChange(event) {
|
|
|
search(event)
|
|
|
}
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ function searchByModelId(item) {
|
|
|
+ queryParams.value = { 'modelId': item.modelId };
|
|
|
+ processListRef.value.onClickItem() // 调用子组件刷新数据
|
|
|
+ closePopup()
|
|
|
+ }
|
|
|
// 搜索
|
|
|
function search(queryParam) {
|
|
|
switch (searchItem.value) {
|
|
|
@@ -169,6 +267,17 @@
|
|
|
};
|
|
|
break;
|
|
|
}
|
|
|
+ // debugger
|
|
|
+ // if(queryParam.value == "createUser") {
|
|
|
+ // queryParams.value = { 'name': queryParam };
|
|
|
+ // } else if(queryParam.value == "createTime") {
|
|
|
+ // queryParams.value = {
|
|
|
+ // 'starttime': queryParam[0],
|
|
|
+ // 'endtime': queryParam[1]
|
|
|
+ // };
|
|
|
+ // } else {
|
|
|
+ // queryParams.value = { 'modelId': queryParam };
|
|
|
+ // }
|
|
|
processListRef.value.onClickItem() // 调用子组件刷新数据
|
|
|
}
|
|
|
// 取消搜索
|
|
|
@@ -176,7 +285,53 @@
|
|
|
queryParams.value = {}
|
|
|
processListRef.value.onClickItem() // 调用子组件刷新数据
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ // 获取待办流程数量并按类型分组
|
|
|
+ function getProcessCountsByType() {
|
|
|
+ const params = {
|
|
|
+ staffId: userStore.user.useId,
|
|
|
+ page: 1,
|
|
|
+ pageNum: 9999, // 获取所有待办流程
|
|
|
+ modelId: "",
|
|
|
+ control: 1,
|
|
|
+ queryParams: {}
|
|
|
+ }
|
|
|
+
|
|
|
+ getUserProcess(params).then(({ returnParams }) => {
|
|
|
+ const processList2 = returnParams.list || []
|
|
|
+ // 初始化计数器
|
|
|
+ const countsByType = {}
|
|
|
+ const countsByModel = {}
|
|
|
+ // 遍历流程列表，按typeId和modelId统计数量
|
|
|
+ processList2.forEach(process => {
|
|
|
+ // 根据process.modelId与flowList.value.fList中的item.modelId进行匹配
|
|
|
+ const matchingFlow = flowList.value.fList.find(f => f.modelId === process.modelId)
|
|
|
+ if (matchingFlow && matchingFlow.typeId) {
|
|
|
+ const typeId = matchingFlow.typeId.typeId
|
|
|
+ // 按typeId统计
|
|
|
+ countsByType[typeId] = (countsByType[typeId] || 0) + 1
|
|
|
+ // 按modelId统计
|
|
|
+ countsByModel[process.modelId] = (countsByModel[process.modelId] || 0) + 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 更新响应式数据
|
|
|
+ processCountsByType.value = countsByType
|
|
|
+ processCountsByModel.value = countsByModel
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('获取待办流程数量失败:', error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据typeId获取待办数量
|
|
|
+ function getTypeItemCount(typeId) {
|
|
|
+ return processCountsByType.value[typeId] || 0
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据modelId获取待办数量
|
|
|
+ function getModelItemCount(modelId) {
|
|
|
+ return processCountsByModel.value[modelId] || 0
|
|
|
+ }
|
|
|
+
|
|
|
// 分段器选项
|
|
|
const items = reactive(['我的', '抄送', '待办', '在办', '办结'])
|
|
|
// 分段器选项
|
|
|
@@ -244,6 +399,7 @@
|
|
|
}
|
|
|
// 跳转到流程详情页
|
|
|
function handleToProcessDetail({ username, insId, tinsId, insName, control }) {
|
|
|
+ debugger
|
|
|
let url = '/pages/process/detail/index?insId=' + insId + '&insName=' + insName + '&control=' + control
|
|
|
if (tinsId && current.value != 1) { // 排除抄送流程的tinsId
|
|
|
url = url + '&tinsId=' + tinsId
|
|
|
@@ -279,6 +435,12 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ ::v-deep .uni-badge {
|
|
|
+ height: calc(1.5rem + 0px) !important;
|
|
|
+ min-width: calc(1.5rem + 0px) !important;
|
|
|
+ line-height: calc(1.375rem + 0px) !important;
|
|
|
+ font-size: calc(1.125rem + 0px) !important;
|
|
|
+ }
|
|
|
// @import url("@/static/font/ygoa/iconfont.css");
|
|
|
.search_container {
|
|
|
padding: 10px 0;
|
|
|
@@ -306,6 +468,22 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .clear_button_container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 5px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
::v-deep .search_bar {
|
|
|
.uni-searchbar {
|
|
|
padding: 0;
|
|
|
@@ -535,4 +713,129 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ /* 弹窗整体样式 */
|
|
|
+ .popup_container {
|
|
|
+ // min-height: 1000rpx;
|
|
|
+ ::v-deep .uni-popup__content {
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 弹窗标题 */
|
|
|
+ .popup-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ border-bottom: 1px solid #f5f5f7;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ /* 流程分类列表容器 */
|
|
|
+ .flow-category-list {
|
|
|
+ ::v-deep .uni-list {
|
|
|
+ background: #fff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 一级分类：流程类型组样式 */
|
|
|
+ .flow-type-group {
|
|
|
+ ::v-deep .uni-collapse-item__content {
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .group-icon {
|
|
|
+ margin-right: 16rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ flex: 1;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-arrow {
|
|
|
+ color: #999;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 二级分类：流程项样式 */
|
|
|
+ .flow-item-sub {
|
|
|
+ ::v-deep .uni-list-item__container {
|
|
|
+ padding: 16rpx 60rpx; /* 缩进显示，区分一级分类 */
|
|
|
+ border: none;
|
|
|
+ // 点击时的高亮效果（可选）
|
|
|
+ &:active {
|
|
|
+ background-color: #F0F0F0; // 点击时加深一点，提升交互体验
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-item-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 通用角标样式 */
|
|
|
+ .badge {
|
|
|
+ min-width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ff4d4f;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ display: inline-block !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 小角标（单个流程项使用，可选） */
|
|
|
+ .small-badge {
|
|
|
+ min-width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ display: inline-block !important;
|
|
|
+ }
|
|
|
+ ::v-deep .uni-section {
|
|
|
+ overflow-y: scroll;
|
|
|
+ max-height: 1000rpx;
|
|
|
+ min-height: 1000rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+// 给 uni-list-item 加相对定位，约束 right 插槽
|
|
|
+ ::v-deep .uni-list-item {
|
|
|
+ position: relative !important; // 关键：约束绝对定位的 right 插槽
|
|
|
+ width: 100% !important; // 确保列表项占满父容器
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调整 uni-badge 样式，避免溢出
|
|
|
+ ::v-deep .uni-badge {
|
|
|
+ position: static !important; // 取消绝对定位，改为静态流布局
|
|
|
+ margin-left: 10rpx !important; // 与文字保持间距
|
|
|
+ display: inline-block !important;
|
|
|
+ background-color: #ff4d4f !important;
|
|
|
+ }
|
|
|
</style>
|
HD_wangm