492 lines
13 KiB
Vue
492 lines
13 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="1200px" :closable="false"
|
|
:footer-style="{ textAlign: 'right' }" @close="handleCancel" :bodyStyle="{ padding: '14px' }">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<DirectivePackageForm ref="registerForm" @ok="submitCallback" :seletedRecord="seletedRecord" :formDisabled="disableSubmit" :formBpm="false">
|
|
</DirectivePackageForm>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<div class="card-style" style="min-height: 60vh;">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<div style="float: right;">
|
|
<a-button type="primary" @click="handleQuoteDirectives">
|
|
<Icon icon="ant-design:reconciliation-outlined" />引用服务指令包
|
|
</a-button>
|
|
<a-button type="primary" style="margin-left:10px;" @click="handleAddDirectives">
|
|
<Icon icon="ant-design:file-add-outlined" />选择服务指令
|
|
</a-button>
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="6" v-for="directive of seletedRecord.directives" :key="directive.id" style="padding: 8px;"
|
|
@click="directiveInfo(directive)">
|
|
<div :class="{ 'selected': selectedDirective === directive.id }">
|
|
<a-card :class="['card-3d']" :headStyle="{ height: '60px', padding: '0 24px', border: '0px' }"
|
|
@mouseenter="directive.id" @mouseleave="directive.id">
|
|
<template #title>
|
|
<a-row>
|
|
<a-col>
|
|
{{ directive.directiveName }}
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
<template #extra>
|
|
<span v-show="selectedDirective === directive.id"
|
|
style="background-color: #67b4eb;border-radius: 50%;padding: 3px;color: white;width:27px;cursor: pointer;">
|
|
<a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消" @confirm="deleteDirective(directive.id)">
|
|
<Icon icon="ant-design:delete-outlined" size="18" />
|
|
</a-popconfirm>
|
|
</span>
|
|
</template>
|
|
<div style="margin-top: -30px;">
|
|
<a-divider style="margin: 0 0 10px 0 " />
|
|
<p>
|
|
分类标签：{{ directive.instructionTagName ? directive.instructionTagName :
|
|
directive.instructionTagId_dictText }}
|
|
</p>
|
|
<p style="margin-top: -10px;">
|
|
服务类别：{{ directive.categoryName ? directive.categoryName : directive.categoryId_dictText }}</p>
|
|
<p style="margin-top: -10px;">服务类型：{{ directive.typeName ? directive.typeName :
|
|
directive.typeId_dictText }}
|
|
</p>
|
|
<p style="margin-top: -10px;">服务时长：{{ directive.serviceDuration }}分钟</p>
|
|
<p style="margin-top: -10px;">超时时长：{{ directive.timeoutDuration }}分钟</p>
|
|
<div style="float:left;margin-top: 20px;">
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
|
|
<!-- 服务指令列表编辑页 -->
|
|
<a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="100vw" :closable="false"
|
|
:footer-style="{ textAlign: 'right' }" :body-style="{ padding: 0 }">
|
|
<ConfigServiceDirectiveList ref="configServiceDirectiveListRef" :directiveList="seletedRecord.directives"
|
|
:instructionTagId="registerForm.formData.instructionTagId" @checkDirective="checkDirective">
|
|
</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="1200px" :closable="false"
|
|
:footer-style="{ textAlign: 'right' }" :body-style="{}">
|
|
<PackageList ref="directivePackageListRef" :instructionTagId="registerForm.formData.instructionTagId">
|
|
</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';
|
|
import { CodeSandboxOutlined } from '@ant-design/icons-vue';
|
|
import InstructionTag from '../../instructiontag/InstructionTag.vue';
|
|
|
|
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 checkListData = ref<any>([])
|
|
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 getImgPath(pathUrl) {
|
|
if (pathUrl && pathUrl.length > 0) {
|
|
return getFileAccessHttpUrl(pathUrl);
|
|
} else {
|
|
return '../../resource/img/logo.png';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 新增
|
|
*/
|
|
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 = () => {
|
|
if (!registerForm.value.formData.instructionTagId) {
|
|
createMessage.warning('请先选择分类标签')
|
|
return
|
|
}
|
|
directiveEditDrawer.value = true;
|
|
nextTick(() => {
|
|
configServiceDirectiveListRef.value.edit(seletedRecord.value);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 管理服务指令编辑页
|
|
*/
|
|
function handleDirectiveCancel() {
|
|
directiveEditDrawer.value = false;
|
|
}
|
|
|
|
/**
|
|
* 保存服务指令编辑结果
|
|
*/
|
|
function handleDirectiveOk() {
|
|
directiveEditDrawer.value = false;
|
|
seletedRecord.value.directives = checkListData.value
|
|
}
|
|
|
|
/**
|
|
* 点击服务指令卡片时触发：右侧展示指令详细信息
|
|
* @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 {
|
|
createMessage.success('选择成功');
|
|
seletedRecord.value.directives.push(directive_)
|
|
}
|
|
}
|
|
function checkDirective(directive_) {
|
|
checkListData.value = directive_;
|
|
// let res_ = seletedRecord.value.directives.filter(item => item.id == directive_.id)
|
|
// if (res_.length > 0) {
|
|
// createMessage.warning('服务指令已选择');
|
|
// } else {
|
|
// createMessage.success('选择成功');
|
|
// seletedRecord.value.directives.push(directive_)
|
|
// }
|
|
}
|
|
|
|
/**
|
|
* 引用
|
|
*/
|
|
function handleQuoteDirectives() {
|
|
if (!registerForm.value.formData.instructionTagId) {
|
|
createMessage.warning('请先选择分类标签')
|
|
return
|
|
}
|
|
directiveQuoteDrawer.value = true
|
|
directivePackageListRef.value.queryList({})
|
|
}
|
|
|
|
/**
|
|
* 处理引用确认操作
|
|
*/
|
|
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 {
|
|
border: 1px solid #59bffe;
|
|
border-radius: 8px;
|
|
// padding: 0px
|
|
}
|
|
|
|
.directiveInfoClass {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.scrollable-content {
|
|
height: 70vh;
|
|
/* 设置固定高度为视口的50% */
|
|
overflow-y: auto;
|
|
/* 垂直方向超出时显示滚动条 */
|
|
padding-right: 8px;
|
|
/* 防止滚动条遮挡内容 */
|
|
}
|
|
|
|
|
|
|
|
.directiveClass {
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
background: linear-gradient(to bottom, #e1f3ff, #ffffff);
|
|
width: 100%;
|
|
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.directiveClass:hover {
|
|
background: linear-gradient(to bottom, #e1f3ff, #ffffff);
|
|
border-radius: 8px;
|
|
box-shadow:
|
|
0 0 0 1px #59bffe,
|
|
/* 描边 */
|
|
0 4px 8px rgba(0, 0, 0, 0.1);
|
|
/* 阴影 */
|
|
transform: translate(-2px, -2px);
|
|
/* 轻微上浮效果 */
|
|
}
|
|
|
|
.fenleiClass {
|
|
background-image: url('/src/assets/wlb/wlb-title.png');
|
|
background-size: 100% 100%;
|
|
height: 36px;
|
|
color: #ffffff;
|
|
padding: 7px 0 0 20px;
|
|
}
|
|
|
|
.fwsjClass {
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
margin: 7px;
|
|
}
|
|
|
|
.imgClass {
|
|
text-align: center;
|
|
}
|
|
|
|
.ybClass {
|
|
// background: #f0f0f0;padding:5px;margin:5px;
|
|
// border-radius: 5px;
|
|
// color: #ffffff;
|
|
background-image: url("/src/assets/wlb/wlb-type1.png");
|
|
background-size: 50px 23px;
|
|
width: 50px;
|
|
display: block;
|
|
padding-left: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
.jgyhClass {
|
|
background: #f0f0f0;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
// color: #ffffff;
|
|
}
|
|
|
|
.typeClass {
|
|
margin-left: 10px;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.rchlClass {
|
|
margin-left: 10px;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
background: #f5fafe;
|
|
border: 1px solid #59bffe;
|
|
color: #59bffe;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.zqhlClass {
|
|
margin-left: 10px;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
background: #fff2df;
|
|
border: 1px solid #fb9f65;
|
|
color: #fb9f65;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.jshlClass {
|
|
margin-left: 10px;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
background: #e9e5fe;
|
|
border: 1px solid #9986fc;
|
|
color: #9986fc;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.yuanClass {
|
|
margin-right: 10px;
|
|
background-color: #e3e6e8;
|
|
border-radius: 50%;
|
|
padding: 0px 5px 5px 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ellipsis-two-lines {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 限制文本为2行 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.card-style {
|
|
padding-top: 14px;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
|
|
/* 基础卡片样式 */
|
|
.card-3d {
|
|
border-radius: 8px;
|
|
border: 1px solid #f0f0f0;
|
|
/* 边框增强立体感 */
|
|
background: white;
|
|
position: relative;
|
|
}
|
|
|
|
/* 鼠标悬停：阴影加深 + 轻微上浮 */
|
|
.card-3d:hover {
|
|
border: 1px solid #1890ff;
|
|
}
|
|
</style>
|