Skip to content

S
saas-manage
Commit 931ebadf by zhuzhequan
Options

应用中心修改

parent f8065618
Showing with 193 additions and 53 deletions
package.json
......@@ -33,6 +33,7 @@
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"babel-plugin-import": "^1.13.8",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
......
src/common/components/vxeTable.js
import 'xe-utils'
import 'vxe-table/lib/style.css'
import Vue from 'vue'
import {
VXETable,
Table,
Column,
Header,
......@@ -27,10 +29,10 @@ import {
List,
Colgroup,
} from 'vxe-table'
const vxes = [
Column,
Header,
VXETable,
Footer,
Filter,
Edit,
......@@ -56,14 +58,11 @@ const vxes = [
Table,
]
export default {
install(Vue) {
vxes.forEach((v) => {
Vue.use(v)
})
},
export default function vxeTable() {
vxes.forEach((v) => {
Vue.use(v)
})
}
// 给 vue 实例挂载内部对象，例如：
// Vue.prototype.$XModal = VXETable.modal
// Vue.prototype.$XPrint = VXETable.print
......
src/components/dynamicForms/components.js
......@@ -41,7 +41,7 @@ export default [
},
{
name: '级联选择器',
type: 'switch',
type: 'cascader',
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cmVjdCB4PSIuMiIgeT0iMy4yIiB3aWR0aD0iNDcuNiIgaGVpZ2h0PSIxNC42IiByeD0iMy44IiBmaWxsPSIjRkNGQ0ZDIiBzdHJva2U9IiNERURFREUiIHN0cm9rZS13aWR0aD0iMS42Ii8+PHJlY3QgeD0iNCIgeT0iMTUiIHdpZHRoPSI0MyIgaGVpZ2h0PSIyOSIgcng9IjMiIGZpbGw9IiNGQ0ZDRkMiIHN0cm9rZT0iI0RFREVERSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48cGF0aCBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNyAxMWgyTTIwIDExaDkiLz48cGF0aCBzdHJva2U9IiNCRUJFQkUiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xNyA5LjEzMSAxMy4xMzEgMTMiLz48cGF0aCBkPSJNMjQgMzRoMjJ2N2EyIDIgMCAwIDEtMiAySDI0di05WiIgZmlsbD0iI0VDRjVGRCIvPjxwYXRoIHN0cm9rZT0iIzc1NzU3NSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xNyAyMGgxOU0yNiAyOWgxNU0yOCAzOWg4Ii8+PHBhdGggZD0ibTE2IDI4IDIuNSAyIDIuNS0yTTggMTlsMi41IDIgMi41LTJNMzcgMTBsMi41IDIgMi41LTIiIHN0cm9rZT0iI0JFQkVCRSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Im00MCAzOS4zNjEgMS4zNjEgMS4xMzRMNDMuNjMgMzgiIHN0cm9rZT0iIzNDOTJEQyIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoNDh2NDhIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4K'
}
]
src/components/dynamicForms/index.vue
<script>
import basics from './components'
import draggable from 'vuedraggable'
// import uuid from 'uuid'
import * as uuid from 'uuid'
const attrs = {
label: '',
default: '',
regs: [],
options: [
{
label: '选择1',
value: '1'
},
{
label: '选择2',
value: '2'
},
{
label: '选择3',
value: '3'
}
]
}
export default {
data() {
return {
basics,
groupLeft: {
name: 'itxst',
name: 'father',
pull: 'clone',
put: false
},
componentList: [],
groupRight: {
name: 'itxst',
name: 'father',
pull: false,
put: true
},
attrs: {
label: '',
regs: []
}
selectId: null,
oldAttrs: attrs,
attrs: attrs
}
},
components: { draggable },
watch: {
attrs: {
handler() {
if (!this.selectId) return
const index = this.componentList.findIndex(el => el.id === this.selectId)
console.log(index)
this.$set(this.componentList[index], 'attrs', JSON.parse(JSON.stringify(this.attrs)))
console.log(this.componentList)
},
deep: true
}
},
methods: {
cloneItem(li) {
return JSON.parse(JSON.stringify(li))
},
handleStart(li) {
console.log(li)
},
selectItem(li, id) {
console.log(id, 111)
this.selectId = id
this.attrs = li.attrs
},
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)
let item = JSON.parse(JSON.stringify(this.componentList[e.newIndex]))
item = {
...item,
...{
id: uuid.v4(),
attrs: JSON.parse(JSON.stringify(this.oldAttrs))
}
}
this.selectId = item.id
this.$set(this.componentList, e.newIndex, item)
this.attrs = item.attrs
}
}
}
......@@ -46,7 +91,6 @@ export default {
<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>
......@@ -56,9 +100,11 @@ export default {
<el-row :gutter="20">
<draggable
tag="ul"
:sort="false"
class="cardDrag-list-wrap"
v-model="basics"
:group="groupLeft"
:clone="cloneItem"
animation="300"
>
......@@ -74,27 +120,54 @@ export default {
</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"
<el-form size="small">
<draggable
class="cardDrag-list-wrap"
v-model="componentList"
:group="groupRight"
animation="300"
@start="handleStart"
@add="handleAdd"
>
2
</li>
</draggable>
<el-form-item
class="cardDrag-list"
:class="{'select-li':item.id===selectId}"
:label="item.attrs?item.attrs.label:''"
v-for="item in componentList"
:key="item.id"
>
<div @click.stop="selectItem(item,item.id)" :class="item.type" class="component-li">
<el-input v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" clearable
v-if="item.type==='input'"></el-input>
<el-input v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" clearable type="textarea"
v-if="item.type==='textarea'"></el-input>
<el-select v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" clearable filterable
v-if="item.type==='select'">
<el-option :label="it.label" :value="it.value" :key="i"
v-for="(it,i) in item.attrs.options"></el-option>
</el-select>
<el-checkbox-group v-model="item.attrs['default']" v-if="item.type==='checkGroup'">
<el-checkbox :label="it.value" :key="i" v-for="(it,i) in item.attrs.options">{{ it.label }}
</el-checkbox>
</el-checkbox-group>
<el-radio-group v-model="item.attrs['default']" v-if="item.type==='radioGroup'">
<el-radio :label="it.label" :name="it.value" :key="i" v-for="(it,i) in item.attrs.options"></el-radio>
</el-radio-group>
<el-date-picker v-model="item.attrs['default']" style="width: 100%;" :placeholder="item.attrs.placeholder" :type="item.type"
v-if="item.type.includes('date')"></el-date-picker>
<el-switch v-model="item.attrs['default']" v-if="item.type==='switch'"></el-switch>
<el-cascader v-model="item.attrs['default']" style="width: 100%;" filterable :placeholder="item.attrs.placeholder"
v-if="item.type==='cascader'" :options="item.options"></el-cascader>
</div>
</el-form-item>
</draggable>
</el-form>
</div>
<div class="attrs">
<div class="attrs" v-if="selectId">
<el-divider>基础信息</el-divider>
<el-form size="small" :model="attrs">
<el-form label-width="90px" label-position="top" size="small" :model="attrs">
<el-form-item prop="label" label="标签">
<el-input v-model="attrs['label']" placeholder="请输入标签"></el-input>
</el-form-item>
......@@ -108,14 +181,19 @@ export default {
<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>
<div class="flex-column">
<el-button style="width: 100px;margin-bottom: 10px" @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>
</div>
</el-form-item>
<el-form-item prop="max" label="最大长度">
<el-input v-model="attrs['max']" placeholder="请输入最大长度"></el-input>
......@@ -167,11 +245,10 @@ export default {
}
.components {
width: 260px;
width: 284px;
height: 100%;
box-shadow: 1px 0 6px 3px rgba(48, 65, 86, .35000000000000003);
background: #fff;
padding: 0 15px;
ul {
display: flex;
......@@ -228,4 +305,64 @@ export default {
}
}
}
.cardDrag-list-wrap {
margin: 20px;
}
::v-deep .el-form-item__content {
display: flex;
align-items: center;
.el-icon-rank {
font-weight: bold;
font-size: 16px;
color: rgb(21, 101, 192);
}
}
.component-li {
flex: 1;
flex-shrink: 0;
}
.preview, .cardDrag-list-wrap {
flex: 1;
flex-shrink: 0;
overflow: hidden;
.el-form {
width: 100%;
height: 100%;
overflow: hidden;
.el-form-item {
margin-bottom: 10px !important;
padding: 0 10px;
cursor: pointer;
}
.cardDrag-list-wrap {
height: 100%;
}
}
.component-li {
padding: 5px;
box-sizing: border-box;
display: flex;
align-items: center;
}
}
.select-li {
border: 2px dashed rgb(21, 101, 192);
}
.flex-column {
display: flex;
flex-direction: column;
}
</style>
src/main.js
......@@ -4,7 +4,10 @@ import router from './router'
import store from './store'
import './plugins/myui'
import element from '@/common/components/element-ui.js'
import vxeTable from '@/common/components/vxeTable.js'
// import vxeTable from '@/common/components/vxeTable.js'
import vxeTable from 'vxe-table'
import 'xe-utils'
import 'vxe-table/lib/index.css'
import './common/style/index.scss'
import './assets/css/common.css'
import Directives from './utils/directives'
......
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