jiangyy
4 years ago
8 changed files with 1342 additions and 2 deletions
@ -0,0 +1,36 @@ |
|||
export default [ |
|||
{ |
|||
key: 'categoryName', |
|||
title: '分类', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 120 |
|||
}, |
|||
{ |
|||
key: 'title', |
|||
title: '标题', |
|||
type: 'input', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 150 |
|||
}, |
|||
{ |
|||
key: 'updatedTime', |
|||
title: '更新时间', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 80 |
|||
}, |
|||
{ |
|||
key: 'createdName', |
|||
title: '创建人', |
|||
type: 'input', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 80 |
|||
} |
|||
] |
|||
@ -0,0 +1,462 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div class="div_btn"> |
|||
|
|||
<el-button type="default" |
|||
size="mini" |
|||
@click="diaCancel">取消返回</el-button> |
|||
<el-button v-if="formType!='D'" |
|||
type="primary" |
|||
size="mini" |
|||
@click="saveForm">保存发布</el-button> |
|||
|
|||
</div> |
|||
<div class="div_content"> |
|||
<el-form :inline="true" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
:disabled="formType=='D'" |
|||
:label-width="'120px'"> |
|||
<el-form-item label="标题" |
|||
prop="title"> |
|||
<el-input class="item_width_1" |
|||
v-model="dataForm.title" |
|||
placeholder="标题"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="分类" |
|||
prop="type"> |
|||
<el-select class="item_width_1" |
|||
v-model="dataForm.categoryId" |
|||
placeholder="请选择"> |
|||
<el-option v-for="item in categoryList" |
|||
:key="item.categoryId" |
|||
:label="item.categoryName" |
|||
:value="item.categoryId"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="发布单位" |
|||
prop="unit"> |
|||
<el-select class="item_width_1" |
|||
v-model="dataForm.orgId" |
|||
placeholder="请选择"> |
|||
<el-option v-for="(item,index) in orgList" |
|||
@click.native="orgChange(index)" |
|||
:key="item.orgId" |
|||
:label="item.orgName" |
|||
:value="item.orgId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<div class="div_editor"> |
|||
<el-tabs v-model="activeName" |
|||
@tab-click="tabClick"> |
|||
<el-tab-pane style="height:500px" |
|||
v-for="item in moduleArray" |
|||
:key="item.moduleId" |
|||
:label="item.moduleName" |
|||
:name="item.moduleId"> |
|||
<quill-editor :ref="'text'+item.moduleId" |
|||
:disabled="formType=='D'" |
|||
class="ql-container" |
|||
:options="item.editorOption" |
|||
@change="onEditorChange" /> |
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
</div> |
|||
|
|||
<el-form :inline="true" |
|||
:model="externalLink" |
|||
ref="externalLink" |
|||
:disabled="formType=='D'" |
|||
:label-width="'120px'"> |
|||
|
|||
<el-form-item label="外链地址" |
|||
prop="externalLink"> |
|||
<el-input class="item_width_1" |
|||
v-model="externalLink.externalLink" |
|||
placeholder="外链地址"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="地址说明" |
|||
prop="description"> |
|||
<el-input class="item_width_1" |
|||
v-model="externalLink.description" |
|||
placeholder="地址说明"></el-input> |
|||
</el-form-item> |
|||
<div> |
|||
<el-form-item class="block" |
|||
label="附件" |
|||
prop="attach"> |
|||
<el-upload class="upload-demo" |
|||
:action="uploadUlr" |
|||
:on-success="handleAvatarSuccess" |
|||
:on-change="handleChange" |
|||
:file-list="fileList"> |
|||
<el-button size="small" |
|||
type="primary">点击上传</el-button> |
|||
<div slot="tip" |
|||
class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
import 'quill/dist/quill.core.css' |
|||
import 'quill/dist/quill.snow.css' |
|||
import 'quill/dist/quill.bubble.css' |
|||
|
|||
import { quillEditor } from 'vue-quill-editor' |
|||
|
|||
let loading// 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
|
|||
formType: '', // 操作类型A/U D(详情) |
|||
guideId: '', // 父组件传来功能id |
|||
categoryList: [], |
|||
orgList: [], |
|||
|
|||
dataForm: { |
|||
guideId: '', |
|||
title: '', |
|||
categoryId: '', |
|||
orgId: '', |
|||
orgType: '', |
|||
orgName: '', |
|||
moduleList: [], |
|||
externalLinks: [], |
|||
attachmentList: [] |
|||
}, |
|||
externalLink: { |
|||
externalLink: "", |
|||
description: "" |
|||
}, |
|||
|
|||
content: '', |
|||
editorOption: { |
|||
placeholder: '编辑文章内容' |
|||
}, |
|||
activeName: "", |
|||
moduleArray: [], |
|||
selTabIndex: 0, |
|||
|
|||
fileList: [{ |
|||
name: 'food.jpeg', |
|||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
}, { |
|||
name: 'food2.jpeg', |
|||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
}], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
|||
|
|||
} |
|||
}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initData (guideId, type) { |
|||
this.formType = type |
|||
this.guideId = guideId |
|||
|
|||
if (type === 'A') { |
|||
this.resetData() |
|||
|
|||
} else { |
|||
this.dataForm.guideId = guideId |
|||
this.loadFormData() |
|||
} |
|||
await this.loadOrg() |
|||
await this.getcategory() |
|||
await this.loadModule() |
|||
}, |
|||
|
|||
async getcategory () { |
|||
// const url = '/gov/guide/guideccategory/getcategory' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidecategory/getcategory' |
|||
|
|||
const params = { |
|||
queryOrigin: 'saveorupdate' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.categoryList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
async loadOrg () { |
|||
// const url = '/gov/org/staff/orgList' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/staff/orgList' |
|||
|
|||
const params = {} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.orgList = data |
|||
if (data.length > 0) { |
|||
this.dataForm.orgId = data[0].orgId |
|||
this.dataForm.orgType = data[0].orgType |
|||
this.dataForm.orgName = data[0].orgName |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//获取模块tab |
|||
async loadModule () { |
|||
// const url = '/gov/voice/guidemodule/list' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidemodule/list' |
|||
|
|||
const params = {} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.moduleArray = data |
|||
|
|||
this.moduleArray.forEach(element => { |
|||
element.editorOption = { |
|||
placeholder: '输入' + element.moduleName |
|||
} |
|||
}); |
|||
|
|||
if (data.length > 0) { |
|||
this.activeName = data[0].moduleId |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//单位下拉框改变 |
|||
orgChange (index) { |
|||
console.log(index) |
|||
this.dataForm.orgName = this.orgList[index].orgName |
|||
this.dataForm.orgType = this.orgList[index].orgType |
|||
}, |
|||
|
|||
tabClick (selTab) { |
|||
console.log(selTab.index) |
|||
this.selTabIndex = selTab.index |
|||
|
|||
}, |
|||
|
|||
onEditorChange ({ editor, html, text }) { |
|||
this.moduleArray[this.selTabIndex].moduleContent = html |
|||
|
|||
}, |
|||
|
|||
async loadFormData () { |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/detail' |
|||
// const url = '/gov/voice/guide/detail' |
|||
let _data = { |
|||
guideId: this.guideId |
|||
} |
|||
const params = {} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.dataForm = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
saveForm () { |
|||
|
|||
this.dataForm.moduleList = [] |
|||
this.moduleArray.forEach(element => { |
|||
if (element.moduleContent) { |
|||
this.dataForm.moduleList.push(element) |
|||
} |
|||
}); |
|||
|
|||
if (this.externalLink.externalLink && this.externalLink.description) { |
|||
this.dataForm.externalLinks = [] |
|||
this.dataForm.externalLinks.push(this.externalLink) |
|||
} else if (!this.externalLink.externalLink && !this.externalLink.description) { |
|||
this.dataForm.externalLinks = [] |
|||
} else { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: '链接地址和地址说明必须同时填写' |
|||
}) |
|||
} |
|||
|
|||
console.log(this.dataForm) |
|||
|
|||
return false |
|||
this.$refs['dataForm'].validate((valid, messageObj) => { |
|||
|
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
} else { |
|||
let url = '' |
|||
|
|||
if (this.type === 'U') { |
|||
// url = '/gov/voice/guide/update' |
|||
url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/update' |
|||
} else { |
|||
// url="/gov/voice/guide/add" |
|||
url = "http://yapi.elinkservice.cn/mock/102/gov/voice/guide/add" |
|||
|
|||
|
|||
} |
|||
window.app.ajax.post(url, this.dataForm, |
|||
(data, rspMsg) => { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '保存成功' |
|||
}) |
|||
this.$emit('dialogOk') |
|||
this.visible = false |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading() |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleClose () { |
|||
this.visible = false |
|||
}, |
|||
resetData () { |
|||
this.dataForm = { |
|||
guideId: '', |
|||
title: '', |
|||
categoryId: '', |
|||
orgId: '', |
|||
orgType: '', |
|||
orgName: '', |
|||
moduleList: [], |
|||
externalLinks: [], |
|||
attachmentList: [] |
|||
} |
|||
}, |
|||
// 取消 |
|||
diaCancel () { |
|||
this.resetData() |
|||
this.$emit('cancleBack') |
|||
}, |
|||
|
|||
handleChange (file, fileList) { |
|||
this.fileList = fileList.slice(-3); |
|||
}, |
|||
|
|||
handleAvatarSuccess (res, file) { |
|||
if (res.code === 0 && res.msg === 'success') { |
|||
this.dataForm2.logo = res.data.url |
|||
} else this.$message.error(res.msg) |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
|
|||
}, |
|||
components: { |
|||
quillEditor |
|||
|
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
type: [ |
|||
{ required: true, message: '分类不能为空', trigger: 'blur' } |
|||
], |
|||
unit: [ |
|||
{ required: true, message: '发布单位不能为空', trigger: 'blur' } |
|||
|
|||
], |
|||
title: [ |
|||
{ required: true, message: '标题不能为空', trigger: 'blur' } |
|||
|
|||
] |
|||
} |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'resolution']), |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="css" scoped> |
|||
.div_btn { |
|||
z-index: 10; |
|||
position: absolute; |
|||
right: 50px; |
|||
top: 20px; |
|||
/* margin: 0 0 20px 0; */ |
|||
} |
|||
|
|||
.div_editor { |
|||
margin-left: 60px; |
|||
width: 90%; |
|||
} |
|||
|
|||
.div_editor >>> .el-tabs--card > .el-tabs__header .el-tabs__nav { |
|||
border: none; |
|||
} |
|||
.el-tabs__nav-wrap::after { |
|||
background-color: white; |
|||
} |
|||
.el-tabs__active-bar { |
|||
background-color: white; |
|||
} |
|||
|
|||
.div_content { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.item_width_1 { |
|||
width: 300px; |
|||
} |
|||
.item_width_2 { |
|||
width: 500px; |
|||
} |
|||
.block { |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.aui-content .ql-container { |
|||
height: 400px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,352 @@ |
|||
<template> |
|||
<div class="role-container"> |
|||
<el-card class="flex1"> |
|||
|
|||
<div v-if="isManager"> |
|||
上下拖动可改变角色顺序 |
|||
<el-button style="margin-left:10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleSaveSort">保存顺序</el-button> |
|||
<el-button type="primary" |
|||
size="small" |
|||
@click="handleAdd">新增</el-button> |
|||
</div> |
|||
<el-table ref="roleTable" |
|||
v-loading="loading1" |
|||
:data="tableData" |
|||
row-key="roleKey" |
|||
border |
|||
style="width: 100%;margin-top:20px"> |
|||
<el-table-column type="index" |
|||
header-align="left" |
|||
align="left" |
|||
width="50"></el-table-column> |
|||
|
|||
<el-table-column prop="categoryName" |
|||
header-align="left" |
|||
align="left" |
|||
label="分类名称" |
|||
width="150"></el-table-column> |
|||
|
|||
<el-table-column prop="status" |
|||
label="状态" |
|||
header-align="left" |
|||
align="left"> |
|||
<template slot-scope="scope"> |
|||
<p style="color:red" |
|||
v-if="scope.row.status==='disable'">{{'禁用'}}</p> |
|||
<p v-else>{{'启用'}}</p> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="isManager" |
|||
width="450" |
|||
label="操作"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button v-if="scope.row.status==='enable'" |
|||
type="primary" |
|||
size="mini" |
|||
@click="handelChangeState(scope.row,'disable')">禁用</el-button> |
|||
<el-button v-if="scope.row.status==='disable'" |
|||
type="primary" |
|||
size="mini" |
|||
@click="handelChangeState(scope.row,'enable')">启用</el-button> |
|||
|
|||
<el-button type="primary" |
|||
size="mini" |
|||
@click="handleEdit(scope.row.roleKey, scope.row.roleName)">修改</el-button> |
|||
|
|||
<el-button type="primary" |
|||
size="mini" |
|||
@click="handleDel(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
</el-card> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="diaShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="diaTitle" |
|||
width="30%" |
|||
@closed="diaClose"> |
|||
<div class="div_duty" |
|||
v-if="diaShow"> |
|||
<span> 分类名称 </span> |
|||
<el-input style="margin-top:20px" |
|||
type="textarea" |
|||
:rows="2" |
|||
v-model="categoryName"></el-input> |
|||
<div class="div_btn"> |
|||
<el-button type="primary" |
|||
size="small" |
|||
@click="saveCategory()">保存</el-button> |
|||
<el-button size="small" |
|||
@click="diaShow=false">取消</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: 'RoleList', |
|||
props: {}, |
|||
data () { |
|||
return { |
|||
loading1: false, |
|||
|
|||
selCategoryId: '', |
|||
tableData: [], |
|||
isManager: false, |
|||
|
|||
//弹出框相关 |
|||
diaTitle: '新增分类', |
|||
categoryName: '', |
|||
diaShow: false, |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
mounted () { |
|||
this.loadList() |
|||
this.dragRoleSort() |
|||
|
|||
const roleList = this.$store.state.user.roleList |
|||
console.log(this.$store.state.user.roleList) |
|||
if (roleList.indexOf('root_manager') > -1) { |
|||
this.isManager = true |
|||
} else { |
|||
this.isManager = false |
|||
} |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
//获取分类列表 |
|||
async loadList () { |
|||
console.log(this.description) |
|||
// const url = "/gov/voice/guideccategory/getcategory" |
|||
const url = "/gov/voice/guidecategory/page" |
|||
const params = { |
|||
} |
|||
const { data, code, msg } = await requestGet(url, params) |
|||
if (code === 0) { |
|||
this.tableData = data.list |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//新增 |
|||
handleAdd () { |
|||
this.diaTitle = '新增分类' |
|||
this.diaShow = true |
|||
this.categoryName = '' |
|||
this.selCategoryId = '' |
|||
}, |
|||
//编辑 |
|||
handleEdit (row) { |
|||
this.diaTitle = '编辑分类' |
|||
this.diaShow = true |
|||
this.selCategoryId = row.id |
|||
this.categoryName = row.categoryName |
|||
}, |
|||
|
|||
//保存分类 |
|||
async saveCategory () { |
|||
const url = "/gov/voice/guideccategory/update" |
|||
let params = {} |
|||
if (this.selCategoryId) { |
|||
params = { |
|||
categoryId: this.selCategoryId, |
|||
categoryName: this.categoryName |
|||
} |
|||
} else { |
|||
params = { |
|||
categoryName: this.categoryName |
|||
} |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.loadList() |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//修改状态 |
|||
async handelChangeState (row, state) { |
|||
|
|||
const url = "/gov/voice/guideccategory/disable" |
|||
const params = { |
|||
status: state, |
|||
categoryId: row.id |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.loadList() |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//删除分类 |
|||
async handelDel (row) { |
|||
const url = "/gov/voice/guidecategory" |
|||
const params = { |
|||
categoryId: row.id |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.loadList() |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
|
|||
//关闭角色职责弹出框 |
|||
diaClose () { |
|||
this.selCategoryId = '' |
|||
this.diaTitle = '' |
|||
this.categoryName = '' |
|||
this.diaShow = false |
|||
}, |
|||
|
|||
//显示角色职责弹出框 |
|||
handelChangeDuty (row) { |
|||
this.selCategoryId = row.id |
|||
this.description = row.description |
|||
this.roleName = row.roleName |
|||
this.diaShow = true |
|||
}, |
|||
handleChangeName (row) { |
|||
row.isEdit = true |
|||
}, |
|||
|
|||
|
|||
//保存角色名称、职责 |
|||
async updateRole () { |
|||
console.log(this.description) |
|||
const url = "/epmetuser/govstaffrole/updatedefaultrole" |
|||
const params = { |
|||
roleId: this.selCategoryId, |
|||
roleName: this.roleName, |
|||
description: this.description |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.diaShow = false |
|||
this.loadList() |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
|
|||
//点击功能权限按钮 |
|||
toOperationConfig (roleKey, roleName) { |
|||
this.roleName = roleName |
|||
this.funcShow = true |
|||
this.opeList = [] |
|||
|
|||
}, |
|||
|
|||
|
|||
dragRoleSort () { |
|||
const el = this.$refs.roleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] |
|||
this.sortTable = Sortable.create(el, { |
|||
group: 'dragTable', |
|||
ghostClass: 'sortable-ghost', // Class name for the drop placeholder, |
|||
// setData: function(dataTransfer, dragEl) { |
|||
// dataTransfer.setData("Text", dragEl.textContent); |
|||
// }, |
|||
delay: 0, |
|||
onChange: evt => { |
|||
// console.log(evt) |
|||
}, |
|||
onEnd: evt => { |
|||
const targetRow = this.tableData.splice(evt.oldIndex, 1)[0] |
|||
this.tableData.splice(evt.newIndex, 0, targetRow) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
//保存顺序 |
|||
handleSaveSort () { |
|||
let data = { |
|||
roleIdList: this.tableData.map(item => { |
|||
return item.id |
|||
}) |
|||
} |
|||
this.$http |
|||
.post('/epmetuser/govstaffrole/savedefaultsort', data) |
|||
.then(({ data: res }) => { |
|||
console.log('ressss', res) |
|||
if (res.code === 0 && res.msg === 'success') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '保存成功' |
|||
}) |
|||
this.loadList() |
|||
} else { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: res.msg |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.role-container, |
|||
.role-flex { |
|||
display: flex; |
|||
} |
|||
.flex1 { |
|||
flex: 1; |
|||
} |
|||
.now-name { |
|||
/* display: flex; |
|||
justify-content: space-between; */ |
|||
margin-bottom: 10px; |
|||
margin-left: 10px; |
|||
} |
|||
.aui-wrapper .el-card + .el-card { |
|||
margin-top: 0; |
|||
} |
|||
.role-container .el-dialog__body { |
|||
padding: 0 20px 20px; |
|||
} |
|||
.div_duty { |
|||
height: 300px; |
|||
position: relative; |
|||
} |
|||
|
|||
.div_btn { |
|||
position: absolute; |
|||
bottom: 30px; |
|||
right: 15px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,482 @@ |
|||
<template> |
|||
<div class="registerList"> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div v-show="!formShow" |
|||
class="mod-demo__demo}"> |
|||
<el-form :inline="true" |
|||
:model="tableParams" |
|||
@keyup.enter.native="loadData()"> |
|||
<div> |
|||
<el-form-item label="所属组织" |
|||
:label-width="labelWidth"> |
|||
<el-cascader v-model="tableParams.agencyId" |
|||
style="width:480px" |
|||
:options="options" |
|||
:props="optionProps" |
|||
clearable></el-cascader> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<div> |
|||
<el-form-item label="问题分类" |
|||
:label-width="labelWidth"> |
|||
<el-select v-model="tableParams.categoryId" |
|||
placeholder="问题分类" |
|||
clearable> |
|||
<el-option v-for="item in categoryList" |
|||
:key="item.categoryId" |
|||
:label="item.categoryName" |
|||
:value="item.categoryId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="标题" |
|||
:label-width="labelWidth"> |
|||
<el-input v-model="tableParams.guideTitle" |
|||
placeholder="标题" |
|||
clearable> |
|||
|
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="loadData()" |
|||
type="primary">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="add()" |
|||
type="primary">新增</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
|
|||
<c-table column-type="index" |
|||
ref="table" |
|||
:url="tableUrl" |
|||
:params="tableParams" |
|||
:operationWidth="80" |
|||
keyword="guidanceList" |
|||
:operations="operations" |
|||
:tableHeight="tableHeight" |
|||
@detail="detail" |
|||
@edit="edit" |
|||
@del="del"> |
|||
</c-table> |
|||
</div> |
|||
|
|||
<div v-show="formShow"> |
|||
<detail-form ref="ref_edit_form" |
|||
@cancleBack="cancleBack" |
|||
@refresh="loadData"></detail-form> |
|||
</div> |
|||
</el-card> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CTable from '@c/CTable' |
|||
import DetailForm from './DetailForm' |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
let loading // 加载动画 |
|||
const customerId = localStorage.getItem('customerId') |
|||
export default { |
|||
data () { |
|||
return { |
|||
//查询条件标题宽度 |
|||
labelWidth: '70px', |
|||
formShow: false, |
|||
|
|||
optionProps: { |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
options: [ |
|||
{ |
|||
agencyId: 'zhinan', |
|||
agencyName: '指南', |
|||
subAgencyList: [{ |
|||
agencyId: 'shejiyuanze', |
|||
agencyName: '设计原则', |
|||
subAgencyList: [{ |
|||
agencyId: 'yizhi', |
|||
agencyName: '一致' |
|||
}, { |
|||
agencyId: 'fankui', |
|||
agencyName: '反馈' |
|||
}, { |
|||
agencyId: 'xiaolv', |
|||
agencyName: '效率' |
|||
}, { |
|||
agencyId: 'kekong', |
|||
agencyName: '可控' |
|||
}] |
|||
}, { |
|||
agencyId: 'daohang', |
|||
agencyName: '导航', |
|||
subAgencyList: [{ |
|||
agencyId: 'cexiangdaohang', |
|||
agencyName: '侧向导航' |
|||
}, { |
|||
agencyId: 'dingbudaohang', |
|||
agencyName: '顶部导航' |
|||
}] |
|||
}] |
|||
}, |
|||
{ |
|||
agencyId: 'zujian', |
|||
agencyName: '组件', |
|||
subAgencyList: [{ |
|||
agencyId: 'basic', |
|||
agencyName: 'Basic', |
|||
subAgencyList: [{ |
|||
agencyId: 'layout', |
|||
agencyName: 'Layout 布局' |
|||
}, { |
|||
agencyId: 'color', |
|||
agencyName: 'Color 色彩' |
|||
}, { |
|||
agencyId: 'typography', |
|||
agencyName: 'Typography 字体' |
|||
}, { |
|||
agencyId: 'icon', |
|||
agencyName: 'Icon 图标' |
|||
}, { |
|||
agencyId: 'button', |
|||
agencyName: 'Button 按钮' |
|||
}] |
|||
}, { |
|||
agencyId: 'form', |
|||
agencyName: 'Form', |
|||
subAgencyList: [{ |
|||
agencyId: 'radio', |
|||
agencyName: 'Radio 单选框' |
|||
}, { |
|||
agencyId: 'checkbox', |
|||
agencyName: 'Checkbox 多选框' |
|||
}, { |
|||
agencyId: 'input', |
|||
agencyName: 'Input 输入框' |
|||
}, { |
|||
agencyId: 'input-number', |
|||
agencyName: 'InputNumber 计数器' |
|||
}, { |
|||
agencyId: 'select', |
|||
agencyName: 'Select 选择器' |
|||
}, { |
|||
agencyId: 'cascader', |
|||
agencyName: 'Cascader 级联选择器' |
|||
}, { |
|||
agencyId: 'switch', |
|||
agencyName: 'Switch 开关' |
|||
}, { |
|||
agencyId: 'slider', |
|||
agencyName: 'Slider 滑块' |
|||
}, { |
|||
agencyId: 'time-picker', |
|||
agencyName: 'TimePicker 时间选择器' |
|||
}, { |
|||
agencyId: 'date-picker', |
|||
agencyName: 'DatePicker 日期选择器' |
|||
}, { |
|||
agencyId: 'datetime-picker', |
|||
agencyName: 'DateTimePicker 日期时间选择器' |
|||
}, { |
|||
agencyId: 'upload', |
|||
agencyName: 'Upload 上传' |
|||
}, { |
|||
agencyId: 'rate', |
|||
agencyName: 'Rate 评分' |
|||
}, { |
|||
agencyId: 'form', |
|||
agencyName: 'Form 表单' |
|||
}] |
|||
}, { |
|||
agencyId: 'data', |
|||
agencyName: 'Data', |
|||
subAgencyList: [{ |
|||
agencyId: 'table', |
|||
agencyName: 'Table 表格' |
|||
}, { |
|||
agencyId: 'tag', |
|||
agencyName: 'Tag 标签' |
|||
}, { |
|||
agencyId: 'progress', |
|||
agencyName: 'Progress 进度条' |
|||
}, { |
|||
agencyId: 'tree', |
|||
agencyName: 'Tree 树形控件' |
|||
}, { |
|||
agencyId: 'pagination', |
|||
agencyName: 'Pagination 分页' |
|||
}, { |
|||
agencyId: 'badge', |
|||
agencyName: 'Badge 标记' |
|||
}] |
|||
}, { |
|||
agencyId: 'notice', |
|||
agencyName: 'Notice', |
|||
subAgencyList: [{ |
|||
agencyId: 'alert', |
|||
agencyName: 'Alert 警告' |
|||
}, { |
|||
agencyId: 'loading', |
|||
agencyName: 'Loading 加载' |
|||
}, { |
|||
agencyId: 'message', |
|||
agencyName: 'Message 消息提示' |
|||
}, { |
|||
agencyId: 'message-box', |
|||
agencyName: 'MessageBox 弹框' |
|||
}, { |
|||
agencyId: 'notification', |
|||
agencyName: 'Notification 通知' |
|||
}] |
|||
}, { |
|||
agencyId: 'navigation', |
|||
agencyName: 'Navigation', |
|||
subAgencyList: [{ |
|||
agencyId: 'menu', |
|||
agencyName: 'NavMenu 导航菜单' |
|||
}, { |
|||
agencyId: 'tabs', |
|||
agencyName: 'Tabs 标签页' |
|||
}, { |
|||
agencyId: 'breadcrumb', |
|||
agencyName: 'Breadcrumb 面包屑' |
|||
}, { |
|||
agencyId: 'dropdown', |
|||
agencyName: 'Dropdown 下拉菜单' |
|||
}, { |
|||
agencyId: 'steps', |
|||
agencyName: 'Steps 步骤条' |
|||
}] |
|||
}, { |
|||
agencyId: 'others', |
|||
agencyName: 'Others', |
|||
subAgencyList: [{ |
|||
agencyId: 'dialog', |
|||
agencyName: 'Dialog 对话框' |
|||
}, { |
|||
agencyId: 'tooltip', |
|||
agencyName: 'Tooltip 文字提示' |
|||
}, { |
|||
agencyId: 'popover', |
|||
agencyName: 'Popover 弹出框' |
|||
}, { |
|||
agencyId: 'card', |
|||
agencyName: 'Card 卡片' |
|||
}, { |
|||
agencyId: 'carousel', |
|||
agencyName: 'Carousel 走马灯' |
|||
}, { |
|||
agencyId: 'collapse', |
|||
agencyName: 'Collapse 折叠面板' |
|||
}] |
|||
}] |
|||
} |
|||
], |
|||
categoryList: [], |
|||
|
|||
|
|||
// 列表相关 |
|||
// tableUrl: '/gov/guide/guide/list', |
|||
tableUrl: 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/list', |
|||
tableParams: { |
|||
agencyId: '', // |
|||
categoryId: '', //分类 |
|||
guideTitle: '' //标题 |
|||
}, |
|||
|
|||
operations: [ |
|||
{ |
|||
lable: '详情', // 按钮显示名称 |
|||
size: 'mini', |
|||
style: 'margin: 0 6px;', |
|||
type: 'text', |
|||
slot: '', |
|||
plain: false, |
|||
methodName: 'detail', // 回调方法名称 |
|||
isShow: (row) => { |
|||
return true |
|||
} |
|||
}, |
|||
{ |
|||
lable: '编辑', // 按钮显示名称 |
|||
size: 'mini', |
|||
style: 'margin: 0 6px;', |
|||
type: 'text', |
|||
slot: '', |
|||
plain: false, |
|||
methodName: 'edit', // 回调方法名称 |
|||
isShow: (row) => { |
|||
return true |
|||
// if (row.initState === 1) { |
|||
// return true |
|||
// } else { |
|||
// return false |
|||
// } |
|||
} |
|||
}, |
|||
{ |
|||
lable: '删除', // 按钮显示名称 |
|||
size: 'mini', |
|||
style: 'margin: 0 6px;', |
|||
type: 'text', |
|||
slot: '', |
|||
plain: false, |
|||
methodName: 'del', // 回调方法名称 |
|||
isShow: (row) => { |
|||
return true |
|||
} |
|||
} |
|||
], |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
CTable, |
|||
DetailForm |
|||
}, |
|||
activated () { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout() // 解决表格错位 |
|||
}) |
|||
}, |
|||
mounted () { |
|||
this.initData() |
|||
console.log(customerId) |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.clientHeight - 60 - 80 - 80 - 100 |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'env']) |
|||
}, |
|||
methods: { |
|||
async initData () { |
|||
this.startLoading() |
|||
await this.getAgencylist()//获取组织级别 |
|||
await this.getcategory()//获取分类 |
|||
await this.loadData()//获取指南列表 |
|||
this.endLoading() |
|||
}, |
|||
|
|||
loadData () { |
|||
this.$refs.table.loadData() |
|||
}, |
|||
|
|||
//新增 |
|||
add () { |
|||
this.formShow = true |
|||
this.$refs['ref_edit_form'].initData("", "A") |
|||
}, |
|||
|
|||
// 详情 |
|||
detail (row) { |
|||
this.formShow = true |
|||
this.$refs['ref_edit_form'].initData(row.guideId, "D") |
|||
}, |
|||
|
|||
edit (row) { |
|||
this.formShow = true |
|||
this.$refs['ref_edit_form'].initData(row.guideId, "U") |
|||
}, |
|||
async del (row) { |
|||
// const url = '/gov/voice/guidecategory/delete' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidecategory/delete' |
|||
|
|||
const params = { |
|||
categoryId: row.guideId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.$message.success("删除成功") |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
cancleBack () { |
|||
this.formShow = false |
|||
}, |
|||
|
|||
async getAgencylist () { |
|||
// const url = '/gov/org/agency/agencylist' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist' |
|||
|
|||
const params = {} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.options = [] |
|||
this.options.push(data) |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
async getcategory () { |
|||
// const url = '/gov/guide/guideccategory/getcategory' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidecategory/getcategory' |
|||
|
|||
const params = { |
|||
queryOrigin: 'query' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.categoryList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="css" scoped> |
|||
.myNote { |
|||
display: -webkit-box; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
/* .register .el-table .el-table__header-wrapper { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
}*/ |
|||
/* |
|||
.register .el-table .el-table__fixed-body-wrapper { |
|||
height: calc(100% - 44px); |
|||
margin-top: 44px; |
|||
overflow-y: auto !important; |
|||
} */ |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue