服务指令调整:

1)去除标准指令库、差异比对、差异指令功能
2)去除所有标准指令库概念先关操作及代码逻辑
3)任一机构均可创建任意分类标签、服务类别、服务类型、服务指令以及编辑任意字段
4)新增镜像码管理功能:未生成镜像码机构自动生成镜像码,可更新镜像码,更新后旧的镜像码将失效;可通过复制按钮快速复制镜像码
5)新增服务指令库功能:需要先输入周正确的镜像码后,可查看对应机构所有服务指令,并可“镜像”到本机构中,如果分类标签、服务类别、服务类型、服务名称汉字完全一致,则认定为同一服务指令,不会重复镜像
This commit is contained in:
1378012178@qq.com 2025-12-23 10:52:32 +08:00
parent 2cca1b8b74
commit 43dc1becd2
20 changed files with 7614 additions and 15 deletions

View File

@ -2,7 +2,7 @@
VITE_USE_MOCK = false
# 发布路径
VITE_PUBLIC_PATH = /biz101
VITE_PUBLIC_PATH = /biz102
# 是否启用gzip或brotli压缩
# 选项值: gzip | brotli | none
@ -13,10 +13,10 @@ VITE_BUILD_COMPRESS = 'gzip'
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
#后台接口父地址(必填)
VITE_GLOB_API_URL=/nursingunit101
VITE_GLOB_API_URL=/nursingunit102
#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=https://www.focusnu.com/nursingunit101
VITE_GLOB_DOMAIN_URL=https://www.focusnu.com/nursingunit102
# VITE_GLOB_DOMAIN_URL=http://115.175.20.152/nursingunit104
# 接口父路径前缀

View File

@ -16,7 +16,7 @@
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
这里是格式说明的具体内容
请上传相应格式类型的文件
</template>
<span class="divider">
<QuestionCircleOutlined style="margin-right: 0px;" />

View File

@ -20,7 +20,7 @@
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
这里是格式说明的具体内容
请上传相应格式类型的文件
</template>
<span class="divider">
<QuestionCircleOutlined style="margin-right: 0px;" />

View File

@ -20,7 +20,7 @@
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
这里是格式说明的具体内容
请上传相应格式类型的文件
</template>
<span class="divider">
<QuestionCircleOutlined style="margin-right: 0px;" />

View File

@ -0,0 +1,160 @@
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
const { createConfirm } = useMessage();
enum Api {
list = '/services/serviceDirective/list',
save = '/services/serviceDirective/add',
batchAdd = '/services/serviceDirective/batchAdd',
edit = '/services/serviceDirective/edit',
deleteOne = '/services/serviceDirective/delete',
deleteBatch = '/services/serviceDirective/deleteBatch',
importExcel = '/services/serviceDirective/importExcel',
exportXls = '/services/serviceDirective/exportXls',
async = '/services/serviceDirective/async',
departList = '/sys/sysDepart/list',
tree = '/services/serviceDirective/tree',
queryById = '/services/serviceDirective/queryById',
syncMediaForBiz = '/services/serviceDirective/syncMediaForBiz',
syncMediaForAllBiz = '/services/serviceDirective/syncMediaForAllBiz',
listByDS = '/services/serviceDirective/listByDS',
idListByDS = '/services/serviceDirective/idListByDS',
syncDirective = '/services/serviceDirective/syncDirective',
useOrStopCascade = '/services/serviceDirective/useOrStopCascade',
compareList = '/services/serviceDirective/compareList',
}
/**
* -
* @param params
*/
export const listByDS = (params) => defHttp.get({ url: Api.listByDS, params });
/**
*
* @param params id
* @returns
*/
export const idListByDS = (params) => defHttp.get({ url: Api.idListByDS, params });
/**
* api
* @param params
*/
export const getExportUrl = Api.exportXls;
/**
* api
*/
export const getImportUrl = Api.importExcel;
/**
*
* @param params
*/
export const list = (params) => defHttp.get({ url: Api.list, params });
export const departList = (params) => defHttp.get({ url: Api.departList, params });
export const queryById = (params) => defHttp.get({ url: Api.queryById, params });
/**
*
* @param params
* @param handleSuccess
*/
export const deleteOne = (params, handleSuccess) => {
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
handleSuccess();
});
};
/**
*
* @param params
* @param handleSuccess
*/
export const batchDelete = (params, handleSuccess) => {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '是否删除选中数据',
okText: '确认',
cancelText: '取消',
onOk: () => {
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
handleSuccess();
});
},
});
};
/**
*
* @param params
* @param isUpdate
*/
export const saveOrUpdate = (params, isUpdate) => {
let url = isUpdate ? Api.edit : Api.save;
return defHttp.post({ url: url, params }, { isTransformResponse: false });
};
/**
*
* @param params
*/
export const batchAdd = (params) => {
return defHttp.post({ url: Api.batchAdd, params }, { isTransformResponse: false });
};
/**
*
* @param params
*/
export const asyncFunc = (params) => {
return defHttp.post({ url: Api.async, params }, { isTransformResponse: false });
};
/**
*
* @param params
* @returns
*/
export const tree = (params) => defHttp.post({ url: Api.tree, params });
/**
*
* @param params
*/
export const syncMediaForBiz = (params) => {
return defHttp.post({ url: Api.syncMediaForBiz, params });
};
/**
*
* @param params
*/
export const syncMediaForAllBiz = (params) => {
return defHttp.post({ url: Api.syncMediaForAllBiz, params });
};
/**
*
* @param params
* @returns
*/
export const syncDirective = (dataSourceCode: string, params: any) => {
return defHttp.post({ url: `${Api.syncDirective}?sourceOrgCode=${encodeURIComponent(dataSourceCode)}`, params });
};
/**
* /
* @param params
*/
export const useOrStopCascade = (params) => {
return defHttp.post({ url: Api.useOrStopCascade, params });
};
/**
*
* @param params compareOrgCode
* @returns
*/
export const compareList = (params) => defHttp.get({ url: Api.compareList, params });

View File

@ -0,0 +1,192 @@
import { BasicColumn } from '/@/components/Table';
import { render } from '/@/utils/common/renderUtils';
const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS;
//列表数据
export const columns: BasicColumn[] = [
{
title: '分类标签',
align: 'center',
dataIndex: 'instructionTagId_dictText',
width: 100,
// customCell: (record, index, column) => {
// if (record.instructionRowSpan != null) {
// return { rowSpan: record.instructionRowSpan };
// }
// },
},
{
title: '服务类别',
align: 'center',
dataIndex: 'categoryId_dictText',
// customCell: (record, index, column) => {
// if (record.categoryRowSpan != null) {
// return { rowSpan: record.categoryRowSpan };
// }
// },
},
{
title: '服务类型',
align: 'center',
dataIndex: 'typeId_dictText',
// customCell: (record, index, column) => {
// if (record.typeRowSpan != null) {
// return { rowSpan: record.typeRowSpan };
// }
// },
},
{
title: '服务指令',
align: 'center',
dataIndex: 'directiveName',
},
// {
// title: '体型标签',
// align: 'center',
// dataIndex: 'bodyTagList',
// width: 150,
// ellipsis: false,
// // format(text, record, index) {
// // if (!!text) {
// // return text.map((item) => item.tagName).join('、');
// // } else {
// // return '-';
// // }
// // },
// },
// {
// title: '情绪标签',
// align: 'center',
// dataIndex: 'emotionTagList',
// width: 150,
// ellipsis: false,
// // format(text, record, index) {
// // if (!!text) {
// // return text.map((item) => item.tagName).join('、');
// // } else {
// // return '-';
// // }
// // },
// },
{
title: '收费价格',
align: 'center',
dataIndex: 'tollPrice',
width: 95,
},
{
title: '提成价格',
align: 'center',
dataIndex: 'comPrice',
width: 95,
},
// {
// title: '医保报销',
// align: 'center',
// dataIndex: 'izReimbursement_dictText',
// width: 100,
// },
// {
// title: '机构优惠',
// align: 'center',
// dataIndex: 'izPreferential_dictText',
// width: 100,
// },
{
title: '周期类型',
align: 'center',
dataIndex: 'cycleType_dictText',
},
{
title: '服务时长(分钟)',
align: 'center',
dataIndex: 'serviceDuration',
width: 135,
},
// {
// title: '指令状态',
// align: 'center',
// dataIndex: 'status_dictText',
// width: 100,
// },
{
title: '是否启用',
align: 'center',
dataIndex: 'izEnabled_dictText',
width: 100,
},
{
title: '服务指令图片大图',
align: 'center',
dataIndex: 'previewFile',
customRender: ({ text }) => {
// 如果 text 为空或 null/undefined使用默认图片
const imageUrl = text ? opeMediaAddress + text : opeMediaAddress + import.meta.env.VITE_DEFAULT_DIRECTIVE_PRE_PIC;
return render.renderImage({ text: imageUrl });
},
// customRender: render.renderImage,
},
{
title: '服务指令图片小图',
align: 'center',
dataIndex: 'previewFileSmall',
customRender: ({ text }) => {
// 如果 text 为空或 null/undefined使用默认图片
const imageUrl = text ? opeMediaAddress + text : opeMediaAddress + import.meta.env.VITE_DEFAULT_DIRECTIVE_PRESMALL_PIC;
return render.renderImage({ text: imageUrl });
},
// customRender: render.renderImage,
},
{
title: '服务指令描述',
align: 'center',
dataIndex: 'serviceContent',
width: 200,
},
{
title: '指令音频文件',
align: 'center',
dataIndex: 'mp3File',
width: 120,
},
{
title: '指令视频文件',
align: 'center',
dataIndex: 'mp4File',
width: 120,
},
{
title: '即时指令图标',
align: 'center',
dataIndex: 'immediateFile',
customRender: ({ text }) => {
// 如果 text 为空或 null/undefined使用默认图片
const imageUrl = text ? opeMediaAddress + text : opeMediaAddress + import.meta.env.VITE_DEFAULT_DIRECTIVE_IM_PIC;
return render.renderImage({ text: imageUrl });
},
// customRender: render.renderImage,
},
];
// 高级查询数据
export const superQuerySchema = {
categoryId: { title: '服务类别', order: 0, view: 'list', type: 'string', dictCode: '' },
typeId: { title: '服务类型', order: 1, view: 'list', type: 'string', dictCode: '' },
instructionTagId: { title: '分类标签', order: 2, view: 'list', type: 'string', dictCode: 'instruction_tag' },
directiveName: { title: '服务指令', order: 3, view: 'text', type: 'string' },
tollPrice: { title: '收费价格', order: 4, view: 'number', type: 'number' },
comPrice: { title: '提成价格', order: 5, view: 'number', type: 'number' },
izReimbursement: { title: '医保报销', order: 6, view: 'radio', type: 'string', dictCode: '' },
izPreferential: { title: '机构优惠', order: 7, view: 'radio', type: 'string', dictCode: '' },
chargingFrequency: { title: '收费频次', order: 8, view: 'list', type: 'string', dictCode: '' },
cycleType: { title: '周期类型', order: 9, view: 'list', type: 'string', dictCode: '' },
sort: { title: '排序', order: 10, view: 'number', type: 'number' },
serviceContent: { title: '服务说明', order: 11, view: 'textarea', type: 'string' },
serviceDuration: { title: '服务时长(分钟)', order: 12, view: 'text', type: 'string' },
izEnabled: { title: '是否启用', order: 13, view: 'radio', type: 'string', dictCode: '' },
createBy: { title: '创建人', order: 14, view: 'text', type: 'string' },
createTime: { title: '创建日期', order: 15, view: 'datetime', type: 'string' },
updateBy: { title: '更新人', order: 16, view: 'text', type: 'string' },
updateTime: { title: '更新日期', order: 17, view: 'datetime', type: 'string' },
mp3File: { title: '语音文件', order: 18, view: 'file', type: 'string' },
mp4File: { title: '视频文件', order: 19, view: 'file', type: 'string' },
};

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,320 @@
<template>
<div>
<!--引用表格-->
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
<!-- 音频播放控制 -->
<template v-if="column.dataIndex === 'mp3File'">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button v-else type="link" class="btnPrivate" @click="openAudioModal(text)">播放</a-button>
</template>
<template v-if="column.dataIndex === 'mp4File'">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button v-else type="link" class="btnPrivate" @click="openVideoModal(text)">播放</a-button>
</template>
<template v-if="column.dataIndex === 'bodyTagList'">
<span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
item.tagName).join('、')}}</span>
</template>
<template v-if="column.dataIndex === 'emotionTagList'">
<span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
item.tagName).join('、')}}</span>
</template>
</template>
</BasicTable>
<!-- 表单区域 -->
<ConfigServiceDirectiveModal ref="registerModal" @success="handleSuccess" :izAbnormal="true">
</ConfigServiceDirectiveModal>
</div>
<!-- 音频播放 -->
<a-modal v-model:visible="showAudioModal" title="音频播放" :footer="null" @cancel="closeAudioModal"
:bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }" :keyboard="true">
<audio ref="audioPlayer" controls style="width: 100%; display: block; margin: 20px auto;">
<source :src="audioUrl">
您的浏览器不支持音频播放
</audio>
</a-modal>
<!-- 视频播放 -->
<a-modal v-model:visible="showVideoModal" title="视频播放" :footer="null" @cancel="closeVideoModal"
:bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }">
<video ref="videoPlayer" controls style="width: 100%; max-height: 70vh; display: block; margin: 0 auto;">
<source :src="videoUrl">
您的浏览器不支持视频播放
</video>
</a-modal>
</template>
<script lang="ts" name="serviceDirective-configServiceDirective" setup>
import { ref, reactive, watch, onMounted, computed, nextTick } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, superQuerySchema } from './ConfigServiceDirective.data';
import { list, batchAdd, deleteOne, batchDelete, getImportUrl, getExportUrl, tree } from '../ConfigServiceDirective.api';
import ConfigServiceDirectiveModal from './ConfigServiceDirectiveModal.vue'
import { useUserStore } from '/@/store/modules/user';
import { cloneDeep } from "lodash-es";
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { Empty } from 'ant-design-vue';
import { queryByKey } from '/@/views/admin/sysconfig/SysConfig.api'
import { getOrgInfo } from '@/api/common/api'
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
const queryParam = reactive<any>({
instructionTagId: '',
categoryId: '',
typeId: '',
izEnabled: '0',
});
watch(
() => queryParam.instructionTagId,
() => {
queryParam.categoryId = ''
queryParam.typeId = ''
}
)
//
watch(
() => queryParam.categoryId,
() => {
queryParam.typeId = ''
}
)
const registerModal = ref();
const treeData = ref<any>([]);
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '服务指令',
api: list,
columns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
scroll: { y: '58vh' },
pagination: {
current: 1,
pageSize: 15,
pageSizeOptions: ['15', '50', '70', '100'],
},
actionColumn: {
width: 70,
fixed: 'right',
},
beforeFetch: async (params) => {
params.izAbnormal = true
params.column = 'createTime'
params.order = 'desc'
return params;
},
},
exportConfig: {
name: "服务指令",
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const filterIzEnabled = ref('enabled')///
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
reloadTree()
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.opeType = 'edit';
record.izEnabled = ''
record.tollPrice = ''
registerModal.value.edit(record);
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record)
},
];
}
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
]
}
const showAudioModal = ref(false); //
const audioUrl = ref(''); // URL
const audioPlayer = ref(null);
//
const openAudioModal = (url) => {
audioUrl.value = getFileAccessHttpUrl(url);
showAudioModal.value = true;
};
//
const closeAudioModal = () => {
if (audioPlayer.value) {
audioPlayer.value.pause(); //
audioPlayer.value.currentTime = 0; //
}
showAudioModal.value = false;
audioUrl.value = '';
};
const showVideoModal = ref(false); //
const videoUrl = ref(''); // URL
const videoPlayer = ref(null);
//
const openVideoModal = (url) => {
videoUrl.value = getFileAccessHttpUrl(url);
showVideoModal.value = true;
};
//
const closeVideoModal = () => {
if (videoPlayer.value) {
videoPlayer.value.pause(); //
videoPlayer.value.currentTime = 0; //
}
showVideoModal.value = false;
videoUrl.value = '';
};
//
const isPlaying = ref(false);
function reloadTree() {
tree({ filterIzEnabled: filterIzEnabled.value }).then(res => {
treeData.value = res;
})
}
//
onMounted(() => {
if (audioPlayer.value) {
audioPlayer.value.addEventListener('ended', () => {
isPlaying.value = false;
});
}
});
defineExpose({
reload
});
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust {
min-width: 100px !important;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help) {
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),
:deep(.ant-input-number) {
width: 100%;
}
}
audio::-webkit-media-controls-timeline {
display: none;
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
display: none;
}
.btnPrivate {
height: 40px;
margin-left: 4px;
}
.node-title {
display: inline-flex;
align-items: center;
}
.action-icon {
margin-left: 4px;
cursor: pointer;
}
:deep(.centered-dropdown) {
position: fixed;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
max-height: 80vh;
overflow-y: auto;
.ant-dropdown-menu {
max-height: 70vh;
overflow-y: auto;
}
}
.container-height {
height: 77vh;
}
@media screen and (min-width: 1600px) and (min-height: 900px) {
.container-height {
height: 81.5vh;
}
}
</style>

View File

@ -0,0 +1,319 @@
<template>
<div class="compare-table-wrap">
<div style="margin-bottom: 14px;width: 100%;">
<a-button type="primary" style="float: left;" @click="showTargetOrgListModal"
:disabled="loading">目标机构</a-button>
</div>
<a-table :columns="headChildColumns" :data-source="rows" bordered size="middle" :scroll="{ y: 640 }"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'ownOrgName'">
{{ ownOrgName }}
</template>
<template v-else-if="column.dataIndex === 'ownExist'">
<div class="org-badge">
<svg v-if="text" class="icon check" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.285 6.709l-11.39 11.39-5.18-5.18 1.414-1.414 3.766 3.766 9.976-9.976z" />
</svg>
<svg v-else class="icon cross" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12 10.59 13.42 4.29 19.72 5.7 21.13 12 14.83 18.3 21.13 19.71 19.72 13.41 13.42 19.71 7.12z" />
</svg>
</div>
</template>
<template v-else-if="column.dataIndex === 'own2OrgName'">
{{ targetOrgInfo.comName }}
</template>
<template v-else-if="column.dataIndex === 'targetExist'">
<div class="org-badge">
<svg v-if="text" class="icon check" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.285 6.709l-11.39 11.39-5.18-5.18 1.414-1.414 3.766 3.766 9.976-9.976z" />
</svg>
<svg v-else class="icon cross" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12 10.59 13.42 4.29 19.72 5.7 21.13 12 14.83 18.3 21.13 19.71 19.72 13.41 13.42 19.71 7.12z" />
</svg>
</div>
</template>
</template>
</a-table>
</div>
<a-drawer v-model:visible="targetOrgListVisible" title="请选择目标机构" width="90vw" @cancel="handleCancelTarget"
:bodyStyle="{ padding: '14px', height: '70vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
:footer-style="{ textAlign: 'right' }">
<template #footer>
<a-button @click="handleCancelTarget" type="primary" style="margin-right: 10px;">取消</a-button>
<a-button @click="handleGetTarget" type="primary">确认</a-button>
</template>
<OrgListCom class="step-content" ref="targetOrgListComRef" @handleOrgChoose="handleTargetOrgChoose"
:showChoose="true" :showDirectiveChoose="true" :pageSize="-1" :excludeOrgCode="ownOrgCode" />
</a-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { compareList } from '../ConfigServiceDirective.api';
import { headChildColumns } from './ConfigServiceDirective.data';
import OrgListCom from '/@/views/orgcom/OrgListCom.vue';
const props = defineProps({
ownOrgCode: '',//
ownOrgName: '',//
});
const targetOrgInfo = ref('')//
type Row = {
id?: string;
instructionName?: string;
categoryName?: string;
typeName?: string;
directiveName?: string;
cycleTypeName?: string;
ownExist?: boolean;
targetExist?: boolean;
};
const rows = ref<Row[]>([]);
const loading = ref(false);
const targetOrgListVisible = ref(false);
const targetOrgListComRef = ref();
function rank(it: Row) {
if (it.ownExist && it.targetExist) return 'both';
if (it.ownExist) return 'own-only';
return 'target-only';
}
function handleCancelTarget() {
targetOrgListVisible.value = false;
targetOrgListComRef.value?.resetSeleted?.([]);
}
function showTargetOrgListModal() {
targetOrgListComRef.value?.reload?.()
targetOrgListVisible.value = true;
}
function handleGetTarget() {
if (!targetOrgInfo.value) {
targetOrgListVisible.value = false;
return;
}
initData()
handleCancelTarget()
}
function handleTargetOrgChoose(orgInfo_: any) {
targetOrgInfo.value = orgInfo_
}
async function initData() {
loading.value = true;
rows.value = [];
try {
let res = await compareList({ compareOrgCode: targetOrgInfo.value.orgCode })
if (Array.isArray(res)) rows.value = res;
else if (res && Array.isArray(res.result)) rows.value = res.result;
else if (res && Array.isArray(res.list)) rows.value = res.list;
else if (res && Array.isArray(res.data)) rows.value = res.data;
else rows.value = res || [];
} catch (e) {
rows.value = [];
console.error('compareList error', e);
} finally {
loading.value = false;
}
}
</script>
<style lang="less" scoped>
.compare-table-wrap {
padding: 16px;
background: #f6f8fb;
font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
.table-card {
width: 100%;
max-width: 100%;
background: #fff;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e6eef8;
box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
}
.thead {
background: linear-gradient(180deg, #fbfdff, #ffffff);
border-bottom: 1px solid #e6eef8;
}
.thead-top,
.thead-sub,
.tr {
display: grid;
gap: 12px;
align-items: center;
justify-items: center;
}
.thead-top {
grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
padding: 12px 14px 0px 14px;
font-weight: 600;
color: #374151;
}
.thead-sub {
grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
padding: 0px 14px 8px 14px;
// border-bottom: 1px solid #e6eef8;
color: #374151;
font-size: 13px;
font-weight: 600;
}
.th {
padding: 6px 4px;
text-align: center;
}
.tbody {
display: flex;
flex-direction: column;
}
.tr {
grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
padding: 12px 14px;
background: #fff;
border-bottom: 1px solid #eef6fb;
}
.tr:last-child {
border-bottom: none;
}
.td {
padding: 6px 4px;
font-size: 14px;
color: #111827;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
width: 100%;
}
.td-org-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.td-org-exist {
display: flex;
align-items: center;
justify-content: center;
}
.org-badge {
// width: 36px;
height: 36px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background: #fbfdff;
text-align: center;
}
.icon {
width: 20px;
height: 20px;
fill: currentColor;
}
.icon.check {
color: #10b981;
}
.icon.cross {
color: #ef4444;
}
.status {
padding: 14px;
background: #fff;
border-radius: 8px;
color: #6b7280;
text-align: center;
box-shadow: 0 6px 14px rgba(2, 6, 23, 0.03);
margin-top: 8px;
width: 100%;
}
.body-div {
height: 65vh;
overflow-y: scroll;
// scrollbar-width: none;
// -ms-overflow-style: none;
}
// .body-div::-webkit-scrollbar {
// width: 0;
// height: 0;
// background: transparent;
// }
@media (max-width: 1000px) {
.thead-top,
.thead-sub,
.tr {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 80px 80px 80px;
}
.td-name,
.th.th-name {
display: none;
}
}
@media (max-width: 700px) {
.thead {
display: none;
}
.tr {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px;
}
.td {
white-space: normal;
text-align: center;
}
.center {
justify-content: center;
gap: 8px;
}
}
.step-content {
// overflow: auto;
height: 70vh;
}
</style>

View File

@ -0,0 +1,254 @@
import { BasicColumn } from '/@/components/Table';
import { render } from '/@/utils/common/renderUtils';
//列表数据
export const columns: BasicColumn[] = [
{
title: '分类标签',
align: 'center',
dataIndex: 'instructionTagId_dictText',
width: 100,
// customCell: (record, index, column) => {
// if (record.instructionRowSpan != null) {
// return { rowSpan: record.instructionRowSpan };
// }
// },
},
{
title: '服务类别',
align: 'center',
dataIndex: 'categoryId_dictText',
// customCell: (record, index, column) => {
// if (record.categoryRowSpan != null) {
// return { rowSpan: record.categoryRowSpan };
// }
// },
},
{
title: '服务类型',
align: 'center',
dataIndex: 'typeId_dictText',
// customCell: (record, index, column) => {
// if (record.typeRowSpan != null) {
// return { rowSpan: record.typeRowSpan };
// }
// },
},
{
title: '服务指令',
align: 'center',
dataIndex: 'directiveName',
},
// {
// title: '体型标签',
// align: 'center',
// dataIndex: 'bodyTagList',
// width: 150,
// ellipsis: false,
// format(text, record, index) {
// if (!!text) {
// return text.map((item) => item.tagName).join('、');
// } else {
// return '-';
// }
// },
// },
// {
// title: '情绪标签',
// align: 'center',
// dataIndex: 'emotionTagList',
// width: 150,
// ellipsis: false,
// format(text, record, index) {
// if (!!text) {
// return text.map((item) => item.tagName).join('、');
// } else {
// return '-';
// }
// },
// },
{
title: '收费价格',
align: 'center',
dataIndex: 'tollPrice',
width: 100,
},
{
title: '提成价格',
align: 'center',
dataIndex: 'comPrice',
},
// {
// title: '医保报销',
// align: 'center',
// dataIndex: 'izReimbursement_dictText',
// width: 100,
// },
// {
// title: '机构优惠',
// align: 'center',
// dataIndex: 'izPreferential_dictText',
// width: 100,
// },
{
title: '周期类型',
align: 'center',
dataIndex: 'cycleType_dictText',
},
{
title: '服务时长(分钟)',
align: 'center',
dataIndex: 'serviceDuration',
width: 135,
},
// {
// title: '指令状态',
// align: 'center',
// dataIndex: 'status_dictText',
// width: 100,
// },
{
title: '是否启用',
align: 'center',
dataIndex: 'izEnabled_dictText',
width: 100,
},
// {
// title: '服务指令图片',
// align: 'center',
// dataIndex: 'previewFile',
// customRender: render.renderImage,
// },
{
title: '服务指令描述',
align: 'center',
dataIndex: 'serviceContent',
width: 200,
},
// {
// title: '指令音频文件',
// align: 'center',
// dataIndex: 'mp3File',
// width: 120,
// },
// {
// title: '指令视频文件',
// align: 'center',
// dataIndex: 'mp4File',
// width: 120,
// },
// {
// title: '即时指令图标',
// align: 'center',
// dataIndex: 'immediateFile',
// customRender: render.renderImage,
// },
];
// 高级查询数据
export const superQuerySchema = {
categoryId: { title: '服务类别', order: 0, view: 'list', type: 'string', dictCode: '' },
typeId: { title: '服务类型', order: 1, view: 'list', type: 'string', dictCode: '' },
instructionTagId: { title: '分类标签', order: 2, view: 'list', type: 'string', dictCode: 'instruction_tag' },
directiveName: { title: '服务指令', order: 3, view: 'text', type: 'string' },
tollPrice: { title: '收费价格', order: 4, view: 'number', type: 'number' },
comPrice: { title: '提成价格', order: 5, view: 'number', type: 'number' },
izReimbursement: { title: '医保报销', order: 6, view: 'radio', type: 'string', dictCode: '' },
izPreferential: { title: '机构优惠', order: 7, view: 'radio', type: 'string', dictCode: '' },
chargingFrequency: { title: '收费频次', order: 8, view: 'list', type: 'string', dictCode: '' },
cycleType: { title: '周期类型', order: 9, view: 'list', type: 'string', dictCode: '' },
sort: { title: '排序', order: 10, view: 'number', type: 'number' },
serviceContent: { title: '服务说明', order: 11, view: 'textarea', type: 'string' },
serviceDuration: { title: '服务时长(分钟)', order: 12, view: 'text', type: 'string' },
izEnabled: { title: '是否启用', order: 13, view: 'radio', type: 'string', dictCode: '' },
createBy: { title: '创建人', order: 14, view: 'text', type: 'string' },
createTime: { title: '创建日期', order: 15, view: 'datetime', type: 'string' },
updateBy: { title: '更新人', order: 16, view: 'text', type: 'string' },
updateTime: { title: '更新日期', order: 17, view: 'datetime', type: 'string' },
mp3File: { title: '语音文件', order: 18, view: 'file', type: 'string' },
mp4File: { title: '视频文件', order: 19, view: 'file', type: 'string' },
};
//列表数据
export const headChildColumns: BasicColumn[] = [
{
title: '基础信息',
children: [
{
title: '分类标签',
align: 'center',
dataIndex: 'instructionName',
ellipsis: true,
width: 100,
},
{
title: '服务类别',
align: 'center',
dataIndex: 'categoryName',
ellipsis: true,
width: 100,
},
{
title: '服务类型',
align: 'center',
dataIndex: 'typeName',
ellipsis: true,
width: 100,
},
{
title: '服务指令',
align: 'center',
dataIndex: 'directiveName',
ellipsis: true,
},
{
title: '周期类型',
align: 'center',
dataIndex: 'cycleTypeName',
ellipsis: true,
width: 100,
},
]
},
{
title: '源机构',
children: [
{
title: '名称',
align: 'center',
dataIndex: 'ownOrgName',
ellipsis: true,
width: 200,
},
{
title: '是否存在',
align: 'center',
dataIndex: 'ownExist',
ellipsis: true,
width: 100,
},
]
},
{
title: '目标机构',
children: [
{
title: '名称',
align: 'center',
dataIndex: 'own2OrgName',
ellipsis: true,
width: 200,
},
{
title: '是否存在',
align: 'center',
dataIndex: 'targetExist',
ellipsis: true,
width: 100,
},
]
},
];

View File

@ -0,0 +1,805 @@
<template>
<a-spin :spinning="confirmLoading">
<div v-show="!isEditMedia"
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;">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form ref="formRef" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
name="ConfigService2DirectiveForm" style="padding: 0px 0px;">
<a-row v-show="!isEditMedia">
<a-col :span="8">
<a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
<j-dict-select-tag v-model:value="formData.instructionTagId" :orgCode="mainOrgCode"
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 'Y' order by sort asc`"
placeholder="请选择分类标签" allowClear @upDictCode="upInstructionDictCode" disabled />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
name="categoryId">
<j-dict-select-tag type="list" v-model:value="formData.categoryId" disabled :orgCode="mainOrgCode"
:dictCode="categoryDictCode" placeholder="请选择服务类别" allow-clear @upDictCode="upCategoryDictCode" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
name="typeId">
<j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
:orgCode="mainOrgCode" disabled placeholder="请选择服务类型" allowClear @upDictCode="upTypeDictCode" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
</div>
<div style="padding: 14px;background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<JFormContainer>
<template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
<a-row v-show="!isEditMedia">
<!-- <a-col :span="12" v-show="false">
<a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
<j-dict-select-tag v-model:value="formData.instructionTagId" :orgCode="mainOrgCode"
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 'Y' order by sort asc`"
placeholder="请选择分类标签" allowClear @upDictCode="upInstructionDictCode" :disabled="!!formData.id" />
</a-form-item>
</a-col>
<a-col :span="12" v-show="false">
<a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
name="categoryId">
<j-dict-select-tag type="list" v-model:value="formData.categoryId" :disabled="!!formData.id"
:orgCode="mainOrgCode" :dictCode="categoryDictCode" placeholder="请选择服务类别" allow-clear
@upDictCode="upCategoryDictCode" />
</a-form-item>
</a-col>
<a-col :span="12" v-show="false">
<a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
name="typeId">
<j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
:orgCode="mainOrgCode" :disabled="!!formData.id" placeholder="请选择服务类型" allowClear
@upDictCode="upTypeDictCode" />
</a-form-item>
</a-col> -->
<a-col :span="12">
<a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
<a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear :maxlength="20"
:showCount="true" :disabled="!!formData.id"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
name="tollPrice">
<a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%" :min="0"
:max="99999.99" :precision="2" @keydown="onPriceKeydown" :disabled="disabled" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
name="cycleType">
<j-dict-select-tag type="list" v-model:value="formData.cycleType" dictCode="period_type"
placeholder="请选择周期类型" allowClear @upDictCode="upCycleTypeDictCode" :disabled="!!formData.id" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
name="comPrice">
<a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%" :min="0"
:max="99999.99" :precision="2" @keydown="onPriceKeydown" :disabled="disabled" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
name="izEnabled">
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
placeholder="请选择是否启用"  allowClear :disabled="disabled" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="服务时长" v-bind="validateInfos.serviceDuration"
id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
<a-input-number v-model:value="formData.serviceDuration" :min="5" :max="55" :step="5" addon-after="分钟"
placeholder="请输入服务时长(分钟)" allow-clear @keydown="onDurationKeydown" :disabled="disabled" />
</a-form-item>
</a-col>
</a-row>
<a-row style="padding: 20px;">
<a-col :span="6">
<DirectiveRadioCom :directiveMediaBtnValue="directiveMediaBtnValue" @change="mediaBtnChanged">
</DirectiveRadioCom>
</a-col>
</a-row>
<a-row style="padding: 0px 20px;">
<a-col :span="24" v-show="directiveMediaBtnValue == 0">
<JImageUploadtz v-if="opeType == 'dmlook'"
:value="!!formData.previewFile ? formData.previewFile : defaultPrePic" maxCount="1"
:disabled="disabled || !isMain" />
<JImageUploadtz v-else v-model:value="formData.previewFile" maxCount="1" :toOpe="true"
:bizPath="formComputedData.mediaFileSavePath" :disabled="disabled || !isMain" />
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 1">
<JImageUploadtz v-if="opeType == 'dmlook'"
:value="!!formData.previewFileSmall ? formData.previewFileSmall : defaultPreSmallPic" maxCount="1"
:disabled="disabled || !isMain" />
<JImageUploadtz v-else v-model:value="formData.previewFileSmall" maxCount="1" :toOpe="true"
:bizPath="formComputedData.mediaFileSavePath" :disabled="disabled || !isMain" />
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 2">
<JUploadMP3 v-if="opeType == 'dmlook'" :value="formData.mp3File" maxCount="1"
:disabled="disabled || !isMain" />
<JUploadMP3 v-else v-model:value="formData.mp3File" :toOpe="true"
:bizPath="formComputedData.mediaFileSavePath" maxCount="1" :disabled="disabled || !isMain" />
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 3">
<JUploadMP4 v-if="opeType == 'dmlook'" :value="formData.mp4File" maxCount="1" fileType="mp4"
:disabled="disabled || !isMain" />
<JUploadMP4 v-else v-model:value="formData.mp4File" :toOpe="true"
:bizPath="formComputedData.mediaFileSavePath" maxCount="1" fileType="mp4"
:disabled="disabled || !isMain" />
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 4">
<JImageUploadtz v-if="opeType == 'dmlook'"
:value="!!formData.immediateFile ? formData.immediateFile : defaultImmediatePic" maxCount="1"
:disabled="disabled || !isMain" />
<JImageUploadtz v-else v-model:value="formData.immediateFile" :toOpe="true"
:bizPath="formComputedData.mediaFileSavePath" maxCount="1" :disabled="disabled || !isMain" />
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 5">
<JImageUploadtz v-if="opeType == 'dmlook'"
:value="!!formData.immediateFileFocus ? formData.immediateFileFocus : defaultImmediatePic"
maxCount="1" :disabled="disabled || !isMain" />
<JImageUploadtz v-else v-model:value="formData.immediateFileFocus" :toOpe="true"
:bizPath="formComputedData.mediaFileSavePath" maxCount="1" :disabled="disabled || !isMain" />
</a-col>
</a-row>
<a-row style="padding: 20px;">
<a-col :span="2">
<div class="description-container">
<a-button @click="toggleDescription">服务指令描述</a-button>
<div v-show="showDescription" class="description-box">
<div class="box-header">
<span class="title">服务指令描述</span>
<span class="collapse-icon" @click="toggleDescription">
<DownOutlined style="margin-right: 3px;" />收起
</span>
</div>
<div>
<a-textarea v-model:value="formData.serviceContent" placeholder="请输入服务指令描述" :maxlength="200"
:rows="3" :autosize="{ minRows: 3 }" :showCount="true"
:disabled="disabled || (!isMain && !!formData.id)" />
</div>
</div>
</div>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
</div>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, watch } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { JCheckbox } from '/@/components/Form';
import JUploadMP3 from '../../../../components/Form/src/jeecg/components/JUpload/JUploadMP3.vue';
import JUploadMP4 from '../../../../components/Form/src/jeecg/components/JUpload/JUploadMP4.vue';
import JImageUploadtz from '/@/components/Form/src/jeecg/components/JImageUploadtz.vue';
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate, syncMediaForBiz, syncMediaForAllBiz } from '../ConfigServiceDirective.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { env } from 'process';
import DirectiveRadioCom from './DirectiveRadioCom.vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { uploadUrl } from '/@/api/common/api';
import { queryUpBizPrefix } from '/@/api/common/api'
const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
const showDescription = ref(false);
//
const toggleDescription = () => {
showDescription.value = !showDescription.value;
};
const defaultPrePic = import.meta.env.VITE_DEFAULT_DIRECTIVE_PRE_PIC
const defaultPreSmallPic = import.meta.env.VITE_DEFAULT_DIRECTIVE_PRESMALL_PIC
const defaultImmediatePic = import.meta.env.VITE_DEFAULT_DIRECTIVE_IM_PIC
const fileList = ref([])
const upBizPrefix = ref('')
const onPriceKeydown = (e: KeyboardEvent) => {
const key = e.key;
//
if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
//
if (!/[\d.]/.test(key)) {
e.preventDefault();
return;
}
const input = e.target as HTMLInputElement;
const { value, selectionStart: s, selectionEnd: t } = input;
const next = value.slice(0, s!) + key + value.slice(t!);
// 52
if (!/^\d{0,5}(?:\.\d{0,2})?$/.test(next)) {
e.preventDefault();
}
};
const onDurationKeydown = (e: KeyboardEvent) => {
const key = e.key;
//
if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
//
if (!/[\d.]/.test(key)) {
e.preventDefault();
return;
}
const input = e.target as HTMLInputElement;
const { value, selectionStart: s, selectionEnd: t } = input;
const next = value.slice(0, s!) + key + value.slice(t!);
// 52
if (!/^\d{0,2}$/.test(next)) {
e.preventDefault();
}
};
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({}) },
formBpm: { type: Boolean, default: true },
mainOrgCode: '',
mediaApiAddress: '',//
opeType: 'look',
isMain: false,//
});
const checkMp3 = (file) => {
const isPDF = file.type === 'application/mp3' || file.name.endsWith('.mp3');
if (!isPDF) {
createMessage.error('只能上传 mp3 文件!');
return false; //
}
return true;
};
const checkMp4 = (file) => {
const isPDF = file.type === 'application/mp4' || file.name.endsWith('.mp4');
if (!isPDF) {
createMessage.error('只能上传 mp4 文件!');
return false; //
}
return true;
};
const bodyTagDictCode = ref(`nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
const emotionTagDictCode = ref(`nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
categoryId: '',
typeId: '',
instructionTagId: '',
directiveName: '',
tollPrice: 0,
comPrice: 0,
izReimbursement: 'N',
izPreferential: 'N',
chargingFrequency: '',
cycleType: '',
sort: 99,
serviceContent: '',
serviceDuration: '5',
status: '',
izEnabled: 'Y',
createBy: '',
createTime: '',
updateBy: '',
updateTime: '',
mp3File: '',
mp4File: '',
previewFile: defaultPrePic,
previewFileSmall: defaultPreSmallPic,
immediateFile: defaultImmediatePic,
immediateFileFocus: defaultImmediatePic,
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 4 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 19 } });
const confirmLoading = ref<boolean>(false);
const isEditMedia = ref(false)
const instructionTagName = ref('')
const categoryName = ref('')
const typeName = ref('')
const cycleTypeName = ref('')
const orgMediaPathAddress = ref('')//访
//
const validatorRules = reactive({
categoryId: [{ required: true, message: '请选择服务类别!' },],
typeId: [{ required: true, message: '请选择服务类型!' },],
instructionTagId: [{ required: true, message: '请选择分类标签!' },],
directiveName: [{ required: true, message: '请输入服务指令名称!' },],
tollPrice: [{ required: true, message: '请输入收费价格!' }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
comPrice: [{ required: false }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
// izReimbursement: [{ required: true, message: '!' },],
// izPreferential: [{ required: true, message: '!' },],
// chargingFrequency: [{ required: true, message: '!' },],
cycleType: [{ required: true, message: '请选择周期类型!' },],
// sort: [{ required: true, message: '!' }, { pattern: /^\d+$/, message: '!' },],
serviceDuration: [
{ required: true, message: '请输入服务时长(分钟)!' },
{ pattern: /^\d+$/, message: '请输入正整数!' },
{
validator: (_, value) => {
if (value % 5 !== 0) {
return Promise.reject('请输入5的倍数!');
}
return Promise.resolve();
},
},
{
validator: (_, value) => {
if (value < 5 || value > 55) {
return Promise.reject('请输入5到55之间的值!');
}
return Promise.resolve();
},
},
],
izEnabled: [{ required: true, message: '请选择是否启用!' },],
});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
//
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
const categoryDictCode = ref('')
const typeDictCode = ref('')
//
const canUploadPreviewImage = computed(() => {
return formData.instructionTagId &&
formData.categoryId &&
formData.typeId
// &&
// formData.directiveName &&
// formData.cycleType;
});
//
const instructionComDictCode = ref([])
function upInstructionDictCode(v_) {
instructionComDictCode.value = v_
}
//
const categoryComDictCode = ref([])
function upCategoryDictCode(v_) {
categoryComDictCode.value = v_
}
//
const typeComDictCode = ref([])
function upTypeDictCode(v_) {
typeComDictCode.value = v_
}
//
const cycleTypeComDictCode = ref([])
function upCycleTypeDictCode(v_) {
cycleTypeComDictCode.value = v_
}
//
const upBodyTagsComDictCode = ref([])
function upBodyTagsDictCode(v_) {
upBodyTagsComDictCode.value = v_
}
//
const upEmotionTagsComDictCode = ref([])
function upEmotionTagsDictCode(v_) {
upEmotionTagsComDictCode.value = v_
}
watch([instructionComDictCode, categoryComDictCode, typeComDictCode, cycleTypeComDictCode, upBodyTagsComDictCode, upEmotionTagsComDictCode, upBizPrefix], () => {
// formComputedData
}, { deep: true });
const bodyTagsObj = ref([])
const emotionTagsObj = ref([])
const formComputedData = computed(() => {
if (!canUploadPreviewImage.value) return {};
//
const instructionName = instructionComDictCode.value.find(d => d.value == formData.instructionTagId)?.label || '';
console.log("🌊 ~ instructionName:", instructionName)
const categoryName = categoryComDictCode.value.find(d => d.value == formData.categoryId)?.label || '';
console.log("🌊 ~ categoryName:", categoryName)
const typeName = typeComDictCode.value.find(d => d.value == formData.typeId)?.label || '';
console.log("🌊 ~ typeName:", typeName)
const cycleTypeName = cycleTypeComDictCode.value.find(d => d.value == formData.cycleType)?.label || '';
//
const processTags = (tags, dict) => {
if (!tags) return [];
return tags.split(',')
.map(id => dict.find(d => d.value === id))
.filter(Boolean)
.map(item => ({ id: item.value, label: item.label }));
};
return {
// mediaFileSavePath: `directive/${instructionName}/${categoryName}/${typeName}/${cycleTypeName}/${formData.directiveName}`,
mediaFileSavePath: upBizPrefix.value + `/directive/${instructionName}/${categoryName}/${typeName}`,
instructionName,
categoryName,
typeName,
cycleTypeName,
bodyTagsObj: JSON.stringify(processTags(formData.bodyTags, upBodyTagsComDictCode.value)),
emotionTagsObj: JSON.stringify(processTags(formData.emotionTags, upEmotionTagsComDictCode.value))
};
});
watch(
() => formData.instructionTagId,
(newInstructionTagId) => {
if (needWatch.value) {
formData.categoryId = ''
formData.typeId = ''
// formData.cycleType = ''
}
if (!newInstructionTagId) {
categoryDictCode.value = 'nu_config_service_category,category_name,id,1=2';
} else {
categoryDictCode.value = `nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 'Y' and instruction_id = '${newInstructionTagId}' order by sort asc`;
}
}
);
watch(
() => formData.categoryId,
(newCategoryId) => {
if (needWatch.value) {
formData.typeId = ''
// formData.cycleType = ''
}
if (!newCategoryId) {
typeDictCode.value = 'nu_config_service_type,type_name,id,1=2';
} else {
typeDictCode.value = `nu_config_service_type,type_name,id,del_flag = 0 and iz_enabled = 'Y' and category_id = '${newCategoryId}' order by sort asc`;
}
}
);
watch(
() => formData.typeId,
(newTypeId) => {
if (needWatch.value) {
// formData.cycleType = ''
}
}
);
/**
* 新增
*/
function add() {
edit({});
}
const needWatch = ref(false)
const showMedia = ref(true)
/**
* 编辑
* isEditMedia_是否为编辑指令资源 隐藏业务字段
*/
function edit(record, isEditMedia_ = false, showMedia_ = true, showExistTags = true) {
if (!!record.bodyTags && showExistTags) {
// "id = 'id1' or id = 'id2'"
const bodyTagConditions = record.bodyTags.split(',')
.map(id => `id = '${id}'`)
.join(' or ');
bodyTagDictCode.value = `nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
(bodyTagConditions ? ` and (${bodyTagConditions})` : '') +
` order by sort asc`;
}
if (!!record.emotionTags && showExistTags) {
// "id = 'id1' or id = 'id2'"
const emotionTagConditions = record.emotionTags.split(',')
.map(id => `id = '${id}'`)
.join(' or ');
emotionTagDictCode.value = `nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
(emotionTagConditions ? ` and (${emotionTagConditions})` : '') +
` order by sort asc`;
}
needWatch.value = false
showMedia.value = showMedia_
setTimeout(() => {
needWatch.value = true
}, 1000)
isEditMedia.value = isEditMedia_
formData.bodyTags = ''
formData.emotionTags = ''
nextTick(() => {
resetFields();
const tmpData = {};
Object.keys(formData).forEach((key) => {
if (record.hasOwnProperty(key)) {
tmpData[key] = record[key]
}
})
//
Object.assign(formData, tmpData);
if (props.opeType != 'dmlook') {
if (!formData.previewFile) {
formData.previewFile = defaultPrePic
}
if (!formData.previewFileSmall) {
formData.previewFileSmall = defaultPreSmallPic
}
if (!formData.immediateFile) {
formData.immediateFile = defaultImmediatePic
}
if (!formData.immediateFileFocus) {
formData.immediateFileFocus = defaultImmediatePic
}
}
});
}
/**
* 提交数据
*/
async function submitForm() {
try {
//
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
const computedData = formComputedData.value;
const model = {
...formData,
...computedData
};
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
//
if (model.comPrice != 0 && model.tollPrice < model.comPrice) {
createMessage.warning('提成价格不能高于收费价格!');
confirmLoading.value = false;
return
}
model.mediaFileSavePath = formComputedData.value.mediaFileSavePath
if (model.previewFile == defaultPrePic) {
model.previewFile = null
}
if (model.previewFileSmall == defaultPreSmallPic) {
model.previewFileSmall = null
}
if (model.immediateFile == defaultImmediatePic) {
model.immediateFile = null
}
if (model.immediateFileFocus == defaultImmediatePic) {
model.immediateFileFocus = null
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
/**
* 同步媒体资源给指令所有者对应业务平台
*
*/
function syncMediaForBizFunc() {
formData.mediaFileSavePath = formComputedData.value.mediaFileSavePath
syncMediaForBiz(formData)
.then((res) => {
createMessage.success('操作成功!');
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
}
/**
* 同步媒体资源给所有业务平台
*
*/
function syncMediaForAllBizFunc() {
formData.mediaFileSavePath = formComputedData.value.mediaFileSavePath
syncMediaForAllBiz(formData)
.then((res) => {
createMessage.success('操作成功!');
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
}
const directiveMediaBtnValue = ref(0)
function mediaBtnChanged(v_) {
directiveMediaBtnValue.value = v_
}
onMounted(() => {
queryUpBizPrefix().then(res => {
upBizPrefix.value = res.result
})
})
defineExpose({
add,
edit,
submitForm,
syncMediaForBizFunc,
syncMediaForAllBizFunc
});
</script>
<style lang="less" scoped>
.antd-modal-form {
padding: 14px;
}
:deep .ant-checkbox-wrapper {
margin-top: 5px;
margin-bottom: 10px;
width: 30%;
}
.upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upload-icon {
margin-bottom: 16px;
}
.upload-text {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
gap: 8px;
}
.divider {
color: rgba(0, 0, 0, 0.2);
}
.description-container {
position: relative;
z-index: 1000;
}
.description-box {
position: absolute;
bottom: 100%;
left: 0;
background: #f6faff;
border-radius: 4px;
padding: 12px;
width: 43vw;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 8px;
}
.box-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
margin-bottom: 12px;
}
.title {
font-weight: bold;
font-size: 16px;
}
.collapse-icon {
color: #1890ff;
cursor: pointer;
}
.content {
background: #fff;
border-radius: 4px;
padding: 12px;
position: relative;
}
.instruction {
color: #8c8c8c;
margin-bottom: 30px;
}
.confirm-btn {
position: absolute;
right: 12px;
bottom: 12px;
background: #1890ff;
border-radius: 20px;
}
/* 渐隐渐现动画 */
.slide-fade-enter-active {
transition: opacity 0.3s ease-out;
}
.slide-fade-leave-active {
transition: opacity 0.3s cubic-bezier(0.5, 0, 0.8, 1);
}
/* 进入时从透明开始 */
.slide-fade-enter-from {
opacity: 0;
}
/* 离开时渐变到透明 */
.slide-fade-leave-to {
opacity: 0;
}
/* 确保容器初始状态无变形 */
.slide-fade-enter-to,
.slide-fade-leave-from {
opacity: 1;
}
</style>

View File

@ -0,0 +1,734 @@
<template>
<a-spin :spinning="confirmLoading">
<div style="padding: 14px; background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
<a-row v-show="!isEditMedia">
<a-col :span="12" v-show="false">
<a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
<j-dict-select-tag v-model:value="formData.instructionTagId" :orgCode="mainOrgCode"
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`"
placeholder="请选择分类标签" allowClear @upDictCode="upInstructionDictCode" :disabled="!!formData.id" />
</a-form-item>
</a-col>
<a-col :span="12" v-show="false">
<a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
name="categoryId">
<j-dict-select-tag type="list" v-model:value="formData.categoryId" :disabled="!!formData.id"
:orgCode="mainOrgCode" :dictCode="categoryDictCode" placeholder="请选择服务类别" allow-clear
@upDictCode="upCategoryDictCode" />
</a-form-item>
</a-col>
<a-col :span="12" v-show="false">
<a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
name="typeId">
<j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
:orgCode="mainOrgCode" :disabled="!!formData.id" placeholder="请选择服务类型" allowClear
@upDictCode="upTypeDictCode" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
<a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear :maxlength="20"
:showCount="true" :disabled="!!formData.id"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
name="tollPrice">
<a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%" :min="0"
:max="99999.99" :precision="2" @keydown="onPriceKeydown" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
name="cycleType">
<j-dict-select-tag type="list" v-model:value="formData.cycleType" dictCode="period_type"
placeholder="请选择周期类型" allowClear @upDictCode="upCycleTypeDictCode" :disabled="!!formData.id" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
name="comPrice">
<a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%" :min="0"
:max="99999.99" :precision="2" @keydown="onPriceKeydown" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
name="izEnabled">
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
placeholder="请选择是否启用"  allowClear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="服务时长" v-bind="validateInfos.serviceDuration"
id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
<a-input-number v-model:value="formData.serviceDuration" :min="5" :max="55" :step="5" addon-after="分钟"
placeholder="请输入服务时长(分钟)" allow-clear @keydown="onDurationKeydown" />
</a-form-item>
</a-col>
</a-row>
<a-row style="margin-top: 20px;">
<a-col :span="12" v-show="showMedia">
<a-form-item label="服务指令图片" v-bind="validateInfos.previewFile">
<span v-if="disabled && !formData.previewFile">暂无文件</span>
<JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
:value="mediaApiAddress + formData.previewFile">
</JImageUpload>
<JImageUpload v-else :fileMax="1" v-model:value="formData.previewFile"></JImageUpload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="服务指令描述" v-bind="validateInfos.serviceContent"
id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
<a-textarea v-model:value="formData.serviceContent" :autosize="true" placeholder="请输入服务指令描述"
:maxlength="200" :showCount="true" />
</a-form-item>
</a-col>
</a-row>
<a-row v-show="!disabled && showMedia">
<a-col :span="12">
<a-form-item label="指令音频文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File">
<j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"
:beforeUpload="checkMp3"></j-upload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="指令视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File">
<j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"
:beforeUpload="checkMp4"></j-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
<JFormContainer style="margin-top: -40px;" v-show="showMedia">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
name="ConfigServiceDirectiveForm">
<a-row>
<a-col :span="12" v-if="!!formData.mp3File">
<a-form-item label="指令音频预览" id="ConfigServiceDirectiveForm-mp3File">
<audio controls disabled="false">
<source
:src="opeType == 'dmlook' ? mediaApiAddress + formData.mp3File : getFileAccessHttpUrl(formData.mp3File)">
</audio>
</a-form-item>
</a-col>
<a-col :span="12" v-if="disabled && !formData.mp3File">
<a-form-item label="指令音频预览">
<span>暂无文件</span>
</a-form-item>
</a-col>
<a-col :span="12" v-if="!!formData.mp4File" :push="!!formData.mp3File ? 0 : 12">
<a-form-item label="指令视频预览" id="ConfigServiceDirectiveForm-mp4File">
<video controls>
<source
:src="opeType == 'dmlook' ? mediaApiAddress + formData.mp4File : getFileAccessHttpUrl(formData.mp4File)">
</video>
</a-form-item>
</a-col>
<a-col :span="12" v-if="disabled && !formData.mp3File">
<a-form-item label="指令视频预览">
<span>暂无文件</span>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="即时指令图标" v-bind="validateInfos.immediateFile">
<span v-if="disabled && !formData.immediateFile">暂无文件</span>
<JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
:value="mediaApiAddress + formData.immediateFile">
</JImageUpload>
<JImageUpload v-else :fileMax="1" v-model:value="formData.immediateFile"></JImageUpload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
</div>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, watch } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { JCheckbox } from '/@/components/Form';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate, syncMediaForBiz, syncMediaForAllBiz } from '../ConfigServiceDirective.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { env } from 'process';
import DirectiveRadioCom from './DirectiveRadioCom.vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { DownOutlined } from '@ant-design/icons-vue';
const showDescription = ref(false);
//
const toggleDescription = () => {
showDescription.value = !showDescription.value;
};
const fileList = ref([])
const onPriceKeydown = (e: KeyboardEvent) => {
const key = e.key;
//
if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
//
if (!/[\d.]/.test(key)) {
e.preventDefault();
return;
}
const input = e.target as HTMLInputElement;
const { value, selectionStart: s, selectionEnd: t } = input;
const next = value.slice(0, s!) + key + value.slice(t!);
// 52
if (!/^\d{0,5}(?:\.\d{0,2})?$/.test(next)) {
e.preventDefault();
}
};
const onDurationKeydown = (e: KeyboardEvent) => {
const key = e.key;
//
if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
//
if (!/[\d.]/.test(key)) {
e.preventDefault();
return;
}
const input = e.target as HTMLInputElement;
const { value, selectionStart: s, selectionEnd: t } = input;
const next = value.slice(0, s!) + key + value.slice(t!);
// 52
if (!/^\d{0,2}$/.test(next)) {
e.preventDefault();
}
};
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({}) },
formBpm: { type: Boolean, default: true },
mainOrgCode: '',
mediaApiAddress: '',//
opeType: 'look',
});
const checkMp3 = (file) => {
const isPDF = file.type === 'application/mp3' || file.name.endsWith('.mp3');
if (!isPDF) {
createMessage.error('只能上传 mp3 文件!');
return false; //
}
return true;
};
const checkMp4 = (file) => {
const isPDF = file.type === 'application/mp4' || file.name.endsWith('.mp4');
if (!isPDF) {
createMessage.error('只能上传 mp4 文件!');
return false; //
}
return true;
};
const bodyTagDictCode = ref(`nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
const emotionTagDictCode = ref(`nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
categoryId: '',
typeId: '',
instructionTagId: '',
directiveName: '',
tollPrice: 0,
comPrice: 0,
izReimbursement: '0',
izPreferential: '0',
chargingFrequency: '',
cycleType: '',
sort: 99,
serviceContent: '',
serviceDuration: '5',
status: '',
izEnabled: '0',
createBy: '',
createTime: '',
updateBy: '',
updateTime: '',
mp3File: '',
mp4File: '',
previewFile: '',
immediateFile: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 4 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 19 } });
const confirmLoading = ref<boolean>(false);
const isEditMedia = ref(false)
const instructionTagName = ref('')
const categoryName = ref('')
const typeName = ref('')
const cycleTypeName = ref('')
const orgMediaPathAddress = ref('')//访
//
const validatorRules = reactive({
categoryId: [{ required: true, message: '请选择服务类别!' },],
typeId: [{ required: true, message: '请选择服务类型!' },],
instructionTagId: [{ required: true, message: '请选择分类标签!' },],
directiveName: [{ required: true, message: '请输入服务指令名称!' },],
tollPrice: [{ required: true, message: '请输入收费价格!' }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
comPrice: [{ required: false }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
// izReimbursement: [{ required: true, message: '!' },],
// izPreferential: [{ required: true, message: '!' },],
// chargingFrequency: [{ required: true, message: '!' },],
cycleType: [{ required: true, message: '请选择周期类型!' },],
// sort: [{ required: true, message: '!' }, { pattern: /^\d+$/, message: '!' },],
serviceDuration: [
{ required: true, message: '请输入服务时长(分钟)!' },
{ pattern: /^\d+$/, message: '请输入正整数!' },
{
validator: (_, value) => {
if (value % 5 !== 0) {
return Promise.reject('请输入5的倍数!');
}
return Promise.resolve();
},
},
{
validator: (_, value) => {
if (value < 5 || value > 55) {
return Promise.reject('请输入5到55之间的值!');
}
return Promise.resolve();
},
},
],
izEnabled: [{ required: true, message: '请选择是否启用!' },],
});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
//
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
const categoryDictCode = ref('')
const typeDictCode = ref('')
//
const canUploadPreviewImage = computed(() => {
return formData.instructionTagId &&
formData.categoryId &&
formData.typeId &&
formData.directiveName &&
formData.cycleType;
});
//
const instructionComDictCode = ref([])
function upInstructionDictCode(v_) {
instructionComDictCode.value = v_
}
//
const categoryComDictCode = ref([])
function upCategoryDictCode(v_) {
categoryComDictCode.value = v_
}
//
const typeComDictCode = ref([])
function upTypeDictCode(v_) {
typeComDictCode.value = v_
}
//
const cycleTypeComDictCode = ref([])
function upCycleTypeDictCode(v_) {
cycleTypeComDictCode.value = v_
}
//
const upBodyTagsComDictCode = ref([])
function upBodyTagsDictCode(v_) {
upBodyTagsComDictCode.value = v_
}
//
const upEmotionTagsComDictCode = ref([])
function upEmotionTagsDictCode(v_) {
upEmotionTagsComDictCode.value = v_
}
watch([instructionComDictCode, categoryComDictCode, typeComDictCode, cycleTypeComDictCode, upBodyTagsComDictCode, upEmotionTagsComDictCode], () => {
// formComputedData
}, { deep: true });
const bodyTagsObj = ref([])
const emotionTagsObj = ref([])
const formComputedData = computed(() => {
if (!canUploadPreviewImage.value) return {};
//
const instructionName = instructionComDictCode.value.find(d => d.value == formData.instructionTagId)?.label || '';
const categoryName = categoryComDictCode.value.find(d => d.value == formData.categoryId)?.label || '';
const typeName = typeComDictCode.value.find(d => d.value == formData.typeId)?.label || '';
const cycleTypeName = cycleTypeComDictCode.value.find(d => d.value == formData.cycleType)?.label || '';
//
const processTags = (tags, dict) => {
if (!tags) return [];
return tags.split(',')
.map(id => dict.find(d => d.value === id))
.filter(Boolean)
.map(item => ({ id: item.value, label: item.label }));
};
return {
mediaFileSavePath: `directive/${instructionName}/${categoryName}/${typeName}/${cycleTypeName}/${formData.directiveName}`,
instructionName,
categoryName,
typeName,
cycleTypeName,
bodyTagsObj: JSON.stringify(processTags(formData.bodyTags, upBodyTagsComDictCode.value)),
emotionTagsObj: JSON.stringify(processTags(formData.emotionTags, upEmotionTagsComDictCode.value))
};
});
watch(
() => formData.instructionTagId,
(newInstructionTagId) => {
if (needWatch.value) {
formData.categoryId = ''
formData.typeId = ''
// formData.cycleType = ''
}
if (!newInstructionTagId) {
categoryDictCode.value = 'nu_config_service_category,category_name,id,1=2';
} else {
categoryDictCode.value = `nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 0 and instruction_id = '${newInstructionTagId}' order by sort asc`;
}
}
);
watch(
() => formData.categoryId,
(newCategoryId) => {
if (needWatch.value) {
formData.typeId = ''
// formData.cycleType = ''
}
if (!newCategoryId) {
typeDictCode.value = 'nu_config_service_type,type_name,id,1=2';
} else {
typeDictCode.value = `nu_config_service_type,type_name,id,del_flag = 0 and iz_enabled = 0 and category_id = '${newCategoryId}' order by sort asc`;
}
}
);
watch(
() => formData.typeId,
(newTypeId) => {
if (needWatch.value) {
// formData.cycleType = ''
}
}
);
/**
* 新增
*/
function add() {
edit({});
}
const needWatch = ref(false)
const showMedia = ref(true)
/**
* 编辑
* isEditMedia_是否为编辑指令资源 隐藏业务字段
*/
function edit(record, isEditMedia_ = false, showMedia_ = true, showExistTags = true) {
if (!!record.bodyTags && showExistTags) {
// "id = 'id1' or id = 'id2'"
const bodyTagConditions = record.bodyTags.split(',')
.map(id => `id = '${id}'`)
.join(' or ');
bodyTagDictCode.value = `nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
(bodyTagConditions ? ` and (${bodyTagConditions})` : '') +
` order by sort asc`;
}
if (!!record.emotionTags && showExistTags) {
// "id = 'id1' or id = 'id2'"
const emotionTagConditions = record.emotionTags.split(',')
.map(id => `id = '${id}'`)
.join(' or ');
emotionTagDictCode.value = `nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
(emotionTagConditions ? ` and (${emotionTagConditions})` : '') +
` order by sort asc`;
}
needWatch.value = false
showMedia.value = showMedia_
setTimeout(() => {
needWatch.value = true
}, 1000)
isEditMedia.value = isEditMedia_
formData.bodyTags = ''
formData.emotionTags = ''
nextTick(() => {
resetFields();
const tmpData = {};
Object.keys(formData).forEach((key) => {
if (record.hasOwnProperty(key)) {
tmpData[key] = record[key]
}
})
//
Object.assign(formData, tmpData);
});
}
/**
* 提交数据
*/
async function submitForm() {
try {
//
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
const computedData = formComputedData.value;
const model = {
...formData,
...computedData
};
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
//
if (model.comPrice != 0 && model.tollPrice < model.comPrice) {
createMessage.warning('提成价格不能高于收费价格!');
confirmLoading.value = false;
return
}
model.mediaFileSavePath = formComputedData.value.mediaFileSavePath
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
/**
* 同步媒体资源给指令所有者对应业务平台
*
*/
function syncMediaForBizFunc() {
formData.mediaFileSavePath = formComputedData.value.mediaFileSavePath
syncMediaForBiz(formData)
.then((res) => {
createMessage.success('操作成功!');
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
}
/**
* 同步媒体资源给所有业务平台
*
*/
function syncMediaForAllBizFunc() {
formData.mediaFileSavePath = formComputedData.value.mediaFileSavePath
syncMediaForAllBiz(formData)
.then((res) => {
createMessage.success('操作成功!');
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
}
const directiveMediaBtnValue = ref(0)
function mediaBtnChanged(v_) {
directiveMediaBtnValue.value = v_
}
onMounted(() => {
})
defineExpose({
add,
edit,
submitForm,
syncMediaForBizFunc,
syncMediaForAllBizFunc
});
</script>
<style lang="less" scoped>
.antd-modal-form {
padding: 14px;
}
:deep .ant-checkbox-wrapper {
margin-top: 5px;
margin-bottom: 10px;
width: 30%;
}
.upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upload-icon {
margin-bottom: 16px;
}
.upload-text {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
gap: 8px;
}
.divider {
color: rgba(0, 0, 0, 0.2);
}
.description-container {
position: relative;
z-index: 1000;
}
.description-box {
position: absolute;
bottom: 100%;
left: 0;
background: #f6faff;
border-radius: 4px;
padding: 12px;
width: 43vw;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 8px;
}
.box-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
margin-bottom: 12px;
}
.title {
font-weight: bold;
font-size: 16px;
}
.collapse-icon {
color: #1890ff;
cursor: pointer;
}
.content {
background: #fff;
border-radius: 4px;
padding: 12px;
position: relative;
}
.instruction {
color: #8c8c8c;
margin-bottom: 30px;
}
.confirm-btn {
position: absolute;
right: 12px;
bottom: 12px;
background: #1890ff;
border-radius: 20px;
}
/* 渐隐渐现动画 */
.slide-fade-enter-active {
transition: opacity 0.3s ease-out;
}
.slide-fade-leave-active {
transition: opacity 0.3s cubic-bezier(0.5, 0, 0.8, 1);
}
/* 进入时从透明开始 */
.slide-fade-enter-from {
opacity: 0;
}
/* 离开时渐变到透明 */
.slide-fade-leave-to {
opacity: 0;
}
/* 确保容器初始状态无变形 */
.slide-fade-enter-to,
.slide-fade-leave-from {
opacity: 1;
}
</style>

View File

@ -0,0 +1,888 @@
<template>
<a-spin :spinning="confirmLoading">
<div style="background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
<a-row v-show="!isEditMedia">
<a-col :span="12" v-show="false">
<a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
<j-dict-select-tag v-model:value="formData.instructionTagId" :orgCode="mainOrgCode"
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`"
placeholder="请选择分类标签" allowClear @upDictCode="upInstructionDictCode" :disabled="!!formData.id" />
</a-form-item>
</a-col>
<a-col :span="12" v-show="false">
<a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
name="categoryId">
<j-dict-select-tag type="list" v-model:value="formData.categoryId" :disabled="!!formData.id"
:orgCode="mainOrgCode" :dictCode="categoryDictCode" placeholder="请选择服务类别" allow-clear
@upDictCode="upCategoryDictCode" />
</a-form-item>
</a-col>
<a-col :span="12" v-show="false">
<a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
name="typeId">
<j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
:orgCode="mainOrgCode" :disabled="!!formData.id" placeholder="请选择服务类型" allowClear
@upDictCode="upTypeDictCode" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
<a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear :maxlength="20"
:showCount="true" :disabled="!!formData.id"></a-input>
</a-form-item>
</a-col>
<!-- <a-col :span="12">
<a-form-item label="机构优惠" v-bind="validateInfos.izPreferential"
id="ConfigServiceDirectiveForm-izPreferential" name="izPreferential">
<j-dict-select-tag type='radio' v-model:value="formData.izPreferential"
dictCode="institutional_discount" allowClear />
</a-form-item>
</a-col> -->
<a-col :span="12">
<a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
name="tollPrice">
<a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%" :min="0"
:max="99999.99" :precision="2" @keydown="onPriceKeydown" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
name="cycleType">
<j-dict-select-tag type="list" v-model:value="formData.cycleType" dictCode="period_type"
placeholder="请选择周期类型" allowClear @upDictCode="upCycleTypeDictCode" :disabled="!!formData.id" />
</a-form-item>
</a-col>
<!-- <a-col :span="12">
<a-form-item label="医保报销" v-bind="validateInfos.izReimbursement"
id="ConfigServiceDirectiveForm-izReimbursement" name="izReimbursement">
<j-dict-select-tag type='radio' v-model:value="formData.izReimbursement" dictCode="med_ins_reimb"
allowClear />
</a-form-item>
</a-col> -->
<a-col :span="12">
<a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
name="comPrice">
<a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%" :min="0"
:max="99999.99" :precision="2" @keydown="onPriceKeydown" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
name="izEnabled">
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
placeholder="请选择是否启用"  allowClear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="服务时长" v-bind="validateInfos.serviceDuration"
id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
<a-input-number v-model:value="formData.serviceDuration" :min="5" :max="55" :step="5" addon-after="分钟"
placeholder="请输入服务时长(分钟)" allow-clear @keydown="onDurationKeydown" />
</a-form-item>
</a-col>
</a-row>
<!-- <a-row v-show="!isEditMedia"
style="background-color: #f6faff ; border-top: 1px solid #F0F0F0;border-bottom: 1px solid #F0F0F0;">
<a-col :span="12" style="border-right: 1px solid #F0F0F0;padding-top: 20px;">
<a-form-item label="体型标签" id="ConfigServiceDirectiveForm-typeId" name="typeId">
<span v-if="disabled && !formData.bodyTags">-</span>
<JCheckbox v-else v-model:value="formData.bodyTags" :orgCode="mainOrgCode" :dictCode="bodyTagDictCode"
@upDictCode="upBodyTagsDictCode" />
</a-form-item>
</a-col>
<a-col :span="12" style="padding-top: 20px;">
<a-form-item label="情绪标签" name="emoTags">
<span v-if="disabled && !formData.emotionTags">-</span>
<JCheckbox v-else v-model:value="formData.emotionTags" :orgCode="mainOrgCode"
:dictCode="emotionTagDictCode" @upDictCode="upEmotionTagsDictCode" />
</a-form-item>
</a-col>
</a-row> -->
<!-- <a-row style="padding: 20px;">
<a-col :span="6">
<DirectiveRadioCom :directiveMediaBtnValue="directiveMediaBtnValue" @change="mediaBtnChanged">
</DirectiveRadioCom>
</a-col>
</a-row>
<a-row style="padding: 0px 20px;">
<a-col :span="24" v-show="directiveMediaBtnValue == 0">
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
<div class="upload-area">
<p class="upload-text">点击或者拖拽上传</p>
<div class="upload-icon">
<img src="./pictype.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
</div>
<p class="upload-hint">
<span>文件大小不超过10MB</span>
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />
格式说明
</span>
</a-tooltip>
</p>
</div>
</a-upload-dragger>
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 1">
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
<div class="upload-area">
<p class="upload-text">点击或者拖拽上传</p>
<div class="upload-icon">
<img src="./mp3type.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
</div>
<p class="upload-hint">
<span>文件大小不超过10MB</span>
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />
格式说明
</span>
</a-tooltip>
</p>
</div>
</a-upload-dragger>
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 2">
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
<div class="upload-area">
<p class="upload-text">点击或者拖拽上传</p>
<div class="upload-icon">
<img src="./mp4type.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
</div>
<p class="upload-hint">
<span>文件大小不超过10MB</span>
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />
格式说明
</span>
</a-tooltip>
</p>
</div>
</a-upload-dragger>
</a-col>
<a-col :span="24" v-show="directiveMediaBtnValue == 3">
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
<div class="upload-area">
<p class="upload-text">点击或者拖拽上传</p>
<div class="upload-icon">
<img src="./pictype.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
</div>
<p class="upload-hint">
<span>文件大小不超过10MB</span>
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />
格式说明
</span>
</a-tooltip>
</p>
</div>
</a-upload-dragger>
</a-col>
</a-row>
<a-row style="padding: 20px;">
<a-col :span="2">
<div class="description-container">
<a-button @click="toggleDescription">服务指令描述</a-button>
<div v-show="showDescription" class="description-box">
<div class="box-header">
<span class="title">服务指令描述</span>
<span class="collapse-icon" @click="toggleDescription">
<DownOutlined style="margin-right: 3px;" />收起
</span>
</div>
<div>
<a-textarea v-model:value="formData.serviceContent" placeholder="请输入服务指令描述" :maxlength="200" :rows="3"
:autosize="{ minRows: 3 }" :showCount="true" />
</div>
</div>
</div>
</a-col>
</a-row> -->
<a-row style="margin-top: 20px;">
<a-col :span="12" v-show="showMedia">
<a-form-item label="服务指令图片" v-bind="validateInfos.previewFile">
<span v-if="disabled && !formData.previewFile">暂无文件</span>
<JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
:value="mediaApiAddress + formData.previewFile">
</JImageUpload>
<JImageUpload v-else :fileMax="1" v-model:value="formData.previewFile"></JImageUpload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="服务指令描述" v-bind="validateInfos.serviceContent"
id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
<a-textarea v-model:value="formData.serviceContent" :autosize="true" placeholder="请输入服务指令描述"
:maxlength="200" :showCount="true" />
</a-form-item>
</a-col>
</a-row>
<a-row v-show="!disabled && showMedia">
<a-col :span="12">
<a-form-item label="指令音频文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File">
<j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"
:beforeUpload="checkMp3"></j-upload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="指令视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File">
<j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"
:beforeUpload="checkMp4"></j-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
<JFormContainer style="margin-top: -40px;" v-show="showMedia">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
name="ConfigServiceDirectiveForm">
<a-row>
<a-col :span="12" v-if="!!formData.mp3File">
<a-form-item label="指令音频预览" id="ConfigServiceDirectiveForm-mp3File">
<audio controls disabled="false">
<source
:src="opeType == 'dmlook' ? mediaApiAddress + formData.mp3File : getFileAccessHttpUrl(formData.mp3File)">
</audio>
</a-form-item>
</a-col>
<a-col :span="12" v-if="disabled && !formData.mp3File">
<a-form-item label="指令音频预览">
<span>暂无文件</span>
</a-form-item>
</a-col>
<a-col :span="12" v-if="!!formData.mp4File" :push="!!formData.mp3File ? 0 : 12">
<a-form-item label="指令视频预览" id="ConfigServiceDirectiveForm-mp4File">
<video controls>
<source
:src="opeType == 'dmlook' ? mediaApiAddress + formData.mp4File : getFileAccessHttpUrl(formData.mp4File)">
</video>
</a-form-item>
</a-col>
<a-col :span="12" v-if="disabled && !formData.mp3File">
<a-form-item label="指令视频预览">
<span>暂无文件</span>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="即时指令图标" v-bind="validateInfos.immediateFile">
<span v-if="disabled && !formData.immediateFile">暂无文件</span>
<JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
:value="mediaApiAddress + formData.immediateFile">
</JImageUpload>
<JImageUpload v-else :fileMax="1" v-model:value="formData.immediateFile"></JImageUpload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
</div>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, watch } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { JCheckbox } from '/@/components/Form';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate, syncMediaForBiz, syncMediaForAllBiz } from '../ConfigServiceDirective.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { env } from 'process';
import DirectiveRadioCom from './DirectiveRadioCom.vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { DownOutlined } from '@ant-design/icons-vue';
const showDescription = ref(false);
//
const toggleDescription = () => {
showDescription.value = !showDescription.value;
};
const fileList = ref([])
const onPriceKeydown = (e: KeyboardEvent) => {
const key = e.key;
//
if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
//
if (!/[\d.]/.test(key)) {
e.preventDefault();
return;
}
const input = e.target as HTMLInputElement;
const { value, selectionStart: s, selectionEnd: t } = input;
const next = value.slice(0, s!) + key + value.slice(t!);
// 52
if (!/^\d{0,5}(?:\.\d{0,2})?$/.test(next)) {
e.preventDefault();
}
};
const onDurationKeydown = (e: KeyboardEvent) => {
const key = e.key;
//
if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
//
if (!/[\d.]/.test(key)) {
e.preventDefault();
return;
}
const input = e.target as HTMLInputElement;
const { value, selectionStart: s, selectionEnd: t } = input;
const next = value.slice(0, s!) + key + value.slice(t!);
// 52
if (!/^\d{0,2}$/.test(next)) {
e.preventDefault();
}
};
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({}) },
formBpm: { type: Boolean, default: true },
mainOrgCode: '',
mediaApiAddress: '',//
opeType: 'look',
});
const checkMp3 = (file) => {
const isPDF = file.type === 'application/mp3' || file.name.endsWith('.mp3');
if (!isPDF) {
createMessage.error('只能上传 mp3 文件!');
return false; //
}
return true;
};
const checkMp4 = (file) => {
const isPDF = file.type === 'application/mp4' || file.name.endsWith('.mp4');
if (!isPDF) {
createMessage.error('只能上传 mp4 文件!');
return false; //
}
return true;
};
const bodyTagDictCode = ref(`nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
const emotionTagDictCode = ref(`nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
categoryId: '',
typeId: '',
instructionTagId: '',
directiveName: '',
tollPrice: 0,
comPrice: 0,
izReimbursement: '0',
izPreferential: '0',
chargingFrequency: '',
cycleType: '',
sort: 99,
serviceContent: '',
serviceDuration: '5',
status: '',
izEnabled: '0',
createBy: '',
createTime: '',
updateBy: '',
updateTime: '',
mp3File: '',
mp4File: '',
previewFile: '',
immediateFile: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 19 } });
const confirmLoading = ref<boolean>(false);
const isEditMedia = ref(false)
const instructionTagName = ref('')
const categoryName = ref('')
const typeName = ref('')
const cycleTypeName = ref('')
const orgMediaPathAddress = ref('')//访
//
const validatorRules = reactive({
categoryId: [{ required: true, message: '请选择服务类别!' },],
typeId: [{ required: true, message: '请选择服务类型!' },],
instructionTagId: [{ required: true, message: '请选择分类标签!' },],
directiveName: [{ required: true, message: '请输入服务指令名称!' },],
tollPrice: [{ required: true, message: '请输入收费价格!' }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
comPrice: [{ required: false }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
izReimbursement: [{ required: true, message: '请选择是否参与医保报销!' },],
izPreferential: [{ required: true, message: '请选择是否参与机构优惠!' },],
// chargingFrequency: [{ required: true, message: '!' },],
cycleType: [{ required: true, message: '请选择周期类型!' },],
// sort: [{ required: true, message: '!' }, { pattern: /^\d+$/, message: '!' },],
serviceDuration: [
{ required: true, message: '请输入服务时长(分钟)!' },
{ pattern: /^\d+$/, message: '请输入正整数!' },
{
validator: (_, value) => {
if (value % 5 !== 0) {
return Promise.reject('请输入5的倍数!');
}
return Promise.resolve();
},
},
{
validator: (_, value) => {
if (value < 5 || value > 55) {
return Promise.reject('请输入5到55之间的值!');
}
return Promise.resolve();
},
},
],
izEnabled: [{ required: true, message: '请选择是否启用!' },],
});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
//
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
const categoryDictCode = ref('')
const typeDictCode = ref('')
//
const canUploadPreviewImage = computed(() => {
return formData.instructionTagId &&
formData.categoryId &&
formData.typeId &&
formData.directiveName &&
formData.cycleType;
});
//
const instructionComDictCode = ref([])
function upInstructionDictCode(v_) {
instructionComDictCode.value = v_
}
//
const categoryComDictCode = ref([])
function upCategoryDictCode(v_) {
categoryComDictCode.value = v_
}
//
const typeComDictCode = ref([])
function upTypeDictCode(v_) {
typeComDictCode.value = v_
}
//
const cycleTypeComDictCode = ref([])
function upCycleTypeDictCode(v_) {
cycleTypeComDictCode.value = v_
}
//
const upBodyTagsComDictCode = ref([])
function upBodyTagsDictCode(v_) {
upBodyTagsComDictCode.value = v_
}
//
const upEmotionTagsComDictCode = ref([])
function upEmotionTagsDictCode(v_) {
upEmotionTagsComDictCode.value = v_
}
watch([instructionComDictCode, categoryComDictCode, typeComDictCode, cycleTypeComDictCode, upBodyTagsComDictCode, upEmotionTagsComDictCode], () => {
// formComputedData
}, { deep: true });
const bodyTagsObj = ref([])
const emotionTagsObj = ref([])
const formComputedData = computed(() => {
if (!canUploadPreviewImage.value) return {};
//
const instructionName = instructionComDictCode.value.find(d => d.value == formData.instructionTagId)?.label || '';
const categoryName = categoryComDictCode.value.find(d => d.value == formData.categoryId)?.label || '';
const typeName = typeComDictCode.value.find(d => d.value == formData.typeId)?.label || '';
const cycleTypeName = cycleTypeComDictCode.value.find(d => d.value == formData.cycleType)?.label || '';
//
const processTags = (tags, dict) => {
if (!tags) return [];
return tags.split(',')
.map(id => dict.find(d => d.value === id))
.filter(Boolean)
.map(item => ({ id: item.value, label: item.label }));
};
return {
mediaFileSavePath: `directive/${instructionName}/${categoryName}/${typeName}/${cycleTypeName}/${formData.directiveName}`,
instructionName,
categoryName,
typeName,
cycleTypeName,
bodyTagsObj: JSON.stringify(processTags(formData.bodyTags, upBodyTagsComDictCode.value)),
emotionTagsObj: JSON.stringify(processTags(formData.emotionTags, upEmotionTagsComDictCode.value))
};
});
watch(
() => formData.instructionTagId,
(newInstructionTagId) => {
if (needWatch.value) {
formData.categoryId = ''
formData.typeId = ''
formData.cycleType = ''
}
if (!newInstructionTagId) {
categoryDictCode.value = 'nu_config_service_category,category_name,id,1=2';
} else {
categoryDictCode.value = `nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 0 and instruction_id = '${newInstructionTagId}' order by sort asc`;
}
}
);
watch(
() => formData.categoryId,
(newCategoryId) => {
if (needWatch.value) {
formData.typeId = ''
formData.cycleType = ''
}
if (!newCategoryId) {
typeDictCode.value = 'nu_config_service_type,type_name,id,1=2';
} else {
typeDictCode.value = `nu_config_service_type,type_name,id,del_flag = 0 and iz_enabled = 0 and category_id = '${newCategoryId}' order by sort asc`;
}
}
);
watch(
() => formData.typeId,
(newTypeId) => {
if (needWatch.value) {
formData.cycleType = ''
}
}
);
/**
* 新增
*/
function add() {
edit({});
}
const needWatch = ref(false)
const showMedia = ref(true)
/**
* 编辑
* isEditMedia_是否为编辑指令资源 隐藏业务字段
*/
function edit(record, isEditMedia_ = false, showMedia_ = true, showExistTags = true) {
if (!!record.bodyTags && showExistTags) {
// "id = 'id1' or id = 'id2'"
const bodyTagConditions = record.bodyTags.split(',')
.map(id => `id = '${id}'`)
.join(' or ');
bodyTagDictCode.value = `nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
(bodyTagConditions ? ` and (${bodyTagConditions})` : '') +
` order by sort asc`;
}
if (!!record.emotionTags && showExistTags) {
// "id = 'id1' or id = 'id2'"
const emotionTagConditions = record.emotionTags.split(',')
.map(id => `id = '${id}'`)
.join(' or ');
emotionTagDictCode.value = `nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
(emotionTagConditions ? ` and (${emotionTagConditions})` : '') +
` order by sort asc`;
}
needWatch.value = false
showMedia.value = showMedia_
setTimeout(() => {
needWatch.value = true
}, 1000)
isEditMedia.value = isEditMedia_
formData.bodyTags = ''
formData.emotionTags = ''
nextTick(() => {
resetFields();
const tmpData = {};
Object.keys(formData).forEach((key) => {
if (record.hasOwnProperty(key)) {
tmpData[key] = record[key]
}
})
//
Object.assign(formData, tmpData);
});
}
/**
* 提交数据
*/
async function submitForm() {
try {
//
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
const computedData = formComputedData.value;
const model = {
...formData,
...computedData
};
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
//
if (model.comPrice != 0 && model.tollPrice < model.comPrice) {
createMessage.warning('提成价格不能高于收费价格!');
confirmLoading.value = false;
return
}
model.mediaFileSavePath = formComputedData.value.mediaFileSavePath
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
/**
* 同步媒体资源给指令所有者对应业务平台
*
*/
function syncMediaForBizFunc() {
formData.mediaFileSavePath = formComputedData.value.mediaFileSavePath
syncMediaForBiz(formData)
.then((res) => {
createMessage.success('操作成功!');
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
}
/**
* 同步媒体资源给所有业务平台
*
*/
function syncMediaForAllBizFunc() {
formData.mediaFileSavePath = formComputedData.value.mediaFileSavePath
syncMediaForAllBiz(formData)
.then((res) => {
createMessage.success('操作成功!');
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
}
const directiveMediaBtnValue = ref(0)
function mediaBtnChanged(v_) {
directiveMediaBtnValue.value = v_
}
onMounted(() => {
})
defineExpose({
add,
edit,
submitForm,
syncMediaForBizFunc,
syncMediaForAllBizFunc
});
</script>
<style lang="less" scoped>
.antd-modal-form {
padding: 14px;
}
:deep .ant-checkbox-wrapper {
margin-top: 5px;
margin-bottom: 10px;
width: 30%;
}
.upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upload-icon {
margin-bottom: 16px;
}
.upload-text {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
gap: 8px;
}
.divider {
color: rgba(0, 0, 0, 0.2);
}
.description-container {
position: relative;
z-index: 1000;
}
.description-box {
position: absolute;
bottom: 100%;
left: 0;
background: #f6faff;
border-radius: 4px;
padding: 12px;
width: 43vw;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 8px;
}
.box-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
margin-bottom: 12px;
}
.title {
font-weight: bold;
font-size: 16px;
}
.collapse-icon {
color: #1890ff;
cursor: pointer;
}
.content {
background: #fff;
border-radius: 4px;
padding: 12px;
position: relative;
}
.instruction {
color: #8c8c8c;
margin-bottom: 30px;
}
.confirm-btn {
position: absolute;
right: 12px;
bottom: 12px;
background: #1890ff;
border-radius: 20px;
}
/* 渐隐渐现动画 */
.slide-fade-enter-active {
transition: opacity 0.3s ease-out;
}
.slide-fade-leave-active {
transition: opacity 0.3s cubic-bezier(0.5, 0, 0.8, 1);
}
/* 进入时从透明开始 */
.slide-fade-enter-from {
opacity: 0;
}
/* 离开时渐变到透明 */
.slide-fade-leave-to {
opacity: 0;
}
/* 确保容器初始状态无变形 */
.slide-fade-enter-to,
.slide-fade-leave-from {
opacity: 1;
}
</style>

View File

@ -0,0 +1,279 @@
<template>
<!-- <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk"
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"
:maskClosable="false">
<template #footer>
<a-button @click="handleCancel">关闭</a-button>
<a-button @click="handleOk" v-show="opeType == 'add' || opeType == 'edit' || opeType == 'editMedia'"
:loading="loading">确定</a-button>
<a-button @click="handleSave" v-show="opeType == 'editMedia' || opeType == 'auditMedia'">暂存</a-button>
<a-button type="primary" @click="handleMediaAsync" v-show="opeType == 'auditMedia'">同步</a-button>
<a-button type="primary" @click="handleMediaSyncAllPlat" v-show="opeType == 'editMedia'">同步</a-button>
</template>
<a-spin :spinning="loading">
<ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false" :mainOrgCode="mainOrgCode"></ConfigServiceDirectiveForm>
</a-spin>
</j-modal> -->
<a-drawer :title="title" width="80vw" v-model:visible="visible" :closable="true"
:footer-style="{ textAlign: 'right' }" @close="handleCancel"
:bodyStyle="{ background: 'linear-gradient(135deg, #f1f7ff 0%, #f1f7ff 100%)',padding: '14px' }">
<a-spin :spinning="loading">
<ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false" :mainOrgCode="mainOrgCode" :mediaApiAddress="mediaApiAddress" :opeType="opeType"
:isMain="isMain">
</ConfigServiceDirectiveForm>
</a-spin>
<template #footer>
<a-button @click="handleCancel" style="margin-right: 8px;">关闭</a-button>
<a-button @click="handleOk" v-show="opeType == 'add' || opeType == 'edit' || opeType == 'editMedia'"
:loading="loading" style="margin-right: 8px;">确定</a-button>
<!-- <a-button @click="handleSave" v-show="opeType == 'editMedia' || opeType == 'auditMedia'">暂存</a-button>
<a-button type="primary" @click="handleMediaAsync" v-show="opeType == 'auditMedia'">同步</a-button>
<a-button type="primary" @click="handleMediaSyncAllPlat" v-show="opeType == 'editMedia'">同步</a-button> -->
</template>
</a-drawer>
<!-- <j-modal :title="'指令库'" :fullscreen="true" width="100vw" :visible="dmVisible" @cancel="handleCancelDM"
:maskClosable="false">
<template #footer>
<a-button @click="handleCancelDM">关闭</a-button>
<a-button @click="handlePullDM">镜像</a-button>
</template>
<DirectiveRespositoryList ref="dmRef" :mainOrgCode="mainOrgCode"></DirectiveRespositoryList>
</j-modal> -->
<a-drawer :title="'标准指令库'" width="80vw" v-model:visible="dmVisible" :closable="true"
:footer-style="{ textAlign: 'right' }" @close="handleCancelDM" :maskClosable="true">
<a-spin :spinning="loading">
<DirectiveRespositoryList ref="dmRef" :mainOrgCode="mainOrgCode"></DirectiveRespositoryList>
</a-spin>
<template #footer>
<a-button @click="handleCancelDM" style="margin-right: 8px;">关闭</a-button>
<a-button @click="handlePullDM">镜像</a-button>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose, defineProps } from 'vue';
import ConfigServiceDirectiveForm from './ConfigServiceDirectiveForm.vue'
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { saveOrUpdate, useOrStopCascade, queryById, syncDirective } from '../ConfigServiceDirective.api';
import DirectiveRespositoryList from './DirectiveRespositoryList.vue'
import { clearCache } from '/@/utils/cache/cacheUtil'
const mainOrgCode = ref('')
const dmRef = ref()
const loading = ref(false)
const { createMessage, createConfirm } = useMessage();
const props = defineProps({
mediaApiAddress: '',//
isMain: false,//
});
const title = ref<string>('');
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
const opeType = ref('')// add edit editMedia- look dmlook audit auditMedia-
const dmVisible = ref(false)
function handleCancelDM() {
dmVisible.value = false
clearCache()
emit('success')
}
/**
* 新增
*/
function add() {
title.value = '新增';
visible.value = true;
nextTick(() => {
registerForm.value.add();
});
}
/**
* 编辑
* @param record
*/
function edit(record, editMedia = false, showMedia = true) {
title.value = disableSubmit.value ? '详情' : opeType.value == 'add' ? '新增' : '编辑';
visible.value = true;
mainOrgCode.value = record.orgCode_
nextTick(() => {
registerForm.value.edit(record, editMedia, showMedia, disableSubmit.value);
});
}
/**
* 编辑指令资源
* @param record
*/
function queryAndEditMedia(id) {
title.value = '编辑指令资源';
visible.value = true;
nextTick(() => {
loading.value = true
queryById({ id }).then(res => {
registerForm.value.edit(res, true);
}).finally(() => {
loading.value = false
})
});
}
/**
* 编辑指令资源
* @param record
*/
function editMedia(record) {
title.value = '编辑指令资源';
visible.value = true;
nextTick(() => {
registerForm.value.edit(record, true);
});
}
/**
* 确定按钮点击事件
*/
function handleOk() {
registerForm.value.submitForm();
}
/**
* 暂存
*/
function handleSave() {
registerForm.value.submitForm();
}
/**
* 给审核对应的业务平台同步资源
*/
function handleMediaAsync() {
registerForm.value.syncMediaForBizFunc();
}
/**
* 给所有业务平台同步资源
*/
function handleMediaSyncAllPlat() {
registerForm.value.syncMediaForAllBizFunc();
}
/**
* form保存回调事件
*/
function submitCallback() {
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
}
function usingOrStop(id, izEnabled, refresh = false) {
let params = {
id,
izEnabled
}
saveOrUpdate(params, true).then((res) => {
if (refresh) {
if (res.success) {
createMessage.success(res.message);
} else {
createMessage.warning(res.message);
}
emit('success')
}
})
}
function queryByIdFunc(id) {
loading.value = true
queryById({ id }).then(res => {
edit(res)
}).finally(() => {
loading.value = false
})
}
function openDM(orgCode) {
dmVisible.value = true
mainOrgCode.value = orgCode
nextTick(() => {
dmRef.value?.init()
})
}
function handlePullDM() {
let selectedData = dmRef.value?.getSelectedIds()
if (!selectedData.count) {
createMessage.warning('未选择服务指令')
return
}
createConfirm({
iconType: 'warning',
title: '镜像确认',
content: '是否确认将<span style="font-weight:500;color:#efac0e;"> ' + selectedData.count + ' </span>条服务指令拉取到本平台?',
okText: '确认',
cancelText: '取消',
onOk: () => {
syncDirective(mainOrgCode.value, { syncIds: selectedData.ids, })
createMessage.success('从标准指令库开始拉取')
// dmRef.value?.init()
handleCancelDM()
}
});
}
function usingOrStopByCascade(instructionTagId, categoryId, typeId, izEnabled, refresh = true) {
let params = {
instructionTagId,
categoryId,
typeId,
izEnabled
}
useOrStopCascade(params).then((res) => {
if (refresh) {
createMessage.success('操作成功');
emit('success')
}
}).catch(() => {
createMessage.success('操作失败');
})
}
defineExpose({
add,
edit,
editMedia,
disableSubmit,
usingOrStop,
usingOrStopByCascade,
queryByIdFunc,
opeType,
queryAndEditMedia,
openDM,
});
</script>
<style lang="less">
/**隐藏样式-modal确定按钮 */
.jee-hidden {
display: none !important;
}
</style>
<style lang="less" scoped></style>

View File

@ -0,0 +1,100 @@
<template>
<div class="tab-container" :class="{ compact }">
<div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
@click="handleTabClick(index)">
<span class="tab-text">{{ tab }}</span>
<div v-if="index < tabs.length - 1" class="tab-divider"></div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
directiveMediaBtnValue: {
type: Number,
default: 0
},
compact: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:directiveMediaBtnValue', 'change'])
const tabs = ['服务指令图片(大)', '服务指令图片(小)', '指令音频文件', '指令视频文件', '即时指令图标', '即时指令-焦点']
const activeTab = ref(props.directiveMediaBtnValue)
watch(() => props.directiveMediaBtnValue, (newVal) => {
activeTab.value = newVal
})
const handleTabClick = (index) => {
activeTab.value = index
emit('update:directiveMediaBtnValue', index)
emit('change', index)
}
</script>
<style scoped>
.tab-container {
display: inline-flex;
background-color: #f1f7ff;
padding: 4px;
border-radius: 8px;
white-space: nowrap;
}
.tab-item {
position: relative;
padding: 6px 12px;
cursor: pointer;
color: #666;
font-size: 13px;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.tab-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.tab-item:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.tab-item.active {
background-color: #fff;
color: #333;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 1;
}
/* .tab-divider {
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background-color: rgba(0, 0, 0, 0.1);
z-index: 2;
} */
/* 紧凑模式 */
.tab-container.compact .tab-item {
padding: 4px 8px;
font-size: 12px;
}
.tab-container.compact .tab-text {
max-width: 80px;
}
</style>

View File

@ -0,0 +1,411 @@
<template>
<div>
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol" style="padding-top: 20px;">
<a-row :gutter="24">
<a-col :lg="5">
<a-form-item name="instructionTagId">
<template #label><span title="分类标签">分类标签</span></template>
<j-dict-select-tag v-model:value="queryParam.instructionTagId" :orgCode="mainOrgCode"
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 'Y' order by sort asc`"
placeholder="请选择分类标签" allowClear :ignoreDisabled="true" />
</a-form-item>
</a-col>
<a-col :lg="5">
<a-form-item name="categoryId">
<template #label><span title="服务类别">服务类别</span></template>
<j-dict-select-tag type="list" v-model:value="queryParam.categoryId" :orgCode="mainOrgCode"
:dictCode="`nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 'Y' and instruction_id = '${queryParam.instructionTagId || ''}' order by sort asc`"
placeholder="请选择服务类别" allowClear :ignoreDisabled="true" />
</a-form-item>
</a-col>
<a-col :lg="5">
<a-form-item name="typeId">
<template #label><span title="服务类型">服务类型</span></template>
<j-dict-select-tag type="list" v-model:value="queryParam.typeId" :orgCode="mainOrgCode"
:dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and iz_enabled = 'Y' and category_id = '${queryParam.categoryId || ''}' order by sort asc`"
placeholder="请选择服务类型" allowClear :ignoreDisabled="true" />
</a-form-item>
</a-col>
<a-col :lg="5">
<a-form-item name="directiveName">
<template #label><span title="服务指令">服务指令</span></template>
<JInput v-model:value="queryParam.directiveName" placeholder="请输入服务指令名称" allowClear />
</a-form-item>
</a-col>
<!-- <a-col :lg="6">
<a-form-item name="bodyTags">
<template #label><span title="体型标签">体型标签</span></template>
<j-dict-select-tag type='list' v-model:value="queryParam.bodyTags" :orgCode="mainOrgCode"
:dictCode="`nu_config_body_tag,tag_name,id,del_flag = '0' and iz_enabled = 'Y' order by sort asc`"
:ignoreDisabled="true" placeholder="请选择体型标签" allowClear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="emotionTags">
<template #label><span title="情绪标签">情绪标签</span></template>
<j-dict-select-tag type="list" v-model:value="queryParam.emotionTags" :orgCode="mainOrgCode"
:dictCode="`nu_config_emotion_tag,tag_name,id,del_flag = '0' and iz_enabled = 'Y' order by sort asc`"
:ignoreDisabled="true" placeholder="请选择情绪标签" allowClear />
</a-form-item>
</a-col> -->
<!-- <a-col :lg="6">
<a-form-item name="izEnabled">
<template #label><span title="是否启用">是否启用</span></template>
<j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
:ignoreDisabled="true" placeholder="请选择是否启用" allowClear />
</a-form-item>
</a-col> -->
<a-col :span="2">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div>
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
</div>
<!-- 表单区域 -->
<ConfigServiceDirectiveModal ref="registerModal" :mediaApiAddress="mediaApiAddress" @success="handleSuccess"
:mainOrgCode="mainOrgCode">
</ConfigServiceDirectiveModal>
</div>
</template>
<script lang="ts" name="serviceDirective-configServiceDirective" setup>
import { ref, reactive, watch, onMounted, computed } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, superQuerySchema } from './ConfigServiceDirective.data';
import { listByDS, idListByDS, deleteOne, batchDelete, getImportUrl, getExportUrl, tree } from '../ConfigServiceDirective.api';
import ConfigServiceDirectiveModal from './ConfigServiceDirectiveModal.vue'
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { cloneDeep } from "lodash-es";
import { getOrgInfo, getMediaUrlByOrgCode } from '@/api/common/api'
const props = defineProps({
mainOrgCode: '',
});
const mediaApiAddress = ref()//
const orgName = ref('')
const formRef = ref();
const queryParam = reactive<any>({
instructionTagId: '',
categoryId: '',
typeId: '',
izEnabled: 'Y',
});
watch(
() => queryParam.instructionTagId,
() => {
queryParam.categoryId = ''
queryParam.typeId = ''
}
)
//
watch(
() => queryParam.categoryId,
() => {
queryParam.typeId = ''
}
)
const registerModal = ref();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '服务指令',
api: listByDS,
columns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
scroll: { y: '58vh' },
immediate: false,
pagination: {
current: 1,
pageSize: 15,
pageSizeOptions: ['15', '50', '70', '100'],
},
actionColumn: {
width: 90,
fixed: 'right',
},
beforeFetch: async (params) => {
let rangerQuery = await setRangeQuery();
params.dataSourceCode = props.mainOrgCode
if (excludeIds.value.length) {
params.excludeIds = excludeIds.value.join(',')
}
params.izEnabled = 'Y'
rangerQuery.izEnabled = 'Y'
return Object.assign(params, rangerQuery);
},
},
exportConfig: {
name: "服务指令",
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs: 24,
sm: 4,
xl: 7,
xxl: 6
});
const wrapperCol = reactive({
xs: 24,
sm: 19,
xl: 17,
xxl: 18
});
/**
* 详情
*/
function handleDetail(record: Recordable) {
registerModal.value.disableSubmit = true;
registerModal.value.opeType = 'dmlook';
record.orgCode_ = props.mainOrgCode
registerModal.value.edit(record, false, true);
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
];
}
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
]
}
/**
* 查询
*/
function searchQuery(reloadTree = true) {
reload()
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields(); //
// queryParam
queryParam.instructionTagId = '';
queryParam.categoryId = '';
queryParam.typeId = '';
queryParam.directiveName = ''; //
queryParam.bodyTags = '';
queryParam.emotionTags = '';
queryParam.izEnabled = '';
//
reload()
}
let rangeField = 'tollPrice,comPrice,'
/**
* 设置范围查询条件
*/
async function setRangeQuery() {
let queryParamClone = cloneDeep(queryParam);
if (rangeField) {
let fieldsValue = rangeField.split(',');
fieldsValue.forEach(item => {
if (queryParamClone[item]) {
let range = queryParamClone[item];
queryParamClone[item + '_begin'] = range[0];
queryParamClone[item + '_end'] = range[1];
delete queryParamClone[item];
} else {
queryParamClone[item + '_begin'] = '';
queryParamClone[item + '_end'] = '';
}
})
}
return queryParamClone;
}
const excludeIds = ref('')
async function init() {
//
{
formRef.value.resetFields(); //
// queryParam
queryParam.instructionTagId = '';
queryParam.categoryId = '';
queryParam.typeId = '';
queryParam.directiveName = ''; //
queryParam.bodyTags = '';
queryParam.emotionTags = '';
queryParam.izEnabled = '';
selectedRowKeys.value = [];
}
let { ids } = getSelectedIds();
idListByDS({ dataSourceCode: 'master' }).then(res => {
// ID
let existingExcludeIds = res.records.map(item => item.id);
// ids
if (ids) {
const idsToAdd = ids.split(',');
existingExcludeIds = [...existingExcludeIds, ...idsToAdd];
}
// excludeIds.value
excludeIds.value = [...new Set(existingExcludeIds)];
reload();
})
}
/**
* 获取到已选择的所有id
*/
function getSelectedIds() {
const ids = selectedRowKeys.value.join(',');
const count = selectedRowKeys.value.length;
return { ids, count }; // ID
}
//
onMounted(() => {
getOrgInfo().then(res => {
orgName.value = res.orgName
})
getMediaUrlByOrgCode({ orgCode: props.mainOrgCode }).then(res => {
mediaApiAddress.value = res.mediaUrl
})
});
defineExpose({
getSelectedIds,
init
});
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
margin-bottom: 18px;
.table-page-search-submitButtons {
display: block;
margin-bottom: 0px;
white-space: nowrap;
}
.query-group-cust {
min-width: 100px !important;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help) {
margin-bottom: 18px;
height: 32px;
}
:deep(.ant-picker),
:deep(.ant-input-number) {
width: 100%;
}
}
audio::-webkit-media-controls-timeline {
display: none;
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
display: none;
}
.btnPrivate {
height: 34px;
margin-left: 4px;
}
.node-title {
display: inline-flex;
align-items: center;
}
.action-icon {
margin-left: 4px;
cursor: pointer;
}
:deep(.centered-dropdown) {
position: fixed;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
max-height: 80vh;
overflow-y: auto;
.ant-dropdown-menu {
max-height: 70vh;
overflow-y: auto;
}
}
</style>

View File

@ -124,7 +124,7 @@
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
这里是格式说明的具体内容
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />
@ -148,7 +148,7 @@
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
这里是格式说明的具体内容
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />
@ -172,7 +172,7 @@
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
这里是格式说明的具体内容
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />
@ -196,7 +196,7 @@
<span class="divider">|</span>
<a-tooltip placement="top">
<template #title>
这里是格式说明的具体内容
请上传相应格式类型的文件
</template>
<span>
<QuestionCircleOutlined style="margin-right: 0px;" />

View File

@ -14,7 +14,7 @@
</template>
</a-drawer>
<a-drawer :title="'标准指令库'" width="80vw" v-model:visible="dmVisible" :closable="true"
<a-drawer :title="'服务指令库'" width="80vw" v-model:visible="sdVisible" :closable="true"
:footer-style="{ textAlign: 'right' }" @close="handleCancelDM" :maskClosable="true">
<a-spin :spinning="loading">
<DirectiveRespositoryList ref="dmRef"></DirectiveRespositoryList>
@ -48,10 +48,10 @@ const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
const opeType = ref('')// add edit editMedia- look dmlook audit auditMedia-
const dmVisible = ref(false)
const sdVisible = ref(false)
function handleCancelDM() {
dmVisible.value = false
sdVisible.value = false
clearCache()
emit('success')
}
@ -157,7 +157,10 @@ function queryByIdFunc(id) {
}
function openDM() {
dmVisible.value = true
sdVisible.value = true
nextTick(() => {
dmRef.value.resetChoose();
});
}
function handlePullDM() {
@ -180,7 +183,7 @@ function handlePullDM() {
okText: '确认',
cancelText: '取消',
onOk: () => {
syncDirective(dmRef.value.targetOrgCode, { syncIds: selectedData.ids, })
syncDirective(dmRef.value.targetOrgCode, { syncIds: selectedData.ids, syncCode: dmRef.value.targetOrgCodeSV })
createMessage.success('指令拉取中请1分钟后重新查看')
// dmRef.value?.init()
handleCancelDM()

View File

@ -337,6 +337,10 @@ async function searchOrgCode() {
}
}
function resetChoose(){
}
//
onMounted(() => {
getOrgInfo().then(res => {
@ -351,6 +355,8 @@ defineExpose({
getSelectedIds,
init,
targetOrgCode,
targetOrgCodeSV,
resetChoose,
});
</script>