nursing_unit_vue/src/views/services/directivePackage/components/DirectivePackageModal.vue

323 lines
10 KiB
Vue
Raw Normal View History

2025-03-24 14:59:31 +08:00
<template>
<!-- <j-modal :title="title" :width="width" :maskClosable="false" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
2025-03-24 14:59:31 +08:00
<DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></DirectivePackageForm>
</j-modal> -->
<a-drawer v-model:open="visible" v-if="visible" :title="title" width="80vw" :closable="false"
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
<div style="display:flex;justify-content:space-between">
<div>
<a-card title="服务指令包详情" style="width: 25vw">
<DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
</DirectivePackageForm>
</a-card>
</div>
<a-card title="服务指令" style="width: 25vw">
<template #extra>
<a href="javascript:void(0);" @click="handleQuoteDirectives">引用 </a>
<a href="javascript:void(0);" @click="handleAddDirectives">新增</a>
</template>
<div class="scrollable-content">
<a-row>
<a-col :span="22" :push="1" v-for="directive of seletedRecord.directives" :key="directive.id"
style="margin-top: 15px;" @click="directiveInfo(directive)">
<a-badge-ribbon :text="filterDictTextByCache('period_type', directive.cycleType)"
:style="{ top: '-10px' }">
<a-card size="small">
<span>
<a-popconfirm title="是否确认移除?" ok-text="确认" cancel-text="取消"
@confirm="deleteDirective(directive.id)">
<a-button type="link" danger preIcon="ic:baseline-remove-circle"></a-button>
</a-popconfirm>
</span>
<div :class="{ 'selected': selectedDirective === directive.id }">
<div>
{{ directive.directiveName }}
</div>
<div>
体型标签{{ handleBodyTags('', directive, '') }}
</div>
<div>
情绪标签{{ handleEmotionTags('', directive, '') }}
</div>
</div>
</a-card>
</a-badge-ribbon>
</a-col>
</a-row>
</div>
</a-card>
<div>
<a-card title="服务指令详情" style="width: 25vw">
2025-03-28 16:44:40 +08:00
<div class="">分类标签{{ filterDictTextByCache('instruction_tag', derectiveInfo.instructionTagId) }}</div>
<div class="directiveInfoClass">服务类别{{ derectiveInfo.categoryName || derectiveInfo.categoryId_dictText }}
</div>
<div class="directiveInfoClass">服务类型{{ derectiveInfo.typeName || derectiveInfo.typeId_dictText }}</div>
<div class="directiveInfoClass">服务指令名称{{ derectiveInfo.directiveName }}</div>
2025-03-28 16:44:40 +08:00
<div class="directiveInfoClass">周期类型{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}</div>
<div class="directiveInfoClass">服务时长(分钟){{ derectiveInfo.serviceDuration }}</div>
<div class="directiveInfoClass">服务说明{{ derectiveInfo.serviceContent }}</div>
<div class="directiveInfoClass">体型标签{{ handleBodyTags('', derectiveInfo, '') }}</div>
<div class="directiveInfoClass">情绪标签{{ handleEmotionTags('', derectiveInfo, '') }}</div>
<div class="directiveInfoClass">语音文件
<span v-if="!derectiveInfo.mp3File">暂无文件</span>
<audio controls disabled="false" v-else>
<source :src="getFileAccessHttpUrl(derectiveInfo.mp3File)">
</audio>
</div>
<div class="directiveInfoClass">视频文件
<span v-if="!derectiveInfo.mp4File">暂无文件</span>
<video controls v-else>
<source :src="getFileAccessHttpUrl(derectiveInfo.mp4File)">
</video>
</div>
</a-card>
</div>
</div>
2025-03-28 16:44:40 +08:00
<!-- 服务指令列表编辑页 -->
<a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="70vw" :closable="false"
:footer-style="{ textAlign: 'right' }" :body-style="{ padding: 0 }">
<ConfigServiceDirectiveList ref="configServiceDirectiveListRef" :directiveList="seletedRecord.directives"
@deleteDirective="deleteDirective" @addDirective="addDirective">
</ConfigServiceDirectiveList>
<template #footer>
<a-button style="margin-right: 8px" @click="handleDirectiveCancel">关闭</a-button>
<a-button type="primary" @click="handleDirectiveOk">确定</a-button>
</template>
</a-drawer>
2025-03-28 16:44:40 +08:00
<!-- 引用 -->
<a-drawer v-model:open="directiveQuoteDrawer" title="引用服务指令包" width="80vw" :closable="false"
:footer-style="{ textAlign: 'right' }">
<PackageList ref="directivePackageListRef"></PackageList>
<template #footer>
<a-button style="margin-right: 8px" @click="handleQuoteDrawCancel">关闭</a-button>
<a-button type="primary" @click="handleQuoteDrawOk">确定</a-button>
</template>
</a-drawer>
<template #footer>
<a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk">确定</a-button>
</template>
</a-drawer>
2025-03-24 14:59:31 +08:00
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose, computed } from 'vue';
import DirectivePackageForm from './DirectivePackageForm.vue'
import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
2025-03-28 16:44:40 +08:00
import PackageList from './PackageList.vue'
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
import { useMessage } from '/@/hooks/web/useMessage';
2025-03-24 14:59:31 +08:00
const title = ref<string>('');
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['directiveOk', 'register', 'success']);
2025-03-28 16:44:40 +08:00
const directiveEditDrawer = ref<boolean>(false);
const configServiceDirectiveListRef = ref()
const derectiveInfo = ref({})
2025-03-28 16:44:40 +08:00
const selectedDirective = ref()
const directiveQuoteDrawer = ref(false)
const directivePackageListRef = ref()
const seletedRecord = ref({ directives: [] })//里面记录了已选择的服务指令,其他页面都需要操作这个对象
const { createMessage } = useMessage();
/**
* 处理体型标签翻译
* @param directive_
*/
function handleBodyTags(prefix, directive_, suffix) {
if (!!directive_.bodyTagList && directive_.bodyTagList.length > 0) {
let str = directive_.bodyTagList.map(item => item.tagName).join('、 ');
return prefix + str + suffix
} else {
return ''
}
}
/**
* 处理情绪标签翻译
2025-03-28 16:44:40 +08:00
* @param directive_
*/
function handleEmotionTags(prefix, directive_, suffix) {
if (!!directive_.emotionTagList && directive_.emotionTagList.length > 0) {
let str = directive_.emotionTagList.map(item => item.tagName).join('、 ');
2025-03-28 16:44:40 +08:00
return prefix + str + suffix
} else {
return ''
2025-03-24 14:59:31 +08:00
}
2025-03-28 16:44:40 +08:00
}
/**
* 新增
*/
function add() {
title.value = '新增服务指令包';
visible.value = true;
selectedDirective.value = ''
2025-03-28 16:44:40 +08:00
seletedRecord.value = { directives: [] }
derectiveInfo.value = {}
nextTick(() => {
registerForm.value.add();
});
}
2025-03-24 14:59:31 +08:00
/**
* 编辑
* @param record
*/
function edit(record) {
selectedDirective.value = ''
derectiveInfo.value = {}
2025-03-28 16:44:40 +08:00
seletedRecord.value = record
title.value = disableSubmit.value ? '详情' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.edit(record);
2025-03-24 14:59:31 +08:00
});
}
/**
* 确定按钮点击事件
*/
function handleOk() {
2025-03-28 16:44:40 +08:00
registerForm.value.submitForm(seletedRecord.value.directives);
}
/**
* form保存回调事件
*/
function submitCallback() {
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
}
2025-03-28 16:44:40 +08:00
/**
* 新增/编辑服务指令
*/
const handleAddDirectives = () => {
directiveEditDrawer.value = true;
};
2025-03-28 16:44:40 +08:00
/**
* 管理服务指令编辑页
*/
function handleDirectiveCancel() {
2025-03-28 16:44:40 +08:00
directiveEditDrawer.value = false;
}
2025-03-28 16:44:40 +08:00
/**
* 保存服务指令编辑结果
*/
function handleDirectiveOk() {
2025-03-28 16:44:40 +08:00
directiveEditDrawer.value = false;
}
2025-03-28 16:44:40 +08:00
/**
* 点击服务指令卡片时触发右侧展示指令详细信息
* @param directive
*/
function directiveInfo(directive) {
selectedDirective.value = directive.id
derectiveInfo.value = directive
}
2025-03-28 16:44:40 +08:00
/**
* 移除单个服务指令
* @param directiveId
*/
function deleteDirective(directiveId) {
setTimeout(() => {
derectiveInfo.value = {}
}, 200)
2025-03-28 16:44:40 +08:00
seletedRecord.value.directives = seletedRecord.value.directives.filter(item => item.id !== directiveId)
}
/**
* 新增单个服务指令
* @param directive_
*/
function addDirective(directive_) {
let res_ = seletedRecord.value.directives.filter(item => item.id == directive_.id)
if (res_.length > 0) {
createMessage.warning('服务指令已选择');
} else {
seletedRecord.value.directives.push(directive_)
}
}
/**
* 引用
*/
function handleQuoteDirectives() {
directiveQuoteDrawer.value = true
}
/**
* 处理引用确认操作
*/
function handleQuoteDrawOk() {
directiveQuoteDrawer.value = false
//将数据合并(有去重操作)
seletedRecord.value.directives = [
...seletedRecord.value.directives,
...directivePackageListRef.value.selectedDirective.directives.reduce((acc, current) => {
if (!seletedRecord.value.directives.some((item) => item.id === current.id)) {
acc.push(current);
}
return acc;
}, []),
];
}
/**
* 处理引用取消操作
*/
function handleQuoteDrawCancel() {
directiveQuoteDrawer.value = false
}
defineExpose({
add,
edit,
disableSubmit,
});
2025-03-24 14:59:31 +08:00
</script>
<style lang="less">
/**隐藏样式-modal确定按钮 */
.jee-hidden {
display: none !important;
}
</style>
<style lang="less" scoped>
.selected {
color: rgb(0, 156, 0);
font-weight: bold;
}
.directiveInfoClass {
margin-top: 10px;
}
.scrollable-content {
height: 70vh;
/* 设置固定高度为视口的50% */
overflow-y: auto;
/* 垂直方向超出时显示滚动条 */
padding-right: 8px;
/* 防止滚动条遮挡内容 */
}
2025-03-24 14:59:31 +08:00
</style>