lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改定时任务、表单构建样式

meizhou
selia-zx 7 days ago
parent
11d131c3ec
commit
a74c3ad306
4 changed files with 327 additions and 242 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      src/assets/styles/element-ui.scss
  2. 18
      src/components/Crontab/index.vue
  3. 7
      src/views/monitor/job/index.vue
  4. 371
      src/views/tool/build/index.vue

31
src/assets/styles/element-ui.scss
Unescape View File

@ -1382,3 +1382,34 @@
align-items: center;
justify-content: center;
}
.el-tabs--border-card {
background: transparent;
border: 1px solid #0e5191 !important;
}
.el-tabs--border-card > .el-tabs__header {
background-color: transparent;
border-bottom: 1px solid #00386d;
}
.popup-main {
background: transparent !important;
}
.popup-result {
border: 1px solid #0e5191 !important;
}
.popup-result table span{
border: 1px solid #0e5191 !important;
}
.popup-result .title{
background: #405e7e !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #fff !important;
border-right-color: transparent;
border-left-color: transparent;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item{
color: #c3cbd4;
}
.drawing-item:hover > .el-form-item, .drawing-row-item:hover > .el-form-item {
background: #b6b6b6 !important;
}

18
src/components/Crontab/index.vue
Unescape View File

@ -104,9 +104,21 @@
<CrontabResult :ex="crontabValueString"></CrontabResult>
<div class="pop_btn">
<el-button size="small" type="primary" @click="submitFill">确定</el-button>
<el-button size="small" type="warning" @click="clearCron">重置</el-button>
<el-button size="small" @click="hidePopup">取消</el-button>
<div class="primary-btn">
<el-button size="small" type="primary" @click="submitFill"
>确定</el-button
>
</div>
<div class="warning-btn">
<el-button size="small" type="warning" @click="clearCron"
>重置</el-button
>
</div>
<div class="cancel-btn">
<el-button size="small" type="cancel" @click="hidePopup"
>取消</el-button
>
</div>
</div>
</div>
</div>

7
src/views/monitor/job/index.vue
Unescape View File

@ -285,16 +285,17 @@
<el-col :span="24">
<el-form-item label="cron表达式" prop="cronExpression">
<el-input
style="width: 76%"
v-model="form.cronExpression"
placeholder="请输入cron执行表达式"
>
<template slot="append">
</el-input>
<div class="primary-btn">
<el-button type="primary" @click="handleShowCron">
生成表达式
<i class="el-icon-time el-icon--right"></i>
</el-button>
</template>
</el-input>
</div>
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.jobId !== undefined">

371
src/views/tool/build/index.vue
Unescape View File

@ -2,9 +2,7 @@
<div class="container">
<div class="left-board">
<div class="logo-wrapper">
<div class="logo">
<img :src="logo" alt="logo"> Form Generator
</div>
<div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
</div>
<el-scrollbar class="left-scrollbar">
<div class="components-list">
@ -21,7 +19,9 @@
@end="onEnd"
>
<div
v-for="(element, index) in inputComponents" :key="index" class="components-item"
v-for="(element, index) in inputComponents"
:key="index"
class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
@ -58,12 +58,18 @@
<svg-icon icon-class="component" /> 布局型组件
</div>
<draggable
class="components-draggable" :list="layoutComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
draggable=".components-item" :sort="false" @end="onEnd"
class="components-draggable"
:list="layoutComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
>
<div
v-for="(element, index) in layoutComponents" :key="index" class="components-item"
v-for="(element, index) in layoutComponents"
:key="index"
class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
@ -81,10 +87,20 @@
<el-button icon="el-icon-download" type="text" @click="download">
导出vue文件
</el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
<el-button
class="copy-btn-main"
icon="el-icon-document-copy"
type="text"
@click="copy"
>
复制代码
</el-button>
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
<el-button
class="delete-btn"
icon="el-icon-delete"
type="text"
@click="empty"
>
清空
</el-button>
</div>
@ -96,7 +112,12 @@
:disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'"
>
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
<draggable
class="drawing-board"
:list="drawingList"
:animation="340"
group="componentsGroup"
>
<draggable-item
v-for="(element, index) in drawingList"
:key="element.renderKey"
@ -131,28 +152,38 @@
:show-file-name="showFileName"
@confirm="generate"
/>
<input id="copyNode" type="hidden">
<input id="copyNode" type="hidden" />
</div>
</template>
<script>
import draggable from 'vuedraggable'
import beautifier from 'js-beautify'
import ClipboardJS from 'clipboard'
import render from '@/utils/generator/render'
import RightPanel from './RightPanel'
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
import { beautifierConf, titleCase } from '@/utils/index'
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
import { makeUpJs } from '@/utils/generator/js'
import { makeUpCss } from '@/utils/generator/css'
import drawingDefault from '@/utils/generator/drawingDefault'
import logo from '@/assets/logo/logo.png'
import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem'
import draggable from "vuedraggable";
import beautifier from "js-beautify";
import ClipboardJS from "clipboard";
import render from "@/utils/generator/render";
import RightPanel from "./RightPanel";
import {
inputComponents,
selectComponents,
layoutComponents,
formConf,
} from "@/utils/generator/config";
import { beautifierConf, titleCase } from "@/utils/index";
import {
makeUpHtml,
vueTemplate,
vueScript,
cssStyle,
} from "@/utils/generator/html";
import { makeUpJs } from "@/utils/generator/js";
import { makeUpCss } from "@/utils/generator/css";
import drawingDefault from "@/utils/generator/drawingDefault";
import logo from "@/assets/logo/logo.png";
import CodeTypeDialog from "./CodeTypeDialog";
import DraggableItem from "./DraggableItem";
let oldActiveId
let tempActiveData
let oldActiveId;
let tempActiveData;
export default {
components: {
@ -160,7 +191,7 @@ export default {
render,
RightPanel,
CodeTypeDialog,
DraggableItem
DraggableItem,
},
data() {
return {
@ -179,198 +210,204 @@ export default {
dialogVisible: false,
generateConf: null,
showFileName: false,
activeData: drawingDefault[0]
}
activeData: drawingDefault[0],
};
},
created() {
// 防止 firefox 下 拖拽 会新打卡一个选项卡
document.body.ondrop = event => {
event.preventDefault()
event.stopPropagation()
}
document.body.ondrop = (event) => {
event.preventDefault();
event.stopPropagation();
};
},
watch: {
// eslint-disable-next-line func-names
'activeData.label': function (val, oldVal) {
"activeData.label": function (val, oldVal) {
if (
this.activeData.placeholder === undefined
|| !this.activeData.tag
|| oldActiveId !== this.activeId
this.activeData.placeholder === undefined ||
!this.activeData.tag ||
oldActiveId !== this.activeId
) {
return
return;
}
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
this.activeData.placeholder =
this.activeData.placeholder.replace(oldVal, "") + val;
},
activeId: {
handler(val) {
oldActiveId = val
oldActiveId = val;
},
immediate: true,
},
immediate: true
}
},
mounted() {
const clipboard = new ClipboardJS('#copyNode', {
text: trigger => {
const codeStr = this.generateCode()
const clipboard = new ClipboardJS("#copyNode", {
text: (trigger) => {
const codeStr = this.generateCode();
this.$notify({
title: '成功',
message: '代码已复制到剪切板，可粘贴。',
type: 'success'
})
return codeStr
}
})
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
title: "成功",
message: "代码已复制到剪切板，可粘贴。",
type: "success",
});
return codeStr;
},
});
clipboard.on("error", (e) => {
this.$message.error("代码复制失败");
});
},
methods: {
activeFormItem(element) {
this.activeData = element
this.activeId = element.formId
this.activeData = element;
this.activeId = element.formId;
},
onEnd(obj, a) {
if (obj.from !== obj.to) {
this.activeData = tempActiveData
this.activeId = this.idGlobal
this.activeData = tempActiveData;
this.activeId = this.idGlobal;
}
},
addComponent(item) {
const clone = this.cloneComponent(item)
this.drawingList.push(clone)
this.activeFormItem(clone)
const clone = this.cloneComponent(item);
this.drawingList.push(clone);
this.activeFormItem(clone);
},
cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin))
clone.formId = ++this.idGlobal
clone.span = formConf.span
clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
if (!clone.layout) clone.layout = 'colFormItem'
if (clone.layout === 'colFormItem') {
clone.vModel = `field${this.idGlobal}`
clone.placeholder !== undefined && (clone.placeholder += clone.label)
tempActiveData = clone
} else if (clone.layout === 'rowFormItem') {
delete clone.label
clone.componentName = `row${this.idGlobal}`
clone.gutter = this.formConf.gutter
tempActiveData = clone
}
return tempActiveData
const clone = JSON.parse(JSON.stringify(origin));
clone.formId = ++this.idGlobal;
clone.span = formConf.span;
clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
if (!clone.layout) clone.layout = "colFormItem";
if (clone.layout === "colFormItem") {
clone.vModel = `field${this.idGlobal}`;
clone.placeholder !== undefined && (clone.placeholder += clone.label);
tempActiveData = clone;
} else if (clone.layout === "rowFormItem") {
delete clone.label;
clone.componentName = `row${this.idGlobal}`;
clone.gutter = this.formConf.gutter;
tempActiveData = clone;
}
return tempActiveData;
},
AssembleFormData() {
this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf
}
...this.formConf,
};
},
generate(data) {
const func = this[`exec${titleCase(this.operationType)}`]
this.generateConf = data
func && func(data)
const func = this[`exec${titleCase(this.operationType)}`];
this.generateConf = data;
func && func(data);
},
execRun(data) {
this.AssembleFormData()
this.drawerVisible = true
this.AssembleFormData();
this.drawerVisible = true;
},
execDownload(data) {
const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
this.$download.saveAs(blob, data.fileName)
const codeStr = this.generateCode();
const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
this.$download.saveAs(blob, data.fileName);
},
execCopy(data) {
document.getElementById('copyNode').click()
document.getElementById("copyNode").click();
},
empty() {
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then(
() => {
this.drawingList = []
this.drawingList = [];
}
)
);
},
drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item))
clone = this.createIdAndKey(clone)
parent.push(clone)
this.activeFormItem(clone)
let clone = JSON.parse(JSON.stringify(item));
clone = this.createIdAndKey(clone);
parent.push(clone);
this.activeFormItem(clone);
},
createIdAndKey(item) {
item.formId = ++this.idGlobal
item.renderKey = +new Date()
if (item.layout === 'colFormItem') {
item.vModel = `field${this.idGlobal}`
} else if (item.layout === 'rowFormItem') {
item.componentName = `row${this.idGlobal}`
item.formId = ++this.idGlobal;
item.renderKey = +new Date();
if (item.layout === "colFormItem") {
item.vModel = `field${this.idGlobal}`;
} else if (item.layout === "rowFormItem") {
item.componentName = `row${this.idGlobal}`;
}
if (Array.isArray(item.children)) {
item.children = item.children.map(childItem => this.createIdAndKey(childItem))
item.children = item.children.map((childItem) =>
this.createIdAndKey(childItem)
);
}
return item
return item;
},
drawingItemDelete(index, parent) {
parent.splice(index, 1)
parent.splice(index, 1);
this.$nextTick(() => {
const len = this.drawingList.length
const len = this.drawingList.length;
if (len) {
this.activeFormItem(this.drawingList[len - 1])
this.activeFormItem(this.drawingList[len - 1]);
}
})
});
},
generateCode() {
const { type } = this.generateConf
this.AssembleFormData()
const script = vueScript(makeUpJs(this.formData, type))
const html = vueTemplate(makeUpHtml(this.formData, type))
const css = cssStyle(makeUpCss(this.formData))
return beautifier.html(html + script + css, beautifierConf.html)
const { type } = this.generateConf;
this.AssembleFormData();
const script = vueScript(makeUpJs(this.formData, type));
const html = vueTemplate(makeUpHtml(this.formData, type));
const css = cssStyle(makeUpCss(this.formData));
return beautifier.html(html + script + css, beautifierConf.html);
},
download() {
this.dialogVisible = true
this.showFileName = true
this.operationType = 'download'
this.dialogVisible = true;
this.showFileName = true;
this.operationType = "download";
},
run() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'run'
this.dialogVisible = true;
this.showFileName = false;
this.operationType = "run";
},
copy() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'copy'
this.dialogVisible = true;
this.showFileName = false;
this.operationType = "copy";
},
tagChange(newTag) {
newTag = this.cloneComponent(newTag)
newTag.vModel = this.activeData.vModel
newTag.formId = this.activeId
newTag.span = this.activeData.span
delete this.activeData.tag
delete this.activeData.tagIcon
delete this.activeData.document
Object.keys(newTag).forEach(key => {
if (this.activeData[key] !== undefined
&& typeof this.activeData[key] === typeof newTag[key]) {
newTag[key] = this.activeData[key]
}
})
this.activeData = newTag
this.updateDrawingList(newTag, this.drawingList)
newTag = this.cloneComponent(newTag);
newTag.vModel = this.activeData.vModel;
newTag.formId = this.activeId;
newTag.span = this.activeData.span;
delete this.activeData.tag;
delete this.activeData.tagIcon;
delete this.activeData.document;
Object.keys(newTag).forEach((key) => {
if (
this.activeData[key] !== undefined &&
typeof this.activeData[key] === typeof newTag[key]
) {
newTag[key] = this.activeData[key];
}
});
this.activeData = newTag;
this.updateDrawingList(newTag, this.drawingList);
},
updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.formId === this.activeId)
const index = list.findIndex((item) => item.formId === this.activeId);
if (index > -1) {
list.splice(index, 1, newTag)
list.splice(index, 1, newTag);
} else {
list.forEach(item => {
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
})
}
}
}
list.forEach((item) => {
if (Array.isArray(item.children))
this.updateDrawingList(newTag, item.children);
});
}
},
},
};
</script>
<style lang='scss'>
<style lang="scss">
.editor-tabs {
background: #121315;
.el-tabs__header {
@ -446,7 +483,7 @@ export default {
cursor: pointer;
font-size: 12px;
&:hover {
background: rgba(210, 23, 23, 0.5)
background: rgba(210, 23, 23, 0.5);
}
}
& + .reg-item {
@ -475,7 +512,7 @@ export default {
margin-left: 6px;
}
.el-icon-plus {
color: #409EFF;
color: #409eff;
}
.el-icon-delete {
color: #157a0c;
@ -495,7 +532,7 @@ export default {
}
$selectedColor: #f6f7ff;
$lighterBlue: #409EFF;
$lighterBlue: #409eff;
.container {
position: relative;
@ -561,8 +598,8 @@ $lighterBlue: #409EFF;
.center-scrollbar {
height: calc(100vh - 42px);
overflow: hidden;
border-left: 1px solid #f1e8e8;
border-right: 1px solid #f1e8e8;
border-left: 1px solid #0e5191;
border-left: 1px solid #0e5191;
box-sizing: border-box;
}
.center-board {
@ -586,19 +623,19 @@ $lighterBlue: #409EFF;
height: 42px;
text-align: right;
padding: 0 15px;
box-sizing: border-box;;
border: 1px solid #f1e8e8;
box-sizing: border-box;
border: 1px solid #0e5191;
border-top: none;
border-left: none;
.delete-btn {
color: #F56C6C;
color: #f56c6c;
}
}
.logo-wrapper {
position: relative;
height: 42px;
background: #4b6e91;
border-bottom: 1px solid #f1e8e8;
border-bottom: 1px solid #0e5191;
box-sizing: border-box;
}
.logo {
@ -666,7 +703,8 @@ $lighterBlue: #409EFF;
background: #4b6e91;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-copy,
& > .drawing-item-delete {
display: initial;
}
& > .component-name {
@ -720,17 +758,20 @@ $lighterBlue: #409EFF;
padding: 0 6px;
}
}
.drawing-item, .drawing-row-item{
.drawing-item,
.drawing-row-item {
&:hover {
& > .el-form-item {
background: $selectedColor;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-copy,
& > .drawing-item-delete {
display: initial;
}
}
& > .drawing-item-copy, & > .drawing-item-delete{
& > .drawing-item-copy,
& > .drawing-item-delete {
display: none;
position: absolute;
top: -10px;
@ -756,11 +797,11 @@ $lighterBlue: #409EFF;
}
& > .drawing-item-delete {
right: 24px;
border-color: #F56C6C;
color: #F56C6C;
border-color: #f56c6c;
color: #f56c6c;
background: #fff;
&:hover {
background: #F56C6C;
background: #f56c6c;
color: #fff;
}
}

Write Preview
Loading…
Cancel
Save