1
This commit is contained in:
61
src/views/index.js
Normal file
61
src/views/index.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import HomePage from './home/index.vue'
|
||||
|
||||
import SysLog from './system/sys_log.vue'
|
||||
import SysParamSetup from './system/sys_param_setup.vue'
|
||||
import SysRole from './system/sys_role.vue'
|
||||
import SysUser from './system/sys_user.vue'
|
||||
|
||||
import SysControl from './system/sys_control.vue'
|
||||
import SysMenu from './system/sys_menu.vue'
|
||||
import SysTitle from './system/sys_title.vue'
|
||||
|
||||
import LoginPage from './login/login.vue'
|
||||
|
||||
import Page401 from './error-page/401.vue'
|
||||
import Page404 from './error-page/404.vue'
|
||||
import Page500 from './error-page/500.vue'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 设置组件映射的方法
|
||||
export function setupComponentMap(customMap = {}, uiTool) {
|
||||
const componentMap = {
|
||||
'home/index': HomePage,
|
||||
'system/sys_log': SysLog,
|
||||
'system/sys_param_setup': SysParamSetup,
|
||||
'system/sys_role': SysRole,
|
||||
'system/sys_user': SysUser,
|
||||
'system/sys_control': SysControl,
|
||||
'system/sys_menu': SysMenu,
|
||||
'system/sys_title': SysTitle,
|
||||
...customMap
|
||||
}
|
||||
|
||||
const map = {}
|
||||
Object.keys(componentMap).forEach(path => {
|
||||
const cleanPath = path.replace(/\.vue$/, '')
|
||||
map[cleanPath] = componentMap[path]
|
||||
map[cleanPath + '.vue'] = componentMap[path]
|
||||
})
|
||||
|
||||
uiTool.setComponentMap(map)
|
||||
}
|
||||
|
||||
export default {
|
||||
HomePage,
|
||||
SysLog,
|
||||
SysParamSetup,
|
||||
SysRole,
|
||||
SysUser,
|
||||
SysControl,
|
||||
SysMenu,
|
||||
SysTitle,
|
||||
LoginPage,
|
||||
Page401,
|
||||
Page404,
|
||||
Page500,
|
||||
setupComponentMap
|
||||
}
|
||||
@@ -21,8 +21,8 @@
|
||||
<script>
|
||||
import tools from '@/utils/tools'
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import modelServer from '@/api/system_high/modelServer.js'
|
||||
import sysControlTypeServer from '@/api/system_high/sysControlTypeServer.js'
|
||||
import modelServer from '@/api/system/modelServer.js'
|
||||
import sysControlTypeServer from '@/api/system/sysControlTypeServer.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -46,7 +46,7 @@
|
||||
|
||||
<script>
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import menuServer from '@/api/system_high/menuServer'
|
||||
import menuServer from '@/api/system/menuServer'
|
||||
|
||||
export default {
|
||||
name: 'tree_table_page',
|
||||
@@ -15,7 +15,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import paramSetupServer from '@/api/system_high/paramSetupServer'
|
||||
import paramSetupServer from '@/api/system/paramSetupServer'
|
||||
|
||||
export default {
|
||||
name: 'tables_page',
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<script>
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import roleServer from '@/api/system/roleServer'
|
||||
import menuServer from '@/api/system_high/menuServer'
|
||||
import menuServer from '@/api/system/menuServer'
|
||||
|
||||
export default {
|
||||
name: 'tables_page',
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import paramSetupServer from '@/api/system_high/paramSetupServer'
|
||||
import paramSetupServer from '@/api/system/paramSetupServer'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<Select @on-change="changeInput" :value="value">
|
||||
<Option v-for="item in source" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
source: [
|
||||
{ key: 'STRING', value: '字符串-STRING' },
|
||||
{ key: 'TEXT', value: '富文本-TEXT' },
|
||||
{ key: 'JSON', value: 'JSON' },
|
||||
{ key: 'INTEGER', value: '整型-INTEGER' },
|
||||
{ key: 'BOOLEAN', value: '布尔值-BOOLEAN' },
|
||||
{ key: 'DOUBLE', value: '双精度浮点数-DOUBLE' },
|
||||
{ key: 'DATE', value: '日期-DATE' },
|
||||
{ key: 'ENUM', value: '枚举-ENUM' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeInput(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,251 +0,0 @@
|
||||
<template>
|
||||
<Card class="pa5" dis-hover v-if="value">
|
||||
<Select :value="value.comType" @on-change="changeComType">
|
||||
<Option v-for="item in sourceCom" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<div style="width:100%;" v-if="value.comType==='Select'|| value.comType==='Radio'|| value.comType==='Checkbox'">
|
||||
|
||||
<div class="select-form ">
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5"> 数据源类型</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
<RadioGroup :value="value.interfaceType" @on-change="changeInterfaceType">
|
||||
<Radio :label="item.key" :key="item.key" v-for="item in sourceType">
|
||||
<span>{{ item.value }}</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="value.interfaceType==='接口'">
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5">选择model</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
|
||||
<Select :value="value.modelKey" placeholder="请选择model" @on-change="changeModel">
|
||||
<Option v-for="item in modelRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5">key(映射)</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
<Select :value="value.modelMap.key" placeholder="请选择字段" @on-change="changeKey">
|
||||
<Option v-for="item in fieldRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5">value(映射)</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
<Select :value="value.modelMap.value" placeholder="请选择字段" @on-change="changeValue">
|
||||
<Option v-for="item in fieldRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="bd tag-box">
|
||||
<Tag v-for="item in value.localData" :key="item.key" :name="item.name" closable @on-close="handleClose(item.key)">{{ item.key+':'+item.value }}</Tag>
|
||||
</div>
|
||||
|
||||
<div class="mt5">
|
||||
<Input :max="10" :min="1" v-model="localVal.key" type="number" size="small" placeholder="输入key" style="width: 60px"></Input>
|
||||
<Input class="ml5" v-model="localVal.value" size="small" placeholder="输入value" style="width: 80px" />
|
||||
<Button class="ml10" size="small" @click="handleAdd">添加数据</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modelServer from '@/api/system_high/modelServer'
|
||||
import modelFieldServer from '@/api/system_high/modelFieldServer'
|
||||
|
||||
export default {
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
localData: [],
|
||||
localVal: { key: 0, value: '' },
|
||||
sourceCom: [
|
||||
{ key: 'Input', value: '文本输入框-Input', default_option: { data_type: 'STRING', data_length: 50 } },
|
||||
{ key: 'TextArea', value: '文本区域框-TextArea', default_option: { data_type: 'STRING', data_length: 500 } },
|
||||
{ key: 'InputNumber', value: '数字输入框-InputNumber', default_option: { data_type: 'INTEGER', data_length: 11, defaultValue: 0 } },
|
||||
{ key: 'i-switch', value: '开关-Switch', default_option: { data_type: 'BOOLEAN', data_length: 2 } },
|
||||
{ key: 'Radio', value: '单选框-Radio', default_option: { data_type: 'INTEGER', data_length: 2 } },
|
||||
{ key: 'Select', value: '下拉选择器-Select', default_option: { data_type: 'STRING', data_length: 50 } },
|
||||
{ key: 'Checkbox', value: '多选框-Checkbox', default_option: { data_type: 'INTEGER', data_length: 11 } },
|
||||
{ key: 'DatePicker', value: '日期选择器-DatePicker', default_option: { data_type: 'DATE', data_length: 50 } },
|
||||
{ key: 'Editor', value: '富文本-Editor', default_option: { data_type: 'TEXT', data_length: 0 } },
|
||||
{ key: 'UploadSingle', value: '图片框-UploadSingle', default_option: { data_type: 'STRING', data_length: 1000 } }
|
||||
],
|
||||
sourceType: [
|
||||
{ key: '接口', value: '接口' },
|
||||
{ key: '本地数据', value: '本地数据' }
|
||||
],
|
||||
modelRows: [],
|
||||
fieldRows: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
comType() {
|
||||
return this.value.comType
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
await this.getModel()
|
||||
await this.getField()
|
||||
},
|
||||
handleClose(key) {
|
||||
const index = this.localData.findIndex((p) => p.key === key)
|
||||
this.localData.splice(index, 1)
|
||||
let { comType, localData } = this
|
||||
let newVal = Object.assign({}, this.value, { comType, localData })
|
||||
this.$emit('input', newVal)
|
||||
},
|
||||
handleAdd() {
|
||||
if ((this.localVal.key || this.localVal.key === 0) && this.localVal.value) {
|
||||
const index = this.localData.findIndex((p) => p.key === this.localVal.key)
|
||||
if (index === -1) {
|
||||
this.localData.push(this.localVal)
|
||||
let { comType, localData } = this
|
||||
let newVal = Object.assign({}, this.value, { comType, localData })
|
||||
this.$emit('input', newVal)
|
||||
this.localVal = { key: this.localData.length, value: '' }
|
||||
} else {
|
||||
this.$Message.error('不能添加重复项')
|
||||
}
|
||||
} else {
|
||||
this.$Message.error('请输入值')
|
||||
}
|
||||
},
|
||||
|
||||
async getField() {
|
||||
this.$nextTick(async () => {
|
||||
if (this.value) {
|
||||
let key = this.value.modelKey
|
||||
if (key) {
|
||||
let res = await modelFieldServer.allByKey({ key })
|
||||
let data = res.data.map((p) => {
|
||||
let { key, name } = p
|
||||
return { key, value: key }
|
||||
})
|
||||
|
||||
this.fieldRows = [{ key: 'id', value: 'id' }, ...data]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async getModel() {
|
||||
let res = await modelServer.all()
|
||||
this.modelRows = res.data.map((p) => {
|
||||
let { key, name } = p
|
||||
return { key, value: key + '-' + name }
|
||||
})
|
||||
},
|
||||
|
||||
changeComType(val) {
|
||||
let remoteKeys = ['Select', 'Radio', 'Checkbox']
|
||||
let newRow = { comType: val }
|
||||
if (remoteKeys.indexOf(val) > -1) {
|
||||
newRow = Object.assign(newRow, { interfaceType: '接口', modelKey: '', modelMap: { key: 'id', value: 'name' } })
|
||||
}
|
||||
|
||||
this.$emit('input', newRow)
|
||||
let com = this.sourceCom.find((p) => p.key === val)
|
||||
if (com && com.default_option) {
|
||||
this.$emit('changeOption', com.default_option)
|
||||
}
|
||||
},
|
||||
changeModel(val) {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { modelKey: val })
|
||||
this.$emit('input', newRow)
|
||||
this.getField()
|
||||
},
|
||||
|
||||
changeInterfaceType(val) {
|
||||
if (val === '接口') {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { interfaceType: val })
|
||||
this.$emit('input', newRow)
|
||||
} else {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { interfaceType: val })
|
||||
console.log(newRow, val)
|
||||
this.$emit('input', newRow)
|
||||
}
|
||||
},
|
||||
changeKey(val) {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value)
|
||||
newRow.modelMap.key = val
|
||||
this.$emit('input', newRow)
|
||||
},
|
||||
changeValue(val) {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value)
|
||||
newRow.modelMap.value = val
|
||||
this.$emit('input', newRow)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.select-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.select-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10px 0px;
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
width: 100px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.item-com {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.bd {
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user