Skip to content

I
integrate-admin
提交 52409c2a authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

同步代码

上级 49a5dfda
显示空白字符变更
内嵌 并排
正在显示 包含 601 行增加 和 468 行删除
src/services/config/index.ts
浏览文件 @ 52409c2a
...@@ -16,8 +16,8 @@ const menuConfig: IModules = { ...@@ -16,8 +16,8 @@ const menuConfig: IModules = {
/** @type {http请求地址} */ /** @type {http请求地址} */
const urlConfig: IUrl = { const urlConfig: IUrl = {
importUrl:'import', importUrl: 'import',
test:'test' test: 'test'
} }
/** @type {http请求地址} */ /** @type {http请求地址} */
...@@ -31,21 +31,21 @@ const userUrlConfig: IUrl = { ...@@ -31,21 +31,21 @@ const userUrlConfig: IUrl = {
//获取当前用户信息 //获取当前用户信息
getUserInfo: "user/getUserInfo", getUserInfo: "user/getUserInfo",
//注册 //注册
register:"user/register", register: "user/register",
//添加用户 //添加用户
addUser:'message/add', addUser: 'message/add',
//获取用户 //获取用户
getUser:'/message/list', getUser: 'message/list',
//编辑用户 //编辑用户
editUser:'message/edit', editUser: 'message/edit',
//删除用户 //删除用户
deleteUser:'message/delete', deleteUser: 'message/delete',
} }
/** @type {http请求地址} */ /** @type {http请求地址} */
const authUrlConfig: IUrl = { const authUrlConfig: IUrl = {
//查询账号角色 //查询账号角色
findRoleByUser:'userAccount/findRoleByUser', findRoleByUser: 'userAccount/findRoleByUser',
//添加菜单 //添加菜单
addMenu: "permission/add", addMenu: "permission/add",
//删除菜单 //删除菜单
...@@ -53,46 +53,46 @@ const authUrlConfig: IUrl = { ...@@ -53,46 +53,46 @@ const authUrlConfig: IUrl = {
//编辑菜单 //编辑菜单
editMenu: "permission/edit", editMenu: "permission/edit",
//获取菜单路由 //获取菜单路由
getMenuTree:'permission/getMenuTree', getMenuTree: 'permission/getMenuTree',
//获取权限树 //获取权限树
getPermissionTree: "permission/list", getPermissionTree: "permission/list",
//查询角色授权 //查询角色授权
queryRoleMenu:"permission/queryRolePermission", queryRoleMenu: "permission/queryRolePermission",
//查询所有权限树 //查询所有权限树
queryTreeList: "permission/queryTreeList", queryTreeList: "permission/queryTreeList",
//保存角色授权 //保存角色授权
saveRolePermission:'permission/saveRolePermission', saveRolePermission: 'permission/saveRolePermission',
//角色分页查询 //角色分页查询
getRoleList:'role/list', getRoleList: 'role/list',
//添加角色 //添加角色
addRole:'role/add', addRole: 'role/add',
//删除角色 //删除角色
deleteRole:'role/delete', deleteRole: 'role/delete',
//编辑角色 //编辑角色
editRole:'role/edit', editRole: 'role/edit',
//获取全部角色 //获取全部角色
getAllRole:'role/queryAll', getAllRole: 'role/queryAll',
} }
/** @type {http请求地址} */ /** @type {http请求地址} */
const tableCreatorUrlConfig: IUrl = { const tableCreatorUrlConfig: IUrl = {
//创建表 //创建表
createTable:'starbos_codegenerator/generatetable/create', createTable: 'starbos_codegenerator/generatetable/create',
//查询表 //查询表
queryTable:'starbos_codegenerator/generatetable/list', queryTable: 'starbos_codegenerator/generatetable/list',
//获取文件类型 //获取文件类型
getFiledType:'starbos_codegenerator/generatetable/getFiledType', getFiledType: 'starbos_codegenerator/generatetable/getFiledType',
} }
const projectUrlConfig: IUrl = { const projectUrlConfig: IUrl = {
//创建项目 //创建项目
addProject:'starbos_project/project/add', addProject: 'starbos_project/project/add',
//删除项目 //删除项目
deleteProject:'starbos_project/project/delete', deleteProject: 'starbos_project/project/delete',
//编辑项目 //编辑项目
editProject:'starbos_project/project/edit', editProject: 'starbos_project/project/edit',
//分页查询项目 //分页查询项目
projectList:'starbos_project/project/list' projectList: 'starbos_project/project/list'
} }
......
src/views/system/userManage.vue
浏览文件 @ 52409c2a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="router" style="padding: 20px;"> <div class="router" style="padding: 20px;">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item> <el-form-item>
<el-button type="primary" size="small" @click="handleAdd">添加用户</el-button> <el-button type="primary" size="small" icon="plus" @click="handleAdd">添加用户</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table :data="tableData" border scrollbar-always-on> <el-table :data="tableData" border scrollbar-always-on>
......
src/vueFormCreate/components/ComponentGroup.vue
浏览文件 @ 52409c2a
<template> <template>
<div class="widget-cate">{{ title }}</div> <div class="widget-cate">{{ title }}</div>
<!-- group 两组名要相同， pull: 'clone' 以克隆的方式拖出，这个组的数据不会有问题， put: false 禁止拖入-->
<Draggable tag="ul" item-key="type" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }" <Draggable tag="ul" item-key="type" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }"
:sort="false" :list="list"> :sort="false" :list="list">
<template #item="{ element }"> <template #item="{ element }">
......
src/vueFormCreate/components/SvgIcon.vue
浏览文件 @ 52409c2a
<template> <template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$attrs" /> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="attrs" />
<svg v-else :class="svgClass" arig-hidden="true" v-on="$attrs"> <svg v-else :class="svgClass" arig-hidden="true" v-on="attrs">
<use :href="iconName" /> <use :href="iconName" />
</svg> </svg>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue' import { computed, useAttrs } from 'vue'
import * as utils from '../utils' import * as utils from '../utils'
const attrs = useAttrs()
const props = defineProps({ const props = defineProps({
iconClass: { iconClass: {
type: String, type: String,
......
src/vueFormCreate/config/element.ts
浏览文件 @ 52409c2a
...@@ -47,10 +47,6 @@ export const widgetForm: WidgetForm = { ...@@ -47,10 +47,6 @@ export const widgetForm: WidgetForm = {
formId: '' formId: ''
} }
} }
export const put = () => {
console.log('widgetForm', widgetForm);
}
export const basicComponents = [ export const basicComponents = [
{ {
......
src/vueFormCreate/core/element/ElCustomHeader.vue
浏览文件 @ 52409c2a
<template> <template>
<el-header class="btn-bar"> <el-header class="btn-bar">
<slot></slot> <slot></slot>
<el-button v-if="$attrs.uploadJson" type="text" @click="$emit('uploadJson')"> <el-button v-if="$attrs.uploadJson" type="text" @click="emits('uploadJson')">
<template #icon> <template #icon>
<SvgIcon iconClass="upload" /> <SvgIcon iconClass="upload" />
</template> </template>
导入JSON 导入JSON
</el-button> </el-button>
<el-button v-if="$attrs.clearable" type="text" @click="$emit('clearable')"> <el-button v-if="$attrs.clearable" type="text" @click="emits('clearable')">
<template #icon> <template #icon>
<SvgIcon iconClass="clearable" /> <SvgIcon iconClass="clearable" />
</template> </template>
清空 清空
</el-button> </el-button>
<el-button v-if="$attrs.preview" type="text" @click="$emit('preview')"> <el-button v-if="$attrs.preview" type="text" @click="emits('preview')">
<template #icon> <template #icon>
<SvgIcon iconClass="preview" /> <SvgIcon iconClass="preview" />
</template> </template>
预览 预览
</el-button> </el-button>
<el-button v-if="$attrs.generateJson" type="text" @click="$emit('generateJson')"> <el-button v-if="$attrs.generateJson" type="text" @click="emits('generateJson')">
<template #icon> <template #icon>
<SvgIcon iconClass="generate-json" /> <SvgIcon iconClass="generate-json" />
</template> </template>
生成JSON 生成JSON
</el-button> </el-button>
<el-button v-if="$attrs.generateCode" type="text" @click="$emit('generateCode')"> <el-button v-if="$attrs.generateCode" type="text" @click="emits('generateCode')">
<template #icon> <template #icon>
<SvgIcon iconClass="generate-code" /> <SvgIcon iconClass="generate-code" />
</template> </template>
......
src/vueFormCreate/core/element/ElDesignForm.vue
浏览文件 @ 52409c2a
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
</el-aside> </el-aside>
<el-main class="center-container"> <el-main class="center-container">
<ElCustomHeader v-bind="$props" @preview="() => (state.previewVisible = true)" <ElCustomHeader v-bind="props" @preview="() => (state.previewVisible = true)"
@uploadJson="() => (state.uploadJsonVisible = true)" @generateJson="handleGenerateJson" @uploadJson="() => (state.uploadJsonVisible = true)" @generateJson="handleGenerateJson"
@generateCode="handleGenerateCode" @clearable="handleClearable"> @generateCode="handleGenerateCode" @clearable="handleClearable">
<slot name="header"></slot> <slot name="header"></slot>
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="state.dataCodeVisible" title="生产代码" :width="800"> <el-dialog v-model="state.dataCodeVisible" title="生成代码" :width="800">
<el-tabs type="card" v-model="state.codeLanguage" :tabBarStyle="{ margin: 0 }"> <el-tabs type="card" v-model="state.codeLanguage" :tabBarStyle="{ margin: 0 }">
<el-tab-pane label="Vue Component" :name="state.codeType.Vue"> <el-tab-pane label="Vue Component" :name="state.codeType.Vue">
<CodeEditor :value="state.dataCodeTemplate" language="html" readonly /> <CodeEditor :value="state.dataCodeTemplate" language="html" readonly />
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, PropType, toRefs, watchEffect, ref, nextTick } from 'vue' import { reactive, watchEffect, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { defaultsDeep } from 'lodash' import { defaultsDeep } from 'lodash'
import CodeEditor from '../../components/CodeEditor.vue' import CodeEditor from '../../components/CodeEditor.vue'
...@@ -135,6 +135,11 @@ const props = defineProps({ ...@@ -135,6 +135,11 @@ const props = defineProps({
clearable: { clearable: {
type: Boolean, type: Boolean,
default: true default: true
},
// 设置盒子的最小高度
height: {
type: Number,
default: 400
} }
}) })
...@@ -143,7 +148,6 @@ const state = reactive({ ...@@ -143,7 +148,6 @@ const state = reactive({
codeType: CodeType, codeType: CodeType,
widgetForm: JSON.parse(JSON.stringify(element.widgetForm)), widgetForm: JSON.parse(JSON.stringify(element.widgetForm)),
widgetFormSelect: undefined, widgetFormSelect: undefined,
generateFormRef: null as any,
configTab: 'widget', configTab: 'widget',
previewVisible: false, previewVisible: false,
uploadJsonVisible: false, uploadJsonVisible: false,
...@@ -161,6 +165,7 @@ const state = reactive({ ...@@ -161,6 +165,7 @@ const state = reactive({
}) })
const formConfigRef = ref() const formConfigRef = ref()
const generateFormRef = ref()
const showPreviewVisible = () => { const showPreviewVisible = () => {
state.previewVisible = true state.previewVisible = true
...@@ -200,15 +205,13 @@ const handleCopyClick = (text: string) => { ...@@ -200,15 +205,13 @@ const handleCopyClick = (text: string) => {
} }
// 获取数据 // 获取数据
const handleGetData = () => { const handleGetData = () => {
state.generateFormRef.getData().then((res: any) => { generateFormRef.value.getData().then((res: any) => {
const dataForm = { const dataForm = {
id: '', id: '',
list: res, list: res,
formid: state.widgetForm.config.formField formid: state.widgetForm.config.formField
} }
console.log('Object数据', dataForm);
state.dataJsonTemplate = JSON.stringify(dataForm, null, 2) state.dataJsonTemplate = JSON.stringify(dataForm, null, 2)
console.log('json数据', state.dataJsonTemplate);
state.dataJsonVisible = true state.dataJsonVisible = true
}) })
} }
...@@ -231,8 +234,9 @@ const handleGenerateJson1 = () => { ...@@ -231,8 +234,9 @@ const handleGenerateJson1 = () => {
)) ))
} }
// 生成代码
const handleGenerateCode = () => { const handleGenerateCode = () => {
state.codeLanguage = CodeType.Vue state.codeLanguage = CodeType.Vue // vue
state.dataCodeVisible = true state.dataCodeVisible = true
} }
...@@ -246,6 +250,7 @@ watchEffect(() => { ...@@ -246,6 +250,7 @@ watchEffect(() => {
} }
}) })
// 清空数据
const handleClearable = () => { const handleClearable = () => {
state.widgetForm.list = [] state.widgetForm.list = []
nextTick(() => defaultsDeep( nextTick(() => defaultsDeep(
...@@ -255,7 +260,7 @@ const handleClearable = () => { ...@@ -255,7 +260,7 @@ const handleClearable = () => {
state.widgetFormSelect = undefined state.widgetFormSelect = undefined
} }
const handleReset = () => state.generateFormRef.reset() const handleReset = () => generateFormRef.value.reset()
const getJson = () => state.widgetForm const getJson = () => state.widgetForm
...@@ -270,6 +275,7 @@ const setJson = (json: WidgetForm) => { ...@@ -270,6 +275,7 @@ const setJson = (json: WidgetForm) => {
const getTemplate = (codeType: CodeType) => const getTemplate = (codeType: CodeType) =>
generateCode(state.widgetForm, codeType, PlatformType.Element) generateCode(state.widgetForm, codeType, PlatformType.Element)
// 使用最新数据
const clear = () => { const clear = () => {
handleClearable() handleClearable()
formConfigRef.value.updataNewData(element.widgetForm) formConfigRef.value.updataNewData(element.widgetForm)
...@@ -282,3 +288,6 @@ defineExpose({ ...@@ -282,3 +288,6 @@ defineExpose({
clear clear
}) })
</script> </script>
<style lang="scss" scoped>
</style>
src/vueFormCreate/core/element/ElGenerateForm.vue
浏览文件 @ 52409c2a
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, reactive, toRefs, watch } from 'vue' import { onMounted, reactive, toRefs, watch, ref } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import ElGenerateFormItem from './ElGenerateFormItem.vue' import ElGenerateFormItem from './ElGenerateFormItem.vue'
import { element } from '../../config' import { element } from '../../config'
...@@ -42,8 +42,9 @@ const props = defineProps({ ...@@ -42,8 +42,9 @@ const props = defineProps({
} }
}) })
const generateForm = ref()
const state = reactive({ const state = reactive({
generateForm: null as any,
model: {} as any, model: {} as any,
rules: {} as any, rules: {} as any,
widgetForm: widgetForm:
...@@ -112,9 +113,7 @@ onMounted(() => { ...@@ -112,9 +113,7 @@ onMounted(() => {
const getData = () => { const getData = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
state.generateForm generateForm.value.validate().then((validate: boolean) => {
.validate()
.then((validate: boolean) => {
if (validate) { if (validate) {
// console.log('成功', state.generateForm); // console.log('成功', state.generateForm);
resolve(state.model) resolve(state.model)
...@@ -122,15 +121,14 @@ const getData = () => { ...@@ -122,15 +121,14 @@ const getData = () => {
// console.log('失败'); // console.log('失败');
ElMessage.error('验证失败') ElMessage.error('验证失败')
} }
}) }).catch((error: Error) => {
.catch((error: Error) => {
reject(error) reject(error)
}) })
}) })
} }
const reset = () => { const reset = () => {
state.generateForm.resetFields() generateForm.value.resetFields()
} }
defineExpose({ defineExpose({
......
src/vueFormCreate/core/element/ElWidgetForm.vue
浏览文件 @ 52409c2a
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
<el-form label-suffix=":" :size="widgetForm.config.size" :label-position="widgetForm.config.labelPosition" <el-form label-suffix=":" :size="widgetForm.config.size" :label-position="widgetForm.config.labelPosition"
:label-width="`${widgetForm.config.labelWidth}px`" :label-width="`${widgetForm.config.labelWidth}px`"
:hide-required-asterisk="widgetForm.config.hideRequiredAsterisk"> :hide-required-asterisk="widgetForm.config.hideRequiredAsterisk">
<!-- ghostClass 拖拽中的css样式 handle 只有当鼠标移动到css为mover类的元素上才能拖动 -->
<!-- group 分组 同一组的不同的list可以拖动 -->
<!-- transition-group 用于列表的过渡效果 默认为key，可以用tag转换-->
<!-- 当拖拽为 栅格布局时 -->
<Draggable class="widget-form-list" item-key="key" ghostClass="ghost" handle=".drag-widget" :animation="200" <Draggable class="widget-form-list" item-key="key" ghostClass="ghost" handle=".drag-widget" :animation="200"
:group="{ name: 'people' }" :list="widgetForm.list" @add="handleMoveAdd"> :group="{ name: 'people' }" :list="widgetForm.list" @add="handleMoveAdd">
<template #item="{ element, index }"> <template #item="{ element, index }">
...@@ -158,11 +162,16 @@ const handleDeleteClick = (index: number, list: any[]) => { ...@@ -158,11 +162,16 @@ const handleDeleteClick = (index: number, list: any[]) => {
}) })
} }
// 添加单元时的回调
const handleMoveAdd = (event: any) => { const handleMoveAdd = (event: any) => {
// console.log(event, 'event');
// 添加单元的索引
const { newIndex } = event const { newIndex } = event
// 随机产生一个可以
const key = v4().replaceAll('-', '') const key = v4().replaceAll('-', '')
const list = JSON.parse(JSON.stringify(props.widgetForm.list)) const list = JSON.parse(JSON.stringify(props.widgetForm.list))
// console.log(list, 'liss');
list[newIndex] = { list[newIndex] = {
...list[newIndex], ...list[newIndex],
...@@ -198,6 +207,7 @@ const handleMoveAdd = (event: any) => { ...@@ -198,6 +207,7 @@ const handleMoveAdd = (event: any) => {
emits('update:widgetFormSelect', list[newIndex]) emits('update:widgetFormSelect', list[newIndex])
} }
// 拖拽到栅格布局中
const handleColMoveAdd = ( const handleColMoveAdd = (
event: any, event: any,
row: any, row: any,
......
src/vueFormCreate/core/element/ElWidgetFormItem.vue
浏览文件 @ 52409c2a
...@@ -142,8 +142,8 @@ ...@@ -142,8 +142,8 @@
</template> </template>
</el-form-item> </el-form-item>
<div class="widget-view-action" v-if="selectWidget?.key === element.key"> <div class="widget-view-action" v-if="selectWidget?.key === element.key">
<SvgIcon iconClass="copy" @click.stop="$emit('copy')" /> <SvgIcon iconClass="copy" @click.stop="emits('copy')" />
<SvgIcon iconClass="delete" @click.stop="$emit('delete')" /> <SvgIcon iconClass="delete" @click.stop="emits('delete')" />
</div> </div>
<div class="widget-view-drag" v-if="selectWidget?.key === element.key"> <div class="widget-view-drag" v-if="selectWidget?.key === element.key">
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, PropType } from 'vue' import { PropType } from 'vue'
import SvgIcon from '../../components/SvgIcon.vue' import SvgIcon from '../../components/SvgIcon.vue'
import RichTextEditor from '../../components/RichTextEditor.vue' import RichTextEditor from '../../components/RichTextEditor.vue'
import { WidgetForm } from '../../config/element' import { WidgetForm } from '../../config/element'
......
src/vueFormCreate/styles/element.styl
浏览文件 @ 52409c2a
.fc-style .fc-style {
.el-main .el-main {
padding 0 padding: 0;
.el-dialog__header }
border-bottom 1px solid #f0f0f0
.el-dialog__body .el-dialog__header {
padding 15px 20px border-bottom: 1px solid #f0f0f0;
.el-dialog__footer }
border-top 1px solid #F2F6FC
padding 10px 15px .el-dialog__body {
.config-content padding: 15px 20px;
.el-radio-group }
margin-top 10px
vertical-align super .el-dialog__footer {
.el-radio border-top: 1px solid #F2F6FC;
margin-bottom 10px padding: 10px 15px;
.el-rate }
margin-top 6px
.el-checkbox .config-content {
line-height 32px .el-radio-group {
\ No newline at end of file margin-top: 10px;
vertical-align: super;
}
.el-radio {
margin-bottom: 10px;
}
}
.el-rate {
margin-top: 6px;
}
.el-checkbox {
line-height: 32px;
}
}
\ No newline at end of file
src/vueFormCreate/styles/index.styl
浏览文件 @ 52409c2a
@import './scrollbar.styl' @import './scrollbar.styl';
@import './element.styl' @import './element.styl';
$primary-color = #409EFF
$primary-background-color = #ecf5ff $primary-color = #409EFF;
html, body $primary-background-color = #ecf5ff;
height 100%
margin 0 html, body {
#app height: 100%;
font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif margin: 0;
-webkit-font-smoothing antialiased }
-moz-osx-font-smoothing grayscale
color #2c3e50 #app {
min-height 100% font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
height 100% -webkit-font-smoothing: antialiased;
.fc-style -moz-osx-font-smoothing: grayscale;
height 100% color: #2c3e50;
*, :after, :before min-height: 100%;
-webkit-box-sizing border-box height: 100%;
-moz-box-sizing border-box }
box-sizing border-box
.fc-container .fc-style {
background #fff height: 100%;
height 100%
.ant-layout, .el-container *, :after, :before {
height 100% !important -webkit-box-sizing: border-box;
&>.ant-layout, .el-container -moz-box-sizing: border-box;
background #fff box-sizing: border-box;
.fc-main }
position relative
&>.ant-layout, .el-container .fc-container {
position absolute background: #fff;
top 0 height: 100%;
bottom 0
left 0 .ant-layout, .el-container {
right 0 height: 100% !important;
.center-container }
border-left 1px solid #e0e0e0
border-right 1px solid #e0e0e0 &>.ant-layout, .el-container {
.btn-bar background: #fff;
height 45px !important }
line-height 45px
font-size 18px .fc-main {
border-bottom 2px solid #e4e7ed position: relative;
text-align right
background-color white &>.ant-layout, .el-container {
padding 0 10px position: absolute;
.svg-icon top: 0;
font-size 16px bottom: 0;
margin-right 5px left: 0;
.ant-layout-content, .el-main right: 0;
height calc(100% - 45px) }
padding 0 }
position relative }
background #fafafa
.components .center-container {
padding 8px 0 border-left: 1px solid #e0e0e0;
width 100% border-right: 1px solid #e0e0e0;
height 100%
.widget-cate .btn-bar {
padding 8px 12px height: 45px !important;
font-size 13px line-height: 45px;
ul font-size: 18px;
position relative border-bottom: 2px solid #e4e7ed;
overflow hidden text-align: right;
padding 0 10px 10px background-color: white;
margin 0 padding: 0 10px;
.form-edit-widget-label
font-size 12px .svg-icon {
display block font-size: 16px;
width 48% margin-right: 5px;
line-height 26px }
position relative }
float left
left 0 .ant-layout-content, .el-main {
overflow hidden height: calc(100% - 45px);
text-overflow ellipsis padding: 0;
white-space nowrap position: relative;
margin 1% background: #fafafa;
border 1px solid #F4F6FC }
&:hover }
border 1px dashed $primary-color
&>a .components {
color $primary-color padding: 8px 0;
&>a width: 100%;
color #333 height: 100%;
display block
cursor move .widget-cate {
background #f4f6fc padding: 8px 12px;
border 1px solid #f4f6fc font-size: 13px;
.svg-icon }
margin-right 6px
margin-left 8px ul {
font-size 14px position: relative;
display inline-block overflow: hidden;
vertical-align middle padding: 0 10px 10px;
span margin: 0;
display inline-block }
vertical-align middle
.widget-form-container .form-edit-widget-label {
position absolute font-size: 12px;
top 0 display: block;
left 0 width: 48%;
right 0 line-height: 26px;
bottom 0 position: relative;
.widget-form-list float: left;
background #fff left: 0;
border 1px dashed #999 overflow: hidden;
min-height calc(100vh - 65px) text-overflow: ellipsis;
margin 10px white-space: nowrap;
.widget-item-container margin: 1%;
position relative border: 1px solid #F4F6FC;
.widget-view-action
position absolute &:hover {
right 0 border: 1px dashed $primary-color;
bottom -2px
height 28px &>a {
line-height 28px color: $primary-color;
background $primary-color }
z-index 10 }
.svg-icon
font-size 14px &>a {
color #fff color: #333;
margin 0 5px display: block;
cursor pointer cursor: move;
.widget-view-drag background: #f4f6fc;
position absolute border: 1px solid #f4f6fc;
height 28px
left 0 .svg-icon {
top -2px margin-right: 6px;
line-height 28px margin-left: 8px;
background $primary-color font-size: 14px;
z-index 10 display: inline-block;
.svg-icon vertical-align: middle;
font-size 14px }
color #fff
margin 0 5px span {
cursor move display: inline-block;
.widget-col-list vertical-align: middle;
min-height 50px }
border 1px dashed #ccc }
background #fff }
.widget-view }
padding-bottom 18px
position relative .widget-form-container {
border 1px dashed rgba(170, 170, 170, 0.7) position: absolute;
background-color rgba(236, 245, 255, 0.3) top: 0;
margin 2px left: 0;
.widget-view-description right: 0;
height 15px bottom: 0;
line-height 15px
font-size 13px .widget-form-list {
margin-top 6px background: #fff;
color #909399 border: 1px dashed #999;
&:after min-height: calc(100vh - 65px);
position absolute margin: 10px;
left 0
right 0 .widget-item-container {
top 0 position: relative;
bottom 0
display block .widget-view-action {
&:hover position: absolute;
background $primary-background-color right: 0;
outline 1px solid $primary-color bottom: -2px;
outline-offset 0 height: 28px;
&.active line-height: 28px;
outline 2px solid $primary-color background: $primary-color;
border 1px solid $primary-color z-index: 10;
outline-offset 0
.widget-view-drag .svg-icon {
display block font-size: 14px;
&.active color: #fff;
outline 2px solid $primary-color margin: 0 5px;
border 1px solid $primary-color cursor: pointer;
&.ghost }
background #f56c6c }
border 2px solid #f56c6c
outline-width 0 .widget-view-drag {
height 3px position: absolute;
box-sizing border-box height: 28px;
font-size 0 left: 0;
content '' top: -2px;
overflow hidden line-height: 28px;
padding 0 background: $primary-color;
.widget-col z-index: 10;
padding 5px
background-color rgba(253, 246, 236, 0.3) .svg-icon {
&.active font-size: 14px;
outline 2px solid #e6a23c color: #fff;
border 1px solid #e6a23c margin: 0 5px;
&:hover cursor: move;
background #fdf6ec }
outline 1px solid #e6a23c }
outline-offset 0px }
&.active
outline 2px solid #e6a23c .widget-col-list {
border 1px solid #e6a23c min-height: 50px;
outline-offset 0 border: 1px dashed #ccc;
&.ghost background: #fff;
background #f56c6c }
border 2px solid #f56c6c
outline-width 0 .widget-view {
height 3px padding-bottom: 18px;
box-sizing border-box position: relative;
font-size 0 border: 1px dashed rgba(170, 170, 170, 0.7);
content '' background-color: rgba(236, 245, 255, 0.3);
overflow hidden margin: 2px;
padding 0
.widget-view-action.widget-col-action .widget-view-description {
position absolute height: 15px;
height 28px line-height: 15px;
right -2px font-size: 13px;
bottom -2px margin-top: 6px;
line-height 28px color: #909399;
background #e6a23c }
z-index 10
.svg-icon &:after {
font-size 14px position: absolute;
color #fff left: 0;
margin 0 5px right: 0;
cursor move top: 0;
.widget-view-drag.widget-col-drag bottom: 0;
position absolute display: block;
height 28px }
left -2px
top -2px &:hover {
line-height 28px background: $primary-background-color;
background #e6a23c outline: 1px solid $primary-color;
z-index 10 outline-offset: 0;
.svg-icon
font-size 14px &.active {
color #fff outline: 2px solid $primary-color;
margin 0 5px border: 1px solid $primary-color;
cursor move outline-offset: 0;
&::after }
display none
.ghost .widget-view-drag {
background #f56c6c display: block;
border 2px solid #f56c6c }
outline-width 0 }
height 3px
box-sizing border-box &.active {
font-size 0 outline: 2px solid $primary-color;
content '' border: 1px solid $primary-color;
overflow hidden }
padding 0
.ghost &.ghost {
background #f56c6c background: #f56c6c;
border 2px solid #f56c6c border: 2px solid #f56c6c;
position relative outline-width: 0;
&::after height: 3px;
background #f56c6c box-sizing: border-box;
li.ghost font-size: 0;
height 5px content: '';
list-style none overflow: hidden;
font-size 0 padding: 0;
overflow hidden }
.widget-config-container }
position relative
.ant-layout-header, .el-header .widget-col {
border-bottom 2px solid #e4e7ed padding: 5px;
padding 0 5px background-color: rgba(253, 246, 236, 0.3);
height 45px !important
line-height 45px !important &.active {
background-color #fff outline: 2px solid #e6a23c;
.config-tab border: 1px solid #e6a23c;
height 41px }
line-height 41px
display inline-block &:hover {
width 145px background: #fdf6ec;
text-align center outline: 1px solid #e6a23c;
font-size 14px outline-offset: 0px;
font-weight 500
position relative &.active {
cursor pointer outline: 2px solid #e6a23c;
&.active border: 1px solid #e6a23c;
border-bottom 2px solid $primary-color outline-offset: 0;
.config-content }
padding 10px }
background #fff
overflow auto &.ghost {
.ant-form-item-label, .el-form-item__label background: #f56c6c;
font-weight 500 border: 2px solid #f56c6c;
.el-form-item__label outline-width: 0;
padding 0 height: 3px;
.ant-form-item, .el-form-item, h4 box-sizing: border-box;
padding-bottom 10px font-size: 0;
border-bottom 1px solid #e1e1e1 content: '';
.label overflow: hidden;
font-size 14px padding: 0;
font-weight 500 }
margin 0 5px
&:first-child .widget-view-action.widget-col-action {
margin-left 0 position: absolute;
.drag-item height: 28px;
font-size 16px right: -2px;
margin 0 5px bottom: -2px;
cursor move line-height: 28px;
.ghost background: #e6a23c;
background #fff z-index: 10;
border 1px dashed $primary-color
&::after .svg-icon {
background #fff font-size: 14px;
display block color: #fff;
content '' margin: 0 5px;
position absolute cursor: move;
top 0 }
left 0 }
right 0
bottom 0 .widget-view-drag.widget-col-drag {
ul position: absolute;
margin 0 height: 28px;
padding 0 left: -2px;
li.ghost top: -2px;
list-style none line-height: 28px;
font-size 0 background: #e6a23c;
display block z-index: 10;
position relative
.form-empty .svg-icon {
position absolute font-size: 14px;
text-align center color: #fff;
width 300px margin: 0 5px;
font-size 20px cursor: move;
top 200px }
left 50% }
margin-left -150px
color #ccc &::after {
.widget-empty display: none;
background-position 50% }
}
.ghost {
background: #f56c6c;
border: 2px solid #f56c6c;
outline-width: 0;
height: 3px;
box-sizing: border-box;
font-size: 0;
content: '';
overflow: hidden;
padding: 0;
}
}
.ghost {
background: #f56c6c;
border: 2px solid #f56c6c;
position: relative;
&::after {
background: #f56c6c;
}
}
li.ghost {
height: 5px;
list-style: none;
font-size: 0;
overflow: hidden;
}
}
.widget-config-container {
position: relative;
.ant-layout-header, .el-header {
border-bottom: 2px solid #e4e7ed;
padding: 0 5px;
height: 45px !important;
line-height: 45px !important;
background-color: #fff;
}
.config-tab {
height: 41px;
line-height: 41px;
display: inline-block;
width: 145px;
text-align: center;
font-size: 14px;
font-weight: 500;
position: relative;
cursor: pointer;
&.active {
border-bottom: 2px solid $primary-color;
}
}
.config-content {
padding: 10px;
background: #fff;
overflow: auto;
.ant-form-item-label, .el-form-item__label {
font-weight: 500;
}
.el-form-item__label {
padding: 0;
}
.ant-form-item, .el-form-item, h4 {
padding-bottom: 10px;
border-bottom: 1px solid #e1e1e1;
}
.label {
font-size: 14px;
font-weight: 500;
margin: 0 5px;
&:first-child {
margin-left: 0;
}
}
.drag-item {
font-size: 16px;
margin: 0 5px;
cursor: move;
}
}
.ghost {
background: #fff;
border: 1px dashed $primary-color;
&::after {
background: #fff;
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
ul {
margin: 0;
padding: 0;
}
li.ghost {
list-style: none;
font-size: 0;
display: block;
position: relative;
}
}
.form-empty {
position: absolute;
text-align: center;
width: 300px;
font-size: 20px;
top: 200px;
left: 50%;
margin-left: -150px;
color: #ccc;
}
.widget-empty {
background-position: 50%;
}
}
src/vueFormCreate/styles/scrollbar.styl
浏览文件 @ 52409c2a
::-webkit-scrollbar ::-webkit-scrollbar {
width 5px width: 5px;
height 5px height: 5px;
::-webkit-scrollbar-thumb }
border-radius 1em
background-color rgba(50, 50, 50, 0.3) ::-webkit-scrollbar-thumb {
::-webkit-scrollbar-track border-radius: 1em;
border-radius 1em background-color: rgba(50, 50, 50, 0.3);
background-color rgba(50, 50, 50, 0.1) }
\ No newline at end of file
::-webkit-scrollbar-track {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
}
\ No newline at end of file
vite.config.ts
浏览文件 @ 52409c2a
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// vite 提供的操作env配置变量的方法loadEnv // vite 提供的操作env配置变量的方法loadEnv
import { loadEnv } from "vite"; import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
// nodejs写法，获取项目目录 // nodejs写法，获取项目目录
import path from "path"; import path from "path";
//按需要加载 //按需要加载
import AutoImport from "unplugin-auto-import/vite"; // import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite"; // import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; // import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite"; // import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver"; // import IconsResolver from "unplugin-icons/resolver";
import Inspect from "vite-plugin-inspect"; import Inspect from "vite-plugin-inspect";
// import { viteMockServe } from "vite-plugin-mock"; // import { viteMockServe } from "vite-plugin-mock";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
...@@ -31,49 +30,6 @@ export default ({ command, mode }) => { ...@@ -31,49 +30,6 @@ export default ({ command, mode }) => {
// 指定symbolId格式 // 指定symbolId格式
symbolId: "icon-[dir]-[name]", symbolId: "icon-[dir]-[name]",
}), }),
// viteMockServe({
// // default
// mockPath: "mock",
// }),
// AutoImport({
// // Auto import functions from Vue, e.g. ref, reactive, toRef...
// // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
// imports: ['vue'],
// // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
// resolvers: [
// ElementPlusResolver(),
// // Auto import icon components
// // 自动导入图标组件
// IconsResolver({
// prefix: 'Icon',
// }),
// ],
// dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
// }),
// Components({
// resolvers: [
// // Auto register icon components
// // 自动注册图标组件
// IconsResolver({
// enabledCollections: ['ep'],
// }),
// // Auto register Element Plus components
// // 自动导入 Element Plus 组件
// ElementPlusResolver(),
// ],
// dts: path.resolve(pathSrc, 'components.d.ts'),
// }),
// Icons({
// autoInstall: true,
// }),
Inspect(), Inspect(),
], ],
// 服务器配置 // 服务器配置
...@@ -89,7 +45,7 @@ export default ({ command, mode }) => { ...@@ -89,7 +45,7 @@ export default ({ command, mode }) => {
// '/foo': '', // '/foo': '',
// 选项写法 // 选项写法
"/integrate": { "/integrate": {
target: "http://localhost:8090", target: "http://192.168.0.60",
// rewrite: (path) => path.replace(/^\/api/, '') // rewrite: (path) => path.replace(/^\/api/, '')
}, },
// 正则表达式写法 // 正则表达式写法
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论