qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 心路历程功能提交。

Browse Source
This commit is contained in:
tianyongbao
2024-06-04 17:21:04 +08:00
parent 2b281fe098
commit 1d94d25209
19 changed files with 1902 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.vue
View File

@@ -1,13 +1,32 @@
<script>
import config from './config'
import store from '@/store'
import { getToken } from '@/utils/auth'
export default {
onLaunch: function () {
},
onShow: function () {
},
onHide: function () {
}
}
export default {
onLaunch: function() {
this.initApp()
},
methods: {
// 初始化应用
initApp() {
// 初始化应用配置
this.initConfig()
// 检查用户登录状态
//#ifdef H5
this.checkLogin()
//#endif
},
initConfig() {
this.globalData.config = config
},
checkLogin() {
if (!getToken()) {
this.$tab.reLaunch('/pages/login')
}
}
}
}
</script>
<style lang="scss">

45
src/components/uni-cellItem/uni-cellItem.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<u-cell :border="false">
<view slot="title" class="title">
{{ title }}
</view>
<view slot="value" class="value" :style="valueStyle">
{{ value }}
</view>
</u-cell>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
valueStyle: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.title {
min-width: 220rpx;
color: rgba(0, 0, 0, 0.55);
}
.value {
color: rgba(0, 0, 0, 0.85);
}
</style>

41
src/components/uni-navbar/uni-navbar.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<view class="navbar">
<u-navbar
leftIconSize="40rpx"
leftIconColor="#333333"
:title="title"
:autoBack="true"
:border="border"
:titleStyle="titleStyle"
:placeholder="true"
>
</u-navbar>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
border: {
type: Boolean,
default: false
}
},
data() {
return {
titleStyle: {
color: '#252525',
fontSize: '39rpx',
fontWeight: 'bold'
}
}
}
}
</script>
<style>
</style>

86
src/components/uni-tarea/uni-tarea.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<view class="charts-box">
<qiun-data-charts type="tarea" :chartData="chartData" :opts="opts" :ontouch="true"/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
};
},
// mounted() {
// this.getServerData()
// },
methods: {
drawChart(xData, yData, unit) {
let max = Math.max.apply(null, yData) + 1
console.log(max)
let opts = {
"padding": [20, 0, 5, 0],
'enableScroll': true,
// "dataLabel": false,
"legend": {
"show": false
},
"xAxis": {
"disableGrid": true,
"fontColor": 'rgba(0, 0, 0, 0.45)',
"boundaryGap": 'center',
"fontSize":12,
"scrollShow": true,
"scrollColor": '#C8C8C8',
"itemCount": 8,
'rotateLabel': true,
},
"yAxis": {
"gridType": "dash",
"dashLength": 8,
"showTitle": true,
"data":[
{
"type": 'value',
"min":0,
"max": max,
"tofix": 1,
"title": unit,
"titleOffsetX": -10,
"titleOffsetY": -8,
"textAlign": 'right',
"fontColor": 'rgba(0, 0, 0, 0.45)',
}
]
},
"extra": {
"tooltip": {
"showBox": false
},
"area": {
"type": "curve",
"opacity": 0.8,
"addLine": true,
"width": 2,
"gradient": true,
},
}
}
this.opts = opts
let res = {
categories:xData,
series: [{data: yData}]
}
this.chartData = JSON.parse(JSON.stringify(res))
},
}
}
</script>
<style lang="scss">
.charts-box {
width: 100%;
height: 100%;
}
</style>

538
src/components/uni-tree-comp/uni-tree-comp.vue Normal file
View File

@@ -0,0 +1,538 @@
<template>
<view class="next-tree">
<view class="next-tree-mask" :class="{ 'show': showTree }" @tap="_cancel"></view>
<view class="next-tree-cnt" :class="{ 'show': showTree }">
<view class="next-tree-bar">
<view class="next-tree-bar-cancel" :style="{ 'color': cancelColor }" hover-class="hover-c" @tap="_cancel">取消
</view>
<view class="next-tree-bar-title" :style="{ 'color': titleColor }">{{ title }}</view>
<view class="next-tree-bar-confirm" :style="{ 'color': confirmColor }" hover-class="hover-c" @tap="_confirm">确定
</view>
</view>
<view class="next-tree-view">
<scroll-view class="next-tree-view-sc" :scroll-y="true">
<block v-for="(item, index) in treeList" :key="index">
<view class="next-tree-item" :style="[{
paddingLeft: item.rank * 15 + 'px',
zIndex: item.rank * -1 + 50
}]" :class="{
border: border === true,
show: item.show,
last: item.lastRank,
showchild: item.showChild,
open: item.open,
}">
<view class="next-tree-label" @tap.stop="_treeItemTap(item, index)">
<image class="next-tree-icon"
:src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image>
{{ item.name }}
</view>
<view class="next-tree-check" @tap.stop="_treeItemSelect(item, index)"
v-if="selectParent ? true : item.lastRank">
<view class="next-tree-check-yes" v-if="item.checked" :class="{ 'radio': !multiple }"
:style="{ 'border-color': confirmColor, 'background-color': confirmColor }">
<view class="next-tree-check-yes-b" :style="{ 'background-color': confirmColor }">
<text class="icon-text">✔</text>
</view>
</view>
<view class="next-tree-check-no" v-else :class="{ 'radio': !multiple }"
:style="{ 'border-color': confirmColor }"></view>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "next-tree",
props: {
treeData: {
type: Array,
default: function () {
return []
}
},
valueKey: {
type: String,
default: 'id'
},
labelKey: {
type: String,
default: 'label'
},
childrenKey: {
type: String,
default: 'children'
},
title: {
type: String,
default: ''
},
multiple: { // 是否可以多选
type: Boolean,
default: false
// default: true
},
selectParent: { //是否可以选父级
type: Boolean,
default: false
},
foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
type: Boolean,
default: false
},
confirmColor: { // 确定按钮颜色
type: String,
default: '#2681FF' // #f9ae3d
},
cancelColor: { // 取消按钮颜色
type: String,
default: '' // #757575
},
titleColor: { // 标题颜色
type: String,
default: '' // #757575
},
currentIcon: { // 展开时候的ic
type: String,
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg=='
},
defaultIcon: { // 折叠时候的ic
type: String,
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
},
lastIcon: { // 没有子集的ic
type: String,
default: ''
},
border: { // 是否有分割线
type: Boolean,
default: false
},
},
data() {
return {
showTree: false,
treeList: [],
selectIndex: -1,
childNums: [],
rt: [],
rtName: []
}
},
computed: {},
methods: {
_show() {
this.showTree = true
},
_hide() {
this.showTree = false
},
_cancel() {
this._hide()
this.$emit("cancel", '');
},
_confirm() {
this.rt = [];
this.rtName = [];
// 处理所选数据
this.treeList.forEach((item, i) => {
// if (item.checked && item.id == 100) {
// return this.confirmEach(this.treeData)
// }
if (item.checked && item.parentId) {
this.rt.push(item.id)
this.rtName.push(item.name)
}
})
this._hide()
this.$emit("confirm", { id: this.rt, name: this.rtName });
},
confirmEach(list) {
list.forEach((item, index) => {
if (item.isDy) {
this.rtName.push(item.name)
this.rt.push(item.id)
}
if (item.children && item.children.length > 0) this.confirmEach(item.children)
})
},
//扁平化树结构
_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
list.forEach(item => {
this.treeList.push({
id: item[this.valueKey],
name: item[this.labelKey],
source: item,
parentId, // 父级id数组
parents, // 父级id数组
rank, // 层级
showChild: false, //子级是否显示
open: false, //是否打开
show: rank === 0, // 自身是否显示
hideArr: [],
orChecked: item.checked ? item.checked : false,
checked: item.checked ? item.checked : false,
})
if (Array.isArray(item[this.childrenKey]) && item[this.childrenKey].length > 0) {
// console.log(item)
let parentid = [...parentId],
parentArr = [...parents],
childrenid = [];
delete parentArr.children
parentid.push(item[this.valueKey]);
parentArr.push({
[this.valueKey]: item[this.valueKey],
[this.labelKey]: item[this.labelKey]
})
this._renderTreeList(item[this.childrenKey], rank + 1, parentid, parentArr);
} else {
this.treeList[this.treeList.length - 1].lastRank = true;
}
})
},
// 处理默认选择
_defaultSelect() {
this.treeList.forEach((v, i) => {
if (v.checked) {
this.treeList.forEach((v2, i2) => {
if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
v2.show = true
if (v.parentId.includes(v2.id)) {
v2.showChild = true;
v2.open = true;
}
}
})
}
})
},
// 点击
_treeItemTap(item, index) {
if (item.lastRank === true) {
//点击最后一级时触发事件
this.treeList[index].checked = !this.treeList[index].checked
this._fixMultiple(index)
return;
}
let list = this.treeList;
let id = item.id;
item.showChild = !item.showChild;
item.open = item.showChild ? true : !item.open;
list.forEach((childItem, i) => {
if (item.showChild === false) {
//隐藏所有子级
if (!childItem.parentId.includes(id)) {
return;
}
if (!this.foldAll) {
if (childItem.lastRank !== true && !childItem.open) {
childItem.showChild = false;
}
// 为隐藏的内容添加一个标记
if (childItem.show) {
childItem.hideArr[item.rank] = id
}
} else {
if (childItem.lastRank !== true) {
childItem.showChild = false;
}
}
childItem.show = false;
} else {
// 打开子集
if (childItem.parentId[childItem.parentId.length - 1] === id) {
childItem.show = true;
}
// 打开被隐藏的子集
if (childItem.parentId.includes(id) && !this.foldAll) {
// console.log(childItem.hideArr)
if (childItem.hideArr[item.rank] === id) {
childItem.show = true;
if (childItem.open && childItem.showChild) {
childItem.showChild = true
} else {
childItem.showChild = false
}
childItem.hideArr[item.rank] = null
}
}
}
})
},
_treeItemSelect(item, index) {
this.treeList[index].checked = !this.treeList[index].checked
// 选父级, 子级自动全选
this.syncChecked(this.treeList, item.id, this.treeList[index].checked)
if (item.rank > 0) {
item.parentId.forEach((pid, indexP) => {
const parent = this.treeList.filter(i => i.id === pid)
const childNum = parent.length > 0 ? parent[0].childNum : 0
if (this.childNums[pid] === undefined) {
this.childNums[pid] = 1
} else if (this.childNums[pid] < childNum) {
this.childNums[pid]++
}
})
//子级选择/选满/取消选择, 父级往上同步状态
this.setAncestors(item.parentId, this.treeList[index].checked)
}
this._fixMultiple(index)
},
syncChecked(trees, pid, checked) {
trees.forEach((item, index) => {
if (item.parentId.includes(pid)) {
this.treeList[index].checked = checked
this.syncChecked(trees, item.id, checked)
} else if (item.children !== undefined) {
this.syncChecked(item.children, pid, checked)
}
})
},
setAncestors(pids, checked) {
this.treeList.forEach((item, index) => {
if (pids.includes(item.id)) {
if (checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) {
// 子级全部选中, 父级才选中
this.treeList[index].checked = true
} else {
this.treeList[index].checked = false
}
this.setAncestors(item.parentId, checked)
}
})
},
// _treeItemSelect(item, index) {
// this.treeList[index].checked = !this.treeList[index].checked
// this._fixMultiple(index)
// },
// 处理单选多选
_fixMultiple(index) {
if (!this.multiple) {
// 如果是单选
this.treeList.forEach((v, i) => {
if (i != index) {
this.treeList[i].checked = false
} else {
this.treeList[i].checked = true
}
})
}
},
// 重置数据
_reTreeList() {
this.treeList.forEach((v, i) => {
this.treeList[i].checked = v.orChecked
})
},
_initTree(treeData = this.treeData) {
this.treeList = [];
this._renderTreeList(treeData);
this.$nextTick(() => {
this._defaultSelect(treeData)
})
}
},
mounted() {
console.log('----------next-tree组件完成挂载demo------------')
this._initTree();
this.$watch(() => this.treeData, (list) => {
this._initTree(list);
}, { deep: true, immediate: true })
this.$watch(() => [this.multiple, this.selectParent], () => {
if (this.treeData.length) {
this._reTreeList();
}
}, { deep: true, immediate: true })
}
}
</script>
<style scoped>
.next-tree-mask {
position: fixed;
top: 0rpx;
right: 0rpx;
bottom: 0rpx;
left: 0rpx;
z-index: 9998;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.3s ease;
visibility: hidden;
}
.next-tree-mask.show {
visibility: visible;
opacity: 1;
}
.next-tree-cnt {
position: fixed;
top: 0rpx;
right: 0rpx;
bottom: 0rpx;
left: 0rpx;
z-index: 9999;
top: 160rpx;
transition: all 0.3s ease;
transform: translateY(100%);
}
.next-tree-cnt.show {
transform: translateY(0);
}
.next-tree-bar {
background-color: #fff;
height: 72rpx;
padding-left: 20rpx;
padding-right: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom-width: 1rpx !important;
border-bottom-style: solid;
border-bottom-color: #f5f5f5;
font-size: 32rpx;
color: #757575;
line-height: 1;
}
.next-tree-bar-confirm {
color: #f9ae3d;
}
.next-tree-view {
position: absolute;
top: 0rpx;
right: 0rpx;
bottom: 0rpx;
left: 0rpx;
top: 72rpx;
background-color: #fff;
padding-top: 20rpx;
padding-right: 20rpx;
padding-bottom: 20rpx;
padding-left: 20rpx;
}
.next-tree-view-sc {
height: 100%;
overflow: hidden;
}
.next-tree-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
color: #757575;
line-height: 1;
height: 0;
opacity: 0;
transition: 0.2s;
position: relative;
overflow: hidden;
}
.next-tree-item.show {
height: 80rpx;
opacity: 1;
}
.next-tree-item.showchild:before {
transform: rotate(90deg);
}
.next-tree-item.border {
border-bottom: 1rpx solid rgba(204, 204, 204, 0.2);
}
.next-tree-item.last:before {
opacity: 0;
}
.next-tree-icon {
width: 26rpx;
height: 26rpx;
margin-right: 8rpx;
}
.next-tree-label {
flex: 1;
display: flex;
align-items: center;
height: 100%;
line-height: 1.2;
}
.next-tree-check {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.next-tree-check-yes,
.next-tree-check-no {
width: 20px;
height: 20px;
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
border-top-width: 1rpx;
border-left-width: 1rpx;
border-bottom-width: 1rpx;
border-right-width: 1rpx;
border-style: solid;
border-color: #f9ae3d;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.next-tree-check-yes-b {
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
background-color: #f9ae3d;
color: #fff;
}
.next-tree-check-yes-b .icon-text {
font-size: 14px;
font-weight: normal;
font-family: uicon-iconfont;
display: flex;
flex-direction: row;
align-items: center;
}
.next-tree-check .radio {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.next-tree-check .radio .next-tree-check-yes-b {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.hover-c {
opacity: 0.6;
}
</style>

512
src/components/uni-tree/uni-tree.vue Normal file
View File

@@ -0,0 +1,512 @@
<template>
<view class="next-tree">
<view class="next-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
<view class="next-tree-cnt" :class="{'show':showTree}">
<view class="next-tree-bar">
<view class="next-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消</view>
<view class="next-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
<view class="next-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">确定</view>
</view>
<view class="next-tree-view">
<scroll-view class="next-tree-view-sc" :scroll-y="true">
<block v-for="(item, index) in treeList" :key="index">
<view class="next-tree-item" :style="[{
paddingLeft: item.rank*15 + 'px',
zIndex: item.rank*-1 +50
}]"
:class="{
border: border === true,
show: item.show,
last: item.lastRank,
showchild: item.showChild,
open: item.open,
}">
<view class="next-tree-label" @tap.stop="_treeItemTap(item, index)">
<image class="next-tree-icon" :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image>
{{item.name}}
</view>
<view class="next-tree-check" @tap.stop="_treeItemSelect(item, index)" v-if="selectParent?true:item.lastRank">
<view class="next-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}" :style="{'border-color':confirmColor, 'background-color':confirmColor}">
<view class="next-tree-check-yes-b" :style="{'background-color':confirmColor}">
<text class="icon-text">✔</text>
</view>
</view>
<view class="next-tree-check-no" v-else :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"></view>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "next-tree",
props: {
treeData: {
type: Array,
default: function() {
return []
}
},
valueKey: {
type: String,
default: 'id'
},
labelKey: {
type: String,
default: 'label'
},
childrenKey: {
type: String,
default: 'children'
},
title: {
type: String,
default: ''
},
multiple: { // 是否可以多选
type: Boolean,
default: false
// default: true
},
selectParent: { //是否可以选父级
type: Boolean,
default: false
},
foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
type: Boolean,
default: false
},
confirmColor: { // 确定按钮颜色
type: String,
default: '#2681FF' // #f9ae3d
},
cancelColor: { // 取消按钮颜色
type: String,
default: '' // #757575
},
titleColor: { // 标题颜色
type: String,
default: '' // #757575
},
currentIcon: { // 展开时候的ic
type: String,
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg=='
},
defaultIcon: { // 折叠时候的ic
type: String,
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
},
lastIcon: { // 没有子集的ic
type: String,
default: ''
},
border: { // 是否有分割线
type: Boolean,
default: false
},
},
data() {
return {
showTree: false,
treeList: [],
selectIndex: -1,
childNums: [],
rt:[],
rtName:[]
}
},
computed: {},
methods: {
_show() {
this.showTree = true
},
_hide() {
this.showTree = false
},
_cancel() {
this._hide()
this.$emit("cancel", '');
},
_confirm() {
this.rt=[];
this.rtName=[];
// 处理所选数据
this.treeList.forEach((item, i) => {
if(item.id==100&&item.checked){
return this.confirmEach(this.treeData)
}
if (item.checked&&item.parentId&&item.parentId!="100") {
this.rt.push(item.id)
this.rtName.push(item.name)
}
})
this._hide()
this.$emit("confirm", {id:this.rt,name:this.rtName});
},
confirmEach(list){
list.forEach((item,index)=>{
if(item.isDy){
this.rtName.push(item.name)
this.rt.push(item.id)
}
if(item.children&&item.children.length>0) this.confirmEach(item.children)
})
},
//扁平化树结构
_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
list.forEach(item => {
this.treeList.push({
id: item[this.valueKey],
name: item[this.labelKey],
source: item,
parentId, // 父级id数组
parents, // 父级id数组
rank, // 层级
showChild: false, //子级是否显示
open: false, //是否打开
show: rank === 0, // 自身是否显示
hideArr: [],
orChecked: item.checked ? item.checked : false,
checked: item.checked ? item.checked : false,
})
if (Array.isArray(item[this.childrenKey]) && item[this.childrenKey].length > 0) {
// console.log(item)
let parentid = [...parentId],
parentArr = [...parents],
childrenid = [];
delete parentArr.children
parentid.push(item[this.valueKey]);
parentArr.push({
[this.valueKey]: item[this.valueKey],
[this.labelKey]: item[this.labelKey]
})
this._renderTreeList(item[this.childrenKey], rank + 1, parentid, parentArr);
} else {
this.treeList[this.treeList.length - 1].lastRank = true;
}
})
},
// 处理默认选择
_defaultSelect() {
this.treeList.forEach((v, i) => {
if (v.checked) {
this.treeList.forEach((v2, i2) => {
if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
v2.show = true
if (v.parentId.includes(v2.id)) {
v2.showChild = true;
v2.open = true;
}
}
})
}
})
},
// 点击
_treeItemTap(item, index) {
if (item.lastRank === true) {
//点击最后一级时触发事件
this.treeList[index].checked = !this.treeList[index].checked
this._fixMultiple(index)
return;
}
let list = this.treeList;
let id = item.id;
item.showChild = !item.showChild;
item.open = item.showChild ? true : !item.open;
list.forEach((childItem, i) => {
if (item.showChild === false) {
//隐藏所有子级
if (!childItem.parentId.includes(id)) {
return;
}
if (!this.foldAll) {
if (childItem.lastRank !== true && !childItem.open) {
childItem.showChild = false;
}
// 为隐藏的内容添加一个标记
if (childItem.show) {
childItem.hideArr[item.rank] = id
}
} else {
if (childItem.lastRank !== true) {
childItem.showChild = false;
}
}
childItem.show = false;
} else {
// 打开子集
if (childItem.parentId[childItem.parentId.length - 1] === id) {
childItem.show = true;
}
// 打开被隐藏的子集
if (childItem.parentId.includes(id) && !this.foldAll) {
// console.log(childItem.hideArr)
if (childItem.hideArr[item.rank] === id) {
childItem.show = true;
if (childItem.open && childItem.showChild) {
childItem.showChild = true
} else {
childItem.showChild = false
}
childItem.hideArr[item.rank] = null
}
}
}
})
},
_treeItemSelect(item, index) {
this.treeList[index].checked = !this.treeList[index].checked
// 选父级, 子级自动全选
this.syncChecked(this.treeList, item.id, this.treeList[index].checked)
if(item.rank > 0) {
item.parentId.forEach((pid, indexP) => {
const parent = this.treeList.filter(i => i.id === pid)
const childNum = parent.length > 0 ? parent[0].childNum : 0
if(this.childNums[pid] === undefined) {
this.childNums[pid] = 1
} else if(this.childNums[pid] < childNum) {
this.childNums[pid]++
}
})
//子级选择/选满/取消选择, 父级往上同步状态
this.setAncestors(item.parentId, this.treeList[index].checked)
}
this._fixMultiple(index)
},
syncChecked (trees, pid, checked) {
trees.forEach((item,index) => {
if(item.parentId.includes(pid)) {
this.treeList[index].checked = checked
this.syncChecked(trees, item.id, checked)
} else if(item.children !== undefined) {
this.syncChecked(item.children, pid, checked)
}
})
},
setAncestors (pids, checked) {
this.treeList.forEach((item,index) => {
if(pids.includes(item.id)) {
if(checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) {
// 子级全部选中, 父级才选中
this.treeList[index].checked = true
} else {
this.treeList[index].checked = false
}
this.setAncestors(item.parentId, checked)
}
})
},
// _treeItemSelect(item, index) {
// this.treeList[index].checked = !this.treeList[index].checked
// this._fixMultiple(index)
// },
// 处理单选多选
_fixMultiple(index) {
if (!this.multiple) {
// 如果是单选
this.treeList.forEach((v, i) => {
if (i != index) {
this.treeList[i].checked = false
} else {
this.treeList[i].checked = true
}
})
}
},
// 重置数据
_reTreeList() {
this.treeList.forEach((v, i) => {
this.treeList[i].checked = v.orChecked
})
},
_initTree(treeData = this.treeData){
this.treeList = [];
this._renderTreeList(treeData);
this.$nextTick(() => {
this._defaultSelect(treeData)
})
}
},
mounted() {
console.log('----------next-tree组件完成挂载demo------------')
this._initTree();
this.$watch(() => this.treeData, (list) => {
this._initTree(list);
}, {deep: true, immediate: true})
this.$watch(() => [this.multiple, this.selectParent], () => {
if (this.treeData.length) {
this._reTreeList();
}
}, {deep: true, immediate: true})
}
}
</script>
<style scoped>
.next-tree-mask {
position: fixed;
top: 0rpx;
right: 0rpx;
bottom: 0rpx;
left: 0rpx;
z-index: 9998;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.3s ease;
visibility: hidden;
}
.next-tree-mask.show {
visibility: visible;
opacity: 1;
}
.next-tree-cnt {
position: fixed;
top: 0rpx;
right: 0rpx;
bottom: 0rpx;
left: 0rpx;
z-index: 9999;
top: 160rpx;
transition: all 0.3s ease;
transform: translateY(100%);
}
.next-tree-cnt.show {
transform: translateY(0);
}
.next-tree-bar {
background-color: #fff;
height: 72rpx;
padding-left: 20rpx;
padding-right: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom-width: 1rpx !important;
border-bottom-style: solid;
border-bottom-color: #f5f5f5;
font-size: 32rpx;
color: #757575;
line-height: 1;
}
.next-tree-bar-confirm {
color: #f9ae3d;
}
.next-tree-view {
position: absolute;
top: 0rpx;
right: 0rpx;
bottom: 0rpx;
left: 0rpx;
top: 72rpx;
background-color: #fff;
padding-top: 20rpx;
padding-right: 20rpx;
padding-bottom: 20rpx;
padding-left: 20rpx;
}
.next-tree-view-sc {
height: 100%;
overflow: hidden;
}
.next-tree-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
color: #757575;
line-height: 1;
height: 0;
opacity: 0;
transition: 0.2s;
position: relative;
overflow: hidden;
}
.next-tree-item.show {
height: 80rpx;
opacity: 1;
}
.next-tree-item.showchild:before {
transform: rotate(90deg);
}
.next-tree-item.border {
border-bottom: 1rpx solid rgba(204,204,204,0.2);
}
.next-tree-item.last:before {
opacity: 0;
}
.next-tree-icon {
width: 26rpx;
height: 26rpx;
margin-right: 8rpx;
}
.next-tree-label {
flex: 1;
display: flex;
align-items: center;
height: 100%;
line-height: 1.2;
}
.next-tree-check {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.next-tree-check-yes,
.next-tree-check-no {
width: 20px;
height: 20px;
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
border-top-width: 1rpx;
border-left-width: 1rpx;
border-bottom-width: 1rpx;
border-right-width: 1rpx;
border-style: solid;
border-color: #f9ae3d;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.next-tree-check-yes-b {
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
background-color: #f9ae3d;
color: #fff;
}
.next-tree-check-yes-b .icon-text {
font-size: 14px;
font-weight: normal;
font-family: uicon-iconfont;
display: flex;
flex-direction: row;
align-items: center;
}
.next-tree-check .radio {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.next-tree-check .radio .next-tree-check-yes-b {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.hover-c {
opacity: 0.6;
}
</style>

2
src/config.js
View File

@@ -1,7 +1,7 @@
// 应用全局配置
const config = {
// baseUrl: 'https://vue.ruoyi.vip/prod-api',
baseUrl: 'http://203.0.105.106:8288',
baseUrl: 'http://203.0.105.106:82/prod-api',
// baseUrl: 'http://localhost:8080',
//cloud后台网关地址
// baseUrl: 'http://192.168.10.3:8080',

1
src/env.d.ts vendored
View File

@@ -8,4 +8,5 @@ declare module '*.vue' {
export default component
}
declare module "uview-plus";
declare module "uview-ui";
declare module 'mqtt/dist/mqtt';

2
src/manifest.json
View File

@@ -1,5 +1,5 @@
{
"name" : "ruoyi-vue3",
"name" : "intc-invest-vue3",
"appid" : "__UNI__3DD118D",
"description" : "",
"versionName" : "1.0.0",

15
src/pages.json
View File

@@ -84,10 +84,23 @@
}
,
{
"path": "pages/work/heartJourney/index",
"path": "pages/work/heartJourney/list",
"style": {
"navigationBarTitleText": "心路历程"
}
} ,
{
"path": "pages/work/heartJourney/details",
"style": {
"navigationBarTitleText": "心路历程详情"
}
}
,
{
"path": "pages/work/heartJourney/addEdit",
"style": {
"navigationBarTitleText": "心路历程添加修改"
}
}
],
"subPackages": [

8
src/pages/index.vue
View File

@@ -666,17 +666,17 @@ onMounted(() => {
display: flex;
position: relative;
align-items: center;
margin: 10px 30px 10px 30px;
margin: 5px 10px 5px 10px;
.title {
margin-left: 10px;
color: rgb(133, 133, 148);
margin-bottom: 8px;
font-size: 15px;
font-size: 14px;
}
.num {
margin-left: 10px;
font-weight: bold;
font-size: 18px;
font-size: 15px;
}
}
img {
@@ -692,7 +692,7 @@ onMounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
font-size: 18px;
}
}
</style>

168
src/pages/work/heartJourney/addEdit.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<view class="container" style="paddingBottom:1rpx;">
<uni-navbar title="心路历程"></uni-navbar>
<view class="section">
<view class="section-title">心路历程</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="标题" prop="name" required >
<u--input v-model="form.name" placeholder="请填写标题"
inputAlign="right" border="none"></u--input>
</u-form-item>
<u-form-item label="类型" prop="typeName" required @click="handleShowTeam">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item>
<u-form-item label="记录时间" prop="createTime" required @click="selectDate()">
<u--input v-model="form.createTime" disabled disabledColor="#ffffff" placeholder="请选择记录时间" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="内容" prop="remark" required labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写内容" border="none" autoHeight inputAlign="right" count
maxlength="20000" style="padding:18rpx 0;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
<u-button type="primary" text="提交" @click="submit"></u-button>
</view>
</view>
</view>
<u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showTeam" :columns="journeyTypeList" keyName="dictLabel" @cancel="handleCancel"
@confirm="handleConfirm"></u-picker>
<u-datetime-picker
:show="datePickShow"
mode="datetime"
ref="createTimeRef"
@cancel="datePickShow=false"
@confirm="datePickConfirm"
itemHeight="88"
></u-datetime-picker>
</view>
</template>
<script>
import { listHeartJourney, getHeartJourney, delHeartJourney, addHeartJourney, updateHeartJourney } from '@/api/invest/heartJourney'
import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs'
export default {
data() {
return {
form: {
createTime: '',
name: '',
remark: '',
type: '',
createTime: '',
typeName: '',
id: '',
},
rules: {
name: [{ type: 'string', required: true, message: '请输入标题', trigger: ['change', 'blur'] }],
createTime: [{ type: 'string', required: true, message: '请选择记录时间', trigger: ['change', 'blur'] }],
type: [{ type: 'string', required: true, message: '请选择类型', trigger: ['change', 'blur'] }],
remark: [{ type: 'string', required: true, message: '请输入内容', trigger: ['change', 'blur'] }],
},
datePickShow: false,
id: '',
showTeam: false,
journeyTypeList: []
}
},
onLoad(option) {
this.form.id = option.id
this.getDict()
},
onReady() {
this.$refs.uForm.setRules(this.rules)
},
methods: {
getDict() {
// 工单状态
getDicts('journey_type').then(res => {
this.journeyTypeList =[res.data]
})
if(this.form.id!=null){
getHeartJourney(this.form.id).then(res => {
this.form = res.data
})
}
},
handleShowTeam() {
if (this.journeyTypeList[0].length === 0) {
this.$refs.uToast.show({
message: '类型为空 ', type: 'warning'
})
} else {
this.showTeam = true
}
},
handleConfirm(e) {
this.form.typeName = e.value[0].dictLabel
this.form.type = e.value[0].dictValue
this.showTeam = false
},
handleCancel() {
this.showTeam = false
},
selectDate() {
this.datePickShow = true
this.$refs.createTimeRef.innerValue = new Date().getTime()
},
datePickConfirm(e) {
this.form.createTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss")
this.datePickShow = false
},
submit() {
this.$refs.uForm.validate().then(() => {
if (this.form.id != null) {
updateHeartJourney({ ...this.form}).then(res => {
this.$refs.uToast.show({
message: '修改成功', complete() {
uni.navigateTo({ url: `/pages/work/heartJourney/list` })
}
})
})
}else {
addHeartJourney({ ...this.form}).then(res => {
this.$refs.uToast.show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/work/heartJourney/list` })
}
})
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
.section {
margin: 24rpx;
padding: 16rpx 24rpx;
background-color: #fff;
border-radius: 8rpx;
.section-title {
width: 160rpx;
color: #333333;
line-height: 44rpx;
font-size: 30rpx;
border-left: 6rpx solid #2681FF;
padding-left: 26rpx;
}
.form-view {
padding: 20rpx 0rpx 0 10rpx;
.form-btn {
padding-top: 20rpx;
}
}
}
</style>

76
src/pages/work/heartJourney/details.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<view class="container" style="paddingBottom:1rpx;">
<!-- <uni-navbar title="心路历程详情"></uni-navbar> -->
<view class="section">
<view class="section-title">{{ detailInfo.name }}</view>
<!-- <uni-cellItem title="标题:" :value="detailInfo.name"></uni-cellItem>
<uni-cellItem title="记录时间:" :value="detailInfo.createTime"></uni-cellItem>
<uni-cellItem title="内容:"></uni-cellItem> -->
<view class="content">{{ detailInfo.remark }}</view>
</view>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import { getHeartJourney} from '@/api/invest/heartJourney'
export default {
data() {
return {
detailInfo: {},
id: '',
}
},
onLoad(option) {
this.id = option.id
this.getInfo()
},
methods: {
getInfo() {
getHeartJourney(this.id).then(res => {
this.detailInfo = res.data
})
}
}
}
</script>
<style lang="scss" scoped>
.section {
margin: 24rpx;
padding: 16rpx 24rpx;
background-color: #fff;
border-radius: 8rpx;
.section-title {
width: 280rpx;
color: #333333;
line-height: 44rpx;
font-size: 30rpx;
border-left: 6rpx solid #2681FF;
padding-left: 26rpx;
}
.content {
width: 647rpx;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: left;
}
.img-con {
display: flex;
flex-wrap: wrap;
gap: 20rpx
}
.form-view {
padding: 20rpx 0rpx 0 10rpx;
.form-btn {
padding-top: 20rpx;
}
}
}
</style>

8
src/pages/work/heartJourney/index.vue
View File

@@ -1,8 +0,0 @@
<template>
<view class="work-container">
心路历程
</view>
</template>

378
src/pages/work/heartJourney/list.vue Normal file
View File

@@ -0,0 +1,378 @@
<template>
<view class="container">
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
<view class="search-view">
<u--input v-model="queryParams.name" border="false" placeholder="请输入标题" class="search-input"
@blur="searchBlur">
<template slot="prefix">
<u-icon name="search" color="#B8B8B8" size="48"></u-icon>
</template>
</u--input>
<u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
<u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">类型</view>
<view class="state-list">
<view v-for="item in journeyTypeList" :key="item.id" class="state-item"
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
</view>
</view>
<view class="btn-box">
<u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
<u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
</view>
</view>
</u-transition>
</view>
</u-sticky>
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header" @click="enterDetails(item)">
<u--text suffixIcon="arrow-right" lines="1" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
:text="item.name" size="36rpx" color="#333333" :bold="true"></u--text>
</view>
<view class="item-row">
<text class="row-label">类型：</text>
<text class="row-value">{{ dictStr(item.type, journeyTypeList) }}</text>
</view>
<view class="item-row">
<text class="row-label">记录时间：</text>
<text class="row-value">{{ item.createTime }}</text>
</view>
<view class="item-row">
<text class="row-label">内容：</text>
<text class="row-value">{{ item.remark }}</text>
</view>
<view class="operate" >
<view class="btn filling" @click="enterDetails(item)">查看</view>
<view class="btn filling" @click="handleEdit(item)">修改</view>
<view class="btn filling" @click="handleDelete(item)">删除</view>
</view>
</view>
</u-list-item>
<view>
</view>
<u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
</u-list>
<u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
@confirm="settingConfirm" @cancel="settingCancel"></u-picker>
</view>
</template>
<script>
import { listHeartJourney, delHeartJourney } from '@/api/invest/heartJourney'
import { getDicts } from '@/api/system/dict/data.js'
export default {
data() {
return {
filterPanel: false,
listData: [],
pageNum: 1,
queryParams: {
name: '',
type: '',
},
status: 'loadmore',
journeyTypeList: [],
settingPickShow: false,
settingColumns: [],
columns: [],
isShow: false
}
},
computed: {
windowHeight() {
return uni.getSystemInfoSync().windowHeight - 50
}
},
onLoad() {
this.getDict()
this.getList()
},
onShow() {
if (this.isShow) {
this.getList()
this.isShow = false
}
},
methods: {
loadmore() {
this.pageNum += 1
if (this.status == 'loadmore') {
this.getList()
}
},
getList() {
this.status = 'loading'
listHeartJourney({ pageSize: 10, pageNum: this.pageNum, ...this.queryParams }).then(res => {
this.listData = this.listData.concat(res.rows)
if (this.listData.length < res.total) {
this.status = 'loadmore'
} else {
this.status = 'nomore'
}
}).catch(() => {
this.status = 'nomore'
})
},
getDict() {
// 工单状态
getDicts('journey_type').then(res => {
this.journeyTypeList = res.data
})
},
settingConfirm(e) {
this.queryParams.settingId = e.value[0].settingId
this.queryParams.settingName = e.value[0].settingName
this.settingPickShow = false
},
settingCancel() {
this.settingPickShow = false
},
dictStr(val, arr) {
let str = ''
arr.map(item => {
if (item.dictValue === val) {
str = item.dictLabel
}
})
return str
},
selectStatus(item) {
this.queryParams.type = item.dictValue
this.journeyTypeList.map(ele => {
if (ele.dictValue == item.dictValue) {
ele.selected = true
this.$set(ele, 'selected', true)
} else {
this.$set(ele, 'selected', false)
}
})
},
searchSubmit() {
this.pageNum = 1
this.listData = []
this.getList()
this.filterPanel = false
},
searchBlur() {
this.pageNum = 1
this.listData = []
this.getList()
},
resetQuery() {
this.queryParams.name = '',
this.queryParams.type = ''
this.journeyTypeList.map(ele => {
this.$set(ele, 'selected', false)
})
},
enterDetails(item) {
uni.navigateTo({ url: `/pages/work/heartJourney/details?id=${item.id}` })
},
handleEdit(item) {
uni.navigateTo({ url: `/pages/work/heartJourney/addEdit?id=${item.id}` })
this.isShow = true
},
handleAdd() {
uni.navigateTo({ url: `/pages/work/heartJourney/addEdit` })
this.isShow = true
},
handleDelete(item) {
uni.showModal({
title: '提示',
content: '你确定要删除吗',
success: function (res) {
if (res.confirm) {
delHeartJourney(item.id)
uni.navigateTo({ url: `/pages/work/heartJourney/list` })
} else if (res.cancel) {
console.log('取消');
}
}
});
},
}
}
</script>
<style lang="scss" scoped>
.btnAdd {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 8rpx;
display:float;
text-align: center;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 24rpx;
.search-input {
background: #F5F5F5;
color: #333333;
margin-right: 36rpx;
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
.filter-panel-content {
background-color: #ffff;
padding: 0 30rpx 30rpx;
.filter-title {
color: #000000;
font-size: 30rpx;
font-weight: 500;
padding: 30rpx 0;
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
}
}
.btn-box {
display: flex;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
}
}
}
.list-item {
margin: 0 24rpx 24rpx;
padding: 32rpx;
background-color: #fff;
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.status {
.status-item {
width: 120rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
border-radius: 4rpx;
font-size: 24rpx;
}
.status1 {
background: #F0F0F0;
color: #8C8C8C;
}
.status2 {
background: rgba(38, 129, 255, 0.2);
color: #2681FF;
}
.status3 {
background: #F7F7F7;
color: #2681FF;
}
.status4 {
background: rgba(255, 85, 51, 0.2);
color: #FF5533;
}
.status5 {
background: #F7F7F7;
color: rgba(0, 0, 0, 0.85);
}
.status7 {
background: rgba(255, 129, 51, 0.2);
color: #FF8133;
}
.status8 {
background: rgba(65, 217, 165, 0.2);
color: #41D9A5;
}
}
}
.item-row {
padding: 16rpx 0;
.row-label {
color: rgba(0, 0, 0, 0.55);
}
.row-value {
color: rgba(0, 0, 0, 0.85)
}
}
.operate {
display: flex;
justify-content: flex-end;
.btn {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 8rpx;
margin-left: 5rpx;
text-align: center;
}
.circulation {
background: rgba(0, 0, 0, 0.04);
margin-right: 24rpx;
color: rgba(0, 0, 0, 0.85);
}
.filling {
background: #2681FF;
border-radius: 8rpx;
color: #FFFFFF;
}
}
}
</style>

2
src/pages/work/index.vue
View File

@@ -87,7 +87,7 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
{ path: '/pages/page1/page1', text: '账户交易记录', icon: 'paperclip', permission: 'invest:accountDealRecord:list' }
])
const heartJourneyGridList=ref([
{ path: '/pages/work/heartJourney/index', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list' }
{ path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list' }
])
function navigateTo(path) {
uni.navigateTo({

2
src/store/index.ts
View File

@@ -1,4 +1,6 @@
import { createPinia } from "pinia"
import piniaPluginPersist from 'pinia-plugin-persist' //++++
const store = createPinia()
store.use(piniaPluginPersist) //++++
export default store

5
src/store/modules/dict.ts
View File

@@ -1,7 +1,7 @@
import { defineStore } from "pinia";
const useDictStore = defineStore("dict", {
state: () => ({
dict: new Array(),
dict: Array(),
}),
actions: {
// 获取字典
@@ -50,6 +50,9 @@ const useDictStore = defineStore("dict", {
// 初始字典
initDict() {},
},
persist: {
enabled: true, // 开启数据缓存 +++++++
}
});
export default useDictStore;

3
src/store/modules/user.ts
View File

@@ -83,6 +83,9 @@ const useUserStore = defineStore("user", {
});
},
},
persist: {
enabled: true, // 开启数据缓存 +++++++
}
});
export default useUserStore;