323 lines
10 KiB
Vue
323 lines
10 KiB
Vue
<template>
|
||
<!-- <j-modal :title="title" :width="width" :maskClosable="false" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
|
||
<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">
|
||
<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>
|
||
<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>
|
||
|
||
<!-- 服务指令列表编辑页 -->
|
||
<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>
|
||
|
||
<!-- 引用 -->
|
||
<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>
|
||
</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';
|
||
import PackageList from './PackageList.vue'
|
||
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
|
||
const title = ref<string>('');
|
||
const visible = ref<boolean>(false);
|
||
const disableSubmit = ref<boolean>(false);
|
||
const registerForm = ref();
|
||
const emit = defineEmits(['directiveOk', 'register', 'success']);
|
||
const directiveEditDrawer = ref<boolean>(false);
|
||
const configServiceDirectiveListRef = ref()
|
||
const derectiveInfo = ref({})
|
||
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 ''
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理情绪标签翻译
|
||
* @param directive_
|
||
*/
|
||
function handleEmotionTags(prefix, directive_, suffix) {
|
||
if (!!directive_.emotionTagList && directive_.emotionTagList.length > 0) {
|
||
let str = directive_.emotionTagList.map(item => item.tagName).join('、 ');
|
||
return prefix + str + suffix
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 新增
|
||
*/
|
||
function add() {
|
||
title.value = '新增服务指令包';
|
||
visible.value = true;
|
||
selectedDirective.value = ''
|
||
seletedRecord.value = { directives: [] }
|
||
derectiveInfo.value = {}
|
||
nextTick(() => {
|
||
registerForm.value.add();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 编辑
|
||
* @param record
|
||
*/
|
||
function edit(record) {
|
||
selectedDirective.value = ''
|
||
derectiveInfo.value = {}
|
||
seletedRecord.value = record
|
||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||
visible.value = true;
|
||
nextTick(() => {
|
||
registerForm.value.edit(record);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 确定按钮点击事件
|
||
*/
|
||
function handleOk() {
|
||
registerForm.value.submitForm(seletedRecord.value.directives);
|
||
}
|
||
|
||
/**
|
||
* form保存回调事件
|
||
*/
|
||
function submitCallback() {
|
||
handleCancel();
|
||
emit('success');
|
||
}
|
||
|
||
/**
|
||
* 取消按钮回调事件
|
||
*/
|
||
function handleCancel() {
|
||
visible.value = false;
|
||
}
|
||
|
||
/**
|
||
* 新增/编辑服务指令
|
||
*/
|
||
const handleAddDirectives = () => {
|
||
directiveEditDrawer.value = true;
|
||
};
|
||
|
||
/**
|
||
* 管理服务指令编辑页
|
||
*/
|
||
function handleDirectiveCancel() {
|
||
directiveEditDrawer.value = false;
|
||
}
|
||
|
||
/**
|
||
* 保存服务指令编辑结果
|
||
*/
|
||
function handleDirectiveOk() {
|
||
directiveEditDrawer.value = false;
|
||
}
|
||
|
||
/**
|
||
* 点击服务指令卡片时触发：右侧展示指令详细信息
|
||
* @param directive
|
||
*/
|
||
function directiveInfo(directive) {
|
||
selectedDirective.value = directive.id
|
||
derectiveInfo.value = directive
|
||
}
|
||
|
||
/**
|
||
* 移除单个服务指令
|
||
* @param directiveId
|
||
*/
|
||
function deleteDirective(directiveId) {
|
||
setTimeout(() => {
|
||
derectiveInfo.value = {}
|
||
}, 200)
|
||
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,
|
||
});
|
||
</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;
|
||
/* 防止滚动条遮挡内容 */
|
||
}
|
||
</style>
|