创建文档
This commit is contained in:
33
docs/.vuepress/components/Bit.vue
Normal file
33
docs/.vuepress/components/Bit.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<p class="bit-sponsor">
|
||||
<a
|
||||
href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>This project is sponsored by</span>
|
||||
<img
|
||||
alt="bit"
|
||||
src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png"
|
||||
>
|
||||
</a>
|
||||
<el-button>默认按钮</el-button>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.bit-sponsor
|
||||
font-weight 600
|
||||
background-color #f3f6f8
|
||||
padding 0.6em 1.2em
|
||||
border-radius 8px
|
||||
display inline-block
|
||||
margin 1em 0 !important
|
||||
a
|
||||
color #999
|
||||
img
|
||||
height 40px
|
||||
margin-left 15px
|
||||
img, span
|
||||
vertical-align middle
|
||||
</style>
|
||||
306
docs/.vuepress/components/Bpmn/bpmn.vue
Normal file
306
docs/.vuepress/components/Bpmn/bpmn.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="bpmn-container">
|
||||
<div ref="canvas" class="bpmn-canvas" />
|
||||
<div id="js-properties-panel" class="bpmn-js-properties-panel" />
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<el-upload action class="upload-demo" :before-upload="openBpmn">
|
||||
<el-button icon="el-icon-folder-opened" />
|
||||
</el-upload>
|
||||
<el-button class="new" icon="el-icon-circle-plus" @click="newDiagram" />
|
||||
<el-button icon="el-icon-download" @click="downloadBpmn" />
|
||||
<el-button icon="el-icon-picture" @click="downloadSvg" />
|
||||
<el-button v-if="updateDate!=undefined" icon="el-icon-upload" @click="handleUpdateData" />
|
||||
<a ref="downloadLink" hidden />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BpmnModeler from "bpmn-js/lib/Modeler";
|
||||
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
|
||||
import propertiesPanelModule from "bpmn-js-properties-panel";
|
||||
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
|
||||
import customTranslate from "./customTranslate/customTranslate";
|
||||
|
||||
export default {
|
||||
name: "Bpmn",
|
||||
props: {
|
||||
updateBpmnFlag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
updateDate: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnModeler: null,
|
||||
canvas: null,
|
||||
bpmnTemplate: `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions
|
||||
xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||||
xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
|
||||
xmlns:camunda="http://camunda.org/schema/1.0/bpmn"
|
||||
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
|
||||
xmlns:activiti="http://activiti.org/bpmn"
|
||||
id="m1577635100724"
|
||||
name=""
|
||||
targetNamespace="http://www.activiti.org/testm1577635100724"
|
||||
>
|
||||
<process id="process" name="" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties>
|
||||
</camunda:properties>
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start" />
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="leave">
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`,
|
||||
bpmnNameFrom: null,
|
||||
editBpmnFile: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (this.updateDate != undefined) {
|
||||
this.initUpdateDate();
|
||||
}
|
||||
this.initBpmn();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initUpdateDate() {
|
||||
if (this.updateBpmnFlag) {
|
||||
const updateDate = this.updateDate.replace(new RegExp("activiti:", "gm"), "camunda:");
|
||||
this.editBpmnFile = this.updateDate;
|
||||
} else {
|
||||
this.bpmnNameFrom = this.updateDate;
|
||||
}
|
||||
},
|
||||
async initBpmn() {
|
||||
this.canvas = this.$refs.canvas;
|
||||
const customTranslateModule = {
|
||||
translate: ["value", customTranslate],
|
||||
};
|
||||
this.bpmnModeler = new BpmnModeler({
|
||||
container: this.canvas,
|
||||
propertiesPanel: {
|
||||
parent: "#js-properties-panel"
|
||||
},
|
||||
additionalModules: [
|
||||
propertiesProviderModule,
|
||||
propertiesPanelModule,
|
||||
customTranslateModule,
|
||||
],
|
||||
moddleExtensions: {
|
||||
camunda: camundaModdleDescriptor,
|
||||
},
|
||||
});
|
||||
|
||||
if (this.updateBpmnFlag) {
|
||||
await this.createNewDiagram(this.editBpmnFile);
|
||||
} else {
|
||||
await this.createNewDiagram(this.bpmnTemplate);
|
||||
}
|
||||
},
|
||||
replaceString(xml, nodeName, property, propertyLength, replaceChar) {
|
||||
const node = xml.indexOf(nodeName);
|
||||
let xmlName = xml.substr(node, xml.indexOf(property));
|
||||
const begin = node + xmlName.indexOf(property) + propertyLength;
|
||||
xmlName = xmlName.substr(xmlName.indexOf(property) + propertyLength);
|
||||
|
||||
const end = begin + xmlName.indexOf('"');
|
||||
|
||||
const fstStr = xml.substring(0, begin);
|
||||
const lstStr = xml.substring(end, xml.length);
|
||||
const newXml = fstStr + replaceChar + lstStr;
|
||||
|
||||
return newXml;
|
||||
},
|
||||
createNewDiagram(bpmn) {
|
||||
if (!this.updateBpmnFlag && this.updateDate != undefined) {
|
||||
bpmn = this.replaceString(
|
||||
bpmn,
|
||||
"process",
|
||||
"name",
|
||||
6,
|
||||
this.bpmnNameFrom.name
|
||||
);
|
||||
bpmn = this.replaceString(
|
||||
bpmn,
|
||||
"process",
|
||||
"id",
|
||||
4,
|
||||
this.bpmnNameFrom.key
|
||||
);
|
||||
}
|
||||
this.bpmnModeler.importXML(bpmn, (err) => {
|
||||
if (err) {
|
||||
this.$message({
|
||||
message: "打开模型出错,请确认该模型符合Bpmn2.0规范",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
newDiagram() {
|
||||
this.createNewDiagram(this.bpmnTemplate);
|
||||
},
|
||||
|
||||
downloadBpmn() {
|
||||
this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
|
||||
if (!err) {
|
||||
const name = `${this.getFilename(xml)}.bpmn`;
|
||||
this.download({ name: name, data: xml });
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadSvg() {
|
||||
this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
|
||||
if (!err) {
|
||||
const name = `${this.getFilename(xml)}.svg`;
|
||||
|
||||
let context = "";
|
||||
const djsGroupAll = this.$refs.canvas.querySelectorAll(".djs-group");
|
||||
for (const item of djsGroupAll) {
|
||||
context += item.innerHTML;
|
||||
}
|
||||
const viewport = this.$refs.canvas
|
||||
.querySelector(".viewport")
|
||||
.getBBox();
|
||||
|
||||
const svg = `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="${viewport.width}"
|
||||
height="${viewport.height}"
|
||||
viewBox="${viewport.x} ${viewport.y} ${viewport.width} ${viewport.height}"
|
||||
version="1.1"
|
||||
>
|
||||
${context}
|
||||
</svg>
|
||||
`;
|
||||
this.download({ name: name, data: svg });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
openBpmn(file) {
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file, "utf-8");
|
||||
reader.onload = () => {
|
||||
this.createNewDiagram(reader.result);
|
||||
};
|
||||
return false;
|
||||
},
|
||||
|
||||
getFilename(xml) {
|
||||
const start = xml.indexOf("process");
|
||||
let filename = xml.substr(start, xml.indexOf(">"));
|
||||
filename = filename.substr(filename.indexOf("id") + 4);
|
||||
filename = filename.substr(0, filename.indexOf('"'));
|
||||
return filename;
|
||||
},
|
||||
|
||||
getFileInfo(xml, nodeName, property, propertyLength) {
|
||||
const start = xml.indexOf(nodeName);
|
||||
let fileInfo = xml.substr(start, xml.indexOf(">"));
|
||||
fileInfo = fileInfo.substr(fileInfo.indexOf(property) + propertyLength);
|
||||
fileInfo = fileInfo.substr(0, fileInfo.indexOf('"'));
|
||||
return;
|
||||
},
|
||||
|
||||
download({ name = "diagram.bpmn", data }) {
|
||||
const downloadLink = this.$refs.downloadLink;
|
||||
data = data.replace(new RegExp("camunda:", "gm"), "activiti:");
|
||||
const encodedData = encodeURIComponent(data);
|
||||
|
||||
if (data) {
|
||||
downloadLink.href =
|
||||
"data:application/bpmn20-xml;charset=UTF-8," + encodedData;
|
||||
downloadLink.download = name;
|
||||
downloadLink.click();
|
||||
}
|
||||
},
|
||||
|
||||
handleUpdateData() {
|
||||
if (!this.updateBpmnFlag) {
|
||||
this.handleCreateData();
|
||||
} else {
|
||||
this.handleEditData();
|
||||
}
|
||||
},
|
||||
|
||||
handleCreateData() {
|
||||
this.bpmnModeler.saveXML({ format: true }, async (err, xml) => {
|
||||
if (!err) {
|
||||
const fileName = `${this.getFileInfo(xml, "process", "name", 6)}`;
|
||||
const filekey = `${this.getFileInfo(xml, "process", "id", 4)}.bpmn`;
|
||||
xml = xml.replace(new RegExp("camunda:", "gm"), "activiti:");
|
||||
this.$emit("createData", xml, filekey, fileName);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleEditData() {
|
||||
this.bpmnModeler.saveXML({ format: true }, async (err, xml) => {
|
||||
if (!err) {
|
||||
xml = xml.replace(new RegExp("camunda:", "gm"), "activiti:");
|
||||
this.$emit("editData", xml);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bpmn-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bpmn-canvas {
|
||||
width: calc(100% - 300px);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bpmn-js-properties-panel {
|
||||
width: 320px;
|
||||
height: inherit;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.action {
|
||||
position: absolute;
|
||||
right: 30rem;
|
||||
display: flex;
|
||||
margin-top: -40px;
|
||||
}
|
||||
.upload-demo {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
38
docs/.vuepress/components/Bpmn/bpmnView.vue
Normal file
38
docs/.vuepress/components/Bpmn/bpmnView.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div ref="showCanvas" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BpmnViewer from 'bpmn-js/lib/Viewer'
|
||||
export default {
|
||||
props: {
|
||||
showData: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
if (this.showData) {
|
||||
this.showBpmn(this.showData)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showBpmn (showData) {
|
||||
this.bpmnViewer && this.bpmnViewer.destroy()
|
||||
this.bpmnViewer = new BpmnViewer({ container: this.$refs.showCanvas })
|
||||
this.bpmnViewer.importXML(showData, (err) => {
|
||||
if (err) {
|
||||
this.$message({
|
||||
message: '打开模型出错,请确认该模型符合Bpmn2.0规范',
|
||||
type: 'error'
|
||||
})
|
||||
} else {
|
||||
this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto') // 居中显示
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
import translations from './translationsGerman'
|
||||
|
||||
export default function customTranslate (template, replacements) {
|
||||
replacements = replacements || {}
|
||||
|
||||
// Translate
|
||||
template = translations[template] || template
|
||||
|
||||
// Replace
|
||||
return template.replace(/{([^}]+)}/g, function (_, key) {
|
||||
var str = replacements[key]
|
||||
if (
|
||||
translations[replacements[key]] != null
|
||||
&& translations[replacements[key]] != 'undefined'
|
||||
) {
|
||||
str = translations[replacements[key]]
|
||||
}
|
||||
return str || '{' + key + '}'
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
export default {
|
||||
// Labels
|
||||
'Activate the global connect tool': '激活全局连接工具',
|
||||
'Append {type}': '添加 {type}',
|
||||
'Add Lane above': '在上面添加道',
|
||||
'Divide into two Lanes': '分割成两个道',
|
||||
'Divide into three Lanes': '分割成三个道',
|
||||
'Add Lane below': '在下面添加道',
|
||||
'Append compensation activity': '追加补偿活动',
|
||||
'Change type': '修改类型',
|
||||
'Connect using Association': '使用关联连接',
|
||||
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
|
||||
'Connect using DataInputAssociation': '使用数据输入关联连接',
|
||||
'Remove': '移除',
|
||||
'Activate the hand tool': '激活抓手工具',
|
||||
'Activate the lasso tool': '激活套索工具',
|
||||
'Activate the create/remove space tool': '激活创建/删除空间工具',
|
||||
'Create expanded SubProcess': '创建扩展子过程',
|
||||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
|
||||
'Create Pool/Participant': '创建池/参与者',
|
||||
'Parallel Multi Instance': '并行多重事件',
|
||||
'Sequential Multi Instance': '时序多重事件',
|
||||
'DataObjectReference': '数据对象参考',
|
||||
'DataStoreReference': '数据存储参考',
|
||||
'Loop': '循环',
|
||||
'Ad-hoc': '即席',
|
||||
'Create {type}': '创建 {type}',
|
||||
'Task': '任务',
|
||||
'Send Task': '发送任务',
|
||||
'Receive Task': '接收任务',
|
||||
'User Task': '用户任务',
|
||||
'Manual Task': '手工任务',
|
||||
'Business Rule Task': '业务规则任务',
|
||||
'Service Task': '服务任务',
|
||||
'Script Task': '脚本任务',
|
||||
'Call Activity': '调用活动',
|
||||
'Sub Process (collapsed)': '子流程（折叠的）',
|
||||
'Sub Process (expanded)': '子流程（展开的）',
|
||||
'Start Event': '开始事件',
|
||||
'StartEvent': '开始事件',
|
||||
'Intermediate Throw Event': '中间事件',
|
||||
'End Event': '结束事件',
|
||||
'EndEvent': '结束事件',
|
||||
'Create Gateway': '创建网关',
|
||||
'Create Intermediate/Boundary Event': '创建中间/边界事件',
|
||||
'Message Start Event': '消息开始事件',
|
||||
'Timer Start Event': '定时开始事件',
|
||||
'Conditional Start Event': '条件开始事件',
|
||||
'Signal Start Event': '信号开始事件',
|
||||
'Error Start Event': '错误开始事件',
|
||||
'Escalation Start Event': '升级开始事件',
|
||||
'Compensation Start Event': '补偿开始事件',
|
||||
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
|
||||
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
|
||||
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
|
||||
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
|
||||
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
|
||||
'Message Intermediate Catch Event': '消息中间捕获事件',
|
||||
'Message Intermediate Throw Event': '消息中间抛出事件',
|
||||
'Timer Intermediate Catch Event': '定时中间捕获事件',
|
||||
'Escalation Intermediate Throw Event': '升级中间抛出事件',
|
||||
'Conditional Intermediate Catch Event': '条件中间捕获事件',
|
||||
'Link Intermediate Catch Event': '链接中间捕获事件',
|
||||
'Link Intermediate Throw Event': '链接中间抛出事件',
|
||||
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
|
||||
'Signal Intermediate Catch Event': '信号中间捕获事件',
|
||||
'Signal Intermediate Throw Event': '信号中间抛出事件',
|
||||
'Message End Event': '消息结束事件',
|
||||
'Escalation End Event': '定时结束事件',
|
||||
'Error End Event': '错误结束事件',
|
||||
'Cancel End Event': '取消结束事件',
|
||||
'Compensation End Event': '补偿结束事件',
|
||||
'Signal End Event': '信号结束事件',
|
||||
'Terminate End Event': '终止结束事件',
|
||||
'Message Boundary Event': '消息边界事件',
|
||||
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
|
||||
'Timer Boundary Event': '定时边界事件',
|
||||
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
|
||||
'Escalation Boundary Event': '升级边界事件',
|
||||
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
|
||||
'Conditional Boundary Event': '条件边界事件',
|
||||
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
|
||||
'Error Boundary Event': '错误边界事件',
|
||||
'Cancel Boundary Event': '取消边界事件',
|
||||
'Signal Boundary Event': '信号边界事件',
|
||||
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
|
||||
'Compensation Boundary Event': '补偿边界事件',
|
||||
'Exclusive Gateway': '互斥网关',
|
||||
'Parallel Gateway': '并行网关',
|
||||
'Inclusive Gateway': '相容网关',
|
||||
'Complex Gateway': '复杂网关',
|
||||
'Event based Gateway': '事件网关',
|
||||
'Transaction': '转运',
|
||||
'Sub Process': '子流程',
|
||||
'Event Sub Process': '事件子流程',
|
||||
'Collapsed Pool': '折叠池',
|
||||
'Expanded Pool': '展开池',
|
||||
// Errors
|
||||
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
|
||||
'no shape type specified': '没有指定的形状类型',
|
||||
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
|
||||
'out of bounds release': 'out of bounds release',
|
||||
'more than {count} child lanes': '子道大于{count} ',
|
||||
'element required': '元素不能为空',
|
||||
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
|
||||
'no diagram to display': '没有可展示的流程图',
|
||||
'no process or collaboration to display': '没有可展示的流程/协作',
|
||||
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
|
||||
'already rendered {element}': '{element} 已被渲染',
|
||||
'failed to import {element}': '导入{element}失败',
|
||||
// 属性面板的参数
|
||||
'Id': '标识',
|
||||
'Name': '名称',
|
||||
'General': '常规',
|
||||
'Details': '详情',
|
||||
'Message Name': '消息名称',
|
||||
'Message': '消息',
|
||||
'Initiator': '创建者',
|
||||
'Asynchronous Continuations': '持续异步',
|
||||
'Asynchronous Before': '异步前',
|
||||
'Asynchronous After': '异步后',
|
||||
'Job Configuration': '工作配置',
|
||||
'Exclusive': '排除',
|
||||
'Job Priority': '工作优先级',
|
||||
'Retry Time Cycle': '重试时间周期',
|
||||
'Documentation': '文档',
|
||||
'Element Documentation': '元素文档',
|
||||
'History Configuration': '历史配置',
|
||||
'History Time To Live': '历史的生存时间',
|
||||
'Forms': '表单',
|
||||
'Form Key': '表单key',
|
||||
'Form Fields': '表单字段',
|
||||
'Business Key': '业务key',
|
||||
'Form Field': '表单字段',
|
||||
'ID': '编号',
|
||||
'Type': '类型',
|
||||
'Label': '名称',
|
||||
'Default Value': '默认值',
|
||||
'Validation': '校验',
|
||||
'Add Constraint': '添加约束',
|
||||
'Config': '配置',
|
||||
'Properties': '属性',
|
||||
'Add Property': '添加属性',
|
||||
'Value': '值',
|
||||
'Listeners': '监听器',
|
||||
'Execution Listener': '执行监听',
|
||||
'Event Type': '事件类型',
|
||||
'Listener Type': '监听器类型',
|
||||
'Java Class': 'Java类',
|
||||
'Expression': '表达式',
|
||||
'Must provide a value': '必须提供一个值',
|
||||
'Delegate Expression': '代理表达式',
|
||||
'Script': '脚本',
|
||||
'Script Format': '脚本格式',
|
||||
'Script Type': '脚本类型',
|
||||
'Inline Script': '内联脚本',
|
||||
'External Script': '外部脚本',
|
||||
'Resource': '资源',
|
||||
'Field Injection': '字段注入',
|
||||
'Extensions': '扩展',
|
||||
'Input/Output': '输入/输出',
|
||||
'Input Parameters': '输入参数',
|
||||
'Output Parameters': '输出参数',
|
||||
'Parameters': '参数',
|
||||
'Output Parameter': '输出参数',
|
||||
'Timer Definition Type': '定时器定义类型',
|
||||
'Timer Definition': '定时器定义',
|
||||
'Date': '日期',
|
||||
'Duration': '持续',
|
||||
'Cycle': '循环',
|
||||
'Signal': '信号',
|
||||
'Signal Name': '信号名称',
|
||||
'Escalation': '升级',
|
||||
'Error': '错误',
|
||||
'Link Name': '链接名称',
|
||||
'Condition': '条件名称',
|
||||
'Variable Name': '变量名称',
|
||||
'Variable Event': '变量事件',
|
||||
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
|
||||
'Wait for Completion': '等待完成',
|
||||
'Activity Ref': '活动参考',
|
||||
'Version Tag': '版本标签',
|
||||
'Executable': '可执行文件',
|
||||
'External Task Configuration': '扩展任务配置',
|
||||
'Task Priority': '任务优先级',
|
||||
'External': '外部',
|
||||
'Connector': '连接器',
|
||||
'Must configure Connector': '必须配置连接器',
|
||||
'Connector Id': '连接器编号',
|
||||
'Implementation': '实现方式',
|
||||
'Field Injections': '字段注入',
|
||||
'Fields': '字段',
|
||||
'Result Variable': '结果变量',
|
||||
'Topic': '主题',
|
||||
'Configure Connector': '配置连接器',
|
||||
'Input Parameter': '输入参数',
|
||||
'Assignee': '代理人',
|
||||
'Candidate Users': '候选用户',
|
||||
'Candidate Groups': '候选组',
|
||||
'Due Date': '到期时间',
|
||||
'Follow Up Date': '跟踪日期',
|
||||
'Priority': '优先级',
|
||||
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
'Variables': '变量'
|
||||
}
|
||||
205
docs/.vuepress/components/Co/formCo.vue
Normal file
205
docs/.vuepress/components/Co/formCo.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
ref="form"
|
||||
:title="formTitle"
|
||||
:visible.sync="formVisible"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="beforeCancelForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formCommon"
|
||||
:model="formData"
|
||||
label-width="130px"
|
||||
:rules="formRules"
|
||||
>
|
||||
<div
|
||||
v-for="col in formKey"
|
||||
:key="col.fieldName"
|
||||
>
|
||||
<component
|
||||
:is="'el-form-item'"
|
||||
v-if="col.isForm===1"
|
||||
:label="col.nameCn"
|
||||
:prop="col.fieldName"
|
||||
>
|
||||
<div>
|
||||
<component
|
||||
:is="col.webType"
|
||||
v-if="
|
||||
(col.javaType !== 'date' || isAdd) &&
|
||||
col.webType !== 'textArea' && col.webType!=='password'
|
||||
"
|
||||
v-model="formData[col.fieldName]"
|
||||
filterable
|
||||
:type="col.javaType"
|
||||
style="width:80%"
|
||||
:value-format="timeFormat"
|
||||
:disabled="disFunction(col.isChange, col.fieldName)"
|
||||
>
|
||||
<div v-if="col.selectList">
|
||||
<component
|
||||
:is="'el-option'"
|
||||
v-for="(sel,val) in col.selectList"
|
||||
:key="val"
|
||||
:label="sel.selectKey"
|
||||
:value="formatSelectVal(sel.selectValue,col.javaType)"
|
||||
/>
|
||||
</div>
|
||||
</component>
|
||||
<el-input
|
||||
v-if="col.webType === 'textArea'"
|
||||
v-model="formData[col.fieldName]"
|
||||
style="width:80%"
|
||||
type="textarea"
|
||||
:disabled="disFunction(col.isChange, col.fieldName)"
|
||||
/>
|
||||
<el-input
|
||||
v-if="col.webType === 'password'"
|
||||
v-model="formData[col.fieldName]"
|
||||
style="width:80%"
|
||||
type="password"
|
||||
:disabled="disFunction(col.isChange, col.fieldName)"
|
||||
/>
|
||||
<el-col
|
||||
v-if="!isAdd && col.javaType === 'date'"
|
||||
:span="8"
|
||||
>
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="formData[col.fieldName + '_start']"
|
||||
type="datetime"
|
||||
placeholder="选择时间"
|
||||
style="width: 95%;"
|
||||
:value-format="timeFormat"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col
|
||||
v-if="!isAdd && col.javaType === 'date'"
|
||||
class="line"
|
||||
:span="1"
|
||||
>
|
||||
-
|
||||
</el-col>
|
||||
<el-col
|
||||
v-if="!isAdd && col.javaType === 'date'"
|
||||
:span="10"
|
||||
>
|
||||
<el-form-item prop="date2">
|
||||
<el-date-picker
|
||||
v-model="formData[col.fieldName + '_end']"
|
||||
:type="col.javaType"
|
||||
placeholder="选择时间"
|
||||
:value-format="timeFormat"
|
||||
style="width: 80%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
</component>
|
||||
</div>
|
||||
</el-form>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button @click="cancelForm">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="formSubmit('formCommon', formType)"
|
||||
>
|
||||
{{ formSubBotton }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'formCo',
|
||||
props: {
|
||||
timeFormat: {
|
||||
type: String,
|
||||
default: 'timestamp'
|
||||
},
|
||||
formTitle: {
|
||||
type: String
|
||||
},
|
||||
formData: {
|
||||
type: Object
|
||||
},
|
||||
formVisible: {
|
||||
type: Boolean
|
||||
},
|
||||
formKey: {
|
||||
type: Array
|
||||
},
|
||||
formSubBotton: {
|
||||
type: String
|
||||
},
|
||||
formRules: {
|
||||
type: Object
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
formType: {
|
||||
type: Number
|
||||
},
|
||||
disableField: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
disFunction (change, fieldName) {
|
||||
let flag = false
|
||||
this.disableField.forEach((value) => {
|
||||
if (value === fieldName) {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
if (this.formType === 1) {
|
||||
let flag = false
|
||||
this.disableField.forEach((value) => {
|
||||
if (value === fieldName) {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
return flag
|
||||
} else {
|
||||
if (change === 0) {
|
||||
return true
|
||||
} else {
|
||||
let flag = false
|
||||
this.disableField.forEach((value) => {
|
||||
if (value === fieldName) {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
return flag
|
||||
}
|
||||
}
|
||||
},
|
||||
formSubmit (val, type) {
|
||||
this.$emit('form-submit', val, type)
|
||||
},
|
||||
cancelForm () {
|
||||
this.$emit('cancel-form')
|
||||
},
|
||||
beforeCancelForm () {
|
||||
this.$emit('before-cancel-form')
|
||||
},
|
||||
formatSelectVal (val, type) {
|
||||
if (type === 'Integer') {
|
||||
return +val
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
104
docs/.vuepress/components/Co/searchCo.vue
Normal file
104
docs/.vuepress/components/Co/searchCo.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-form :inline="true" :model="searchData">
|
||||
<el-form-item v-for="col in formKey" :key="col.fieldName" :prop="col.fieldName">
|
||||
<el-row
|
||||
v-if="col.isSearch===1 && col.webType !== 'el-date-picker' && col.webType!=='password'"
|
||||
>
|
||||
<el-col :span="8">{{ col.nameCn }}:</el-col>
|
||||
<el-col :span="16">
|
||||
<component
|
||||
:is="col.webType"
|
||||
v-if="col.webType !== 'el-date-picker'&&col.webType!=='password'"
|
||||
v-model="searchData[col.fieldName]"
|
||||
:type="col.javaType"
|
||||
:value-format="timeFormat"
|
||||
:placeholder="'请输入'+col.nameCn"
|
||||
size="small"
|
||||
>
|
||||
<div v-if="col.selectList">
|
||||
<component
|
||||
:is="'el-option'"
|
||||
v-for="(sel,val) in col.selectList"
|
||||
:key="val"
|
||||
:label="sel.selectKey"
|
||||
:value="formatSelectVal(sel.selectValue,col.javaType)"
|
||||
/>
|
||||
</div>
|
||||
</component>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="col.webType === 'el-date-picker'">
|
||||
<el-col :span="4">{{ col.nameCn }}:</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="searchData[col.fieldName + '_start']"
|
||||
type="datetime"
|
||||
:placeholder="col.nameCn+'开始'"
|
||||
style="width: 95%;"
|
||||
:value-format="timeFormat"
|
||||
size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if=" col.webType === 'el-date-picker'" class="line" :span="1">-</el-col>
|
||||
<el-col v-if="col.webType === 'el-date-picker'" :span="10">
|
||||
<el-form-item prop="date2">
|
||||
<el-date-picker
|
||||
v-model="searchData[col.fieldName + '_end']"
|
||||
:type="col.javaType"
|
||||
:placeholder="col.nameCn+'结束'"
|
||||
:value-format="timeFormat"
|
||||
style="width: 80%;"
|
||||
size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-row style="text-align:center">
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="searchSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="resetSearchForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "searchCo",
|
||||
props: {
|
||||
timeFormat: {
|
||||
type: String,
|
||||
default: "timestamp",
|
||||
},
|
||||
searchData: {
|
||||
type: Object,
|
||||
},
|
||||
formVisible: {
|
||||
type: Boolean,
|
||||
},
|
||||
formKey: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
searchSubmit(val, type) {
|
||||
this.$emit("search-submit");
|
||||
},
|
||||
resetSearchForm() {
|
||||
this.$emit("reset-search-form");
|
||||
},
|
||||
formatSelectVal(val, type) {
|
||||
if (type === "Integer") {
|
||||
return +val;
|
||||
} else {
|
||||
return val;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
127
docs/.vuepress/components/Co/tableHeadCo.vue
Normal file
127
docs/.vuepress/components/Co/tableHeadCo.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
ya<template>
|
||||
<div>
|
||||
<el-table
|
||||
id="commonTable"
|
||||
ref="commonTable"
|
||||
v-loading="loading"
|
||||
:data="formList"
|
||||
border
|
||||
highlight-current-row
|
||||
style="width: 100%;"
|
||||
:header-cell-style="{background: '#3e7eaf',color:'#fff',textAlign:'center',fontWeight:'bold'}"
|
||||
:cell-style="{textAlign:'center'}"
|
||||
@sort-change="handleSortChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="checkBoxVisible"
|
||||
type="selection"
|
||||
/>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
:label="'#'"
|
||||
/>
|
||||
<template v-for="col in tableHeads">
|
||||
<el-table-column
|
||||
v-if="col.isHead ===1"
|
||||
:key="col.fieldName"
|
||||
:prop="col.fieldName"
|
||||
:label="col.nameCn"
|
||||
:formatter="formatter"
|
||||
:width="col.commonWidth"
|
||||
sortable
|
||||
/>
|
||||
</template>
|
||||
<el-table-column
|
||||
v-if="slotVisible"
|
||||
label="操作"
|
||||
:width="width"
|
||||
>
|
||||
<template
|
||||
v-slot="scope"
|
||||
>
|
||||
<slot :item="scope" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableHeadCo',
|
||||
props: {
|
||||
formList: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
checkBoxVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tableHeads: {
|
||||
type: Array
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formatter: {
|
||||
type: Function
|
||||
},
|
||||
slotVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
number: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 200
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSortChange (val) {
|
||||
this.$emit('handle-sort-change', val)
|
||||
},
|
||||
handleSelectionChange (val) {
|
||||
this.$emit('handle-selection-change', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-table th {
|
||||
background-color: #eeeeee;
|
||||
font-weight: 200;
|
||||
}
|
||||
.form-expend .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 25%;
|
||||
}
|
||||
.form-expend {
|
||||
font-size: 0;
|
||||
margin-left: 20px;
|
||||
.el-form-item__label {
|
||||
font-size: 12px;
|
||||
// color: $middleGray;
|
||||
}
|
||||
}
|
||||
.form-expend label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
.table-dropdown{
|
||||
.el-table--medium th, .el-table--medium td {
|
||||
padding: 5px 0;
|
||||
}
|
||||
/*.el-table-column--selection{*/
|
||||
/* display:none;*/
|
||||
/*}*/
|
||||
}
|
||||
|
||||
</style>
|
||||
15
docs/.vuepress/components/Foo/Bar.vue
Normal file
15
docs/.vuepress/components/Foo/Bar.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<p class="demo">
|
||||
{{ msg }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Hello this is <Foo-Bar>'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
5
docs/.vuepress/components/OtherComponent.vue
Normal file
5
docs/.vuepress/components/OtherComponent.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<p class="demo">
|
||||
This is another component
|
||||
</p>
|
||||
</template>
|
||||
35
docs/.vuepress/components/UpgradePath.vue
Normal file
35
docs/.vuepress/components/UpgradePath.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script>
|
||||
export default {
|
||||
functional: true,
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render (h, { props, slots }) {
|
||||
return h('div',
|
||||
{
|
||||
class: ['upgrade-path']
|
||||
},
|
||||
[
|
||||
h('h4', props.title || 'Upgrade Path'),
|
||||
slots().default
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.upgrade-path
|
||||
margin-top: 2em
|
||||
padding: 2em
|
||||
background: rgba(73, 195, 140, .1)
|
||||
border-radius: 2px
|
||||
> h4
|
||||
margin-top: 0
|
||||
> p:last-child
|
||||
margin-bottom: 0
|
||||
padding-bottom: 0
|
||||
</style>
|
||||
17
docs/.vuepress/components/Web/Bpmn.vue
Normal file
17
docs/.vuepress/components/Web/Bpmn.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<bpmn />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmn from '../Bpmn/bpmn'
|
||||
export default {
|
||||
components: {
|
||||
bpmn
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
20
docs/.vuepress/components/Web/BpmnNameForm.vue
Normal file
20
docs/.vuepress/components/Web/BpmnNameForm.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
export default {
|
||||
components: {
|
||||
bpmn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
updateDate: { key: "process", name: "流程图" },
|
||||
updateBpmnFlag: false
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
65
docs/.vuepress/components/Web/EditBpmn.vue
Normal file
65
docs/.vuepress/components/Web/EditBpmn.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
export default {
|
||||
components: {
|
||||
bpmn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
updateBpmnFlag: true,
|
||||
updateDate: `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
168
docs/.vuepress/components/Web/Form.vue
Normal file
168
docs/.vuepress/components/Web/Form.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="medium"
|
||||
@click="showAdd"
|
||||
>
|
||||
新增表单
|
||||
</el-button>
|
||||
<form-co
|
||||
ref="formCo"
|
||||
:form-title="dialogTitle"
|
||||
:form-visible="dialogCreateFormVisible"
|
||||
:form-sub-botton="'提交'"
|
||||
:form-key="tableHead"
|
||||
:form-data="formData"
|
||||
:form-rules="formRules"
|
||||
:form-type="formType"
|
||||
:disable-field="disableField"
|
||||
@form-submit="formSubmit"
|
||||
@cancel-form="cancelForm"
|
||||
@before-cancel-form="cancelForm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import formCo from '../Co/formCo'
|
||||
export default {
|
||||
components: {
|
||||
formCo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogTitle: '新增记录',
|
||||
dialogCreateFormVisible: false,
|
||||
tableHead: [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: 'user_id',
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: 'Integer',
|
||||
nameCn: '用户ID',
|
||||
webType: 'el-input'
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: 'username',
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: 'String',
|
||||
nameCn: '用户名',
|
||||
webType: 'el-input'
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: 'password',
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: 'String',
|
||||
nameCn: '密码',
|
||||
webType: 'password'
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: 'enabled',
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: 'Integer',
|
||||
nameCn: '用户状态',
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: '禁用',
|
||||
selectType: 1,
|
||||
selectValue: '1'
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: '启用',
|
||||
selectType: 1,
|
||||
selectValue: '2'
|
||||
}
|
||||
],
|
||||
webType: 'el-select'
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: 'user_type',
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: 'Integer',
|
||||
nameCn: '用户类型',
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: '外部用户',
|
||||
selectType: 1,
|
||||
selectValue: '1'
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: '内部用户',
|
||||
selectType: 1,
|
||||
selectValue: '2'
|
||||
}
|
||||
],
|
||||
webType: 'el-select'
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: 'create_time',
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: 'datetime',
|
||||
nameCn: '创建时间',
|
||||
webType: 'el-date-picker'
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: 'update_time',
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: 'datetime',
|
||||
nameCn: '修改时间',
|
||||
webType: 'el-date-picker'
|
||||
}
|
||||
],
|
||||
formData: {},
|
||||
formType: 1,
|
||||
disableField: ['create_time', 'update_time'],
|
||||
formRules: {
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 提交表单
|
||||
formSubmit (value) {
|
||||
this.dialogCreateFormVisible = false
|
||||
},
|
||||
// 关闭表单
|
||||
cancelForm () {
|
||||
this.dialogCreateFormVisible = false
|
||||
this.formData = {}
|
||||
this.$nextTick(() => {
|
||||
const ref = this.$refs.formCo
|
||||
ref.$refs.formCommon.resetFields()
|
||||
})
|
||||
},
|
||||
showAdd () {
|
||||
this.dialogTitle = '新增记录'
|
||||
this.formType = 1
|
||||
this.formData = {}
|
||||
this.dialogCreateFormVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
81
docs/.vuepress/components/Web/OnlyShowBpmn.vue
Normal file
81
docs/.vuepress/components/Web/OnlyShowBpmn.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="showBpmn()"
|
||||
>
|
||||
查看流程图
|
||||
</el-button>
|
||||
<el-dialog
|
||||
title="流程图"
|
||||
:visible.sync="dialogShowBpmnVisible"
|
||||
>
|
||||
<bpmnView :show-data="showBpmnData" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmnView from '../Bpmn/bpmnView'
|
||||
export default {
|
||||
components: {
|
||||
bpmnView
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogShowBpmnVisible: false,
|
||||
showBpmnData: `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showBpmn () {
|
||||
this.dialogShowBpmnVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
134
docs/.vuepress/components/Web/SearchForm.vue
Normal file
134
docs/.vuepress/components/Web/SearchForm.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="always" class="select-card">
|
||||
<search-co
|
||||
:form-key="tableHead"
|
||||
:search-data="searchForm"
|
||||
:time-format="'yyyy-MM-dd HH:mm:ss'"
|
||||
@search-submit="query"
|
||||
@reset-search-form="resetSearch"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchCo from "../Co/searchCo";
|
||||
export default {
|
||||
components: {
|
||||
searchCo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableHead: [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isSearch: 0,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
],
|
||||
searchForm: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 查询表格
|
||||
query() {},
|
||||
// 重置search表单
|
||||
resetSearch() {
|
||||
this.searchForm = {};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
48
docs/.vuepress/components/Web/Table.vue
Normal file
48
docs/.vuepress/components/Web/Table.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '../Co/tableHeadCo'
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 }
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
56
docs/.vuepress/components/Web/TableCheckBox.vue
Normal file
56
docs/.vuepress/components/Web/TableCheckBox.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:check-box-visible="true"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '../Co/tableHeadCo'
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 复选框改变监听事件
|
||||
handleSelectionChange(val){
|
||||
console.log("这里是checkBox获取的内容--->",val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
66
docs/.vuepress/components/Web/TableSlot.vue
Normal file
66
docs/.vuepress/components/Web/TableSlot.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:slot-visible="true"
|
||||
>
|
||||
<template
|
||||
v-slot="scope"
|
||||
style="text-align: center"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="showEdit(scope.item.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</table-head-co>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '../Co/tableHeadCo'
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 }
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showEdit (val) {
|
||||
console.log('这里是插槽获取的内容--->', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
15
docs/.vuepress/components/demo-1.vue
Normal file
15
docs/.vuepress/components/demo-1.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<p class="demo">
|
||||
{{ msg }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Hello this is <demo-1>'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
204
docs/.vuepress/components/diagram-markdown-slot-relationship.vue
Normal file
204
docs/.vuepress/components/diagram-markdown-slot-relationship.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<svg-container>
|
||||
<svg
|
||||
width="400px"
|
||||
viewBox="0 0 688 403"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<rect
|
||||
id="path-1"
|
||||
x="140"
|
||||
y="0"
|
||||
width="549"
|
||||
height="176"
|
||||
rx="20"
|
||||
/>
|
||||
<mask
|
||||
id="mask-2"
|
||||
maskContentUnits="userSpaceOnUse"
|
||||
maskUnits="objectBoundingBox"
|
||||
x="0"
|
||||
y="0"
|
||||
width="549"
|
||||
height="176"
|
||||
fill="white"
|
||||
>
|
||||
<use xlink:href="#path-1" />
|
||||
</mask>
|
||||
</defs>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="diagram-markdown-slot-relationship"
|
||||
transform="translate(-1.000000, 0.000000)"
|
||||
>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#00BC7D"
|
||||
fill-rule="nonzero"
|
||||
cx="235"
|
||||
cy="88"
|
||||
r="59"
|
||||
/>
|
||||
<text
|
||||
id="Markdown-File-1"
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="20"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="186.79"
|
||||
y="85"
|
||||
>Markdown </tspan>
|
||||
<tspan
|
||||
x="211.43"
|
||||
y="113"
|
||||
>File 1</tspan>
|
||||
</text>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#00BC7D"
|
||||
fill-rule="nonzero"
|
||||
cx="415"
|
||||
cy="88"
|
||||
r="59"
|
||||
/>
|
||||
<text
|
||||
id="Markdown-File-2"
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="20"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="366.79"
|
||||
y="85"
|
||||
>Markdown </tspan>
|
||||
<tspan
|
||||
x="389.44"
|
||||
y="113"
|
||||
>File 2</tspan>
|
||||
</text>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#EB4D5D"
|
||||
fill-rule="nonzero"
|
||||
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
|
||||
cx="419"
|
||||
cy="320"
|
||||
r="83"
|
||||
/>
|
||||
<text
|
||||
id="Layout-Component"
|
||||
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="24"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="381.272"
|
||||
y="312"
|
||||
>Layout</tspan>
|
||||
<tspan
|
||||
x="354.572"
|
||||
y="345"
|
||||
>Component</tspan>
|
||||
</text>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#00BC7D"
|
||||
fill-rule="nonzero"
|
||||
cx="595"
|
||||
cy="88"
|
||||
r="59"
|
||||
/>
|
||||
<text
|
||||
id="Markdown-File-3"
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="20"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="546.79"
|
||||
y="85"
|
||||
>Markdown </tspan>
|
||||
<tspan
|
||||
x="569.44"
|
||||
y="113"
|
||||
>File 3</tspan>
|
||||
</text>
|
||||
<use
|
||||
id="Rectangle"
|
||||
stroke="#DC585F"
|
||||
mask="url(#mask-2)"
|
||||
stroke-width="8"
|
||||
stroke-dasharray="5"
|
||||
fill-rule="nonzero"
|
||||
xlink:href="#path-1"
|
||||
/>
|
||||
<path
|
||||
id="Path"
|
||||
d="M317.737594,275.914863 C316.399837,275.439513 315.071319,274.934993 313.752054,274.40131 L314.877079,271.620246 C316.062011,272.099587 317.254567,272.554642 318.454758,272.985416 L320.320183,265.365584 L336.516196,279.111098 L315.802177,283.8206 L317.737594,275.914863 Z M237.053972,153.839171 L240.036678,154.160829 C239.860222,155.797097 239.727284,157.431576 239.637858,159.064293 L236.642347,158.900223 C236.734662,157.214791 236.871873,155.527765 237.053972,153.839171 Z M236.500062,163.984683 L239.50006,163.988115 C239.498183,165.6288 239.540423,167.267783 239.626781,168.905092 L236.630945,169.063103 C236.541751,167.372018 236.498123,165.679201 236.500062,163.984683 Z M237.034923,174.12831 L240.017951,173.809652 C240.191774,175.436839 240.409353,177.062453 240.670697,178.686519 L237.708802,179.163147 C237.439026,177.486687 237.214397,175.808399 237.034923,174.12831 Z M238.651506,184.177472 L241.584397,183.54648 C241.927872,185.142975 242.313817,186.738038 242.742248,188.33169 L239.845114,189.110544 C239.40355,187.46804 239.005676,185.823676 238.651506,184.177472 Z M241.277699,193.960604 L244.133333,193.041173 C244.633282,194.593949 245.173728,196.145426 245.754688,197.695614 L242.945486,198.748412 C242.348064,197.154297 241.792129,195.558357 241.277699,193.960604 Z M244.837653,203.467846 L247.596505,202.289399 C248.237243,203.789426 248.91606,205.288264 249.632972,206.785917 L246.927022,208.081229 C246.191725,206.545169 245.495264,205.007373 244.837653,203.467846 Z M249.214331,212.61803 L251.865379,211.213771 C252.629062,212.6555 253.428173,214.096132 254.262722,215.535667 L251.667331,217.040308 C250.813682,215.567829 249.996012,214.093736 249.214331,212.61803 Z M254.297283,221.391099 L256.836394,219.793315 C257.706019,221.175275 258.60841,222.556214 259.543577,223.936131 L257.060143,225.61915 C256.106032,224.21128 255.185076,222.801931 254.297283,221.391099 Z M259.974465,229.772936 L262.402649,228.01114 C263.362565,229.334138 264.3527,230.656183 265.373059,231.977271 L262.998786,233.811072 C261.960192,232.466375 260.952083,231.120331 259.974465,229.772936 Z M266.091044,237.698109 L268.411267,235.796382 C269.468483,237.08625 270.534696,238.346975 271.6099,239.578562 L269.349958,241.551545 C268.25419,240.296403 267.167887,239.011923 266.091044,237.698109 Z M272.734865,245.303177 L274.928459,243.25668 C276.064358,244.474225 277.209951,245.660334 278.365233,246.815016 L276.244465,248.936888 C275.064352,247.757389 273.894487,246.546149 272.734865,245.303177 Z M279.887015,252.446537 L281.927895,250.247718 C283.145938,251.378269 284.374389,252.475061 285.613248,253.538106 L283.65964,255.814817 C282.391056,254.726266 281.133515,253.603502 279.887015,252.446537 Z M287.576785,259.039625 L289.435074,256.684468 C290.736664,257.711462 292.049366,258.702468 293.373181,259.657502 L291.617984,262.09046 C290.259116,261.110138 288.912049,260.093188 287.576785,259.039625 Z M295.785278,264.957777 L297.4295,262.448487 C298.812943,263.354993 300.208145,264.223547 301.615114,265.054165 L300.089978,267.637566 C298.64262,266.783104 297.207718,265.889835 295.785278,264.957777 Z M304.529995,270.116457 L305.928241,267.462232 C307.386943,268.230677 308.857919,268.959729 310.341185,269.649406 L309.076317,272.36972 C307.547965,271.659079 306.032519,270.907986 304.529995,270.116457 Z"
|
||||
fill="#8599A4"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
<path
|
||||
id="Path"
|
||||
d="M505.524249,279.462157 L520.680172,264.577668 L526.525394,282.656202 L505.524249,279.462157 Z M607.459883,153.645338 L610.450216,153.404698 C610.586546,155.098816 610.691833,156.77921 610.766069,158.445876 L607.76904,158.579368 C607.696405,156.948625 607.593356,155.303949 607.459883,153.645338 Z M607.896371,163.523725 L610.896305,163.503827 C610.907594,165.205698 610.885378,166.892755 610.829647,168.56499 L607.831312,168.465065 C607.885706,166.832931 607.907396,165.18582 607.896371,163.523725 Z M607.562992,173.41012 L610.554458,173.636245 C610.42622,175.332733 610.262196,177.013376 610.062375,178.678161 L607.083754,178.320643 C607.278311,176.69972 607.43806,175.062883 607.562992,173.41012 Z M606.384557,183.20243 L609.343631,183.696275 C609.063719,185.373481 608.746022,187.033908 608.390534,188.677536 L605.458331,188.043351 C605.803721,186.446416 606.112465,184.832782 606.384557,183.20243 Z M604.291922,192.859811 L607.189213,193.63808 C606.748727,195.277893 606.269015,196.900206 605.750076,198.504997 L602.895608,197.581952 C603.399033,196.025135 603.864471,194.451096 604.291922,192.859811 Z M601.271525,202.20035 L604.075335,203.267423 C603.472603,204.851146 602.829959,206.41696 602.147412,207.96484 L599.402435,206.754426 C600.064131,205.253832 600.687158,203.735815 601.271525,202.20035 Z M597.290807,211.224832 L599.969243,212.576121 C599.208118,214.084773 598.407288,215.575496 597.566769,217.048269 L594.961228,215.561273 C595.776314,214.133064 596.552836,212.687591 597.290807,211.224832 Z M592.397896,219.797817 L594.924421,221.41543 C594.015938,222.834374 593.068787,224.235757 592.082984,225.619564 L589.639589,223.878927 C590.596732,222.53535 591.516161,221.174984 592.397896,219.797817 Z M586.660862,227.851867 L589.017105,229.708777 C587.977352,231.028126 586.900649,232.33062 585.787016,233.616254 L583.51944,231.652049 C584.602788,230.401378 585.649923,229.134653 586.660862,227.851867 Z M580.265616,235.264939 L582.455796,237.315088 C581.30524,238.54423 580.129172,239.752667 578.927599,240.940392 L576.818608,238.806814 C577.992605,237.646347 579.141605,236.465724 580.265616,235.264939 Z M573.232259,242.218017 L575.257873,244.430909 C574.018262,245.565611 572.753689,246.680004 571.464163,247.774085 L569.523296,245.486502 C570.784152,244.416746 572.02047,243.327252 573.232259,242.218017 Z M565.69619,248.613677 L567.551459,250.971213 C566.232998,252.008779 564.890366,253.026639 563.523572,254.024792 L561.754283,251.602063 C563.092093,250.625076 564.406059,249.628948 565.69619,248.613677 Z M557.696251,254.45734 L559.379522,256.940603 C557.993427,257.880163 556.584154,258.800801 555.151714,259.702516 L553.553517,257.163665 C554.957366,256.279948 556.338275,255.377839 557.696251,254.45734 Z M549.296271,259.746128 L550.810006,262.336225 C549.366211,263.180025 547.900334,264.005779 546.412381,264.81349 L544.981154,262.176903 C546.441447,261.384207 547.879818,260.573948 549.296271,259.746128 Z M540.616615,264.460914 L541.967561,267.139522 C540.476204,267.891683 538.963914,268.626729 537.430695,269.344665 L536.158499,266.62777 C537.665372,265.922171 539.15141,265.199884 540.616615,264.460914 Z M531.631899,268.669952 L532.82743,271.421444 C531.297326,272.086278 529.747462,272.734956 528.17784,273.367482 L527.056524,270.58492 C528.601359,269.962383 530.126483,269.324059 531.631899,268.669952 Z"
|
||||
fill="#8599A4"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
<path
|
||||
id="Line"
|
||||
d="M415,229 L405.5,210 L424.5,210 L415,229 Z M413.5,154 L416.5,154 L416.5,159 L413.5,159 L413.5,154 Z M413.5,164 L416.5,164 L416.5,169 L413.5,169 L413.5,164 Z M413.5,174 L416.5,174 L416.5,179 L413.5,179 L413.5,174 Z M413.5,184 L416.5,184 L416.5,189 L413.5,189 L413.5,184 Z M413.5,194 L416.5,194 L416.5,199 L413.5,199 L413.5,194 Z M413.5,204 L416.5,204 L416.5,209 L413.5,209 L413.5,204 Z"
|
||||
fill="#8599A4"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
<text
|
||||
id="Provider"
|
||||
fill="#8599A4"
|
||||
font-family="Arial-Black, Arial Black"
|
||||
font-size="25"
|
||||
font-weight="700"
|
||||
>
|
||||
<tspan
|
||||
x="0.06640625"
|
||||
y="28"
|
||||
>Provider</tspan>
|
||||
</text>
|
||||
<text
|
||||
id="Consumer"
|
||||
fill="#8599A4"
|
||||
font-family="Arial-Black, Arial Black"
|
||||
font-size="25"
|
||||
font-weight="700"
|
||||
>
|
||||
<tspan
|
||||
x="0.243896484"
|
||||
y="327"
|
||||
>Consumer</tspan>
|
||||
</text>
|
||||
<path
|
||||
id="Line-2"
|
||||
d="M161,320 L320.5,320"
|
||||
stroke="#DC585F"
|
||||
stroke-width="4"
|
||||
stroke-dasharray="5"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</svg-container>
|
||||
</template>
|
||||
13
docs/.vuepress/components/svg-container.vue
Normal file
13
docs/.vuepress/components/svg-container.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="svg-container">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.svg-container
|
||||
margin 30px auto
|
||||
text-align center
|
||||
& > svg
|
||||
max-width 100%
|
||||
</style>
|
||||
18
docs/.vuepress/config.js
Normal file
18
docs/.vuepress/config.js
Normal file
@@ -0,0 +1,18 @@
|
||||
const head = require('./config/head.js');
|
||||
const plugins = require('./config/plugins.js');
|
||||
const themeConfig = require('./config/themeConfig.js');
|
||||
|
||||
module.exports = {
|
||||
// theme: 'vdoing', // 使用依赖包主题
|
||||
theme: require.resolve('../../theme-vdoing'), // 使用本地主题
|
||||
|
||||
title: "HCFrame",
|
||||
description: '通用框架组件',
|
||||
// base: '/', // 格式：'/<仓库名>/'， 默认'/'
|
||||
markdown: {
|
||||
lineNumbers: true, // 代码行号
|
||||
},
|
||||
head,
|
||||
plugins,
|
||||
themeConfig,
|
||||
}
|
||||
22
docs/.vuepress/config/head.js
Normal file
22
docs/.vuepress/config/head.js
Normal file
@@ -0,0 +1,22 @@
|
||||
// head
|
||||
module.exports = [
|
||||
// 注入到页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
|
||||
['link', { rel: 'icon', href: 'https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/favicon/favicon.ico' }], //favicons，资源放在public文件夹
|
||||
[
|
||||
'meta',
|
||||
{
|
||||
name: 'keywords',
|
||||
content: '通用框架组件',
|
||||
},
|
||||
],
|
||||
// ['meta', { name: 'baidu-site-verification', content: '7F55weZDDc' }], // 百度统计的站长验证
|
||||
['meta', { name: 'theme-color', content: '#11a8cd' }], // 移动浏览器主题颜色
|
||||
// [
|
||||
// 'script',
|
||||
// {
|
||||
// 'data-ad-client': 'ca-pub-7828333725993554',
|
||||
// async: 'async',
|
||||
// src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
|
||||
// },
|
||||
// ], // 网站关联Google AdSense 与 html格式广告支持
|
||||
]
|
||||
110
docs/.vuepress/config/plugins.js
Normal file
110
docs/.vuepress/config/plugins.js
Normal file
@@ -0,0 +1,110 @@
|
||||
// 插件配置
|
||||
module.exports = [
|
||||
// 本地插件
|
||||
// [require('./plugins/love-me'), { // 鼠标点击爱心特效
|
||||
// color: '#11a8cd', // 爱心颜色，默认随机色
|
||||
// excludeClassName: 'theme-vdoing-content' // 要排除元素的class, 默认空''
|
||||
// }],
|
||||
|
||||
'vuepress-plugin-baidu-autopush', // 百度自动推送
|
||||
|
||||
// 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用）
|
||||
[
|
||||
'thirdparty-search',
|
||||
{
|
||||
thirdparty: [
|
||||
// 可选，默认 []
|
||||
{
|
||||
title: '在MDN中搜索',
|
||||
frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
|
||||
behindUrl: '', // 搜索链接的后面部分，可选，默认 ''
|
||||
},
|
||||
{
|
||||
title: '在Runoob中搜索',
|
||||
frontUrl: 'https://www.runoob.com/?s=',
|
||||
},
|
||||
{
|
||||
title: '在Vue API中搜索',
|
||||
frontUrl: 'https://cn.vuejs.org/v2/api/#',
|
||||
},
|
||||
{
|
||||
title: '在Bing中搜索',
|
||||
frontUrl: 'https://cn.bing.com/search?q=',
|
||||
},
|
||||
{
|
||||
title: '通过百度搜索本站的',
|
||||
frontUrl: 'https://www.baidu.com/s?wd=site%3Axugaoyi.com%20',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
'one-click-copy',
|
||||
{
|
||||
// 代码块复制按钮
|
||||
copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
|
||||
copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
|
||||
duration: 1000, // prompt message display time.
|
||||
showInMobile: false, // whether to display on the mobile side, default: false.
|
||||
},
|
||||
],
|
||||
[
|
||||
'demo-block',
|
||||
{
|
||||
// demo演示模块 https://github.com/xiguaxigua/vuepress-plugin-demo-block
|
||||
settings: {
|
||||
// jsLib: ['http://xxx'], // 在线示例(jsfiddle, codepen)中的js依赖
|
||||
// cssLib: ['http://xxx'], // 在线示例中的css依赖
|
||||
// vue: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js', // 在线示例中的vue依赖
|
||||
jsfiddle: false, // 是否显示 jsfiddle 链接
|
||||
codepen: true, // 是否显示 codepen 链接
|
||||
horizontal: false, // 是否展示为横向样式
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
'vuepress-plugin-zooming', // 放大图片
|
||||
{
|
||||
selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
|
||||
options: {
|
||||
bgColor: 'rgba(0,0,0,0.6)',
|
||||
},
|
||||
},
|
||||
],
|
||||
// [
|
||||
// 'vuepress-plugin-baidu-tongji', // 百度统计
|
||||
// {
|
||||
// hm: '503f098e7e5b3a5b5d8c5fc2938af002',
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// 'vuepress-plugin-comment', // 评论
|
||||
// {
|
||||
// choosen: 'gitalk',
|
||||
// options: {
|
||||
// clientID: 'a6e1355287947096b88b',
|
||||
// clientSecret: 'f0e77d070fabfcd5af95bebb82b2d574d7248d71',
|
||||
// repo: 'blog-gitalk-comment', // GitHub 仓库
|
||||
// owner: 'xugaoyi', // GitHub仓库所有者
|
||||
// admin: ['xugaoyi'], // 对仓库有写权限的人
|
||||
// // distractionFreeMode: true,
|
||||
// pagerDirection: 'last', // 'first'正序 | 'last'倒序
|
||||
// id: '<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>', // 页面的唯一标识,长度不能超过50
|
||||
// title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
|
||||
// labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
|
||||
// body:
|
||||
// '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>', // GitHub issue 的内容
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
[
|
||||
'@vuepress/last-updated', // "上次更新"时间格式
|
||||
{
|
||||
transformer: (timestamp, lang) => {
|
||||
const dayjs = require('dayjs') // https://day.js.org/
|
||||
return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
86
docs/.vuepress/config/themeConfig.js
Normal file
86
docs/.vuepress/config/themeConfig.js
Normal file
@@ -0,0 +1,86 @@
|
||||
const nav = require('./themeConfig/nav.js');
|
||||
const sidebar = require('./themeConfig/sidebar.js');
|
||||
const htmlModules = require('./themeConfig/htmlModules.js');
|
||||
|
||||
// 主题配置
|
||||
module.exports = {
|
||||
nav,
|
||||
sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
|
||||
logo: 'https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203141030.png', // 导航栏logo
|
||||
// repo: 'xugaoyi/vuepress-theme-vdoing', // 导航栏右侧生成Github链接
|
||||
searchMaxSuggestions: 10, // 搜索结果显示最大数
|
||||
lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字 string | boolean (取值为git提交时间)
|
||||
docsDir: 'docs', // 编辑的文件夹
|
||||
editLinks: true, // 启用编辑
|
||||
editLinkText: '编辑',
|
||||
|
||||
//*** 以下配置是Vdoing主题改动和新增的配置 ***//
|
||||
|
||||
category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。
|
||||
tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。
|
||||
archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。
|
||||
// categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
|
||||
|
||||
// bodyBgImg: [
|
||||
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
|
||||
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
|
||||
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
|
||||
// ], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
|
||||
// bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0 ~ 1.0, 默认0.5
|
||||
|
||||
// titleBadge: false, // 文章标题前的图标是否显示，默认true
|
||||
// titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
|
||||
// '图标地址1',
|
||||
// '图标地址2'
|
||||
// ],
|
||||
// contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 => 方格 | 2 => 横线 | 3 => 竖线 | 4 => 左斜线 | 5 => 右斜线 | 6 => 点状
|
||||
|
||||
// updateBar: { // 最近更新栏
|
||||
// showToArticle: true, // 显示到文章页底部，默认true
|
||||
// moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
|
||||
// },
|
||||
// rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示)
|
||||
// sidebarOpen: false, // 初始状态是否打开侧边栏，默认true
|
||||
// pageButton: false, // 是否显示快捷翻页按钮，默认true
|
||||
|
||||
sidebar: 'structuring', // 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
|
||||
|
||||
author: {
|
||||
// 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}
|
||||
name: 'haocheng Liu', // 必需
|
||||
},
|
||||
// blogger: {
|
||||
// // 博主信息，显示在首页侧边栏
|
||||
// avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg',
|
||||
// name: 'Evan Xu',
|
||||
// slogan: '前端界的小学生',
|
||||
// },
|
||||
social: {
|
||||
// 社交图标，显示于博主信息栏和页脚栏
|
||||
// iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
|
||||
icons: [
|
||||
{
|
||||
iconClass: 'icon-youjian',
|
||||
title: '发邮件',
|
||||
link: 'mailto:894072666@qq.com',
|
||||
},
|
||||
{
|
||||
iconClass: 'icon-github',
|
||||
title: 'GitHub',
|
||||
link: 'https://github.com/xugaoyi',
|
||||
},
|
||||
{
|
||||
iconClass: 'icon-erji',
|
||||
title: '听音乐',
|
||||
link: 'https://music.163.com/#/playlist?id=755597173',
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
// 页脚信息
|
||||
createYear: 2019, // 博客创建年份
|
||||
copyrightInfo:
|
||||
'Haocheng Liu | MIT License</a>', // 博客版权信息，支持a标签
|
||||
},
|
||||
// htmlModules // 插入hmtl(广告)模块
|
||||
}
|
||||
106
docs/.vuepress/config/themeConfig/htmlModules.js
Normal file
106
docs/.vuepress/config/themeConfig/htmlModules.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/** 插入自定义html模块 (可用于插入广告模块等)
|
||||
* {
|
||||
* homeSidebarB: htmlString, 首页侧边栏底部
|
||||
*
|
||||
* sidebarT: htmlString, 全局左侧边栏顶部
|
||||
* sidebarB: htmlString, 全局左侧边栏底部
|
||||
*
|
||||
* pageT: htmlString, 全局页面顶部
|
||||
* pageB: htmlString, 全局页面底部
|
||||
* pageTshowMode: string, 页面顶部-显示方式：未配置默认全局；'article' => 仅文章页①； 'custom' => 仅自定义页①
|
||||
* pageBshowMode: string, 页面底部-显示方式：未配置默认全局；'article' => 仅文章页①； 'custom' => 仅自定义页①
|
||||
*
|
||||
* windowLB: htmlString, 全局窗口左下角②
|
||||
* windowRB: htmlString, 全局窗口右下角②
|
||||
* }
|
||||
*
|
||||
* ①注：在.md文件front matter配置`article: false`的页面是自定义页，未配置的默认是文章页（首页除外）。
|
||||
* ②注：windowLB 和 windowRB：1.展示区块宽高最大是200*200px。2.请给自定义元素定一个不超过200px的固定宽高。3.在屏宽小于960px时无论如何都不会显示。
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
homeSidebarB:
|
||||
`<!-- 纵向自适应 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block;padding: 0.95rem;"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="7802654582"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
// sidebarT:
|
||||
// `<!-- 固定100% * 150px可显示，max-height:150px 未见显示-->
|
||||
// <ins class="adsbygoogle"
|
||||
// style="display:inline-block;width:100%;max-height:150px"
|
||||
// data-ad-client="ca-pub-7828333725993554"
|
||||
// data-ad-slot="6625304284"></ins>
|
||||
// <script>
|
||||
// (adsbygoogle = window.adsbygoogle || []).push({});
|
||||
// </script>`,
|
||||
sidebarB:
|
||||
`<!-- 正方形 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="3508773082"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
pageT:
|
||||
`<!-- 固定100% * 90px可显示，max-height:90px未见显示-->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;width:100%;max-height:90px"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="6625304284"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
// pageTshowMode: 'article',
|
||||
pageB:
|
||||
`<!-- 横向自适应 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="6620245489"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
// pageBshowMode: 'article',
|
||||
// windowLB: // 会遮挡部分侧边栏
|
||||
// `<!-- 固定200*200px -->
|
||||
// <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
// <ins class="adsbygoogle"
|
||||
// style="display:inline-block;width:200px;height:200px"
|
||||
// data-ad-client="ca-pub-7828333725993554"
|
||||
// data-ad-slot="6625304284"></ins>
|
||||
// <script>
|
||||
// (adsbygoogle = window.adsbygoogle || []).push({});
|
||||
// </script>`,
|
||||
windowRB:
|
||||
`<!-- 固定160*160px -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;max-width:160px;max-height:160px"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="8377369658"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
`,
|
||||
}
|
||||
|
||||
|
||||
// module.exports = {
|
||||
// homeSidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// sidebarT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// sidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// pageT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// pageB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// windowLB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// windowRB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// }
|
||||
42
docs/.vuepress/config/themeConfig/nav.js
Normal file
42
docs/.vuepress/config/themeConfig/nav.js
Normal file
@@ -0,0 +1,42 @@
|
||||
// nav
|
||||
module.exports = [
|
||||
{ text: '首页', link: '/' },
|
||||
{
|
||||
text: '指南',
|
||||
link: '/guide/',
|
||||
items: [
|
||||
{
|
||||
text: '介绍',
|
||||
link: '/pages/a3c9a2/',
|
||||
},
|
||||
{
|
||||
text: '快速开始',
|
||||
link: '/pages/introduce/',
|
||||
},
|
||||
{
|
||||
text: '打包部署',
|
||||
link: '/pages/6fe261/',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '前端',
|
||||
link: '/web/', //目录页链接，此处link是vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
|
||||
items: [
|
||||
// 说明：以下所有link的值只是在相应md文件定义的永久链接（不是什么特殊生成的编码）。另外，注意结尾是有斜杠的
|
||||
{
|
||||
text: '说明',
|
||||
link: '/pages/introduce/',
|
||||
},{
|
||||
text: '配置',
|
||||
link: '/pages/b8a7ad/',
|
||||
},{
|
||||
text: '代码示例',
|
||||
link: '/pages/5c0128/',
|
||||
},{
|
||||
text: '组件',
|
||||
link: '/pages/1ab4ce/',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
105
docs/.vuepress/config/themeConfig/sidebar.js
Normal file
105
docs/.vuepress/config/themeConfig/sidebar.js
Normal file
@@ -0,0 +1,105 @@
|
||||
// ！！！注：此文件没有使用到，仅用于测试和侧边栏数据格式的参考。
|
||||
|
||||
// 侧边栏
|
||||
module.exports = {
|
||||
'/01.前端/': [
|
||||
{
|
||||
title: 'JavaScript',
|
||||
collapsable: false, //是否可折叠，可选的，默认true
|
||||
children: [
|
||||
['01.JavaScript/01.JavaScript中的名词概念','JavaScript中的名词概念'],
|
||||
['01.JavaScript/02.数据类型转换','数据类型转换'],
|
||||
['01.JavaScript/03.ES5面向对象','ES5面向对象'],
|
||||
['01.JavaScript/04.ES6面向对象','ES6面向对象'],
|
||||
['01.JavaScript/05.new命令原理','new命令原理'],
|
||||
['01.JavaScript/06.多种数组去重性能对比','多种数组去重性能对比'],
|
||||
]
|
||||
},
|
||||
],
|
||||
'/02.页面/': [
|
||||
{
|
||||
title: 'html-css',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['01.html-css/00.flex布局语法','flex布局语法'],
|
||||
['01.html-css/01.flex布局案例-基础','flex布局案例-基础'],
|
||||
['01.html-css/02.flex布局案例-骰子','flex布局案例-骰子'],
|
||||
['01.html-css/03.flex布局案例-网格布局','flex布局案例-网格布局'],
|
||||
['01.html-css/04.flex布局案例-圣杯布局','flex布局案例-圣杯布局'],
|
||||
['01.html-css/05.flex布局案例-输入框布局','flex布局案例-输入框布局'],
|
||||
['01.html-css/06.CSS3之transform过渡','CSS3之transform过渡'],
|
||||
['01.html-css/07.CSS3之animation动画','CSS3之animation动画'],
|
||||
]
|
||||
},
|
||||
],
|
||||
'/03.技术杂谈/': [
|
||||
{
|
||||
title: '技术杂谈',
|
||||
collapsable: false, //是否可折叠，可选的，默认true
|
||||
sidebarDepth: 2, // 深度，可选的, 默认值是 1
|
||||
children: [
|
||||
['01.Git使用手册','Git使用手册'], // 同 {path: '01.Git使用手册', title: 'Git使用文档'}
|
||||
['02.GitHub高级搜索技巧','GitHub高级搜索技巧'],
|
||||
['03.Markdown使用教程','Markdown使用教程'],
|
||||
['04.npm常用命令','npm常用命令'],
|
||||
['05.yaml语言教程','yaml语言教程'],
|
||||
['06.解决百度无法收录搭建在GitHub上的个人博客的问题','解决百度无法收录搭建在GitHub上的个人博客的问题'],
|
||||
['07.使用Gitalk实现静态博客无后台评论系统','使用Gitalk实现静态博客无后台评论系统'],
|
||||
]
|
||||
}
|
||||
],
|
||||
'/04.其他/': [
|
||||
{
|
||||
title: '学习',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['01.学习/01.学习网站','学习网站'],
|
||||
['01.学习/02.学习效率低，忘性很大怎么办？','学习效率低，忘性很大怎么办？'],
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '学习笔记',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['02.学习笔记/01.小程序笔记','小程序笔记'],
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '面试',
|
||||
collapsable: false, //是否可折叠，可选的，默认true
|
||||
children: [
|
||||
['03.面试/01.面试问题集锦','面试问题集锦'],
|
||||
]
|
||||
},
|
||||
['01.在线工具','在线工具'],
|
||||
['02.友情链接','友情链接'],
|
||||
],
|
||||
// '/': [ // 在最后定义，在没有单独设置侧边栏时统一使用这个侧边栏
|
||||
// '',
|
||||
// 'git',
|
||||
// 'github',
|
||||
// 'markdown',
|
||||
// 'study',
|
||||
// 'interview'
|
||||
// // '/',
|
||||
// // {
|
||||
// // title: 'foo', // 标题，必要的
|
||||
// // path: '/foo/', // 标题的路径，可选的, 应该是一个绝对路径
|
||||
// // collapsable: false, // 是否可折叠，可选的，默认true
|
||||
// // sidebarDepth: 1, // 深度，可选的, 默认值是 1
|
||||
// // children: [
|
||||
// // ['foo/', '子页1'],
|
||||
// // 'foo/1',
|
||||
// // 'foo/2',
|
||||
// // ]
|
||||
// // },
|
||||
// // {
|
||||
// // title: 'bar',
|
||||
// // children: [
|
||||
// // ['bar/', '子页2'],
|
||||
// // 'bar/3',
|
||||
// // 'bar/4',
|
||||
// // ]
|
||||
// // }
|
||||
// ],
|
||||
}
|
||||
25
docs/.vuepress/enhanceApp.js
Normal file
25
docs/.vuepress/enhanceApp.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// import vue from 'vue/dist/vue.esm.browser'
|
||||
import Element from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
// bpmn 相关依赖
|
||||
import 'bpmn-js/dist/assets/diagram-js.css'
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
|
||||
// 左边工具栏以及编辑节点的样式
|
||||
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
|
||||
export default ({
|
||||
Vue, // VuePress 正在使用的 Vue 构造函数
|
||||
options, // 附加到根实例的一些选项
|
||||
router, // 当前应用的路由实例
|
||||
siteData // 站点元数据
|
||||
}) => {
|
||||
// if (!isServer) {
|
||||
// import('vue-toasted' /* webpackChunkName: "notification" */).then((module) => {
|
||||
// Vue.use(module.default)
|
||||
// })
|
||||
// }
|
||||
Vue.use(Element)
|
||||
// window.Vue = vue // 使页面中可以使用Vue构造函数 （使页面中的vue demo生效）
|
||||
}
|
||||
12
docs/.vuepress/plugins/love-me/index.js
Normal file
12
docs/.vuepress/plugins/love-me/index.js
Normal file
@@ -0,0 +1,12 @@
|
||||
const path= require('path');
|
||||
const LoveMyPlugin = (options={}) => ({
|
||||
define () {
|
||||
const COLOR = options.color || "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
|
||||
const EXCLUDECLASS = options.excludeClassName || ''
|
||||
return {COLOR, EXCLUDECLASS}
|
||||
},
|
||||
enhanceAppFiles: [
|
||||
path.resolve(__dirname, 'love-me.js')
|
||||
]
|
||||
});
|
||||
module.exports = LoveMyPlugin;
|
||||
62
docs/.vuepress/plugins/love-me/love-me.js
Normal file
62
docs/.vuepress/plugins/love-me/love-me.js
Normal file
@@ -0,0 +1,62 @@
|
||||
export default () => {
|
||||
if (typeof window !== "undefined") {
|
||||
(function(e, t, a) {
|
||||
function r() {
|
||||
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
|
||||
requestAnimationFrame(r)
|
||||
}
|
||||
function n() {
|
||||
var t = "function" == typeof e.onclick && e.onclick;
|
||||
|
||||
e.onclick = function(e) {
|
||||
// 过滤指定元素
|
||||
let mark = true;
|
||||
EXCLUDECLASS && e.path && e.path.forEach((item) =>{
|
||||
if(item.nodeType === 1) {
|
||||
typeof item.className === 'string' && item.className.indexOf(EXCLUDECLASS) > -1 ? mark = false : ''
|
||||
}
|
||||
})
|
||||
|
||||
if(mark) {
|
||||
t && t(),
|
||||
o(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
function o(e) {
|
||||
var a = t.createElement("div");
|
||||
a.className = "heart",
|
||||
s.push({
|
||||
el: a,
|
||||
x: e.clientX - 5,
|
||||
y: e.clientY - 5,
|
||||
scale: 1,
|
||||
alpha: 1,
|
||||
color: COLOR
|
||||
}),
|
||||
t.body.appendChild(a)
|
||||
}
|
||||
function i(e) {
|
||||
var a = t.createElement("style");
|
||||
a.type = "text/css";
|
||||
try {
|
||||
a.appendChild(t.createTextNode(e))
|
||||
} catch(t) {
|
||||
a.styleSheet.cssText = e
|
||||
}
|
||||
t.getElementsByTagName("head")[0].appendChild(a)
|
||||
}
|
||||
// function c() {
|
||||
// return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
|
||||
// }
|
||||
var s = [];
|
||||
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
|
||||
function(e) {
|
||||
setTimeout(e, 1e3 / 60)
|
||||
},
|
||||
i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
|
||||
n(),
|
||||
r()
|
||||
})(window, document)
|
||||
}
|
||||
}
|
||||
BIN
docs/.vuepress/public/img/EB-logo.png
Normal file
BIN
docs/.vuepress/public/img/EB-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/.vuepress/public/img/bg.jpeg
Normal file
BIN
docs/.vuepress/public/img/bg.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
docs/.vuepress/public/img/bg.jpg
Normal file
BIN
docs/.vuepress/public/img/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
BIN
docs/.vuepress/public/img/favicon.ico
Normal file
BIN
docs/.vuepress/public/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
docs/.vuepress/public/img/git.png
Normal file
BIN
docs/.vuepress/public/img/git.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1021 KiB |
BIN
docs/.vuepress/public/img/more.png
Normal file
BIN
docs/.vuepress/public/img/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
docs/.vuepress/public/img/other.png
Normal file
BIN
docs/.vuepress/public/img/other.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
docs/.vuepress/public/img/panda-waving.png
Normal file
BIN
docs/.vuepress/public/img/panda-waving.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
BIN
docs/.vuepress/public/img/python.png
Normal file
BIN
docs/.vuepress/public/img/python.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
docs/.vuepress/public/img/ui.png
Normal file
BIN
docs/.vuepress/public/img/ui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/.vuepress/public/img/web.png
Normal file
BIN
docs/.vuepress/public/img/web.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
59
docs/.vuepress/styles/index.styl
Normal file
59
docs/.vuepress/styles/index.styl
Normal file
@@ -0,0 +1,59 @@
|
||||
|
||||
// 评论区颜色重置
|
||||
.gt-container
|
||||
.gt-ico-tip
|
||||
&::after
|
||||
content: '。( Win + . ) 或 ( ⌃ + ⌘ + ␣ ) 打开表情'
|
||||
color: #999
|
||||
font-size: .8rem
|
||||
.gt-meta
|
||||
border-color var(--borderColor)!important
|
||||
.gt-comments-null
|
||||
color var(--textColor)
|
||||
opacity .5
|
||||
.gt-header-textarea
|
||||
color var(--textColor)
|
||||
background rgba(180,180,180,0.1)!important
|
||||
.gt-btn
|
||||
border-color $accentColor!important
|
||||
background-color $accentColor!important
|
||||
.gt-btn-preview
|
||||
background-color rgba(255,255,255,0)!important
|
||||
color $accentColor!important
|
||||
a
|
||||
color $accentColor!important
|
||||
.gt-svg svg
|
||||
fill $accentColor!important
|
||||
.gt-comment-content,.gt-comment-admin .gt-comment-content
|
||||
background-color rgba(150,150,150,0.1)!important
|
||||
&:hover
|
||||
box-shadow 0 0 25px rgba(150,150,150,.5)!important
|
||||
.gt-comment-body
|
||||
color var(--textColor)!important
|
||||
|
||||
|
||||
// qq徽章
|
||||
.qq
|
||||
position: relative;
|
||||
.qq::after
|
||||
content: "可撩";
|
||||
background: $accentColor;
|
||||
color:#fff;
|
||||
padding: 0 5px;
|
||||
border-radius: 10px;
|
||||
font-size:12px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -35px;
|
||||
transform:scale(0.85);
|
||||
|
||||
// demo模块图标颜色
|
||||
body .vuepress-plugin-demo-block__wrapper
|
||||
&,.vuepress-plugin-demo-block__display
|
||||
border-color rgba(160,160,160,.3)
|
||||
.vuepress-plugin-demo-block__footer:hover
|
||||
.vuepress-plugin-demo-block__expand::before
|
||||
border-top-color: $accentColor !important;
|
||||
border-bottom-color: $accentColor !important;
|
||||
svg
|
||||
fill: $accentColor !important;
|
||||
68
docs/.vuepress/styles/palette.styl
Normal file
68
docs/.vuepress/styles/palette.styl
Normal file
@@ -0,0 +1,68 @@
|
||||
//***vdoing主题-样式变量***//
|
||||
|
||||
// 以下注释的变量仅供参考，主题使用的最新变量请查看：https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/theme-vdoing/styles/palette.styl
|
||||
// 你可以在这个文件内修改这些变量的值
|
||||
|
||||
// // 颜色
|
||||
|
||||
// $bannerTextColor = #fff // 首页banner区(博客标题)文本颜色
|
||||
// $accentColor = #11A8CD
|
||||
// $activeColor = #ff5722
|
||||
// $arrowBgColor = #ccc
|
||||
// $badgeTipColor = #42b983
|
||||
// $badgeWarningColor = darken(#ffe564, 35%)
|
||||
// $badgeErrorColor = #DA5961
|
||||
|
||||
// // 布局
|
||||
// $navbarHeight = 3.6rem
|
||||
// $sidebarWidth = 18rem
|
||||
// $contentWidth = 860px
|
||||
// $homePageWidth = 1100px
|
||||
// $rightMenuWidth = 230px // 右侧菜单
|
||||
|
||||
// // 代码块
|
||||
// $lineNumbersWrapperWidth = 2.5rem
|
||||
|
||||
// // 浅色模式
|
||||
// .theme-mode-light
|
||||
// --bodyBg: #f4f4f4
|
||||
// --mainBg: rgba(255,255,255,1)
|
||||
// --sidebarBg: rgba(255,255,255,.8)
|
||||
// --blurBg: rgba(255,255,255,.9)
|
||||
// --textColor: #004050
|
||||
// --textLightenColor: #0085AD
|
||||
// --borderColor: rgba(0,0,0,.15)
|
||||
// // 代码块浅色主题
|
||||
// --codeBg: #f6f6f6
|
||||
// --codeColor: #525252
|
||||
// codeThemeLight()
|
||||
// // // 代码块深色主题
|
||||
// // --codeBg: #252526
|
||||
// // --codeColor: #fff
|
||||
// // codeThemeDark()
|
||||
|
||||
// // 深色模式
|
||||
// .theme-mode-dark
|
||||
// --bodyBg: rgb(39,39,43)
|
||||
// --mainBg: rgba(30,30,34,1)
|
||||
// --sidebarBg: rgba(30,30,34,.8)
|
||||
// --blurBg: rgba(30,30,34,.8)
|
||||
// --textColor: rgb(140,140,150)
|
||||
// --textLightenColor: #0085AD
|
||||
// --borderColor: #2C2C3A
|
||||
// --codeBg: #252526
|
||||
// --codeColor: #fff
|
||||
// codeThemeDark()
|
||||
|
||||
// // 阅读模式
|
||||
// .theme-mode-read
|
||||
// --bodyBg: rgb(240,240,208)
|
||||
// --mainBg: rgba(245,245,213,1)
|
||||
// --sidebarBg: rgba(245,245,213,.8)
|
||||
// --blurBg: rgba(245,245,213,.9)
|
||||
// --textColor: #004050
|
||||
// --textLightenColor: #0085AD
|
||||
// --borderColor: rgba(0,0,0,.15)
|
||||
// --codeBg: #282c34
|
||||
// --codeColor: #fff
|
||||
// codeThemeDark()
|
||||
16
docs/00.目录页/01.指南.md
Normal file
16
docs/00.目录页/01.指南.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
pageComponent:
|
||||
name: Catalogue
|
||||
data:
|
||||
key: 01.指南
|
||||
imgUrl: /img/web.png
|
||||
description: 通用框架基本说明
|
||||
title: 指南
|
||||
date: 2020-03-11 21:50:53
|
||||
permalink: /guide
|
||||
sidebar: false
|
||||
article: false
|
||||
comment: false
|
||||
editLink: false
|
||||
---
|
||||
|
||||
16
docs/00.目录页/02.前端.md
Normal file
16
docs/00.目录页/02.前端.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
pageComponent:
|
||||
name: Catalogue
|
||||
data:
|
||||
key: 02.前端
|
||||
imgUrl: /img/web.png
|
||||
description: 前端框架使用说明
|
||||
title: 前端
|
||||
date: 2020-03-11 21:50:53
|
||||
permalink: /web
|
||||
sidebar: false
|
||||
article: false
|
||||
comment: false
|
||||
editLink: false
|
||||
---
|
||||
|
||||
113
docs/01.指南/01.介绍.md
Normal file
113
docs/01.指南/01.介绍.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: 介绍
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/a3c9a2/
|
||||
---
|
||||
# 介绍
|
||||
|
||||
通用框架组件是由前端及后台两部分组成，通过对单表操作代码的封装，使使用者在较小的开发工作下，完成业务系统的开发。
|
||||
|
||||
## 前端用到的技术
|
||||
|
||||
1. [**Vue**](https://cn.vuejs.org/) Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
|
||||
|
||||
2. [**Vuex**](https://vuex.vuejs.org/zh-cn/) 前端状态管理
|
||||
|
||||
3. [**Vue-router**](https://router.vuejs.org/zh-cn/) 管理页面路由跳转。
|
||||
|
||||
4. [**axios**](https://github.com/axios/axios) 前端请求后台获取数据的工具，类似于ajax。
|
||||
|
||||
5. [**Vue-cli**](https://github.com/vuejs/vue-cli) Vue项目的手脚架搭建客户端。
|
||||
|
||||
6. [**Typescript**](https://www.tslang.cn/) 是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性（如装饰器 [1] ）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。
|
||||
|
||||
7. [**vue-typescript-admin-template**](https://github.com/Armour/vue-typescript-admin-template) 一套封装较为成熟的管理系统Vue模板，包含较多的实用性组件及示例。
|
||||
|
||||
8. [**elementUI**](https://element.eleme.cn/#/zh-CN) ，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
|
||||
|
||||
9. [**vue-class-component**](https://github.com/vuejs/vue-class-component) 使用typescript语法及注解简化代码插件
|
||||
|
||||
10. [**vue-property-decorator**](https://github.com/kaorun343/vue-property-decorator) 使用 typescript 语法及注解简化代码的插件
|
||||
|
||||
## 后台用到的技术
|
||||
|
||||
1. [**SpringBoot**](https://spring.io/projects/spring-boot/) 快速开发，自动装配的Spring家族的框架
|
||||
|
||||
2. [**Mybatis**](https://mybatis.org/mybatis-3/zh/index.html) 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。
|
||||
|
||||
3. [**Apache Shiro**](http://shiro.apache.org/) 是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序。
|
||||
|
||||
4. [**Lombok**](https://projectlombok.org/) 项目是一个Java库，它会自动插入编辑器和构建工具中，Lombok提供了一组有用的注释，用来消除Java类中的大量样板代码。仅五个字符(@Data)就可以替换数百行代码从而产生干净，简洁且易于维护的Java类。
|
||||
|
||||
5. [**Druid**](https://github.com/alibaba/druid/) Java语言中被广泛应用的的数据库连接池。Druid能够提供强大的监控和扩展功能。
|
||||
|
||||
6. [**knife4j**](https://doc.xiaominfo.com/) 是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,取名kni4j是希望她能像一把匕首一样小巧,轻量,并且功能强悍!
|
||||
|
||||
7. [**tkMybaits**](https://github.com/abel533/Mapper) 通用Mapper都可以极大的方便开发人员。可以随意的按照自己的需要选择通用方法，还可以很方便的开发自己的通用方法。极其方便的使用MyBatis单表的增删改查。支持单表操作，不支持通用的多表联合查询。通用 Mapper 支持 Mybatis-3.2.4 及以上版本。
|
||||
|
||||
## 它是如何工作的？
|
||||
|
||||
通用框架，通过前端及后台对单表操作代码的封装，省去了单表操作代码的开发工作量，仅通过配置，即可生成相应的功能。
|
||||
使开发者更加专注于需求、页面展示及关联查询等复杂需求的开发。
|
||||
|
||||
|
||||
首先，使用前需要将业务表的信息录入到配置表当中。在配置表中，我们设计了table表，field表，及select表。
|
||||
将表信息录入到配置表中以后，通过单表通用接口中的getTableInfo接口进行表信息的获取，即可获取当前业务表的全部信息。
|
||||
|
||||
**table表：**
|
||||
|
||||
|
||||
|
||||
**field表:**
|
||||
|
||||
|
||||
**select表:**
|
||||
|
||||
|
||||
|
||||
后台中如何做到单表操作通过一套接口进行封装？最初的项目中，我们通过将表别名设置成一个变量，由前端传入。
|
||||
同时摒弃了MVC设计模式，通过Map集合的方式进行传值，更加自由，且不限制具体字段。但是随即暴露出的问题就是表名会暴露在前端中，产生一系列安全问题。
|
||||
于是我们再配置表中加入表别名字段，并通过REST接口的方式，将表别名当做一个参数写入URL中，增加接口地址安全性。
|
||||
后台再通过表别名映射成真实表名，进行单表通用接口的操作。后台基本思路就是将表名当做参数，然后通过前端传值，进行SQL拼接完成通用接口。
|
||||
|
||||
**后台接口示例：**
|
||||
``` java
|
||||
/**
|
||||
* 通用保存接口（不带保存日前）
|
||||
*
|
||||
* @param typeName --- 表名映射
|
||||
* @param map --- 保存参数
|
||||
* @return
|
||||
*/
|
||||
@ApiOperation(value = "保存接口（不带保存日期）")
|
||||
@PostMapping("/{typeName}")
|
||||
public ResultVO save(@PathVariable String typeName, @RequestParam Map<String, Object> map) {
|
||||
return tableService.save(tableNameUtil.getTableName(typeName), map);
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用保存接口（带保存和更新日期）
|
||||
*
|
||||
* @param typeName --- 表名映射
|
||||
* @param map --- 保存参数
|
||||
* @return
|
||||
*/
|
||||
@ApiOperation(value = "保存接口（带保存日期）")
|
||||
@PostMapping("/{typeName}/date")
|
||||
public ResultVO saveWithDate(@PathVariable String typeName, @RequestParam Map<String, Object> map) {
|
||||
return tableService.saveWithDate(tableNameUtil.getTableName(typeName), map);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
在前端中，页面实例再创建后，首先需要通过getTableInfo接口获取当前页面需要渲染的表的表信息。
|
||||
然后前端组件通过读取表信息后，自动生成表格，搜索表单，新增及编辑表单，按钮等页面内容。
|
||||
最后通过读取单表通用接口数据，将数据加载入表格当中完成整个页面渲染。
|
||||
|
||||
**前端通用页面示例：**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
125
docs/01.指南/02.快速开始.md
Normal file
125
docs/01.指南/02.快速开始.md
Normal file
@@ -0,0 +1,125 @@
|
||||
---
|
||||
title: 快速开始
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/b0b86c/
|
||||
---
|
||||
# 快速上手
|
||||
|
||||
::: warning 前提条件
|
||||
编译器安装好 Lombok 插件，jdk环境1.8，需要最新的LTS版本的 [Node.js](https://nodejs.org/en/)
|
||||
|
||||
运行工具推荐使用 [Yarn](https://yarn.bootcss.com/)
|
||||
|
||||
请clone代码时尽量从Tags中选择，Tags中的代码皆为稳定版，存在bug较少。
|
||||
:::
|
||||
|
||||
本文会帮助你从头搭建并运行简单版本的通用框架前后端。
|
||||
|
||||
## 后台搭建
|
||||
|
||||
1. 从git仓库clone后台代码
|
||||
|
||||
``` bash
|
||||
# 此处clone后台代码为dameng1.0版本的代码，mysql请下载mysql对应版本
|
||||
git clone -b dameng-1.0 http://taixingyiji.synology.me:1010/common-frame/common.git
|
||||
```
|
||||
|
||||
2. 引入编译器，等待maven下载好依赖
|
||||
|
||||
3. 创建数据库，并运行 `src>main>resources>common.sql` 文件
|
||||
|
||||
4. 修改yml文件，目录为 `src>main>resources>application.yml`
|
||||
|
||||
**配置数据库数据源：**
|
||||
``` yaml
|
||||
datasource:
|
||||
type: com.alibaba.druid.pool.DruidDataSource
|
||||
# 将此处修改成你的数据库地址
|
||||
url: jdbc:dm://192.168.10.3:5236/COMMON?zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=utf-8
|
||||
# 将此处修改你的数据库用户名
|
||||
username: COMMON
|
||||
# 将此处修改成你的数据库密码
|
||||
password: 123456789
|
||||
# 指定数据库驱动
|
||||
driver-class-name: dm.jdbc.driver.DmDriver
|
||||
```
|
||||
**配置token存证是否存入redis：**
|
||||
``` yaml
|
||||
spring:
|
||||
# 若不使用redis需要注释掉此类信息
|
||||
redis:
|
||||
database: 0
|
||||
# redis地址
|
||||
host: 192.168.100.145
|
||||
# redis端口号
|
||||
port: 6379
|
||||
# redis 密码
|
||||
password: root
|
||||
lettuce:
|
||||
pool:
|
||||
# 连接池中的最大空闲连接 默认8
|
||||
max-idle: 8
|
||||
# 连接池中的最小空闲连接 默认0
|
||||
min-idle: 0
|
||||
# 连接池最大连接数 默认8 ，负数表示没有限制
|
||||
max-active: 8
|
||||
# 连接池最大阻塞等待时间（使用负值表示没有限制） 默认-1
|
||||
max-wait: -1
|
||||
timeout: 30000
|
||||
# 是否开启redis 用户登录，若开启此项，需要配置redis节点及相关配置，若不开启，需要注释掉redis相关配置信息
|
||||
isRedisLogin: false
|
||||
```
|
||||
**配置分页插件：**
|
||||
|
||||
``` yaml
|
||||
# 分页插件设置成达梦数据库支持，若不是达梦数据库需要注释掉此部分
|
||||
pagehelper:
|
||||
helperDialect: dm
|
||||
reasonable: true
|
||||
supportMethodsArguments: true
|
||||
pageSizeZero: true
|
||||
params: count=countSql
|
||||
```
|
||||
5. 通过启动类启动后台项目 `src>main>java>com.commmon.common>CommonApplication.java`
|
||||
|
||||
现在你的后台项目已经配置完成，且已经启动，接下来需要配置前端项目。
|
||||
|
||||
## 前端搭建
|
||||
|
||||
1. 通过git下载前端项目
|
||||
|
||||
``` bash
|
||||
# 此处clone前端代码为dameng1.0版本的代码，mysql请下载mysql对应版本
|
||||
git clone -b dameng-1.0 http://taixingyiji.synology.me:1010/common-frame/common-web.git
|
||||
```
|
||||
2. 安装依赖
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
3. 修改配置文件 `./vue.config.js`
|
||||
|
||||
``` js
|
||||
'/common': {
|
||||
// 此处修改成你的后台服务器地址及端口，其余配置不变
|
||||
target: 'http://127.0.0.1:8081' ,
|
||||
changeOrigin: true, // needed for virtual hosted sites
|
||||
ws: true, // proxy websockets
|
||||
pathRewrite: {
|
||||
// '^/common': ''
|
||||
}
|
||||
}
|
||||
```
|
||||
4. 启动本地开发环境（自带热启动)
|
||||
|
||||
```bash
|
||||
yarn serve
|
||||
```
|
||||
|
||||
5. 通过浏览器访问
|
||||
|
||||
```http request
|
||||
http://localhost:9527
|
||||
```
|
||||
|
||||
|
||||
75
docs/01.指南/03.打包部署.md
Normal file
75
docs/01.指南/03.打包部署.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: 打包部署
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/6fe261/
|
||||
---
|
||||
# 打包部署
|
||||
|
||||
::: tip
|
||||
框架提供两种部署方式，第一种为前后端一起打包部署，第二种为前后端分离打包部署。
|
||||
:::
|
||||
|
||||
|
||||
## 前后端一起部署
|
||||
|
||||
1. 修改生产环境Base url文件 `./.env.production`
|
||||
|
||||
``` properties
|
||||
VUE_APP_BASE_API = './'
|
||||
```
|
||||
|
||||
2. 进入前端目录执行打包命令
|
||||
``` bash
|
||||
cd common-web
|
||||
|
||||
yarn build:prod
|
||||
```
|
||||
|
||||
3. 执行完成后前端项目将生产dist文件夹
|
||||
|
||||
|
||||
|
||||
4. 打开dist目录，将除了 `index.html` 的文件全部考入后端项目 `src>main>resources>static` 目录下
|
||||
，将 `index.html` 文件考入到 `src>main>resources>templates` 目录下
|
||||
|
||||
|
||||
|
||||
5. 进入后台代码目录，执行maven打包命令
|
||||
|
||||
``` bash
|
||||
cd common/
|
||||
|
||||
mvn clean package
|
||||
```
|
||||
|
||||
6. 将生成的war包上传到tomcat等服务器进行部署。
|
||||
|
||||
## 前后端分离部署
|
||||
|
||||
1. 修改生产环境Base url文件 `./.env.production`
|
||||
|
||||
``` properties
|
||||
# Base api，此处填写后台请求的地址及端口及路径
|
||||
VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
|
||||
```
|
||||
|
||||
2. 进入前端目录执行打包命令
|
||||
``` bash
|
||||
cd common-web
|
||||
|
||||
yarn build:prod
|
||||
```
|
||||
|
||||
3. 执行完成后前端项目将生产dist文件夹
|
||||
|
||||
|
||||
|
||||
4. 将生成的dist文件夹里面内容上传至Nginx或Apache静态服务器
|
||||
|
||||
5. 进入后台代码目录执行maven打包命令
|
||||
|
||||
``` bash
|
||||
mvn clean package
|
||||
```
|
||||
|
||||
6. 将生成的war包上传到tomcat等服务器进行部署。
|
||||
37
docs/02.前端/01.说明/01.简介.md
Normal file
37
docs/02.前端/01.说明/01.简介.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: 简介
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/introduce/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 简介
|
||||
::: tip
|
||||
前端项目来源于GitHub中Armour所写的开源项目[vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
项目地址:[https://github.com/Armour/vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
本框架前端基于 [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) ，并增加部分功能，部分说明文档来源于 [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## 前序准备
|
||||
|
||||
你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [typescript](https://www.typescriptlang.org/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element) ，提前了解和学习这些知识会对使用本项目有很大的帮助。
|
||||
|
||||
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
|
||||
|
||||
| [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122300.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122347.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122223.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122410.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
88
docs/02.前端/01.说明/02.功能.md
Normal file
88
docs/02.前端/01.说明/02.功能.md
Normal file
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: 功能
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/767f7b/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 功能
|
||||
|
||||
```txt
|
||||
- 登录 / 注销
|
||||
|
||||
- 权限验证
|
||||
- 页面权限
|
||||
- 指令权限
|
||||
- 权限配置
|
||||
- 二步登录
|
||||
|
||||
- 通用模板示例
|
||||
|
||||
- 后台配置可视化操作界面
|
||||
- 配置表增删改查
|
||||
- 配置字段增删改查
|
||||
- 配置基表及格式化字段增删改查
|
||||
|
||||
- 多环境发布
|
||||
- Dev / Stage / Prod
|
||||
|
||||
- 全局功能
|
||||
- 国际化多语言
|
||||
- 动态换肤
|
||||
- 动态侧边栏（支持多级路由嵌套）
|
||||
- 动态面包屑
|
||||
- 快捷导航(支持右键操作)
|
||||
- 粘贴板
|
||||
- Svg 图标
|
||||
- 搜索
|
||||
- 全屏
|
||||
- 设置
|
||||
- Mock 数据 / Mock 服务器
|
||||
- 支持 PWA
|
||||
|
||||
- 组件
|
||||
- 编辑器
|
||||
- 富文本编辑器
|
||||
- Markdown 编辑器
|
||||
- JSON 编辑器
|
||||
- 头像上传
|
||||
- 返回顶部
|
||||
- CountTo
|
||||
- 拖放区
|
||||
- 拖拽弹窗
|
||||
- 拖拽看板
|
||||
- 拖拽列表
|
||||
- 拖拽选择
|
||||
- ECharts 图表
|
||||
- Mixin
|
||||
- 拆分窗格
|
||||
- 黏性组件
|
||||
|
||||
- 表格
|
||||
- 动态表格
|
||||
- 拖拽表格
|
||||
- 内联编辑表格
|
||||
- 复杂表格
|
||||
|
||||
- Excel
|
||||
- 导出excel
|
||||
- 导入excel
|
||||
- 前端可视化excel
|
||||
|
||||
- Zip
|
||||
- 导出zip
|
||||
|
||||
- PDF
|
||||
- 下载 pdf
|
||||
|
||||
- 控制台
|
||||
- 引导页
|
||||
- 综合实例
|
||||
- 错误日志
|
||||
- 错误页面
|
||||
- 401
|
||||
- 404
|
||||
```
|
||||
63
docs/02.前端/01.说明/03.如何设置以及启动项目.md
Normal file
63
docs/02.前端/01.说明/03.如何设置以及启动项目.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: 如何设置以及启动项目
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/b7e102/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 如何设置以及启动项目
|
||||
|
||||
## 安装依赖
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
## 启动本地开发环境（自带热启动）
|
||||
|
||||
```bash
|
||||
yarn serve
|
||||
```
|
||||
|
||||
## 构建生产环境 (自带压缩)
|
||||
|
||||
```bash
|
||||
yarn build:prod
|
||||
```
|
||||
|
||||
## 构建阶段性生产环境 (自带压缩)
|
||||
|
||||
```bash
|
||||
yarn build:stage
|
||||
```
|
||||
|
||||
## 代码格式检查以及自动修复
|
||||
|
||||
```bash
|
||||
yarn lint
|
||||
```
|
||||
|
||||
## 运行单元测试
|
||||
|
||||
```bash
|
||||
yarn test:unit
|
||||
```
|
||||
|
||||
## 运行端对端测试
|
||||
|
||||
```bash
|
||||
yarn test:e2e
|
||||
```
|
||||
|
||||
## 自动生成 svg 组件
|
||||
|
||||
```bash
|
||||
yarn run svg
|
||||
```
|
||||
|
||||
## 自定义 Vue 配置
|
||||
|
||||
请看 [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
58
docs/02.前端/01.说明/04.目录结构.md
Normal file
58
docs/02.前端/01.说明/04.目录结构.md
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: 目录结构
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/0ec1c8/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 目录结构
|
||||
|
||||
本项目已经为你生成了一个完整的开发框架，提供了涵盖后台开发的各类功能和坑位，下面是整个项目的目录结构。
|
||||
|
||||
```bash
|
||||
├── mock # mock 服务器 与 模拟数据
|
||||
├── public # 静态资源 (会被直接复制)
|
||||
│ │── favicon.ico # favicon图标
|
||||
│ │── manifest.json # PWA 配置文件
|
||||
│ └── index.html # html模板
|
||||
├── src # 源代码
|
||||
│ ├── api # ts业务代码
|
||||
│ │ ├── api # 所有请求
|
||||
│ │ ├── mixins # mixins 代码
|
||||
│ │ └── views # 页面实例代码
|
||||
│ ├── assets # 主题 字体等静态资源 (由 webpack 处理加载)
|
||||
│ ├── common # 通用工具类及公用方法
|
||||
│ ├── components # 全局组件
|
||||
│ ├── directive # 全局指令
|
||||
│ ├── filters # 全局过滤函数
|
||||
│ ├── icons # svg 图标
|
||||
│ ├── lang # 国际化
|
||||
│ ├── layout # 全局布局
|
||||
│ ├── pwa # PWA service worker 相关的文件
|
||||
│ ├── router # 路由
|
||||
│ ├── store # 全局 vuex store
|
||||
│ ├── styles # 全局样式
|
||||
│ ├── utils # 全局方法
|
||||
│ ├── views # 所有页面
|
||||
│ ├── App.vue # 入口页面
|
||||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||||
│ ├── permission.ts # 权限管理
|
||||
│ ├── settings.ts # 设置文件
|
||||
│ └── shims.d.ts # 模块注入
|
||||
├── tests # 测试
|
||||
├── .circleci/ # 自动化 CI 配置
|
||||
├── .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer)
|
||||
├── .editorconfig # 编辑相关配置
|
||||
├── .env.xxx # 环境变量配置
|
||||
├── .eslintrc.js # eslint 配置
|
||||
├── babel.config.js # babel-loader 配置
|
||||
├── cypress.json # e2e 测试配置
|
||||
├── jest.config.js # jest 单元测试配置
|
||||
├── package.json # package.json 依赖
|
||||
├── postcss.config.js # postcss 配置
|
||||
├── tsconfig.json # typescript 配置
|
||||
└── vue.config.js # vue-cli 配置
|
||||
```
|
||||
70
docs/02.前端/02.配置/01.BaseURL配置.md
Normal file
70
docs/02.前端/02.配置/01.BaseURL配置.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: BaseURL配置
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/b8a7ad/
|
||||
---
|
||||
# Base url设置
|
||||
|
||||
::: tip
|
||||
当我们配置好后台接口后，往往后台都会跟一个路径。如 `http://127.0.0.1:8080/common` 中的 `/common`，我们需要根据生产环境，开发环境，阶段性环境来进行不同的配置
|
||||
:::
|
||||
|
||||
## 配置开发环境
|
||||
|
||||
开发环境需要配置文件 `./.env.development`
|
||||
|
||||
``` properties
|
||||
# Base api,此处配置端口后面的Base URL
|
||||
VUE_APP_BASE_API = '/common'
|
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||
# It only does one thing by converting all import() to require().
|
||||
# This configuration can significantly increase the speed of hot updates,
|
||||
# when you have a large number of pages.
|
||||
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
|
||||
# 此处默认开启，如需了解更多请访问上方URL
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
```
|
||||
|
||||
## 配置阶段性环境
|
||||
|
||||
阶段性环境配置文件 `./env.staging`
|
||||
|
||||
- 前端后台部署在一起
|
||||
|
||||
``` properties
|
||||
# 设置成部署环境
|
||||
NODE_ENV = production
|
||||
|
||||
# Base api，配置
|
||||
VUE_APP_BASE_API = './'
|
||||
```
|
||||
|
||||
- 前后端分离部署
|
||||
|
||||
``` properties
|
||||
# 设置成部署环境
|
||||
NODE_ENV = production
|
||||
|
||||
# Base api，分离部署需要添加http路径
|
||||
VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
|
||||
```
|
||||
|
||||
## 配置生产环境
|
||||
|
||||
阶段性环境配置文件 `./env.production`
|
||||
|
||||
- 前端后台部署在一起
|
||||
|
||||
``` properties
|
||||
# Base api
|
||||
VUE_APP_BASE_API = './'
|
||||
```
|
||||
|
||||
- 前后端分离部署
|
||||
|
||||
``` properties
|
||||
# Base api，分离部署需要添加http路径
|
||||
VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
|
||||
```
|
||||
126
docs/02.前端/02.配置/02.vueconfig配置.md
Normal file
126
docs/02.前端/02.配置/02.vueconfig配置.md
Normal file
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: vue.config.js文件配置
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/f410bd/
|
||||
---
|
||||
# vue.config.js
|
||||
|
||||
::: tip
|
||||
本部分提供适当所需注释，如有其它配置更改需要，请查询[Vue-Cli](https://cli.vuejs.org/zh/config)
|
||||
:::
|
||||
|
||||
``` js
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const path = require('path')
|
||||
|
||||
// If your port is set to 80,
|
||||
// use administrator privileges to execute the command line.
|
||||
// For example, on Mac: sudo npm run / sudo yarn
|
||||
const devServerPort = 9527 // TODO: get this variable from setting.ts
|
||||
const mockServerPort = 9528 // TODO: get this variable from setting.ts
|
||||
const name = 'Vue Typescript Admin' // TODO: get this variable from setting.ts
|
||||
|
||||
module.exports = {
|
||||
// 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，
|
||||
// 但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath
|
||||
publicPath: './',
|
||||
// 默认生成的打包文件夹路径
|
||||
outputDir: 'dist',
|
||||
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 资源放的目录
|
||||
assetsDir: './static',
|
||||
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字
|
||||
indexPath: './index.html',
|
||||
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
// 是否需要生成环境的 source map
|
||||
productionSourceMap: false,
|
||||
// 设置开发时的端口及后端目录
|
||||
devServer: {
|
||||
// 开发环境的启动端口
|
||||
port: devServerPort,
|
||||
open: true,
|
||||
overlay: {
|
||||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
// progress: false,
|
||||
proxy: {
|
||||
'/common': {
|
||||
// 开发环境的后台请求接口
|
||||
target: 'http://127.0.0.1:8081' ,
|
||||
changeOrigin: true, // needed for virtual hosted sites
|
||||
ws: true, // proxy websockets
|
||||
pathRewrite: {
|
||||
// '^/common': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 向 PWA 插件传递选项
|
||||
pwa: {
|
||||
name: name,
|
||||
workboxPluginMode: 'InjectManifest',
|
||||
workboxOptions: {
|
||||
swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js')
|
||||
}
|
||||
},
|
||||
// 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
|
||||
pluginOptions: {
|
||||
'style-resources-loader': {
|
||||
preProcessor: 'scss',
|
||||
patterns: [
|
||||
// 全局样式配置文件，加上自己的路径,不能使用(如下:alias)中配置的别名路径
|
||||
path.resolve(__dirname, 'src/styles/_variables.scss'),
|
||||
path.resolve(__dirname, 'src/styles/_mixins.scss')
|
||||
]
|
||||
}
|
||||
},
|
||||
// 将代码公共部分集中打包，减少打包所需时间，是打包后的文件体积更小
|
||||
chainWebpack(config) {
|
||||
// provide the app's title in webpack's name field, so that
|
||||
// it can be accessed in index.html to inject the correct title.
|
||||
config.set('name', name)
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
// Change development env source map if you want.
|
||||
// The default in vue-cli is 'eval-cheap-module-source-map'.
|
||||
// config
|
||||
// .when(process.env.NODE_ENV === 'development',
|
||||
// config => config.devtool('eval-cheap-source-map')
|
||||
// )
|
||||
|
||||
config
|
||||
.when(process.env.NODE_ENV !== 'development',
|
||||
config => {
|
||||
config
|
||||
.optimization.splitChunks({
|
||||
chunks: 'all',
|
||||
cacheGroups: {
|
||||
libs: {
|
||||
name: 'chunk-libs',
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 10,
|
||||
chunks: 'initial' // only package third parties that are initially dependent
|
||||
},
|
||||
elementUI: {
|
||||
name: 'chunk-elementUI', // split elementUI into a single package
|
||||
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
|
||||
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
|
||||
},
|
||||
commons: {
|
||||
name: 'chunk-commons',
|
||||
test: path.resolve(__dirname, 'src/components'),
|
||||
minChunks: 3, // minimum common number
|
||||
priority: 5,
|
||||
reuseExistingChunk: true
|
||||
}
|
||||
}
|
||||
})
|
||||
config.optimization.runtimeChunk('single')
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
54
docs/02.前端/03.代码示例/01.Api示例.md
Normal file
54
docs/02.前端/03.代码示例/01.Api示例.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Api示例
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/5c0128/
|
||||
---
|
||||
# Api示例
|
||||
|
||||
::: tip
|
||||
此处提供一个如何从后台调用接口的Api示例
|
||||
:::
|
||||
|
||||
::: warning 注意
|
||||
多个功能模块推荐创建多个api文件，方便代码维护
|
||||
:::
|
||||
|
||||
1. 进入 `src>api>api` 文件夹中，创建一个文件，这里我们以UserApi.ts为例，并写入类的基本信息
|
||||
``` ts
|
||||
class UserApi{
|
||||
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
2. 引入封装好的 `axios` 并继承
|
||||
|
||||
``` ts {1,3}
|
||||
import BaseAxios from '@/common/http'
|
||||
|
||||
class UserApi extends BaseAxios<any, any>{
|
||||
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
3. 根据后台接口文档写入需要请求的方法，注意请求方法
|
||||
|
||||
``` ts {5,6,7,8,10,11,12,13}
|
||||
import BaseAxios from '@/common/http'
|
||||
|
||||
class UserApi extends BaseAxios<any, any>{
|
||||
|
||||
// 根据用户id获取角色id
|
||||
public getRoleByUserId(param: any): Promise<Base.AxiosResponse<any>> {
|
||||
return this.axios.get('/ftUser/getRoleByUserId', param)
|
||||
}
|
||||
|
||||
// 给用户添加角色
|
||||
public addRole(param: any): Promise<Base.AxiosResponse<any>> {
|
||||
return this.axios.post('/ftUser/addRole', param)
|
||||
}
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
263
docs/02.前端/03.代码示例/02.新增页面示例.md
Normal file
263
docs/02.前端/03.代码示例/02.新增页面示例.md
Normal file
@@ -0,0 +1,263 @@
|
||||
---
|
||||
title: 新增页面示例
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/5003ef/
|
||||
---
|
||||
# 新增页面示例
|
||||
|
||||
::: tip
|
||||
此处提供使用通用模板的页面使用方法，若要添加常规页面请参考 [Vue](https://cn.vuejs.org/) 官网提供的说明。
|
||||
使用此方法前需要已经在配置表配置好需要调用的单表信息。
|
||||
:::
|
||||
|
||||
1. 首先在 `src>api>views` 中新建文件夹 `user-example` ，进入文件夹新建文件 `user-example.ts`，写入以下信息
|
||||
|
||||
``` ts
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
|
||||
@Component({
|
||||
name: 'userExample'
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
}
|
||||
```
|
||||
|
||||
2. 添加默认配置信息，需要使用者根据注释及页面需求更改配置
|
||||
|
||||
``` ts {4,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61}
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
import StringUtils from '@/common/StringUtils'
|
||||
|
||||
@Component({
|
||||
name: 'userExample'
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
// 表格中 '操作'列的宽度
|
||||
private operationWidth = 200
|
||||
|
||||
async created() {
|
||||
// 设置默认排序
|
||||
this.sort = 'UPDATE_TIME'
|
||||
this.order = 'DESC'
|
||||
// 设置表别名
|
||||
this.tableAlias = 'user'
|
||||
// 获取表头及表单信息
|
||||
await this.acquireTableInfo()
|
||||
// 获取基表信息格式化下拉框及表格数据
|
||||
await this.getBaseTableInfo()
|
||||
// 获取列表信息
|
||||
this.acquireTable()
|
||||
// 设置默认校验构造
|
||||
this.formRules = {
|
||||
PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
||||
USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
// 设置默认禁用字段
|
||||
this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
|
||||
}
|
||||
|
||||
// 编辑表格新增行
|
||||
addRow() {
|
||||
const obj: any = {
|
||||
index: this.editList.length,
|
||||
edit: true
|
||||
}
|
||||
this.editList.push(obj)
|
||||
}
|
||||
|
||||
// 可编辑表格select
|
||||
editTableSelectionChange(val: any) {
|
||||
this.editTableSelectList = val
|
||||
}
|
||||
|
||||
// 表格校验规则
|
||||
tableRules(val: any) {
|
||||
const { rows, rules, callback } = val
|
||||
let message = ''
|
||||
Object.getOwnPropertyNames(rules).forEach(function(key) {
|
||||
if (key !== '__ob__') {
|
||||
if (StringUtils.isEmpty(rows[key])) {
|
||||
message += rules[key][0].message
|
||||
message += ','
|
||||
}
|
||||
}
|
||||
})
|
||||
callback(message)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. 在路径 `src>views` 新建文件夹 `user-example` , 进入 `user-example` 文件夹，新建文件 `user-example.vue`，并写入以下信息，scss请根据页面设计自行更改，或者复制通用页面示例中的scss，这里先不再显示。
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
4. 在 `src>router>index.ts` 中增加 `user-example.vue` 的路由指向。
|
||||
|
||||
``` ts {3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18}
|
||||
export const asyncRoutes: RouteConfig[] = [
|
||||
....,
|
||||
{
|
||||
path: '/userExample',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'userExample',
|
||||
component: () => import(/* webpackChunkName: "icons" */ '@/views/user-example/userExample.vue'),
|
||||
name: 'userExample',
|
||||
meta: {
|
||||
title: 'userExample',
|
||||
icon: 'example',
|
||||
noCache: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
....
|
||||
]
|
||||
```
|
||||
|
||||
此时可以看到目录上多了刚刚我们添加的路由
|
||||
|
||||
|
||||
|
||||
5. 此时目录还未显示中文，由于框架使用i18n插件，此时我们需要进入语言目录下进行设置，进入 `src>lang>zh.ts` 中设置显示中文。
|
||||
|
||||
::: warning 注意
|
||||
此处设置需要添加到router对象下，且key值需要与路由中的title设置一致
|
||||
:::
|
||||
|
||||
``` ts {3}
|
||||
export default {
|
||||
route: {
|
||||
userExample:'用户示例',
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后我们就可以看到显示目录变成中文。
|
||||
|
||||
|
||||
|
||||
6. 然后，我们添加通用组件到ts文件及页面中。
|
||||
|
||||
首先引入组件到ts文件中
|
||||
|
||||
``` ts {5,8,9,10}
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
import StringUtils from '@/common/StringUtils'
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
// 表格中 '操作'列的宽度
|
||||
private operationWidth = 200
|
||||
|
||||
async created() {
|
||||
// 设置默认排序
|
||||
this.sort = 'UPDATE_TIME'
|
||||
this.order = 'DESC'
|
||||
// 设置表别名
|
||||
this.tableAlias = 'user'
|
||||
// 获取表头及表单信息
|
||||
await this.acquireTableInfo()
|
||||
// 获取基表信息格式化下拉框及表格数据
|
||||
await this.getBaseTableInfo()
|
||||
// 获取列表信息
|
||||
this.acquireTable()
|
||||
// 设置默认校验构造
|
||||
this.formRules = {
|
||||
PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
||||
USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
// 设置默认禁用字段
|
||||
this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
|
||||
}
|
||||
|
||||
// 编辑表格新增行
|
||||
addRow() {
|
||||
const obj: any = {
|
||||
index: this.editList.length,
|
||||
edit: true
|
||||
}
|
||||
this.editList.push(obj)
|
||||
}
|
||||
|
||||
// 可编辑表格select
|
||||
editTableSelectionChange(val: any) {
|
||||
this.editTableSelectList = val
|
||||
}
|
||||
|
||||
// 表格校验规则
|
||||
tableRules(val: any) {
|
||||
const { rows, rules, callback } = val
|
||||
let message = ''
|
||||
Object.getOwnPropertyNames(rules).forEach(function(key) {
|
||||
if (key !== '__ob__') {
|
||||
if (StringUtils.isEmpty(rows[key])) {
|
||||
message += rules[key][0].message
|
||||
message += ','
|
||||
}
|
||||
}
|
||||
})
|
||||
callback(message)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
然后再vue实例中引入组件
|
||||
|
||||
``` vue {3,4,5,6,7,8,9,10,11,12,13,14}
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:check-box-visible="true"
|
||||
:formatter="tableFomatter"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:loading="loading"
|
||||
:slot-visible="true"
|
||||
:width="operationWidth"
|
||||
@handle-sort-change="handleSortChange"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
然后我们刷新页面，就可以看到刚刚引入的组件了。
|
||||
|
||||
|
||||
|
||||
7. 页面实例讲解完毕，最后，请按照使用者按照需要进行页面相关的开发或引入其他组件进行开发。
|
||||
|
||||
457
docs/02.前端/04.组件/01.Table组件.md
Normal file
457
docs/02.前端/04.组件/01.Table组件.md
Normal file
@@ -0,0 +1,457 @@
|
||||
---
|
||||
title: 通用表格组件
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/1ab4ce/
|
||||
---
|
||||
# 通用表格组件
|
||||
|
||||
## 普通表格
|
||||
|
||||
普通表格，仅传入数据显示
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-Table></Web-Table></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:cellAlign="center"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
tableHead:any[] = [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
]
|
||||
tableList:any[] = [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:cellAlign="center"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 带复选框的表格
|
||||
|
||||
带复选框的表格，提供复选框回调函数，点击复选框时可打开控制台查看打印内容。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-TableCheckBox></Web-TableCheckBox></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:check-box-visible="true"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
tableHead:any[] = [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
]
|
||||
|
||||
tableList:any[] = [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
|
||||
// 复选框监听事件
|
||||
handleSelectionChange(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:check-box-visible="true"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 复选框改变监听事件
|
||||
handleSelectionChange(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 带插槽的表格
|
||||
|
||||
表格组件提供插槽功能，可以将插槽设置成按钮等其他功能，点击编辑按钮可以查看控制台打印内容。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-TableSlot></Web-TableSlot></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:slot-visible="true"
|
||||
>
|
||||
<template
|
||||
v-slot="scope"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="showEdit(scope.item.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</table-head-co>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '../Co/tableHeadCo'
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
tableHead:any[] = [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
]
|
||||
tableList:any[] = [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
|
||||
// 点击事件
|
||||
showEdit(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:slot-visible="true"
|
||||
>
|
||||
<template
|
||||
v-slot="scope"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="showEdit(scope.item.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</table-head-co>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
showEdit(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Table Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| check-box-visible | 是否显示复选框 | Boolean |-|false|
|
||||
| table-heads | 表头 | Array |-|-|
|
||||
| form-list | 需要显示的数据 | Array |-|-|
|
||||
| loading | 表格加载动画 | Boolean |-|false|
|
||||
| formatter | 格式化表格数据 | Function(row, column, cellValue, index) |-|-|
|
||||
| cellAlign | 表格对齐方式 | String | left/center/right | center |
|
||||
| slotVisible | 是否显示操作列 | Boolean |-|false|
|
||||
| width | 操作列的宽度 | Number |-|200|
|
||||
|
||||
## Table Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| handle-selection-change | 当用户手动勾选数据行的 Checkbox 时触发的事件 | row |
|
||||
| handle-sort-change | 当表格的排序条件发生变化的时候会触发该事件 | column |
|
||||
|
||||
## Table Slot
|
||||
|
||||
|
||||
|
||||
| name | 说明 |
|
||||
| :---| :---- |
|
||||
| - | 用于放置在操作列上的按钮等元素，需要从scope.item中获取当前行的值 |
|
||||
|
||||
## Table Header style
|
||||
|
||||
|
||||
|
||||
| name | 说明 |
|
||||
| :---| :---- |
|
||||
| header-cell-style | 用于设置表头样式 |
|
||||
672
docs/02.前端/04.组件/02.Form组件.md
Normal file
672
docs/02.前端/04.组件/02.Form组件.md
Normal file
@@ -0,0 +1,672 @@
|
||||
---
|
||||
title: 表单组件
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/65ed1c/
|
||||
---
|
||||
# 表单组件
|
||||
|
||||
## 基本表单
|
||||
|
||||
表单组件以模态框的形式展示表单内容。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-Form></Web-Form></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" size="medium" @click="showAdd">新增表单</el-button>
|
||||
<form-co
|
||||
ref="formCo"
|
||||
:form-title="dialogTitle"
|
||||
:form-visible="dialogCreateFormVisible"
|
||||
:form-sub-botton="'提交'"
|
||||
:form-key="tableHead"
|
||||
:form-data="formData"
|
||||
:form-rules="formRules"
|
||||
:form-type="formType"
|
||||
:disable-field="disableField"
|
||||
@form-submit="formSubmit"
|
||||
@cancel-form="cancelForm"
|
||||
@before-cancel-form="cancelForm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import formCo from "../Co/formCo";
|
||||
|
||||
@Component({
|
||||
name: "commonForm",
|
||||
components: {
|
||||
formCo
|
||||
}
|
||||
})
|
||||
|
||||
export default class extends Vue {
|
||||
public dialogTitle = '新增记录';
|
||||
public formType = 1;
|
||||
public formData: any = {};
|
||||
public dialogCreateFormVisible = false;
|
||||
public tableHead: any = [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
}
|
||||
];
|
||||
public disableField: Array<any> = ["create_time", "update_time"];
|
||||
public formRules: any = {
|
||||
assword: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
],
|
||||
};
|
||||
|
||||
//提交表单
|
||||
formSubmit(value) {
|
||||
this.dialogCreateFormVisible = false;
|
||||
},
|
||||
//关闭表单
|
||||
cancelForm() {
|
||||
this.dialogCreateFormVisible = false;
|
||||
this.formData = {};
|
||||
this.$nextTick(() => {
|
||||
const ref = this.$refs.formCo;
|
||||
ref.$refs.formCommon.resetFields();
|
||||
});
|
||||
},
|
||||
showAdd() {
|
||||
this.dialogTitle = "新增记录";
|
||||
this.formType = 1;
|
||||
this.formData = {};
|
||||
this.dialogCreateFormVisible = true;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" size="medium" @click="showAdd">新增表单</el-button>
|
||||
<form-co
|
||||
ref="formCo"
|
||||
:form-title="dialogTitle"
|
||||
:form-visible="dialogCreateFormVisible"
|
||||
:form-sub-botton="'提交'"
|
||||
:form-key="tableHead"
|
||||
:form-data="formData"
|
||||
:form-rules="formRules"
|
||||
:form-type="formType"
|
||||
:disable-field="disableField"
|
||||
@form-submit="formSubmit"
|
||||
@cancel-form="cancelForm"
|
||||
@before-cancel-form="cancelForm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import formCo from "../Co/formCo";
|
||||
export default {
|
||||
components: {
|
||||
formCo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogTitle: "新增记录",
|
||||
formType: 1,
|
||||
formData: {},
|
||||
dialogCreateFormVisible: false,
|
||||
tableHead: [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
],
|
||||
disableField: ["create_time", "update_time"],
|
||||
formRules: {
|
||||
password: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//提交表单
|
||||
formSubmit(value) {
|
||||
this.dialogCreateFormVisible = false;
|
||||
},
|
||||
//关闭表单
|
||||
cancelForm() {
|
||||
this.dialogCreateFormVisible = false;
|
||||
this.formData = {};
|
||||
this.$nextTick(() => {
|
||||
const ref = this.$refs.formCo;
|
||||
ref.$refs.formCommon.resetFields();
|
||||
});
|
||||
},
|
||||
showAdd() {
|
||||
this.dialogTitle = "新增记录";
|
||||
this.formType = 1;
|
||||
this.formData = {};
|
||||
this.dialogCreateFormVisible = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 查询表单
|
||||
|
||||
表单组件查询功能。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-SearchForm></Web-SearchForm></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="always" class="select-card">
|
||||
<search-co
|
||||
:form-key="tableHead"
|
||||
:search-data="searchForm"
|
||||
:time-format="'yyyy-MM-dd HH:mm:ss'"
|
||||
@search-submit="query"
|
||||
@reset-search-form="resetSearch"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import searchCo from "../Co/searchCo";
|
||||
|
||||
@Component({
|
||||
name: "commonForm",
|
||||
components: {
|
||||
searchCo
|
||||
}
|
||||
})
|
||||
|
||||
export default class extends Vue {
|
||||
public searchForm: any = {};
|
||||
public tableHead: any = [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isSearch: 0,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
];
|
||||
|
||||
// 查询表格
|
||||
query() {};
|
||||
// 重置search表单
|
||||
resetSearch() {
|
||||
this.searchForm = {};
|
||||
};
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="always" class="select-card">
|
||||
<search-co
|
||||
:form-key="tableHead"
|
||||
:search-data="searchForm"
|
||||
:time-format="'yyyy-MM-dd HH:mm:ss'"
|
||||
@search-submit="query"
|
||||
@reset-search-form="resetSearch"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchCo from "../Co/searchCo";
|
||||
export default {
|
||||
components: {
|
||||
searchCo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchForm: {},
|
||||
tableHead: [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isSearch: 0,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 查询表格
|
||||
query() {},
|
||||
// 重置search表单
|
||||
resetSearch() {
|
||||
this.searchForm = {};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Form Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| form-title | 表单标题 | String |-|-|
|
||||
| form-visible | 展示/关闭表单 | Boolean |-|-|
|
||||
| form-sub-botton | 表单提交按钮显示文字 | String |-|-|
|
||||
| form-key | 表单key值 | Array |-|-|
|
||||
| form-data | 表单数据（可为空） | Object |-|-|
|
||||
| form-rules | 表单校验规则 | Object | - | - |
|
||||
| form-type | 表单提交类型 1为新增，2为编辑 | Number |-|-|
|
||||
| disable-field | 表单不可编辑的部分 | Array |-|-|
|
||||
|
||||
## Form Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| form-submit | 当用户手动点击提交按钮时触发的事件 | - |
|
||||
| cancel-form | 当用户手动点击取消按钮时触发的事件 | - |
|
||||
| search-submit | 表单提交触发的事件 | - |
|
||||
| reset-search-form | 重置搜索表单触发的事件 | - |
|
||||
274
docs/02.前端/04.组件/03.流程图组件.md
Normal file
274
docs/02.前端/04.组件/03.流程图组件.md
Normal file
@@ -0,0 +1,274 @@
|
||||
---
|
||||
title: 流程图组件
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/49aa37/
|
||||
---
|
||||
# 流程图组件
|
||||
|
||||
## 基本流程图
|
||||
|
||||
表格组件提供获取Object内容作为流程图的标识和名称，该组件也可以不传入任何参数直接引用，例如`<bpmn/>`即可调用组件。
|
||||
|
||||
注意：标识必须以字母和下划线开头，不支持中文。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-BpmnNameForm></Web-BpmnNameForm></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
|
||||
@Component({
|
||||
name: "bpmnNameForm",
|
||||
components: {
|
||||
bpmn
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private updateDate: { [key: string]: any } = { key: "process", name: "流程图" }
|
||||
private updateBpmnFlag: Boolean = false
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
export default {
|
||||
components: {
|
||||
bpmn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
updateDate: { key: "process", name: "流程图" },
|
||||
updateBpmnFlag: false
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
|
||||
:::
|
||||
|
||||
## 仅能查看的流程图
|
||||
|
||||
该组件仅提供查看功能。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-OnlyShowBpmn></Web-OnlyShowBpmn></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" @click="showBpmn()">查看流程图</el-button>
|
||||
<el-dialog title="流程图" :visible.sync="dialogShowBpmnVisible">
|
||||
<bpmnView :showData='showBpmnData'></bpmnView>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import bpmnView from "../Bpmn/bpmnView";
|
||||
|
||||
@Component({
|
||||
name: "onlyShowBpmn",
|
||||
components: {
|
||||
bpmnView
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private dialogShowBpmnVisible: boolean = false;
|
||||
private showBpmnData:any =
|
||||
`
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`,
|
||||
|
||||
private async showBpmn() {
|
||||
this.dialogShowBpmnVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" @click="showBpmn()">查看流程图</el-button>
|
||||
<el-dialog title="流程图" :visible.sync="dialogShowBpmnVisible">
|
||||
<bpmn-view :showData='showBpmnData'></bpmn-view>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmnView from "../Bpmn/bpmnView";
|
||||
export default {
|
||||
components: {
|
||||
bpmnView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShowBpmnVisible: false,
|
||||
showBpmnData: `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showBpmn() {
|
||||
this.dialogShowBpmnVisible = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Bpmn Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| updateBpmnFlag | 是否为编辑流程图 | Boolean |-|false|
|
||||
| updateDate | 数据(编辑时传入String) | String/Object |-|-|
|
||||
|
||||
|
||||
## Bpmn Components Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| openBpmn | 当用户手动点击文件icon时触发的事件，打开bpmn格式文件 | file |
|
||||
| downloadBpmn | 当用户手动点击下载icon时触发的事件，下载bpmn格式文件 | - |
|
||||
| downloadSvg | 当用户手动点击图片icon时触发的事件，下载svg格式文件 | - |
|
||||
| handleUpdateData | 当用户手动点击上传icon时触发的事件，上传已有流程图 | - |
|
||||
|
||||
|
||||
185
docs/02.前端/04.组件/04.流程图组件之编辑.md
Normal file
185
docs/02.前端/04.组件/04.流程图组件之编辑.md
Normal file
@@ -0,0 +1,185 @@
|
||||
---
|
||||
title: 流程图组件之编辑
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/514c8f/
|
||||
---
|
||||
# 流程图组件之编辑
|
||||
|
||||
## 获取已有流程图内容，并编辑
|
||||
|
||||
表格组件提供获取已有流程图并编辑的功能。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-EditBpmn></Web-EditBpmn></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
|
||||
@Component({
|
||||
name: "editBpmn",
|
||||
components: {
|
||||
bpmn
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private updateBpmnFlag: Boolean = false
|
||||
|
||||
private updateDate: any = `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
export default {
|
||||
components: {
|
||||
bpmn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
updateBpmnFlag: true,
|
||||
updateDate: `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
## Bpmn Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| updateBpmnFlag | 是否为编辑流程图 | Boolean |-|false|
|
||||
| updateDate | 数据(编辑时传入String) | String/Object |-|-|
|
||||
|
||||
|
||||
## Bpmn Components Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| openBpmn | 当用户手动点击文件icon时触发的事件，打开bpmn格式文件 | file |
|
||||
| downloadBpmn | 当用户手动点击下载icon时触发的事件，下载bpmn格式文件 | - |
|
||||
| downloadSvg | 当用户手动点击图片icon时触发的事件，下载svg格式文件 | - |
|
||||
| handleUpdateData | 当用户手动点击上传icon时触发的事件，上传已有流程图 | - |
|
||||
49
docs/index.md
Normal file
49
docs/index.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
home: true
|
||||
heroImage: https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/logo/img.png
|
||||
heroText: HCFrame
|
||||
tagline: 通用框架组件
|
||||
actionText: 立刻进入 →
|
||||
actionLink: /pages/a3c9a2/
|
||||
bannerBg: auto
|
||||
features: # 可选的
|
||||
- title: 单表查询/联合查询
|
||||
details: 前后台操作代码封装，只需配置配置表即可生成页面、表单及增删改查，批量新增，批量修改等功能。
|
||||
imgUrl: /img/web.png # 可选
|
||||
- title: Vue + Typescript 驱动
|
||||
details: 通过Vue + Typescript进行开发，前端通过面向对象等方式，减小冗余代码，组件化重复标签，进行快速开发。
|
||||
imgUrl: /img/ui.png
|
||||
- title: SSO单点登录
|
||||
details: 项目基于SSO单点登录，实现SESSION共享
|
||||
imgUrl: /img/other.png
|
||||
postList: none
|
||||
---
|
||||
|
||||
### 前端安装
|
||||
|
||||
``` bash
|
||||
# 安装
|
||||
yarn install
|
||||
|
||||
# 运行
|
||||
yarn serve
|
||||
|
||||
# 打包
|
||||
yarn build:prod
|
||||
```
|
||||
|
||||
### 后台安装
|
||||
``` bash
|
||||
# 首先需要在编译器安装Lombok插件
|
||||
|
||||
# 后台为SpringBoot项目，下载后导入编译器，等待maven下载依赖
|
||||
|
||||
# 下载完成后运行启动类CommonApplication.java
|
||||
|
||||
# maven 打包
|
||||
mvn clean package
|
||||
```
|
||||
|
||||
::: warning 注意
|
||||
请确保你的 jdk使用1.8 版本 ，nodejs 请使用最新的LTS版本。
|
||||
:::
|
||||
Reference in New Issue
Block a user