419 lines
13 KiB
Vue
419 lines
13 KiB
Vue
<template>
|
||
<page-header-wrapper>
|
||
<Grid :columns="['400px', 1]" :rows="gridRows">
|
||
<a-card title="组织架构-保障力量" class="my-card my-card-has-title" :bordered="false" style="grid-row: 1 / 3">
|
||
<template #extra>
|
||
<a-button type="primary" icon="plus" shape="circle" title="新增" @click="handleOpenAddZzjgModal()"></a-button>
|
||
</template>
|
||
<a-tree
|
||
:treeData="zzjg.treeData"
|
||
:selectedKeys.sync="zzjg.selectedKeys"
|
||
:expandedKeys.sync="zzjg.expandedKeys"
|
||
@select="handleChangeZzjgSelected"
|
||
>
|
||
<template #title="{ key: id, title }">
|
||
<a-dropdown :trigger="['contextmenu']">
|
||
<span>{{ title }}</span>
|
||
<template #overlay>
|
||
<Flex class="contextmenu-zz">
|
||
<a-button
|
||
type="text-primary"
|
||
icon="edit"
|
||
title="编辑"
|
||
@click="handleOpenEditZzjgModal(id)"
|
||
></a-button>
|
||
<a-button
|
||
type="text-primary"
|
||
icon="plus"
|
||
title="新增子项"
|
||
@click="handleOpenAddZzjgModal(id)"
|
||
></a-button>
|
||
<a-button
|
||
type="text-danger"
|
||
icon="delete"
|
||
title="删除"
|
||
@click="handleDeleteZzjg(id, title)"
|
||
></a-button>
|
||
</Flex>
|
||
</template>
|
||
</a-dropdown>
|
||
</template>
|
||
</a-tree>
|
||
</a-card>
|
||
<a-card title="组织人员" class="my-card my-card-has-title" :bordered="false">
|
||
<template #extra>
|
||
<a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzryModal">新增</a-button>
|
||
<a-icon
|
||
v-if="layoutRight === 'zzry'"
|
||
type="fullscreen-exit"
|
||
style="font-size: 32px"
|
||
@click="layoutRight = 'auto'"
|
||
/>
|
||
<a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzry'" />
|
||
</template>
|
||
<AntQueryTable
|
||
ref="zzry-table"
|
||
height="100%"
|
||
:queryConfig="zzry.queryConfig"
|
||
:tableConfig="zzry.tableConfig"
|
||
:pageConfig="zzry.pageConfig"
|
||
:showTool="zzry.showTool"
|
||
>
|
||
<template #tablecell-action="{ record }">
|
||
<a-button type="text-primary" icon="edit" @click="handleOpenEditZzryModal(record)"></a-button>
|
||
</template>
|
||
</AntQueryTable>
|
||
</a-card>
|
||
<a-card title="组织装备" class="my-card my-card-has-title" :bordered="false">
|
||
<template #extra>
|
||
<a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzzbModal">新增</a-button>
|
||
<a-icon
|
||
v-if="layoutRight === 'zzzb'"
|
||
type="fullscreen-exit"
|
||
style="font-size: 32px"
|
||
@click="layoutRight = 'auto'"
|
||
/>
|
||
<a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzzb'" />
|
||
</template>
|
||
<AntQueryTable
|
||
ref="zzzb-table"
|
||
height="100%"
|
||
:queryConfig="zzzb.queryConfig"
|
||
:tableConfig="zzzb.tableConfig"
|
||
:pageConfig="zzzb.pageConfig"
|
||
:showTool="zzzb.showTool"
|
||
>
|
||
<template #tablecell-action="{ record }">
|
||
<a-button type="text-primary" icon="edit" @click="handleOpenEditZzzbModal(record)"></a-button>
|
||
</template>
|
||
</AntQueryTable>
|
||
</a-card>
|
||
</Grid>
|
||
<AntFormModal
|
||
:visible.sync="zzjgModal.visible"
|
||
:title="zzjgModal.title"
|
||
:formItems="zzjgModal.formItems"
|
||
:formRules="zzjgModal.formRules"
|
||
:formData="zzjgModal.formData"
|
||
:onSubmit="handleSubmitZzjg"
|
||
@success="handleSubmitZzjgSuccess"
|
||
></AntFormModal>
|
||
<AntFormModal
|
||
:visible.sync="zzryModal.visible"
|
||
:title="zzryModal.title"
|
||
:formItems="zzryModal.formItems"
|
||
:formRules="zzryModal.formRules"
|
||
:formData="zzryModal.formData"
|
||
:onSubmit="handleSubmitZzry"
|
||
@success="handleSubmitZzrySuccess"
|
||
></AntFormModal>
|
||
<AntFormModal
|
||
:visible.sync="zzzbModal.visible"
|
||
:title="zzzbModal.title"
|
||
:formItems="zzzbFormItems"
|
||
:formRules="zzzbModal.formRules"
|
||
:formData="zzzbModal.formData"
|
||
:onSubmit="handleSubmitZzzb"
|
||
@success="handleSubmitZzzbSuccess"
|
||
></AntFormModal>
|
||
</page-header-wrapper>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Bzllsjk',
|
||
data() {
|
||
return {
|
||
layoutRight: 'auto',
|
||
zzjg: {
|
||
treeData: [],
|
||
selectedKeys: [],
|
||
expandedKeys: [],
|
||
},
|
||
zzjgModal: {
|
||
visible: false,
|
||
title: '',
|
||
mode: '',
|
||
formItems: [
|
||
{
|
||
label: '上级组织',
|
||
prop: 'parentId',
|
||
component: 'AntOriginTreeSelect',
|
||
options: {
|
||
dataSource: () =>
|
||
this.$http({
|
||
url: '/tree/organization',
|
||
method: 'get',
|
||
params: { unittype: 2 },
|
||
}).then((res) => ({ data: [{ key: 0, title: '根组织' }].concat(res.data) })),
|
||
valueKey: 'key',
|
||
},
|
||
},
|
||
{
|
||
label: '标识编码',
|
||
prop: 'codeName',
|
||
},
|
||
{
|
||
label: '组织名称',
|
||
prop: 'name',
|
||
},
|
||
],
|
||
formRules: {
|
||
codeName: [{ required: true, message: '请输入标识编码！', trigger: 'blur' }],
|
||
name: [{ required: true, message: '请输入组织名称！', trigger: 'blur' }],
|
||
},
|
||
formData: {},
|
||
},
|
||
|
||
zzry: {
|
||
queryConfig: false,
|
||
tableConfig: {
|
||
table: {},
|
||
immediate: false,
|
||
query: (params) =>
|
||
this.$http({
|
||
url: `/baseData/fightPowerHierarchy/staff/${this.zzjg.selectedKeys[0]}`,
|
||
method: 'get',
|
||
params,
|
||
}),
|
||
columns: [
|
||
{ dataIndex: 'serial' },
|
||
{ title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
||
{ title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
||
{ dataIndex: 'action' },
|
||
],
|
||
},
|
||
pageConfig: false,
|
||
showTool: false,
|
||
},
|
||
zzryModal: {
|
||
visible: false,
|
||
title: '',
|
||
mode: '',
|
||
formItems: [
|
||
{
|
||
label: '岗位名称',
|
||
prop: 'typeId',
|
||
component: 'AntOriginSelect',
|
||
options: {
|
||
dataSource: () =>
|
||
this.$http({
|
||
url: '/unit/getAll',
|
||
method: 'get',
|
||
}),
|
||
labelKey: 'name',
|
||
readonly: false,
|
||
},
|
||
},
|
||
{ label: '岗位数量', prop: 'number' },
|
||
],
|
||
formRules: {
|
||
typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
|
||
number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
|
||
},
|
||
formData: {},
|
||
},
|
||
|
||
zzzb: {
|
||
queryConfig: false,
|
||
tableConfig: {
|
||
table: {},
|
||
immediate: false,
|
||
query: (params) =>
|
||
this.$http({
|
||
url: `/baseData/fightPowerHierarchy/weapon/${this.zzjg.selectedKeys[0]}`,
|
||
method: 'get',
|
||
params,
|
||
}),
|
||
columns: [
|
||
{ dataIndex: 'serial' },
|
||
{ title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
||
{ title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
||
{ dataIndex: 'action' },
|
||
],
|
||
},
|
||
pageConfig: false,
|
||
showTool: false,
|
||
},
|
||
zzzbModal: {
|
||
visible: false,
|
||
title: '',
|
||
mode: '',
|
||
formItems: [
|
||
{
|
||
label: '装备名称',
|
||
prop: 'weaponId',
|
||
component: 'AntOriginTreeSelect',
|
||
options: {
|
||
dataSource: () =>
|
||
this.$http({
|
||
url: '/tree/armament',
|
||
method: 'get',
|
||
}),
|
||
readonly: false,
|
||
},
|
||
},
|
||
{ label: '装备数量', prop: 'number' },
|
||
],
|
||
formRules: {
|
||
weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
|
||
number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
|
||
},
|
||
formData: {},
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
gridRows() {
|
||
return {
|
||
auto: [1, 1],
|
||
zzry: [1, '56px'],
|
||
zzzb: ['56px', 1],
|
||
}[this.layoutRight]
|
||
},
|
||
zzzbFormItems() {
|
||
return [
|
||
this.zzzbModal.mode === 'add'
|
||
? {
|
||
label: '装备名称',
|
||
prop: 'weaponId',
|
||
component: 'AntOriginTreeSelect',
|
||
options: {
|
||
dataSource: () =>
|
||
this.$http({
|
||
url: '/tree/armament',
|
||
method: 'get',
|
||
}),
|
||
readonly: false,
|
||
},
|
||
}
|
||
: { label: '装备名称', prop: 'name', customRender: (v) => v },
|
||
{ label: '装备数量', prop: 'number' },
|
||
]
|
||
},
|
||
},
|
||
created() {
|
||
this.getZzTree()
|
||
},
|
||
methods: {
|
||
async getZzTree() {
|
||
try {
|
||
const res = await this.$http({
|
||
url: `/tree/organization`,
|
||
method: 'get',
|
||
params: { unittype: 2 },
|
||
})
|
||
this.zzjg.treeData = res.data
|
||
this.zzjg.selectedKeys = [this.zzjg.treeData[0].key]
|
||
this.handleChangeZzjgSelected()
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
handleChangeZzjgSelected() {
|
||
this.$refs['zzry-table'].commitAction('reload')
|
||
this.$refs['zzzb-table'].commitAction('reload')
|
||
},
|
||
handleOpenAddZzjgModal(parentId) {
|
||
this.zzjgModal.title = '新建保障力量'
|
||
this.zzjgModal.mode = 'add'
|
||
this.zzjgModal.formData = { unittype: 2, parentId }
|
||
this.zzjgModal.visible = true
|
||
},
|
||
async handleOpenEditZzjgModal(id) {
|
||
try {
|
||
const res = await this.$http({
|
||
url: `/baseData/fightPowerHierarchy/${id}`,
|
||
method: 'get',
|
||
})
|
||
this.zzjgModal.title = '编辑保障力量'
|
||
this.zzjgModal.mode = 'edit'
|
||
this.zzjgModal.formData = res.data
|
||
this.zzjgModal.visible = true
|
||
} catch (error) {
|
||
console.log(error)
|
||
this.$message.error('未知错误，请重试')
|
||
}
|
||
},
|
||
handleSubmitZzjg(formData) {
|
||
return this.$http({
|
||
url: `/baseData/fightPowerHierarchy/save`,
|
||
method: 'post',
|
||
data: formData,
|
||
})
|
||
},
|
||
handleSubmitZzjgSuccess() {
|
||
this.getZzTree()
|
||
},
|
||
async handleDeleteZzjg(id, title) {
|
||
try {
|
||
await this.$confirm({ content: `确定删除保障力量-${title}？` })
|
||
await this.$http({
|
||
url: `/baseData/fightPowerHierarchy/remove/${id}`,
|
||
method: 'get',
|
||
})
|
||
this.$message.success('删除成功')
|
||
this.getZzTree()
|
||
} catch (error) {}
|
||
},
|
||
|
||
handleOpenAddZzryModal() {
|
||
this.zzryModal.title = '新建组织人员'
|
||
this.zzryModal.mode = 'add'
|
||
this.zzryModal.formData = { parentId: this.zzjg.selectedKeys[0] }
|
||
this.zzryModal.formItems[0].options.readonly = false
|
||
this.zzryModal.visible = true
|
||
},
|
||
handleOpenEditZzryModal(record) {
|
||
this.zzryModal.title = `编辑组织人员`
|
||
this.zzryModal.mode = 'edit'
|
||
this.zzryModal.formData = { ...record }
|
||
this.zzryModal.formItems[0].options.readonly = true
|
||
this.zzryModal.visible = true
|
||
},
|
||
handleSubmitZzry(formData) {
|
||
return this.$http({
|
||
url: `/baseData/fightPowerHierarchy/staff/save`,
|
||
method: 'post',
|
||
data: formData,
|
||
})
|
||
},
|
||
handleSubmitZzrySuccess() {
|
||
this.$refs['zzry-table'].commitAction('query')
|
||
},
|
||
|
||
handleOpenAddZzzbModal() {
|
||
this.zzzbModal.title = '新建组织装备'
|
||
this.zzzbModal.mode = 'add'
|
||
this.zzzbModal.formData = { parentId: this.zzjg.selectedKeys[0] }
|
||
this.zzzbModal.visible = true
|
||
},
|
||
handleOpenEditZzzbModal(record) {
|
||
this.zzzbModal.title = `编辑组织装备`
|
||
this.zzzbModal.mode = 'edit'
|
||
this.zzzbModal.formData = { ...record }
|
||
this.zzzbModal.visible = true
|
||
},
|
||
handleSubmitZzzb(formData) {
|
||
return this.$http({
|
||
url: `/baseData/fightPowerHierarchy/weapon/save`,
|
||
method: 'post',
|
||
data: formData,
|
||
})
|
||
},
|
||
handleSubmitZzzbSuccess() {
|
||
this.$refs['zzzb-table'].commitAction('query')
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.contextmenu-zz {
|
||
padding: 5px;
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 5px #aaaaaa;
|
||
}
|
||
</style>
|