You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
447 lines
14 KiB
447 lines
14 KiB
<template>
|
|
<!-- 部门管理 -->
|
|
<div>
|
|
<div class="gva-table-box">
|
|
<div class="gva-btn-list">
|
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="bigCompanyDialogFormVisible=true">新增分公司</el-button>
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
accordion
|
|
style="width: 100%;margin-bottom: 20px;"
|
|
row-key="singid"
|
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
|
<el-table-column prop="name" label="部门名称"></el-table-column>
|
|
<el-table-column prop="sort" label="排序" width="180"></el-table-column>
|
|
<el-table-column prop="address" label="状态">
|
|
<template #default="scope">
|
|
<el-tag v-show="scope.row.address==true">正常</el-tag>
|
|
<el-tag type="danger" v-show="scope.row.address==false">停用</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="wxId" label="企业微信ID"></el-table-column>
|
|
<el-table-column prop="jdId" label="金蝶ID"></el-table-column>
|
|
<el-table-column prop="attributes" label="属性">
|
|
<template #default="scope">
|
|
<el-tag v-show="scope.row.attributes==1">私有</el-tag>
|
|
<el-tag v-show="scope.row.attributes==2">共享</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="date" label="创建时间"></el-table-column>
|
|
<el-table-column align="left" fixed="right" label="操作" width="200">
|
|
<template #default="scope">
|
|
<el-button
|
|
v-if="scope.row.queryid==1"
|
|
icon="el-icon-edit"
|
|
size="small"
|
|
type="text"
|
|
@click="editApi(scope.row)"
|
|
>新增部门</el-button>
|
|
<el-button
|
|
v-if="scope.row.queryid==2"
|
|
icon="el-icon-edit"
|
|
size="small"
|
|
type="text"
|
|
@click="editApi(scope.row)"
|
|
>新增工段</el-button>
|
|
<el-button
|
|
icon="el-icon-edit"
|
|
size="small"
|
|
type="text"
|
|
@click="editApi(scope.row)"
|
|
>编辑</el-button>
|
|
<el-button
|
|
icon="el-icon-delete"
|
|
size="small"
|
|
type="text"
|
|
@click="deleteApi(scope.row)"
|
|
>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-dialog width="20%" v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
|
|
<el-form ref="apiForm" :model="form" :rules="rules" label-width="100px">
|
|
<el-form-item label="上级部门" prop="path">
|
|
<el-cascader :options="tableData" :props="{ checkStrictly: true }" clearable></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="部门名称" prop="path">
|
|
<el-input style="width: 217px!important" v-model="form.name"/>
|
|
</el-form-item>
|
|
<el-form-item label="排序" prop="method">
|
|
<el-input style="width: 217px!important" v-model="form.sort"/>
|
|
</el-form-item>
|
|
<el-form-item label="企业微信ID" prop="method">
|
|
<el-input style="width: 217px!important" v-model="form.wxId"/>
|
|
</el-form-item>
|
|
<el-form-item label="金蝶ID" prop="method">
|
|
<el-input style="width: 217px!important" v-model="form.jdId"/>
|
|
</el-form-item>
|
|
<el-form-item label="属性" prop="method">
|
|
<el-radio v-model="radio" label="1">私有</el-radio>
|
|
<el-radio v-model="radio" label="2">共享</el-radio>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="apiGroup">
|
|
<el-radio v-model="radio" label="1">正常</el-radio>
|
|
<el-radio v-model="radio" label="2">停用</el-radio>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button size="small" @click="closeDialog">取 消</el-button>
|
|
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<!-- 新增分公司 -->
|
|
<el-dialog width="20%" v-model="bigCompanyDialogFormVisible" :before-close="closeBigDialog" title="新增分公司">
|
|
<el-form ref="bigCompanyFrom" :model="bigCompanyFrom" :rules="bigCompanyFromrules" label-width="100px">
|
|
<el-form-item label="部门名称" prop="path">
|
|
<el-input style="width: 217px!important" v-model="bigCompanyFrom.name"/>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="排序" prop="method">
|
|
<el-input style="width: 217px!important" v-model="form.sort"/>
|
|
</el-form-item> -->
|
|
<el-form-item label="金蝶ID" prop="method">
|
|
<el-input style="width: 217px!important" v-model="bigCompanyFrom.jindieid"/>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="apiGroup">
|
|
<el-radio v-model="bigCompanyFrom.state" label="1">启用</el-radio>
|
|
<el-radio v-model="bigCompanyFrom.state" label="2">禁用</el-radio>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button size="small" @click="closeBigDialog">取 消</el-button>
|
|
<el-button size="small" type="primary" @click="bigCompany">确 定</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
|
|
import {
|
|
grouplist,
|
|
addgroupinfo,
|
|
} from '@/api/group'
|
|
import infoList from '@/mixins/infoList'
|
|
import { toSQLLine } from '@/utils/stringFun'
|
|
import warningBar from '@/components/warningBar/warningBar.vue'
|
|
const methodOptions = [
|
|
{
|
|
value: 'POST',
|
|
label: '创建',
|
|
type: 'success'
|
|
},
|
|
{
|
|
value: 'GET',
|
|
label: '查看',
|
|
type: ''
|
|
},
|
|
{
|
|
value: 'PUT',
|
|
label: '更新',
|
|
type: 'warning'
|
|
},
|
|
{
|
|
value: 'DELETE',
|
|
label: '删除',
|
|
type: 'danger'
|
|
}
|
|
]
|
|
|
|
export default {
|
|
name: 'Api',
|
|
components: {
|
|
warningBar
|
|
},
|
|
mixins: [infoList],
|
|
data() {
|
|
return {
|
|
bigCompanyFrom:{
|
|
state:'',
|
|
jindieid:'',
|
|
name:'',
|
|
parentid:1
|
|
},
|
|
cheshiList:[{
|
|
id: 1,
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
id: 2,
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
id: 3,
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄',
|
|
children: [{
|
|
id: 31,
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
}, {
|
|
id: 32,
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄',
|
|
children:[
|
|
{
|
|
id: 38,
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
},
|
|
],
|
|
}]
|
|
}, {
|
|
id: 4,
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}],
|
|
tableData1: [{
|
|
id: 1,
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
id: 2,
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
id: 3,
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄',
|
|
hasChildren: true
|
|
}, {
|
|
id: 4,
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}],
|
|
radio: '1',
|
|
tableData: [],
|
|
deleteVisible: false,
|
|
listApi: grouplist,
|
|
dialogFormVisible: false,
|
|
bigCompanyDialogFormVisible:false,
|
|
dialogTitle: '新增部门',
|
|
apis: [],
|
|
form: {
|
|
path: '',
|
|
apiGroup: '',
|
|
method: '',
|
|
description: ''
|
|
},
|
|
methodOptions: methodOptions,
|
|
type: '',
|
|
rules: {
|
|
path: [{ required: true, message: '请输入api路径', trigger: 'blur' }],
|
|
apiGroup: [
|
|
{ required: true, message: '请输入组名称', trigger: 'blur' }
|
|
],
|
|
method: [
|
|
{ required: true, message: '请选择请求方式', trigger: 'blur' }
|
|
],
|
|
description: [
|
|
{ required: true, message: '请输入api介绍', trigger: 'blur' }
|
|
]
|
|
},
|
|
|
|
}
|
|
},
|
|
async created() {
|
|
this.getTableData()
|
|
// this.getgrouplist()
|
|
this.pageSize = 999
|
|
await this.getTableData()
|
|
},
|
|
methods: {
|
|
// 获取集团架构
|
|
// async getgrouplist(){
|
|
// const res = await grouplist()
|
|
// console.log("集团架构")
|
|
// console.log(res)
|
|
// },
|
|
// input计数器
|
|
methodFiletr(value) {
|
|
const target = methodOptions.filter(item => item.value === value)[0]
|
|
return target && `${target.label}`
|
|
},
|
|
tagTypeFiletr(value) {
|
|
const target = methodOptions.filter(item => item.value === value)[0]
|
|
return target && `${target.type}`
|
|
},
|
|
// 选中api
|
|
handleSelectionChange(val) {
|
|
this.apis = val
|
|
},
|
|
async onDelete() {
|
|
const ids = this.apis.forEach(item => item.ID)
|
|
const res = await deleteApisByIds({ ids })
|
|
if (res.code === 0) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: res.msg
|
|
})
|
|
if (this.tableData.length === ids.length && this.page > 1) {
|
|
this.page--
|
|
}
|
|
this.deleteVisible = false
|
|
this.getTableData()
|
|
}
|
|
},
|
|
// 排序
|
|
sortChange({ prop, order }) {
|
|
if (prop) {
|
|
this.searchInfo.orderKey = toSQLLine(prop)
|
|
this.searchInfo.desc = order === 'descending'
|
|
}
|
|
this.getTableData()
|
|
},
|
|
onReset() {
|
|
this.searchInfo = {}
|
|
},
|
|
// 条件搜索前端看此方法
|
|
onSubmit() {
|
|
this.page = 1
|
|
this.pageSize = 10
|
|
this.getTableData()
|
|
},
|
|
initForm() {
|
|
this.$refs.apiForm.resetFields()
|
|
this.form = {
|
|
path: '',
|
|
apiGroup: '',
|
|
method: '',
|
|
description: ''
|
|
}
|
|
},
|
|
closeDialog() {
|
|
this.initForm()
|
|
this.dialogFormVisible = false
|
|
},
|
|
closeBigDialog() {
|
|
this.bigCompanyDialogFormVisible = false
|
|
},
|
|
openDialog(type) {
|
|
switch (type) {
|
|
case 'addApi':
|
|
this.dialogTitle = '新增'
|
|
break
|
|
case 'edit':
|
|
this.dialogTitle = '编辑'
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
this.type = type
|
|
this.dialogFormVisible = true
|
|
},
|
|
async editApi(row) {
|
|
const res = await getApiById({ id: row.id })
|
|
this.form = res.data.api
|
|
this.openDialog('edit')
|
|
},
|
|
async deleteApi(row) {
|
|
this.$confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(async() => {
|
|
const res = await deleteApi(row)
|
|
if (res.code === 0) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
if (this.tableData.length === 1 && this.page > 1) {
|
|
this.page--
|
|
}
|
|
this.getTableData()
|
|
}
|
|
})
|
|
},
|
|
async enterDialog() {
|
|
this.$refs.apiForm.validate(async valid => {
|
|
if (valid) {
|
|
switch (this.type) {
|
|
case 'addApi':
|
|
{
|
|
const res = await createApi(this.form)
|
|
if (res.code === 0) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '添加成功',
|
|
showClose: true
|
|
})
|
|
}
|
|
this.getTableData()
|
|
this.closeDialog()
|
|
}
|
|
|
|
break
|
|
case 'edit':
|
|
{
|
|
const res = await updateApi(this.form)
|
|
if (res.code === 0) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '编辑成功',
|
|
showClose: true
|
|
})
|
|
}
|
|
this.getTableData()
|
|
this.closeDialog()
|
|
}
|
|
break
|
|
default:
|
|
// eslint-disable-next-line no-lone-blocks
|
|
{
|
|
this.$message({
|
|
type: 'error',
|
|
message: '未知操作',
|
|
showClose: true
|
|
})
|
|
}
|
|
break
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 添顶级部门
|
|
// bigCompanyFrom
|
|
async bigCompany(){
|
|
const res = await addgroupinfo(this.bigCompanyFrom)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.el-input-number__decrease{
|
|
top:0!important
|
|
}
|
|
.el-input__inner{
|
|
width: 217px!important
|
|
}
|
|
.button-box {
|
|
padding: 10px 20px;
|
|
.el-button {
|
|
float: right;
|
|
}
|
|
}
|
|
.warning {
|
|
color: #dc143c;
|
|
}
|
|
</style>
|
|
|