组织数据库，作战力量数据库，保障力量数据库，进程数据库
This commit is contained in:
parent
f2d6211ea7
commit
f8cebd6776
138
src/components/Common/Form/AntOriginSelect.vue
Normal file
138
src/components/Common/Form/AntOriginSelect.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<div>
|
||||
<span v-if="readonly">{{ getText }}</span>
|
||||
<a-select
|
||||
v-else
|
||||
v-model="_value"
|
||||
:options="options"
|
||||
:mode="selectMode"
|
||||
:filter-option="filterOption"
|
||||
:style="{ width, minWidth: '100px' }"
|
||||
v-bind="selectConf"
|
||||
v-on="getListeners"
|
||||
@change="handleChange"
|
||||
@dropdownVisibleChange="getOptions"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defaultSelectConfig } from './defaultSettings'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: { validator: () => true, required: true },
|
||||
dataSource: { type: Function, required: true },
|
||||
valueKey: { type: String, default: 'id' },
|
||||
labelKey: { type: String, default: 'title' },
|
||||
readonly: { type: Boolean, default: false },
|
||||
width: { validator: () => true, default: '100%' },
|
||||
multiple: { type: Boolean, default: false },
|
||||
immediate: { type: Boolean, default: true },
|
||||
allowEmpty: { type: [Boolean, Array], default: true },
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
originData: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_value: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
},
|
||||
getListeners () {
|
||||
const listeners = {}
|
||||
for (const key in this.$listeners) {
|
||||
if (key === 'change') continue
|
||||
listeners[key] = this.$listeners[key]
|
||||
}
|
||||
return listeners
|
||||
},
|
||||
selectMode () {
|
||||
return this.multiple ? 'multiple' : ''
|
||||
},
|
||||
options () {
|
||||
return this.originData.map((o) => ({
|
||||
value: o[this.valueKey],
|
||||
label: o[this.labelKey],
|
||||
disabled: o.disabled,
|
||||
}))
|
||||
},
|
||||
getText () {
|
||||
if (this.multiple) {
|
||||
return (this._value || []).map((v) => this.options.find((o) => o.value === v)?.label).join(',')
|
||||
} else {
|
||||
return this.options.find((o) => o.value === this._value)?.label
|
||||
}
|
||||
},
|
||||
getOriginItem () {
|
||||
return (this._value || []).map((v) => this.originData.find((d) => d[this.valueKey] === v))
|
||||
},
|
||||
selectConf () {
|
||||
return {
|
||||
...defaultSelectConfig,
|
||||
...this.$attrs,
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
if (this.immediate) {
|
||||
this.getOptions(true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getOptions (visible) {
|
||||
if (!visible) return
|
||||
try {
|
||||
const res = await this.dataSource()
|
||||
this.originData = (res.data || []).filter((d) => {
|
||||
if (typeof this.allowEmpty === 'boolean') {
|
||||
return this.allowEmpty || Boolean(d[this.labelKey])
|
||||
}
|
||||
return Boolean(d[this.labelKey]) || this.allowEmpty.includes(d[this.labelKey])
|
||||
})
|
||||
} catch (error) {
|
||||
this.originData = []
|
||||
}
|
||||
},
|
||||
filterOption (input, selectVm) {
|
||||
return selectVm.componentOptions.children[0]?.text.toLowerCase().includes(input.toLowerCase()) || false
|
||||
},
|
||||
handleChange (v) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit(
|
||||
'change',
|
||||
v,
|
||||
this.multiple
|
||||
? (v || []).map((vi) => this.options.find((o) => o.value === vi)?.label)
|
||||
: this.options.find((o) => o.value === v)?.label,
|
||||
this.multiple
|
||||
? (v || []).map((vi) => this.originData.find((o) => o[this.valueKey] === vi))
|
||||
: this.originData.find((d) => d[this.valueKey] === v)
|
||||
)
|
||||
})
|
||||
},
|
||||
commitAction (action, payload = true) {
|
||||
switch (action) {
|
||||
case 'get':
|
||||
this.getOptions(payload)
|
||||
break
|
||||
case 'refresh':
|
||||
this.originData = []
|
||||
this.getOptions(payload)
|
||||
break
|
||||
case 'clear':
|
||||
this.originData = []
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
183
src/components/Common/Form/AntOriginTreeSelect.vue
Normal file
183
src/components/Common/Form/AntOriginTreeSelect.vue
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<div>
|
||||
<span v-if="readonly">{{ getText }}</span>
|
||||
<a-tree-select
|
||||
v-else
|
||||
v-model="_value"
|
||||
:tree-data="treeData"
|
||||
:replaceFields="{ value: valueKey, title: labelKey }"
|
||||
:filterTreeNode="filterTreeConfig"
|
||||
:style="{ width, minWidth: '100px' }"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
treeDefaultExpandAll
|
||||
v-bind="selectConf"
|
||||
v-on="getListeners"
|
||||
@change="handleChange"
|
||||
@focus="getTreeData"
|
||||
>
|
||||
</a-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defaultSelectConfig } from './defaultSettings'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: { validator: () => true, required: true },
|
||||
dataSource: { type: Function, required: true },
|
||||
valueKey: { type: String, default: 'value' },
|
||||
labelKey: { type: String, default: 'title' },
|
||||
childrenKey: { type: String, default: 'children' },
|
||||
readonly: { type: Boolean, default: false },
|
||||
width: { type: String, default: '' },
|
||||
immediate: { type: Boolean, default: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_value: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
},
|
||||
getItem() {
|
||||
console.log('----', this.treeData, this._value)
|
||||
return this.findInTree(this.treeData, this._value)
|
||||
},
|
||||
getText() {
|
||||
console.log('----', this.getItem)
|
||||
return this.getItem && this.getItem[this.labelKey]
|
||||
},
|
||||
getListeners() {
|
||||
const listeners = {}
|
||||
for (const key in this.$listeners) {
|
||||
if (key === 'change') continue
|
||||
listeners[key] = this.$listeners[key]
|
||||
}
|
||||
return listeners
|
||||
},
|
||||
selectConf() {
|
||||
return {
|
||||
...defaultSelectConfig,
|
||||
treeDefaultExpandAll: true,
|
||||
...this.$attrs,
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.immediate) {
|
||||
this.getTreeData(true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTreeData(visible) {
|
||||
if (!visible) return
|
||||
try {
|
||||
const res = await this.dataSource()
|
||||
this.treeData = res.data
|
||||
} catch (error) {
|
||||
this.treeData = []
|
||||
}
|
||||
},
|
||||
filterTreeConfig(input, treeNode) {
|
||||
return treeNode.data.props.title.includes(input)
|
||||
},
|
||||
findInTree(list, value) {
|
||||
let res = null
|
||||
for (let index = 0; index < list.length; index++) {
|
||||
const item = list[index]
|
||||
if (item[this.valueKey] === value) {
|
||||
res = item
|
||||
break
|
||||
}
|
||||
if (item[this.childrenKey]) {
|
||||
res = this.findInTree(item[this.childrenKey], value)
|
||||
}
|
||||
if (res !== null) {
|
||||
break
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
getFullPathInTree(list, target, path = [], res = [], level = 0) {
|
||||
for (let index = 0; index < list.length; index++) {
|
||||
const item = list[index]
|
||||
path[level] = item[this.valueKey]
|
||||
if (item[this.valueKey] === target) {
|
||||
res[0] = item
|
||||
} else if (item[this.childrenKey]) {
|
||||
this.getFullPathInTree(item[this.childrenKey], target, path, res, level + 1)
|
||||
if (!res[0]) {
|
||||
path.length = level + 1
|
||||
}
|
||||
}
|
||||
if (res[0]) {
|
||||
break
|
||||
}
|
||||
path[level] = ''
|
||||
}
|
||||
if (!res[0]) {
|
||||
path.length = 0
|
||||
}
|
||||
return path
|
||||
},
|
||||
getFullDataInTree(list, target, path = [], res = [], level = 0) {
|
||||
for (let index = 0; index < list.length; index++) {
|
||||
const item = list[index]
|
||||
path[level] = item
|
||||
if (item[this.valueKey] === target) {
|
||||
res[0] = item
|
||||
} else if (item[this.childrenKey]) {
|
||||
this.getFullDataInTree(item[this.childrenKey], target, path, res, level + 1)
|
||||
if (!res[0]) {
|
||||
path.length = level + 1
|
||||
}
|
||||
}
|
||||
if (res[0]) {
|
||||
break
|
||||
}
|
||||
path[level] = null
|
||||
}
|
||||
if (!res[0]) {
|
||||
path.length = 0
|
||||
}
|
||||
return path
|
||||
},
|
||||
handleChange(v, [t]) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit(
|
||||
'change',
|
||||
v,
|
||||
t,
|
||||
this.findInTree(this.treeData, v),
|
||||
this.getFullPathInTree(this.treeData, v),
|
||||
this.getFullDataInTree(this.treeData, v)
|
||||
)
|
||||
})
|
||||
},
|
||||
commitAction(action, payload = true) {
|
||||
switch (action) {
|
||||
case 'get':
|
||||
this.getTreeData(payload)
|
||||
break
|
||||
case 'refresh':
|
||||
this.treeData = []
|
||||
this.getTreeData(payload)
|
||||
break
|
||||
case 'clear':
|
||||
this.treeData = []
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
10
src/components/Common/Form/defaultSettings.js
Normal file
10
src/components/Common/Form/defaultSettings.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export const defaultSelectConfig = {
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
}
|
||||
|
||||
export const defaultConfig = {
|
||||
modal: { width: 900 },
|
||||
layout: { span: 24, label: 6, input: 15 },
|
||||
form: { layout: 'horizontal', labelAlign: 'right', colon: true },
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
import ModuleWrapper from './Layout/ModuleWrapper.vue'
|
||||
|
||||
import AntOriginSelect from './Form/AntOriginSelect.vue'
|
||||
import AntOriginTreeSelect from './Form/AntOriginTreeSelect.vue'
|
||||
|
||||
import GridBox from './Directives/GridBox'
|
||||
import Flex from './Directives/Flex'
|
||||
import Loading from './Directives/Loading'
|
||||
|
|
@ -10,6 +13,9 @@ export default {
|
|||
install(Vue) {
|
||||
Vue.component('ModuleWrapper', ModuleWrapper)
|
||||
|
||||
Vue.component('AntOriginSelect', AntOriginSelect)
|
||||
Vue.component('AntOriginTreeSelect', AntOriginTreeSelect)
|
||||
|
||||
Vue.directive('grid-box', GridBox)
|
||||
Vue.directive('flex', Flex)
|
||||
Vue.directive('loading', Loading)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,322 @@
|
|||
<template>
|
||||
<div>bzllsjk</div>
|
||||
<page-header-wrapper>
|
||||
<div v-grid-box="{ columns: ['400px', 1] }">
|
||||
<a-card :bordered="false">
|
||||
<a-tree :treeData="zzTree" :selectedKeys.sync="selectedKeys" @select="getList()"> </a-tree>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :xl="8" :lg="8">
|
||||
<a-radio-group v-model="queryParam.type" button-style="solid" @change="getList()">
|
||||
<a-radio-button value="staff"> 人员 </a-radio-button>
|
||||
<a-radio-button value="weapon"> 装备 </a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="8">
|
||||
<span class="table-page-search-submitButtons" style="float: right">
|
||||
<a-button type="primary" @click="getList">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetList">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="8">
|
||||
<a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-table
|
||||
bordered
|
||||
rowKey="id"
|
||||
size="small"
|
||||
:columns="columns"
|
||||
:dataSource="loadData"
|
||||
:pagination="false"
|
||||
:loading="loadingTable"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)"> <a-icon type="form" /></a>
|
||||
<!-- <a-divider type="vertical" />
|
||||
|
||||
<a-popconfirm
|
||||
title="确定要删除该岗位吗？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="handleDelete(record)"
|
||||
>
|
||||
<a href="javascript:;"><a-icon type="delete" /></a>
|
||||
</a-popconfirm> -->
|
||||
</span>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<h-modal
|
||||
:title="AEModal.title"
|
||||
:width="640"
|
||||
:visible="AEModal.visible"
|
||||
:destroyOnClose="true"
|
||||
@cancel="() => this.handleClose()"
|
||||
@ok="() => this.handleOk()"
|
||||
switch-fullscreen
|
||||
:fullscreen.sync="AEModal.fullscreen"
|
||||
>
|
||||
<a-spin :spinning="AEModal.spinning">
|
||||
<a-form-model
|
||||
ref="form"
|
||||
:model="AEModal.form"
|
||||
:rules="AEModal[`${queryParam.type}Rules`]"
|
||||
:label-col="AEModal.labelCol"
|
||||
:wrapper-col="AEModal.wrapperCol"
|
||||
>
|
||||
<a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
|
||||
<span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
|
||||
<component
|
||||
v-else
|
||||
:is="item.component || 'a-input'"
|
||||
v-model="AEModal.form[item.prop]"
|
||||
v-bind="item.options"
|
||||
v-on="item.listeners"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
</h-modal>
|
||||
</page-header-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
export default {
|
||||
name: 'Bzllsjk',
|
||||
data() {
|
||||
return {
|
||||
zzTree: [],
|
||||
selectedKeys: [],
|
||||
|
||||
queryParam: { id: '', type: 'staff' },
|
||||
staffColumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'index',
|
||||
customRender: (_, record, $index) => $index + 1,
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '岗位',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '岗位数量',
|
||||
dataIndex: 'number',
|
||||
},
|
||||
// {
|
||||
// title: '物资器材',
|
||||
// dataIndex: 'material',
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
weaponColumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'index',
|
||||
customRender: (_, record, $index) => $index + 1,
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '装备名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '装备数量',
|
||||
dataIndex: 'number',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
loadData: [], // 加载数据方法 必须为 Promise 对象
|
||||
loadingTable: false,
|
||||
|
||||
AEModal: {
|
||||
title: '',
|
||||
visible: false,
|
||||
editStatus: false,
|
||||
fullscreen: false,
|
||||
spinning: false,
|
||||
form: {},
|
||||
staffRules: {
|
||||
typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
|
||||
number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
|
||||
},
|
||||
weaponRules: {
|
||||
weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
|
||||
number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
|
||||
},
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 7 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return this[`${this.queryParam.type}Columns`]
|
||||
},
|
||||
typeMapLabel() {
|
||||
return { staff: '人员', weapon: '装备' }[this.queryParam.type]
|
||||
},
|
||||
formItems() {
|
||||
const result = []
|
||||
switch (this.queryParam.type) {
|
||||
case 'staff':
|
||||
result.push(
|
||||
{
|
||||
label: '岗位名称',
|
||||
prop: 'typeId',
|
||||
component: 'AntOriginSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/unit/getAll',
|
||||
method: 'get',
|
||||
}),
|
||||
labelKey: 'name',
|
||||
readonly: this.AEModal.editStatus,
|
||||
},
|
||||
},
|
||||
{ label: '岗位数量', prop: 'number' }
|
||||
// { label: '物资器材', prop: 'material' }
|
||||
)
|
||||
break
|
||||
case 'weapon':
|
||||
result.push(
|
||||
this.AEModal.editStatus
|
||||
? {
|
||||
label: '装备名称',
|
||||
prop: 'name',
|
||||
customRender: (v) => v,
|
||||
}
|
||||
: {
|
||||
label: '装备名称',
|
||||
prop: 'weaponId',
|
||||
component: 'AntOriginTreeSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/tree/armament',
|
||||
method: 'get',
|
||||
}),
|
||||
readonly: this.AEModal.editStatus,
|
||||
},
|
||||
},
|
||||
{ label: '装备数量', prop: 'number' }
|
||||
)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
return result
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getZzTree()
|
||||
},
|
||||
methods: {
|
||||
async getZzTree() {
|
||||
try {
|
||||
const res = await this.$http({
|
||||
url: `/tree/organization`,
|
||||
method: 'get',
|
||||
params: { unittype: 2 },
|
||||
})
|
||||
this.zzTree = res.data
|
||||
this.selectedKeys = [this.zzTree[0].key]
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
resetList() {
|
||||
this.getList()
|
||||
},
|
||||
async getList(parameter = {}) {
|
||||
try {
|
||||
this.loadingTable = true
|
||||
const res = await this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/${this.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
})
|
||||
this.loadData = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loadingTable = false
|
||||
}
|
||||
},
|
||||
handleAdd() {
|
||||
this.AEModal.form = { parentId: this.selectedKeys[0] }
|
||||
this.AEModal.title = `添加${this.typeMapLabel}`
|
||||
this.AEModal.editStatus = false
|
||||
this.AEModal.visible = true
|
||||
},
|
||||
async handleEdit(record) {
|
||||
try {
|
||||
this.AEModal.form = { ...record }
|
||||
this.AEModal.title = `编辑${this.typeMapLabel}`
|
||||
this.AEModal.editStatus = true
|
||||
this.AEModal.visible = true
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('未知错误，请重试')
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.AEModal.visible = false
|
||||
this.AEModal.form = {}
|
||||
},
|
||||
async handleOk() {
|
||||
try {
|
||||
await this.$refs.form.validate()
|
||||
const params = { ...this.AEModal.form }
|
||||
await this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/save`,
|
||||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
this.$message.success(`${this.AEModal.title}成功!`)
|
||||
this.getList()
|
||||
this.handleClose()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error(error.message || '未知错误，请重试')
|
||||
}
|
||||
},
|
||||
async handleDelete(record) {
|
||||
try {
|
||||
await this.$http({
|
||||
url: `/baseData/scenario/remove/${record.id}`,
|
||||
method: 'get',
|
||||
})
|
||||
this.$message.success('删除角色成功')
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('删除角色失败')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
|
|
@ -102,17 +102,17 @@ export default {
|
|||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '分队',
|
||||
title: '分队名称',
|
||||
dataIndex: '0',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '方案类型',
|
||||
title: '方案名称',
|
||||
dataIndex: '1',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '方案目标',
|
||||
title: '方案类型',
|
||||
dataIndex: '2',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
|
|
|
|||
|
|
@ -102,45 +102,20 @@ export default {
|
|||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '分队',
|
||||
title: '任务进程名称',
|
||||
dataIndex: '0',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '方案类型',
|
||||
dataIndex: '1',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '方案目标',
|
||||
dataIndex: '2',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
width: 160,
|
||||
dataIndex: '3',
|
||||
dataIndex: '1',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
title: '失效时间',
|
||||
width: 160,
|
||||
dataIndex: '4',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '经度',
|
||||
width: 120,
|
||||
dataIndex: 'lat',
|
||||
customRender: (_, record, $index) => record[5].split(',')[0],
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '纬度',
|
||||
width: 120,
|
||||
dataIndex: 'lon',
|
||||
customRender: (_, record, $index) => record[5].split(',')[0],
|
||||
dataIndex: '2',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
|
|
@ -194,7 +169,7 @@ export default {
|
|||
try {
|
||||
this.loadingTable = true
|
||||
const res = await this.$http({
|
||||
url: '/baseData/scenario/schemeList',
|
||||
url: '/baseData/scenario/taskList',
|
||||
method: 'get',
|
||||
params: { ...parameter, ...this.queryParam },
|
||||
})
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ export default {
|
|||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
this.$message.success(this.AEModal.editStatus ? '编辑想定成功!' : '添加想定成功!')
|
||||
this.$message.success(`${this.AEModal.title}成功`)
|
||||
this.getList()
|
||||
this.handleClose()
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -9,18 +9,20 @@
|
|||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :xl="8" :lg="8">
|
||||
<a-radio-group v-model="queryParam.type" button-style="solid" @change="handleChangeType">
|
||||
<a-radio-group v-model="queryParam.type" button-style="solid" @change="getList()">
|
||||
<a-radio-button value="staff"> 人员 </a-radio-button>
|
||||
<a-radio-button value="weapon"> 装备 </a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="8"> </a-col>
|
||||
<a-col :xl="8" :lg="8">
|
||||
<span class="table-page-search-submitButtons" style="float: right">
|
||||
<a-button type="primary" @click="getList">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetList">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="8">
|
||||
<a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
|
@ -63,12 +65,19 @@
|
|||
<a-form-model
|
||||
ref="form"
|
||||
:model="AEModal.form"
|
||||
:rules="AEModal.rules"
|
||||
:rules="AEModal[`${queryParam.type}Rules`]"
|
||||
:label-col="AEModal.labelCol"
|
||||
:wrapper-col="AEModal.wrapperCol"
|
||||
>
|
||||
<a-form-model-item v-for="item in AEModal.formItems" :key="item.prop" v-bind="item">
|
||||
<a-input v-model="AEModal.form[item.prop]" />
|
||||
<a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
|
||||
<span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
|
||||
<component
|
||||
v-else
|
||||
:is="item.component || 'a-input'"
|
||||
v-model="AEModal.form[item.prop]"
|
||||
v-bind="item.options"
|
||||
v-on="item.listeners"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
|
|
@ -85,7 +94,7 @@ export default {
|
|||
selectedKeys: [],
|
||||
|
||||
queryParam: { id: '', type: 'staff' },
|
||||
columns: [
|
||||
staffColumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'index',
|
||||
|
|
@ -101,9 +110,33 @@ export default {
|
|||
title: '岗位数量',
|
||||
dataIndex: 'number',
|
||||
},
|
||||
// {
|
||||
// title: '物资器材',
|
||||
// dataIndex: 'material',
|
||||
// },
|
||||
{
|
||||
title: '物资器材',
|
||||
dataIndex: 'material',
|
||||
title: '操作',
|
||||
width: 140,
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
weaponColumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'index',
|
||||
customRender: (_, record, $index) => $index + 1,
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '装备名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '装备数量',
|
||||
dataIndex: 'number',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
|
|
@ -123,18 +156,13 @@ export default {
|
|||
fullscreen: false,
|
||||
spinning: false,
|
||||
form: {},
|
||||
formItems: [
|
||||
{
|
||||
label: '岗位名称',
|
||||
prop: 'name',
|
||||
staffRules: {
|
||||
typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
|
||||
number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '岗位数量',
|
||||
prop: 'number',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入岗位名称！', trigger: 'blur' }],
|
||||
weaponRules: {
|
||||
weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
|
||||
number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
|
||||
},
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 7 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
|
||||
|
|
@ -142,9 +170,64 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return this[`${this.queryParam.type}Columns`]
|
||||
},
|
||||
typeMapLabel() {
|
||||
return { staff: '人员', weapon: '装备' }[this.queryParam.type]
|
||||
},
|
||||
formItems() {
|
||||
const result = []
|
||||
switch (this.queryParam.type) {
|
||||
case 'staff':
|
||||
result.push(
|
||||
{
|
||||
label: '岗位名称',
|
||||
prop: 'typeId',
|
||||
component: 'AntOriginSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/unit/getAll',
|
||||
method: 'get',
|
||||
}),
|
||||
labelKey: 'name',
|
||||
readonly: this.AEModal.editStatus,
|
||||
},
|
||||
},
|
||||
{ label: '岗位数量', prop: 'number' }
|
||||
// { label: '物资器材', prop: 'material' }
|
||||
)
|
||||
break
|
||||
case 'weapon':
|
||||
result.push(
|
||||
this.AEModal.editStatus
|
||||
? {
|
||||
label: '装备名称',
|
||||
prop: 'name',
|
||||
customRender: (v) => v,
|
||||
}
|
||||
: {
|
||||
label: '装备名称',
|
||||
prop: 'weaponId',
|
||||
component: 'AntOriginTreeSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/tree/armament',
|
||||
method: 'get',
|
||||
}),
|
||||
readonly: this.AEModal.editStatus,
|
||||
},
|
||||
},
|
||||
{ label: '装备数量', prop: 'number' }
|
||||
)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
return result
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getZzTree()
|
||||
|
|
@ -155,7 +238,7 @@ export default {
|
|||
const res = await this.$http({
|
||||
url: `/tree/organization`,
|
||||
method: 'get',
|
||||
params: { unitype: 1 },
|
||||
params: { unittype: 1 },
|
||||
})
|
||||
this.zzTree = res.data
|
||||
this.selectedKeys = [this.zzTree[0].key]
|
||||
|
|
@ -164,27 +247,6 @@ export default {
|
|||
console.log(error)
|
||||
}
|
||||
},
|
||||
handleChangeType(e) {
|
||||
switch (e.target.value) {
|
||||
case 'staff':
|
||||
this.columns[1].title = '岗位'
|
||||
this.columns[2].title = '岗位数量'
|
||||
this.columns[3].title = '物资器材'
|
||||
this.columns[3].dataIndex = 'material'
|
||||
this.AEModal.formItems[0].label = '岗位名称'
|
||||
this.AEModal.formItems[1].label = '岗位数量'
|
||||
break
|
||||
case 'weapon':
|
||||
this.columns[1].title = '装备名称'
|
||||
this.columns[2].title = '装备数量'
|
||||
this.columns[3].title = '装备类型'
|
||||
this.columns[3].dataIndex = 'type'
|
||||
this.AEModal.formItems[0].label = '装备名称'
|
||||
this.AEModal.formItems[1].label = '装备数量'
|
||||
break
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
resetList() {
|
||||
this.getList()
|
||||
},
|
||||
|
|
@ -203,7 +265,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleAdd() {
|
||||
this.AEModal.form = {}
|
||||
this.AEModal.form = { parentId: this.selectedKeys[0] }
|
||||
this.AEModal.title = `添加${this.typeMapLabel}`
|
||||
this.AEModal.editStatus = false
|
||||
this.AEModal.visible = true
|
||||
|
|
|
|||
267
src/views/simulationScene/database/zzsjk.vue
Normal file
267
src/views/simulationScene/database/zzsjk.vue
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<page-header-wrapper>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :xl="8" :lg="8">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="getList">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetList">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="8"> </a-col>
|
||||
<a-col :xl="8" :lg="8">
|
||||
<a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-table
|
||||
bordered
|
||||
rowKey="key"
|
||||
size="small"
|
||||
:columns="columns"
|
||||
:dataSource="loadData"
|
||||
:pagination="false"
|
||||
:loading="loadingTable"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)"> <a-icon type="form" /></a>
|
||||
<a-divider type="vertical" />
|
||||
|
||||
<a-popconfirm title="确定要删除该组织吗？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)">
|
||||
<a href="javascript:;"><a-icon type="delete" /></a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<h-modal
|
||||
:title="AEModal.title"
|
||||
:width="640"
|
||||
:visible="AEModal.visible"
|
||||
:destroyOnClose="true"
|
||||
@cancel="() => this.handleClose()"
|
||||
@ok="() => this.handleOk()"
|
||||
switch-fullscreen
|
||||
:fullscreen.sync="AEModal.fullscreen"
|
||||
>
|
||||
<a-spin :spinning="AEModal.spinning">
|
||||
<a-form-model
|
||||
ref="form"
|
||||
:model="AEModal.form"
|
||||
:rules="AEModal.rules"
|
||||
:label-col="AEModal.labelCol"
|
||||
:wrapper-col="AEModal.wrapperCol"
|
||||
>
|
||||
<a-form-model-item v-for="item in AEModal.formItems.concat(unittypeFormItem)" :key="item.prop" v-bind="item">
|
||||
<span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
|
||||
<component
|
||||
v-else
|
||||
:is="item.component || 'a-input'"
|
||||
v-model="AEModal.form[item.prop]"
|
||||
v-bind="item.options"
|
||||
v-on="item.listeners"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
</h-modal>
|
||||
</page-header-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Zzsjk',
|
||||
data() {
|
||||
return {
|
||||
queryParam: {}, // 查询参数
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'key',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '组织名称',
|
||||
align: 'left',
|
||||
dataIndex: 'title',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '组织类型',
|
||||
align: 'left',
|
||||
dataIndex: 'unittype',
|
||||
customRender: (v, record) => {
|
||||
return { 1: '作战力量', 2: '保障力量' }[record.data.unittype]
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
loadData: [], // 加载数据方法 必须为 Promise 对象
|
||||
loadingTable: false,
|
||||
|
||||
AEModal: {
|
||||
title: '',
|
||||
visible: false,
|
||||
editStatus: false,
|
||||
fullscreen: false,
|
||||
spinning: false,
|
||||
form: {},
|
||||
formItems: [
|
||||
{
|
||||
label: '上级组织',
|
||||
prop: 'parentId',
|
||||
component: 'AntOriginTreeSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/tree/organization',
|
||||
method: 'get',
|
||||
}).then((res) => ({ data: [{ key: 0, title: '根组织' }].concat(res.data) })),
|
||||
valueKey: 'key',
|
||||
},
|
||||
listeners: {
|
||||
change: (v, t, record) => {
|
||||
if (v === 0) {
|
||||
this.$set(this.AEModal.form, 'unittype', '')
|
||||
} else {
|
||||
this.$set(this.AEModal.form, 'unittype', record.data.unittype)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '标识编码',
|
||||
prop: 'codeName',
|
||||
},
|
||||
{
|
||||
label: '组织名称',
|
||||
prop: 'name',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
codeName: [{ required: true, message: '请输入标识编码！', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入组织名称！', trigger: 'blur' }],
|
||||
unittype: [{ required: true, message: '请选择组织类型！', trigger: 'blur' }],
|
||||
},
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 7 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unittypeFormItem() {
|
||||
return this.AEModal.form.parentId === 0
|
||||
? [
|
||||
{
|
||||
label: '组织类型',
|
||||
prop: 'unittype',
|
||||
component: 'a-radio-group',
|
||||
options: {
|
||||
options: [
|
||||
{ label: '作战力量', value: 1 },
|
||||
{ label: '保障力量', value: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
label: '组织类型',
|
||||
prop: 'unittype',
|
||||
customRender: (v) => ({ 1: '作战力量', 2: '保障力量' }[v]),
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
resetList() {
|
||||
this.queryParam = {}
|
||||
this.getList()
|
||||
},
|
||||
async getList(parameter = {}) {
|
||||
try {
|
||||
this.loadingTable = true
|
||||
const res = await this.$http({
|
||||
url: '/tree/organization',
|
||||
method: 'get',
|
||||
params: { ...parameter, ...this.queryParam },
|
||||
})
|
||||
this.loadData = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loadingTable = false
|
||||
}
|
||||
},
|
||||
handleAdd() {
|
||||
this.AEModal.form = { parentId: 0 }
|
||||
this.AEModal.title = '添加组织'
|
||||
this.AEModal.editStatus = false
|
||||
this.AEModal.visible = true
|
||||
},
|
||||
async handleEdit(record) {
|
||||
try {
|
||||
const res = await this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/${record.key}`,
|
||||
method: 'get',
|
||||
})
|
||||
this.AEModal.form = res.data
|
||||
this.AEModal.title = '编辑组织'
|
||||
this.AEModal.editStatus = true
|
||||
this.AEModal.visible = true
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('未知错误，请重试')
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.AEModal.visible = false
|
||||
this.AEModal.form = {}
|
||||
},
|
||||
async handleOk() {
|
||||
try {
|
||||
await this.$refs.form.validate()
|
||||
const params = { ...this.AEModal.form }
|
||||
await this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/save`,
|
||||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
this.$message.success(`${this.AEModal.title}成功`)
|
||||
this.getList()
|
||||
this.handleClose()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async handleDelete(record) {
|
||||
try {
|
||||
await this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/remove/${record.key}`,
|
||||
method: 'get',
|
||||
})
|
||||
this.$message.success('删除组织成功')
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('删除组织失败')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user