334 lines
6.9 KiB
Vue
334 lines
6.9 KiB
Vue
<template>
|
||
<view class="menu-v">
|
||
<!-- <view class="search-box u-m-b-20">
|
||
<u-search :placeholder="$t('app.apply.pleaseKeyword')" v-model="keyword" height="72" :show-action="false"
|
||
@change="search" bg-color="#f0f2f6" shape="square" style="width: 100%;">
|
||
</u-search>
|
||
</view> -->
|
||
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOption" :sticky="false" @up="upCallback"
|
||
:up="upOption" :bottombar="false" @init="mescrollInit" :top="mescrollTop">
|
||
<view class="workFlow-list">
|
||
<view class="caption u-line-1">业务表单</view>
|
||
<view class="u-flex u-flex-wrap item-container">
|
||
<view class="item u-flex-col u-col-center"
|
||
v-for="(item, i) in menuList"
|
||
:key="item.id"
|
||
@click="handelClick(item)">
|
||
<!-- 渲染图标 -->
|
||
<view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
|
||
<image class="item-img" :src="`/static/image/${item.name}.png`"></image>
|
||
<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
|
||
<!-- <iconify-icon
|
||
:icon="item.icon"
|
||
color="#ffffff"
|
||
width="24"
|
||
height="24"
|
||
></iconify-icon> -->
|
||
</view>
|
||
<!-- 渲染名称 -->
|
||
<text class="u-font-24 u-line-1 item-text">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getChildList
|
||
} from "@/api/apply/apply.js";
|
||
import {
|
||
getMenuData
|
||
} from "@/api/index/index";
|
||
import resources from "@/libs/resources.js";
|
||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
import {
|
||
useUserStore
|
||
} from '@/store/modules/user'
|
||
export default {
|
||
mixins: [MescrollMixin],
|
||
data() {
|
||
return {
|
||
mescrollTop: 0,
|
||
menuList: [],
|
||
downOption: {
|
||
use: true,
|
||
auto: true,
|
||
},
|
||
upOption: {
|
||
page: {
|
||
num: 0,
|
||
size: 50,
|
||
time: null,
|
||
},
|
||
empty: {
|
||
use: true,
|
||
icon: resources.message.nodata,
|
||
tip: this.$t('common.noData'),
|
||
fixed: false,
|
||
top: "560rpx",
|
||
},
|
||
textNoMore: this.$t('app.apply.noMoreData'),
|
||
},
|
||
keyword: "",
|
||
fullName: "",
|
||
key: +new Date(),
|
||
listChild: [],
|
||
};
|
||
},
|
||
computed: {
|
||
token() {
|
||
return uni.getStorageSync('token')
|
||
},
|
||
report() {
|
||
return this.define.report;
|
||
},
|
||
pcURL() {
|
||
return this.define.pcURL;
|
||
},
|
||
},
|
||
onShow() {
|
||
this.keyword = "";
|
||
uni.$on('refresh', () => {
|
||
this.menuList = [];
|
||
this.$nextTick(() => {
|
||
this.mescroll.resetUpScroll();
|
||
})
|
||
});
|
||
},
|
||
onUnload() {
|
||
uni.$off("updateUsualList");
|
||
},
|
||
methods: {
|
||
handelClick(item) {
|
||
const config = {
|
||
billNoPrefix: item.billNoPrefix,
|
||
id: item.id,
|
||
name: item.name,
|
||
tableTitle: item.tableTitle,
|
||
}
|
||
let url = "/pages/apply/dynamicModelList/index?config=" + JSON.stringify(config)
|
||
uni.navigateTo({
|
||
url,
|
||
fail: () => {
|
||
this.$u.toast("暂无此页面");
|
||
},
|
||
});
|
||
},
|
||
upCallback(keyword) {
|
||
let query = {
|
||
keyword: this.keyword,
|
||
};
|
||
uni.showLoading({
|
||
title: '正在加载',
|
||
mask: true
|
||
})
|
||
getMenuData()
|
||
.then((res) => {
|
||
let list =res?.data || [];
|
||
this.mescroll.endSuccess(list.length);
|
||
this.menuList = list;
|
||
console.log(this.menuList,'menuList---')
|
||
// this.handleProperty(this.list)
|
||
uni.hideLoading()
|
||
this.key = +new Date();
|
||
this.mescroll.endSuccess(this.menuList.length, false);
|
||
}).catch(() => {
|
||
this.mescroll.endSuccess(0);
|
||
this.mescroll.endErr();
|
||
});
|
||
},
|
||
handleProperty(list) {
|
||
const loop = (par) => {
|
||
par.map(o => {
|
||
if (o?.propertyJson) {
|
||
let propertyJson = JSON.parse(o.propertyJson);
|
||
this.$set(o, "iconBackground", propertyJson.iconBackgroundColor || "");
|
||
this.$set(o, "moduleId", propertyJson.moduleId || "");
|
||
}
|
||
if (o?.children && o?.children?.length) loop(o.children)
|
||
})
|
||
}
|
||
loop(list)
|
||
},
|
||
search() {
|
||
this.searchTimer && clearTimeout(this.searchTimer);
|
||
this.searchTimer = setTimeout(() => {
|
||
this.list = [];
|
||
this.menuList = [];
|
||
this.mescroll.resetUpScroll();
|
||
}, 300);
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f0f2f6;
|
||
}
|
||
|
||
.menu-v {
|
||
|
||
.search-box {
|
||
height: 120rpx;
|
||
padding: 0rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.common-block {
|
||
background-color: #fff;
|
||
margin: 20rpx 0;
|
||
|
||
.caption {
|
||
padding: 0 32rpx;
|
||
line-height: 100rpx;
|
||
justify-content: space-between;
|
||
|
||
.caption-left {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.caption-right {}
|
||
}
|
||
|
||
.item {
|
||
margin-bottom: 32rpx;
|
||
width: 25%;
|
||
|
||
.item-icon {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
margin-bottom: 8rpx;
|
||
line-height: 82rpx;
|
||
text-align: center;
|
||
border-radius: 30rpx;
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
|
||
&.more {
|
||
background: #ececec;
|
||
color: #666666;
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
|
||
.item-text {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 0 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.select-box {
|
||
max-height: 600rpx;
|
||
|
||
:deep(.u-drawer-content) {
|
||
height: 100% !important;
|
||
}
|
||
}
|
||
|
||
.popupItem {
|
||
height: 400rpx;
|
||
overflow-y: scroll;
|
||
/* #ifdef APP-HARMONY || MP */
|
||
padding-top: 40rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.item {
|
||
.currentItem {
|
||
color: #2979ff;
|
||
}
|
||
|
||
.select-item {
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
text-align: left;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 2%;
|
||
top: 0;
|
||
box-sizing: border-box;
|
||
width: 96%;
|
||
height: 1px;
|
||
transform: scale(1, 0.3);
|
||
border: 0 solid #e4e7ed;
|
||
z-index: 2;
|
||
border-bottom-width: 1px;
|
||
}
|
||
|
||
.sysName {
|
||
flex: 1;
|
||
overflow: auto;
|
||
min-width: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-v {
|
||
|
||
.workFlow-list {
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
// 分类标题样式
|
||
.caption {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
padding: 0 20rpx 20rpx;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
// 项容器（让项横向排列）
|
||
.item-container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
// 单个项的样式
|
||
.item {
|
||
width: 25%; // 一行显示4个（可根据需求调整）
|
||
margin-bottom: 30rpx;
|
||
align-items: center;
|
||
|
||
// 图标样式
|
||
.item-icon {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 20rpx; // 圆角更美观
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.item-img {
|
||
width: 60%;
|
||
height: 60%;
|
||
}
|
||
|
||
// 文字样式
|
||
.item-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |