xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

logo更新

Browse Source
This commit is contained in:
baicai
2025-09-27 15:19:15 +08:00
parent b421d11bc2
commit 466d3a14b6
9 changed files with 394 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>logo-icon.png">
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style> <style>

BIN
public/logo-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/images/ems/logo-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/images/ems/logo-large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB

BIN
src/assets/images/ems/logo-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
src/assets/images/ems/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 83 KiB

54
src/layout/components/Sidebar/Logo.vue
View File

@ -1,48 +1,60 @@
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div
class="sidebar-logo-container"
:class="{ collapse: collapse }"
:style="{
backgroundColor:
sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground,
}"
>
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link
<img :src="logo" class="sidebar-logo" /> v-if="collapse"
<!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>--> key="collapse"
class="sidebar-logo-link"
to="/"
>
<img :src="logoSmall" class="sidebar-logo" />
<!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img :src="logo" class="sidebar-logo" /> <img :src="logo" class="sidebar-logo" />
<!-- <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>--> <!-- <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
</router-link> </router-link>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import logoImg from '@/assets/logo/logo.png' import variables from "@/assets/styles/variables.scss";
import variables from '@/assets/styles/variables.scss' import logo from "@/assets/images/ems/logo.png";
import logo from '@/assets/images/ems/logo.png' import logoSmall from "@/assets/images/ems/logo-small.png";
import logoLarge from '@/assets/images/ems/logo-large.png'
export default { export default {
name: 'SidebarLogo', name: "SidebarLogo",
props: { props: {
collapse: { collapse: {
type: Boolean, type: Boolean,
required: true required: true,
} },
}, },
computed: { computed: {
variables() { variables() {
return variables return variables;
}, },
sideTheme() { sideTheme() {
return this.$store.state.settings.sideTheme return this.$store.state.settings.sideTheme;
} },
}, },
data() { data() {
return { return {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
// logo: logoImg logo: logo,
logo:logo, logoSmall: logoSmall,
logoLarge:logoLarge };
} },
} };
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

158
src/views/login.vue
View File

@ -1,7 +1,17 @@
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form
<h3 class="title">{{title}}</h3> ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<img
src="./../assets/images/ems/logo.png"
alt=""
srcset=""
class="login-logo"
/>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
@ -9,7 +19,11 @@
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
> >
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
@ -20,7 +34,11 @@
placeholder="密码" placeholder="密码"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled">
@ -31,26 +49,36 @@
style="width: 63%" style="width: 63%"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-checkbox
<el-form-item style="width:100%;"> v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-form-item style="width: 100%">
<el-button <el-button
:loading="loading" :loading="loading"
size="medium" size="medium"
type="primary" type="primary"
style="width:100%;" style="width: 100%"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<div style="float: right;" v-if="register"> <div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link> <router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -62,9 +90,9 @@
</template> </template>
<script> <script>
import { getCodeImg } from "@/api/login" import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie" import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from "@/utils/jsencrypt";
export default { export default {
name: "Login", name: "Login",
@ -77,94 +105,110 @@ export default {
password: "admin123", password: "admin123",
rememberMe: false, rememberMe: false,
code: "", code: "",
uuid: "" uuid: "",
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" } { required: true, trigger: "blur", message: "请输入您的账号" },
], ],
password: [ password: [
{ required: true, trigger: "blur", message: "请输入您的密码" } { required: true, trigger: "blur", message: "请输入您的密码" },
], ],
code: [{ required: true, trigger: "change", message: "请输入验证码" }] code: [{ required: true, trigger: "change", message: "请输入验证码" }],
}, },
loading: false, loading: false,
// 验证码开关 // 验证码开关
captchaEnabled: true, captchaEnabled: true,
// 注册开关 // 注册开关
register: false, register: false,
redirect: undefined redirect: undefined,
} };
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
this.redirect = route.query && route.query.redirect this.redirect = route.query && route.query.redirect;
},
immediate: true,
}, },
immediate: true
}
}, },
created() { created() {
this.getCode() this.getCode();
this.getCookie() this.getCookie();
}, },
methods: { methods: {
getCode() { getCode() {
getCodeImg().then(res => { getCodeImg().then((res) => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid this.loginForm.uuid = res.uuid;
} }
}) });
}, },
getCookie() { getCookie() {
const username = Cookies.get("username") const username = Cookies.get("username");
const password = Cookies.get("password") const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe') const rememberMe = Cookies.get("rememberMe");
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password), password:
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) password === undefined ? this.loginForm.password : decrypt(password),
} rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true this.loading = true;
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 }) Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }) Cookies.set("password", encrypt(this.loginForm.password), {
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }) expires: 30,
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30,
});
} else { } else {
Cookies.remove("username") Cookies.remove("username");
Cookies.remove("password") Cookies.remove("password");
Cookies.remove('rememberMe') Cookies.remove("rememberMe");
} }
this.$store.dispatch("Login", this.loginForm).then(() => { this.$store
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}) .dispatch("Login", this.loginForm)
}).catch(() => { .then(() => {
this.loading = false this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.getCode() this.getCode();
} }
}) });
} }
}) });
} },
} },
} };
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.login { .login {
padding-left: 50px;
display: flex; display: flex;
justify-content: center; justify-content: left;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/ems/login-background.png"); background-image: url("../assets/images/ems/login-background.png");
background-size: cover; background-size: cover;
} }
.login-logo {
display: block;
width: 70%;
height: auto;
margin: 0 auto;
}
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
@ -175,7 +219,7 @@ export default {
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 0 25px 5px 25px;
z-index: 1; z-index: 1;
.el-input { .el-input {
height: 38px; height: 38px;

471
src/views/tool/build/index.vue
View File

@ -2,9 +2,7 @@
<div class="container"> <div class="container">
<div class="left-board"> <div class="left-board">
<div class="logo-wrapper"> <div class="logo-wrapper">
<div class="logo"> <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
<img :src="logo" alt="logo"> Form Generator
</div>
</div> </div>
<el-scrollbar class="left-scrollbar"> <el-scrollbar class="left-scrollbar">
<div class="components-list"> <div class="components-list">
@ -21,7 +19,9 @@
@end="onEnd" @end="onEnd"
> >
<div <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)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -58,12 +58,18 @@
<svg-icon icon-class="component" /> 布局型组件 <svg-icon icon-class="component" /> 布局型组件
</div> </div>
<draggable <draggable
class="components-draggable" :list="layoutComponents" class="components-draggable"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" :list="layoutComponents"
draggable=".components-item" :sort="false" @end="onEnd" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
> >
<div <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)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -81,10 +87,20 @@
<el-button icon="el-icon-download" type="text" @click="download"> <el-button icon="el-icon-download" type="text" @click="download">
导出vue文件 导出vue文件
</el-button> </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>
<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> </el-button>
</div> </div>
@ -96,7 +112,12 @@
:disabled="formConf.disabled" :disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'" :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 <draggable-item
v-for="(element, index) in drawingList" v-for="(element, index) in drawingList"
:key="element.renderKey" :key="element.renderKey"
@ -131,28 +152,38 @@
:show-file-name="showFileName" :show-file-name="showFileName"
@confirm="generate" @confirm="generate"
/> />
<input id="copyNode" type="hidden"> <input id="copyNode" type="hidden" />
</div> </div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from "vuedraggable";
import beautifier from 'js-beautify' import beautifier from "js-beautify";
import ClipboardJS from 'clipboard' import ClipboardJS from "clipboard";
import render from '@/utils/generator/render' import render from "@/utils/generator/render";
import RightPanel from './RightPanel' import RightPanel from "./RightPanel";
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config' import {
import { beautifierConf, titleCase } from '@/utils/index' inputComponents,
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html' selectComponents,
import { makeUpJs } from '@/utils/generator/js' layoutComponents,
import { makeUpCss } from '@/utils/generator/css' formConf,
import drawingDefault from '@/utils/generator/drawingDefault' } from "@/utils/generator/config";
import logo from '@/assets/logo/logo.png' import { beautifierConf, titleCase } from "@/utils/index";
import CodeTypeDialog from './CodeTypeDialog' import {
import DraggableItem from './DraggableItem' 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/images/ems/logo-icon.png";
import CodeTypeDialog from "./CodeTypeDialog";
import DraggableItem from "./DraggableItem";
let oldActiveId let oldActiveId;
let tempActiveData let tempActiveData;
export default { export default {
components: { components: {
@ -160,7 +191,7 @@ export default {
render, render,
RightPanel, RightPanel,
CodeTypeDialog, CodeTypeDialog,
DraggableItem DraggableItem,
}, },
data() { data() {
return { return {
@ -179,207 +210,213 @@ export default {
dialogVisible: false, dialogVisible: false,
generateConf: null, generateConf: null,
showFileName: false, showFileName: false,
activeData: drawingDefault[0] activeData: drawingDefault[0],
} };
}, },
created() { created() {
// 防止 firefox 下 拖拽 会新打卡一个选项卡 // 防止 firefox 下 拖拽 会新打卡一个选项卡
document.body.ondrop = event => { document.body.ondrop = (event) => {
event.preventDefault() event.preventDefault();
event.stopPropagation() event.stopPropagation();
} };
}, },
watch: { watch: {
'activeData.label': function (val, oldVal) { "activeData.label": function (val, oldVal) {
if ( if (
this.activeData.placeholder === undefined this.activeData.placeholder === undefined ||
|| !this.activeData.tag !this.activeData.tag ||
|| oldActiveId !== this.activeId oldActiveId !== this.activeId
) { ) {
return return;
} }
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val this.activeData.placeholder =
this.activeData.placeholder.replace(oldVal, "") + val;
}, },
activeId: { activeId: {
handler(val) { handler(val) {
oldActiveId = val oldActiveId = val;
},
immediate: true,
}, },
immediate: true
}
}, },
mounted() { mounted() {
const clipboard = new ClipboardJS('#copyNode', { const clipboard = new ClipboardJS("#copyNode", {
text: trigger => { text: (trigger) => {
const codeStr = this.generateCode() const codeStr = this.generateCode();
this.$notify({ this.$notify({
title: '成功', title: "成功",
message: '代码已复制到剪切板，可粘贴。', message: "代码已复制到剪切板，可粘贴。",
type: 'success' type: "success",
}) });
return codeStr return codeStr;
} },
}) });
clipboard.on('error', e => { clipboard.on("error", (e) => {
this.$message.error('代码复制失败') this.$message.error("代码复制失败");
}) });
}, },
methods: { methods: {
activeFormItem(element) { activeFormItem(element) {
this.activeData = element this.activeData = element;
this.activeId = element.formId this.activeId = element.formId;
}, },
onEnd(obj, a) { onEnd(obj, a) {
if (obj.from !== obj.to) { if (obj.from !== obj.to) {
this.activeData = tempActiveData this.activeData = tempActiveData;
this.activeId = this.idGlobal this.activeId = this.idGlobal;
} }
}, },
addComponent(item) { addComponent(item) {
const clone = this.cloneComponent(item) const clone = this.cloneComponent(item);
this.drawingList.push(clone) this.drawingList.push(clone);
this.activeFormItem(clone) this.activeFormItem(clone);
}, },
cloneComponent(origin) { cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin)) const clone = JSON.parse(JSON.stringify(origin));
clone.formId = ++this.idGlobal clone.formId = ++this.idGlobal;
clone.span = formConf.span clone.span = formConf.span;
clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件 clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
if (!clone.layout) clone.layout = 'colFormItem' if (!clone.layout) clone.layout = "colFormItem";
if (clone.layout === 'colFormItem') { if (clone.layout === "colFormItem") {
clone.vModel = `field${this.idGlobal}` clone.vModel = `field${this.idGlobal}`;
clone.placeholder !== undefined && (clone.placeholder += clone.label) clone.placeholder !== undefined && (clone.placeholder += clone.label);
tempActiveData = clone tempActiveData = clone;
} else if (clone.layout === 'rowFormItem') { } else if (clone.layout === "rowFormItem") {
delete clone.label delete clone.label;
clone.componentName = `row${this.idGlobal}` clone.componentName = `row${this.idGlobal}`;
clone.gutter = this.formConf.gutter clone.gutter = this.formConf.gutter;
tempActiveData = clone tempActiveData = clone;
} }
return tempActiveData return tempActiveData;
}, },
AssembleFormData() { AssembleFormData() {
this.formData = { this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)), fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf ...this.formConf,
} };
}, },
generate(data) { generate(data) {
const func = this[`exec${titleCase(this.operationType)}`] const func = this[`exec${titleCase(this.operationType)}`];
this.generateConf = data this.generateConf = data;
func && func(data) func && func(data);
}, },
execRun(data) { execRun(data) {
this.AssembleFormData() this.AssembleFormData();
this.drawerVisible = true this.drawerVisible = true;
}, },
execDownload(data) { execDownload(data) {
const codeStr = this.generateCode() const codeStr = this.generateCode();
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' }) const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
this.$download.saveAs(blob, data.fileName) this.$download.saveAs(blob, data.fileName);
}, },
execCopy(data) { execCopy(data) {
document.getElementById('copyNode').click() document.getElementById("copyNode").click();
}, },
empty() { empty() {
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then( this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then(
() => { () => {
this.drawingList = [] this.drawingList = [];
} }
) );
}, },
drawingItemCopy(item, parent) { drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item)) let clone = JSON.parse(JSON.stringify(item));
clone = this.createIdAndKey(clone) clone = this.createIdAndKey(clone);
parent.push(clone) parent.push(clone);
this.activeFormItem(clone) this.activeFormItem(clone);
}, },
createIdAndKey(item) { createIdAndKey(item) {
item.formId = ++this.idGlobal item.formId = ++this.idGlobal;
item.renderKey = +new Date() item.renderKey = +new Date();
if (item.layout === 'colFormItem') { if (item.layout === "colFormItem") {
item.vModel = `field${this.idGlobal}` item.vModel = `field${this.idGlobal}`;
} else if (item.layout === 'rowFormItem') { } else if (item.layout === "rowFormItem") {
item.componentName = `row${this.idGlobal}` item.componentName = `row${this.idGlobal}`;
} }
if (Array.isArray(item.children)) { 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) { drawingItemDelete(index, parent) {
parent.splice(index, 1) parent.splice(index, 1);
this.$nextTick(() => { this.$nextTick(() => {
const len = this.drawingList.length const len = this.drawingList.length;
if (len) { if (len) {
this.activeFormItem(this.drawingList[len - 1]) this.activeFormItem(this.drawingList[len - 1]);
} }
}) });
}, },
generateCode() { generateCode() {
const { type } = this.generateConf const { type } = this.generateConf;
this.AssembleFormData() this.AssembleFormData();
const script = vueScript(makeUpJs(this.formData, type)) const script = vueScript(makeUpJs(this.formData, type));
const html = vueTemplate(makeUpHtml(this.formData, type)) const html = vueTemplate(makeUpHtml(this.formData, type));
const css = cssStyle(makeUpCss(this.formData)) const css = cssStyle(makeUpCss(this.formData));
return beautifier.html(html + script + css, beautifierConf.html) return beautifier.html(html + script + css, beautifierConf.html);
}, },
download() { download() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = true this.showFileName = true;
this.operationType = 'download' this.operationType = "download";
}, },
run() { run() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = false this.showFileName = false;
this.operationType = 'run' this.operationType = "run";
}, },
copy() { copy() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = false this.showFileName = false;
this.operationType = 'copy' this.operationType = "copy";
}, },
tagChange(newTag) { tagChange(newTag) {
newTag = this.cloneComponent(newTag) newTag = this.cloneComponent(newTag);
newTag.vModel = this.activeData.vModel newTag.vModel = this.activeData.vModel;
newTag.formId = this.activeId newTag.formId = this.activeId;
newTag.span = this.activeData.span newTag.span = this.activeData.span;
delete this.activeData.tag delete this.activeData.tag;
delete this.activeData.tagIcon delete this.activeData.tagIcon;
delete this.activeData.document delete this.activeData.document;
Object.keys(newTag).forEach(key => { Object.keys(newTag).forEach((key) => {
if (this.activeData[key] !== undefined if (
&& typeof this.activeData[key] === typeof newTag[key]) { this.activeData[key] !== undefined &&
newTag[key] = this.activeData[key] typeof this.activeData[key] === typeof newTag[key]
) {
newTag[key] = this.activeData[key];
} }
}) });
this.activeData = newTag this.activeData = newTag;
this.updateDrawingList(newTag, this.drawingList) this.updateDrawingList(newTag, this.drawingList);
}, },
updateDrawingList(newTag, list) { updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.formId === this.activeId) const index = list.findIndex((item) => item.formId === this.activeId);
if (index > -1) { if (index > -1) {
list.splice(index, 1, newTag) list.splice(index, 1, newTag);
} else { } else {
list.forEach(item => { list.forEach((item) => {
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children) if (Array.isArray(item.children))
}) this.updateDrawingList(newTag, item.children);
});
} }
} },
} },
} };
</script> </script>
<style lang='scss'> <style lang="scss">
.editor-tabs{ .editor-tabs {
background: #121315; background: #121315;
.el-tabs__header{ .el-tabs__header {
margin: 0; margin: 0;
border-bottom-color: #121315; border-bottom-color: #121315;
.el-tabs__nav{ .el-tabs__nav {
border-color: #121315; border-color: #121315;
} }
} }
.el-tabs__item{ .el-tabs__item {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
color: #888a8e; color: #888a8e;
@ -388,15 +425,15 @@ export default {
margin-right: 5px; margin-right: 5px;
user-select: none; user-select: none;
} }
.el-tabs__item.is-active{ .el-tabs__item.is-active {
background: #1e1e1e; background: #1e1e1e;
border-bottom-color: #1e1e1e!important; border-bottom-color: #1e1e1e !important;
color: #fff; color: #fff;
} }
.el-icon-edit{ .el-icon-edit {
color: #f1fa8c; color: #f1fa8c;
} }
.el-icon-document{ .el-icon-document {
color: #a95812; color: #a95812;
} }
} }
@ -412,24 +449,24 @@ export default {
overflow-x: hidden !important; overflow-x: hidden !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.center-tabs{ .center-tabs {
.el-tabs__header{ .el-tabs__header {
margin-bottom: 0!important; margin-bottom: 0 !important;
} }
.el-tabs__item{ .el-tabs__item {
width: 50%; width: 50%;
text-align: center; text-align: center;
} }
.el-tabs__nav{ .el-tabs__nav {
width: 100%; width: 100%;
} }
} }
.reg-item{ .reg-item {
padding: 12px 6px; padding: 12px 6px;
background: #f8f8f8; background: #f8f8f8;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
.close-btn{ .close-btn {
position: absolute; position: absolute;
right: -6px; right: -6px;
top: -6px; top: -6px;
@ -444,16 +481,16 @@ export default {
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
&:hover{ &:hover {
background: rgba(210, 23, 23, 0.5) background: rgba(210, 23, 23, 0.5);
} }
} }
& + .reg-item{ & + .reg-item {
margin-top: 18px; margin-top: 18px;
} }
} }
.action-bar{ .action-bar {
& .el-button+.el-button { & .el-button + .el-button {
margin-left: 15px; margin-left: 15px;
} }
& i { & i {
@ -464,37 +501,37 @@ export default {
} }
} }
.custom-tree-node{ .custom-tree-node {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
.node-operation{ .node-operation {
float: right; float: right;
} }
i[class*="el-icon"] + i[class*="el-icon"]{ i[class*="el-icon"] + i[class*="el-icon"] {
margin-left: 6px; margin-left: 6px;
} }
.el-icon-plus{ .el-icon-plus {
color: #409EFF; color: #409eff;
} }
.el-icon-delete{ .el-icon-delete {
color: #157a0c; color: #157a0c;
} }
} }
.left-scrollbar .el-scrollbar__view{ .left-scrollbar .el-scrollbar__view {
overflow-x: hidden; overflow-x: hidden;
} }
.el-rate{ .el-rate {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
} }
.el-upload__tip{ .el-upload__tip {
line-height: 1.2; line-height: 1.2;
} }
$selectedColor: #f6f7ff; $selectedColor: #f6f7ff;
$lighterBlue: #409EFF; $lighterBlue: #409eff;
.container { .container {
position: relative; position: relative;
@ -513,14 +550,14 @@ $lighterBlue: #409EFF;
transition: transform 0ms !important; transition: transform 0ms !important;
} }
} }
.components-draggable{ .components-draggable {
padding-bottom: 20px; padding-bottom: 20px;
} }
.components-title{ .components-title {
font-size: 14px; font-size: 14px;
color: #222; color: #222;
margin: 6px 2px; margin: 6px 2px;
.svg-icon{ .svg-icon {
color: #666; color: #666;
font-size: 18px; font-size: 18px;
} }
@ -533,7 +570,7 @@ $lighterBlue: #409EFF;
cursor: move; cursor: move;
border: 1px dashed $selectedColor; border: 1px dashed $selectedColor;
border-radius: 3px; border-radius: 3px;
.svg-icon{ .svg-icon {
color: #777; color: #777;
font-size: 15px; font-size: 15px;
} }
@ -553,7 +590,7 @@ $lighterBlue: #409EFF;
top: 0; top: 0;
height: 100vh; height: 100vh;
} }
.left-scrollbar{ .left-scrollbar {
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
} }
@ -570,7 +607,7 @@ $lighterBlue: #409EFF;
margin: 0 350px 0 260px; margin: 0 350px 0 260px;
box-sizing: border-box; box-sizing: border-box;
} }
.empty-info{ .empty-info {
position: absolute; position: absolute;
top: 46%; top: 46%;
left: 0; left: 0;
@ -580,27 +617,27 @@ $lighterBlue: #409EFF;
color: #ccb1ea; color: #ccb1ea;
letter-spacing: 4px; letter-spacing: 4px;
} }
.action-bar{ .action-bar {
position: relative; position: relative;
height: 42px; height: 42px;
text-align: right; text-align: right;
padding: 0 15px; padding: 0 15px;
box-sizing: border-box;; box-sizing: border-box;
border: 1px solid #f1e8e8; border: 1px solid #f1e8e8;
border-top: none; border-top: none;
border-left: none; border-left: none;
.delete-btn{ .delete-btn {
color: #F56C6C; color: #f56c6c;
} }
} }
.logo-wrapper{ .logo-wrapper {
position: relative; position: relative;
height: 42px; height: 42px;
background: #fff; background: #fff;
border-bottom: 1px solid #f1e8e8; border-bottom: 1px solid #f1e8e8;
box-sizing: border-box; box-sizing: border-box;
} }
.logo{ .logo {
position: absolute; position: absolute;
left: 12px; left: 12px;
top: 6px; top: 6px;
@ -609,16 +646,16 @@ $lighterBlue: #409EFF;
font-weight: 600; font-weight: 600;
font-size: 17px; font-size: 17px;
white-space: nowrap; white-space: nowrap;
> img{ > img {
width: 30px; width: 30px;
height: 30px; height: 30px;
vertical-align: top; vertical-align: top;
} }
.github{ .github {
display: inline-block; display: inline-block;
vertical-align: sub; vertical-align: sub;
margin-left: 15px; margin-left: 15px;
> img{ > img {
height: 22px; height: 22px;
} }
} }
@ -661,32 +698,33 @@ $lighterBlue: #409EFF;
background-color: $selectedColor; background-color: $selectedColor;
} }
.active-from-item { .active-from-item {
& > .el-form-item{ & > .el-form-item {
background: $selectedColor; background: $selectedColor;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: initial; display: initial;
} }
& > .component-name{ & > .component-name {
color: $lighterBlue; color: $lighterBlue;
} }
} }
.el-form-item{ .el-form-item {
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
.drawing-item{ .drawing-item {
position: relative; position: relative;
cursor: move; cursor: move;
&.unfocus-bordered:not(.activeFromItem) > div:first-child { &.unfocus-bordered:not(.activeFromItem) > div:first-child {
border: 1px dashed #ccc; border: 1px dashed #ccc;
} }
.el-form-item{ .el-form-item {
padding: 12px 10px; padding: 12px 10px;
} }
} }
.drawing-row-item{ .drawing-row-item {
position: relative; position: relative;
cursor: move; cursor: move;
box-sizing: border-box; box-sizing: border-box;
@ -697,19 +735,19 @@ $lighterBlue: #409EFF;
.drawing-row-item { .drawing-row-item {
margin-bottom: 2px; margin-bottom: 2px;
} }
.el-col{ .el-col {
margin-top: 22px; margin-top: 22px;
} }
.el-form-item{ .el-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
.drag-wrapper{ .drag-wrapper {
min-height: 80px; min-height: 80px;
} }
&.active-from-item{ &.active-from-item {
border: 1px dashed $lighterBlue; border: 1px dashed $lighterBlue;
} }
.component-name{ .component-name {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -719,17 +757,20 @@ $lighterBlue: #409EFF;
padding: 0 6px; padding: 0 6px;
} }
} }
.drawing-item, .drawing-row-item{ .drawing-item,
.drawing-row-item {
&:hover { &:hover {
& > .el-form-item{ & > .el-form-item {
background: $selectedColor; background: $selectedColor;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: initial; display: initial;
} }
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: none; display: none;
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -743,23 +784,23 @@ $lighterBlue: #409EFF;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
& > .drawing-item-copy{ & > .drawing-item-copy {
right: 56px; right: 56px;
border-color: $lighterBlue; border-color: $lighterBlue;
color: $lighterBlue; color: $lighterBlue;
background: #fff; background: #fff;
&:hover{ &:hover {
background: $lighterBlue; background: $lighterBlue;
color: #fff; color: #fff;
} }
} }
& > .drawing-item-delete{ & > .drawing-item-delete {
right: 24px; right: 24px;
border-color: #F56C6C; border-color: #f56c6c;
color: #F56C6C; color: #f56c6c;
background: #fff; background: #fff;
&:hover{ &:hover {
background: #F56C6C; background: #f56c6c;
color: #fff; color: #fff;
} }
} }