Skip to content

S
saas-manage
Commit f8065618 by zhuzhequan
Options

app

parent df1e88c0
Showing with 276 additions and 6 deletions
package-lock.json deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -14,12 +14,14 @@
"core-js": "^3.8.3",
"element-ui": "^2.15.13",
"js-md5": "^0.7.3",
"lodash": "~4.17.20",
"lodash": "^4.17.21",
"uuid": "^10.0.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2",
"vxe-table": "^3.5.9",
"vxe-table-plugin-element": "^4.0.4",
"xe-utils": "^3.5.7"
},
"devDependencies": {
......
src/common/components/element-ui.js
......@@ -36,6 +36,7 @@ import {
Tooltip,
ColorPicker,
CheckboxGroup,
Divider,
Popover,
} from 'element-ui'
......@@ -69,6 +70,7 @@ const components = [
Dropdown,
DropdownItem,
DropdownMenu,
Divider,
Tooltip,
ColorPicker,
CheckboxGroup,
......
src/components/dynamicForms/index.vue 0 → 100644
<script>
import basics from './components'
import draggable from 'vuedraggable'
// import uuid from 'uuid'
export default {
data() {
return {
basics,
groupLeft: {
name: 'itxst',
pull: 'clone',
put: false
},
componentList: [],
groupRight: {
name: 'itxst',
pull: false,
put: true
},
attrs: {
label: '',
regs: []
}
}
},
components: { draggable },
methods: {
handleAdd(e) {
// console.log(uuid)
const newIndex = e.newIndex
// 深拷贝
const newCard = JSON.parse(JSON.stringify(this.componentList[newIndex]))
// newCard.id = uuid()
newCard.orderId = this.cardId
this.cardId = this.cardId + 1
this.$set(this.componentList, newIndex, newCard)
}
}
}
</script>
<template>
<div class="div-form">
<div class="form-header">
<h1>{{ $route.meta.title }}</h1>
<div class="header-btn">
<el-button icon="el-icon-delete" type="text">清空</el-button>
<el-button icon="el-icon-view" type="text">预览</el-button>
<el-button icon="el-icon-check" type="text">保存</el-button>
</div>
</div>
<div class="form-content">
<div class="components">
<ul>
<el-row :gutter="20">
<draggable
tag="ul"
class="cardDrag-list-wrap"
v-model="basics"
:group="groupLeft"
animation="300"
>
<el-col v-for="(it,i) in basics" :key="i" :span="8">
<li>
<img :src="it.image" alt="">
<span>{{ it.name }}</span>
</li>
</el-col>
</draggable>
</el-row>
</ul>
</div>
<div class="preview">
<draggable
tag="ul"
class="cardDrag-list-wrap"
v-model="componentList"
:group="groupRight"
animation="300"
@add="handleAdd"
>
<li
class="cardDrag-list"
v-for="item in componentList"
:key="item.id"
>
2
</li>
</draggable>
</div>
<div class="attrs">
<el-divider>基础信息</el-divider>
<el-form size="small" :model="attrs">
<el-form-item prop="label" label="标签">
<el-input v-model="attrs['label']" placeholder="请输入标签"></el-input>
</el-form-item>
<el-form-item prop="default" label="默认值">
<el-input v-model="attrs['default']" placeholder="请输入默认值"></el-input>
</el-form-item>
<el-form-item prop="field" label="字段名称">
<el-input v-model="attrs['field']" placeholder="请输入字段名称"></el-input>
</el-form-item>
<el-form-item prop="placeholder" label="输入提示">
<el-input v-model="attrs['placeholder']" placeholder="请输入输入提示"></el-input>
</el-form-item>
<el-form-item prop="regs" label="正则校验">
<el-button @click="attrs['regs'].push({reg:''})" type="primary" size="mini">添加正则校验</el-button>
<ul class="regs">
<li v-for="(it,i) in attrs['regs']" :key="i">
<el-input v-model="it['reg']" placeholder="请输入正则"></el-input>
<el-button @click="attrs['regs'].splice(i,1)" type="danger" size="mini"
icon="el-icon-delete"></el-button>
</li>
</ul>
</el-form-item>
<el-form-item prop="max" label="最大长度">
<el-input v-model="attrs['max']" placeholder="请输入最大长度"></el-input>
</el-form-item>
<el-form-item prop="required" label="是否必填">
<el-switch v-model="attrs['required']"></el-switch>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.div-form {
width: 100%;
height: 100%;
background-color: white;
padding: 5px 0;
display: flex;
flex-direction: column;
.form-content {
display: flex;
justify-content: space-between;
flex: 1;
flex-shrink: 0;
overflow: hidden;
.attrs {
padding: 10px;
box-shadow: -3px 0 6px rgba(48, 65, 86, .35000000000000003);
background: #fff;
width: 370px;
.regs {
display: flex;
flex-direction: column;
li {
display: flex;
margin-bottom: 5px;
.el-button {
margin-left: 10px;
}
}
}
}
.components {
width: 260px;
height: 100%;
box-shadow: 1px 0 6px 3px rgba(48, 65, 86, .35000000000000003);
background: #fff;
padding: 0 15px;
ul {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
li {
cursor: pointer;
background: #f9f9f9;
border-radius: 4px;
border: 1px solid #ebebeb;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3px;
margin-bottom: 15px;
&:hover {
border: 1px dashed #409eff;
}
img {
width: auto;
height: 45px;
transition: .15s ease-in-out;
}
span {
font-size: 11px;
}
}
}
}
}
.form-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ececec;
padding: 0 15px;
.header-btn {
.el-button {
margin-left: 15px;
}
}
h1 {
font-size: 22px;
font-weight: normal;
}
}
}
</style>
src/router/index.js
......@@ -131,6 +131,12 @@ const routes = [
component: () => import('@/views/operation/lossOrder/index.vue'),
name: 'system_management',
meta: { title: '丢单管理' }
},
{
path: '/dynamicForm',
component: () => import('@/components/dynamicForms/index.vue'),
name: 'system_management',
meta: { title: '动态表单' }
}
]
}
......
src/views/system/app.vue
......@@ -264,6 +264,7 @@
>
</span>
</el-dialog>
</div>
</template>
<script>
......@@ -336,11 +337,11 @@ export default {
},
{
label: '应用简述',
key: 'creatorName'
key: 'creatorName1'
},
{
label: '应用服务期',
key: 'creatorName'
key: 'creatorName2'
},
{
label: '创建时间',
......@@ -348,7 +349,7 @@ export default {
},
{
label: '操作',
width: 100,
width: 150,
render: (item) => (
<div>
<span
......@@ -365,6 +366,14 @@ export default {
>
<i class="el-icon-delete"></i>
</span>
<span
class="icon-view"
style="background:yellowgreen"
title="字段配置"
onClick={() => this.fieldSet(item)}
>
<i class="el-icon-c-scale-to-original"></i>
</span>
</div>
)
}
......@@ -372,6 +381,9 @@ export default {
}
},
methods: {
fieldSet(item) {
this.$router.push('/dynamicForm')
},
handleCheckAllChange(val) {
this.checkedCompany = val
? this.releaseList.map((e) => e.id)
......@@ -580,7 +592,8 @@ export default {
}
}
.el-row{
.el-row {
align-items: center;
}
</style>
src/views/system/dynamicForms.vue 0 → 100644
<script setup>
</script>
<template>
<div class="div-form">
</div>
</template>
<style lang="scss" scoped>
.div-form{
width: 100%;
min-height: 80vh;
}
</style>
vue.config.js
......@@ -6,7 +6,7 @@ module.exports = defineConfig({
host: '',
proxy: {
'/api': {
target: 'http://192.168.31.188:8096',
target: 'http://192.168.31.232:8070',
changeOrigin: true
// 路径重写规则，这里将 /api 开头的请求路径替换为空字符串，即去掉 /api 前缀
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment