feat: 新增客户管理、项目进度和财务中心功能模块
新增客户管理、项目进度和财务中心相关页面及API接口 添加项目明细页面和启动图资源 重构请求基础URL和更新逻辑 引入uni-badge和uni-list组件 优化工作台首页功能入口布局 更新版本号至5.0.0并修改启动图配置
This commit is contained in:
砂糖
52
api/oa/customer.js
Normal file
52
api/oa/customer.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import request from "@/util/oaRequest"
|
||||||
|
|
||||||
|
// 查询CRM 客户列表
|
||||||
|
export function listCustomer(query) {
|
||||||
|
return request({
|
||||||
|
url: '/oa/customer/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 查询CRM 客户列表
|
||||||
|
export function listSeaCustomer(query) {
|
||||||
|
return request({
|
||||||
|
url: '/oa/customer/list-sea',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询CRM 客户详细
|
||||||
|
export function getCustomer(customerId) {
|
||||||
|
return request({
|
||||||
|
url: '/oa/customer/' + customerId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增CRM 客户
|
||||||
|
export function addCustomer(data) {
|
||||||
|
return request({
|
||||||
|
url: '/oa/customer',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改CRM 客户
|
||||||
|
export function updateCustomer(data) {
|
||||||
|
return request({
|
||||||
|
url: '/oa/customer',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除CRM 客户
|
||||||
|
export function delCustomer(customerId) {
|
||||||
|
return request({
|
||||||
|
url: '/oa/customer/' + customerId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
53
api/oa/notice.js
Normal file
53
api/oa/notice.js
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import request from "@/util/oaRequest"
|
||||||
|
|
||||||
|
// 查询公告列表
|
||||||
|
export function listNotice(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/notice/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//查询固定条数的列表
|
||||||
|
export function listNoticeLimit(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/notice/listLimit',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询公告详细
|
||||||
|
export function getNotice(noticeId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/notice/' + noticeId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增公告
|
||||||
|
export function addNotice(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/notice',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改公告
|
||||||
|
export function updateNotice(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/notice',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除公告
|
||||||
|
export function delNotice(noticeId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/notice/' + noticeId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
88
components/oa/oa-user/oa-user.vue
Normal file
88
components/oa/oa-user/oa-user.vue
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<template>
|
||||||
|
<span class="username-display">
|
||||||
|
<!-- 加载中状态 -->
|
||||||
|
<template v-if="isLoading">
|
||||||
|
<span class="loading-placeholder">加载中...</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 已加载完成 -->
|
||||||
|
<template v-else>
|
||||||
|
<!-- 存在用户信息 -->
|
||||||
|
<span v-if="userInfo">{{ userInfo.nickName }}</span>
|
||||||
|
|
||||||
|
<!-- 不存在用户信息 -->
|
||||||
|
<span v-else class="unknown-user">
|
||||||
|
{{ userId ? `未知用户(${userId})` : '未指定用户' }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState, mapActions } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UsernameDisplay',
|
||||||
|
props: {
|
||||||
|
// 需要展示的用户ID
|
||||||
|
userId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
// 是否自动加载用户数据（默认自动加载）
|
||||||
|
autoLoad: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
userMap: state => state.userMap,
|
||||||
|
userList: state => state.userList
|
||||||
|
}),
|
||||||
|
// 获取当前用户信息
|
||||||
|
userInfo() {
|
||||||
|
if (!this.userId) return null
|
||||||
|
return this.userMap[this.userId]
|
||||||
|
},
|
||||||
|
// 判断是否处于加载中（用户列表为空且需要加载时）
|
||||||
|
isLoading() {
|
||||||
|
return this.autoLoad && this.userList.length === 0 && this.userId !== null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(['setUser'])
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 自动加载用户数据（如果未加载且需要加载）
|
||||||
|
if (this.autoLoad && this.userList.length === 0) {
|
||||||
|
this.setUser()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 当userId变化时，如果需要自动加载且数据未加载，重新加载
|
||||||
|
userId(newVal) {
|
||||||
|
if (this.autoLoad && newVal !== null && this.userList.length === 0) {
|
||||||
|
this.setUser()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.username-display {
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unknown-user {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
"name" : "德讯",
|
"name" : "德讯",
|
||||||
"appid" : "__UNI__D705A34",
|
"appid" : "__UNI__D705A34",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "fad-im 4.0.0",
|
"versionName" : "fad-im 5.0.0",
|
||||||
"versionCode" : 345,
|
"versionCode" : 345,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
@@ -82,9 +82,9 @@
|
|||||||
"androidStyle" : "default",
|
"androidStyle" : "default",
|
||||||
"iosStyle" : "common",
|
"iosStyle" : "common",
|
||||||
"android" : {
|
"android" : {
|
||||||
"hdpi" : "unpackage/res/cover/480_762.9.png",
|
"hdpi" : "unpackage/res/cover/480___762.9.png",
|
||||||
"xhdpi" : "unpackage/res/cover/720_1242.9.png",
|
"xhdpi" : "unpackage/res/cover/720___1242.9.png",
|
||||||
"xxhdpi" : "unpackage/res/cover/1080_1882.9.png"
|
"xxhdpi" : "unpackage/res/cover/1080___1882.9.png"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"icons" : {
|
"icons" : {
|
||||||
|
|||||||
56
pages.json
56
pages.json
@@ -493,6 +493,62 @@
|
|||||||
"navigationBarTitleText" : "项目成本",
|
"navigationBarTitleText" : "项目成本",
|
||||||
"navigationStyle": "default"
|
"navigationStyle": "default"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/workbench/project/schedule",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "项目进度",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/workbench/project/step",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "进度明细",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/workbench/notice/notice",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "通知公告",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/workbench/article/article",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "文章详情",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/workbench/customer/customer",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "客户管理",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/workbench/profit/project",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "项目明细",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/workbench/profit/cost",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "项目明细详情",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|||||||
22
pages/workbench/article/article.vue
Normal file
22
pages/workbench/article/article.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
736
pages/workbench/customer/customer.vue
Normal file
736
pages/workbench/customer/customer.vue
Normal file
@@ -0,0 +1,736 @@
|
|||||||
|
<template>
|
||||||
|
<view class="report-schedule">
|
||||||
|
<!-- header始终显示 -->
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="search-container">
|
||||||
|
<view class="task-type-button-container">
|
||||||
|
<view class="task-type-button" @click="openDrawer">
|
||||||
|
<uni-icons type="settings" color="#2979ff" size="22"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="search-input custom-search-input">
|
||||||
|
<input v-model="queryParams.name" class="input" type="text" placeholder="搜索客户名称" @confirm="onSearch"
|
||||||
|
@keyup.enter="onSearch" />
|
||||||
|
<view class="search-icon" @click="onSearch">
|
||||||
|
<uni-icons type="search" color="#bbb" size="20"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view v-if="searchName" class="clear-icon" @click="onClearSearch">
|
||||||
|
<uni-icons type="closeempty" color="#bbb" size="18"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="add-button" @click="handleAdd">
|
||||||
|
<uni-icons type="plusempty" color="#2979ff" size="22"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 筛选抽屉 -->
|
||||||
|
<uni-drawer ref="drawerRef" mode="left" :width="320">
|
||||||
|
<view class="drawer-content">
|
||||||
|
<view class="drawer-title">筛选</view>
|
||||||
|
<view class="drawer-form">
|
||||||
|
<view class="drawer-form-item">
|
||||||
|
<text class="drawer-label">客户等级</text>
|
||||||
|
<oa-dict-select v-model="queryParams.level" placeholder="客户等级" dictType='customer_level' />
|
||||||
|
</view>
|
||||||
|
<view class="drawer-form-item">
|
||||||
|
<text class="drawer-label">所属行业</text>
|
||||||
|
<oa-dict-select v-model="queryParams.industryId" placeholder="所属行业" dictType='industry_type' />
|
||||||
|
</view>
|
||||||
|
<view class="drawer-form-item">
|
||||||
|
<text class="drawer-label">客户来源</text>
|
||||||
|
<oa-dict-select v-model="queryParams.source" placeholder="客户来源" dictType='customer_source' />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="drawer-btns">
|
||||||
|
<button class="drawer-btn-primary" @click="applyFilterAndClose">确定</button>
|
||||||
|
<button class="drawer-btn" @click="resetFilterAndClose">重置</button>
|
||||||
|
<button class="drawer-btn" @click="closeDrawer">关闭</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-drawer>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<!-- 自定义列表，右滑菜单（uni-ui实现） -->
|
||||||
|
<scroll-view scroll-y style="height: 100vh;" @scrolltolower="loadMore">
|
||||||
|
<view v-if="customerList.length">
|
||||||
|
<uni-swipe-action>
|
||||||
|
<block v-for="(item, index) in customerList" :key="item.customerId">
|
||||||
|
<uni-swipe-action-item :right-options="getSwipeOptions(item)" @click="swipeActionClick($event, item)"
|
||||||
|
style="margin-bottom: 16rpx;">
|
||||||
|
<view class="card">
|
||||||
|
<view class="card-title">
|
||||||
|
<text class="project">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-content">
|
||||||
|
<view>负责人：{{ item.nickName }}</view>
|
||||||
|
<view>手机：{{ item.mobile }}</view>
|
||||||
|
<view>详细地址：{{ item.detailAddress }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-swipe-action-item>
|
||||||
|
</block>
|
||||||
|
</uni-swipe-action>
|
||||||
|
</view>
|
||||||
|
<view v-else class="empty">暂无数据</view>
|
||||||
|
<view class="load-more-tips">
|
||||||
|
<u-loading-icon v-if="loadingMore" text="加载中..." size="20" textSize="14" />
|
||||||
|
<text v-else-if="!hasMore && customerList.length">没有更多了</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<uni-popup ref="popupRef" type="bottom">
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="uni-form">
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">客户名称</text>
|
||||||
|
<u-input v-model="form.name" placeholder="请输入客户名称" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">最后跟进时间</text>
|
||||||
|
<uni-datetime-picker v-model="form.contactLastTime" type="datetime" placeholder="请选择最后跟进时间"
|
||||||
|
style="width:100%" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">最后跟进内容</text>
|
||||||
|
<u-input v-model="form.contactLastContent" placeholder="请输入最后跟进内容" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">下次联系时间</text>
|
||||||
|
<uni-datetime-picker v-model="form.contactNextTime" type="datetime" placeholder="请选择下次联系时间"
|
||||||
|
style="width:100%" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">负责人</text>
|
||||||
|
<oa-user-select v-model="form.ownerUserId" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">微信</text>
|
||||||
|
<u-input v-model="form.wechat" placeholder="微信" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">邮箱</text>
|
||||||
|
<u-input v-model="form.email" placeholder="邮箱" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">详细地址</text>
|
||||||
|
<u-input v-model="form.detailAddress" placeholder="详细地址" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">手机</text>
|
||||||
|
<u-input v-model="form.mobile" placeholder="手机" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">电话</text>
|
||||||
|
<u-input v-model="form.telephone" placeholder="电话" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">QQ</text>
|
||||||
|
<u-input v-model="form.qq" placeholder="QQ" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">备注</text>
|
||||||
|
<u-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">所属行业</text>
|
||||||
|
<oa-dict-select v-model="form.industryId" dictType="industry_type" placeholder="请选择所属行业" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">客户等级</text>
|
||||||
|
<oa-dict-select v-model="form.level" dictType="customer_level" placeholder="请选择客户等级" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<text class="uni-form-label">客户来源</text>
|
||||||
|
<oa-dict-select v-model="form.source" dictType="customer_source" placeholder="请选择客户来源" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="popup-btns">
|
||||||
|
<u-button type="primary" @click="submitForm">确定</u-button>
|
||||||
|
<u-button @click="closePopup">取消</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
addCustomer,
|
||||||
|
delCustomer,
|
||||||
|
getCustomer,
|
||||||
|
listCustomer,
|
||||||
|
updateCustomer
|
||||||
|
} from '@/api/oa/customer.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
name: undefined,
|
||||||
|
followUpStatus: undefined,
|
||||||
|
contactLastTime: undefined,
|
||||||
|
contactLastContent: undefined,
|
||||||
|
contactNextTime: undefined,
|
||||||
|
ownerUserId: undefined,
|
||||||
|
ownerTime: undefined,
|
||||||
|
dealStatus: undefined,
|
||||||
|
mobile: undefined,
|
||||||
|
telephone: undefined,
|
||||||
|
qq: undefined,
|
||||||
|
wechat: undefined,
|
||||||
|
email: undefined,
|
||||||
|
areaId: undefined,
|
||||||
|
detailAddress: undefined,
|
||||||
|
industryId: undefined,
|
||||||
|
level: undefined,
|
||||||
|
source: undefined,
|
||||||
|
},
|
||||||
|
projectOptions: [],
|
||||||
|
headerOptions: [],
|
||||||
|
customerList: [],
|
||||||
|
total: 0,
|
||||||
|
single: true,
|
||||||
|
multiple: true,
|
||||||
|
form: {},
|
||||||
|
showStartDate: false,
|
||||||
|
showEndDate: false,
|
||||||
|
swipeOptions: [{
|
||||||
|
text: '编辑',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#2979ff',
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '删除',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#fa3534',
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 新增：筛选相关
|
||||||
|
searchName: '',
|
||||||
|
filterProject: '',
|
||||||
|
filterHeader: '',
|
||||||
|
filterDateRange: [],
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
loadingMore: false,
|
||||||
|
hasMore: true,
|
||||||
|
startForm: {
|
||||||
|
reportTitle: '',
|
||||||
|
reportDate: '',
|
||||||
|
reporter: '',
|
||||||
|
projectId: '',
|
||||||
|
remark: '',
|
||||||
|
type: 1
|
||||||
|
},
|
||||||
|
startLoading: false,
|
||||||
|
startPopupOpen: false,
|
||||||
|
_startScheduleId: null,
|
||||||
|
showGanttView: false,
|
||||||
|
ganttChartData: {
|
||||||
|
categories: [],
|
||||||
|
series: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.pageNum = 1
|
||||||
|
this.hasMore = true
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
openDrawer() {
|
||||||
|
this.$refs.drawerRef.open();
|
||||||
|
},
|
||||||
|
closeDrawer() {
|
||||||
|
this.$refs.drawerRef.close();
|
||||||
|
},
|
||||||
|
applyFilterAndClose() {
|
||||||
|
this.applyFilter();
|
||||||
|
this.closeDrawer();
|
||||||
|
},
|
||||||
|
resetFilterAndClose() {
|
||||||
|
this.resetFilter();
|
||||||
|
this.closeDrawer();
|
||||||
|
},
|
||||||
|
// 搜索框检索
|
||||||
|
onSearch() {
|
||||||
|
this.searchName = this.searchName
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
onClearSearch() {
|
||||||
|
this.searchName = ''
|
||||||
|
this.queryParams.scheduleName = ''
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
// 筛选抽屉应用
|
||||||
|
applyFilter() {
|
||||||
|
this.queryParams.projectId = this.filterProject
|
||||||
|
this.queryParams.header = this.filterHeader
|
||||||
|
if (this.filterDateRange && this.filterDateRange.length === 2) {
|
||||||
|
this.queryParams.dateRange = this.filterDateRange
|
||||||
|
} else {
|
||||||
|
this.queryParams.dateRange = []
|
||||||
|
}
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
// 筛选抽屉重置
|
||||||
|
resetFilter() {
|
||||||
|
this.queryParams = {
|
||||||
|
...this.queryParams,
|
||||||
|
level: undefined,
|
||||||
|
source: undefined,
|
||||||
|
industryId: undefined,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.pageNum = 1
|
||||||
|
this.hasMore = true
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
if (this.queryParams.dateRange && this.queryParams.dateRange.length === 2) {
|
||||||
|
this.queryParams.startDate = this.queryParams.dateRange[0]
|
||||||
|
this.queryParams.endDate = this.queryParams.dateRange[1]
|
||||||
|
} else {
|
||||||
|
this.queryParams.startDate = ''
|
||||||
|
this.queryParams.endDate = ''
|
||||||
|
}
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.loadingMore = true
|
||||||
|
this.queryParams.pageNum = this.pageNum
|
||||||
|
this.queryParams.pageSize = this.pageSize
|
||||||
|
listCustomer(this.queryParams).then(res => {
|
||||||
|
const rows = res.rows || []
|
||||||
|
if (this.pageNum === 1) {
|
||||||
|
this.customerList = rows
|
||||||
|
} else {
|
||||||
|
this.customerList = this.customerList.concat(rows)
|
||||||
|
}
|
||||||
|
// 判断是否还有更多
|
||||||
|
this.hasMore = rows.length === this.pageSize
|
||||||
|
this.total = res.total || 0
|
||||||
|
}).finally(() => {
|
||||||
|
this.loadingMore = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loadMore() {
|
||||||
|
if (!this.hasMore || this.loadingMore) return
|
||||||
|
this.pageNum++
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
handleAdd() {
|
||||||
|
this.form = {}
|
||||||
|
this.$refs.popupRef.open('bottom')
|
||||||
|
},
|
||||||
|
handleUpdate(row) {
|
||||||
|
getCustomer(row.customerId).then(res => {
|
||||||
|
this.form = res.data || {}
|
||||||
|
this.$refs.popupRef.open('bottom')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除',
|
||||||
|
content: `确定要删除排产“${item.scheduleName}”吗？`,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
const ids = item ? [item.customerId] : this.selectedIds
|
||||||
|
delCustomer(ids).then(() => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '删除成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleExport() {
|
||||||
|
// 导出逻辑可根据实际API实现
|
||||||
|
uni.showToast({
|
||||||
|
title: '导出功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submitForm() {
|
||||||
|
if (this.form.customerId) {
|
||||||
|
updateCustomer(this.form).then(() => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '修改成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
this.closePopup()
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
addCustomer(this.form).then(() => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '新增成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
this.closePopup()
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closePopup() {
|
||||||
|
this.$refs.popupRef.close()
|
||||||
|
},
|
||||||
|
getSwipeOptions(item) {
|
||||||
|
const options = [{
|
||||||
|
text: '编辑',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#2979ff',
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '删除',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#fa3534',
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return options;
|
||||||
|
},
|
||||||
|
swipeActionClick(e, item) {
|
||||||
|
const text = e.content.text;
|
||||||
|
if (text === '编辑') {
|
||||||
|
this.handleUpdate(item);
|
||||||
|
} else if (text === '删除') {
|
||||||
|
this.handleDelete(item);
|
||||||
|
} else if (text === '开始') {
|
||||||
|
this.handleStart(item);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleStart(row) {
|
||||||
|
const now = new Date();
|
||||||
|
const pad = n => n < 10 ? '0' + n : n;
|
||||||
|
const formatDate = d =>
|
||||||
|
`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
||||||
|
this.startForm = {
|
||||||
|
reportTitle: row.scheduleName,
|
||||||
|
reportDate: formatDate(now),
|
||||||
|
reporter: row.header,
|
||||||
|
projectId: row.projectId,
|
||||||
|
remark: row.remark,
|
||||||
|
type: 1
|
||||||
|
}
|
||||||
|
this._startScheduleId = row.customerId
|
||||||
|
this.openStartPopup()
|
||||||
|
},
|
||||||
|
openStartPopup() {
|
||||||
|
this.$refs.startPopupRef.open('bottom')
|
||||||
|
this.startPopupOpen = true
|
||||||
|
},
|
||||||
|
closeStartPopup() {
|
||||||
|
this.$refs.startPopupRef.close()
|
||||||
|
this.startPopupOpen = false
|
||||||
|
},
|
||||||
|
async submitStartForm() {
|
||||||
|
if (!this.startForm.reportTitle || !this.startForm.reportDate || !this.startForm.reporter || !this.startForm
|
||||||
|
.projectId) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请填写完整',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.startLoading = true
|
||||||
|
try {
|
||||||
|
await updateCustomer({
|
||||||
|
customerId: this._startScheduleId,
|
||||||
|
status: 1
|
||||||
|
})
|
||||||
|
uni.showToast({
|
||||||
|
title: '开始成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
this.closeStartPopup()
|
||||||
|
this.getList()
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '操作失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.startLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getProjectName(id) {
|
||||||
|
const p = this.projectOptions.find(i => i.value == id)
|
||||||
|
return p ? p.text : id
|
||||||
|
},
|
||||||
|
getHeaderName(id) {
|
||||||
|
const h = this.headerOptions.find(i => i.value == id)
|
||||||
|
return h ? h.text : id
|
||||||
|
},
|
||||||
|
getStatusText(status) {
|
||||||
|
if (status === 1) return '已开始'
|
||||||
|
if (status === 0 || status === undefined) return '未开始'
|
||||||
|
return '其他'
|
||||||
|
},
|
||||||
|
getGanttChartData(list) {
|
||||||
|
if (!list || !list.length) {
|
||||||
|
return {
|
||||||
|
categories: [],
|
||||||
|
series: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 只保留唯一 projectId
|
||||||
|
const uniqueProjectIds = Array.from(new Set(list.map(item => item.projectId)))
|
||||||
|
const categories = uniqueProjectIds.map(id => this.getProjectName(id))
|
||||||
|
|
||||||
|
const data = list.map(item => ({
|
||||||
|
...item,
|
||||||
|
projectName: this.getProjectName(item.projectId),
|
||||||
|
headerName: this.getHeaderName(item.header),
|
||||||
|
}))
|
||||||
|
|
||||||
|
return {
|
||||||
|
categories,
|
||||||
|
series: [{
|
||||||
|
name: '进度',
|
||||||
|
data
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleGanttView() {
|
||||||
|
this.showGanttView = !this.showGanttView;
|
||||||
|
if (this.showGanttView) {
|
||||||
|
this.ganttChartData = this.getGanttChartData(this.customerList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.report-schedule {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
padding: 20rpx;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-type-button-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-type-button {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 30rpx;
|
||||||
|
outline: none;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
margin-left: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-icon {
|
||||||
|
margin-left: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-content {
|
||||||
|
padding: 32rpx 24rpx 24rpx 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-form {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-form-item {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-btns {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-btn-primary {
|
||||||
|
flex: 1;
|
||||||
|
background: #2979ff;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-btn {
|
||||||
|
flex: 1;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
padding: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project {
|
||||||
|
color: #2979ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-1 {
|
||||||
|
background: #e0f7fa;
|
||||||
|
color: #009688;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-0,
|
||||||
|
.status-undefined {
|
||||||
|
background: #fffbe6;
|
||||||
|
color: #faad14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-other {
|
||||||
|
background: #fbeff2;
|
||||||
|
color: #e91e63;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content view {
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
color: #666;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #bbb;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-content {
|
||||||
|
padding: 24rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-form {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-form-item {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-form-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more-tips {
|
||||||
|
text-align: center;
|
||||||
|
color: #bbb;
|
||||||
|
padding: 24rpx 0 32rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-ops {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt-toggle-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
padding: 16rpx 0 8rpx 0;
|
||||||
|
background: #fff;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -85,17 +85,30 @@ export default {
|
|||||||
category: '车间管理'
|
category: '车间管理'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '项目中心',
|
text: '项目管理',
|
||||||
icon: '/static/images/project.png',
|
icon: '/static/images/project.png',
|
||||||
url: '/pages/workbench/project/project',
|
url: '/pages/workbench/project/project',
|
||||||
category: "信息中心"
|
access: ['vice, admin', 'doctor', 'ceo', '13'],
|
||||||
|
category: "项目中心"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
text: '项目进度',
|
||||||
|
icon: '/static/images/progress.png',
|
||||||
|
url: '/pages/workbench/project/schedule',
|
||||||
|
category: '项目中心'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
text: '问题反馈',
|
text: '问题反馈',
|
||||||
icon: '/static/images/wenti.png',
|
icon: '/static/images/wenti.png',
|
||||||
url: '/pages/workbench/feedback/feedback',
|
url: '/pages/workbench/feedback/feedback',
|
||||||
category: "信息中心"
|
category: "信息中心"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
text: '客户管理',
|
||||||
|
icon: '/static/images/customer.png',
|
||||||
|
url: '/pages/workbench/customer/customer',
|
||||||
|
category: '信息中心'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
text: '库存盘点',
|
text: '库存盘点',
|
||||||
icon: '/static/images/stock.png',
|
icon: '/static/images/stock.png',
|
||||||
@@ -109,6 +122,13 @@ export default {
|
|||||||
category: '财务中心',
|
category: '财务中心',
|
||||||
access: ['vice', 'baomi', 'ceo'] // 需要特定权限才能访问
|
access: ['vice', 'baomi', 'ceo'] // 需要特定权限才能访问
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
text: '项目明细',
|
||||||
|
icon: '/static/images/profitpro.png',
|
||||||
|
url: '/pages/workbench/profit/project',
|
||||||
|
category: '财务中心',
|
||||||
|
// access: ['vice', 'baomi', 'ceo'] // 需要特定权限才能访问
|
||||||
|
},
|
||||||
{
|
{
|
||||||
text: '项目成本',
|
text: '项目成本',
|
||||||
icon: '/static/images/cost.png',
|
icon: '/static/images/cost.png',
|
||||||
|
|||||||
22
pages/workbench/notice/notice.vue
Normal file
22
pages/workbench/notice/notice.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
849
pages/workbench/profit/cost.vue
Normal file
849
pages/workbench/profit/cost.vue
Normal file
@@ -0,0 +1,849 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 项目基本信息展示 -->
|
||||||
|
<view class="project-header" v-if="this.projectId != 0">
|
||||||
|
<view class="project-info-item">
|
||||||
|
<text class="info-label">项目名称：</text>
|
||||||
|
<text class="info-value">{{ currentProject.projectName || '未知项目' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-info-item">
|
||||||
|
<text class="info-label">项目编号：</text>
|
||||||
|
<text class="info-value">{{ currentProject.projectNo || '无编号' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-info-item">
|
||||||
|
<text class="info-label">项目总金额：</text>
|
||||||
|
<text class="info-value">¥ {{ formatCurrency(currentProject.funds || 0) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="project-header" v-if="this.projectId == 0">
|
||||||
|
<view class="project-info-item">
|
||||||
|
<text class="info-value">其他收支</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 新增按钮 -->
|
||||||
|
<view class="btn-add-container">
|
||||||
|
<uni-button type="primary" @click="openAddPopup">
|
||||||
|
<uni-icons type="plus" size="18" class="btn-icon"></uni-icons>
|
||||||
|
新增财务记录
|
||||||
|
</uni-button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 财务明细列表 -->
|
||||||
|
<view class="finance-list-container">
|
||||||
|
<view class="list-title">财务明细记录</view>
|
||||||
|
<uni-list v-if="finances.length > 0" border>
|
||||||
|
<uni-list-item
|
||||||
|
v-for="(item, index) in finances"
|
||||||
|
:key="item.financeId"
|
||||||
|
:title="item.financeTitle"
|
||||||
|
:note="`${item.financeType === '1' ? '出账' : '入账'} · ${formatDate(item.financeTime)} · 共${item.detailList.length || 0}条明细`"
|
||||||
|
showArrow
|
||||||
|
:clickable="true"
|
||||||
|
@click="openDetailPopup(item)"
|
||||||
|
>
|
||||||
|
<template v-slot:extra>
|
||||||
|
<view class="amount-tag" :class="item.financeType === '1' ? 'expense' : 'income'">
|
||||||
|
{{ item.financeType === '1' ? '-' : '+' }}¥{{ calculateFinanceTotal(item.detailList) }}
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
<view v-else class="empty-list">
|
||||||
|
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
|
||||||
|
<text class="empty-text">暂无财务记录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 新增财务记录弹窗 -->
|
||||||
|
<uni-popup ref="addPopup" type="bottom" :style="{ width: '100%' }">
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="popup-title">{{ form.financeId ? '编辑财务记录' : '新增财务记录' }}</view>
|
||||||
|
|
||||||
|
<uni-forms ref="financeForm" :model="form" :rules="rules" label-width="150rpx">
|
||||||
|
<uni-forms-item label="财务类型" name="financeType">
|
||||||
|
<uni-data-checkbox mode="tag" v-model="form.financeType" :localdata="[
|
||||||
|
{ value: "1", text: '出账' },
|
||||||
|
{ value: '2', text: '入账' }
|
||||||
|
]"></uni-data-checkbox>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<uni-forms-item label="记录名称" name="financeTitle">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="form.financeTitle"
|
||||||
|
placeholder="请输入记录名称"
|
||||||
|
clearable
|
||||||
|
></uni-easyinput>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<uni-forms-item label="交易时间" name="financeTime">
|
||||||
|
<uni-datetime-picker
|
||||||
|
v-model="form.financeTime"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请选择交易时间"
|
||||||
|
:start="minDate"
|
||||||
|
></uni-datetime-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<uni-forms-item label="交易方" name="financeParties">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="form.financeParties"
|
||||||
|
placeholder="请输入交易方"
|
||||||
|
clearable
|
||||||
|
></uni-easyinput>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<uni-forms-item label="支付类型" name="payType">
|
||||||
|
<oa-dict-select v-model="form.payType" dict-type='sys_pay_type'></oa-dict-select>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<!-- 明细列表区域（替换uni-table） -->
|
||||||
|
<view class="detail-section">
|
||||||
|
<view class="detail-header">
|
||||||
|
<text class="detail-title">明细列表</text>
|
||||||
|
<uni-button type="primary" size="mini" @click="addDetail">
|
||||||
|
<uni-icons type="plus" size="16"></uni-icons>添加明细
|
||||||
|
</uni-button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 明细标题行 -->
|
||||||
|
<view class="detail-row header-row">
|
||||||
|
<view class="detail-col index-col">序号</view>
|
||||||
|
<view class="detail-col name-col">明细名称</view>
|
||||||
|
<view class="detail-col price-col">金额(元)</view>
|
||||||
|
<view class="detail-col action-col">操作</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 明细内容行 -->
|
||||||
|
<view
|
||||||
|
class="detail-row content-row"
|
||||||
|
v-for="(item, index) in form.detailList"
|
||||||
|
:key="item.detailId"
|
||||||
|
>
|
||||||
|
<view class="detail-col index-col">{{ index + 1 }}</view>
|
||||||
|
<view class="detail-col name-col">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="item.detailTitle"
|
||||||
|
placeholder="请输入明细名称"
|
||||||
|
class="detail-input"
|
||||||
|
></uni-easyinput>
|
||||||
|
</view>
|
||||||
|
<view class="detail-col price-col">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="item.price"
|
||||||
|
placeholder="0.00"
|
||||||
|
type="number"
|
||||||
|
class="detail-input"
|
||||||
|
@input="calculateTotal"
|
||||||
|
></uni-easyinput>
|
||||||
|
</view>
|
||||||
|
<view class="detail-col action-col">
|
||||||
|
<uni-button
|
||||||
|
type="warn"
|
||||||
|
size="mini"
|
||||||
|
plain
|
||||||
|
@click="removeDetail(index)"
|
||||||
|
v-if="form.detailList.length > 1"
|
||||||
|
>
|
||||||
|
<uni-icons type="trash" size="16"></uni-icons>
|
||||||
|
</uni-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 合计金额 -->
|
||||||
|
<view class="total-amount" v-if="form.detailList.length > 0">
|
||||||
|
<text class="total-label">合计金额：</text>
|
||||||
|
<text class="total-value" :class="form.financeType === '1' ? 'text-expense' : 'text-income'">
|
||||||
|
¥{{ formatCurrency(totalAmount) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uni-forms-item label="备注" name="remark">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="form.remark"
|
||||||
|
placeholder="请输入备注信息"
|
||||||
|
type="textarea"
|
||||||
|
rows="3"
|
||||||
|
></uni-easyinput>
|
||||||
|
</uni-forms-item>
|
||||||
|
</uni-forms>
|
||||||
|
|
||||||
|
<view class="popup-btn-group">
|
||||||
|
<uni-button type="default" @click="closeAddPopup">取消</uni-button>
|
||||||
|
<uni-button type="primary" @click="submitFinanceForm">确认提交</uni-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
|
||||||
|
<uni-popup ref="detailPopup" type="bottom" :style="{ width: '100%' }">
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="popup-title">财务记录详情</view>
|
||||||
|
|
||||||
|
<view class="detail-info">
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">记录名称：</text>
|
||||||
|
<text class="detail-value">{{ currentFinance.financeTitle || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">记录类型：</text>
|
||||||
|
<text class="detail-value">{{ currentFinance.financeType === '1' ? '出账' : '入账' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">交易时间：</text>
|
||||||
|
<text class="detail-value">{{ formatDate(currentFinance.financeTime) || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">交易方：</text>
|
||||||
|
<text class="detail-value">{{ currentFinance.financeParties || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">支付类型：</text>
|
||||||
|
<text class="detail-value">{{ getPayTypeName(currentFinance.payType) || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">总金额：</text>
|
||||||
|
<text class="detail-value" :class="currentFinance.financeType === '1' ? 'text-expense' : 'text-income'">
|
||||||
|
{{ currentFinance.financeType === '1' ? '-' : '+' }}¥{{ calculateFinanceTotal(currentFinance.detailList) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 明细列表展示（替换uni-table） -->
|
||||||
|
<view class="detail-section-view">
|
||||||
|
<view class="detail-header-view">
|
||||||
|
<text class="detail-title-view">明细列表 (共{{ currentFinance.detailList.length || 0 }}条)</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 明细标题行 -->
|
||||||
|
<view class="detail-row header-row">
|
||||||
|
<view class="detail-col index-col">序号</view>
|
||||||
|
<view class="detail-col name-col">明细名称</view>
|
||||||
|
<view class="detail-col price-col">金额(元)</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 明细内容行 -->
|
||||||
|
<view
|
||||||
|
class="detail-row content-row"
|
||||||
|
v-for="(item, index) in currentFinance.detailList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view class="detail-col index-col">{{ index + 1 }}</view>
|
||||||
|
<view class="detail-col name-col">{{ item.detailTitle || '-' }}</view>
|
||||||
|
<view class="detail-col price-col">¥{{ formatCurrency(item.price || 0) }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="!currentFinance.detailList || currentFinance.detailList.length === 0" class="empty-detail">
|
||||||
|
<text>无明细记录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">备注：</text>
|
||||||
|
<text class="detail-value">{{ currentFinance.remark || '无' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">创建人：</text>
|
||||||
|
<text class="detail-value">{{ currentFinance.createBy || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">创建时间：</text>
|
||||||
|
<text class="detail-value">{{ formatDate(currentFinance.createTime) || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="popup-btn-group">
|
||||||
|
<uni-button type="default" @click="closeDetailPopup">关闭</uni-button>
|
||||||
|
<uni-button type="primary" @click="handleEdit">编辑</uni-button>
|
||||||
|
<uni-button type="warn" @click="handleDelete">删除</uni-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getProject } from '@/api/oa/project';
|
||||||
|
import {
|
||||||
|
addFinance,
|
||||||
|
delFinance,
|
||||||
|
listFinance,
|
||||||
|
getFinance,
|
||||||
|
updateFinance
|
||||||
|
} from "@/api/oa/finance/finance.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
projectId: '',
|
||||||
|
currentProject: {},
|
||||||
|
finances: [],
|
||||||
|
currentFinance: {
|
||||||
|
detailList: []
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
|
||||||
|
// 表单数据 - 默认包含一条空明细
|
||||||
|
form: {
|
||||||
|
financeId: '',
|
||||||
|
projectId: '',
|
||||||
|
financeType: '1', // 1-出账 2-入账
|
||||||
|
financeTitle: '',
|
||||||
|
financeTime: '',
|
||||||
|
financeParties: '',
|
||||||
|
payType: '',
|
||||||
|
remark: '',
|
||||||
|
detailList: [] // 明细列表将在打开弹窗时初始化
|
||||||
|
},
|
||||||
|
|
||||||
|
// 合计金额（前端计算）
|
||||||
|
totalAmount: 0,
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
rules: {
|
||||||
|
financeType: [{ required: true, message: '请选择记录类型', trigger: 'change' }],
|
||||||
|
financeTitle: [{ required: true, message: '请输入记录名称', trigger: 'blur' }],
|
||||||
|
financeTime: [{ required: true, message: '请选择交易时间', trigger: 'change' }],
|
||||||
|
financeParties: [{ required: true, message: '请输入交易方', trigger: 'blur' }],
|
||||||
|
payType: [{ required: true, message: '请选择支付类型', trigger: 'change' }]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 支付类型选项
|
||||||
|
payTypes: [
|
||||||
|
{ value: '1', label: '微信支付' },
|
||||||
|
{ value: '2', label: '支付宝' },
|
||||||
|
{ value: '3', label: '银行转账' },
|
||||||
|
{ value: '4', label: '现金' },
|
||||||
|
{ value: '5', label: '其他' }
|
||||||
|
],
|
||||||
|
|
||||||
|
// 最小日期限制
|
||||||
|
minDate: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(options) {
|
||||||
|
// 获取项目ID
|
||||||
|
this.projectId = options.id;
|
||||||
|
if (!this.projectId && this.projectId !== '0') {
|
||||||
|
uni.showToast({ title: '项目ID不存在', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化最小日期（3年前）
|
||||||
|
const now = new Date();
|
||||||
|
this.minDate = new Date(now.getFullYear() - 3, now.getMonth(), now.getDate()).getTime();
|
||||||
|
|
||||||
|
// 加载项目信息和财务记录
|
||||||
|
this.loadProjectInfo();
|
||||||
|
this.loadFinanceList();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 加载项目信息
|
||||||
|
loadProjectInfo() {
|
||||||
|
this.loading = true;
|
||||||
|
getProject(this.projectId).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.currentProject = res.data;
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: res.msg || '获取项目信息失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('获取项目信息错误:', err);
|
||||||
|
uni.showToast({ title: '获取项目信息失败', icon: 'none' });
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载财务记录列表
|
||||||
|
loadFinanceList() {
|
||||||
|
this.loading = true;
|
||||||
|
listFinance({
|
||||||
|
projectId: this.projectId,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 100
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.finances = res.rows || [];
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: res.msg || '获取财务记录失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('获取财务记录错误:', err);
|
||||||
|
uni.showToast({ title: '获取财务记录失败', icon: 'none' });
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加明细
|
||||||
|
addDetail() {
|
||||||
|
this.form.detailList.push({
|
||||||
|
detailId: Date.now(), // 临时ID
|
||||||
|
detailTitle: '',
|
||||||
|
price: ''
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 移除明细
|
||||||
|
removeDetail(index) {
|
||||||
|
// 确保至少保留一条明细
|
||||||
|
if (this.form.detailList.length <= 1) {
|
||||||
|
uni.showToast({ title: '至少保留一条明细', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除',
|
||||||
|
content: '确定要删除这条明细吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.form.detailList.splice(index, 1);
|
||||||
|
this.calculateTotal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算表单总金额
|
||||||
|
calculateTotal() {
|
||||||
|
this.totalAmount = this.form.detailList.reduce((sum, item) => {
|
||||||
|
const price = Number(item.price) || 0;
|
||||||
|
return sum + price;
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算财务记录总金额（通用方法）
|
||||||
|
calculateFinanceTotal(detailList) {
|
||||||
|
if (!detailList || !detailList.length) return '0.00';
|
||||||
|
const total = detailList.reduce((sum, item) => {
|
||||||
|
const price = Number(item.price) || 0;
|
||||||
|
return sum + price;
|
||||||
|
}, 0);
|
||||||
|
return this.formatCurrency(total);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开新增弹窗 - 默认添加一条空明细
|
||||||
|
openAddPopup() {
|
||||||
|
// 重置表单并默认添加一条空明细
|
||||||
|
this.form = {
|
||||||
|
financeId: '',
|
||||||
|
projectId: this.projectId,
|
||||||
|
financeType: '1',
|
||||||
|
financeTitle: '',
|
||||||
|
financeTime: new Date().toISOString().slice(0, 16),
|
||||||
|
financeParties: '',
|
||||||
|
payType: '',
|
||||||
|
remark: '',
|
||||||
|
detailList: [
|
||||||
|
{
|
||||||
|
detailId: Date.now(),
|
||||||
|
detailTitle: '',
|
||||||
|
price: ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.totalAmount = 0;
|
||||||
|
this.$refs.addPopup.open();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭新增弹窗
|
||||||
|
closeAddPopup() {
|
||||||
|
this.$refs.addPopup.close();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开详情弹窗
|
||||||
|
openDetailPopup(item) {
|
||||||
|
this.currentFinance = { ...item };
|
||||||
|
this.$refs.detailPopup.open();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭详情弹窗
|
||||||
|
closeDetailPopup() {
|
||||||
|
this.$refs.detailPopup.close();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
submitFinanceForm() {
|
||||||
|
// 验证每条明细
|
||||||
|
const validDetail = this.form.detailList.every(item => {
|
||||||
|
return item.detailTitle && item.price && !isNaN(Number(item.price));
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!validDetail) {
|
||||||
|
uni.showToast({ title: '请完善所有明细的名称和金额', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$refs.financeForm.validate().then(() => {
|
||||||
|
this.loading = true;
|
||||||
|
const params = { ...this.form };
|
||||||
|
|
||||||
|
const submitApi = params.financeId ? updateFinance : addFinance;
|
||||||
|
|
||||||
|
submitApi(params).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
uni.showToast({ title: params.financeId ? '修改成功' : '新增成功', icon: 'success' });
|
||||||
|
this.closeAddPopup();
|
||||||
|
this.loadFinanceList();
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('提交财务记录错误:', err);
|
||||||
|
uni.showToast({ title: '操作失败', icon: 'none' });
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
}).catch(err => {
|
||||||
|
console.log('表单验证失败:', err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 编辑记录
|
||||||
|
handleEdit() {
|
||||||
|
this.closeDetailPopup();
|
||||||
|
// 确保编辑时有至少一条明细
|
||||||
|
const detailList = this.currentFinance.detailList && this.currentFinance.detailList.length
|
||||||
|
? [...this.currentFinance.detailList]
|
||||||
|
: [{ detailId: Date.now(), detailTitle: '', price: '' }];
|
||||||
|
|
||||||
|
this.form = {
|
||||||
|
financeId: this.currentFinance.financeId,
|
||||||
|
projectId: this.projectId,
|
||||||
|
financeType: this.currentFinance.financeType,
|
||||||
|
financeTitle: this.currentFinance.financeTitle,
|
||||||
|
financeTime: this.currentFinance.financeTime ? this.formatDateTimeForInput(this.currentFinance.financeTime) : '',
|
||||||
|
financeParties: this.currentFinance.financeParties,
|
||||||
|
payType: this.currentFinance.payType,
|
||||||
|
remark: this.currentFinance.remark,
|
||||||
|
detailList: detailList
|
||||||
|
};
|
||||||
|
|
||||||
|
this.calculateTotal();
|
||||||
|
this.$refs.addPopup.open();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除记录
|
||||||
|
handleDelete() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除',
|
||||||
|
content: '确定要删除这条财务记录吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.loading = true;
|
||||||
|
delFinance(this.currentFinance.financeId).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
uni.showToast({ title: '删除成功', icon: 'success' });
|
||||||
|
this.closeDetailPopup();
|
||||||
|
this.loadFinanceList();
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: res.msg || '删除失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('删除财务记录错误:', err);
|
||||||
|
uni.showToast({ title: '删除失败', icon: 'none' });
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 格式化金额
|
||||||
|
formatCurrency(value) {
|
||||||
|
return parseFloat(value || 0).toFixed(2);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return '';
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 格式化日期时间（用于输入框）
|
||||||
|
formatDateTimeForInput(dateStr) {
|
||||||
|
if (!dateStr) return '';
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取支付类型名称
|
||||||
|
getPayTypeName(value) {
|
||||||
|
const type = this.payTypes.find(item => item.value === value);
|
||||||
|
return type ? type.label : '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
padding: 16rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-header {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 12rpx 0;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #666;
|
||||||
|
width: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add-container {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-list-container {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 80rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-tag {
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-tag.income {
|
||||||
|
background-color: #e8f4e9;
|
||||||
|
color: #2e7d32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-tag.expense {
|
||||||
|
background-color: #ffebee;
|
||||||
|
color: #c62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-content {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-btn-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 16rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
border-top: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-info {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-label {
|
||||||
|
color: #666;
|
||||||
|
width: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-value {
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-income {
|
||||||
|
color: #2e7d32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-expense {
|
||||||
|
color: #c62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 明细区域样式（替换table） */
|
||||||
|
.detail-section {
|
||||||
|
margin: 30rpx 0;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 明细行样式 */
|
||||||
|
.detail-row {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 12rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-row {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 4rpx 4rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-row {
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 明细列样式 */
|
||||||
|
.detail-col {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-col {
|
||||||
|
width: 10%;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-col {
|
||||||
|
width: 40%;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-col {
|
||||||
|
width: 30%;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-col {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 明细输入框样式 */
|
||||||
|
.detail-input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-detail {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
padding: 40rpx 0;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-amount {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
border-top: 1px dashed #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 详情弹窗中的明细样式 */
|
||||||
|
.detail-section-view {
|
||||||
|
margin: 20rpx 0;
|
||||||
|
padding: 10rpx;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header-view {
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-title-view {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
446
pages/workbench/profit/project.vue
Normal file
446
pages/workbench/profit/project.vue
Normal file
@@ -0,0 +1,446 @@
|
|||||||
|
<template>
|
||||||
|
<view class="project-page">
|
||||||
|
<!-- 新增按钮 -->
|
||||||
|
<view class="add-btn-row">
|
||||||
|
<u-search placeholder="根据项目名称搜索" v-model="queryParams.projectName" class="search-input" :show-action="false"
|
||||||
|
@search="handleSearch" />
|
||||||
|
<view class="button-group">
|
||||||
|
</input>
|
||||||
|
<uni-icons type="gift" size="30" @click="toggleQualityFilter" :color="qualityFilter ? '#ffcc00' : '#333'" />
|
||||||
|
<uni-icons type="search" size="30" @click="openSettingsPopup" color="#333"></uni-icons>
|
||||||
|
<uni-icons
|
||||||
|
type="plus"
|
||||||
|
size="30"
|
||||||
|
@click="handleAdd"
|
||||||
|
color="#333"
|
||||||
|
/>
|
||||||
|
<uni-drawer ref="filterDrawer" mode="right" :width="300">
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="filter-title">更多筛选条件</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">项目类型</text>
|
||||||
|
<oa-dict-select v-model="queryParams.projectType" dict-type="sys_project_type" placeholder="请选择项目类型"
|
||||||
|
@change="handleQuery" clearable />
|
||||||
|
</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">贸易类型</text>
|
||||||
|
<oa-dict-select v-model="queryParams.tradeType" dict-type="sys_trade_type" placeholder="请选择贸易类型"
|
||||||
|
@change="handleQuery" clearable />
|
||||||
|
</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">项目代号</text>
|
||||||
|
<oa-dict-select v-model="queryParams.projectCode" dict-type="sys_project_code" placeholder="请选择代号类型"
|
||||||
|
@change="handleQuery" clearable filterable />
|
||||||
|
</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">日期范围</text>
|
||||||
|
<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="至" start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期" @change="handleQuery" />
|
||||||
|
</view>
|
||||||
|
<view class="filter-actions">
|
||||||
|
<button class="primary" @click="handleQuery">查询</button>
|
||||||
|
<button @click="resetQuery">重置</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-drawer>
|
||||||
|
<!-- <uni-icons type="plus" size="30" @click="handleAdd" color="#333" /> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 项目列表 -->
|
||||||
|
<scroll-view scroll-y @scrolltolower="loadMore" :style="{ height: scrollHeight + 'px' }">
|
||||||
|
<view class="project-grid">
|
||||||
|
<view class="project-card" v-for="item in projectList" @click="handleDetail(item)">
|
||||||
|
<view class="project-title">
|
||||||
|
{{ item.projectName }}
|
||||||
|
<uni-tag v-if="item.projectStatus == 1" size="mini" type="success" text="进度完成"></uni-tag>
|
||||||
|
<uni-tag v-else-if="item.projectStatus == 0" size="mini" type="warning" text="进行中"></uni-tag>
|
||||||
|
</view>
|
||||||
|
<view class="project-info">
|
||||||
|
<text>{{ item.functionary }}</text>
|
||||||
|
<!-- <text :style="getRemainTimeStyle(item.remainTime)" v-if="item.projectStatus == 0">
|
||||||
|
剩余时间：{{ item.remainTime }}天
|
||||||
|
</text> -->
|
||||||
|
<text>{{ item.projectNum }}元</text>
|
||||||
|
<text>项目总金额：{{ item.funds }}元</text>
|
||||||
|
<text v-if="item.prePay > 0" style="color: #ffcc00;">预付款：{{ item.prePay }}元</text>
|
||||||
|
<view
|
||||||
|
style="display: flex; justify-content: flex-start; gap: 10rpx; position: absolute; bottom: 20rpx; margin-top: 10rpx;">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 加载更多组件 -->
|
||||||
|
<uni-load-more :status="loadMoreStatus"></uni-load-more>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
listProject,
|
||||||
|
addProject,
|
||||||
|
updateProject,
|
||||||
|
delProject,
|
||||||
|
getProject
|
||||||
|
} from '@/api/oa/project.js'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
projectList: [],
|
||||||
|
form: {},
|
||||||
|
editType: '', // add/edit
|
||||||
|
page: 1, // 当前页码
|
||||||
|
pageSize: 10, // 每页项目数量
|
||||||
|
selectedProject: {}, // 选中的项目
|
||||||
|
loadMoreStatus: 'more', // 加载更多状态
|
||||||
|
scrollHeight: 0, // 滚动区域高度
|
||||||
|
qualityFilter: false, // 优质筛选开关
|
||||||
|
searchTime: [], // 日期范围
|
||||||
|
queryParams: {
|
||||||
|
projectName: '',
|
||||||
|
projectType: '',
|
||||||
|
tradeType: '',
|
||||||
|
projectCode: '',
|
||||||
|
projectStatus: ''
|
||||||
|
},
|
||||||
|
dict: {
|
||||||
|
type: {
|
||||||
|
sys_project_type: [],
|
||||||
|
sys_trade_type: [],
|
||||||
|
sys_project_code: [],
|
||||||
|
sys_project_status: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getList();
|
||||||
|
this.calculateScrollHeight();
|
||||||
|
// TODO: 这里应请求字典数据填充dict.type
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getStatusLabel(val) {
|
||||||
|
const arr = this.dict.type.sys_project_status;
|
||||||
|
const found = arr.find(i => i.value === val);
|
||||||
|
return found ? found.label : '';
|
||||||
|
},
|
||||||
|
openSettingsPopup() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.filterDrawer) this.$refs.filterDrawer.open();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSearch() {
|
||||||
|
this.page = 1;
|
||||||
|
this.projectList = [];
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.page = 1;
|
||||||
|
this.projectList = [];
|
||||||
|
if (this.$refs.filterDrawer) this.$refs.filterDrawer.close();
|
||||||
|
// 日期范围处理
|
||||||
|
if (this.searchTime && this.searchTime.length === 2) {
|
||||||
|
this.queryParams.beginDate = this.searchTime[0];
|
||||||
|
this.queryParams.endDate = this.searchTime[1];
|
||||||
|
} else {
|
||||||
|
this.queryParams.beginDate = '';
|
||||||
|
this.queryParams.endDate = '';
|
||||||
|
}
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
resetQuery() {
|
||||||
|
this.queryParams = {
|
||||||
|
projectName: '',
|
||||||
|
projectType: '',
|
||||||
|
tradeType: '',
|
||||||
|
projectCode: '',
|
||||||
|
projectStatus: ''
|
||||||
|
};
|
||||||
|
this.searchTime = [];
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
filterCode(val) {
|
||||||
|
// 可根据需要自定义筛选逻辑
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
calculateScrollHeight() {
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
const tabHeight = 75; // tab高度
|
||||||
|
const containerPadding = 40; // 容器padding
|
||||||
|
this.scrollHeight = systemInfo.windowHeight - tabHeight - containerPadding + 80;
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
const params = {
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
...this.queryParams
|
||||||
|
};
|
||||||
|
if (this.qualityFilter) {
|
||||||
|
params.prePay = 0.1; // 添加优质筛选参数
|
||||||
|
}
|
||||||
|
listProject(params).then(res => {
|
||||||
|
const newProjects = (res.rows || []).map(row => ({
|
||||||
|
...row,
|
||||||
|
projectTypeLabel: row.projectType,
|
||||||
|
projectStatusLabel: row.projectStatus,
|
||||||
|
}));
|
||||||
|
this.projectList = [...this.projectList, ...newProjects];
|
||||||
|
|
||||||
|
if (newProjects.length < this.pageSize) {
|
||||||
|
this.loadMoreStatus = 'noMore'; // 没有更多数据
|
||||||
|
} else {
|
||||||
|
this.loadMoreStatus = 'more'; // 还有更多数据
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadMore() {
|
||||||
|
if (this.loadMoreStatus === 'more') {
|
||||||
|
console.log('加载更多');
|
||||||
|
this.page++;
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleAdd() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/workbench/profit/cost?id=' + '0'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDetail(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/workbench/profit/cost?id=' + item.projectId
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toggleQualityFilter() {
|
||||||
|
this.qualityFilter = !this.qualityFilter; // 切换优质筛选状态
|
||||||
|
this.page = 1; // 重置页码
|
||||||
|
this.projectList = []; // 清空当前项目列表
|
||||||
|
this.getList(); // 重新获取项目列表
|
||||||
|
},
|
||||||
|
openEditPopup(item) {
|
||||||
|
this.editType = 'edit';
|
||||||
|
getProject(item.projectId).then(res => {
|
||||||
|
this.form = {
|
||||||
|
...res.data
|
||||||
|
};
|
||||||
|
this.$refs.editPopup.open();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
closePopup() {
|
||||||
|
this.$refs.editPopup.close();
|
||||||
|
},
|
||||||
|
submitForm() {
|
||||||
|
if (this.editType === 'add') {
|
||||||
|
addProject(this.form).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.closePopup();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
updateProject(this.form).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.closePopup();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleClosure(item) {
|
||||||
|
const update = {
|
||||||
|
...item,
|
||||||
|
projectStatus: '1'
|
||||||
|
};
|
||||||
|
updateProject(update).then(() => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
delProject(item.projectId).then(() => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openDetailPopup(item) {
|
||||||
|
this.selectedProject = item;
|
||||||
|
this.$refs.detailPopup.open();
|
||||||
|
},
|
||||||
|
closeDetailPopup() {
|
||||||
|
this.$refs.detailPopup.close();
|
||||||
|
},
|
||||||
|
getRemainTimeStyle(remainTime) {
|
||||||
|
if (remainTime > 10) {
|
||||||
|
return {
|
||||||
|
color: '#3c763d'
|
||||||
|
}; // 绿色
|
||||||
|
} else if (remainTime > 5) {
|
||||||
|
return {
|
||||||
|
color: '#8a6d3b'
|
||||||
|
}; // 黄色
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
color: '#a94442'
|
||||||
|
}; // 红色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.add-btn-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
/* 右对齐 */
|
||||||
|
align-items: center;
|
||||||
|
margin: 20rpx;
|
||||||
|
gap: 10rpx;
|
||||||
|
/* 按钮之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
/* 按钮之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-content {
|
||||||
|
background-color: #fff;
|
||||||
|
/* 设置纯白背景 */
|
||||||
|
padding: 24px 18px 18px 18px;
|
||||||
|
/* 上右下左内边距 */
|
||||||
|
border-radius: 14px;
|
||||||
|
/* 圆角 */
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-label {
|
||||||
|
min-width: 80px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item oa-dict-select,
|
||||||
|
.filter-item picker,
|
||||||
|
.filter-item uni-datetime-picker {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item .uni-input {
|
||||||
|
background: #f7f7f7;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 18px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-actions button {
|
||||||
|
min-width: 90px;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #2979ff;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-actions button:not(.primary) {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
/* 右对齐 */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
/* 底部间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
/* 边框 */
|
||||||
|
border-radius: 10px;
|
||||||
|
/* 圆角 */
|
||||||
|
background-color: #fff;
|
||||||
|
/* 背景色 */
|
||||||
|
margin: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: calc(50% - 20px);
|
||||||
|
/* 每行两个卡片 */
|
||||||
|
padding: 20px 15px;
|
||||||
|
/* 添加内边距 */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
font-size: 20px;
|
||||||
|
/* 项目名称字号 */
|
||||||
|
font-weight: bold;
|
||||||
|
/* 加粗 */
|
||||||
|
color: #333;
|
||||||
|
/* 主字体颜色 */
|
||||||
|
margin-bottom: 5px;
|
||||||
|
/* 下边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info text {
|
||||||
|
display: block;
|
||||||
|
/* 每个信息占一行 */
|
||||||
|
margin-top: 5px;
|
||||||
|
/* 上边距 */
|
||||||
|
color: #666;
|
||||||
|
/* 较淡的字体颜色 */
|
||||||
|
font-size: 16px;
|
||||||
|
/* 信息字号 */
|
||||||
|
line-height: 1.5;
|
||||||
|
/* 行间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info {
|
||||||
|
margin-top: 10px;
|
||||||
|
/* 项目信息与标题之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增的样式 */
|
||||||
|
.horizontal-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* 在一行内均匀分布 */
|
||||||
|
margin-top: 10px;
|
||||||
|
/* 添加顶部间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-actions button {
|
||||||
|
flex: 1;
|
||||||
|
/* 按钮均分宽度 */
|
||||||
|
margin: 0 5px;
|
||||||
|
/* 按钮之间的间距 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
22
pages/workbench/project/schedule.vue
Normal file
22
pages/workbench/project/schedule.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
22
pages/workbench/project/step.vue
Normal file
22
pages/workbench/project/step.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
BIN
static/images/customer.png
Normal file
BIN
static/images/customer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
static/images/profitpro.png
Normal file
BIN
static/images/profitpro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
static/images/progress.png
Normal file
BIN
static/images/progress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@@ -4,6 +4,7 @@ import user from "./modules/user";
|
|||||||
import contact from "./modules/contact";
|
import contact from "./modules/contact";
|
||||||
import conversation from "./modules/conversation";
|
import conversation from "./modules/conversation";
|
||||||
import message from "./modules/message";
|
import message from "./modules/message";
|
||||||
|
import cache from './modules/cache.js'
|
||||||
import getters from "./getters";
|
import getters from "./getters";
|
||||||
|
|
||||||
Vue.use(Vuex);
|
Vue.use(Vuex);
|
||||||
@@ -14,6 +15,7 @@ const store = new Vuex.Store({
|
|||||||
contact,
|
contact,
|
||||||
conversation,
|
conversation,
|
||||||
message,
|
message,
|
||||||
|
cache
|
||||||
},
|
},
|
||||||
getters,
|
getters,
|
||||||
});
|
});
|
||||||
|
|||||||
78
store/modules/cache.js
Normal file
78
store/modules/cache.js
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
import { listProject } from '@/api/oa/project.js'
|
||||||
|
import { listUser } from '@/api/oa/user.js'
|
||||||
|
import { getDicts } from '@/api/oa/dict.js'
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
projectList: [],
|
||||||
|
userList: [],
|
||||||
|
projectMap: {},
|
||||||
|
userMap: {}, // 修正：添加逗号
|
||||||
|
dicts: {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const mutations = {
|
||||||
|
SET_DICT(state, data) {
|
||||||
|
state.dicts[data.type] = data.value
|
||||||
|
},
|
||||||
|
SET_USER(state, list) {
|
||||||
|
state.userList = list;
|
||||||
|
let o = {};
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
o[list[i].userId] = list[i];
|
||||||
|
}
|
||||||
|
state.userMap = o;
|
||||||
|
},
|
||||||
|
SET_PROJECT(state, list) {
|
||||||
|
state.projectList = list;
|
||||||
|
let o = {};
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
o[list[i].projectId] = list[i];
|
||||||
|
}
|
||||||
|
state.projectMap = o;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
setDict({ commit, state }, dictType) {
|
||||||
|
// 查找state中是否已经有dictType，如果已存在则不处理，否则请求数据并添加
|
||||||
|
if (!state.dicts[dictType]) {
|
||||||
|
// 调用获取字典的接口，传入字典类型
|
||||||
|
getDicts(dictType).then(res => {
|
||||||
|
// 假设接口返回的数据结构为 { data: [...] }，根据实际接口调整
|
||||||
|
commit('SET_DICT', {
|
||||||
|
type: dictType,
|
||||||
|
value: res.data
|
||||||
|
})
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取字典数据失败：', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setUser({ commit, state }, { refresh }) {
|
||||||
|
if (!refresh && state.userList.length > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
listUser({ pageSize: 999, pageNum: 1 }).then(res => {
|
||||||
|
commit('SET_USER', res.rows)
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取用户列表失败：', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setProject({ commit, state }, { refresh }) {
|
||||||
|
if (!refresh && state.projectList.length > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 与setUser逻辑类似，调用项目列表接口并提交mutation
|
||||||
|
listProject({ pageSize: 999, pageNum: 1 }).then(res => {
|
||||||
|
commit('SET_PROJECT', res.rows)
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取项目列表失败：', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
33
uni_modules/uni-badge/changelog.md
Normal file
33
uni_modules/uni-badge/changelog.md
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
## 1.2.2（2023-01-28）
|
||||||
|
- 修复 运行/打包 控制台警告问题
|
||||||
|
## 1.2.1（2022-09-05）
|
||||||
|
- 修复 当 text 超过 max-num 时，badge 的宽度计算是根据 text 的长度计算，更改为 css 计算实际展示宽度，详见:[https://ask.dcloud.net.cn/question/150473](https://ask.dcloud.net.cn/question/150473)
|
||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
|
||||||
|
## 1.1.7（2021-11-08）
|
||||||
|
- 优化 升级ui
|
||||||
|
- 修改 size 属性默认值调整为 small
|
||||||
|
- 修改 type 属性，默认值调整为 error，info 替换 default
|
||||||
|
## 1.1.6（2021-09-22）
|
||||||
|
- 修复 在字节小程序上样式不生效的 bug
|
||||||
|
## 1.1.5（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.4（2021-07-29）
|
||||||
|
- 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性
|
||||||
|
## 1.1.3（2021-06-24）
|
||||||
|
- 优化 示例项目
|
||||||
|
## 1.1.1（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.0（2021-05-12）
|
||||||
|
- 新增 uni-badge 的 absolute 属性，支持定位
|
||||||
|
- 新增 uni-badge 的 offset 属性，支持定位偏移
|
||||||
|
- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
|
||||||
|
- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
|
||||||
|
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
|
||||||
|
## 1.0.7（2021-05-07）
|
||||||
|
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
|
||||||
|
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
|
||||||
|
- 新增 uni-badge 属性 custom-style， 支持自定义样式
|
||||||
|
## 1.0.6（2021-02-04）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
268
uni_modules/uni-badge/components/uni-badge/uni-badge.vue
Normal file
268
uni_modules/uni-badge/components/uni-badge/uni-badge.vue
Normal file
@@ -0,0 +1,268 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-badge--x">
|
||||||
|
<slot />
|
||||||
|
<text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]"
|
||||||
|
class="uni-badge" @click="onClick()">{{displayValue}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Badge 数字角标
|
||||||
|
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
|
||||||
|
* @property {String} text 角标内容
|
||||||
|
* @property {String} size = [normal|small] 角标内容
|
||||||
|
* @property {String} type = [info|primary|success|warning|error] 颜色类型
|
||||||
|
* @value info 灰色
|
||||||
|
* @value primary 蓝色
|
||||||
|
* @value success 绿色
|
||||||
|
* @value warning 黄色
|
||||||
|
* @value error 红色
|
||||||
|
* @property {String} inverted = [true|false] 是否无需背景颜色
|
||||||
|
* @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
|
||||||
|
* @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
|
||||||
|
* @value rightTop 右上
|
||||||
|
* @value rightBottom 右下
|
||||||
|
* @value leftTop 左上
|
||||||
|
* @value leftBottom 左下
|
||||||
|
* @property {Array[number]} offset 距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
|
||||||
|
* @property {String} isDot = [true|false] 是否显示为一个小点
|
||||||
|
* @event {Function} click 点击 Badge 触发事件
|
||||||
|
* @example <uni-badge text="1"></uni-badge>
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniBadge',
|
||||||
|
emits: ['click'],
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'error'
|
||||||
|
},
|
||||||
|
inverted: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isDot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
maxNum: {
|
||||||
|
type: Number,
|
||||||
|
default: 99
|
||||||
|
},
|
||||||
|
absolute: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
offset: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [0, 0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: 'small'
|
||||||
|
},
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
width() {
|
||||||
|
return String(this.text).length * 8 + 12
|
||||||
|
},
|
||||||
|
classNames() {
|
||||||
|
const {
|
||||||
|
inverted,
|
||||||
|
type,
|
||||||
|
size,
|
||||||
|
absolute
|
||||||
|
} = this
|
||||||
|
return [
|
||||||
|
inverted ? 'uni-badge--' + type + '-inverted' : '',
|
||||||
|
'uni-badge--' + type,
|
||||||
|
'uni-badge--' + size,
|
||||||
|
absolute ? 'uni-badge--absolute' : ''
|
||||||
|
].join(' ')
|
||||||
|
},
|
||||||
|
positionStyle() {
|
||||||
|
if (!this.absolute) return {}
|
||||||
|
let w = this.width / 2,
|
||||||
|
h = 10
|
||||||
|
if (this.isDot) {
|
||||||
|
w = 5
|
||||||
|
h = 5
|
||||||
|
}
|
||||||
|
const x = `${- w + this.offset[0]}px`
|
||||||
|
const y = `${- h + this.offset[1]}px`
|
||||||
|
|
||||||
|
const whiteList = {
|
||||||
|
rightTop: {
|
||||||
|
right: x,
|
||||||
|
top: y
|
||||||
|
},
|
||||||
|
rightBottom: {
|
||||||
|
right: x,
|
||||||
|
bottom: y
|
||||||
|
},
|
||||||
|
leftBottom: {
|
||||||
|
left: x,
|
||||||
|
bottom: y
|
||||||
|
},
|
||||||
|
leftTop: {
|
||||||
|
left: x,
|
||||||
|
top: y
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const match = whiteList[this.absolute]
|
||||||
|
return match ? match : whiteList['rightTop']
|
||||||
|
},
|
||||||
|
dotStyle() {
|
||||||
|
if (!this.isDot) return {}
|
||||||
|
return {
|
||||||
|
width: '10px',
|
||||||
|
minWidth: '0',
|
||||||
|
height: '10px',
|
||||||
|
padding: '0',
|
||||||
|
borderRadius: '10px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
displayValue() {
|
||||||
|
const {
|
||||||
|
isDot,
|
||||||
|
text,
|
||||||
|
maxNum
|
||||||
|
} = this
|
||||||
|
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-success: #4cd964 !default;
|
||||||
|
$uni-warning: #f0ad4e !default;
|
||||||
|
$uni-error: #dd524d !default;
|
||||||
|
$uni-info: #909399 !default;
|
||||||
|
|
||||||
|
|
||||||
|
$bage-size: 12px;
|
||||||
|
$bage-small: scale(0.8);
|
||||||
|
|
||||||
|
.uni-badge--x {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
// align-self: flex-start;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-block;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--small {
|
||||||
|
transform: $bage-small;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
min-width: 20px;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 20px;
|
||||||
|
padding: 0 4px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: $uni-info;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
|
font-size: $bage-size;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
z-index: 999;
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
&--info {
|
||||||
|
color: #fff;
|
||||||
|
background-color: $uni-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--primary {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--success {
|
||||||
|
background-color: $uni-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--warning {
|
||||||
|
background-color: $uni-warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--error {
|
||||||
|
background-color: $uni-error;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--inverted {
|
||||||
|
padding: 0 5px 0 0;
|
||||||
|
color: $uni-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--info-inverted {
|
||||||
|
color: $uni-info;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--primary-inverted {
|
||||||
|
color: $uni-primary;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--success-inverted {
|
||||||
|
color: $uni-success;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--warning-inverted {
|
||||||
|
color: $uni-warning;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--error-inverted {
|
||||||
|
color: $uni-error;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
85
uni_modules/uni-badge/package.json
Normal file
85
uni_modules/uni-badge/package.json
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-badge",
|
||||||
|
"displayName": "uni-badge 数字角标",
|
||||||
|
"version": "1.2.2",
|
||||||
|
"description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
|
||||||
|
"keywords": [
|
||||||
|
"",
|
||||||
|
"badge",
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"数字角标",
|
||||||
|
"徽章"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
10
uni_modules/uni-badge/readme.md
Normal file
10
uni_modules/uni-badge/readme.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
## Badge 数字角标
|
||||||
|
> **组件名：uni-badge**
|
||||||
|
> 代码块： `uBadge`
|
||||||
|
|
||||||
|
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
52
uni_modules/uni-list/changelog.md
Normal file
52
uni_modules/uni-list/changelog.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
## 1.2.17（2025-08-20）
|
||||||
|
- 修复 右侧箭头类型错误的问题
|
||||||
|
## 1.2.16（2025-04-14）
|
||||||
|
- 修复 可触发点击反馈的 uni-list-item 没有hover效果的问题
|
||||||
|
## 1.2.15（2025-01-08）
|
||||||
|
- 修复 示例中过期图片地址
|
||||||
|
## 1.2.14（2023-04-14）
|
||||||
|
- 优化 uni-list-chat 具名插槽`header` 非app端套一层元素，方便使用时通过外层元素定位实现样式修改
|
||||||
|
## 1.2.13（2023-03-03）
|
||||||
|
- uni-list-chat 新增 支持具名插槽`header`
|
||||||
|
## 1.2.12（2023-02-01）
|
||||||
|
- 新增 列表图标新增 customPrefix 属性 ，用法 [详见](https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#icons-props)
|
||||||
|
## 1.2.11（2023-01-31）
|
||||||
|
- 修复 无反馈效果呈现的bug
|
||||||
|
## 1.2.9（2022-11-22）
|
||||||
|
- 修复 uni-list-chat 在vue3下跳转报错的bug
|
||||||
|
## 1.2.8（2022-11-21）
|
||||||
|
- 修复 uni-list-chat avatar属性 值为本地路径时错误的问题
|
||||||
|
## 1.2.7（2022-11-21）
|
||||||
|
- 修复 uni-list-chat avatar属性 在腾讯云版uniCloud下错误的问题
|
||||||
|
## 1.2.6（2022-11-18）
|
||||||
|
- 修复 uni-list-chat note属性 支持：“草稿”字样功能 文本少1位的问题
|
||||||
|
## 1.2.5（2022-11-15）
|
||||||
|
- 修复 uni-list-item 的 customStyle 属性 padding值在 H5端 无效的bug
|
||||||
|
## 1.2.4（2022-11-15）
|
||||||
|
- 修复 uni-list-item 的 customStyle 属性 padding值在nvue（vue2）下无效的bug
|
||||||
|
## 1.2.3（2022-11-14）
|
||||||
|
- uni-list-chat 新增 avatar 支持 fileId
|
||||||
|
## 1.2.2（2022-11-11）
|
||||||
|
- uni-list 新增属性 render-reverse 详情参考：[https://uniapp.dcloud.net.cn/component/list.html](https://uniapp.dcloud.net.cn/component/list.html)
|
||||||
|
- uni-list-chat note属性 支持：“草稿”字样 加红显示 详情参考uni-im：[https://ext.dcloud.net.cn/plugin?name=uni-im](https://ext.dcloud.net.cn/plugin?name=uni-im)
|
||||||
|
- uni-list-item 新增属性 customStyle 支持设置padding、backgroundColor
|
||||||
|
## 1.2.1（2022-03-30）
|
||||||
|
- 删除无用文件
|
||||||
|
## 1.2.0（2021-11-23）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list)
|
||||||
|
## 1.1.3（2021-08-30）
|
||||||
|
- 修复 在vue3中to属性在发行应用的时候报错的bug
|
||||||
|
## 1.1.2（2021-07-30）
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.1.1（2021-07-21）
|
||||||
|
- 修复 与其他组件嵌套使用时，点击失效的Bug
|
||||||
|
## 1.1.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.17（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.16（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
## 1.0.15（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 修复 uni-list-chat 角标显示不正常的问题
|
||||||
107
uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
Normal file
107
uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view class="uni-list-ad">
|
||||||
|
<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
|
||||||
|
<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111"
|
||||||
|
unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
</cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const dom = uni.requireNativePlugin('dom');
|
||||||
|
// #endif
|
||||||
|
export default {
|
||||||
|
name: 'UniListAd',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// inject: ['list'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFirstChild: false,
|
||||||
|
border: false,
|
||||||
|
borderShow: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.list = this.getForm()
|
||||||
|
if (this.list) {
|
||||||
|
if (!this.list.firstChildAppend) {
|
||||||
|
this.list.firstChildAppend = true
|
||||||
|
this.isFirstChild = true
|
||||||
|
}
|
||||||
|
this.border = this.list.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniList') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
aderror(e) {
|
||||||
|
console.log("aderror: " + JSON.stringify(e.detail));
|
||||||
|
},
|
||||||
|
closeAd(e) {
|
||||||
|
this.borderShow = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-list-ad {
|
||||||
|
position: relative;
|
||||||
|
border: 1px red solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
/* #ifdef APP-PLUS */
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
margin-left: $uni-spacing-row-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list--border:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
content: '';
|
||||||
|
-webkit-transform: scaleY(.5);
|
||||||
|
transform: scaleY(.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--first:after {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
/**
|
||||||
|
* 这里是 uni-list 组件内置的常用样式变量
|
||||||
|
* 如果需要覆盖样式，这里提供了基本的组件样式变量，您可以尝试修改这里的变量，去完成样式替换，而不用去修改源码
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$background-color : #fff;
|
||||||
|
// 分割线颜色
|
||||||
|
$divide-line-color : #e5e5e5;
|
||||||
|
|
||||||
|
// 默认头像大小，如需要修改此值，注意同步修改 js 中的值 const avatarWidth = xx ，目前只支持方形头像
|
||||||
|
// nvue 页面不支持修改头像大小
|
||||||
|
$avatar-width : 45px ;
|
||||||
|
|
||||||
|
// 头像边框
|
||||||
|
$avatar-border-radius: 5px;
|
||||||
|
$avatar-border-color: #eee;
|
||||||
|
$avatar-border-width: 1px;
|
||||||
|
|
||||||
|
// 标题文字样式
|
||||||
|
$title-size : 16px;
|
||||||
|
$title-color : #3b4144;
|
||||||
|
$title-weight : normal;
|
||||||
|
|
||||||
|
// 描述文字样式
|
||||||
|
$note-size : 12px;
|
||||||
|
$note-color : #999;
|
||||||
|
$note-weight : normal;
|
||||||
|
|
||||||
|
// 右侧额外内容默认样式
|
||||||
|
$right-text-size : 12px;
|
||||||
|
$right-text-color : #999;
|
||||||
|
$right-text-weight : normal;
|
||||||
|
|
||||||
|
// 角标样式
|
||||||
|
// nvue 页面不支持修改圆点位置以及大小
|
||||||
|
// 角标在左侧时，角标的位置，默认为 0 ，负数左/下移动，正数右/上移动
|
||||||
|
$badge-left: 0px;
|
||||||
|
$badge-top: 0px;
|
||||||
|
|
||||||
|
// 显示圆点时，圆点大小
|
||||||
|
$dot-width: 10px;
|
||||||
|
$dot-height: 10px;
|
||||||
|
|
||||||
|
// 显示角标时，角标大小和字体大小
|
||||||
|
$badge-size : 18px;
|
||||||
|
$badge-font : 12px;
|
||||||
|
// 显示角标时，角标前景色
|
||||||
|
$badge-color : #fff;
|
||||||
|
// 显示角标时，角标背景色
|
||||||
|
$badge-background-color : #ff5a5f;
|
||||||
|
// 显示角标时，角标左右间距
|
||||||
|
$badge-space : 6px;
|
||||||
|
|
||||||
|
// 状态样式
|
||||||
|
// 选中颜色
|
||||||
|
$hover : #f5f5f5;
|
||||||
593
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
Normal file
593
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
Normal file
@@ -0,0 +1,593 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
|
||||||
|
<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
|
||||||
|
<view class="uni-list-chat__container">
|
||||||
|
<view class="uni-list-chat__header-warp">
|
||||||
|
<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
|
||||||
|
<image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatarUrl" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<!-- 头像组 -->
|
||||||
|
<view v-else class="uni-list-chat__header">
|
||||||
|
<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
|
||||||
|
:style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
|
||||||
|
<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #ifndef APP -->
|
||||||
|
<view class="slot-header">
|
||||||
|
<!-- #endif -->
|
||||||
|
<slot name="header"></slot>
|
||||||
|
<!-- #ifndef APP -->
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
|
||||||
|
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-list-chat__content">
|
||||||
|
<view class="uni-list-chat__content-main">
|
||||||
|
<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
|
||||||
|
<view style="flex-direction: row;">
|
||||||
|
<text class="draft" v-if="isDraft">[草稿]</text>
|
||||||
|
<text class="uni-list-chat__content-note uni-ellipsis">{{isDraft?note.slice(14):note}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-list-chat__content-extra">
|
||||||
|
<slot>
|
||||||
|
<text class="uni-list-chat__content-extra-text">{{ time }}</text>
|
||||||
|
<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
|
||||||
|
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
</cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 头像大小
|
||||||
|
const avatarWidth = 45;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ListChat 聊天列表
|
||||||
|
* @description 聊天列表,用于创建聊天类列表
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||||
|
* @property {String} title 标题
|
||||||
|
* @property {String} note 描述
|
||||||
|
* @property {Boolean} clickable = [true|false] 是否开启点击反馈，默认为false
|
||||||
|
* @property {String} badgeText 数字角标内容
|
||||||
|
* @property {String} badgePositon = [left|right] 角标位置，默认为 right
|
||||||
|
* @property {String} link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
|
||||||
|
* @value false 不开启
|
||||||
|
* @value navigateTo 同 uni.navigateTo()
|
||||||
|
* @value redirectTo 同 uni.redirectTo()
|
||||||
|
* @value reLaunch 同 uni.reLaunch()
|
||||||
|
* @value switchTab 同 uni.switchTab()
|
||||||
|
* @property {String | PageURIString} to 跳转目标页面
|
||||||
|
* @property {String} time 右侧时间显示
|
||||||
|
* @property {Boolean} avatarCircle = [true|false] 是否显示圆形头像，默认为false
|
||||||
|
* @property {String} avatar 头像地址，avatarCircle 不填时生效
|
||||||
|
* @property {Array} avatarList 头像组，格式为 [{url:''}]
|
||||||
|
* @event {Function} click 点击 uniListChat 触发事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniListChat',
|
||||||
|
emits:['click'],
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
note: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
clickable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
to: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
badgeText: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
badgePositon: {
|
||||||
|
type: String,
|
||||||
|
default: 'right'
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
avatarCircle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
avatarList: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// inject: ['list'],
|
||||||
|
computed: {
|
||||||
|
isDraft(){
|
||||||
|
return this.note.slice(0,14) == '[uni-im-draft]'
|
||||||
|
},
|
||||||
|
isSingle() {
|
||||||
|
if (this.badgeText === 'dot') {
|
||||||
|
return 'uni-badge--dot';
|
||||||
|
} else {
|
||||||
|
const badgeText = this.badgeText.toString();
|
||||||
|
if (badgeText.length > 1) {
|
||||||
|
return 'uni-badge--complex';
|
||||||
|
} else {
|
||||||
|
return 'uni-badge--single';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computedAvatar() {
|
||||||
|
if (this.avatarList.length > 4) {
|
||||||
|
this.imageWidth = avatarWidth * 0.31;
|
||||||
|
return 'avatarItem--3';
|
||||||
|
} else if (this.avatarList.length > 1) {
|
||||||
|
this.imageWidth = avatarWidth * 0.47;
|
||||||
|
return 'avatarItem--2';
|
||||||
|
} else {
|
||||||
|
this.imageWidth = avatarWidth;
|
||||||
|
return 'avatarItem--1';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
avatar:{
|
||||||
|
handler(avatar) {
|
||||||
|
if(avatar.substr(0,8) == 'cloud://'){
|
||||||
|
uniCloud.getTempFileURL({
|
||||||
|
fileList: [avatar]
|
||||||
|
}).then(res=>{
|
||||||
|
// console.log(res);
|
||||||
|
// 兼容uniCloud私有化部署
|
||||||
|
let fileList = res.fileList || res.result.fileList
|
||||||
|
this.avatarUrl = fileList[0].tempFileURL
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
this.avatarUrl = avatar
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFirstChild: false,
|
||||||
|
border: true,
|
||||||
|
// avatarList: 3,
|
||||||
|
imageWidth: 50,
|
||||||
|
avatarUrl:''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.list = this.getForm()
|
||||||
|
if (this.list) {
|
||||||
|
if (!this.list.firstChildAppend) {
|
||||||
|
this.list.firstChildAppend = true;
|
||||||
|
this.isFirstChild = true;
|
||||||
|
}
|
||||||
|
this.border = this.list.border;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniList') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
onClick() {
|
||||||
|
if (this.to !== '') {
|
||||||
|
this.openPage();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.clickable || this.link) {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openPage() {
|
||||||
|
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
|
||||||
|
this.pageApi(this.link);
|
||||||
|
} else {
|
||||||
|
this.pageApi('navigateTo');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageApi(api) {
|
||||||
|
let callback = {
|
||||||
|
url: this.to,
|
||||||
|
success: res => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: res
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: err
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
switch (api) {
|
||||||
|
case 'navigateTo':
|
||||||
|
uni.navigateTo(callback)
|
||||||
|
break
|
||||||
|
case 'redirectTo':
|
||||||
|
uni.redirectTo(callback)
|
||||||
|
break
|
||||||
|
case 'reLaunch':
|
||||||
|
uni.reLaunch(callback)
|
||||||
|
break
|
||||||
|
case 'switchTab':
|
||||||
|
uni.switchTab(callback)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
uni.navigateTo(callback)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
$uni-font-size-lg:16px;
|
||||||
|
$uni-spacing-row-sm: 5px;
|
||||||
|
$uni-spacing-row-base: 10px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
$background-color: #fff;
|
||||||
|
$divide-line-color: #e5e5e5;
|
||||||
|
$avatar-width: 45px;
|
||||||
|
$avatar-border-radius: 5px;
|
||||||
|
$avatar-border-color: #eee;
|
||||||
|
$avatar-border-width: 1px;
|
||||||
|
$title-size: 16px;
|
||||||
|
$title-color: #3b4144;
|
||||||
|
$title-weight: normal;
|
||||||
|
$note-size: 12px;
|
||||||
|
$note-color: #999;
|
||||||
|
$note-weight: normal;
|
||||||
|
$right-text-size: 12px;
|
||||||
|
$right-text-color: #999;
|
||||||
|
$right-text-weight: normal;
|
||||||
|
$badge-left: 0px;
|
||||||
|
$badge-top: 0px;
|
||||||
|
$dot-width: 10px;
|
||||||
|
$dot-height: 10px;
|
||||||
|
$badge-size: 18px;
|
||||||
|
$badge-font: 12px;
|
||||||
|
$badge-color: #fff;
|
||||||
|
$badge-background-color: #ff5a5f;
|
||||||
|
$badge-space: 6px;
|
||||||
|
$hover: #f5f5f5;
|
||||||
|
|
||||||
|
.uni-list-chat {
|
||||||
|
font-size: $uni-font-size-lg;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: $background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .uni-list-chat--disabled {
|
||||||
|
// opacity: 0.3;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.uni-list-chat--hover {
|
||||||
|
background-color: $hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: relative;
|
||||||
|
margin-left: $uni-spacing-row-lg;
|
||||||
|
/* #ifdef APP-PLUS */
|
||||||
|
border-top-color: $divide-line-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list--border:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
content: '';
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $divide-line-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--first:after {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.uni-list-chat--first {
|
||||||
|
border-top-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-ellipsis {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-ellipsis-2 {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 2;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__container {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
padding: $uni-spacing-row-base $uni-spacing-row-lg;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header-warp {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap-reverse;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: $avatar-width;
|
||||||
|
height: $avatar-width;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
border-radius: $avatar-border-radius;
|
||||||
|
border-color: $avatar-border-color;
|
||||||
|
border-width: $avatar-border-width;
|
||||||
|
border-style: solid;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header-box {
|
||||||
|
/* #ifndef APP-PLUS */
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
width: $avatar-width;
|
||||||
|
height: $avatar-width;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
/* #endif */
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header-image {
|
||||||
|
margin: 1px;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: $avatar-width;
|
||||||
|
height: $avatar-width;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list-chat__header-image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarItem--1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarItem--2 {
|
||||||
|
width: 47%;
|
||||||
|
height: 47%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarItem--3 {
|
||||||
|
width: 32%;
|
||||||
|
height: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.header--circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-main {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: $uni-spacing-row-base;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-title {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $title-color;
|
||||||
|
font-weight: $title-weight;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft ,.uni-list-chat__content-note {
|
||||||
|
margin-top: 3px;
|
||||||
|
color: $note-color;
|
||||||
|
font-size: $note-size;
|
||||||
|
font-weight: $title-weight;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.draft{
|
||||||
|
color: #eb3a41;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
/* #endif */
|
||||||
|
padding-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-extra {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-extra-text {
|
||||||
|
color: $right-text-color;
|
||||||
|
font-size: $right-text-size;
|
||||||
|
font-weight: $right-text-weight;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__badge-pos {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 55px;
|
||||||
|
top: 3px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
|
||||||
|
top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__badge {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: $badge-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__badge-text {
|
||||||
|
color: $badge-color;
|
||||||
|
font-size: $badge-font;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--single {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
// left: calc(#{$avatar-width} + 7px + #{$badge-left});
|
||||||
|
/* #endif */
|
||||||
|
width: $badge-size;
|
||||||
|
height: $badge-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--complex {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 50px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: auto;
|
||||||
|
/* #endif */
|
||||||
|
height: $badge-size;
|
||||||
|
padding: 0 $badge-space;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--dot {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 60px;
|
||||||
|
top: 6px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
|
||||||
|
/* #endif */
|
||||||
|
width: $dot-width;
|
||||||
|
height: $dot-height;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat--right {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 0;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
542
uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
Normal file
542
uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
Normal file
@@ -0,0 +1,542 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<cell :keep-scroll-position="keepScrollPosition">
|
||||||
|
<!-- #endif -->
|
||||||
|
<view :class="{ 'uni-list-item--disabled': disabled }" :style="{'background-color':customStyle.backgroundColor}"
|
||||||
|
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
|
||||||
|
class="uni-list-item" @click="onClick">
|
||||||
|
<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
|
||||||
|
<view class="uni-list-item__container"
|
||||||
|
:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column'}"
|
||||||
|
:style="{paddingTop:padding.top,paddingLeft:padding.left,paddingRight:padding.right,paddingBottom:padding.bottom}">
|
||||||
|
<slot name="header">
|
||||||
|
<view class="uni-list-item__header">
|
||||||
|
<view v-if="thumb" class="uni-list-item__icon">
|
||||||
|
<image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
|
||||||
|
</view>
|
||||||
|
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
|
||||||
|
<uni-icons :customPrefix="extraIcon.customPrefix" :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<slot name="body">
|
||||||
|
<view class="uni-list-item__content"
|
||||||
|
:class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
|
||||||
|
<text v-if="title" class="uni-list-item__content-title"
|
||||||
|
:class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text>
|
||||||
|
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<slot name="footer">
|
||||||
|
<view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra"
|
||||||
|
:class="{ 'flex--justify': direction === 'column' }">
|
||||||
|
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
|
||||||
|
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" :custom-style="badgeStyle" />
|
||||||
|
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
|
||||||
|
@change="onSwitchChange" />
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="right" />
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
</cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* ListItem 列表子组件
|
||||||
|
* @description 列表子组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||||
|
* @property {String} title 标题
|
||||||
|
* @property {String} note 描述
|
||||||
|
* @property {String} thumb 左侧缩略图，若thumb有值，则不会显示扩展图标
|
||||||
|
* @property {String} thumbSize = [lg|base|sm] 略缩图大小
|
||||||
|
* @value lg 大图
|
||||||
|
* @value base 一般
|
||||||
|
* @value sm 小图
|
||||||
|
* @property {String} badgeText 数字角标内容
|
||||||
|
* @property {String} badgeType 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
|
||||||
|
* @property {Object} badgeStyle 数字角标样式
|
||||||
|
* @property {String} rightText 右侧文字内容
|
||||||
|
* @property {Boolean} disabled = [true|false] 是否禁用
|
||||||
|
* @property {Boolean} clickable = [true|false] 是否开启点击反馈
|
||||||
|
* @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
|
||||||
|
* @value navigateTo 同 uni.navigateTo()
|
||||||
|
* @value redirectTo 同 uni.redirectTo()
|
||||||
|
* @value reLaunch 同 uni.reLaunch()
|
||||||
|
* @value switchTab 同 uni.switchTab()
|
||||||
|
* @property {String | PageURIString} to 跳转目标页面
|
||||||
|
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
|
||||||
|
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
|
||||||
|
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
|
||||||
|
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
|
||||||
|
* @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
|
||||||
|
* @property {String} direction = [row|column] 排版方向
|
||||||
|
* @value row 水平排列
|
||||||
|
* @value column 垂直排列
|
||||||
|
* @event {Function} click 点击 uniListItem 触发事件
|
||||||
|
* @event {Function} switchChange 点击切换 Switch 时触发
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniListItem',
|
||||||
|
emits: ['click', 'switchChange'],
|
||||||
|
props: {
|
||||||
|
direction: {
|
||||||
|
type: String,
|
||||||
|
default: 'row'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
note: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
ellipsis: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
clickable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showArrow: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
to: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
showBadge: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showSwitch: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
switchChecked: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
badgeText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
badgeType: {
|
||||||
|
type: String,
|
||||||
|
default: 'success'
|
||||||
|
},
|
||||||
|
badgeStyle: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rightText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
thumb: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
thumbSize: {
|
||||||
|
type: String,
|
||||||
|
default: 'base'
|
||||||
|
},
|
||||||
|
showExtraIcon: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
extraIcon: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
type: '',
|
||||||
|
color: '#000000',
|
||||||
|
size: 20,
|
||||||
|
customPrefix: ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
padding: '',
|
||||||
|
backgroundColor: '#FFFFFF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
keepScrollPosition: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'customStyle.padding': {
|
||||||
|
handler(padding) {
|
||||||
|
if(typeof padding == 'number'){
|
||||||
|
padding += ''
|
||||||
|
}
|
||||||
|
let paddingArr = padding.split(' ')
|
||||||
|
if (paddingArr.length === 1) {
|
||||||
|
const allPadding = paddingArr[0]
|
||||||
|
this.padding = {
|
||||||
|
"top": allPadding,
|
||||||
|
"right": allPadding,
|
||||||
|
"bottom": allPadding,
|
||||||
|
"left": allPadding
|
||||||
|
}
|
||||||
|
} else if (paddingArr.length === 2) {
|
||||||
|
const [verticalPadding, horizontalPadding] = paddingArr;
|
||||||
|
this.padding = {
|
||||||
|
"top": verticalPadding,
|
||||||
|
"right": horizontalPadding,
|
||||||
|
"bottom": verticalPadding,
|
||||||
|
"left": horizontalPadding
|
||||||
|
}
|
||||||
|
} else if(paddingArr.length === 3) {
|
||||||
|
const [topPadding, horizontalPadding, bottomPadding] = paddingArr;
|
||||||
|
this.padding = {
|
||||||
|
"top": topPadding,
|
||||||
|
"right": horizontalPadding,
|
||||||
|
"bottom": bottomPadding,
|
||||||
|
"left": horizontalPadding
|
||||||
|
}
|
||||||
|
} else if (paddingArr.length === 4) {
|
||||||
|
const [topPadding, rightPadding, bottomPadding, leftPadding] = paddingArr;
|
||||||
|
this.padding = {
|
||||||
|
"top": topPadding,
|
||||||
|
"right": rightPadding,
|
||||||
|
"bottom": bottomPadding,
|
||||||
|
"left": leftPadding
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// inject: ['list'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFirstChild: false,
|
||||||
|
padding: {
|
||||||
|
top: "",
|
||||||
|
right: "",
|
||||||
|
bottom: "",
|
||||||
|
left: ""
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.list = this.getForm()
|
||||||
|
// 判断是否存在 uni-list 组件
|
||||||
|
if (this.list) {
|
||||||
|
if (!this.list.firstChildAppend) {
|
||||||
|
this.list.firstChildAppend = true;
|
||||||
|
this.isFirstChild = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniList') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
onClick() {
|
||||||
|
if (this.to !== '') {
|
||||||
|
this.openPage();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.clickable || this.link) {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSwitchChange(e) {
|
||||||
|
this.$emit('switchChange', e.detail);
|
||||||
|
},
|
||||||
|
openPage() {
|
||||||
|
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
|
||||||
|
this.pageApi(this.link);
|
||||||
|
} else {
|
||||||
|
this.pageApi('navigateTo');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageApi(api) {
|
||||||
|
let callback = {
|
||||||
|
url: this.to,
|
||||||
|
success: res => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: res
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: err
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
switch (api) {
|
||||||
|
case 'navigateTo':
|
||||||
|
uni.navigateTo(callback)
|
||||||
|
break
|
||||||
|
case 'redirectTo':
|
||||||
|
uni.redirectTo(callback)
|
||||||
|
break
|
||||||
|
case 'reLaunch':
|
||||||
|
uni.reLaunch(callback)
|
||||||
|
break
|
||||||
|
case 'switchTab':
|
||||||
|
uni.switchTab(callback)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
uni.navigateTo(callback)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-font-size-sm:12px;
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-font-size-lg:16px;
|
||||||
|
$uni-spacing-col-lg: 12px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
$uni-img-size-sm:20px;
|
||||||
|
$uni-img-size-base:26px;
|
||||||
|
$uni-img-size-lg:40px;
|
||||||
|
$uni-border-color:#e5e5e5;
|
||||||
|
$uni-bg-color-hover:#f1f1f1;
|
||||||
|
$uni-text-color-grey:#999;
|
||||||
|
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
|
||||||
|
|
||||||
|
.uni-list-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
font-size: $uni-font-size-lg;
|
||||||
|
position: relative;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
flex-direction: row;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--hover {
|
||||||
|
background-color: $uni-bg-color-hover !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__container {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
padding: $list-item-pd;
|
||||||
|
padding-left: $uni-spacing-row-lg;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
// align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--right {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .border--left {
|
||||||
|
// margin-left: $uni-spacing-row-lg;
|
||||||
|
// }
|
||||||
|
.uni-list--border {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list--border:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
content: '';
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.uni-list-item__content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
padding-right: 8px;
|
||||||
|
flex: 1;
|
||||||
|
color: #3b4144;
|
||||||
|
// overflow: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__content--center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__content-title {
|
||||||
|
font-size: $uni-font-size-base;
|
||||||
|
color: #3b4144;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__content-note {
|
||||||
|
margin-top: 6rpx;
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__extra {
|
||||||
|
// width: 25%;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__header {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__icon {
|
||||||
|
margin-right: 18rpx;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__icon-img {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
height: $uni-img-size-base;
|
||||||
|
width: $uni-img-size-base;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-icon-wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--direction {
|
||||||
|
flex-direction: column;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
align-items: initial;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--justify {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
justify-content: initial;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--lg {
|
||||||
|
height: $uni-img-size-lg;
|
||||||
|
width: $uni-img-size-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--base {
|
||||||
|
height: $uni-img-size-base;
|
||||||
|
width: $uni-img-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--sm {
|
||||||
|
height: $uni-img-size-sm;
|
||||||
|
width: $uni-img-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__extra-text {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-ellipsis-1 {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-ellipsis-2 {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
123
uni_modules/uni-list/components/uni-list/uni-list.vue
Normal file
123
uni_modules/uni-list/components/uni-list/uni-list.vue
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view class="uni-list uni-border-top-bottom">
|
||||||
|
<view v-if="border" class="uni-list--border-top"></view>
|
||||||
|
<slot />
|
||||||
|
<view v-if="border" class="uni-list--border-bottom"></view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
|
||||||
|
loadmoreoffset="15">
|
||||||
|
<slot />
|
||||||
|
</list>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* List 列表
|
||||||
|
* @description 列表组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||||
|
* @property {String} border = [true|false] 标题
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniList',
|
||||||
|
'mp-weixin': {
|
||||||
|
options: {
|
||||||
|
multipleSlots: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
stackFromEnd:{
|
||||||
|
type: Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
enableBackToTop: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
scrollY: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
renderReverse:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// provide() {
|
||||||
|
// return {
|
||||||
|
// list: this
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
created() {
|
||||||
|
this.firstChildAppend = false;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadMore(e) {
|
||||||
|
this.$emit('scrolltolower');
|
||||||
|
},
|
||||||
|
scroll(e) {
|
||||||
|
this.$emit('scroll', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-bg-color:#ffffff;
|
||||||
|
$uni-border-color:#e5e5e5;
|
||||||
|
|
||||||
|
.uni-list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: relative;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
border-bottom-color: $uni-border-color;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
|
||||||
|
.uni-list--border-top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
65
uni_modules/uni-list/components/uni-list/uni-refresh.vue
Normal file
65
uni_modules/uni-list/components/uni-list/uni-refresh.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
|
||||||
|
<slot />
|
||||||
|
</refresh>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'UniRefresh',
|
||||||
|
props: {
|
||||||
|
display: {
|
||||||
|
type: [String],
|
||||||
|
default: "hide"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pulling: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isShow() {
|
||||||
|
if (this.display === "show" || this.pulling === true) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
onchange(value) {
|
||||||
|
this.pulling = value;
|
||||||
|
},
|
||||||
|
onrefresh(e) {
|
||||||
|
this.$emit("refresh", e);
|
||||||
|
},
|
||||||
|
onpullingdown(e) {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$emit("pullingdown", e);
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
var detail = {
|
||||||
|
viewHeight: 90,
|
||||||
|
pullingDistance: e.height
|
||||||
|
}
|
||||||
|
this.$emit("pullingdown", detail);
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.uni-refresh {
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
87
uni_modules/uni-list/components/uni-list/uni-refresh.wxs
Normal file
87
uni_modules/uni-list/components/uni-list/uni-refresh.wxs
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
var pullDown = {
|
||||||
|
threshold: 95,
|
||||||
|
maxHeight: 200,
|
||||||
|
callRefresh: 'onrefresh',
|
||||||
|
callPullingDown: 'onpullingdown',
|
||||||
|
refreshSelector: '.uni-refresh'
|
||||||
|
};
|
||||||
|
|
||||||
|
function ready(newValue, oldValue, ownerInstance, instance) {
|
||||||
|
var state = instance.getState()
|
||||||
|
state.canPullDown = newValue;
|
||||||
|
// console.log(newValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchStart(e, instance) {
|
||||||
|
var state = instance.getState();
|
||||||
|
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
|
||||||
|
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
|
||||||
|
if (!state.canPullDown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log("touchStart");
|
||||||
|
|
||||||
|
state.height = 0;
|
||||||
|
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||||
|
state.refreshInstance.setStyle({
|
||||||
|
'height': 0
|
||||||
|
});
|
||||||
|
state.refreshInstance.callMethod("onchange", true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchMove(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var state = instance.getState();
|
||||||
|
if (!state.canPullDown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var oldHeight = state.height;
|
||||||
|
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||||
|
var height = endY - state.touchStartY;
|
||||||
|
if (height > pullDown.maxHeight) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var refreshInstance = state.refreshInstance;
|
||||||
|
refreshInstance.setStyle({
|
||||||
|
'height': height + 'px'
|
||||||
|
});
|
||||||
|
|
||||||
|
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
|
||||||
|
state.height = height;
|
||||||
|
refreshInstance.callMethod(pullDown.callPullingDown, {
|
||||||
|
height: height
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchEnd(e, ownerInstance) {
|
||||||
|
var state = e.instance.getState();
|
||||||
|
if (!state.canPullDown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
state.refreshInstance.callMethod("onchange", false);
|
||||||
|
|
||||||
|
var refreshInstance = state.refreshInstance;
|
||||||
|
if (state.height > pullDown.threshold) {
|
||||||
|
refreshInstance.callMethod(pullDown.callRefresh);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshInstance.setStyle({
|
||||||
|
'height': 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function propObserver(newValue, oldValue, instance) {
|
||||||
|
pullDown = newValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
touchmove: touchMove,
|
||||||
|
touchstart: touchStart,
|
||||||
|
touchend: touchEnd,
|
||||||
|
propObserver: propObserver
|
||||||
|
}
|
||||||
108
uni_modules/uni-list/package.json
Normal file
108
uni_modules/uni-list/package.json
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-list",
|
||||||
|
"displayName": "uni-list 列表",
|
||||||
|
"version": "1.2.17",
|
||||||
|
"description": "List 组件 ，帮助使用者快速构建列表。",
|
||||||
|
"keywords": [
|
||||||
|
"",
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"列表",
|
||||||
|
"",
|
||||||
|
"list"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "",
|
||||||
|
"uni-app": "^4.08",
|
||||||
|
"uni-app-x": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-badge",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "x",
|
||||||
|
"aliyun": "x",
|
||||||
|
"alipay": "x"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"uni-app": {
|
||||||
|
"vue": {
|
||||||
|
"vue2": "√",
|
||||||
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": "√",
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "√",
|
||||||
|
"union": "√"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"uni-app-x": {
|
||||||
|
"web": {
|
||||||
|
"safari": "-",
|
||||||
|
"chrome": "-"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"android": "-",
|
||||||
|
"ios": "-",
|
||||||
|
"harmony": "-"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "-"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
46
uni_modules/uni-list/readme.md
Normal file
46
uni_modules/uni-list/readme.md
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
## List 列表
|
||||||
|
> **组件名：uni-list**
|
||||||
|
> 代码块： `uList`、`uListItem`
|
||||||
|
> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
|
||||||
|
|
||||||
|
|
||||||
|
List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
|
||||||
|
|
||||||
|
在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
|
||||||
|
|
||||||
|
uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
|
||||||
|
|
||||||
|
uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
|
||||||
|
|
||||||
|
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
|
||||||
|
|
||||||
|
涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
|
||||||
|
|
||||||
|
下文均有样例给出。
|
||||||
|
|
||||||
|
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
|
||||||
|
|
||||||
|
### [点击查看详细文档](https://uniapp.dcloud.io/component/uniui/uni-indexed-list)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 基于uni-list扩展的页面模板
|
||||||
|
|
||||||
|
通过扩展插槽，可实现多种常见样式的列表
|
||||||
|
|
||||||
|
**新闻列表类**
|
||||||
|
|
||||||
|
1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
|
||||||
|
2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
|
||||||
|
3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
|
||||||
|
4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
|
||||||
|
5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
|
||||||
|
6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
|
||||||
|
7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
|
||||||
|
|
||||||
|
**商品列表类**
|
||||||
|
|
||||||
|
1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
|
||||||
|
2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
|
||||||
|
3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
|
||||||
BIN
unpackage/res/cover/1080___1882.9.png
Normal file
BIN
unpackage/res/cover/1080___1882.9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
unpackage/res/cover/480___762.9.png
Normal file
BIN
unpackage/res/cover/480___762.9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 32 KiB |
BIN
unpackage/res/cover/720___1242.9.png
Normal file
BIN
unpackage/res/cover/720___1242.9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -4,7 +4,7 @@ import { toast, tansParams } from './common'
|
|||||||
import { getSMSCodeFromOa, loginOaByPhone } from '../api/oa/login'
|
import { getSMSCodeFromOa, loginOaByPhone } from '../api/oa/login'
|
||||||
|
|
||||||
let timeout = 10000
|
let timeout = 10000
|
||||||
const baseUrl = 'http://110.41.139.73:8080'
|
const baseUrl = 'http://49.232.154.205:18081'
|
||||||
// const baseUrl = 'http://localhost:8080'
|
// const baseUrl = 'http://localhost:8080'
|
||||||
|
|
||||||
// 显示loading提示
|
// 显示loading提示
|
||||||
|
|||||||
@@ -89,7 +89,8 @@ function checkUpdate(forceCheck = false) {
|
|||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
const downloadUrl = `http://49.232.154.205:10900/fadapp-update/fad${remoteVersion}.apk`;
|
const v = remoteVersion.split(' ')[1]
|
||||||
|
const downloadUrl = `http://49.232.154.205:10900/fadapp-update/fad${v}.apk`;
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
plus.runtime.openURL(downloadUrl);
|
plus.runtime.openURL(downloadUrl);
|
||||||
// #endif
|
// #endif
|
||||||
|
|||||||
11
version.md
11
version.md
@@ -43,4 +43,13 @@
|
|||||||
+ 修复用户管理的权限问题
|
+ 修复用户管理的权限问题
|
||||||
|
|
||||||
## 4.8.2
|
## 4.8.2
|
||||||
+ 增加项目成本页面
|
+ 增加项目成本页面
|
||||||
|
|
||||||
|
## 4.8.3
|
||||||
|
+ 修改后端地址
|
||||||
|
|
||||||
|
## 4.8.5
|
||||||
|
+ 完善更新逻辑
|
||||||
|
|
||||||
|
## 5.0.0
|
||||||
|
+ 修改页面启动图
|
||||||
Reference in New Issue
Block a user