Skip to content

H
haoban-operation-4
Commit fee2c61e by caoyanzhi
Options

操作项列表

parent db610b01
Showing with 310 additions and 2 deletions
src/api/permission.js
......@@ -10,6 +10,9 @@ const api = {
delAuthItem: '/del-auth-item', // 删除权限项
getAuthItemList: '/auth-item-list', // 获取权限项列表
getOperationItemList: '/operation-item-list', // 获取操作项列表
addOperationItem: '/add-operation-item', // 添加操作项
editOperationItem: '/edit-operation-item', // 编辑操作项
delOperationItem: '/del-operation-item', // 删除操作项
}
export default getFetch(api, '/hb-manage-web');
src/views/permission/action-list.vue
<template>
<div>操作项</div>
<el-tabs v-model="activeName">
<!-- 1好办后台2应用后台3好办小程序4小程序应用 -->
<el-tab-pane label="好办后台" name="first" lazy>
<action-table app-type="1"></action-table>
</el-tab-pane>
<el-tab-pane label="应用后台" name="second" lazy>
<action-table app-type="2"></action-table>
</el-tab-pane>
<el-tab-pane label="好办小程序" name="third" lazy>
<action-table app-type="3"></action-table>
</el-tab-pane>
<el-tab-pane label="好办小程序应用" name="fourth" lazy>
<action-table app-type="4"></action-table>
</el-tab-pane>
</el-tabs>
</template>
<script>
import ActionTable from './action-list/action-table.vue';
export default {
name: 'action-list'
name: 'action-list',
components: { ActionTable },
data() {
return {
activeName: 'first'
}
}
}
</script>
<style lang="less" scoped>
/deep/.el-tabs__header {
padding-top: 10px;
margin-bottom: 0;
}
</style>
src/views/permission/action-list/action-table.vue 0 → 100644
<template>
<div style="padding: 20px">
<el-input
placeholder="请输入名称/代码"
style="width: 340px"
prefix-icon="el-icon-search"
clearable
v-model.trim="search"
@change="onSearch"
></el-input>
<el-button style="float: right" type="primary" @click="editOperation.show = true">新建操作项</el-button>
<el-table style="margin-top: 20px" :data="operationList">
<el-table-column label="操作项名称" prop="operationItemName" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="操作项code" prop="operationItemCode" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="页面code" prop="menuCode" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="好办版本" prop="version" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" @click="onEdit(row)">编辑</el-button>
<el-button type="text" @click="onDel(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="pager.total > 0"
style="text-align: right"
layout="total,sizes,prev,pager,next"
background
:total="pager.total"
:page-sizes="pager.pageSizes"
:page-size="pager.pageSize"
:current-page="pager.currentPage"
@size-change="onSizeChage"
@current-change="onCurrentChange"
></el-pagination>
<el-dialog :visible.sync="editOperation.show" :title="editOperation.operationItemId ? '编辑操作项' : '新建操作项'" width="590px" @closed="onEditOperationClose">
<el-form :model="editOperation" :rules="editOperationRule" ref="editOperation" label-width="110px">
<el-form-item label="节点" prop="menuId">
<el-select v-model="editOperation.menuId" style="width: 440px"></el-select>
</el-form-item>
<el-form-item label="节点code">
<el-input :value="editOperation.menuCode" style="width:440px" disabled></el-input>
</el-form-item>
<el-form-item label="应用版本" prop="version">
<el-select v-model="editOperation.version" style="width: 440px"></el-select>
</el-form-item>
<el-form-item label="操作项名称" prop="operationItemName">
<el-input
type="text"
style="width: 440px"
maxlength="20"
show-word-limit
v-model.trim="editOperation.operationItemName"
></el-input>
</el-form-item>
<el-form-item label="操作项code" prop="operationItemCode">
<el-input
type="text"
style="width: 440px"
maxlength="200"
show-word-limit
v-model.trim="editOperation.operationItemCode"
></el-input>
</el-form-item>
<el-form-item label="请求URL">
<el-input
type="text"
style="width: 440px"
maxlength="200"
show-word-limit
v-model.trim="editOperation.operationItemUrl"
></el-input>
</el-form-item>
<el-form-item label="生成权限项">
<el-switch :value="editOperation.authItemFlag == 1" @change="editOperation.authItemFlag = editOperation.authItemFlag == 1 ? 0 : 1"></el-switch>
</el-form-item>
<el-form-item label="权限适用">
<el-radio-group v-model="editOperation.roleRange">
<el-radio label="1">管理员权限集</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="editOperation.show = false">取消</el-button>
<el-button type="primary" :loading="editOperation.loading" @click="onEditOperationSave">{{ editOperation.operationItemId ? '保存' : '新建' }}</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import api from '@/api/permission.js';
const { getOperationItemList, addOperationItem, editOperationItem, delOperationItem, getMenuList } = api;
// 搜索，翻页 done
// 新建、编辑操作项 done
// 删除操作项 done
export default {
name: 'action-table',
props: {
appType: [String, Number]
},
data() {
return {
search: '',
// 分页相关的数据
pager: {
total: 100,
pageSizes: [20, 40, 60, 80],
pageSize: 20,
currentPage: 1
},
// 操作项列表
operationList: [],
// 新建、编辑操作项
editOperation: {
show: false,
loading: false,
operationItemId: '',
menuId: '',
menuCode: '',
operationItemName: '',
operationItemCode: '',
operationItemUrl: '',
authItemFlag: '', // 是否生产权限项1是0否
roleRange: '1', // 1使用管理员
version: '',
appType: ''
},
editOperationRule: {
menuId: [{ required: true, message: '请选择节点', trigger: 'change' }],
version: [{ required: true, message: '请选择版本', trigger: 'change' }],
operationItemName: [{ required: true, message: '操作项名称不能为空', trigger: 'blur' }],
operationItemCode: [{ required: true, message: '操作项code不能为空', trigger: 'blur' }],
}
}
},
created() {
this.initData();
},
methods: {
initData() {
this.getOperationList();
return;
getMenuList({ appType: this.appType }).then(res => {
this.menuList = res.result || [];
})
},
// 获取操作项列表
getOperationList() {
const { currentPage, pageSize } = this.pager;
const params = {
search: this.search,
pageNum: currentPage,
pageSize,
appType: this.appType
}
this.operationList = [
{
menuId: '1',
operationItemName: '操作项一',
operationItemCode: 'czx1',
operationItemId: 'czx1',
version: '1'
},
{
menuId: '1',
operationItemName: '操作项二',
operationItemCode: 'czx2',
operationItemId: 'czx2',
version: '1'
},
]
return console.log(params)
getOperationItemList(params).then(res => {
const { totalCount, list } = res.result || {};
this.pager.total = totalCount || 0;
this.operationList = list || [];
})
},
onSearch() {
this.pager.currentPage = 1;
this.getOperationList();
},
onSizeChage(pageSize) {
this.pager.pageSize = pageSize;
this.onSearch();
},
onCurrentChange(currentPage) {
this.pager.currentPage = currentPage;
this.getOperationList();
},
// 编辑操作项 打开弹窗
onEdit(operationData) {
const { operationItemId, menuId, menuCode, operationItemName, operationItemCode, operationItemUrl, authItemFlag, roleRange, version } = operationData;
Object.assign(this.editOperation, {
show: true,
operationItemId,
menuId,
menuCode,
operationItemName,
operationItemCode,
operationItemUrl,
authItemFlag,
roleRange: typeof roleRange == 'undefined' ? '1' : roleRange,
version
});
},
// 新建、编辑操作项 弹窗关闭
onEditOperationClose() {
Object.assign(this.editOperation, {
operationItemId: '',
menuId: '',
menuCode: '',
operationItemName: '',
operationItemCode: '',
operationItemUrl: '',
authItemFlag: '',
roleRange: '1',
version: '',
appType: ''
})
this.$nextTick(this.$refs.editOperation.clearValidate);
},
// 新建、编辑操作项 弹窗保存
onEditOperationSave() {
this.$refs.editOperation.validate(vali => {
if (!vali) return;
const { operationItemId, menuId, menuCode, operationItemName, operationItemCode, operationItemUrl, authItemFlag, roleRange, version, appType } = this.editOperation;
const params = { menuId, menuCode, operationItemName, operationItemCode, operationItemUrl, authItemFlag, roleRange, version }
return console.log(params)
this.editOperation.loading = true;
if (operationItemId) {
params.operationItemId = operationItemId;
editOperationItem(params).then(succ.bind(this, '保存成功！')).finally(() => this.editOperation.loading = false);
} else {
params.appType = appType;
addOperationItem(params).then(succ.bind(this, '新建成功！')).finally(() => this.editOperation.loading = false);
}
function succ(msg) {
this.$message.success(msg);
this.getOperationList();
}
})
},
// 删除操作项
onDel(operationData) {
const { operationItemId, operationItemName } = operationData;
this.$confirm(`确定删除【 ${operationItemName} 】吗？`, '提示', { type: 'warning' }).then(() => {
delOperationItem({ operationItemId }).then(res => {
this.$message.success('删除成功！');
if (this.pager.currentPage > 1 && this.operationList.length == 1) {
this.pager.currentPage--;
}
this.getOperationList();
})
})
},
treeData(data) {
let tree = data.filter(father => {
let branchArr = data.filter(child => {
return father.departmentId == child.parentDepartmentId; //返回每一项的子级数组
});
if (branchArr.length > 0) {
father.hasSonNode = true;
father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
} else {
father.hasSonNode = false;
}
return father.parentDepartmentId == 0; //返回第一层
});
return tree;
},
}
}
</script>
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