<template>
|
<div class="sys-org-container">
|
<el-row :gutter="5" style="width: 100%; flex: 1">
|
<el-col :span="4" :xs="24">
|
<OrgTree ref="orgTreeRef" @node-click="nodeClick" />
|
</el-col>
|
<el-col :span="20" :xs="24" style="display: flex; flex-direction: column">
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<el-form :model="state.queryParams" ref="queryForm" :inline="true">
|
<el-form-item label="帮助文档名称">
|
<el-input disabled="" v-model="state.queryParams.name" placeholder="帮助文档名称" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button-group>
|
<el-button type="primary" icon="ele-Collection" @click="submit" v-auth="'wmsSysHelpDoc:add'"> 保存 </el-button>
|
<!-- <el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button> -->
|
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
|
</el-button-group>
|
</el-form-item>
|
<el-form-item> </el-form-item>
|
</el-form>
|
</el-card>
|
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
|
<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="wmsSysHelpDoc">
|
import { onMounted, reactive, ref, onBeforeUnmount, shallowRef } from 'vue';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
import OrgTree from './component/helpTree.vue';
|
import { getAPI } from '/@/utils/axios-utils';
|
import { SysOrgApi, SysDictDataApi } from '/@/api-services/api';
|
import { SysOrg } from '/@/api-services/models';
|
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
//编辑器
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
import { addWmsSysHelpDoc, pageWmsSysHelpDoc, updateWmsSysHelpDoc } from '/@/api/main/WmsSystem/wmsSysHelpDoc';
|
import { SysFileApi } from '/@/api-services/api';
|
|
// 编辑器实例，必须用 shallowRef
|
const editorRef = shallowRef();
|
|
const mode = ref('default');
|
// 内容 HTML
|
const valueHtml = ref('');
|
|
const toolbarConfig = {};
|
const editorConfig = {
|
placeholder: '请输入内容...',
|
// 菜单配置
|
MENU_CONF: {
|
uploadImage: {
|
fieldName: 'file',
|
customUpload(file: any, insertFn: any) {
|
// console.log('customUpload', file);
|
const uploadFun = async () => {
|
const rps = await getAPI(SysFileApi).apiSysFileUploadFilePostForm(file);
|
if (rps.data.type == 'success' && rps.data.result != null) {
|
insertFn(rps.data.result.url, rps.data.result.name, rps.data.result.url);
|
} else {
|
ElMessage.error('上传失败！');
|
}
|
};
|
uploadFun();
|
},
|
},
|
insertImage: {
|
checkImage(src: string, alt: string, href: string): boolean | string | undefined {
|
if (src.indexOf('http') !== 0) {
|
return '图片网址必须以 http/https 开头';
|
}
|
return true;
|
},
|
},
|
},
|
};
|
|
// 组件销毁时，也及时销毁编辑器
|
onBeforeUnmount(() => {
|
const editor = editorRef.value;
|
if (editor == null) return;
|
editor.destroy();
|
});
|
|
const handleCreated = (editor: any) => {
|
editorRef.value = editor; // 记录 editor 实例，重要！
|
};
|
|
const loading = ref(false);
|
const disabled_btn = ref(false);
|
|
// 提交
|
const submit = async () => {
|
if (!state.queryParams.name) {
|
ElMessage.warning('请选择左侧帮助文档菜单！');
|
return;
|
}
|
debugger
|
if (state.queryParams.menuType != 2) {
|
ElMessage.warning('帮助文档名称不是菜单！');
|
return;
|
}
|
if (!state.queryParams.keyId) {
|
//---------------------新增
|
disabled_btn.value = true;
|
loading.value = true;
|
let values = {
|
helpContext: valueHtml.value,
|
helpFlagId: state.queryParams.helpFlagId
|
};
|
debugger;
|
let ret = await addWmsSysHelpDoc(values);
|
loading.value = false;
|
if (ret.data.type == 'success') {
|
ElMessage.success('保存成功');
|
state.queryParams.name = ""
|
valueHtml.value =""
|
}
|
disabled_btn.value = false;
|
// ElMessage.warning('菜单路由helpFlagId没有！');
|
} else {
|
//------------------------编辑
|
if (!state.queryParams.helpFlagId) { //helpFlagId
|
ElMessage.warning('菜单路由helpFlagId没有！');
|
return;
|
}
|
if (!valueHtml.value) {
|
ElMessage.warning('请填写帮助文档内容！');
|
return;
|
}
|
disabled_btn.value = true;
|
loading.value = true;
|
let values = {
|
helpContext: valueHtml.value,
|
helpFlagId: state.queryParams.helpFlagId,
|
id: state.queryParams.keyId,
|
};
|
debugger;
|
let ret = await updateWmsSysHelpDoc(values);
|
loading.value = false;
|
if (ret.data.type == 'success') {
|
ElMessage.success('保存成功');
|
state.queryParams.name = ""
|
valueHtml.value =""
|
}
|
disabled_btn.value = false;
|
}
|
};
|
|
const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
|
const state = reactive({
|
loading: false,
|
orgData: [] as Array<SysOrg>, // 列表数据
|
orgTreeData: [] as Array<SysOrg>, // 树所有数据
|
queryParams: {
|
helpFlagId: '', //菜单路由上面的id
|
keyId: '', //数据的唯一值id
|
name: '',
|
code: '',
|
type: '',
|
menuType: '', //菜单类型（1目录 2菜单 3按钮）
|
},
|
editOrgTitle: '',
|
orgTypeList: [] as any,
|
});
|
|
onMounted(async () => {
|
|
});
|
|
|
// 重置操作
|
const resetQuery = () => {
|
valueHtml.value = '';
|
state.queryParams.name = '';
|
state.queryParams.helpFlagId = '';
|
state.queryParams.menuType = '';
|
state.queryParams.keyId = '';
|
};
|
|
|
// 树组件点击
|
const nodeClick = async (node: any) => {
|
if (node.type != 2) {
|
//不是菜单 是目录或者按钮
|
valueHtml.value = '';
|
state.queryParams.keyId = '';
|
return;
|
}
|
state.queryParams.name = node.name; //新增用
|
state.queryParams.menuType = node.type; ////新增用 菜单类型（1目录 2菜单 3按钮）
|
// var helpFlagId = node.path.split('?')[1]?.split('=')[1]; ///doc/element2/ypchild1?helpFlagId=1"
|
var helpFlagId = node.id;
|
debugger;
|
if (!helpFlagId) {
|
return;
|
}
|
state.queryParams.helpFlagId = helpFlagId; //新增用
|
var res = await pageWmsSysHelpDoc({
|
helpFlagId: helpFlagId,
|
pageSize: 1,
|
});
|
if (res.data.type == 'success') {
|
var arr = res.data.result?.items;
|
if (arr.length > 0 && arr.length == 1) {
|
state.queryParams.name = node.name;
|
state.queryParams.menuType = node.type;
|
valueHtml.value = arr[0].helpContext; // valueHtml.value = '<p>设置内容</p>';
|
state.queryParams.keyId = arr[0].id;
|
state.queryParams.helpFlagId = arr[0].helpFlagId;
|
} else {
|
valueHtml.value = '';
|
state.queryParams.keyId = '';
|
}
|
}
|
};
|
|
|
</script>
|
