1）去除镜像、镜像日志、标准指令库功能
2）去除标准指令库概念先关逻辑及显示内容 3）增加操作日志功能：可查看所有业务机构服务指令新增/变更日志。新增数据查看详情时可查看当时添加的字段内容及资源内容、变更数据查看详情时可比对变更前后各字段及资源的内容。操作日志列表页可根据机构、操作类型进行筛选 4）增加镜像日志功能：可查看业务机构使用镜像码镜像指令时的日志，列表页可根据发起机构、被镜像机构、镜像日期、镜像码进行筛选；点击对应数据详情时可查看单次镜像了哪些指令
This commit is contained in:
parent
5f4f2ff901
commit
b097e8e51d
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,450 @@
|
|||
<template>
|
||||
<div class="clearfix">
|
||||
<a-upload-dragger :listType="listType" accept="image/*" :multiple="multiple" :action="currentUploadUrl"
|
||||
:data="{ biz: bizPath, ...extraUploadData }" :headers="headers" v-model:fileList="uploadFileList"
|
||||
:beforeUpload="beforeUpload" :disabled="disabled" :showUploadList="false" @change="handleChange"
|
||||
@preview="handlePreview">
|
||||
<div v-if="uploadVisible">
|
||||
<div v-if="listType == 'picture-card'">
|
||||
<div class="upload-area" style="padding: 20px;">
|
||||
<p class="upload-text">点击或者拖拽上传</p>
|
||||
<p class="upload-hint">
|
||||
<div class="upload-icon">
|
||||
<img src="../../../../../assets/upload/picture.png" style="width: 40px; height: 40px;" />
|
||||
</div>
|
||||
<span class="divider">文件大小不超过10MB</span>
|
||||
<span class="divider">|</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
请上传相应格式类型的文件
|
||||
</template>
|
||||
<span class="divider">
|
||||
<QuestionCircleOutlined style="margin-right: 0px;" />
|
||||
格式说明
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a-button v-if="listType == 'picture'" :disabled="disabled">
|
||||
<UploadOutlined></UploadOutlined>
|
||||
{{ text }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
<div class="custom-upload-list" v-if="uploadFileList.length > 0">
|
||||
<div v-for="(file, index) in uploadFileList" :key="file.uid">
|
||||
<div style="margin-top: 20px;">
|
||||
<img v-if="!!file?.response?.message" :src="opeMediaAddress + file?.response?.message"
|
||||
style="width: 200px; height: 200px;"></img>
|
||||
<img v-else :src="file.url ? opeMediaAddress + file.url : file.r" style="width: 200px; height: 200px;">
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
{{ file.name }}
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<a-button type="link" @click="handlePreview(file)">预览</a-button>
|
||||
<a-button type="link" danger @click="removeFile(index)" v-if="!props.disabled">删除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal :open="previewVisible" :width="modalWidth"
|
||||
:bodyStyle="{ padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }" :footer="null"
|
||||
@cancel="handleCancel">
|
||||
<img ref="previewImgRef" class="preview-img" :src="previewImage" @load="handleImageLoad" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, nextTick } from 'vue';
|
||||
import { LoadingOutlined, UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { useAttrs } from '/@/hooks/core/useAttrs';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { getFileAccessHttpUrl, getHeaders, getRandom } from '/@/utils/common/compUtils';
|
||||
import { uploadUrl } from '/@/api/common/api';
|
||||
import { getToken } from '/@/utils/auth';
|
||||
import { Upload } from 'ant-design-vue';
|
||||
|
||||
const { createMessage, createErrorModal } = useMessage();
|
||||
export default defineComponent({
|
||||
name: 'JImageUpload',
|
||||
components: { LoadingOutlined, UploadOutlined },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
//绑定值
|
||||
value: propTypes.oneOfType([propTypes.string, propTypes.array]),
|
||||
//按钮文本
|
||||
listType: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'picture-card',
|
||||
},
|
||||
//按钮文本
|
||||
text: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '上传',
|
||||
},
|
||||
//这个属性用于控制文件上传的业务路径
|
||||
bizPath: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'temp',
|
||||
},
|
||||
//是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
//上传数量
|
||||
fileMax: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1,
|
||||
},
|
||||
// 是否上传至管理平台
|
||||
toOpe: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
emits: ['options-change', 'change', 'update:value'],
|
||||
setup(props, { emit, refs }) {
|
||||
const emitData = ref<any[]>([]);
|
||||
const attrs = useAttrs();
|
||||
const [state] = useRuleFormItem(props, 'value', 'change', emitData);
|
||||
const currentUploadUrl = ref(uploadUrl);
|
||||
const extraUploadData = ref<Record<string, any>>({});
|
||||
const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
|
||||
//获取文件名
|
||||
const getFileName = (path) => {
|
||||
if (path.lastIndexOf('\\') >= 0) {
|
||||
let reg = new RegExp('\\\\', 'g');
|
||||
path = path.replace(reg, '/');
|
||||
}
|
||||
return path.substring(path.lastIndexOf('/') + 1);
|
||||
};
|
||||
//token
|
||||
const headers = getHeaders();
|
||||
//上传状态
|
||||
const loading = ref<boolean>(false);
|
||||
//是否是初始化加载
|
||||
const initTag = ref<boolean>(true);
|
||||
//文件列表
|
||||
let uploadFileList = ref<any[]>([]);
|
||||
//预览图
|
||||
const previewImage = ref<string | undefined>('');
|
||||
//预览框状态
|
||||
const previewVisible = ref<boolean>(false);
|
||||
|
||||
|
||||
//计算是否开启多图上传
|
||||
const multiple = computed(() => {
|
||||
return props['fileMax'] > 1 || props['fileMax'] === 0;
|
||||
});
|
||||
|
||||
//计算是否可以继续上传
|
||||
const uploadVisible = computed(() => {
|
||||
if (props['fileMax'] === 0) {
|
||||
return true;
|
||||
}
|
||||
return uploadFileList.value.length < props['fileMax'];
|
||||
});
|
||||
|
||||
function removeFile(index) {
|
||||
uploadFileList.value.splice(index, 1);
|
||||
}
|
||||
/**
|
||||
* 监听value变化
|
||||
*/
|
||||
watch(
|
||||
() => props.value,
|
||||
(val, prevCount) => {
|
||||
//update-begin---author:liusq ---date:20230601 for：【issues/556】JImageUpload组件value赋初始值没显示图片------------
|
||||
if (val && val instanceof Array) {
|
||||
val = val.join(',');
|
||||
}
|
||||
if (initTag.value == true) {
|
||||
initFileList(val);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
//update-end---author:liusq ---date:20230601 for：【issues/556】JImageUpload组件value赋初始值没显示图片------------
|
||||
);
|
||||
|
||||
/**
|
||||
* 初始化文件列表
|
||||
*/
|
||||
function initFileList(paths) {
|
||||
if (!paths || paths.length == 0) {
|
||||
uploadFileList.value = [];
|
||||
return;
|
||||
}
|
||||
let files = [];
|
||||
let arr = paths.split(',');
|
||||
arr.forEach((value) => {
|
||||
let url = getFileAccessHttpUrl(value);
|
||||
files.push({
|
||||
uid: getRandom(10),
|
||||
name: getFileName(value),
|
||||
status: 'done',
|
||||
url: url,
|
||||
response: {
|
||||
status: 'history',
|
||||
message: value,
|
||||
},
|
||||
});
|
||||
});
|
||||
uploadFileList.value = files;
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传前校验
|
||||
*/
|
||||
async function beforeUpload(file) {
|
||||
let fileType = file.type;
|
||||
if (fileType.indexOf('image') < 0) {
|
||||
createMessage.info('请上传图片');
|
||||
return false;
|
||||
}
|
||||
// 恢复默认
|
||||
currentUploadUrl.value = uploadUrl;
|
||||
extraUploadData.value = {};
|
||||
return true;
|
||||
}
|
||||
/**
|
||||
* 文件上传结果回调
|
||||
*/
|
||||
function handleChange({ file, fileList, event }) {
|
||||
console.log("🚀 ~ handleChange ~ file:", file)
|
||||
let fileType = file.type;
|
||||
if (fileType.indexOf('image') < 0) {
|
||||
uploadFileList.value = [];
|
||||
return false;
|
||||
}
|
||||
initTag.value = false;
|
||||
// update-begin--author:liaozhiyang---date:20231116---for：【issues/846】上传多个列表只显示一个
|
||||
// uploadFileList.value = fileList;
|
||||
if (file.status === 'error') {
|
||||
createMessage.error(`${file.name} 上传失败.`);
|
||||
}
|
||||
// update-begin--author:liaozhiyang---date:20240704---for：【TV360X-1640】上传图片大小超出限制显示优化
|
||||
if (file.status === 'done' && file.response.success === false) {
|
||||
const failIndex = uploadFileList.value.findIndex((item) => item.uid === file.uid);
|
||||
if (failIndex != -1) {
|
||||
uploadFileList.value.splice(failIndex, 1);
|
||||
}
|
||||
createMessage.warning(file.response.message);
|
||||
return;
|
||||
}
|
||||
// update-end--author:liaozhiyang---date:20240704---for：【TV360X-1640】上传图片大小超出限制显示优化
|
||||
let fileUrls = [];
|
||||
let noUploadingFileCount = 0;
|
||||
if (file.status != 'uploading') {
|
||||
fileList.forEach((file) => {
|
||||
if (file.status === 'done') {
|
||||
fileUrls.push(file.response.message);
|
||||
}
|
||||
if (file.status != 'uploading') {
|
||||
noUploadingFileCount++;
|
||||
}
|
||||
});
|
||||
if (file.status === 'removed') {
|
||||
handleDelete(file);
|
||||
}
|
||||
if (noUploadingFileCount == fileList.length) {
|
||||
state.value = fileUrls.join(',');
|
||||
emit('update:value', fileUrls.join(','));
|
||||
// update-begin---author:wangshuai ---date:20221121 for：[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------
|
||||
nextTick(() => {
|
||||
initTag.value = true;
|
||||
});
|
||||
// update-end---author:wangshuai ---date:20221121 for：[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < uploadFileList.value.length; i++) {
|
||||
if (uploadFileList.value[i].status === 'done') {
|
||||
uploadFileList.value[i].url = getFileAccessHttpUrl(uploadFileList.value[i].response.message);
|
||||
}
|
||||
}
|
||||
|
||||
// update-end--author:liaozhiyang---date:20231116---for：【issues/846】上传多个列表只显示一个
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除图片
|
||||
*/
|
||||
function handleDelete(file) {
|
||||
//如有需要新增 删除逻辑
|
||||
console.log(file);
|
||||
}
|
||||
const previewImgRef = ref<HTMLImageElement | null>(null);
|
||||
const modalWidth = ref('auto');
|
||||
/**
|
||||
* 预览图片
|
||||
*/
|
||||
async function handlePreview(file) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = (await getBase64(file.originFileObj)) as string;
|
||||
}
|
||||
previewImage.value = file.url || file.preview;
|
||||
previewVisible.value = true;
|
||||
}
|
||||
function getBase64(file: File) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
||||
|
||||
function getAvatarView() {
|
||||
if (uploadFileList.length > 0) {
|
||||
let url = uploadFileList[0].url;
|
||||
return getFileAccessHttpUrl(url, null);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
previewVisible.value = false;
|
||||
}
|
||||
|
||||
// 图片加载完成后计算宽高
|
||||
const handleImageLoad = () => {
|
||||
if (!previewImgRef.value) return;
|
||||
|
||||
const img = previewImgRef.value;
|
||||
const maxWidth = window.innerWidth * 0.9; // 最大宽度为屏幕90%
|
||||
const maxHeight = window.innerHeight * 0.8; // 最大高度为屏幕80%
|
||||
|
||||
// 计算适应比例
|
||||
const ratio = Math.min(maxWidth / img.naturalWidth, maxHeight / img.naturalHeight, 1);
|
||||
modalWidth.value = `${img.naturalWidth * ratio}px`;
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
state,
|
||||
attrs,
|
||||
previewImage,
|
||||
previewVisible,
|
||||
uploadFileList,
|
||||
multiple,
|
||||
headers,
|
||||
loading,
|
||||
uploadUrl,
|
||||
beforeUpload,
|
||||
uploadVisible,
|
||||
handlePreview,
|
||||
handleCancel,
|
||||
handleChange,
|
||||
handleImageLoad,
|
||||
previewImgRef,
|
||||
modalWidth,
|
||||
props,
|
||||
removeFile,
|
||||
currentUploadUrl,
|
||||
extraUploadData,
|
||||
opeMediaAddress,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 确保 Modal 内容区域填满 */
|
||||
.imgView .ant-modal-body {
|
||||
height: 80vh;
|
||||
/* 限制模态框高度，避免超出屏幕 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 图片容器 */
|
||||
.img-container {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 图片自适应 */
|
||||
.preview-img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
/* 保持比例，不拉伸 */
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-drag .ant-upload) {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-drag) {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 16px;
|
||||
color: rgba(74, 69, 69, 0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-size: 12px;
|
||||
color: rgb(189, 189, 189);
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item) {
|
||||
position: relative;
|
||||
height: 240px !important;
|
||||
padding: 8px;
|
||||
border: 0px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: #f1f7ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item .ant-upload-list-item-thumbnail) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 200px !important;
|
||||
height: 200px !important;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-name) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5714285714285714;
|
||||
transition: all 0.3s;
|
||||
margin-top: -20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,599 @@
|
|||
<template>
|
||||
<div ref="containerRef" :class="`${prefixCls}-container`">
|
||||
<a-upload-dragger accept="audio/mp3" :headers="headers" :multiple="multiple" :action="currentUploadUrl"
|
||||
:data="{ biz: bizPath, ...extraUploadData }" :fileList="fileList" :disabled="disabled" v-bind="bindProps"
|
||||
:beforeUpload="beforeUpload" :showUploadList="false" @remove="onRemove" @change="onFileChange"
|
||||
@preview="onFilePreview">
|
||||
<template v-if="isImageMode">
|
||||
<div v-if="!isMaxCount">
|
||||
<Icon icon="ant-design:plus-outlined" />
|
||||
<div class="ant-upload-text">{{ text }}123</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="upload-area" style="padding: 20px;" v-else-if="uploadVisible" :disabled="buttonDisabled">
|
||||
<p class="upload-text">点击或者拖拽上传</p>
|
||||
<p class="upload-hint">
|
||||
<div class="upload-icon">
|
||||
<img src="../../../../../../assets/upload/mp3.png" style="width: 40px; height: 40px;" />
|
||||
</div>
|
||||
<span class="divider">文件大小不超过10MB</span>
|
||||
<span class="divider">|</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
请上传相应格式类型的文件
|
||||
</template>
|
||||
<span class="divider">
|
||||
<QuestionCircleOutlined style="margin-right: 0px;" />
|
||||
格式说明
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
<!-- 文件回显 -->
|
||||
<div class="custom-upload-list" v-if="fileList.length > 0">
|
||||
<div v-for="(file, index) in fileList" :key="file.uid">
|
||||
<div style="margin-top: 20px;">
|
||||
<audio ref="audioPlayer" controls v-if="!!file?.response?.message"
|
||||
:src="opeMediaAddress + file?.response?.message"></audio>
|
||||
<audio ref="audioPlayer" controls v-else :src="file.url ? opeMediaAddress + file.url : file.r"></audio>
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
{{ file.name }}
|
||||
</div>
|
||||
<div style="margin-top: 20px;" v-if="!props.disabled">
|
||||
<a-button type="link" danger @click="removeFile(index)">删除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, watch, nextTick, createApp, unref } from 'vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { getToken } from '/@/utils/auth';
|
||||
import { uploadUrl } from '/@/api/common/api';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { createImgPreview } from '/@/components/Preview/index';
|
||||
import { useAttrs } from '/@/hooks/core/useAttrs';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { UploadTypeEnum } from './upload.data';
|
||||
import { getFileAccessHttpUrl, getHeaders } from '/@/utils/common/compUtils';
|
||||
import UploadItemActions from './components/UploadItemActions.vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { Upload } from 'ant-design-vue';
|
||||
|
||||
const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
const { prefixCls } = useDesign('j-upload');
|
||||
const attrs = useAttrs();
|
||||
const emit = defineEmits(['change', 'update:value']);
|
||||
const props = defineProps({
|
||||
value: propTypes.oneOfType([propTypes.string, propTypes.array]),
|
||||
text: propTypes.string.def('上传'),
|
||||
fileType: propTypes.string.def(UploadTypeEnum.all),
|
||||
/*这个属性用于控制文件上传的业务路径*/
|
||||
bizPath: propTypes.string.def('temp'),
|
||||
/**
|
||||
* 是否返回url，
|
||||
* true：仅返回url
|
||||
* false：返回fileName filePath fileSize
|
||||
*/
|
||||
returnUrl: propTypes.bool.def(true),
|
||||
// 最大上传数量
|
||||
maxCount: propTypes.number.def(0),
|
||||
buttonVisible: propTypes.bool.def(true),
|
||||
multiple: propTypes.bool.def(true),
|
||||
// 是否显示左右移动按钮
|
||||
mover: propTypes.bool.def(true),
|
||||
// 是否显示下载按钮
|
||||
download: propTypes.bool.def(true),
|
||||
// 删除时是否显示确认框
|
||||
removeConfirm: propTypes.bool.def(false),
|
||||
beforeUpload: propTypes.func,
|
||||
disabled: propTypes.bool.def(false),
|
||||
// 替换前一个文件，用于超出最大数量依然允许上传
|
||||
replaceLastOne: propTypes.bool.def(false),
|
||||
// 是否上传至管理平台
|
||||
toOpe: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const headers = getHeaders();
|
||||
const fileList = ref<any[]>([]);
|
||||
const uploadGoOn = ref<boolean>(true);
|
||||
const currentUploadUrl = ref(uploadUrl);
|
||||
const extraUploadData = ref<Record<string, any>>({});
|
||||
// refs
|
||||
const containerRef = ref();
|
||||
// 是否达到了最大上传数量
|
||||
const isMaxCount = computed(() => props.maxCount > 0 && fileList.value.length >= props.maxCount);
|
||||
// 当前是否是上传图片模式
|
||||
const isImageMode = computed(() => props.fileType === UploadTypeEnum.image);
|
||||
// 上传按钮是否禁用
|
||||
const buttonDisabled = computed(() => {
|
||||
if (props.disabled === true) {
|
||||
return true;
|
||||
}
|
||||
if (isMaxCount.value === true) {
|
||||
if (props.replaceLastOne === true) {
|
||||
return false
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false
|
||||
});
|
||||
// 合并 props 和 attrs
|
||||
const bindProps = computed(() => {
|
||||
//update-begin-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
|
||||
const bind: any = Object.assign({}, props, unref(attrs));
|
||||
//update-end-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
|
||||
|
||||
bind.name = 'file';
|
||||
bind.listType = isImageMode.value ? 'picture-card' : 'text';
|
||||
bind.class = [bind.class, { 'upload-disabled': props.disabled }];
|
||||
bind.data = { biz: props.bizPath, ...bind.data, ...extraUploadData.value };
|
||||
//update-begin-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程
|
||||
if (!bind.beforeUpload) {
|
||||
bind.beforeUpload = onBeforeUpload;
|
||||
}
|
||||
//update-end-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程
|
||||
// 如果当前是图片上传模式，就只能上传图片
|
||||
if (isImageMode.value && !bind.accept) {
|
||||
bind.accept = 'image/*';
|
||||
}
|
||||
return bind;
|
||||
});
|
||||
function removeFile(index) {
|
||||
fileList.value.splice(index, 1);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(val) => {
|
||||
if (Array.isArray(val)) {
|
||||
if (props.returnUrl) {
|
||||
parsePathsValue(val.join(','));
|
||||
} else {
|
||||
parseArrayValue(val);
|
||||
}
|
||||
} else {
|
||||
//update-begin---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
if (props.returnUrl) {
|
||||
parsePathsValue(val);
|
||||
} else {
|
||||
val && parseArrayValue(JSON.parse(val));
|
||||
}
|
||||
//update-end---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(fileList, () => nextTick(() => addActionsListener()), { immediate: true });
|
||||
|
||||
const antUploadItemCls = 'ant-upload-list-item';
|
||||
|
||||
// Listener
|
||||
function addActionsListener() {
|
||||
if (!isImageMode.value) {
|
||||
return;
|
||||
}
|
||||
const uploadItems = containerRef.value ? containerRef.value.getElementsByClassName(antUploadItemCls) : null;
|
||||
if (!uploadItems || uploadItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
for (const uploadItem of uploadItems) {
|
||||
let hasActions = uploadItem.getAttribute('data-has-actions') === 'true';
|
||||
if (!hasActions) {
|
||||
uploadItem.addEventListener('mouseover', onAddActionsButton);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加可左右移动的按钮
|
||||
function onAddActionsButton(event) {
|
||||
const getUploadItem = () => {
|
||||
for (const path of event.path) {
|
||||
if (path.classList.contains(antUploadItemCls)) {
|
||||
return path;
|
||||
} else if (path.classList.contains(`${prefixCls}-container`)) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const uploadItem = getUploadItem();
|
||||
if (!uploadItem) {
|
||||
return;
|
||||
}
|
||||
const actions = uploadItem.getElementsByClassName('ant-upload-list-item-actions');
|
||||
if (!actions || actions.length === 0) {
|
||||
return;
|
||||
}
|
||||
// 添加操作按钮
|
||||
const div = document.createElement('div');
|
||||
div.className = 'upload-actions-container';
|
||||
createApp(UploadItemActions, {
|
||||
element: uploadItem,
|
||||
fileList: fileList,
|
||||
mover: props.mover,
|
||||
download: props.download,
|
||||
emitValue: emitValue,
|
||||
}).mount(div);
|
||||
actions[0].appendChild(div);
|
||||
uploadItem.setAttribute('data-has-actions', 'true');
|
||||
uploadItem.removeEventListener('mouseover', onAddActionsButton);
|
||||
}
|
||||
|
||||
// 解析数据库存储的逗号分割
|
||||
function parsePathsValue(paths) {
|
||||
if (!paths || paths.length == 0) {
|
||||
fileList.value = [];
|
||||
return;
|
||||
}
|
||||
let list: any[] = [];
|
||||
for (const item of paths.split(',')) {
|
||||
let url = getFileAccessHttpUrl(item);
|
||||
list.push({
|
||||
uid: uidGenerator(),
|
||||
name: getFileName(item),
|
||||
status: 'done',
|
||||
url: url,
|
||||
response: { status: 'history', message: item },
|
||||
});
|
||||
}
|
||||
fileList.value = list;
|
||||
}
|
||||
|
||||
// 解析数组值
|
||||
function parseArrayValue(array) {
|
||||
if (!array || array.length == 0) {
|
||||
fileList.value = [];
|
||||
return;
|
||||
}
|
||||
let list: any[] = [];
|
||||
for (const item of array) {
|
||||
let url = getFileAccessHttpUrl(item.filePath);
|
||||
list.push({
|
||||
uid: uidGenerator(),
|
||||
name: item.fileName,
|
||||
url: url,
|
||||
status: 'done',
|
||||
response: { status: 'history', message: item.filePath },
|
||||
});
|
||||
}
|
||||
fileList.value = list;
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传前校验
|
||||
*/
|
||||
async function beforeUpload(file) {
|
||||
let fileType = file.type;
|
||||
console.log("🚀 ~ beforeUpload ~ file:", file)
|
||||
if (fileType.indexOf('audio') < 0) {
|
||||
createMessage.info('请上传MP3文件');
|
||||
fileList.value = [];
|
||||
return false;
|
||||
}
|
||||
// 恢复默认
|
||||
currentUploadUrl.value = uploadUrl;
|
||||
extraUploadData.value = { biz: props.bizPath };
|
||||
return true;
|
||||
}
|
||||
// 文件上传之前的操作
|
||||
function onBeforeUpload(file) {
|
||||
uploadGoOn.value = true;
|
||||
if (isImageMode.value) {
|
||||
if (file.type.indexOf('image') < 0) {
|
||||
createMessage.warning('请上传图片');
|
||||
uploadGoOn.value = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 扩展 beforeUpload 验证
|
||||
if (typeof props.beforeUpload === 'function') {
|
||||
return props.beforeUpload(file);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// 删除处理事件
|
||||
function onRemove() {
|
||||
if (props.removeConfirm) {
|
||||
return new Promise((resolve) => {
|
||||
createConfirm({
|
||||
title: '删除',
|
||||
content: `确定要删除这${isImageMode.value ? '张图片' : '个文件'}吗？`,
|
||||
iconType: 'warning',
|
||||
onOk: () => resolve(true),
|
||||
onCancel: () => resolve(false),
|
||||
});
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// upload组件change事件
|
||||
function onFileChange(info) {
|
||||
console.log("🚀 ~ onFileChange ~ info:", info.file)
|
||||
var file = info.file;
|
||||
let fileType = file.type;
|
||||
if (fileType.indexOf('audio') < 0) {
|
||||
fileList.value = [];
|
||||
return false;
|
||||
}
|
||||
if (!info.file.status && uploadGoOn.value === false) {
|
||||
info.fileList.pop();
|
||||
}
|
||||
let fileListTemp = info.fileList;
|
||||
// 限制最大上传数
|
||||
if (props.maxCount > 0) {
|
||||
let count = fileListTemp.length;
|
||||
if (count >= props.maxCount) {
|
||||
let diffNum = props.maxCount - fileListTemp.length;
|
||||
if (diffNum >= 0) {
|
||||
fileListTemp = fileListTemp.slice(-props.maxCount);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
let successFileList = [];
|
||||
if (info.file.response.success) {
|
||||
successFileList = fileListTemp.map((file) => {
|
||||
if (file.response) {
|
||||
let reUrl = file.response.message;
|
||||
file.url = getFileAccessHttpUrl(reUrl);
|
||||
}
|
||||
return file;
|
||||
});
|
||||
} else {
|
||||
successFileList = fileListTemp.filter(item => {
|
||||
return item.uid != info.file.uid;
|
||||
});
|
||||
createMessage.error(`${info.file.name} 上传失败.`);
|
||||
}
|
||||
fileListTemp = successFileList;
|
||||
} else if (info.file.status === 'error') {
|
||||
createMessage.error(`${info.file.name} 上传失败.`);
|
||||
}
|
||||
// update-begin--author:liaozhiyang---date:20240628---for：【issues/1273】上传组件JUpload配置beforeUpload阻止了上传，前端页面中还是显示缩略图
|
||||
// beforeUpload 返回false，则没有status
|
||||
info.file.status && (fileList.value = fileListTemp);
|
||||
// update-end--author:liaozhiyang---date:20240628---for：【issues/1273】上传组件JUpload配置beforeUpload阻止了上传，前端页面中还是显示缩略图
|
||||
if (info.file.status === 'done' || info.file.status === 'removed') {
|
||||
//returnUrl为true时仅返回文件路径
|
||||
if (props.returnUrl) {
|
||||
handlePathChange();
|
||||
} else {
|
||||
//returnUrl为false时返回文件名称、文件路径及文件大小
|
||||
let newFileList: any[] = [];
|
||||
for (const item of fileListTemp) {
|
||||
if (item.status === 'done') {
|
||||
let fileJson = {
|
||||
fileName: item.name,
|
||||
filePath: item.response.message,
|
||||
fileSize: item.size,
|
||||
};
|
||||
newFileList.push(fileJson);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
//update-begin---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
emitValue(JSON.stringify(newFileList));
|
||||
//update-end---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handlePathChange() {
|
||||
let uploadFiles = fileList.value;
|
||||
let path = '';
|
||||
if (!uploadFiles || uploadFiles.length == 0) {
|
||||
path = '';
|
||||
}
|
||||
let pathList: string[] = [];
|
||||
for (const item of uploadFiles) {
|
||||
if (item.status === 'done') {
|
||||
pathList.push(item.response.message);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (pathList.length > 0) {
|
||||
path = pathList.join(',');
|
||||
}
|
||||
emitValue(path);
|
||||
}
|
||||
|
||||
// 预览文件、图片
|
||||
function onFilePreview(file) {
|
||||
if (isImageMode.value) {
|
||||
createImgPreview({ imageList: [file.url], maskClosable: true });
|
||||
} else {
|
||||
window.open(file.url);
|
||||
}
|
||||
}
|
||||
|
||||
function emitValue(value) {
|
||||
emit('change', value);
|
||||
emit('update:value', value);
|
||||
}
|
||||
|
||||
function uidGenerator() {
|
||||
return '-' + parseInt(Math.random() * 10000 + 1, 10);
|
||||
}
|
||||
|
||||
function getFileName(path) {
|
||||
if (path.lastIndexOf('\\') >= 0) {
|
||||
let reg = new RegExp('\\\\', 'g');
|
||||
path = path.replace(reg, '/');
|
||||
}
|
||||
return path.substring(path.lastIndexOf('/') + 1);
|
||||
}
|
||||
//计算是否可以继续上传
|
||||
const uploadVisible = computed(() => {
|
||||
if (props['maxCount'] === 0) {
|
||||
return true;
|
||||
}
|
||||
return fileList.value.length < props['maxCount'];
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
addActionsListener,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
//noinspection LessUnresolvedVariable
|
||||
@prefix-cls: ~'@{namespace}-j-upload';
|
||||
|
||||
.@{prefix-cls} {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
.upload-disabled {
|
||||
.ant-upload-list-item {
|
||||
.anticon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.anticon-delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* update-begin-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全*/
|
||||
.upload-download-handler {
|
||||
right: 6px !important;
|
||||
}
|
||||
|
||||
/* update-end-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全*/
|
||||
}
|
||||
|
||||
.ant-upload-text-icon {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.ant-upload-list-item {
|
||||
.upload-actions-container {
|
||||
position: absolute;
|
||||
top: -31px;
|
||||
left: -18px;
|
||||
z-index: 11;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
|
||||
a {
|
||||
opacity: 0.9;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.anticon {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-mover-handler,
|
||||
.upload-download-handler {
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.upload-mover-handler {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.upload-download-handler {
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload-wrapper .ant-upload-drag .ant-upload {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.ant-upload-drag {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 16px;
|
||||
color: rgba(74, 69, 69, 0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-size: 12px;
|
||||
color: rgb(189, 189, 189);
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item) {
|
||||
position: relative;
|
||||
height: 240px !important;
|
||||
padding: 8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: #f1f7ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item .ant-upload-list-item-thumbnail) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 200px !important;
|
||||
height: 200px !important;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-name) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5714285714285714;
|
||||
transition: all 0.3s;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.custom-upload-list {
|
||||
border: 0px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: #f1f7ff;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,608 @@
|
|||
<template>
|
||||
<div ref="containerRef" :class="`${prefixCls}-container`">
|
||||
<a-upload-dragger accept="video/mp4" :headers="headers" :multiple="multiple" :action="currentUploadUrl"
|
||||
:data="{ biz: bizPath, ...extraUploadData }" :fileList="fileList" :disabled="disabled" v-bind="bindProps"
|
||||
:beforeUpload="beforeUpload" :showUploadList="false" @remove="onRemove" @change="onFileChange"
|
||||
@preview="onFilePreview">
|
||||
<template v-if="isImageMode">
|
||||
<div v-if="!isMaxCount">
|
||||
<Icon icon="ant-design:plus-outlined" />
|
||||
<div class="ant-upload-text">{{ text }}123</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="upload-area" style="padding: 20px;" v-else-if="uploadVisible" :disabled="buttonDisabled">
|
||||
<p class="upload-text">点击或者拖拽上传</p>
|
||||
<p class="upload-hint">
|
||||
<div class="upload-icon">
|
||||
<img src="../../../../../../assets/upload/mp4.png" style="width: 40px; height: 40px;" />
|
||||
</div>
|
||||
<span class="divider">文件大小不超过10MB</span>
|
||||
<span class="divider">|</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
请上传相应格式类型的文件
|
||||
</template>
|
||||
<span class="divider">
|
||||
<QuestionCircleOutlined style="margin-right: 0px;" />
|
||||
格式说明
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
<!-- 文件回显 -->
|
||||
<div class="custom-upload-list" v-if="fileList.length > 0">
|
||||
<div v-for="(file, index) in fileList" :key="file.uid">
|
||||
<div style="margin-top: 20px;">
|
||||
<video controls style="max-width: 100%; max-height: 300px;">
|
||||
<source v-if="!!file?.response?.message" :src="opeMediaAddress + file?.response?.message" type="video/mp4">
|
||||
<source v-else :src="opeMediaAddress + file.url" type="video/mp4">
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
{{ file.name }}
|
||||
</div>
|
||||
<div style="margin-top: 20px;" v-if="!props.disabled">
|
||||
<a-button type="link" danger @click="removeFile(index)">删除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, watch, nextTick, createApp, unref } from 'vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { getToken } from '/@/utils/auth';
|
||||
import { uploadUrl } from '/@/api/common/api';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { createImgPreview } from '/@/components/Preview/index';
|
||||
import { useAttrs } from '/@/hooks/core/useAttrs';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { UploadTypeEnum } from './upload.data';
|
||||
import { getFileAccessHttpUrl, getHeaders } from '/@/utils/common/compUtils';
|
||||
import UploadItemActions from './components/UploadItemActions.vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { Upload } from 'ant-design-vue';
|
||||
|
||||
const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
const { prefixCls } = useDesign('j-upload');
|
||||
const attrs = useAttrs();
|
||||
const emit = defineEmits(['change', 'update:value']);
|
||||
const props = defineProps({
|
||||
value: propTypes.oneOfType([propTypes.string, propTypes.array]),
|
||||
text: propTypes.string.def('上传'),
|
||||
fileType: propTypes.string.def(UploadTypeEnum.all),
|
||||
/*这个属性用于控制文件上传的业务路径*/
|
||||
bizPath: propTypes.string.def('temp'),
|
||||
/**
|
||||
* 是否返回url，
|
||||
* true：仅返回url
|
||||
* false：返回fileName filePath fileSize
|
||||
*/
|
||||
returnUrl: propTypes.bool.def(true),
|
||||
// 最大上传数量
|
||||
maxCount: propTypes.number.def(0),
|
||||
buttonVisible: propTypes.bool.def(true),
|
||||
multiple: propTypes.bool.def(true),
|
||||
// 是否显示左右移动按钮
|
||||
mover: propTypes.bool.def(true),
|
||||
// 是否显示下载按钮
|
||||
download: propTypes.bool.def(true),
|
||||
// 删除时是否显示确认框
|
||||
removeConfirm: propTypes.bool.def(false),
|
||||
beforeUpload: propTypes.func,
|
||||
disabled: propTypes.bool.def(false),
|
||||
// 替换前一个文件，用于超出最大数量依然允许上传
|
||||
replaceLastOne: propTypes.bool.def(false),
|
||||
// 是否上传至管理平台
|
||||
toOpe: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const headers = getHeaders();
|
||||
const fileList = ref<any[]>([]);
|
||||
const uploadGoOn = ref<boolean>(true);
|
||||
const currentUploadUrl = ref(uploadUrl);
|
||||
const extraUploadData = ref<Record<string, any>>({});
|
||||
// refs
|
||||
const containerRef = ref();
|
||||
// 是否达到了最大上传数量
|
||||
const isMaxCount = computed(() => props.maxCount > 0 && fileList.value.length >= props.maxCount);
|
||||
// 当前是否是上传图片模式
|
||||
const isImageMode = computed(() => props.fileType === UploadTypeEnum.image);
|
||||
// 上传按钮是否禁用
|
||||
const buttonDisabled = computed(() => {
|
||||
if (props.disabled === true) {
|
||||
return true;
|
||||
}
|
||||
if (isMaxCount.value === true) {
|
||||
if (props.replaceLastOne === true) {
|
||||
return false
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false
|
||||
});
|
||||
// 合并 props 和 attrs
|
||||
const bindProps = computed(() => {
|
||||
//update-begin-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
|
||||
const bind: any = Object.assign({}, props, unref(attrs));
|
||||
//update-end-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
|
||||
|
||||
bind.name = 'file';
|
||||
bind.listType = isImageMode.value ? 'picture-card' : 'text';
|
||||
bind.class = [bind.class, { 'upload-disabled': props.disabled }];
|
||||
bind.data = { biz: props.bizPath, ...bind.data, ...extraUploadData.value };
|
||||
//update-begin-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程
|
||||
if (!bind.beforeUpload) {
|
||||
bind.beforeUpload = onBeforeUpload;
|
||||
}
|
||||
//update-end-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程
|
||||
// 如果当前是图片上传模式，就只能上传图片
|
||||
if (isImageMode.value && !bind.accept) {
|
||||
bind.accept = 'image/*';
|
||||
}
|
||||
return bind;
|
||||
});
|
||||
function removeFile(index) {
|
||||
fileList.value.splice(index, 1);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(val) => {
|
||||
if (Array.isArray(val)) {
|
||||
if (props.returnUrl) {
|
||||
parsePathsValue(val.join(','));
|
||||
} else {
|
||||
parseArrayValue(val);
|
||||
}
|
||||
} else {
|
||||
//update-begin---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
if (props.returnUrl) {
|
||||
parsePathsValue(val);
|
||||
} else {
|
||||
val && parseArrayValue(JSON.parse(val));
|
||||
}
|
||||
//update-end---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(fileList, () => nextTick(() => addActionsListener()), { immediate: true });
|
||||
|
||||
const antUploadItemCls = 'ant-upload-list-item';
|
||||
|
||||
// Listener
|
||||
function addActionsListener() {
|
||||
if (!isImageMode.value) {
|
||||
return;
|
||||
}
|
||||
const uploadItems = containerRef.value ? containerRef.value.getElementsByClassName(antUploadItemCls) : null;
|
||||
if (!uploadItems || uploadItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
for (const uploadItem of uploadItems) {
|
||||
let hasActions = uploadItem.getAttribute('data-has-actions') === 'true';
|
||||
if (!hasActions) {
|
||||
uploadItem.addEventListener('mouseover', onAddActionsButton);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传前校验
|
||||
*/
|
||||
async function beforeUpload(file) {
|
||||
let fileType = file.type;
|
||||
console.log("🚀 ~ beforeUpload ~ fileType:", fileType)
|
||||
if (fileType.indexOf('video') < 0) {
|
||||
createMessage.info('请上传MP4文件');
|
||||
fileList.value = [];
|
||||
return false;
|
||||
}
|
||||
// 恢复默认
|
||||
currentUploadUrl.value = uploadUrl;
|
||||
extraUploadData.value = { biz: props.bizPath };
|
||||
return true;
|
||||
}
|
||||
// 添加可左右移动的按钮
|
||||
function onAddActionsButton(event) {
|
||||
const getUploadItem = () => {
|
||||
for (const path of event.path) {
|
||||
if (path.classList.contains(antUploadItemCls)) {
|
||||
return path;
|
||||
} else if (path.classList.contains(`${prefixCls}-container`)) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const uploadItem = getUploadItem();
|
||||
if (!uploadItem) {
|
||||
return;
|
||||
}
|
||||
const actions = uploadItem.getElementsByClassName('ant-upload-list-item-actions');
|
||||
if (!actions || actions.length === 0) {
|
||||
return;
|
||||
}
|
||||
// 添加操作按钮
|
||||
const div = document.createElement('div');
|
||||
div.className = 'upload-actions-container';
|
||||
createApp(UploadItemActions, {
|
||||
element: uploadItem,
|
||||
fileList: fileList,
|
||||
mover: props.mover,
|
||||
download: props.download,
|
||||
emitValue: emitValue,
|
||||
}).mount(div);
|
||||
actions[0].appendChild(div);
|
||||
uploadItem.setAttribute('data-has-actions', 'true');
|
||||
uploadItem.removeEventListener('mouseover', onAddActionsButton);
|
||||
}
|
||||
|
||||
// 解析数据库存储的逗号分割
|
||||
function parsePathsValue(paths) {
|
||||
if (!paths || paths.length == 0) {
|
||||
fileList.value = [];
|
||||
return;
|
||||
}
|
||||
let list: any[] = [];
|
||||
for (const item of paths.split(',')) {
|
||||
let url = getFileAccessHttpUrl(item);
|
||||
list.push({
|
||||
uid: uidGenerator(),
|
||||
name: getFileName(item),
|
||||
status: 'done',
|
||||
url: url,
|
||||
response: { status: 'history', message: item },
|
||||
});
|
||||
}
|
||||
fileList.value = list;
|
||||
}
|
||||
|
||||
function transUrl(record) {
|
||||
console.log("🚀 ~ transUrl ~ record:", record)
|
||||
if (record == 'local') {
|
||||
return getFileAccessHttpUrl(record)
|
||||
} else {
|
||||
return record
|
||||
}
|
||||
}
|
||||
// 解析数组值
|
||||
function parseArrayValue(array) {
|
||||
if (!array || array.length == 0) {
|
||||
fileList.value = [];
|
||||
return;
|
||||
}
|
||||
let list: any[] = [];
|
||||
for (const item of array) {
|
||||
let url = getFileAccessHttpUrl(item.filePath);
|
||||
list.push({
|
||||
uid: uidGenerator(),
|
||||
name: item.fileName,
|
||||
url: url,
|
||||
status: 'done',
|
||||
response: { status: 'history', message: item.filePath },
|
||||
});
|
||||
}
|
||||
fileList.value = list;
|
||||
}
|
||||
|
||||
// 文件上传之前的操作
|
||||
function onBeforeUpload(file) {
|
||||
uploadGoOn.value = true;
|
||||
if (isImageMode.value) {
|
||||
if (file.type.indexOf('image') < 0) {
|
||||
createMessage.warning('请上传图片');
|
||||
uploadGoOn.value = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 扩展 beforeUpload 验证
|
||||
if (typeof props.beforeUpload === 'function') {
|
||||
return props.beforeUpload(file);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// 删除处理事件
|
||||
function onRemove() {
|
||||
if (props.removeConfirm) {
|
||||
return new Promise((resolve) => {
|
||||
createConfirm({
|
||||
title: '删除',
|
||||
content: `确定要删除这${isImageMode.value ? '张图片' : '个文件'}吗？`,
|
||||
iconType: 'warning',
|
||||
onOk: () => resolve(true),
|
||||
onCancel: () => resolve(false),
|
||||
});
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// upload组件change事件
|
||||
function onFileChange(info) {
|
||||
var file = info.file;
|
||||
let fileType = file.type;
|
||||
if (fileType.indexOf('video') < 0) {
|
||||
fileList.value = [];
|
||||
return false;
|
||||
}
|
||||
if (!info.file.status && uploadGoOn.value === false) {
|
||||
info.fileList.pop();
|
||||
}
|
||||
let fileListTemp = info.fileList;
|
||||
// 限制最大上传数
|
||||
if (props.maxCount > 0) {
|
||||
let count = fileListTemp.length;
|
||||
if (count >= props.maxCount) {
|
||||
let diffNum = props.maxCount - fileListTemp.length;
|
||||
if (diffNum >= 0) {
|
||||
fileListTemp = fileListTemp.slice(-props.maxCount);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
let successFileList = [];
|
||||
if (info.file.response.success) {
|
||||
successFileList = fileListTemp.map((file) => {
|
||||
if (file.response) {
|
||||
let reUrl = file.response.message;
|
||||
file.url = getFileAccessHttpUrl(reUrl);
|
||||
}
|
||||
return file;
|
||||
});
|
||||
} else {
|
||||
successFileList = fileListTemp.filter(item => {
|
||||
return item.uid != info.file.uid;
|
||||
});
|
||||
createMessage.error(`${info.file.name} 上传失败.`);
|
||||
}
|
||||
fileListTemp = successFileList;
|
||||
} else if (info.file.status === 'error') {
|
||||
createMessage.error(`${info.file.name} 上传失败.`);
|
||||
}
|
||||
// update-begin--author:liaozhiyang---date:20240628---for：【issues/1273】上传组件JUpload配置beforeUpload阻止了上传，前端页面中还是显示缩略图
|
||||
// beforeUpload 返回false，则没有status
|
||||
info.file.status && (fileList.value = fileListTemp);
|
||||
// update-end--author:liaozhiyang---date:20240628---for：【issues/1273】上传组件JUpload配置beforeUpload阻止了上传，前端页面中还是显示缩略图
|
||||
if (info.file.status === 'done' || info.file.status === 'removed') {
|
||||
//returnUrl为true时仅返回文件路径
|
||||
if (props.returnUrl) {
|
||||
handlePathChange();
|
||||
} else {
|
||||
//returnUrl为false时返回文件名称、文件路径及文件大小
|
||||
let newFileList: any[] = [];
|
||||
for (const item of fileListTemp) {
|
||||
if (item.status === 'done') {
|
||||
let fileJson = {
|
||||
fileName: item.name,
|
||||
filePath: item.response.message,
|
||||
fileSize: item.size,
|
||||
};
|
||||
newFileList.push(fileJson);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
//update-begin---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
emitValue(JSON.stringify(newFileList));
|
||||
//update-end---author:liusq ---date:20230914 for：[issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handlePathChange() {
|
||||
let uploadFiles = fileList.value;
|
||||
let path = '';
|
||||
if (!uploadFiles || uploadFiles.length == 0) {
|
||||
path = '';
|
||||
}
|
||||
let pathList: string[] = [];
|
||||
for (const item of uploadFiles) {
|
||||
if (item.status === 'done') {
|
||||
pathList.push(item.response.message);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (pathList.length > 0) {
|
||||
path = pathList.join(',');
|
||||
}
|
||||
emitValue(path);
|
||||
}
|
||||
|
||||
// 预览文件、图片
|
||||
function onFilePreview(file) {
|
||||
if (isImageMode.value) {
|
||||
createImgPreview({ imageList: [file.url], maskClosable: true });
|
||||
} else {
|
||||
window.open(file.url);
|
||||
}
|
||||
}
|
||||
|
||||
function emitValue(value) {
|
||||
emit('change', value);
|
||||
emit('update:value', value);
|
||||
}
|
||||
|
||||
function uidGenerator() {
|
||||
return '-' + parseInt(Math.random() * 10000 + 1, 10);
|
||||
}
|
||||
|
||||
function getFileName(path) {
|
||||
if (path.lastIndexOf('\\') >= 0) {
|
||||
let reg = new RegExp('\\\\', 'g');
|
||||
path = path.replace(reg, '/');
|
||||
}
|
||||
return path.substring(path.lastIndexOf('/') + 1);
|
||||
}
|
||||
//计算是否可以继续上传
|
||||
const uploadVisible = computed(() => {
|
||||
if (props['maxCount'] === 0) {
|
||||
return true;
|
||||
}
|
||||
return fileList.value.length < props['maxCount'];
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
addActionsListener,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
//noinspection LessUnresolvedVariable
|
||||
@prefix-cls: ~'@{namespace}-j-upload';
|
||||
|
||||
.@{prefix-cls} {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
.upload-disabled {
|
||||
.ant-upload-list-item {
|
||||
.anticon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.anticon-delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* update-begin-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全*/
|
||||
.upload-download-handler {
|
||||
right: 6px !important;
|
||||
}
|
||||
|
||||
/* update-end-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全*/
|
||||
}
|
||||
|
||||
.ant-upload-text-icon {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.ant-upload-list-item {
|
||||
.upload-actions-container {
|
||||
position: absolute;
|
||||
top: -31px;
|
||||
left: -18px;
|
||||
z-index: 11;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
|
||||
a {
|
||||
opacity: 0.9;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.anticon {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-mover-handler,
|
||||
.upload-download-handler {
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.upload-mover-handler {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.upload-download-handler {
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload-wrapper .ant-upload-drag .ant-upload {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.ant-upload-drag {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 16px;
|
||||
color: rgba(74, 69, 69, 0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-size: 12px;
|
||||
color: rgb(189, 189, 189);
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item) {
|
||||
position: relative;
|
||||
height: 240px !important;
|
||||
padding: 8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: #f1f7ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item .ant-upload-list-item-thumbnail) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 200px !important;
|
||||
height: 200px !important;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-name) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5714285714285714;
|
||||
transition: all 0.3s;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.custom-upload-list {
|
||||
border: 0px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: #f1f7ff;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
export const selectedColumns = [
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagId_dictText',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '服务类别',
|
||||
align: 'center',
|
||||
dataIndex: 'categoryId_dictText',
|
||||
width: 100, // 添加固定宽度
|
||||
},
|
||||
{
|
||||
title: '服务类型',
|
||||
align: 'center',
|
||||
dataIndex: 'typeId_dictText',
|
||||
width: 120, // 添加固定宽度
|
||||
},
|
||||
{
|
||||
title: '服务指令名称',
|
||||
align: 'center',
|
||||
dataIndex: 'directiveName',
|
||||
width: 150, // 添加固定宽度
|
||||
},
|
||||
{
|
||||
title: '体型标签',
|
||||
align: 'center',
|
||||
dataIndex: 'bodyTagList',
|
||||
width: 150,
|
||||
ellipsis: true, // 确保内容过长时显示省略号
|
||||
},
|
||||
{
|
||||
title: '情绪标签',
|
||||
align: 'center',
|
||||
dataIndex: 'emotionTagList',
|
||||
width: 150,
|
||||
ellipsis: true, // 确保内容过长时显示省略号
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleType_dictText',
|
||||
width: 100, // 添加固定宽度
|
||||
},
|
||||
{
|
||||
title: '服务时长（分钟）',
|
||||
align: 'center',
|
||||
dataIndex: 'serviceDuration',
|
||||
width: 135,
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
align: 'center',
|
||||
dataIndex: 'izEnabled_dictText',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '预览图片',
|
||||
align: 'center',
|
||||
dataIndex: 'previewFileMedia',
|
||||
width: 120, // 添加固定宽度
|
||||
},
|
||||
{
|
||||
title: '即时指令图片',
|
||||
align: 'center',
|
||||
dataIndex: 'immediateFileMedia',
|
||||
width: 150, // 添加固定宽度
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
width: 60,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col v-for="(item, index) in orgTableList.records" :key="item.id" :xs="24" :sm="24"
|
||||
:md="props.layout == 'full' ? 12 : 8" :lg="props.layout == 'full' ? 12 : 8" :xl="props.layout == 'full' ? 8 : 8"
|
||||
:xxl="props.layout == 'full' ? 6 : 8" :xxxl="props.layout == 'full' ? 4 : 8"
|
||||
:style="{ 'padding-right': ((index + 1) % 4 != 0) ? '14px' : '0px', 'padding-bottom': '14px' }">
|
||||
<OrgCard :orgInfo="item" :layout="props.layout" :showMainTile="props.showMainTile" :showInfo="props.showInfo"
|
||||
:showHldy="props.showHldy"
|
||||
:is-selected="selectedOrgs.some(org => org.orgCode === item.orgCode)"
|
||||
:is-directive-selected="directiveMainSelectedOrg?.orgCode === item.orgCode"
|
||||
:is-directive-main="dmOrg?.orgCode === item.orgCode" :show-detail="props.showDetail"
|
||||
:clickable="props.showChoose || props.showDirectiveChoose" @click="handleCardClick" @detail="handleDetail"
|
||||
@info="handleInfo" @hldy="handleHldy" />
|
||||
</a-col>
|
||||
<a-col v-if="orgTableList.length == 0">
|
||||
<div style="margin: 30px auto;">
|
||||
<a-empty />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div
|
||||
style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;"
|
||||
v-show="props.layout == 'full' && pageSize != -1">
|
||||
<span style="margin-right: 10px;">共 {{ orgTableList.total }} 条数据</span>
|
||||
<Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
|
||||
show-quick-jumper :total="orgTableList.total" @change="reload" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="synchronization-directive2">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Pagination } from 'ant-design-vue'
|
||||
import { getOrgInfo } from '/@/views/admin/orgapplyinfo/OrgApplyInfo.api'
|
||||
import OrgCard from '/@/components/OrgCard/OrgCardCom.vue'
|
||||
|
||||
const props = defineProps({
|
||||
showChoose: { type: Boolean, default: false },
|
||||
pageSize: { type: Number, default: 8 },
|
||||
showDetail: { type: Boolean, default: false },
|
||||
showInfo: { type: Boolean, default: false },
|
||||
title: { type: String, default: '' },
|
||||
allowMultipleSelection: { type: Boolean, default: false },
|
||||
layout: { type: String, default: 'full' },
|
||||
excludeOrgCode: { type: String, default: '' },
|
||||
showDirectiveMain: { type: Boolean, default: false },
|
||||
showDirectiveChoose: { type: Boolean, default: false },
|
||||
showDMTip: { type: Boolean, default: false },
|
||||
showMainTile: { type: Boolean, default: true },//是否展示标准指令库/标签库
|
||||
showHldy: { type: Boolean, default: false },//是否展示护理单元
|
||||
})
|
||||
|
||||
const emit = defineEmits(['handleOrgDetail', 'handleOrgChoose', 'handleOrgInfo','handleHldy'])
|
||||
|
||||
const orgTableList = ref<any>({ records: [], total: 0 })
|
||||
const queryParam = reactive<any>({})
|
||||
const pageParams = ref({ pageNo: 1, pageSize: props.pageSize })
|
||||
const directiveMainSelectedOrg = ref<any>(null)
|
||||
const dmOrg = ref<any>('')
|
||||
const selectedOrgs = ref<any[]>([])
|
||||
|
||||
function handleCardClick(item: any) {
|
||||
if (props.showDirectiveChoose) {
|
||||
directiveMainSelectedOrg.value = item
|
||||
emit('handleOrgChoose', item)
|
||||
}
|
||||
if (props.showChoose) {
|
||||
if (props.allowMultipleSelection) {
|
||||
if (selectedOrgs.value.some(selected => selected.orgCode === item.orgCode)) {
|
||||
selectedOrgs.value = selectedOrgs.value.filter(selected => selected.orgCode !== item.orgCode)
|
||||
} else {
|
||||
selectedOrgs.value.push(item)
|
||||
}
|
||||
} else {
|
||||
selectedOrgs.value = [item]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function commitOrgsInfo() {
|
||||
emit('handleOrgChoose', selectedOrgs.value)
|
||||
}
|
||||
|
||||
function handleDetail(item: any) {
|
||||
emit('handleOrgDetail', item)
|
||||
}
|
||||
|
||||
function handleInfo(item: any) {
|
||||
emit('handleOrgInfo', item)
|
||||
}
|
||||
function handleHldy(item: any) {
|
||||
emit('handleHldy', item)
|
||||
}
|
||||
|
||||
function reload() {
|
||||
directiveMainSelectedOrg.value = {}
|
||||
queryParam.pageSize = pageParams.value.pageSize
|
||||
queryParam.pageNo = pageParams.value.pageNo
|
||||
queryParam.title = props.title
|
||||
if (props.layout == 'half') {
|
||||
queryParam.pageSize = -1
|
||||
}
|
||||
getOrgInfo(queryParam).then(res => {
|
||||
res.records = res.records.filter(o => o.orgCode != props.excludeOrgCode)
|
||||
orgTableList.value = res
|
||||
if (props.showDirectiveChoose || props.showDMTip) {
|
||||
const defaultSelected = res.records.find(item => item.izDirectiveMain === 'Y')
|
||||
if (defaultSelected) {
|
||||
dmOrg.value = defaultSelected
|
||||
emit('handleOrgChoose', defaultSelected)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function searchReset() {
|
||||
queryParam.title = null
|
||||
if (props.layout == 'half') {
|
||||
queryParam.pageSize = -1
|
||||
}
|
||||
getOrgInfo(queryParam).then(res => {
|
||||
res.records = res.records.filter(o => o.orgCode != props.excludeOrgCode)
|
||||
orgTableList.value = res
|
||||
})
|
||||
}
|
||||
|
||||
function checkAllOrEmpty(isCheckAll = true) {
|
||||
if (isCheckAll) {
|
||||
orgTableList.value.records.forEach(item => {
|
||||
if (!selectedOrgs.value.some(selected => selected.orgCode === item.orgCode)) {
|
||||
selectedOrgs.value.push(item);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
selectedOrgs.value = [];
|
||||
}
|
||||
emit('handleOrgChoose', selectedOrgs.value);
|
||||
}
|
||||
|
||||
function resetSeleted(orgs: any[]) {
|
||||
selectedOrgs.value = [...orgs]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
reload()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
reload,
|
||||
searchReset,
|
||||
selectedOrgs,
|
||||
checkAllOrEmpty,
|
||||
commitOrgsInfo,
|
||||
resetSeleted
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/services/serviceDirective/list',
|
||||
listByDS = '/services/serviceDirective/listByDS',
|
||||
queryById = '/services/serviceDirective/queryById',
|
||||
syncDirective = '/services/serviceDirective/syncDirective',
|
||||
idListByDS = '/services/serviceDirective/idListByDS',
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||
export const queryById = (params) => defHttp.get({ url: Api.queryById, params });
|
||||
|
||||
/**
|
||||
* 列表接口 - 变更数据源
|
||||
* @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 });
|
||||
|
||||
/**
|
||||
* 同步
|
||||
* @param params
|
||||
* @returns
|
||||
*/
|
||||
export const syncDirective = (dataSourceCode: string, params: any) => {
|
||||
return defHttp.post({ url: `${Api.syncDirective}?dataSourceCode=${encodeURIComponent(dataSourceCode)}`, params });
|
||||
};
|
||||
|
|
@ -0,0 +1,444 @@
|
|||
import { BasicColumn } from '/@/components/Table';
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagId_dictText',
|
||||
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',
|
||||
// ellipsis: false,
|
||||
// defaultHidden: false,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: '情绪标签',
|
||||
// align: 'center',
|
||||
// dataIndex: 'emotionTagList',
|
||||
// ellipsis: false,
|
||||
// defaultHidden: false,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
{
|
||||
title: '收费价格',
|
||||
align: 'center',
|
||||
dataIndex: 'tollPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '提成价格',
|
||||
align: 'center',
|
||||
dataIndex: 'comPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '医保报销',
|
||||
align: 'center',
|
||||
dataIndex: 'izReimbursement_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '机构优惠',
|
||||
align: 'center',
|
||||
dataIndex: 'izPreferential_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleType_dictText',
|
||||
},
|
||||
{
|
||||
title: '服务时长（分钟）',
|
||||
align: 'center',
|
||||
dataIndex: 'serviceDuration',
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
align: 'center',
|
||||
dataIndex: 'izEnabled_dictText',
|
||||
},
|
||||
];
|
||||
|
||||
export const sourceColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
dataIndex: 'izExist',
|
||||
width: 70,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagId_dictText',
|
||||
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',
|
||||
// ellipsis: false,
|
||||
// // defaultHidden: true,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: '情绪标签',
|
||||
// align: 'center',
|
||||
// dataIndex: 'emotionTagList',
|
||||
// ellipsis: false,
|
||||
// // defaultHidden: true,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
{
|
||||
title: '收费价格',
|
||||
align: 'center',
|
||||
dataIndex: 'tollPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '提成价格',
|
||||
align: 'center',
|
||||
dataIndex: 'comPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '医保报销',
|
||||
align: 'center',
|
||||
dataIndex: 'izReimbursement_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '机构优惠',
|
||||
align: 'center',
|
||||
dataIndex: 'izPreferential_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleType_dictText',
|
||||
},
|
||||
{
|
||||
title: '服务时长（分钟）',
|
||||
align: 'center',
|
||||
dataIndex: 'serviceDuration',
|
||||
},
|
||||
];
|
||||
|
||||
export const targetSourceColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagId_dictText',
|
||||
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',
|
||||
// ellipsis: false,
|
||||
// // defaultHidden: true,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: '情绪标签',
|
||||
// align: 'center',
|
||||
// dataIndex: 'emotionTagList',
|
||||
// ellipsis: false,
|
||||
// // defaultHidden: true,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
{
|
||||
title: '收费价格',
|
||||
align: 'center',
|
||||
dataIndex: 'tollPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '提成价格',
|
||||
align: 'center',
|
||||
dataIndex: 'comPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '医保报销',
|
||||
align: 'center',
|
||||
dataIndex: 'izReimbursement_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '机构优惠',
|
||||
align: 'center',
|
||||
dataIndex: 'izPreferential_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleType_dictText',
|
||||
},
|
||||
{
|
||||
title: '服务时长（分钟）',
|
||||
align: 'center',
|
||||
dataIndex: 'serviceDuration',
|
||||
},
|
||||
];
|
||||
|
||||
export const targetColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagId_dictText',
|
||||
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',
|
||||
// ellipsis: false,
|
||||
// // defaultHidden: true,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: '情绪标签',
|
||||
// align: 'center',
|
||||
// dataIndex: 'emotionTagList',
|
||||
// ellipsis: false,
|
||||
// // defaultHidden: true,
|
||||
// format(text, record, index) {
|
||||
// if (!!text) {
|
||||
// return text.map((item) => item.tagName).join('、');
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
{
|
||||
title: '收费价格',
|
||||
align: 'center',
|
||||
dataIndex: 'tollPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '提成价格',
|
||||
align: 'center',
|
||||
dataIndex: 'comPrice',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '医保报销',
|
||||
align: 'center',
|
||||
dataIndex: 'izReimbursement_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '机构优惠',
|
||||
align: 'center',
|
||||
dataIndex: 'izPreferential_dictText',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleType_dictText',
|
||||
},
|
||||
{
|
||||
title: '服务时长（分钟）',
|
||||
align: 'center',
|
||||
dataIndex: 'serviceDuration',
|
||||
},
|
||||
{
|
||||
title: '同步类型',
|
||||
align: 'center',
|
||||
dataIndex: 'izExist',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
// 高级查询数据
|
||||
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' },
|
||||
};
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<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="6">
|
||||
<a-form-item name="instructionTagId">
|
||||
<template #label><span title="分类标签">分类标签</span></template>
|
||||
<j-dict-select-tag v-model:value="queryParam.instructionTagId"
|
||||
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 'Y' order by sort asc`"
|
||||
:orgCode="queryParam.dataSourceCode" :ignoreDisabled="true" placeholder="请选分类标签" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="categoryId">
|
||||
<template #label><span title="服务类别">服务类别</span></template>
|
||||
<j-dict-select-tag type="list" v-model:value="queryParam.categoryId" :orgCode="queryParam.dataSourceCode"
|
||||
:dictCode="`nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 'Y' and instruction_id = '${queryParam.instructionTagId || ''}' order by sort asc`"
|
||||
:ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="typeId">
|
||||
<template #label><span title="服务类型">服务类型</span></template>
|
||||
<j-dict-select-tag type="list" v-model:value="queryParam.typeId" :orgCode="queryParam.dataSourceCode"
|
||||
: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="请选择服务类型" :ignoreDisabled="true" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<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="cycleType">
|
||||
<template #label><span title="周期类型">周期类型</span></template>
|
||||
<j-dict-select-tag type="list" v-model:value="queryParam.cycleType" :orgCode="queryParam.dataSourceCode"
|
||||
dictCode="period_type" placeholder="请选择周期类型" :ignoreDisabled="true" 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"
|
||||
: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"
|
||||
: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 :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<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>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<div v-show="!!sourceOrgName" style="margin-left: 14px;">
|
||||
<span style="font-size:13px;color:#6b7280;">源平台：</span>
|
||||
<span
|
||||
style="padding:4px 8px;border-radius:12px;background:#f8fafc;border:1px solid #e6eef8;font-size:14px;font-weight:500;">
|
||||
{{ sourceOrgName }}
|
||||
</span>
|
||||
<span style="margin:0 6px;color:#9ca3af;">|</span>
|
||||
<span style="font-size:13px;color:#6b7280;">目标平台：</span>
|
||||
<span
|
||||
style="padding:4px 8px;border-radius:12px;background:#f1f5f9;border:1px solid #e6eef8;font-size:14px;font-weight:500;">
|
||||
{{ targetOrgName }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="serviceDirective-configServiceDirective" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { BasicTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columns, superQuerySchema } from './ConfigServiceDirective.data';
|
||||
import { listByDS } from './ConfigServiceDirective.api';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
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 { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
const userStore = useUserStore();
|
||||
const sourceOrgName = ref()//日志功能进来的-源平台机构名称
|
||||
const targetOrgName = ref()//日志功能进来的-目标平台机构名称
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '服务指令',
|
||||
api: listByDS,
|
||||
columns,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
showIndexColumn: true,
|
||||
showActionColumn: false,
|
||||
immediate: false,
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 15,
|
||||
pageSizeOptions: ['15', '50', '70', '100'],
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
queryParam.izEnabled = 'Y'
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
actionColumn: {
|
||||
width: 160,
|
||||
fixed: 'right',
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const labelCol = reactive({
|
||||
xs: 24,
|
||||
sm: 6,
|
||||
xl: 6,
|
||||
xxl: 6
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 18,
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
formRef.value.resetFields();
|
||||
selectedRowKeys.value = [];
|
||||
//刷新数据
|
||||
reload();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function init(record) {
|
||||
queryParam.queryIds = record.queryIds
|
||||
queryParam.dataSourceCode = record.orgCode;
|
||||
sourceOrgName.value = record.sourceOrgName
|
||||
targetOrgName.value = record.targetOrgName
|
||||
reload();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
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: 14px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<!-- <j-modal :title="title" width="75vw" :visible="visible" @cancel="handleCancel" cancelText="关闭" :maskClosable="false">
|
||||
<ConfigServiceDirectiveList ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ConfigServiceDirectiveList>
|
||||
</j-modal> -->
|
||||
<a-drawer :title="title" width="80vw" v-model:visible="visible" v-if="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
|
||||
<ConfigServiceDirectiveList ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
|
||||
:formBpm="false"></ConfigServiceDirectiveList>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose, defineProps } from 'vue';
|
||||
import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const props = defineProps({
|
||||
sysUrlValue: { type: String, default: '' },
|
||||
});
|
||||
const title = ref<string>('');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function init(record) {
|
||||
title.value = '详情';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
categoryList = '/services/serviceCategory/configServiceCategory/list',
|
||||
typeList = '/services/ServiceType/configServiceType/list',
|
||||
bodyTagsList = '/services/directiveTag/bodyTag/list',
|
||||
emotionTagsList = '/services/directiveTag/emotionTag/list',
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 服务类别
|
||||
*/
|
||||
export const categoryList = () => defHttp.get({ url: Api.categoryList });
|
||||
|
||||
/**
|
||||
* 服务类型
|
||||
*/
|
||||
export const typeList = () => defHttp.get({ url: Api.typeList });
|
||||
|
||||
/**
|
||||
* 体型标签
|
||||
*/
|
||||
export const bodyTagsList = () => defHttp.get({ url: Api.bodyTagsList });
|
||||
|
||||
/**
|
||||
* 指令标签
|
||||
*/
|
||||
export const emotionTagsList = () => defHttp.get({ url: Api.emotionTagsList });
|
||||
|
|
@ -0,0 +1,429 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="title">
|
||||
<template #label><span title="机构名称">机构名称</span></template>
|
||||
<a-input placeholder="请输入机构名称" v-model:value="queryParam.title" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<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>
|
||||
<a-col :lg="12" style="text-align: right;">
|
||||
<a-button type="primary" preIcon="ant-design:cloud-sync-outlined" @click="handleJingxiang"
|
||||
style="margin-right: 10px;">镜像</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:file-text-twotone" @click="handleViewLogs"
|
||||
style="margin-right: 10px;">日志</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:safety-certificate-twotone" @click="handleDirectiveMainFunc"
|
||||
style="margin-right: 10px;">标准指令库</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:copy-outlined" @click="handleDirectiveBackups"
|
||||
style="margin-right: 10px;">指令备份</a-button>
|
||||
<!-- <a-badge :count="609" style="margin-right: 10px;"> -->
|
||||
<!-- <a-button type="primary" preIcon="ant-design:eye-outlined" style="margin-right: 10px;"
|
||||
@click="handleLookNewDirectives">新增指令</a-button> -->
|
||||
<!-- </a-badge> -->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<OrgListCom ref="orgListComRef" :title="queryParam.title" @handleOrgDetail="handleDetail" :showDetail=true
|
||||
:showDMTip="true">
|
||||
</OrgListCom>
|
||||
|
||||
<ConfigServiceDirectiveListModal ref="configServiceDirectiveListModal" />
|
||||
<SyncStepListModal ref="syncStepListModal" />
|
||||
<!-- <a-modal v-model:visible="logsVisible" title="日志" width="90vw"
|
||||
:bodyStyle="{ height: '70vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCancelLogs">
|
||||
<a-row>
|
||||
<a-col :span="2" :push="22" style="margin-top: 15px;margin-left: 60px;">
|
||||
<a-button type="primary" @click="handleRefreshLogs" title="刷新">
|
||||
刷新
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancelLogs" type="primary">关闭</a-button>
|
||||
</template>
|
||||
<AsyncListComponent ref="logsRef"></AsyncListComponent>
|
||||
</a-modal> -->
|
||||
<a-drawer title="日志" width="85vw" v-model:visible="logsVisible"
|
||||
:bodyStyle="{ height: '70vh', display: 'flex', padding: '14px', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCancelLogs">
|
||||
<a-row style="overflow-x: hidden !important; background-color: white;">
|
||||
<a-col :span="2" :push="22" style="margin-top: 18px;margin-left: 30px;">
|
||||
<a-button type="primary" @click="handleRefreshLogs" title="刷新">
|
||||
刷新
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<AsyncListComponent ref="logsRef" :type="'directive'" @handleDetail="handleDetail"></AsyncListComponent>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancelLogs" type="primary" style="float:right;">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
<!-- 标准指令库 -->
|
||||
<a-drawer v-model:visible="directiveMainVisible" title="标准指令库" width="85vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ height: '70vh', display: 'flex', padding: '14px', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCanceldirectiveMain">
|
||||
<template #footer>
|
||||
<a-button @click="handleCanceldirectiveMain" type="primary" style="margin-right: 10px;">关闭</a-button>
|
||||
<a-button @click="handleAsyncdirectiveMain" type="primary">确认</a-button>
|
||||
</template>
|
||||
<OrgListCom ref="directiveMainComRef" :showDirectiveMain=true :showDirectiveChoose="true"
|
||||
@handleOrgDetail="handleDetail" :showDetail=true @handleOrgChoose="directiveMainFunc">
|
||||
</OrgListCom>
|
||||
</a-drawer>
|
||||
<!-- 新增指令 -->
|
||||
<a-drawer v-model:visible="newDirectiveVisible" title="新增指令" width="85vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ height: '80vh', display: 'flex', padding: '14px', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCancelNewDirective">
|
||||
<template #footer>
|
||||
<a-button @click="handleCancelNewDirective" type="primary">关闭</a-button>
|
||||
<!-- <a-button @click="handleAsyncNewDirective" type="primary">同步</a-button> -->
|
||||
</template>
|
||||
<div style="padding:0px 8px;">
|
||||
<CanAddDirectiveList ref="canAddDirectiveRef" :directiveMainOrgInfo="directiveMainOrgInfo"
|
||||
:existDirectiveIds="existDirectiveIds" @refreshExistIds="refreshDMExistedIds"></CanAddDirectiveList>
|
||||
</div>
|
||||
</a-drawer>
|
||||
<!-- 指令备份 -->
|
||||
<a-drawer v-model:visible="directiveBackupsOpen" title="指令备份" width="85vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ padding: '14px', height: '80vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleDirectiveBackupsClose">
|
||||
<template #footer>
|
||||
<a-button @click="handleDirectiveBackupsClose" type="primary">关闭</a-button>
|
||||
</template>
|
||||
<div>
|
||||
<DirectiveBkMainList v-if="directiveBackupsOpen" ref="backupsRef"></DirectiveBkMainList>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="synchronization-directive2" lang="ts">
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
|
||||
// 以下为服务指令引用：
|
||||
import { list, asyncFunc, departList } from '@/views/services/serviceDirective/ConfigServiceDirective.api';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
import ConfigServiceDirectiveListModal from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue';
|
||||
import SyncStepListModal from '/@/views/synchronization/directive/syncStep/SyncStepListModal.vue';
|
||||
//机构信息
|
||||
import { getOrgInfo } from '/@/views/admin/orgapplyinfo/OrgApplyInfo.api';
|
||||
//机构列表
|
||||
import OrgListCom from '/@/views/synchronization/directive/orgCom/OrgListCom.vue'
|
||||
//可新增指令
|
||||
import CanAddDirectiveList from '/@/views/synchronization/directive/canadddirective/CanAddDirectiveList.vue'
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import AsyncListComponent from '@/components/dataAsync/AsyncMainList0731.vue'
|
||||
import { getDirectiveMain, changeDirectiveMain } from '/@/api/common/api'
|
||||
import { idListByDS } from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api';
|
||||
import { nextTick } from 'process';
|
||||
import DirectiveBkMainList from '/@/views/services/directivebk/DirectiveBkMainList.vue'
|
||||
|
||||
const { createMessage } = useMessage()
|
||||
const canAddDirectiveRef = ref()
|
||||
const newDirectiveVisible = ref(false)
|
||||
const directiveMainComRef = ref();
|
||||
const newDirectiveRef = ref()
|
||||
const logsRef = ref()
|
||||
const formRef = ref();
|
||||
const configServiceDirectiveListModal = ref();
|
||||
const syncStepListModal = ref();
|
||||
const orgTableList = ref<any>([]);
|
||||
const queryParam = reactive<any>({});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 8 })
|
||||
const orgListComRef = ref()
|
||||
const logsVisible = ref(false)
|
||||
const directiveMainVisible = ref(false)
|
||||
const { createConfirm } = useMessage();
|
||||
const existDirectiveIds = ref([])//指令库已存在指令id
|
||||
const directiveMainOrgInfo = ref()
|
||||
const directiveBackupsOpen = ref(false)
|
||||
const backupsRef = ref()//指令备份
|
||||
|
||||
const labelCol = reactive({
|
||||
xs: 24,
|
||||
sm: 4,
|
||||
xl: 6,
|
||||
xxl: 4
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
});
|
||||
|
||||
/**
|
||||
* 镜像
|
||||
*/
|
||||
function handleJingxiang() {
|
||||
syncStepListModal.value.init(null);
|
||||
syncStepListModal.value.disableSubmit = true;
|
||||
}
|
||||
/**
|
||||
* 详情
|
||||
* @param record
|
||||
*/
|
||||
function handleDetail(record) {
|
||||
configServiceDirectiveListModal.value.disableSubmit = true;
|
||||
configServiceDirectiveListModal.value.init(record);
|
||||
}
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
orgListComRef.value?.reload();
|
||||
}
|
||||
|
||||
function reload() {
|
||||
//刷新数据
|
||||
queryParam.pageSize = pageParams.value.pageSize;
|
||||
queryParam.pageNo = pageParams.value.pageNo;
|
||||
getOrgInfo(queryParam).then(res => {
|
||||
orgTableList.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
queryParam.title = null
|
||||
orgListComRef.value?.searchReset()
|
||||
}
|
||||
|
||||
/**
|
||||
* 日志
|
||||
*/
|
||||
function handleViewLogs() {
|
||||
logsVisible.value = true
|
||||
handleRefreshLogs()
|
||||
}
|
||||
|
||||
function handleLookNewDirectives() {
|
||||
newDirectiveVisible.value = true
|
||||
refreshDMExistedIds(directiveMainOrgInfo.value, true)
|
||||
}
|
||||
|
||||
//关闭日志模态框
|
||||
function handleCancelLogs() {
|
||||
logsVisible.value = false
|
||||
}
|
||||
|
||||
//刷新日志
|
||||
function handleRefreshLogs() {
|
||||
logsRef.value?.searchQuery()
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭新增指令
|
||||
*/
|
||||
function handleCancelNewDirective() {
|
||||
newDirectiveVisible.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步新增指令
|
||||
*/
|
||||
function handleAsyncNewDirective() {
|
||||
// newDirectiveRef
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开指令库
|
||||
*/
|
||||
function handleDirectiveMainFunc() {
|
||||
directiveMainVisible.value = true
|
||||
directiveMainComRef.value?.reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭指令库
|
||||
*/
|
||||
function handleCanceldirectiveMain() {
|
||||
directiveMainVisible.value = false
|
||||
}
|
||||
|
||||
//刷新已有指令库
|
||||
function refreshDMExistedIds(dmOrgInfo, izReset = false, izQuery = true) {
|
||||
idListByDS({ dataSourceCode: dmOrgInfo.orgCode }).then(res => {
|
||||
existDirectiveIds.value = res.records
|
||||
if (izReset) {
|
||||
canAddDirectiveRef.value?.searchReset()
|
||||
} else {
|
||||
canAddDirectiveRef.value?.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看指令备份
|
||||
*/
|
||||
function handleDirectiveBackups() {
|
||||
directiveBackupsOpen.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭指令备份
|
||||
*/
|
||||
function handleDirectiveBackupsClose() {
|
||||
directiveBackupsOpen.value = false
|
||||
}
|
||||
|
||||
watch(directiveMainOrgInfo, (newValue, oldValue) => {
|
||||
if (newValue) {
|
||||
refreshDMExistedIds(newValue)
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
const tempDM = ref()
|
||||
/**
|
||||
* 指令库对应机构信息
|
||||
*/
|
||||
function directiveMainFunc(orgInfo_) {
|
||||
tempDM.value = orgInfo_
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认指令库
|
||||
*/
|
||||
function handleAsyncdirectiveMain() {
|
||||
// createConfirm({
|
||||
// iconType: 'warning',
|
||||
// title: '指令库变更提醒',
|
||||
// content: '是否变更指令库为：' + tempDM.value.departName,
|
||||
// okText: '确认',
|
||||
// cancelText: '取消',
|
||||
// onOk: () => {
|
||||
directiveMainOrgInfo.value = tempDM.value
|
||||
changeDirectiveMain(directiveMainOrgInfo.value.orgCode).then(() => {
|
||||
createMessage.success('标准指令库已变更')
|
||||
handleCanceldirectiveMain()
|
||||
canAddDirectiveRef.value?.reload()
|
||||
orgListComRef.value?.reload()
|
||||
}).catch(() => {
|
||||
createMessage.error('指令库变更失败，请稍后再试')
|
||||
})
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
//获取指令库机构信息
|
||||
function getDirectiveMainOrgInfo() {
|
||||
getDirectiveMain().then(res => {
|
||||
directiveMainOrgInfo.value = res
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 自动请求并暴露内部方法
|
||||
onMounted(() => {
|
||||
reload();
|
||||
getDirectiveMainOrgInfo()
|
||||
orgListComRef.value?.reload();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.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: 14px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
background: #1ea0fa;
|
||||
width: 100%;
|
||||
margin: -28px -24px;
|
||||
padding-top: 15px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
color: white;
|
||||
height: 55px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.zxClass {
|
||||
font-size: 12px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 25px;
|
||||
color: white;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.lxClass {
|
||||
font-size: 14px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.tbClass {
|
||||
background: #f6f6f6;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.antTitle {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ellipsis-one-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
/* 限制文本为2行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.content-refresh-btn {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -275,6 +275,7 @@ onMounted(async () => {
|
|||
initLoading.value = true
|
||||
orgInfo.value = []
|
||||
let dmInfo_ = await getDirectiveMain()
|
||||
console.log("🌊 ~ dmInfo_:", dmInfo_)
|
||||
let dmAllInfo_ = await getOrgInfo({ orgCode: dmInfo_.orgCode })
|
||||
if (!dmAllInfo_.records[0]) {
|
||||
createMessage.error('请先设置标准指令库！')
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/directiveopelog/directiveOpeLogInfo/list',
|
||||
save='/directiveopelog/directiveOpeLogInfo/add',
|
||||
edit='/directiveopelog/directiveOpeLogInfo/edit',
|
||||
deleteOne = '/directiveopelog/directiveOpeLogInfo/delete',
|
||||
deleteBatch = '/directiveopelog/directiveOpeLogInfo/deleteBatch',
|
||||
importExcel = '/directiveopelog/directiveOpeLogInfo/importExcel',
|
||||
exportXls = '/directiveopelog/directiveOpeLogInfo/exportXls',
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出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 });
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
* @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 });
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/directiveopelog/directiveOpeLogMain/list',
|
||||
save='/directiveopelog/directiveOpeLogMain/add',
|
||||
edit='/directiveopelog/directiveOpeLogMain/edit',
|
||||
deleteOne = '/directiveopelog/directiveOpeLogMain/delete',
|
||||
deleteBatch = '/directiveopelog/directiveOpeLogMain/deleteBatch',
|
||||
importExcel = '/directiveopelog/directiveOpeLogMain/importExcel',
|
||||
exportXls = '/directiveopelog/directiveOpeLogMain/exportXls',
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出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 });
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
* @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 });
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { BasicColumn } from '/@/components/Table';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import { rules } from '/@/utils/helper/validator';
|
||||
import { render } from '/@/utils/common/renderUtils';
|
||||
import { getWeekMonthQuarterYear } from '/@/utils';
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '机构编码',
|
||||
align: 'center',
|
||||
dataIndex: 'orgCode_dictText',
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
align: 'center',
|
||||
dataIndex: 'opeType_dictText',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
align: 'center',
|
||||
dataIndex: 'createBy',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '操作日期',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagName',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '服务类别',
|
||||
align: 'center',
|
||||
dataIndex: 'categoryName',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '服务类型',
|
||||
align: 'center',
|
||||
dataIndex: 'typeName',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '服务指令',
|
||||
align: 'center',
|
||||
dataIndex: 'directiveName',
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleTypeName',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
|
||||
// 高级查询数据
|
||||
export const superQuerySchema = {
|
||||
orgCode: { title: '机构编码', order: 0, view: 'list', type: 'string', dictTable: 'sys_depart', dictCode: 'org_code', dictText: 'depart_name' },
|
||||
opeType: { title: '操作类型 1新增 2修改', order: 1, view: 'list', type: 'string', dictCode: 'directive_ope_type' },
|
||||
createBy: { title: '操作人', order: 2, view: 'text', type: 'string' },
|
||||
createTime: { title: '操作日期', order: 3, view: 'datetime', type: 'string' },
|
||||
instructionTagName: { title: '分类标签名称', order: 4, view: 'text', type: 'string' },
|
||||
categoryName: { title: '服务类别名称', order: 5, view: 'text', type: 'string' },
|
||||
typeName: { title: '服务类型名称', order: 6, view: 'text', type: 'string' },
|
||||
directiveName: { title: '服务指令名称', order: 7, view: 'text', type: 'string' },
|
||||
cycleType: { title: '周期类型 字典period_type', order: 8, view: 'list', type: 'string', dictCode: 'period_type' },
|
||||
};
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="orgCode">
|
||||
<template #label><span title="机构">机构</span></template>
|
||||
<j-dict-select-tag placeholder="请选择机构" v-model:value="queryParam.orgCode"
|
||||
dictCode="sys_depart,depart_name,org_code" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="opeType">
|
||||
<template #label><span title="操作类型">操作类型</span></template>
|
||||
<j-dict-select-tag placeholder="请选择操作类型" v-model:value="queryParam.opeType" dictCode="directive_ope_type"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<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>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!-- 表单区域 -->
|
||||
<DirectiveOpeLogMainModal ref="registerModal" @success="handleSuccess"></DirectiveOpeLogMainModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="directiveopelog-directiveOpeLogMain" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columns, superQuerySchema } from './DirectiveOpeLogMain.data';
|
||||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DirectiveOpeLogMain.api';
|
||||
import { downloadFile } from '/@/utils/common/renderUtils';
|
||||
import DirectiveOpeLogMainModal from './components/DirectiveOpeLogMainModal.vue'
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
const userStore = useUserStore();
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '服务指令操作日志主表',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
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: 6,
|
||||
xxl: 5
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
});
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
function handleDetail(record: Recordable) {
|
||||
if (record.opeType == '1') {
|
||||
//新增
|
||||
registerModal.value.disableSubmit = true;
|
||||
registerModal.value.detail(record);
|
||||
} else {
|
||||
//修改
|
||||
registerModal.value.disableSubmit = true;
|
||||
registerModal.value.compareDetail(record);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record)
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
formRef.value.resetFields();
|
||||
selectedRowKeys.value = [];
|
||||
//刷新数据
|
||||
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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
<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="true">
|
||||
<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.instructionTagName"
|
||||
id="ConfigServiceDirectiveForm-instructionTagName" name="instructionTagName">
|
||||
<a-input v-model:value="formData.instructionTagName" placeholder="分类标签" disabled />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="服务类别" v-bind="validateInfos.categoryName"
|
||||
id="ConfigServiceDirectiveForm-categoryName" name="categoryName">
|
||||
<a-input v-model:value="formData.categoryName" placeholder="服务类别" disabled />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="服务类型" v-bind="validateInfos.typeName" id="ConfigServiceDirectiveForm-typeName"
|
||||
name="typeId">
|
||||
<a-input v-model:value="formData.typeName" placeholder="服务类型" disabled />
|
||||
</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 :disabled="true">
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
|
||||
name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
|
||||
<a-row>
|
||||
<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="服务指令名称" disabled></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 v-model:value="formData.tollPrice" placeholder="收费价格" disabled></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
|
||||
name="cycleType">
|
||||
<a-input v-model:value="formData.cycleTypeName" placeholder="周期类型" disabled></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
|
||||
name="comPrice">
|
||||
<a-input v-model:value="formData.comPrice" placeholder="提成价格" disabled></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务时长" v-bind="validateInfos.serviceDuration"
|
||||
id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
|
||||
<a-input v-model:value="formData.serviceDuration" placeholder="服务时长（分钟）" disabled></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</JFormContainer>
|
||||
</div>
|
||||
<div
|
||||
style="padding: 14px;background-color: #fff;border-radius: 0 0px 10px 10px;box-shadow: 0 10px 10px rgba(0.1, 0.1, 0.2, 0.1); margin-top: -80px;">
|
||||
<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 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 :value="!!formData.previewFile ? formData.previewFile : defaultPrePic" disabled />
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 1">
|
||||
<JImageUploadtz :value="!!formData.previewFileSmall ? formData.previewFileSmall : defaultPreSmallPic"
|
||||
disabled />
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 2">
|
||||
<JUploadMP3 :value="formData.mp3File" disabled />
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 3">
|
||||
<JUploadMP4 :value="formData.mp4File" fileType="mp4" disabled />
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 4">
|
||||
<JImageUploadtz :value="!!formData.immediateFile ? formData.immediateFile : defaultImmediatePic"
|
||||
disabled />
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 5">
|
||||
<JImageUploadtz
|
||||
:value="!!formData.immediateFileFocus ? formData.immediateFileFocus : defaultImmediatePic" disabled />
|
||||
</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 style="color: #606266;" v-model:value="formData.serviceContent" placeholder="服务指令描述" :maxlength="200"
|
||||
:rows="3" :autoSize="{ minRows: 3 }" :showCount="true" disabled />
|
||||
</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 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 { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import DirectiveRadioCom from './DirectiveRadioCom.vue'
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
import { queryUpBizPrefix } from '/@/api/common/api'
|
||||
import { list } from '../DirectiveOpeLogInfo.api'
|
||||
|
||||
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 upBizPrefix = ref('')
|
||||
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
categoryName: '',
|
||||
createBy: '',
|
||||
createTime: '',
|
||||
cycleTypeName: '',
|
||||
directiveName: '',
|
||||
instructionTagName: '',
|
||||
opeType: '',
|
||||
opeType_dictText: '',
|
||||
orgCode: '',
|
||||
orgCode_dictText: '',
|
||||
typeName: '',
|
||||
tollPrice: 0,
|
||||
comPrice: 0,
|
||||
serviceDuration: '',
|
||||
serviceContent: '',
|
||||
immediateFile: '',
|
||||
immediateFileFocus: '',
|
||||
mp3File: '',
|
||||
mp4File: '',
|
||||
previewFile: '',
|
||||
previewFileSmall: '',
|
||||
});
|
||||
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 validatorRules = reactive({
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* isEditMedia_是否为编辑指令资源 （隐藏业务字段）
|
||||
*/
|
||||
async function detail(record_) {
|
||||
let data = await list({ 'pkId': record_.id })
|
||||
let record = data.records[0]
|
||||
record.cycleTypeName = record_.cycleTypeName
|
||||
console.log("🌊 ~ detail ~ record:", record)
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
const tmpData = {};
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (record.hasOwnProperty(key)) {
|
||||
tmpData[key] = record[key]
|
||||
}
|
||||
})
|
||||
//赋值
|
||||
Object.assign(formData, tmpData);
|
||||
});
|
||||
}
|
||||
|
||||
const directiveMediaBtnValue = ref(0)
|
||||
function mediaBtnChanged(v_) {
|
||||
directiveMediaBtnValue.value = v_
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
queryUpBizPrefix().then(res => {
|
||||
upBizPrefix.value = res.result
|
||||
})
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
detail,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
:deep .ant-checkbox-wrapper {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 14px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="container2">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-table :dataSource="tableData" :columns="columns" :pagination="false" bordered size="small"
|
||||
:rowClassName="setRowClassName">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 旧数据 -->
|
||||
<template v-if="column.dataIndex === 'oldValue'">
|
||||
<template v-if="isImageField(record, column.dataIndex) && record.oldValue">
|
||||
<JImageUpload :value="getFieldValue(record, column.dataIndex)" disabled />
|
||||
</template>
|
||||
<template v-else-if="record.fieldKey === 'mp3File' && record.oldValue">
|
||||
<audio controls style="width: 200px; height: 30px;">
|
||||
<source :src="getFileAccessHttpUrl(getFullUrl(record.oldValue))" type="audio/mpeg">
|
||||
</audio>
|
||||
</template>
|
||||
<template v-else-if="record.fieldKey === 'mp4File' && record.oldValue">
|
||||
<video controls style="width: 200px; max-height: 150px;">
|
||||
<source :src="getFileAccessHttpUrl(getFullUrl(record.oldValue))" type="video/mp4">
|
||||
</video>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ record[column.dataIndex] || '-' }}</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 新数据 -->
|
||||
<template v-else-if="column.dataIndex === 'newValue'">
|
||||
<template v-if="isImageField(record, column.dataIndex) && record.newValue">
|
||||
<JImageUpload :value="getFieldValue(record, column.dataIndex)" disabled />
|
||||
</template>
|
||||
<template v-else-if="record.fieldKey === 'mp3File' && record.newValue">
|
||||
<audio controls style="width: 200px; height: 30px;">
|
||||
<source :src="getFileAccessHttpUrl(getFullUrl(record.newValue))" type="audio/mpeg">
|
||||
</audio>
|
||||
</template>
|
||||
<template v-else-if="record.fieldKey === 'mp4File' && record.newValue">
|
||||
<video controls style="width: 200px; max-height: 150px;">
|
||||
<source :src="getFileAccessHttpUrl(getFullUrl(record.newValue))" type="video/mp4">
|
||||
</video>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ record[column.dataIndex] || '-' }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
|
||||
import { list } from '../DirectiveOpeLogInfo.api';
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
|
||||
const loading = ref(false);
|
||||
const oldData = ref<Record<string, any>>({});
|
||||
const newData = ref<Record<string, any>>({});
|
||||
|
||||
// 字段映射，用于显示中文名称
|
||||
const fieldLabels: Record<string, string> = {
|
||||
instructionTagName: '分类标签',
|
||||
categoryName: '服务类别',
|
||||
typeName: '服务类型',
|
||||
directiveName: '服务指令',
|
||||
tollPrice: '收费价格(元)',
|
||||
comPrice: '提成价格(元)',
|
||||
cycleType_dictText: '周期类型',
|
||||
serviceContent: '服务说明',
|
||||
serviceDuration: '服务时长(分钟)',
|
||||
mp3File: '语音文件',
|
||||
mp4File: '视频文件',
|
||||
previewFile: '预览图片(大)',
|
||||
previewFileSmall: '预览图片(小)',
|
||||
immediateFile: '即时指令图片',
|
||||
immediateFileFocus: '即时指令焦点图片',
|
||||
};
|
||||
|
||||
// 需要显示的字段顺序
|
||||
const displayFields = [
|
||||
'instructionTagName',
|
||||
'categoryName',
|
||||
'typeName',
|
||||
'directiveName',
|
||||
'cycleType_dictText',
|
||||
'tollPrice',
|
||||
'comPrice',
|
||||
'serviceDuration',
|
||||
'previewFile',
|
||||
'previewFileSmall',
|
||||
'mp3File',
|
||||
'mp4File',
|
||||
'immediateFile',
|
||||
'immediateFileFocus',
|
||||
'serviceContent',
|
||||
];
|
||||
|
||||
// 表格列定义
|
||||
const columns = computed(() => [
|
||||
{
|
||||
title: '字段',
|
||||
dataIndex: 'field',
|
||||
key: 'field',
|
||||
ellipsis: false
|
||||
},
|
||||
{
|
||||
title: '旧数据',
|
||||
dataIndex: 'oldValue',
|
||||
key: 'oldValue',
|
||||
width: '45%',
|
||||
ellipsis: false
|
||||
},
|
||||
{
|
||||
title: '新数据',
|
||||
dataIndex: 'newValue',
|
||||
key: 'newValue',
|
||||
width: '45%',
|
||||
ellipsis: false
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = computed(() => {
|
||||
return displayFields.map(field => {
|
||||
// 修正：正确处理字段值
|
||||
let oldValue = oldData.value[field];
|
||||
let newValue = newData.value[field];
|
||||
|
||||
return {
|
||||
key: field,
|
||||
field: fieldLabels[field] || field,
|
||||
fieldKey: field,
|
||||
oldValue: oldValue,
|
||||
newValue: newValue,
|
||||
// 为了在模板中方便访问，添加原始字段
|
||||
[field]: newValue,
|
||||
// 添加原始数据的引用
|
||||
oldDataRef: oldData,
|
||||
newDataRef: newData
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// 判断是否为图片字段
|
||||
const isImageField = (record: any, columnDataIndex: string) => {
|
||||
const imageFields = [
|
||||
'previewFile',
|
||||
'previewFileSmall',
|
||||
'immediateFile',
|
||||
'immediateFileFocus'
|
||||
];
|
||||
if (columnDataIndex == 'field') {
|
||||
return false
|
||||
} else {
|
||||
return imageFields.includes(record.fieldKey);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取字段值
|
||||
const getFieldValue = (record: any, columnDataIndex: string) => {
|
||||
if (columnDataIndex === 'oldValue') {
|
||||
return record.oldValue;
|
||||
} else if (columnDataIndex === 'newValue') {
|
||||
return record.newValue;
|
||||
} else if (columnDataIndex === 'field') {
|
||||
return record.field;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
// 获取完整的文件URL
|
||||
const getFullUrl = (url: string) => {
|
||||
if (!url) return '';
|
||||
if (url.startsWith('http')) {
|
||||
return url;
|
||||
}
|
||||
const baseUrl = '';
|
||||
return baseUrl + url;
|
||||
};
|
||||
|
||||
// 设置行类名，高亮显示有差异的行
|
||||
const setRowClassName = (record: any) => {
|
||||
if (record.oldValue !== record.newValue && record.fieldKey !== 'createTime') {
|
||||
return 'highlight-row';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
async function init(record_: any) {
|
||||
try {
|
||||
loading.value = true;
|
||||
const data = await list({ 'pkId': record_.id });
|
||||
|
||||
if (data && data.records && data.records.length >= 2) {
|
||||
const oldRecord = data.records.find((item: any) => item.dataType === '1');
|
||||
const newRecord = data.records.find((item: any) => item.dataType === '2');
|
||||
|
||||
if (oldRecord) {
|
||||
oldData.value = { ...oldRecord };
|
||||
}
|
||||
if (newRecord) {
|
||||
newData.value = { ...newRecord };
|
||||
}
|
||||
} else if (data && data.records && data.records.length === 1) {
|
||||
const record = data.records[0];
|
||||
if (record.dataType === '1') {
|
||||
oldData.value = { ...record };
|
||||
newData.value = {};
|
||||
} else if (record.dataType === '2') {
|
||||
oldData.value = {};
|
||||
newData.value = { ...record };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container2 {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
:deep(.ant-table-cell) {
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
// 高亮行样式
|
||||
:deep(.highlight-row) {
|
||||
background-color: #f0f9ff !important; // 浅蓝色背景，表示有变更
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 差异高亮样式
|
||||
:deep(.ant-table-row) {
|
||||
.ant-table-cell {
|
||||
|
||||
&:nth-child(2),
|
||||
// 旧数据列
|
||||
&:nth-child(3) {
|
||||
|
||||
// 新数据列
|
||||
.ant-image,
|
||||
.ant-upload-list-item {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-row {
|
||||
.ant-table-cell {
|
||||
|
||||
&:nth-child(2),
|
||||
// 旧数据列
|
||||
&:nth-child(3) {
|
||||
// 新数据列
|
||||
background-color: #fff1f0 !important; // 差异数据浅红色背景
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 媒体文件样式调整
|
||||
audio,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
audio {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
video {
|
||||
min-width: 200px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
// 标签样式
|
||||
.ant-tag {
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<a-drawer :title="title" width="80vw" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" :bodyStyle="{ 'padding': '14px' }" @close="handleCancel">
|
||||
<!-- 新增-查看 -->
|
||||
<DirectiveOpeLogInfoAdd v-if="dataType == 'add'" ref="registerForm" @ok="submitCallback"
|
||||
:formDisabled="disableSubmit" :formBpm="false">
|
||||
</DirectiveOpeLogInfoAdd>
|
||||
<!-- 变更-比较 -->
|
||||
<DirectiveOpeLogInfoCompare v-if="dataType == 'compare'" ref="compareRef"></DirectiveOpeLogInfoCompare>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel" style="margin-right: 8px;">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import DirectiveOpeLogInfoAdd from './DirectiveOpeLogInfoAdd.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
import DirectiveOpeLogInfoCompare from './DirectiveOpeLogInfoCompare.vue'
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<number>(800);
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const compareRef = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
const dataType = ref('') //add新增 compare比较
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function detail(record) {
|
||||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||||
visible.value = true;
|
||||
dataType.value = 'add'
|
||||
nextTick(() => {
|
||||
registerForm.value.detail(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看变更数据
|
||||
* @param record
|
||||
*/
|
||||
function compareDetail(record) {
|
||||
title.value = '详情'
|
||||
visible.value = true;
|
||||
dataType.value = 'compare'
|
||||
nextTick(() => {
|
||||
compareRef.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
detail,
|
||||
disableSubmit,
|
||||
compareDetail,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/directivesynclog/directiveSyncLogMain/list',
|
||||
save='/directivesynclog/directiveSyncLogMain/add',
|
||||
edit='/directivesynclog/directiveSyncLogMain/edit',
|
||||
deleteOne = '/directivesynclog/directiveSyncLogMain/delete',
|
||||
deleteBatch = '/directivesynclog/directiveSyncLogMain/deleteBatch',
|
||||
importExcel = '/directivesynclog/directiveSyncLogMain/importExcel',
|
||||
exportXls = '/directivesynclog/directiveSyncLogMain/exportXls',
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出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 });
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
* @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 });
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import { BasicColumn } from '/@/components/Table';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import { rules } from '/@/utils/helper/validator';
|
||||
import { render } from '/@/utils/common/renderUtils';
|
||||
import { getWeekMonthQuarterYear } from '/@/utils';
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '发起机构',
|
||||
align: 'center',
|
||||
dataIndex: 'opeOrgCode_dictText',
|
||||
},
|
||||
{
|
||||
title: '被镜像机构',
|
||||
align: 'center',
|
||||
dataIndex: 'targetOrgCode_dictText',
|
||||
},
|
||||
{
|
||||
title: '镜像日期',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '镜像码',
|
||||
align: 'center',
|
||||
dataIndex: 'orgDirectiveCode',
|
||||
},
|
||||
];
|
||||
|
||||
// 高级查询数据
|
||||
export const superQuerySchema = {
|
||||
opeOrgCode: {
|
||||
title: '哪个机构镜像的',
|
||||
order: 0,
|
||||
view: 'list',
|
||||
type: 'string',
|
||||
dictTable: 'sys_depart',
|
||||
dictCode: 'org_code',
|
||||
dictText: 'depart_name',
|
||||
},
|
||||
targetOrgCode: {
|
||||
title: '镜像的哪个机构的指令',
|
||||
order: 1,
|
||||
view: 'list',
|
||||
type: 'string',
|
||||
dictTable: 'sys_depart',
|
||||
dictCode: 'org_code',
|
||||
dictText: 'depart_name',
|
||||
},
|
||||
orgDirectiveCode: { title: '指令镜像码', order: 2, view: 'text', type: 'string' },
|
||||
createTime: { title: '创建日期', order: 3, view: 'datetime', type: 'string' },
|
||||
};
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="opeOrgCode">
|
||||
<template #label><span title="发起机构">发起机构</span></template>
|
||||
<j-dict-select-tag v-model:value="queryParam.opeOrgCode" dictCode="sys_depart,depart_name,org_code"
|
||||
placeholder="请选择发起机构" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="targetOrgCode">
|
||||
<template #label><span title="被镜像机构">被镜像机构</span></template>
|
||||
<j-dict-select-tag placeholder="请选择被镜像机构" v-model:value="queryParam.targetOrgCode"
|
||||
dictCode="sys_depart,depart_name,org_code" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="createTime">
|
||||
<template #label><span title="镜像日期">镜像日期</span></template>
|
||||
<a-range-picker value-format="YYYY-MM-DD" v-model:value="queryParam.createTime"
|
||||
class="query-group-cust" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="orgDirectiveCode">
|
||||
<template #label><span title="镜像码">镜像码</span></template>
|
||||
<JInput placeholder="请输入镜像码" v-model:value="queryParam.orgDirectiveCode" allow-clear></JInput>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<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>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!-- 表单区域 -->
|
||||
<DirectiveSyncLogInfoModal ref="registerModal" @success="handleSuccess"></DirectiveSyncLogInfoModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="directivesynclog-directiveSyncLogMain" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columns, superQuerySchema } from './DirectiveSyncLogMain.data';
|
||||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DirectiveSyncLogMain.api';
|
||||
import { downloadFile } from '/@/utils/common/renderUtils';
|
||||
import DirectiveSyncLogInfoModal from './components/DirectiveSyncLogInfoModal.vue'
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
const userStore = useUserStore();
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '服务指令镜像日志主表',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
let rangerQuery = await setRangeQuery();
|
||||
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: 6,
|
||||
xxl: 5
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
});
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
function handleDetail(record: Recordable) {
|
||||
registerModal.value.disableSubmit = true;
|
||||
registerModal.value.edit(record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteOne({ id: record.id }, handleSuccess);
|
||||
}
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
formRef.value.resetFields();
|
||||
selectedRowKeys.value = [];
|
||||
//刷新数据
|
||||
reload();
|
||||
}
|
||||
|
||||
|
||||
let rangeField = 'createTime,'
|
||||
|
||||
/**
|
||||
* 设置范围查询条件
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0px;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
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: 14px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/directivesynclog/directiveSyncLogInfo/list',
|
||||
save='/directivesynclog/directiveSyncLogInfo/add',
|
||||
edit='/directivesynclog/directiveSyncLogInfo/edit',
|
||||
deleteOne = '/directivesynclog/directiveSyncLogInfo/delete',
|
||||
deleteBatch = '/directivesynclog/directiveSyncLogInfo/deleteBatch',
|
||||
importExcel = '/directivesynclog/directiveSyncLogInfo/importExcel',
|
||||
exportXls = '/directivesynclog/directiveSyncLogInfo/exportXls',
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出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 });
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
* @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 });
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import {BasicColumn} from '/@/components/Table';
|
||||
import {FormSchema} from '/@/components/Table';
|
||||
import { rules} from '/@/utils/helper/validator';
|
||||
import { render } from '/@/utils/common/renderUtils';
|
||||
import { getWeekMonthQuarterYear } from '/@/utils';
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '分类标签名称',
|
||||
align: "center",
|
||||
dataIndex: 'instructionTagName'
|
||||
},
|
||||
{
|
||||
title: '服务类别名称',
|
||||
align: "center",
|
||||
dataIndex: 'categoryName'
|
||||
},
|
||||
{
|
||||
title: '服务类型名称',
|
||||
align: "center",
|
||||
dataIndex: 'typeName'
|
||||
},
|
||||
{
|
||||
title: '服务指令名称',
|
||||
align: "center",
|
||||
dataIndex: 'directiveName'
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: "center",
|
||||
dataIndex: 'cycleType_dictText'
|
||||
},
|
||||
];
|
||||
|
||||
// 高级查询数据
|
||||
export const superQuerySchema = {
|
||||
instructionTagName: {title: '分类标签名称',order: 0,view: 'text', type: 'string',},
|
||||
categoryName: {title: '服务类别名称',order: 1,view: 'text', type: 'string',},
|
||||
typeName: {title: '服务类型名称',order: 2,view: 'text', type: 'string',},
|
||||
directiveName: {title: '服务指令名称',order: 3,view: 'text', type: 'string',},
|
||||
cycleType: {title: '周期类型 1日常护理 2周期护理 3即时护理',order: 6,view: 'text', type: 'string',},
|
||||
};
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<JFormContainer :disabled="disabled">
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="DirectiveSyncLogInfoForm">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="分类标签名称" v-bind="validateInfos.instructionTagName" id="DirectiveSyncLogInfoForm-instructionTagName" name="instructionTagName">
|
||||
<a-input v-model:value="formData.instructionTagName" placeholder="请输入分类标签名称" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务类别名称" v-bind="validateInfos.categoryName" id="DirectiveSyncLogInfoForm-categoryName" name="categoryName">
|
||||
<a-input v-model:value="formData.categoryName" placeholder="请输入服务类别名称" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务类型名称" v-bind="validateInfos.typeName" id="DirectiveSyncLogInfoForm-typeName" name="typeName">
|
||||
<a-input v-model:value="formData.typeName" placeholder="请输入服务类型名称" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务指令名称" v-bind="validateInfos.directiveName" id="DirectiveSyncLogInfoForm-directiveName" name="directiveName">
|
||||
<a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="收费价格" v-bind="validateInfos.tollPrice" id="DirectiveSyncLogInfoForm-tollPrice" name="tollPrice">
|
||||
<a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="提成价格" v-bind="validateInfos.comPrice" id="DirectiveSyncLogInfoForm-comPrice" name="comPrice">
|
||||
<a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="周期类型 1日常护理 2周期护理 3即时护理" v-bind="validateInfos.cycleType" id="DirectiveSyncLogInfoForm-cycleType" name="cycleType">
|
||||
<a-input v-model:value="formData.cycleType" placeholder="请输入周期类型 1日常护理 2周期护理 3即时护理" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务说明" v-bind="validateInfos.serviceContent" id="DirectiveSyncLogInfoForm-serviceContent" name="serviceContent">
|
||||
<a-input v-model:value="formData.serviceContent" placeholder="请输入服务说明" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务时长（分钟）" v-bind="validateInfos.serviceDuration" id="DirectiveSyncLogInfoForm-serviceDuration" name="serviceDuration">
|
||||
<a-input v-model:value="formData.serviceDuration" placeholder="请输入服务时长（分钟）" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="语音文件" v-bind="validateInfos.mp3File" id="DirectiveSyncLogInfoForm-mp3File" name="mp3File">
|
||||
<a-input v-model:value="formData.mp3File" placeholder="请输入语音文件" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="视频文件" v-bind="validateInfos.mp4File" id="DirectiveSyncLogInfoForm-mp4File" name="mp4File">
|
||||
<a-input v-model:value="formData.mp4File" placeholder="请输入视频文件" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务指令图片大图" v-bind="validateInfos.previewFile" id="DirectiveSyncLogInfoForm-previewFile" name="previewFile">
|
||||
<a-input v-model:value="formData.previewFile" placeholder="请输入服务指令图片大图" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务指令图片小图" v-bind="validateInfos.previewFileSmall" id="DirectiveSyncLogInfoForm-previewFileSmall" name="previewFileSmall">
|
||||
<a-input v-model:value="formData.previewFileSmall" placeholder="请输入服务指令图片小图" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="即时指令图片" v-bind="validateInfos.immediateFile" id="DirectiveSyncLogInfoForm-immediateFile" name="immediateFile">
|
||||
<a-input v-model:value="formData.immediateFile" placeholder="请输入即时指令图片" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="即时指令焦点图片" v-bind="validateInfos.immediateFileFocus" id="DirectiveSyncLogInfoForm-immediateFileFocus" name="immediateFileFocus">
|
||||
<a-input v-model:value="formData.immediateFileFocus" placeholder="请输入即时指令焦点图片" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</JFormContainer>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { saveOrUpdate } from '../DirectiveSyncLogInfo.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({})},
|
||||
formBpm: { type: Boolean, default: true }
|
||||
});
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
instructionTagName: '',
|
||||
categoryName: '',
|
||||
typeName: '',
|
||||
directiveName: '',
|
||||
tollPrice: undefined,
|
||||
comPrice: undefined,
|
||||
cycleType: '',
|
||||
serviceContent: '',
|
||||
serviceDuration: '',
|
||||
mp3File: '',
|
||||
mp4File: '',
|
||||
previewFile: '',
|
||||
previewFileSmall: '',
|
||||
immediateFile: '',
|
||||
immediateFileFocus: '',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
//表单验证
|
||||
const validatorRules = reactive({
|
||||
});
|
||||
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;
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
edit({});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
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);
|
||||
//时间格式化
|
||||
let model = formData;
|
||||
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(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!-- 表单区域 -->
|
||||
<DirectiveSyncLogInfoModal ref="registerModal" @success="handleSuccess"></DirectiveSyncLogInfoModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="directivesynclog-directiveSyncLogInfo" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columns, superQuerySchema } from './DirectiveSyncLogInfo.data';
|
||||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DirectiveSyncLogInfo.api';
|
||||
import { downloadFile } from '/@/utils/common/renderUtils';
|
||||
import DirectiveSyncLogInfoModal from './DirectiveSyncLogInfoModal.vue'
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
const userStore = useUserStore();
|
||||
const mainInfo = ref({ id: '' })
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '服务指令镜像日志详情表',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
showActionColumn: false,
|
||||
immediate: false,
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
queryParam.pkId = mainInfo.value.id
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
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: 6,
|
||||
xxl: 4
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
});
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
function handleDetail(record: Recordable) {
|
||||
registerModal.value.disableSubmit = true;
|
||||
registerModal.value.edit(record);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function init(mainInfo_) {
|
||||
mainInfo.value = mainInfo_;
|
||||
reload()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
});
|
||||
|
||||
</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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<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' }">
|
||||
<DirectiveSyncLogInfoList v-if="visible" ref="registerForm" @ok="submitCallback" :formBpm="false">
|
||||
</DirectiveSyncLogInfoList>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel" style="margin-right: 8px;">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import DirectiveSyncLogInfoList from './DirectiveSyncLogInfoList.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<number>(800);
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
title.value = '新增';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.add();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function edit(record) {
|
||||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -42,29 +42,6 @@
|
|||
dictCode="period_type" placeholder="请选择周期类型" :ignoreDisabled="true" 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"
|
||||
: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"
|
||||
: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 :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
|
|
@ -115,17 +92,11 @@ import { BasicTable, TableAction } from '/@/components/Table';
|
|||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columns, superQuerySchema } from './ConfigServiceDirective.data';
|
||||
import { listByDS } from './ConfigServiceDirective.api';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
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 { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
const userStore = useUserStore();
|
||||
const sourceOrgName = ref()//日志功能进来的-源平台机构名称
|
||||
const targetOrgName = ref()//日志功能进来的-目标平台机构名称
|
||||
//注册table数据
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<template>
|
||||
<!-- <j-modal :title="title" width="75vw" :visible="visible" @cancel="handleCancel" cancelText="关闭" :maskClosable="false">
|
||||
<ConfigServiceDirectiveList ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ConfigServiceDirectiveList>
|
||||
</j-modal> -->
|
||||
<a-drawer :title="title" width="80vw" v-model:visible="visible" v-if="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
|
||||
<ConfigServiceDirectiveList ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
|
||||
|
|
@ -15,7 +12,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose, defineProps } from 'vue';
|
||||
import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const props = defineProps({
|
||||
sysUrlValue: { type: String, default: '' },
|
||||
|
|
|
|||
|
|
@ -17,141 +17,93 @@
|
|||
style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
<a-col :lg="12" style="text-align: right;">
|
||||
<a-button type="primary" preIcon="ant-design:cloud-sync-outlined" @click="handleJingxiang"
|
||||
style="margin-right: 10px;">镜像</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:file-text-twotone" @click="handleViewLogs"
|
||||
style="margin-right: 10px;">日志</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:safety-certificate-twotone" @click="handleDirectiveMainFunc"
|
||||
style="margin-right: 10px;">标准指令库</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:profile-outlined" @click="handleOpeLogOpen"
|
||||
style="margin-right: 10px;">操作日志</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:file-sync-outlined" @click="handleSyncLogOpen"
|
||||
style="margin-right: 10px;">镜像日志</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:copy-outlined" @click="handleDirectiveBackups"
|
||||
style="margin-right: 10px;">指令备份</a-button>
|
||||
<!-- <a-badge :count="609" style="margin-right: 10px;"> -->
|
||||
<!-- <a-button type="primary" preIcon="ant-design:eye-outlined" style="margin-right: 10px;"
|
||||
@click="handleLookNewDirectives">新增指令</a-button> -->
|
||||
<!-- </a-badge> -->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<OrgListCom ref="orgListComRef" :title="queryParam.title" @handleOrgDetail="handleDetail" :showDetail=true
|
||||
<OrgListCom ref="orgListComRef" :title="queryParam.title" @handleOrgDetail="handleDetail" :showDetail=true
|
||||
:showDMTip="true">
|
||||
</OrgListCom>
|
||||
|
||||
<ConfigServiceDirectiveListModal ref="configServiceDirectiveListModal" />
|
||||
<SyncStepListModal ref="syncStepListModal" />
|
||||
<!-- <a-modal v-model:visible="logsVisible" title="日志" width="90vw"
|
||||
:bodyStyle="{ height: '70vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCancelLogs">
|
||||
<a-row>
|
||||
<a-col :span="2" :push="22" style="margin-top: 15px;margin-left: 60px;">
|
||||
<a-button type="primary" @click="handleRefreshLogs" title="刷新">
|
||||
刷新
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 操作日志 -->
|
||||
<a-drawer v-model:visible="opeLogOpen" title="操作日志" width="80vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ padding: '0px', height: '80vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleOpeLogClose">
|
||||
<template #footer>
|
||||
<a-button @click="handleCancelLogs" type="primary">关闭</a-button>
|
||||
<a-button @click="handleOpeLogClose" type="primary">关闭</a-button>
|
||||
</template>
|
||||
<AsyncListComponent ref="logsRef"></AsyncListComponent>
|
||||
</a-modal> -->
|
||||
<a-drawer title="日志" width="85vw" v-model:visible="logsVisible"
|
||||
:bodyStyle="{ height: '70vh', display: 'flex',padding:'14px', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCancelLogs">
|
||||
<a-row style="overflow-x: hidden !important; background-color: white;">
|
||||
<a-col :span="2" :push="22" style="margin-top: 18px;margin-left: 30px;">
|
||||
<a-button type="primary" @click="handleRefreshLogs" title="刷新">
|
||||
刷新
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<AsyncListComponent ref="logsRef" :type="'directive'" @handleDetail="handleDetail"></AsyncListComponent>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancelLogs" type="primary" style="float:right;">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
<!-- 标准指令库 -->
|
||||
<a-drawer v-model:visible="directiveMainVisible" title="标准指令库" width="85vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ height: '70vh', display: 'flex',padding:'14px', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCanceldirectiveMain">
|
||||
<template #footer>
|
||||
<a-button @click="handleCanceldirectiveMain" type="primary" style="margin-right: 10px;">关闭</a-button>
|
||||
<a-button @click="handleAsyncdirectiveMain" type="primary">确认</a-button>
|
||||
</template>
|
||||
<OrgListCom ref="directiveMainComRef" :showDirectiveMain=true :showDirectiveChoose="true"
|
||||
@handleOrgDetail="handleDetail" :showDetail=true @handleOrgChoose="directiveMainFunc">
|
||||
</OrgListCom>
|
||||
</a-drawer>
|
||||
<!-- 新增指令 -->
|
||||
<a-drawer v-model:visible="newDirectiveVisible" title="新增指令" width="85vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ height: '80vh', display: 'flex',padding:'14px', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleCancelNewDirective">
|
||||
<template #footer>
|
||||
<a-button @click="handleCancelNewDirective" type="primary">关闭</a-button>
|
||||
<!-- <a-button @click="handleAsyncNewDirective" type="primary">同步</a-button> -->
|
||||
</template>
|
||||
<div style="padding:0px 8px;">
|
||||
<CanAddDirectiveList ref="canAddDirectiveRef" :directiveMainOrgInfo="directiveMainOrgInfo"
|
||||
:existDirectiveIds="existDirectiveIds" @refreshExistIds="refreshDMExistedIds"></CanAddDirectiveList>
|
||||
<div>
|
||||
<DirectiveOpeLogMainList v-if="opeLogOpen" ref="opeLogRef"></DirectiveOpeLogMainList>
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 镜像日志 -->
|
||||
<a-drawer v-model:visible="syncLogOpen" title="镜像日志" width="80vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ padding: '0px', height: '80vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleSyncLogClose">
|
||||
<template #footer>
|
||||
<a-button @click="handleSyncLogClose" type="primary">关闭</a-button>
|
||||
</template>
|
||||
<div>
|
||||
<DirectiveSyncLogMainList v-if="syncLogOpen" ref="syncLogRef"></DirectiveSyncLogMainList>
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 指令备份 -->
|
||||
<a-drawer v-model:visible="directiveBackupsOpen" title="指令备份" width="85vw" :footer-style="{ textAlign: 'right' }"
|
||||
:bodyStyle="{ padding:'14px', height: '80vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
|
||||
:bodyStyle="{ padding: '14px', height: '80vh', display: 'flex', flexDirection: 'column', overflow: 'auto' }"
|
||||
wrapClassName="org-list-modal" @cancel="handleDirectiveBackupsClose">
|
||||
<template #footer>
|
||||
<a-button @click="handleDirectiveBackupsClose" type="primary">关闭</a-button>
|
||||
</template>
|
||||
<div >
|
||||
<div>
|
||||
<DirectiveBkMainList v-if="directiveBackupsOpen" ref="backupsRef"></DirectiveBkMainList>
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
<ConfigServiceDirectiveListModal ref="configServiceDirectiveListModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="synchronization-directive2" lang="ts">
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
|
||||
// 以下为服务指令引用：
|
||||
import { list, asyncFunc, departList } from '@/views/services/serviceDirective/ConfigServiceDirective.api';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
import ConfigServiceDirectiveListModal from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue';
|
||||
import SyncStepListModal from '/@/views/synchronization/directive/syncStep/SyncStepListModal.vue';
|
||||
//机构信息
|
||||
import { getOrgInfo } from '/@/views/admin/orgapplyinfo/OrgApplyInfo.api';
|
||||
//机构列表
|
||||
import OrgListCom from '/@/views/synchronization/directive/orgCom/OrgListCom.vue'
|
||||
//可新增指令
|
||||
import CanAddDirectiveList from '/@/views/synchronization/directive/canadddirective/CanAddDirectiveList.vue'
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import AsyncListComponent from '@/components/dataAsync/AsyncMainList0731.vue'
|
||||
import { getDirectiveMain, changeDirectiveMain } from '/@/api/common/api'
|
||||
import { idListByDS } from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api';
|
||||
import { nextTick } from 'process';
|
||||
import DirectiveBkMainList from '/@/views/services/directivebk/DirectiveBkMainList.vue'
|
||||
import DirectiveSyncLogMainList from './directivesynclog/DirectiveSyncLogMainList.vue'
|
||||
import DirectiveOpeLogMainList from './directiveopelog/DirectiveOpeLogMainList.vue'
|
||||
|
||||
const { createMessage } = useMessage()
|
||||
const { createMessage, createConfirm } = useMessage()
|
||||
const canAddDirectiveRef = ref()
|
||||
const newDirectiveVisible = ref(false)
|
||||
const directiveMainComRef = ref();
|
||||
const newDirectiveRef = ref()
|
||||
const logsRef = ref()
|
||||
const formRef = ref();
|
||||
const configServiceDirectiveListModal = ref();
|
||||
const syncStepListModal = ref();
|
||||
const orgTableList = ref<any>([]);
|
||||
const queryParam = reactive<any>({});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 8 })
|
||||
const orgListComRef = ref()
|
||||
const logsVisible = ref(false)
|
||||
const directiveMainVisible = ref(false)
|
||||
const { createConfirm } = useMessage();
|
||||
const existDirectiveIds = ref([])//指令库已存在指令id
|
||||
const directiveMainOrgInfo = ref()
|
||||
const directiveBackupsOpen = ref(false)
|
||||
const syncLogOpen = ref(false)
|
||||
const backupsRef = ref()//指令备份
|
||||
const syncLogRef = ref()//镜像日志ref
|
||||
const opeLogOpen = ref(false)
|
||||
const opeLogRef = ref()
|
||||
|
||||
const labelCol = reactive({
|
||||
xs: 24,
|
||||
|
|
@ -164,13 +116,6 @@ const wrapperCol = reactive({
|
|||
sm: 20,
|
||||
});
|
||||
|
||||
/**
|
||||
* 镜像
|
||||
*/
|
||||
function handleJingxiang() {
|
||||
syncStepListModal.value.init(null);
|
||||
syncStepListModal.value.disableSubmit = true;
|
||||
}
|
||||
/**
|
||||
* 详情
|
||||
* @param record
|
||||
|
|
@ -203,57 +148,6 @@ function searchReset() {
|
|||
orgListComRef.value?.searchReset()
|
||||
}
|
||||
|
||||
/**
|
||||
* 日志
|
||||
*/
|
||||
function handleViewLogs() {
|
||||
logsVisible.value = true
|
||||
handleRefreshLogs()
|
||||
}
|
||||
|
||||
function handleLookNewDirectives() {
|
||||
newDirectiveVisible.value = true
|
||||
refreshDMExistedIds(directiveMainOrgInfo.value, true)
|
||||
}
|
||||
|
||||
//关闭日志模态框
|
||||
function handleCancelLogs() {
|
||||
logsVisible.value = false
|
||||
}
|
||||
|
||||
//刷新日志
|
||||
function handleRefreshLogs() {
|
||||
logsRef.value?.searchQuery()
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭新增指令
|
||||
*/
|
||||
function handleCancelNewDirective() {
|
||||
newDirectiveVisible.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步新增指令
|
||||
*/
|
||||
function handleAsyncNewDirective() {
|
||||
// newDirectiveRef
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开指令库
|
||||
*/
|
||||
function handleDirectiveMainFunc() {
|
||||
directiveMainVisible.value = true
|
||||
directiveMainComRef.value?.reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭指令库
|
||||
*/
|
||||
function handleCanceldirectiveMain() {
|
||||
directiveMainVisible.value = false
|
||||
}
|
||||
|
||||
//刷新已有指令库
|
||||
function refreshDMExistedIds(dmOrgInfo, izReset = false, izQuery = true) {
|
||||
|
|
@ -282,41 +176,11 @@ function handleDirectiveBackupsClose() {
|
|||
}
|
||||
|
||||
watch(directiveMainOrgInfo, (newValue, oldValue) => {
|
||||
refreshDMExistedIds(newValue)
|
||||
if (newValue) {
|
||||
refreshDMExistedIds(newValue)
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
const tempDM = ref()
|
||||
/**
|
||||
* 指令库对应机构信息
|
||||
*/
|
||||
function directiveMainFunc(orgInfo_) {
|
||||
tempDM.value = orgInfo_
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认指令库
|
||||
*/
|
||||
function handleAsyncdirectiveMain() {
|
||||
// createConfirm({
|
||||
// iconType: 'warning',
|
||||
// title: '指令库变更提醒',
|
||||
// content: '是否变更指令库为：' + tempDM.value.departName,
|
||||
// okText: '确认',
|
||||
// cancelText: '取消',
|
||||
// onOk: () => {
|
||||
directiveMainOrgInfo.value = tempDM.value
|
||||
changeDirectiveMain(directiveMainOrgInfo.value.orgCode).then(() => {
|
||||
createMessage.success('标准指令库已变更')
|
||||
handleCanceldirectiveMain()
|
||||
canAddDirectiveRef.value?.reload()
|
||||
orgListComRef.value?.reload()
|
||||
}).catch(() => {
|
||||
createMessage.error('指令库变更失败，请稍后再试')
|
||||
})
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
//获取指令库机构信息
|
||||
function getDirectiveMainOrgInfo() {
|
||||
getDirectiveMain().then(res => {
|
||||
|
|
@ -324,7 +188,25 @@ function getDirectiveMainOrgInfo() {
|
|||
})
|
||||
}
|
||||
|
||||
//查看镜像日志
|
||||
function handleSyncLogOpen() {
|
||||
syncLogOpen.value = true
|
||||
}
|
||||
|
||||
//关闭镜像日志
|
||||
function handleSyncLogClose() {
|
||||
syncLogOpen.value = false
|
||||
}
|
||||
|
||||
//查看操作日志
|
||||
function handleOpeLogOpen() {
|
||||
opeLogOpen.value = true
|
||||
}
|
||||
|
||||
//关闭操作日志
|
||||
function handleOpeLogClose() {
|
||||
opeLogOpen.value = false
|
||||
}
|
||||
|
||||
// 自动请求并暴露内部方法
|
||||
onMounted(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue