elink-star
/
esua-epdc-admin-js
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

了解锦水 - 模块管理、硬核 页面开发

feature/syp_points
zhangyongzhangyong 5 years ago
parent
f4fa3f9070
commit
db9e9563ef
5 changed files with 518 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      src/views/modules/custom/deptinfo-add-or-update.vue
  2. 67
      src/views/modules/custom/deptinfo.vue
  3. 217
      src/views/modules/custom/module-add-or-update.vue
  4. 103
      src/views/modules/custom/module.vue
  5. 2
      src/views/modules/news/notice-add-or-update.vue

130
src/views/modules/custom/deptinfo-add-or-update.vue
View File

@ -0,0 +1,130 @@
<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' : '80px'">
<el-form-item label="部门名称" prop="deptId">
<el-cascader
ref="name"
v-model="dataForm.deptId"
:options="options"
:props="{ checkStrictly: true }"
@change="changeHandle"
clearable
collapse-tags
style="width:50%"
:disabled="disabledDeptName">
</el-cascader>
</el-form-item>
<el-form-item label="部门电话" prop="mobile">
<el-input v-model="dataForm.mobile" placeholder="部门电话" style="width:50%"></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: '',
deptName: '',
deptId: '',
mobile: '',
delFlag: '',
revision: '',
createdBy: '',
createdTime: '',
updatedBy: '',
updatedTime: '',
streetId: '',
communityId: '',
gridId: ''
},
ids: [],
options: [],
disabledDeptName: false
}
},
computed: {
dataRule () {
return {
deptId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
mobile: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ pattern: /^0{0,1}(13[0-9]|15[0-9]|153|156|(17[0-9])|18[7-9])[0-9]{8}$|^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
]
}
}
},
created () {
this.$http
.get(`/sys/user/deptOptions/getAllByLoginUser`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.options = res.data.options
})
.catch(() => { })
},
methods: {
changeHandle (value, selectedData) {
this.dataForm.deptName = this.$refs['name'].getCheckedNodes()[0].label
this.dataForm.deptId = this.$refs['name'].getCheckedNodes()[0].value
},
init () {
this.visible = true
this.disabledDeptName = false
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.disabledDeptName = true
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/custom/deptinfo/${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']('/custom/deptinfo/', 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 })
}
}
</script>

67
src/views/modules/custom/deptinfo.vue
View File

@ -0,0 +1,67 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-custom__deptinfo}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.deptName" placeholder="部门名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="$hasPermission('custom:deptinfo:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="$hasPermission('custom:deptinfo:delete')" 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="deptName" label="部门名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="mobile" label="部门电话" header-align="center" align="center"></el-table-column>
<el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button v-if="$hasPermission('custom:deptinfo:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button v-if="$hasPermission('custom:deptinfo:delete')" 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 './deptinfo-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/custom/deptinfo/page',
getDataListIsPage: true,
deleteURL: '/custom/deptinfo',
deleteIsBatch: true
},
dataForm: {
id: ''
}
}
},
components: {
AddOrUpdate
}
}
</script>

217
src/views/modules/custom/module-add-or-update.vue
View File

@ -0,0 +1,217 @@
<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' : '80px'">
<el-form-item label="模块名称" prop="moduleCode">
<el-select v-model="dataForm.moduleCode" placeholder="请选择模块" filterable collapse-tags @change="changeHandle($event)" :disabled="disabledModuleName">
<el-option
v-for="item in optionModuleName"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-row>
<el-form-item label="模块图片"
v-loading="loading" prop="imgUrl">
<el-upload class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarActSuccess"
:on-error="handelError"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.imgUrl"
:src="dataForm.imgUrl"
class="avatar">
<i v-else
class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip"
class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-row>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="dataForm.sort" placeholder="排序"></el-input-number>
</el-form-item>
<el-form-item label="启用标识" prop="enableFlag">
<el-select v-model="dataForm.enableFlag" placeholder="请选择是否启用">
<el-option
v-for="item in isEnableFlag"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" placeholder="备注" maxlength="200" show-word-limit></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 Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
moduleCode: '',
name: '',
imgUrl: '',
sort: '',
enableFlag: '',
remark: '',
delFlag: '',
revision: '',
createdBy: '',
createdTime: '',
updatedBy: '',
updatedTime: ''
},
isEnableFlag: [{
value: '0',
label: '否'
}, {
value: '1',
label: '是'
}],
// 模块总数名称
optionModuleName: [],
// 图片
loading: false,
uploadUrl: '',
disabledModuleName: false
}
},
computed: {
dataRule () {
return {
moduleCode: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
imgUrl: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
sort: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
enableFlag: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
created () {
this.getListSimpleByDictType()
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
this.dataForm.imgUrl = ''
},
methods: {
init () {
this.visible = true
this.disabledModuleName = false
this.dataForm.imgUrl = ''
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.disabledModuleName = true
this.getInfo()
}
})
},
changeHandle (value) {
let obj = {}
obj = this.optionModuleName.find((item) => {
return item.dictValue === value
})
this.dataForm.name = obj.dictName
},
// 获取信息
getInfo () {
this.$http.get(`/custom/module/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
handleAvatarActSuccess (res, file) {
this.loading = false
this.dataForm.imgUrl = res.data.url
},
beforeAvatarUpload (file) {
this.loading = true
},
handelError () {
this.loading = false
},
// 获取模块名称[参数：moduleType]
getListSimpleByDictType () {
this.$http.get(`/custom/module/listSimple/moduleType`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.optionModuleName = res.data
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/custom/module/', 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 })
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

103
src/views/modules/custom/module.vue
View File

@ -0,0 +1,103 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-custom__module}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.moduleCode" placeholder="模块编码" clearable></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="dataForm.name" placeholder="模块名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="$hasPermission('custom:module:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="$hasPermission('custom:module:delete')" 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="moduleCode" label="模块编码" header-align="center" align="center"></el-table-column>
<el-table-column prop="name" label="模块名称" header-align="center" align="center"></el-table-column>
<el-table-column align="center" label="模块图片" :show-overflow-tooltip="true" prop="imgUrl">
<template slot-scope="scope">
<el-popover placement="right"
title=""
trigger="click"
class="big_image">
<el-image slot="reference"
min-width="70"
height="70"
:src="scope.row.imgUrl"
:alt="scope.row.imgUrl"></el-image>
<img class="big_image"
:src="scope.row.imgUrl" />
</el-popover>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
<el-table-column prop="enableFlag" label="启用标识" :formatter="showFlagFormatter" header-align="center" align="center"></el-table-column>
<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button v-if="$hasPermission('custom:module:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button v-if="$hasPermission('custom:module:delete')" 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 './module-add-or-update'
import 'element-ui/lib/theme-chalk/image.css'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/custom/module/page',
getDataListIsPage: true,
deleteURL: '/custom/module',
deleteIsBatch: true
},
dataForm: {
id: ''
}
}
},
methods: {
showFlagFormatter: function (row, column) {
if (row.enableFlag === '0') {
return '否'
}
return '是'
}
},
components: {
AddOrUpdate
}
}
</script>
<style scoped>
.big_image {
width: 300px;
height: 240px;
}
</style>

2
src/views/modules/news/notice-add-or-update.vue
View File

@ -366,4 +366,4 @@ export default {
height: 178px; height: 178px;
display: block; display: block;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save