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 @@ ...@@ -33,6 +33,7 @@
"@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0", "@vue/eslint-config-standard": "^6.1.0",
"babel-plugin-import": "^1.13.8",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3", "eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
......
src/common/components/vxeTable.js
import 'xe-utils' import 'xe-utils'
import 'vxe-table/lib/style.css' import 'vxe-table/lib/style.css'
import Vue from 'vue'
import { import {
VXETable,
Table, Table,
Column, Column,
Header, Header,
...@@ -27,10 +29,10 @@ import { ...@@ -27,10 +29,10 @@ import {
List, List,
Colgroup, Colgroup,
} from 'vxe-table' } from 'vxe-table'
const vxes = [ const vxes = [
Column, Column,
Header, Header,
VXETable,
Footer, Footer,
Filter, Filter,
Edit, Edit,
...@@ -56,14 +58,11 @@ const vxes = [ ...@@ -56,14 +58,11 @@ const vxes = [
Table, Table,
] ]
export default { export default function vxeTable() {
install(Vue) { vxes.forEach((v) => {
vxes.forEach((v) => { Vue.use(v)
Vue.use(v) })
})
},
} }
// 给 vue 实例挂载内部对象，例如： // 给 vue 实例挂载内部对象，例如：
// Vue.prototype.$XModal = VXETable.modal // Vue.prototype.$XModal = VXETable.modal
// Vue.prototype.$XPrint = VXETable.print // Vue.prototype.$XPrint = VXETable.print
......
src/components/dynamicForms/components.js
...@@ -41,7 +41,7 @@ export default [ ...@@ -41,7 +41,7 @@ export default [
}, },
{ {
name: '级联选择器', name: '级联选择器',
type: 'switch', type: 'cascader',
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cmVjdCB4PSIuMiIgeT0iMy4yIiB3aWR0aD0iNDcuNiIgaGVpZ2h0PSIxNC42IiByeD0iMy44IiBmaWxsPSIjRkNGQ0ZDIiBzdHJva2U9IiNERURFREUiIHN0cm9rZS13aWR0aD0iMS42Ii8+PHJlY3QgeD0iNCIgeT0iMTUiIHdpZHRoPSI0MyIgaGVpZ2h0PSIyOSIgcng9IjMiIGZpbGw9IiNGQ0ZDRkMiIHN0cm9rZT0iI0RFREVERSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48cGF0aCBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNyAxMWgyTTIwIDExaDkiLz48cGF0aCBzdHJva2U9IiNCRUJFQkUiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xNyA5LjEzMSAxMy4xMzEgMTMiLz48cGF0aCBkPSJNMjQgMzRoMjJ2N2EyIDIgMCAwIDEtMiAySDI0di05WiIgZmlsbD0iI0VDRjVGRCIvPjxwYXRoIHN0cm9rZT0iIzc1NzU3NSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xNyAyMGgxOU0yNiAyOWgxNU0yOCAzOWg4Ii8+PHBhdGggZD0ibTE2IDI4IDIuNSAyIDIuNS0yTTggMTlsMi41IDIgMi41LTJNMzcgMTBsMi41IDIgMi41LTIiIHN0cm9rZT0iI0JFQkVCRSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Im00MCAzOS4zNjEgMS4zNjEgMS4xMzRMNDMuNjMgMzgiIHN0cm9rZT0iIzNDOTJEQyIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoNDh2NDhIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4K' image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cmVjdCB4PSIuMiIgeT0iMy4yIiB3aWR0aD0iNDcuNiIgaGVpZ2h0PSIxNC42IiByeD0iMy44IiBmaWxsPSIjRkNGQ0ZDIiBzdHJva2U9IiNERURFREUiIHN0cm9rZS13aWR0aD0iMS42Ii8+PHJlY3QgeD0iNCIgeT0iMTUiIHdpZHRoPSI0MyIgaGVpZ2h0PSIyOSIgcng9IjMiIGZpbGw9IiNGQ0ZDRkMiIHN0cm9rZT0iI0RFREVERSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48cGF0aCBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNyAxMWgyTTIwIDExaDkiLz48cGF0aCBzdHJva2U9IiNCRUJFQkUiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xNyA5LjEzMSAxMy4xMzEgMTMiLz48cGF0aCBkPSJNMjQgMzRoMjJ2N2EyIDIgMCAwIDEtMiAySDI0di05WiIgZmlsbD0iI0VDRjVGRCIvPjxwYXRoIHN0cm9rZT0iIzc1NzU3NSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xNyAyMGgxOU0yNiAyOWgxNU0yOCAzOWg4Ii8+PHBhdGggZD0ibTE2IDI4IDIuNSAyIDIuNS0yTTggMTlsMi41IDIgMi41LTJNMzcgMTBsMi41IDIgMi41LTIiIHN0cm9rZT0iI0JFQkVCRSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Im00MCAzOS4zNjEgMS4zNjEgMS4xMzRMNDMuNjMgMzgiIHN0cm9rZT0iIzNDOTJEQyIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoNDh2NDhIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4K'
} }
] ]
src/components/dynamicForms/index.vue
<script> <script>
import basics from './components' import basics from './components'
import draggable from 'vuedraggable' 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 { export default {
data() { data() {
return { return {
basics, basics,
groupLeft: { groupLeft: {
name: 'itxst', name: 'father',
pull: 'clone', pull: 'clone',
put: false put: false
}, },
componentList: [], componentList: [],
groupRight: { groupRight: {
name: 'itxst', name: 'father',
pull: false, pull: false,
put: true put: true
}, },
attrs: { selectId: null,
label: '', oldAttrs: attrs,
regs: [] attrs: attrs
}
} }
}, },
components: { draggable }, 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: { 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) { handleAdd(e) {
// console.log(uuid) let item = JSON.parse(JSON.stringify(this.componentList[e.newIndex]))
const newIndex = e.newIndex item = {
// 深拷贝 ...item,
const newCard = JSON.parse(JSON.stringify(this.componentList[newIndex])) ...{
// newCard.id = uuid() id: uuid.v4(),
newCard.orderId = this.cardId attrs: JSON.parse(JSON.stringify(this.oldAttrs))
this.cardId = this.cardId + 1 }
this.$set(this.componentList, newIndex, newCard)
}
this.selectId = item.id
this.$set(this.componentList, e.newIndex, item)
this.attrs = item.attrs
} }
} }
} }
...@@ -46,7 +91,6 @@ export default { ...@@ -46,7 +91,6 @@ export default {
<h1>{{ $route.meta.title }}</h1> <h1>{{ $route.meta.title }}</h1>
<div class="header-btn"> <div class="header-btn">
<el-button icon="el-icon-delete" type="text">清空</el-button> <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> <el-button icon="el-icon-check" type="text">保存</el-button>
</div> </div>
</div> </div>
...@@ -56,9 +100,11 @@ export default { ...@@ -56,9 +100,11 @@ export default {
<el-row :gutter="20"> <el-row :gutter="20">
<draggable <draggable
tag="ul" tag="ul"
:sort="false"
class="cardDrag-list-wrap" class="cardDrag-list-wrap"
v-model="basics" v-model="basics"
:group="groupLeft" :group="groupLeft"
:clone="cloneItem"
animation="300" animation="300"
> >
...@@ -74,27 +120,54 @@ export default { ...@@ -74,27 +120,54 @@ export default {
</ul> </ul>
</div> </div>
<div class="preview"> <div class="preview">
<draggable <el-form size="small">
tag="ul" <draggable
class="cardDrag-list-wrap" class="cardDrag-list-wrap"
v-model="componentList" v-model="componentList"
:group="groupRight" :group="groupRight"
animation="300" animation="300"
@add="handleAdd" @start="handleStart"
> @add="handleAdd"
<li
class="cardDrag-list"
v-for="item in componentList"
:key="item.id"
> >
2 <el-form-item
</li> class="cardDrag-list"
</draggable> :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>
<div class="attrs"> <div class="attrs" v-if="selectId">
<el-divider>基础信息</el-divider> <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-form-item prop="label" label="标签">
<el-input v-model="attrs['label']" placeholder="请输入标签"></el-input> <el-input v-model="attrs['label']" placeholder="请输入标签"></el-input>
</el-form-item> </el-form-item>
...@@ -108,14 +181,19 @@ export default { ...@@ -108,14 +181,19 @@ export default {
<el-input v-model="attrs['placeholder']" placeholder="请输入输入提示"></el-input> <el-input v-model="attrs['placeholder']" placeholder="请输入输入提示"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="regs" label="正则校验"> <el-form-item prop="regs" label="正则校验">
<el-button @click="attrs['regs'].push({reg:''})" type="primary" size="mini">添加正则校验</el-button> <div class="flex-column">
<ul class="regs"> <el-button style="width: 100px;margin-bottom: 10px" @click="attrs['regs'].push({reg:''})" type="primary"
<li v-for="(it,i) in attrs['regs']" :key="i"> size="mini">添加正则校验
<el-input v-model="it['reg']" placeholder="请输入正则"></el-input> </el-button>
<el-button @click="attrs['regs'].splice(i,1)" type="danger" size="mini" <ul class="regs">
icon="el-icon-delete"></el-button> <li v-for="(it,i) in attrs['regs']" :key="i">
</li> <el-input v-model="it['reg']" placeholder="请输入正则"></el-input>
</ul> <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>
<el-form-item prop="max" label="最大长度"> <el-form-item prop="max" label="最大长度">
<el-input v-model="attrs['max']" placeholder="请输入最大长度"></el-input> <el-input v-model="attrs['max']" placeholder="请输入最大长度"></el-input>
...@@ -167,11 +245,10 @@ export default { ...@@ -167,11 +245,10 @@ export default {
} }
.components { .components {
width: 260px; width: 284px;
height: 100%; height: 100%;
box-shadow: 1px 0 6px 3px rgba(48, 65, 86, .35000000000000003); box-shadow: 1px 0 6px 3px rgba(48, 65, 86, .35000000000000003);
background: #fff; background: #fff;
padding: 0 15px;
ul { ul {
display: flex; display: flex;
...@@ -228,4 +305,64 @@ export default { ...@@ -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> </style>
src/main.js
...@@ -4,7 +4,10 @@ import router from './router' ...@@ -4,7 +4,10 @@ import router from './router'
import store from './store' import store from './store'
import './plugins/myui' import './plugins/myui'
import element from '@/common/components/element-ui.js' 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 './common/style/index.scss'
import './assets/css/common.css' import './assets/css/common.css'
import Directives from './utils/directives' 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