elink-star
/
epmet-oper-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

组件管理

dev
yinzuomei 5 years ago
parent
56a8db3b9a
commit
ecb028c8d9
2 changed files with 403 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 209
      epmet-oper-web/src/views/modules/customize/homecomponent-add-or-update.vue
  2. 194
      epmet-oper-web/src/views/modules/customize/homecomponent.vue

209
epmet-oper-web/src/views/modules/customize/homecomponent-add-or-update.vue
View File

@ -0,0 +1,209 @@
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
<el-form-item label="功能" prop="functionId" v-if="true">
<el-select v-model="dataForm.functionId"
placeholder="请选择" clearable>
<el-option v-for="item in functionList"
:key="item.id"
:label="item.functionName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件名称" prop="componentName">
<el-input v-model="dataForm.componentName" placeholder="组件名称"></el-input>
</el-form-item>
<el-form-item label="组件前端标识" prop="componentFrontId">
<el-input v-model="dataForm.componentFrontId" placeholder="例如:gov-titleList-home-gridNameTitle"></el-input>
</el-form-item>
<el-form-item label="所属端" prop="clientType">
<el-select v-model="dataForm.clientType"
placeholder="请选择" clearable>
<el-option v-for="item in clientTypeList"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件类型" prop="conponentType">
<el-select v-model="dataForm.conponentType"
placeholder="请选择" clearable>
<el-option v-for="item in conponentTypeList"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件的适用区域" prop="region">
<el-select v-model="dataForm.region"
placeholder="请选择" clearable>
<el-option v-for="item in regionList"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="高级配置" prop="configuration">
<el-input v-model="dataForm.configuration" placeholder="高级配置" type="textarea"></el-input>
</el-form-item>
<el-form-item label="配置项说明" prop="configurationDescription">
<el-input v-model="dataForm.configurationDescription" placeholder="配置项说明" type="textarea"></el-input>
</el-form-item>
<el-form-item label="演示数据" prop="demoData">
<el-input v-model="dataForm.demoData" placeholder="演示数据" type="textarea"></el-input>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
functionId: '',
componentName: '',
componentFrontId: '',
clientType: '',
conponentType: '',
region: '',
configuration: '',
configurationDescription: '',
demoData: ''
},
clientTypeList: [
{
'dictName': '居民端',
'dictValue': 0
}, {
'dictName': '政府端',
'dictValue': 1
}
],
conponentTypeList: [
{
'dictName': '通用组件',
'dictValue': 0
}, {
'dictName': '功能组件',
'dictValue': 1
}
],
regionList: [
{
'dictName': '标题区',
'dictValue': 'titleList'
}, {
'dictName': '置顶区',
'dictValue': 'topList'
}, {
'dictName': '功能区',
'dictValue': 'functionList'
}, {
'dictName': '悬浮区',
'dictValue': 'floatingList'
}
],
functionList: []
}
},
created () {
this.queryFunctionList()
},
computed: {
dataRule () {
return {
componentName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
componentFrontId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
clientType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
conponentType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
region: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
configuration: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
configurationDescription: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
demoData: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/oper/customize/homecomponent/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/oper/customize/homecomponent/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false }),
queryFunctionList () {
this.$http.get(`/oper/customize/function/queryFunctionList`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.functionList = res.data
}).catch(() => { })
}
}
}
</script>

194
epmet-oper-web/src/views/modules/customize/homecomponent.vue
View File

@ -0,0 +1,194 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-/oper/customize__homecomponent}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="组件名称">
<el-input v-model="dataForm.componentName" placeholder="请输入组件名称模糊匹配" clearable></el-input>
</el-form-item>
<el-form-item label="所属端">
<el-select v-model="dataForm.clientType"
placeholder="全部" clearable>
<el-option v-for="item in clientTypeList"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件类型">
<el-select v-model="dataForm.conponentType"
placeholder="全部" clearable>
<el-option v-for="item in conponentTypeList"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件适用区域">
<el-select v-model="dataForm.region"
placeholder="全部" clearable>
<el-option v-for="item in regionList"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<br>
<el-form-item label="所属功能">
<el-select v-model="dataForm.functionId"
placeholder="全部" clearable>
<el-option v-for="item in functionList"
:key="item.id"
:label="item.functionName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="id" label="唯一标识" header-align="center" align="center" v-if="false"></el-table-column>
<el-table-column prop="componentName" label="组件名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="functionName" label="所属功能" header-align="center" align="center" v-if="true"></el-table-column>
<el-table-column prop="componentFrontId" label="前端标识" header-align="center" align="center"></el-table-column>
<el-table-column prop="clientType" label="所属端" header-align="center" align="center" :formatter="showClientTypeName"></el-table-column>
<el-table-column prop="conponentType" label="组件类型" header-align="center" align="center" :formatter="showConponentTypeName"></el-table-column>
<el-table-column prop="region" label="组件的“适用区域”" header-align="center" align="center" :formatter="showRegionName"></el-table-column>
<el-table-column prop="configuration" label="高级配置" header-align="center" align="center" v-if="false"></el-table-column>
<el-table-column prop="configurationDescription" label="配置项说明" header-align="center" align="center" v-if="false"></el-table-column>
<el-table-column prop="demoData" label="演示数据" header-align="center" align="center" v-if="false"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './homecomponent-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/oper/customize/homecomponent/page',
getDataListIsPage: true,
deleteURL: '/oper/customize/homecomponent',
deleteIsBatch: true
},
dataForm: {
componentName: '',
clientType: '',
conponentType: '',
region: '',
functionId: ''
},
clientTypeList: [
{
'dictName': '居民端',
'dictValue': '0'
}, {
'dictName': '政府端',
'dictValue': '1'
}
],
conponentTypeList: [
{
'dictName': '通用组件',
'dictValue': '0'
}, {
'dictName': '功能组件',
'dictValue': '1'
}
],
regionList: [
{
'dictName': '标题区',
'dictValue': 'titleList'
}, {
'dictName': '置顶区',
'dictValue': 'topList'
}, {
'dictName': '功能区',
'dictValue': 'functionList'
}, {
'dictName': '悬浮区',
'dictValue': 'floatingList'
}
],
functionList: []
}
},
components: {
AddOrUpdate
},
created () {
this.queryFunctionList()
},
methods: {
showClientTypeName: function (row, column) {
let clientType = row.clientType
if (clientType === 0) {
return '居民端'
} else if (clientType === 1) {
return '政府端'
}
},
showConponentTypeName: function (row, column) {
let conponentType = row.conponentType
if (conponentType === 0) {
return '通用组件'
} else if (conponentType === 1) {
return '功能组件'
}
},
showRegionName: function (row, column) {
let region = row.region
if (region === 'titleList') {
return '标题区'
} else if (region === 'topList') {
return '置顶区'
} else if (region === 'functionList') {
return '功能区'
} else if (region === 'floatingList') {
return '悬浮区'
}
},
queryFunctionList () {
this.$http.get(`/oper/customize/function/queryFunctionList`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.functionList = res.data
}).catch(() => { })
}
}
}
</script>
Write Preview
Loading…
Cancel
Save