提交
This commit is contained in:
liuyuan
451
pages/folder/index.vue
Normal file
451
pages/folder/index.vue
Normal file
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<z-nav-bar title="我的病历夹" bgColor="#5188e5" fontColor="#fff">
|
||||
<template v-slot:right>
|
||||
<view class="top_right" @tap="createFolder">
|
||||
<uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
|
||||
<text>创建</text>
|
||||
</view>
|
||||
</template>
|
||||
</z-nav-bar>
|
||||
<view class="list_wrap">
|
||||
<view v-if="showMask" class="mask" @click="closeMenu"></view>
|
||||
<view class="list_content" v-if="list&&list.length>0">
|
||||
<view class="list_item" v-for="(item, index) in list" :key="index"
|
||||
@click="goToList(item.id, item.folderName)"
|
||||
@longpress="handleLongPress(index)"
|
||||
@touchstart="handleTouchStart(index)"
|
||||
@touchend="handleTouchEnd"
|
||||
:class="activeIndex==index?'active':''">
|
||||
<view class="item_data">
|
||||
<text class="item_name">{{item.folderName}}</text>
|
||||
<text class="item_time">{{item.createTime}}</text>
|
||||
</view>
|
||||
<!-- 长按弹窗菜单 -->
|
||||
<view class="action-menu" v-if="activeIndex === index && showMenu">
|
||||
<view class="menu-item" @tap.stop="renameItem(item.folderName, item.id)">
|
||||
<text>重命名</text><uni-icons type="compose" size="18"></uni-icons>
|
||||
</view>
|
||||
<view class="menu-item" @tap.stop="deleteItem(item)">
|
||||
<text style=" color: red;">删除</text><uni-icons type="trash" size="18" color="red"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="null_text" v-else>{{null_text}}</text>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="edit_folder" class="folder_popup">
|
||||
<view class="popup-content">
|
||||
<text class="edit_folder_name">重命名</text>
|
||||
<view class="edit_folder_input">
|
||||
<input type="text" v-model="folderName" placeholder="请输入病历夹名称" placeholder-class="custom-placeholder" />
|
||||
</view>
|
||||
<button class="edit_folder_btn" @click="update">保存</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<uni-popup ref="add_folder" class="folder_popup">
|
||||
<view class="popup-content">
|
||||
<text class="add_folder_name">创建病历夹</text>
|
||||
<view class="add_folder_input">
|
||||
<input type="text" v-model="addFolderName" placeholder="请输入病历夹名称" placeholder-class="custom-placeholder" />
|
||||
</view>
|
||||
<button class="add_folder_btn" @click="addFolder">保存</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
list: [],
|
||||
null_text: '',
|
||||
folderName: '',
|
||||
activeIndex: -1,
|
||||
showMenu: false, //是否显示菜单
|
||||
showMask: false, //是否显示遮罩
|
||||
addFolderName: '',
|
||||
isLongPress: false,
|
||||
touchStartTime: 0,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.hideTabBar();
|
||||
},
|
||||
onShow() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
getData() {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'taihumed/aiRecordFolder/getRecordFolders',
|
||||
method: "POST",
|
||||
data: {
|
||||
folderName: '',
|
||||
patientName: ''
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res=> {
|
||||
if(res.code==0){
|
||||
uni.hideLoading();
|
||||
if(res.list&&res.list.length>0){
|
||||
this.list = res.list;
|
||||
}else{
|
||||
this.list = [];
|
||||
this.null_text = '暂无数据';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//长按操作
|
||||
handleLongPress(index) {
|
||||
this.activeIndex = index;
|
||||
this.showMenu = true;
|
||||
this.showMask = true;
|
||||
//标记长按模式
|
||||
this.isLongPress = true;
|
||||
},
|
||||
//关闭菜单
|
||||
closeMenu() {
|
||||
this.showMenu = false;
|
||||
this.showMask = false;
|
||||
this.activeIndex = -1;
|
||||
},
|
||||
//重命名
|
||||
renameItem(name, id) {
|
||||
this.id = id; //编辑的id
|
||||
this.folderName = name;
|
||||
this.$refs.edit_folder.open('center');
|
||||
this.closeMenu();
|
||||
},
|
||||
//保存
|
||||
update(){
|
||||
if(!this.folderName){
|
||||
this.$commonJS.showToast("请输入病历夹名称");
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '正在保存'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'taihumed/aiRecordFolder/updateRecordFolder',
|
||||
method: "POST",
|
||||
data: {
|
||||
id: this.id,
|
||||
folderName: this.folderName,
|
||||
sort: 0
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res=> {
|
||||
if(res.code==0){
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.$refs.edit_folder.close();
|
||||
this.getData();
|
||||
}
|
||||
});
|
||||
},
|
||||
//删除
|
||||
deleteItem(data) {
|
||||
this.closeMenu();
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除['+ data.folderName +']病历夹？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '正在删除'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'taihumed/aiRecordFolder/delRecordFolder',
|
||||
method: "POST",
|
||||
data: {
|
||||
id: data.id
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res=> {
|
||||
if(res.code==0){
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.getData();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//创建
|
||||
createFolder(){
|
||||
this.$refs.add_folder.open();
|
||||
this.addFolderName = '';
|
||||
},
|
||||
//保存
|
||||
addFolder(){
|
||||
if(!this.addFolderName){
|
||||
this.$commonJS.showToast("请输入病历夹名称");
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '正在创建中'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'taihumed/aiRecordFolder/addRecordFolder',
|
||||
method: "POST",
|
||||
data: {
|
||||
folderName: this.addFolderName,
|
||||
sort: 0
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res=> {
|
||||
if(res.code==0){
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '创建成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.$refs.add_folder.close();
|
||||
this.getData();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
//跳转患者列表页
|
||||
goToList(id, name){
|
||||
if (this.isLongPress) {
|
||||
this.isLongPress = false; //重置状态
|
||||
}
|
||||
this.onPageJump("/pages/folder/patient?id="+id+"&name="+name);
|
||||
},
|
||||
//触摸开始（防抖）
|
||||
handleTouchStart(index) {
|
||||
this.isLongPress = false;
|
||||
},
|
||||
//触摸结束
|
||||
handleTouchEnd() {
|
||||
const touchDuration = Date.now() - this.touchStartTime;
|
||||
//如果触摸时间超过300ms，认为是长按（不触发点击）
|
||||
if (touchDuration > 300) {
|
||||
this.isLongPress = true;
|
||||
}
|
||||
},
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/mixin.scss';
|
||||
.content{
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
.top_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
|
||||
text{
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
padding-left: 2rpx;
|
||||
}
|
||||
}
|
||||
.list_content{
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
|
||||
.list_item{
|
||||
position: relative;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
.action-menu{
|
||||
padding: 15rpx;
|
||||
width: 320rpx;
|
||||
position: absolute;
|
||||
top: 75rpx;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.menu-item{
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.menu-item:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-item:active{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.item_data{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
line-height: 50rpx;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #e5dcdc;
|
||||
|
||||
.item_name{
|
||||
width: 60%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item_time{
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_item:last-child .item_data{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.null_text{
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
padding-top: 150rpx;
|
||||
}
|
||||
|
||||
|
||||
.edit_folder_name{
|
||||
font-size: 30rpx;
|
||||
line-height: 45rpx;
|
||||
color: #5188e5;
|
||||
}
|
||||
.edit_folder_input{
|
||||
margin-top: 20rpx;
|
||||
|
||||
input{
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #303030;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.custom-placeholder{
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.edit_folder_btn{
|
||||
width: 50%;
|
||||
margin: 25rpx auto 0;
|
||||
background: #5188e5;
|
||||
border-radius: 50rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.folder_popup{
|
||||
|
||||
.popup-content{
|
||||
padding: 30rpx;
|
||||
width: 550rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.mask{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.add_folder_name{
|
||||
font-size: 30rpx;
|
||||
line-height: 45rpx;
|
||||
color: #5188e5;
|
||||
}
|
||||
.add_folder_input{
|
||||
margin-top: 20rpx;
|
||||
|
||||
input{
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #303030;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.custom-placeholder{
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.add_folder_btn{
|
||||
width: 50%;
|
||||
margin: 25rpx auto 0;
|
||||
background: #5188e5;
|
||||
border-radius: 50rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user