|
|
@@ -0,0 +1,859 @@
|
|
|
+<template>
|
|
|
+ <page-meta root-font-size="system" />
|
|
|
+ <view class="index_container">
|
|
|
+ <view class="search_container">
|
|
|
+ <uni-row>
|
|
|
+ <uni-col :xs="3" :sm="2">
|
|
|
+ <view @click="openPopup" class="popup_button_container">
|
|
|
+ <text class="ygoa_icon icon-filter"></text>
|
|
|
+ <!-- <text class="button_text">筛选</text> -->
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <view class="search_bar">
|
|
|
+ <!-- 输入框搜索 -->
|
|
|
+ <uni-col v-if="0 == searchItem" :xs="17" :sm="19">
|
|
|
+ <uni-search-bar @confirm="searchBarConfirm" @cancel="cancelSearch" @blur="searchBarOnBlur"
|
|
|
+ clearButton="none" placeholder="搜索栏">
|
|
|
+ <template v-slot:searchIcon>
|
|
|
+ <uni-icons type="search" size="calc(30px + .5*(1rem - 16px))"></uni-icons>
|
|
|
+ </template>
|
|
|
+ </uni-search-bar>
|
|
|
+ </uni-col>
|
|
|
+ <!-- 类型 下拉框搜索 -->
|
|
|
+ <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">
|
|
|
+ {{ pickerItems[pickerItem].modelName }}
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ <view @click="search(pickerItems[pickerItem].modelId)" class="picker_button_container">
|
|
|
+ <uni-icons type="search" size="calc(30px + .5*(1rem - 16px))"></uni-icons>
|
|
|
+ <text class="button_text">搜索</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <!-- 时间范围搜索 -->
|
|
|
+ <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>
|
|
|
+ <view class="segmented_control_container">
|
|
|
+ <uni-segmented-control :current="current" :values="items" @clickItem="clickSegmentItem" styleType="text"
|
|
|
+ activeColor="#409eff"></uni-segmented-control>
|
|
|
+ </view>
|
|
|
+ <view class="process_list">
|
|
|
+ <process-list ref="processListRef" @clickCancel="handleToCancelProcess" @clickSegment="getProcessData"
|
|
|
+ @clickItem="handleToProcessDetail" @scrollToBottom="getProcessPage" :current="current" :pSize="5"
|
|
|
+ :pageNo="1"></process-list>
|
|
|
+ </view>
|
|
|
+ <view class="popup_container">
|
|
|
+ <uni-popup ref="searchItemPopup" type="bottom">
|
|
|
+ <!-- 弹窗标题 -->
|
|
|
+ <!-- <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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import processList from '@/components/ygoa/processList.vue'
|
|
|
+ import { onShow, onLoad } from '@dcloudio/uni-app'
|
|
|
+ import { reactive, ref, onMounted } from 'vue';
|
|
|
+ import $tab from '@/plugins/tab.js'
|
|
|
+ import $modal from '@/plugins/modal.js'
|
|
|
+ import { getUserProcess, getUserProcessed, getUserProcessing, getUserAllProcess, getUserCopyProcess, cancelProcessFlow, getProcessList, getProcessFormInfo } from '@/api/process';
|
|
|
+ import { useUserStore } from '@/store/user';
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ uni.$on('ReloadProcessData', () => {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ processListRef.value.onClickItem()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ onShow(() => {
|
|
|
+ uni.$emit('showTabBarBadge')
|
|
|
+ })
|
|
|
+ const userStore = useUserStore()
|
|
|
+ onLoad(({ insId, tinsId, insName, control, modelId }) => {
|
|
|
+ if (insId) {
|
|
|
+ const username = userStore.user.name
|
|
|
+ getProcessFormInfo( userStore.user.useId, insId ).then(({ returnParams }) => {
|
|
|
+ //流程流转的最后一步
|
|
|
+ const lastChecker = returnParams.processCheckers[returnParams.processCheckers.length - 1]
|
|
|
+ if (username == lastChecker.v_user && 0 !== lastChecker.n_state) {
|
|
|
+ //流程流转到当前用户且流程未撤销
|
|
|
+ tinsId = lastChecker.l_tins_id
|
|
|
+ }
|
|
|
+ handleToProcessDetail({ username, insId, tinsId, insName, control, modelId})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ 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毫秒调用，确保流程列表数据先加载
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // 搜索项
|
|
|
+ const candidates = ref(['发起者', '类型', '时间'])
|
|
|
+ // 搜索栏选中项
|
|
|
+ const searchItem = ref(0)
|
|
|
+ // 搜索项弹出层
|
|
|
+ const searchItemPopup = ref(null)
|
|
|
+ // 待办流程数量按类型分组
|
|
|
+ const processCountsByType = ref({})
|
|
|
+ // 待办流程数量按模型分组
|
|
|
+ const processCountsByModel = ref({})
|
|
|
+
|
|
|
+ // 打开搜索项弹出层
|
|
|
+ function openPopup() {
|
|
|
+ searchItemPopup.value.open()
|
|
|
+ }
|
|
|
+ // 关闭搜索项弹出层
|
|
|
+ function closePopup() {
|
|
|
+ searchItemPopup.value.close()
|
|
|
+ }
|
|
|
+ // 选中搜索项
|
|
|
+ function clickSearchItem(item) {
|
|
|
+ //debugger
|
|
|
+ // searchItem.value = item
|
|
|
+ // if (item == 1 && pickerItems.value.length == 1) initPickerItems()
|
|
|
+ if(item == "createUser") {
|
|
|
+
|
|
|
+ } else if(item == "createTime") {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ search(item.modelId)
|
|
|
+ }
|
|
|
+ closePopup()
|
|
|
+ }
|
|
|
+ // 搜索参数
|
|
|
+ const queryParams = ref({})
|
|
|
+ // 输入框搜索栏
|
|
|
+ function searchBarConfirm(e) {
|
|
|
+ // console.log('searchBarConfirm: ', e);
|
|
|
+ }
|
|
|
+ // 输入框搜索栏失去焦点
|
|
|
+ function searchBarOnBlur(queryParam) {
|
|
|
+ search(queryParam.value)
|
|
|
+ }
|
|
|
+ // 取消输入框搜索
|
|
|
+ // function searchBarCancel() {
|
|
|
+ // cancelSearch()
|
|
|
+ // }
|
|
|
+ // 下拉框搜索
|
|
|
+ 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 }
|
|
|
+ })
|
|
|
+ pickerItems.value.unshift({ modelId: '', modelName: '无' })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 搜索栏 下拉框选择项
|
|
|
+ function bindPickerChange(e) {
|
|
|
+ pickerItem.value = e.detail.value
|
|
|
+ // console.log('bindPickerChange: ', e);
|
|
|
+ }
|
|
|
+ // 时间选择器搜索
|
|
|
+ // const datetimePickerRange = ref([])
|
|
|
+ function datetimePickerChange(event) {
|
|
|
+ search(event)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ function searchByModelId(item) {
|
|
|
+ queryParams.value = { 'modelId': item.modelId };
|
|
|
+ processListRef.value.onClickItem() // 调用子组件刷新数据
|
|
|
+ closePopup()
|
|
|
+ }
|
|
|
+ // 搜索
|
|
|
+ function search(queryParam) {
|
|
|
+ switch (searchItem.value) {
|
|
|
+ case 0: queryParams.value = { 'name': queryParam }; break;
|
|
|
+ case 1: queryParams.value = { 'modelId': queryParam }; break;
|
|
|
+ case 2:
|
|
|
+ queryParams.value = {
|
|
|
+ 'starttime': queryParam[0],
|
|
|
+ 'endtime': queryParam[1]
|
|
|
+ };
|
|
|
+ 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() // 调用子组件刷新数据
|
|
|
+ }
|
|
|
+ // 取消搜索
|
|
|
+ function cancelSearch() {
|
|
|
+ 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(['我的', '抄送', '待办', '在办', '办结'])
|
|
|
+ // 分段器选项
|
|
|
+ const current = ref(items.findIndex(item => item == '待办'))
|
|
|
+ // 子组件
|
|
|
+ const processListRef = ref(null)
|
|
|
+
|
|
|
+ // 待办列表
|
|
|
+ // const processes = ref([])
|
|
|
+ // 分段器点击事件 调用子组件刷新数据
|
|
|
+ function clickSegmentItem({ currentIndex }) {
|
|
|
+ // processes.value = [] // 清空列表数据
|
|
|
+ current.value = currentIndex // 更新分段器状态
|
|
|
+ processListRef.value.onClickItem() // 调用子组件刷新数据
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 获取待办列表数据
|
|
|
+ const point = ref(0)
|
|
|
+ const requestMap = [
|
|
|
+ getUserAllProcess, // 我的
|
|
|
+ getUserCopyProcess, // 抄送
|
|
|
+ getUserProcess, // 待办
|
|
|
+ getUserProcessing, // 在办
|
|
|
+ getUserProcessed // 办结
|
|
|
+ ]
|
|
|
+ function getProcessData({ pageNo, pSize }, callback) {
|
|
|
+ const flag = point.value = new Date().getTime()
|
|
|
+ const params = {
|
|
|
+ staffId: userStore.user.useId,
|
|
|
+ page: pageNo,
|
|
|
+ pageNum: pSize,
|
|
|
+ modelId: "",
|
|
|
+ //control: 1,
|
|
|
+ queryParams: queryParams.value
|
|
|
+ }
|
|
|
+ requestMap[current.value](params).then(( { returnParams, Rows, Total } ) => {
|
|
|
+ // 只加载最新数据 防止快速连续点击分段器造成数据错乱
|
|
|
+ if (flag == point.value) {
|
|
|
+ callback(
|
|
|
+ current.value == 1 ? Rows : returnParams.list,
|
|
|
+ current.value == 1 ? Total : returnParams.total,
|
|
|
+ pageNo
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 分页获取待办列表数据
|
|
|
+ function getProcessPage({ pageNo, pSize }, callback) {
|
|
|
+ const params = {
|
|
|
+ staffId: userStore.user.useId,
|
|
|
+ page: pageNo,
|
|
|
+ pageNum: pSize,
|
|
|
+ modelId: "",
|
|
|
+ //control: 1,
|
|
|
+ queryParams: queryParams.value
|
|
|
+ }
|
|
|
+ requestMap[current.value](params).then(( { returnParams, Rows, Total } ) => {
|
|
|
+ callback(
|
|
|
+ current.value == 1 ? Rows : returnParams.list,
|
|
|
+ current.value == 1 ? Total : returnParams.total,
|
|
|
+ pageNo
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 跳转到流程详情页
|
|
|
+ function handleToProcessDetail({ username, insId, tinsId, insName, control, modelId }) {
|
|
|
+ //debugger
|
|
|
+ // 判断是否为特殊流程的审批
|
|
|
+ if (control == '0' && modelId) {
|
|
|
+ if(modelId == '200001' || modelId == '200002'){
|
|
|
+ // 跳转到通用审批页面
|
|
|
+ let url = '/pages/process/common/detail?insId=' + insId + '&insName=' + insName + '&control=' + control + '&modelId=' + modelId
|
|
|
+ if (tinsId && current.value != 1) { // 排除抄送流程的 tinsId
|
|
|
+ url = url + '&tinsId=' + tinsId
|
|
|
+ }
|
|
|
+ $tab.navigateTo(url)
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ let url = '/pages/process/detail/index?insId=' + insId + '&insName=' + insName + '&control=' + control
|
|
|
+ if (tinsId && current.value != 1) { // 抄送流程的 tinsId
|
|
|
+ url = url + '&tinsId=' + tinsId
|
|
|
+ }
|
|
|
+ $tab.navigateTo(url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 原有通用流程审批逻辑
|
|
|
+ let url = '/pages/process/detail/index?insId=' + insId + '&insName=' + insName + '&control=' + control
|
|
|
+ if (tinsId && current.value != 1) { // 抄送流程的 tinsId
|
|
|
+ url = url + '&tinsId=' + tinsId
|
|
|
+ }
|
|
|
+ $tab.navigateTo(url)
|
|
|
+ }
|
|
|
+ function handleToCancelProcess(process) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '确认撤回' + process.insName,
|
|
|
+ editable: true,
|
|
|
+ placeholderText: '请输入撤回备注',
|
|
|
+ success: ({ confirm, content }) => {
|
|
|
+ if (content == '') {
|
|
|
+ $modal.msgError('撤回备注不能为空！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (confirm) {
|
|
|
+ cancelProcessFlow(userStore.user.useId, content, process)
|
|
|
+ .then(({ returnMsg }) => {
|
|
|
+ if (returnMsg.includes('success')) {
|
|
|
+ $modal.msgSuccess('撤销成功')
|
|
|
+ // 通知列表刷新数据
|
|
|
+ processListRef.value.onClickItem() // 调用子组件刷新数据
|
|
|
+ } else {
|
|
|
+ $modal.msgError(returnMsg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+</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;
|
|
|
+
|
|
|
+ .popup_button_container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 5px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ font-size: calc(16px + .5*(1rem - 16px));
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ .ygoa_icon {
|
|
|
+ font-size: calc(16px + .5*(1rem - 16px));
|
|
|
+ }
|
|
|
+
|
|
|
+ .button_text {
|
|
|
+ font-size: calc(16px + .5*(1rem - 16px));
|
|
|
+ width: 64px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .uni-searchbar__box-search-input {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-searchbar__cancel {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker_container {
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ width: 70%;
|
|
|
+ height: 36px;
|
|
|
+
|
|
|
+ .input_text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+ border-radius: 5px;
|
|
|
+ width: 100%;
|
|
|
+ height: 26px;
|
|
|
+ color: #000;
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ line-height: 26px;
|
|
|
+ padding: 4px 8px 4px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker_button_container {
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 5px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ font-size: calc(16px + .5*(1rem - 16px));
|
|
|
+ width: 25%;
|
|
|
+
|
|
|
+ .button_text {
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: calc(16px + .5*(1rem - 16px));
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .datetime_picker_container {
|
|
|
+ .uni-date {
|
|
|
+ .uni-date-editor {
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ .uni-date-x {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ color: #000;
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px));
|
|
|
+
|
|
|
+ .uni-icons {
|
|
|
+ font-size: calc(22px + .5*(1rem - 16px));
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-date__x-input {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-date__icon-clear {
|
|
|
+ .uni-icons {
|
|
|
+ font-size: calc(22px + .5*(1rem - 16px));
|
|
|
+ // color: #c0c4cc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .segmented_control_container {
|
|
|
+ .segmented-control__text {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .process_list {
|
|
|
+ .process_contant {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px));
|
|
|
+
|
|
|
+ .button_container {
|
|
|
+ button {
|
|
|
+ font-size: calc(13px + .4*(1rem - 16px))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zp-l-text-rpx {
|
|
|
+ font-size: calc(30rpx + .5*(1rem - 16px));
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow_step_section {
|
|
|
+ .uni-section .uni-section-header {
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow_step_container {
|
|
|
+ min-height: 60px;
|
|
|
+ margin: 10px 15px;
|
|
|
+
|
|
|
+ .u-steps {
|
|
|
+ .u-steps-item {
|
|
|
+ padding-bottom: 11px;
|
|
|
+
|
|
|
+ .u-text__value--content {
|
|
|
+ font-size: calc(13px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-text__value--main {
|
|
|
+ font-size: calc(13px + .5*(1rem - 16px)) !important;
|
|
|
+ font-weight: 500 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-text__value--tips {
|
|
|
+ font-size: calc(12px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .redcontent {
|
|
|
+ .u-text__value--content {
|
|
|
+ color: #ff4500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active_step_circle {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 100px;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #A78BFA;
|
|
|
+ background-color: #A78BFA;
|
|
|
+ border-style: solid;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: background-color .3s;
|
|
|
+
|
|
|
+ .active_step_text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 11px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-steps-item view:last-of-type {
|
|
|
+ margin-top: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .uni-calendar__content {
|
|
|
+ margin: -20px;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .uni-calendar__header {
|
|
|
+ .uni-calendar__header-text {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-calendar__backtoday {
|
|
|
+ padding: 2px 8px 2px 10px !important;
|
|
|
+ font-size: calc(0.75rem + 0px) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-calendar__box {
|
|
|
+ .uni-calendar__weeks {
|
|
|
+ .uni-calendar__weeks-day {
|
|
|
+ .uni-calendar__weeks-day-text {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-calendar__weeks-item {
|
|
|
+ .uni-calendar-item__weeks-box-item {
|
|
|
+ .uni-calendar-item__weeks-box-circle {
|
|
|
+ width: calc(8px + .5*(1rem - 16px)) !important;
|
|
|
+ height: calc(8px + .5*(1rem - 16px)) !important;
|
|
|
+ top: calc(5px - .25*(1rem - 16px)) !important;
|
|
|
+ right: calc(5px - .25*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-calendar-item__weeks-box-text {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-calendar-item__weeks-lunar-text {
|
|
|
+ font-size: calc(12px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-date-changed {
|
|
|
+ .uni-date-changed--time-date {
|
|
|
+ font-size: calc(14px + 1*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-datetime-picker-text {
|
|
|
+ font-size: calc(14px + 1*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /* 弹窗整体样式 */
|
|
|
+ .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>
|
ouyj