451 lines
9.1 KiB
Vue
451 lines
9.1 KiB
Vue
<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> |