作战、保障力量数据库增加组织维护功能
This commit is contained in:
parent
002466d844
commit
bc20f37a31
|
|
@ -39,6 +39,7 @@
|
|||
"vue-cropper": "0.4.9",
|
||||
"vue-i18n": "^8.27.1",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-resize-directive": "^1.2.0",
|
||||
"vue-router": "^3.5.3",
|
||||
"vue-svg-component-runtime": "^1.0.1",
|
||||
"vuex": "^3.6.2",
|
||||
|
|
|
|||
86
src/components/Common/Layout/AntFormModal.vue
Normal file
86
src/components/Common/Layout/AntFormModal.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<a-modal v-model="_visible" v-bind="_modalConfig" @ok="handleOk()">
|
||||
<a-spin :spinning="loading">
|
||||
<a-form-model ref="form" :model="formData" :rules="formRules" v-bind="_formConfig">
|
||||
<a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
|
||||
<span v-if="item.customRender">{{ item.customRender(formData[item.prop], formData) }}</span>
|
||||
<component
|
||||
v-else
|
||||
:is="item.component || 'a-input'"
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.options"
|
||||
v-on="item.listeners"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible: { type: Boolean, required: true },
|
||||
formConfig: { type: Object, default: () => ({}) },
|
||||
formItems: { type: Array, default: () => [] },
|
||||
formRules: { type: Object, default: () => ({}) },
|
||||
formData: { type: Object, default: () => ({}) },
|
||||
onSubmit: { type: Function, default: () => Promise.reject('没有onSubmit参数') },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_visible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('update:visible', v)
|
||||
},
|
||||
},
|
||||
_modalConfig() {
|
||||
return {
|
||||
maskClosable: false,
|
||||
destroyOnClose: true,
|
||||
...this.$attrs,
|
||||
}
|
||||
},
|
||||
_formConfig() {
|
||||
return {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 15 },
|
||||
layout: 'horizontal',
|
||||
...this.formConfig,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async handleOk() {
|
||||
try {
|
||||
await this.$refs.form.validate()
|
||||
this.loading = true
|
||||
await this.onSubmit(this.formData)
|
||||
.then((res) => {
|
||||
this.$emit('success', this.formData, res)
|
||||
return Promise.resolve(true)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$emit('fail', this.formData, error)
|
||||
return Promise.reject(false)
|
||||
})
|
||||
this._visible = false
|
||||
this.$message.success(`${this._modalConfig.title}成功`)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
516
src/components/Common/Layout/AntQueryTable.vue
Normal file
516
src/components/Common/Layout/AntQueryTable.vue
Normal file
|
|
@ -0,0 +1,516 @@
|
|||
<template>
|
||||
<div class="ant-query-table" :style="{ height }">
|
||||
<slot name="qt-top-query" :queryParams="queryParams" :tableData="tableData"></slot>
|
||||
<div v-if="queryConfig !== false" class="qt-query">
|
||||
<a-form-model layout="inline" :model="queryTemp">
|
||||
<a-form-model-item v-for="item in queryConfig.items" :key="item.prop" :label="item.label">
|
||||
<slot :name="`query-${item.prop}`" :prop="item.prop" :queryParams="queryTemp">
|
||||
<component
|
||||
:is="item.component || 'a-input'"
|
||||
v-model="queryTemp[item.prop]"
|
||||
v-bind="item.options"
|
||||
v-on="item.listeners"
|
||||
/>
|
||||
</slot>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-space :size="16">
|
||||
<a-button type="primary" @click="handleQueryBtnClick">查询</a-button>
|
||||
<a-button @click="handleResetBtnClick">重置</a-button>
|
||||
<slot name="querybar-action"></slot>
|
||||
</a-space>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
<slot name="qt-query-toolbar" :queryParams="queryParams" :tableData="tableData"></slot>
|
||||
<div v-if="showTool" class="qt-toolbar">
|
||||
<slot name="toolbar">
|
||||
<a-space :size="16">
|
||||
<slot
|
||||
name="toolbar-left"
|
||||
:tableData="tableData"
|
||||
:selectedRows="selectedRows"
|
||||
:selectedRowKeys="selectedRowKeys"
|
||||
:queryParams="queryParams"
|
||||
:queryParamsWithoutPage="queryTemp"
|
||||
/>
|
||||
</a-space>
|
||||
<a-space :size="16">
|
||||
<slot name="toolbar-right" />
|
||||
</a-space>
|
||||
</slot>
|
||||
</div>
|
||||
<div ref="qt-table" class="qt-table" v-resize="handleTableResize">
|
||||
<a-table
|
||||
ref="table"
|
||||
:columns="tableColumns"
|
||||
:loading="tableLoading"
|
||||
:data-source="tableData"
|
||||
:pagination="false"
|
||||
v-bind="tableConf"
|
||||
:scroll="tableScrollConfig"
|
||||
:style="{ height: '100%' }"
|
||||
:rowSelection="rowSelection"
|
||||
>
|
||||
<template v-for="(_, name) in tabletitleSlots" :slot="name">
|
||||
<slot :name="name" />
|
||||
</template>
|
||||
<template v-for="(config, name) in titleRender" :slot="name">
|
||||
<div :key="name" :style="{ display: 'flex', alignItems: 'center' }">
|
||||
<span>{{ config.title }}</span>
|
||||
<a-popover title="注释">
|
||||
<template slot="content">
|
||||
{{ config.explain }}
|
||||
</template>
|
||||
<a-icon type="exclamation-circle" style="width: 14px; height: 14px; margin-left: 5px; cursor: pointer" />
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
<template v-for="(_, name) in tablecellSlots" :slot="name" slot-scope="text, record, index">
|
||||
<slot :name="tablecellSlotPrefix + name" v-bind="{ text, record, index }" :data-index="name" />
|
||||
</template>
|
||||
</a-table>
|
||||
<div v-if="tableScrollY" class="qt-table-border__bottom"></div>
|
||||
</div>
|
||||
<div v-if="isPageMode" class="qt-page">
|
||||
<a-pagination v-bind="pageConf" @change="handlePageChange" @showSizeChange="handlePageChange"></a-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
import {
|
||||
defaultUserColumns,
|
||||
tabletitleSlotPrefix,
|
||||
tablecellSlotPrefix,
|
||||
defaultTableCellWidth,
|
||||
defaultTableScrollSize,
|
||||
defaultTableConfig,
|
||||
actionSlotName,
|
||||
defaultPageSize,
|
||||
defaultPageConfig,
|
||||
} from './defaultSettings'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
height: { type: [String, Boolean], default: 'auto' },
|
||||
queryConfig: { type: [Object, Boolean], default: () => ({}) },
|
||||
tableConfig: { type: Object, default: () => ({}) },
|
||||
pageConfig: { type: [Object, Boolean], default: () => ({}) },
|
||||
showTool: { type: Boolean, default: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryTemp: {},
|
||||
tableLoading: false,
|
||||
tableData: [],
|
||||
selectedRows: [],
|
||||
selectedRowKeys: [],
|
||||
widthMap: {
|
||||
date: 168,
|
||||
},
|
||||
titleRender: {},
|
||||
tableScrollX: false,
|
||||
tableScrollY: false,
|
||||
tabletitleSlotPrefix,
|
||||
tablecellSlotPrefix,
|
||||
actionSlotName,
|
||||
total: 0,
|
||||
pageParams: { pageNum: 1, pageSize: defaultPageSize },
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isPageMode() {
|
||||
return this.pageConfig !== false
|
||||
},
|
||||
queryParams() {
|
||||
if (this.isPageMode) {
|
||||
return { ...this.queryTemp, ...this.pageParams }
|
||||
}
|
||||
return this.queryTemp
|
||||
},
|
||||
tableColumns() {
|
||||
const { columns, userColumns = false } = this.tableConfig
|
||||
const originColumns = cloneDeep(columns)
|
||||
// 暂存序号列
|
||||
let serialCol = null
|
||||
const serialColIndex = originColumns.findIndex((col) => col.dataIndex === 'serial')
|
||||
if (serialColIndex > -1) {
|
||||
serialCol = originColumns[serialColIndex]
|
||||
originColumns.splice(serialColIndex, 1)
|
||||
}
|
||||
// 暂存操作列
|
||||
let actionCol = null
|
||||
const actionColIndex = originColumns.findIndex((col) => col.dataIndex === actionSlotName)
|
||||
if (actionColIndex > -1) {
|
||||
actionCol = originColumns[actionColIndex]
|
||||
originColumns.splice(actionColIndex, 1)
|
||||
}
|
||||
// 先处理其他列
|
||||
if (userColumns) {
|
||||
originColumns.push(...defaultUserColumns)
|
||||
}
|
||||
this.handleColumns(originColumns)
|
||||
// 补充序号列到第一列
|
||||
if (serialCol) {
|
||||
originColumns.unshift({
|
||||
title: '序号',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
...serialCol,
|
||||
customRender: this.renderSerial.bind(this, serialCol.followPage === true),
|
||||
fixed: 'left',
|
||||
})
|
||||
}
|
||||
// 补充操作列到最后一列
|
||||
if (actionCol) {
|
||||
originColumns.push({
|
||||
title: '操作',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
...actionCol,
|
||||
slots: { title: 'action-title' },
|
||||
scopedSlots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
})
|
||||
}
|
||||
return originColumns
|
||||
},
|
||||
tableMaxWidth() {
|
||||
return this.calculateWidthByColumns(this.tableColumns)
|
||||
},
|
||||
tableScrollConfig() {
|
||||
return {
|
||||
...(this.tableScrollX === false ? {} : { x: '100%' }),
|
||||
...(this.tableScrollY === false ? {} : { y: this.tableScrollY }),
|
||||
}
|
||||
},
|
||||
tableConf() {
|
||||
return {
|
||||
...defaultTableConfig,
|
||||
...this.tableConfig.table,
|
||||
}
|
||||
},
|
||||
defaultRowSelection() {
|
||||
return {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
onChange: this.handleSelectChange.bind(this),
|
||||
fixed: true,
|
||||
getCheckboxProps: (record) => ({
|
||||
props: { disabled: record.selectable === false },
|
||||
style: { display: record.selectable === false ? 'none' : '' },
|
||||
}),
|
||||
}
|
||||
},
|
||||
rowSelection() {
|
||||
if (!this.tableConfig.select) return null
|
||||
if (this.tableConfig.select instanceof Object) {
|
||||
return {
|
||||
...this.tableConfig.select,
|
||||
...this.defaultRowSelection,
|
||||
}
|
||||
}
|
||||
return this.defaultRowSelection
|
||||
},
|
||||
tabletitleSlots() {
|
||||
const tabletitleSlots = {}
|
||||
for (const slotName in this.$scopedSlots) {
|
||||
if (!slotName.startsWith(this.tabletitleSlotPrefix)) continue
|
||||
const slotFunc = this.$scopedSlots[slotName]
|
||||
tabletitleSlots[slotName] = slotFunc
|
||||
}
|
||||
return tabletitleSlots
|
||||
},
|
||||
tablecellSlots() {
|
||||
const tablecellSlots = {}
|
||||
for (const slotName in this.$scopedSlots) {
|
||||
if (!slotName.startsWith(this.tablecellSlotPrefix)) continue
|
||||
const translotName = slotName.replace(this.tablecellSlotPrefix, '')
|
||||
const slotFunc = this.$scopedSlots[slotName]
|
||||
tablecellSlots[translotName] = slotFunc
|
||||
}
|
||||
return tablecellSlots
|
||||
},
|
||||
pageConf() {
|
||||
if (!this.isPageMode) return false
|
||||
return {
|
||||
...defaultPageConfig,
|
||||
current: this.pageParams.pageNum,
|
||||
pageSize: this.pageParams.pageSize,
|
||||
total: this.total,
|
||||
onChange: this.handlePageChange.bind(this),
|
||||
onShowSizeChange: this.handlePageChange.bind(this),
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.queryConfig && this.queryConfig.initQueryParams) {
|
||||
this.initQueryTemp()
|
||||
}
|
||||
const immediate = this.tableConfig.immediate
|
||||
if (immediate !== false) this.queryTable()
|
||||
},
|
||||
methods: {
|
||||
initQueryTemp() {
|
||||
const { initQueryParams = {} } = this.queryConfig
|
||||
this.queryTemp = cloneDeep(initQueryParams)
|
||||
},
|
||||
handleTableResize(target) {
|
||||
if (!target) return
|
||||
this.tableScrollX = target.offsetWidth < this.tableMaxWidth
|
||||
const tableBody = target.querySelector('.ant-table-scroll>.ant-table-body>table>.ant-table-tbody') || {
|
||||
offsetHeight: 0,
|
||||
}
|
||||
const innerHeight =
|
||||
this.getTableHeadDom(target, this.tableScrollY).offsetHeight +
|
||||
tableBody.offsetHeight +
|
||||
(this.tableScrollX ? defaultTableScrollSize : 0)
|
||||
if (target.offsetHeight > innerHeight) {
|
||||
this.tableScrollY = false
|
||||
} else {
|
||||
this.tableScrollY = true
|
||||
this.$nextTick(() => {
|
||||
this.tableScrollY = target.offsetHeight - this.getTableHeadDom(target, true).offsetHeight
|
||||
})
|
||||
}
|
||||
},
|
||||
getTableHeadDom(target, tableScrollY) {
|
||||
let tableHead = null
|
||||
if (tableScrollY === false) {
|
||||
tableHead = target.querySelector('.ant-table-scroll>.ant-table-body>table>.ant-table-thead')
|
||||
} else {
|
||||
tableHead = target.querySelector('.ant-table-scroll>.ant-table-header>table')
|
||||
}
|
||||
return tableHead || { offsetHeight: 0 }
|
||||
},
|
||||
handleColumns(originColumns) {
|
||||
for (let i = 0; i < originColumns.length; i++) {
|
||||
const {
|
||||
title,
|
||||
titleConfig,
|
||||
dataIndex,
|
||||
style,
|
||||
width,
|
||||
minWidth,
|
||||
align,
|
||||
type,
|
||||
format,
|
||||
dictName,
|
||||
digits,
|
||||
unit = '',
|
||||
} = originColumns[i]
|
||||
if (!title) {
|
||||
originColumns[i].slots = { title: tabletitleSlotPrefix + dataIndex }
|
||||
}
|
||||
if (!title && titleConfig) {
|
||||
this.$set(this.titleRender, tabletitleSlotPrefix + dataIndex, titleConfig)
|
||||
originColumns[i].align = align || 'right'
|
||||
}
|
||||
originColumns[i].scopedSlots = { customRender: dataIndex }
|
||||
if (!width) {
|
||||
originColumns[i].width = this.widthMap[type] || defaultTableCellWidth
|
||||
}
|
||||
if (width === 'auto' && this.tableScrollX !== false) {
|
||||
originColumns[i].width = minWidth || defaultTableCellWidth
|
||||
}
|
||||
if (type === 'number') {
|
||||
originColumns[i].align = align || 'right'
|
||||
originColumns[i].customRender = (text) => {
|
||||
if (isNaN(text)) {
|
||||
return text || ''
|
||||
} else {
|
||||
let num = text
|
||||
if (typeof digits === 'number') {
|
||||
num = Number(text).toLocaleString('en', { minimumFractionDigits: digits })
|
||||
}
|
||||
return unit ? `${num} ${unit}` : num
|
||||
}
|
||||
}
|
||||
}
|
||||
if (type === 'date') {
|
||||
originColumns[i].align = align || 'center'
|
||||
originColumns[i].customRender = (text) => (text && format ? moment(text).format(format) : text)
|
||||
}
|
||||
if (originColumns[i].children) {
|
||||
this.handleColumns(originColumns[i].children)
|
||||
continue
|
||||
}
|
||||
}
|
||||
},
|
||||
calculateWidthByColumns(columns) {
|
||||
let baseWidth = 0
|
||||
if (this.rowSelection) {
|
||||
baseWidth = this.rowSelection.columnWidth || 60
|
||||
}
|
||||
return columns.reduce((cur, col) => {
|
||||
if (col.children && col.children.length > 0) {
|
||||
return cur + this.calculateWidthByColumns(col.children)
|
||||
}
|
||||
return cur + (col.width === 'auto' ? col.minWidth || defaultTableCellWidth : col.width)
|
||||
}, baseWidth)
|
||||
},
|
||||
async queryTable() {
|
||||
this.tableLoading = true
|
||||
try {
|
||||
let res = []
|
||||
if (this.tableConfig.query && typeof this.tableConfig.query === 'function') {
|
||||
res = await this.tableConfig.query(this.queryParams)
|
||||
}
|
||||
// console.log('----res----', res)
|
||||
if (!this.isPageMode) {
|
||||
// ---- 不分页 ----
|
||||
this.tableData = res?.data || []
|
||||
this.tableLoading = false
|
||||
this.$nextTick(() => {
|
||||
this.handleTableResize(this.$refs['qt-table'])
|
||||
})
|
||||
return
|
||||
}
|
||||
// ---- 分页模式 ----
|
||||
this.tableData = res.data || []
|
||||
this.total = res.totalCount || 0
|
||||
if (this.tableData.length === 0 && this.total > 0) {
|
||||
this.pageParams.pageNum = Math.ceil(this.total / this.pageParams.pageSize)
|
||||
this.queryTable()
|
||||
} else {
|
||||
this.tableLoading = false
|
||||
this.$nextTick(() => {
|
||||
this.handleTableResize(this.$refs['qt-table'])
|
||||
})
|
||||
}
|
||||
} catch {
|
||||
this.tableLoading = false
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
this.$nextTick(() => {
|
||||
this.handleTableResize(this.$refs['qt-table'])
|
||||
})
|
||||
}
|
||||
this.handleSelectChange(
|
||||
this.selectedRowKeys.filter((key) => this.tableData.some((d) => d[this.tableConf.rowKey] === key)),
|
||||
this.selectedRows.filter((r) =>
|
||||
this.tableData.some((d) => d[this.tableConf.rowKey] === r[this.tableConf.rowKey])
|
||||
)
|
||||
)
|
||||
},
|
||||
handleQueryBtnClick() {
|
||||
this.pageParams.pageNum = 1
|
||||
this.commitAction('query')
|
||||
},
|
||||
handleResetBtnClick() {
|
||||
this.initQueryTemp()
|
||||
this.pageParams.pageNum = 1
|
||||
this.commitAction('query')
|
||||
},
|
||||
handleSelectChange(selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
renderSerial(followPage, text, record, index) {
|
||||
if (text) return text
|
||||
const { pageNum, pageSize } = this.pageParams
|
||||
const base = followPage ? pageSize * (pageNum - 1) + 1 : 1
|
||||
return base + index
|
||||
},
|
||||
handlePageChange(page, size) {
|
||||
if (this.pageParams.pageSize === size) {
|
||||
this.pageParams.pageNum = page
|
||||
} else {
|
||||
this.pageParams.pageNum = 1
|
||||
this.pageParams.pageSize = size
|
||||
}
|
||||
this.queryTable()
|
||||
},
|
||||
commitAction(action) {
|
||||
switch (action) {
|
||||
case 'query':
|
||||
this.queryTable()
|
||||
break
|
||||
case 'reload':
|
||||
this.queryTemp = {}
|
||||
this.pageParams.pageNum = 1
|
||||
this.pageParams.pageSize = defaultPageSize
|
||||
this.queryTable()
|
||||
break
|
||||
|
||||
case 'gofirst':
|
||||
this.pageParams.pageNum = 1
|
||||
this.queryTable()
|
||||
}
|
||||
},
|
||||
getQueryParams(withPage = false) {
|
||||
if (withPage) {
|
||||
return cloneDeep(this.queryParams)
|
||||
} else {
|
||||
return cloneDeep(this.queryTemp)
|
||||
}
|
||||
},
|
||||
setQueryParamsValue(key, value) {
|
||||
this.$set(this.queryTemp, key, value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ant-query-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.qt-query {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ant-input-affix-wrapper .ant-input {
|
||||
width: 190px;
|
||||
}
|
||||
.ant-select {
|
||||
width: 190px;
|
||||
}
|
||||
.ant-select-dropdown {
|
||||
max-height: 246px !important;
|
||||
top: 28px !important;
|
||||
}
|
||||
.ant-select-dropdown-menu {
|
||||
max-height: 246px;
|
||||
}
|
||||
}
|
||||
|
||||
.qt-toolbar {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.qt-table {
|
||||
min-height: 122px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
.ant-table-row-indent {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.ant-table-thead .ant-table-row-cell-break-word {
|
||||
text-align: center !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.qt-table-border__bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
.qt-table::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qt-page {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
25
src/components/Common/Layout/defaultSettings.js
Normal file
25
src/components/Common/Layout/defaultSettings.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
export const defaultUserColumns = [
|
||||
{ title: '创建时间', dataIndex: 'createTime', type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
|
||||
{ title: '创建人', dataIndex: 'createUserName', width: 130, align: 'center' },
|
||||
{ title: '更新时间', dataIndex: 'updateTime', type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
|
||||
{ title: '更新人', dataIndex: 'updateUserName', width: 130, align: 'center' },
|
||||
]
|
||||
export const tabletitleSlotPrefix = 'tabletitle-'
|
||||
export const tablecellSlotPrefix = 'tablecell-'
|
||||
export const defaultTableCellWidth = 168
|
||||
// 滚动条的大小需要与样式表中保持一致
|
||||
// 当前样式详见@/style/antd.less#@table-scroll-size
|
||||
export const defaultTableScrollSize = 8
|
||||
export const defaultTableConfig = {
|
||||
bordered: true,
|
||||
rowKey: 'id',
|
||||
}
|
||||
|
||||
export const actionSlotName = 'action'
|
||||
|
||||
export const defaultPageSize = 10
|
||||
export const defaultPageConfig = {
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['5', '10', '20', '50'],
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
import ModuleWrapper from './Layout/ModuleWrapper.vue'
|
||||
import Flex from './Layout/Flex.vue'
|
||||
import Grid from './Layout/Grid.vue'
|
||||
import AntFormModal from './Layout/AntFormModal.vue'
|
||||
import AntQueryTable from './Layout/AntQueryTable.vue'
|
||||
|
||||
import AntOriginSelect from './Form/AntOriginSelect.vue'
|
||||
import AntOriginTreeSelect from './Form/AntOriginTreeSelect.vue'
|
||||
|
|
@ -9,6 +11,7 @@ import DurationPicker from './Form/DurationPicker.vue'
|
|||
import WangEditor from './WangEditor/Index.vue'
|
||||
|
||||
import Loading from './Directives/Loading'
|
||||
import resize from 'vue-resize-directive'
|
||||
|
||||
import Bus from './Bus/index'
|
||||
import MyCesium from './Cesium/index'
|
||||
|
|
@ -19,6 +22,8 @@ export default {
|
|||
Vue.component('ModuleWrapper', ModuleWrapper)
|
||||
Vue.component('Flex', Flex)
|
||||
Vue.component('Grid', Grid)
|
||||
Vue.component('AntFormModal', AntFormModal)
|
||||
Vue.component('AntQueryTable', AntQueryTable)
|
||||
|
||||
Vue.component('AntOriginSelect', AntOriginSelect)
|
||||
Vue.component('AntOriginTreeSelect', AntOriginTreeSelect)
|
||||
|
|
@ -27,6 +32,7 @@ export default {
|
|||
Vue.component('WangEditor', WangEditor)
|
||||
|
||||
Vue.directive('loading', Loading)
|
||||
Vue.directive('resize', resize)
|
||||
|
||||
window.$bus = Bus
|
||||
window.MyCesium = MyCesium
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<div :class="wrpCls">
|
||||
<avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
|
||||
<select-lang :class="prefixCls" />
|
||||
<!-- <select-lang :class="prefixCls" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AvatarDropdown from './AvatarDropdown'
|
||||
import SelectLang from '@/components/SelectLang'
|
||||
// import SelectLang from '@/components/SelectLang'
|
||||
|
||||
export default {
|
||||
name: 'RightContent',
|
||||
components: {
|
||||
AvatarDropdown,
|
||||
SelectLang
|
||||
// SelectLang
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
|
|
|
|||
|
|
@ -48,3 +48,46 @@
|
|||
.ant-layout-footer {
|
||||
display: none;
|
||||
}
|
||||
.ant-pro-basicLayout-content {
|
||||
margin: 0;
|
||||
> .ant-pro-basicLayout-children-content-wrap {
|
||||
height: 100%;
|
||||
> .ant-pro-grid-content {
|
||||
height: 100%;
|
||||
> .ant-pro-page-header-wrap {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
> .ant-pro-grid-content {
|
||||
height: calc(100% - 89px);
|
||||
min-height: 0;
|
||||
> .ant-pro-page-header-wrap-children-content {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
> div {
|
||||
height: calc(100vh - 201px);
|
||||
overflow: overlay;
|
||||
}
|
||||
.my-card {
|
||||
overflow: hidden;
|
||||
.ant-card-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
.ant-card-body {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.my-card-has-title {
|
||||
.ant-card-body {
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,121 @@
|
|||
<template>
|
||||
<page-header-wrapper>
|
||||
<Grid :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"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -90,143 +124,171 @@ 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: '',
|
||||
layoutRight: 'auto',
|
||||
zzjg: {
|
||||
treeData: [],
|
||||
selectedKeys: [],
|
||||
expandedKeys: [],
|
||||
},
|
||||
zzjgModal: {
|
||||
visible: false,
|
||||
editStatus: false,
|
||||
fullscreen: false,
|
||||
spinning: false,
|
||||
form: {},
|
||||
staffRules: {
|
||||
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' }],
|
||||
unittype: [{ required: true, message: '请选择组织类型！', trigger: 'blur' }],
|
||||
},
|
||||
formData: {},
|
||||
},
|
||||
|
||||
zzry: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/staff/${this.zzjg.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
}),
|
||||
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' }],
|
||||
},
|
||||
weaponRules: {
|
||||
formData: {},
|
||||
},
|
||||
|
||||
zzzb: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/weapon/${this.zzjg.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
}),
|
||||
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' }],
|
||||
},
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 7 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
|
||||
formData: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return this[`${this.queryParam.type}Columns`]
|
||||
gridRows() {
|
||||
return {
|
||||
auto: [1, 1],
|
||||
zzry: [1, '56px'],
|
||||
zzzb: ['56px', 1],
|
||||
}[this.layoutRight]
|
||||
},
|
||||
typeMapLabel() {
|
||||
return { staff: '人员', weapon: '装备' }[this.queryParam.type]
|
||||
},
|
||||
formItems() {
|
||||
const result = []
|
||||
switch (this.queryParam.type) {
|
||||
case 'staff':
|
||||
result.push(
|
||||
{
|
||||
label: '岗位名称',
|
||||
prop: 'typeId',
|
||||
component: 'AntOriginSelect',
|
||||
zzzbFormItems() {
|
||||
return [
|
||||
this.zzzbModal.mode === 'add'
|
||||
? {
|
||||
label: '装备名称',
|
||||
prop: 'weaponId',
|
||||
component: 'AntOriginTreeSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/unit/getAll',
|
||||
url: '/tree/armament',
|
||||
method: 'get',
|
||||
}),
|
||||
labelKey: 'name',
|
||||
readonly: this.AEModal.editStatus,
|
||||
readonly: false,
|
||||
},
|
||||
},
|
||||
{ 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
|
||||
}
|
||||
: { label: '装备名称', prop: 'name', customRender: (v) => v },
|
||||
{ label: '装备数量', prop: 'number' },
|
||||
]
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
|
@ -240,82 +302,116 @@ export default {
|
|||
method: 'get',
|
||||
params: { unittype: 2 },
|
||||
})
|
||||
this.zzTree = res.data
|
||||
this.selectedKeys = [this.zzTree[0].key]
|
||||
this.getList()
|
||||
this.zzjg.treeData = res.data
|
||||
this.zzjg.selectedKeys = [this.zzjg.treeData[0].key]
|
||||
this.handleChangeZzjgSelected()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
resetList() {
|
||||
this.getList()
|
||||
handleChangeZzjgSelected() {
|
||||
this.$refs['zzry-table'].commitAction('reload')
|
||||
this.$refs['zzzb-table'].commitAction('reload')
|
||||
},
|
||||
async getList(parameter = {}) {
|
||||
handleOpenAddZzjgModal(parentId) {
|
||||
this.zzjgModal.title = '新建作战力量'
|
||||
this.zzjgModal.mode = 'add'
|
||||
this.zzjgModal.formData = { unittype: 2, parentId }
|
||||
this.zzjgModal.visible = true
|
||||
},
|
||||
async handleOpenEditZzjgModal(id) {
|
||||
try {
|
||||
this.loadingTable = true
|
||||
const res = await this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/${this.selectedKeys[0]}`,
|
||||
url: `/baseData/fightPowerHierarchy/${id}`,
|
||||
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
|
||||
this.zzjgModal.title = '编辑作战力量'
|
||||
this.zzjgModal.mode = 'edit'
|
||||
this.zzjgModal.formData = res.data
|
||||
this.zzjgModal.visible = true
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('未知错误，请重试')
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.AEModal.visible = false
|
||||
this.AEModal.form = {}
|
||||
handleSubmitZzjg(formData) {
|
||||
return this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/save`,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
})
|
||||
},
|
||||
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)
|
||||
}
|
||||
handleSubmitZzjgSuccess() {
|
||||
this.getZzTree()
|
||||
},
|
||||
async handleDelete(record) {
|
||||
async handleDeleteZzjg(id, title) {
|
||||
try {
|
||||
await this.$confirm({ content: `确定删除作战力量-${title}？` })
|
||||
await this.$http({
|
||||
url: `/baseData/scenario/remove/${record.id}`,
|
||||
url: `/baseData/fightPowerHierarchy/remove/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
this.$message.success('删除角色成功')
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('删除角色失败')
|
||||
}
|
||||
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></style>
|
||||
<style lang="less" scoped>
|
||||
.contextmenu-zz {
|
||||
padding: 5px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px #aaaaaa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,121 @@
|
|||
<template>
|
||||
<page-header-wrapper>
|
||||
<Grid :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"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -90,143 +124,171 @@ export default {
|
|||
name: 'Zzllsjk',
|
||||
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: '',
|
||||
layoutRight: 'auto',
|
||||
zzjg: {
|
||||
treeData: [],
|
||||
selectedKeys: [],
|
||||
expandedKeys: [],
|
||||
},
|
||||
zzjgModal: {
|
||||
visible: false,
|
||||
editStatus: false,
|
||||
fullscreen: false,
|
||||
spinning: false,
|
||||
form: {},
|
||||
staffRules: {
|
||||
title: '',
|
||||
mode: '',
|
||||
formItems: [
|
||||
{
|
||||
label: '上级组织',
|
||||
prop: 'parentId',
|
||||
component: 'AntOriginTreeSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/tree/organization',
|
||||
method: 'get',
|
||||
params: { unittype: 1 },
|
||||
}).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' }],
|
||||
unittype: [{ required: true, message: '请选择组织类型！', trigger: 'blur' }],
|
||||
},
|
||||
formData: {},
|
||||
},
|
||||
|
||||
zzry: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/staff/${this.zzjg.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
}),
|
||||
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' }],
|
||||
},
|
||||
weaponRules: {
|
||||
formData: {},
|
||||
},
|
||||
|
||||
zzzb: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/weapon/${this.zzjg.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
}),
|
||||
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' }],
|
||||
},
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 7 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
|
||||
formData: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return this[`${this.queryParam.type}Columns`]
|
||||
gridRows() {
|
||||
return {
|
||||
auto: [1, 1],
|
||||
zzry: [1, '56px'],
|
||||
zzzb: ['56px', 1],
|
||||
}[this.layoutRight]
|
||||
},
|
||||
typeMapLabel() {
|
||||
return { staff: '人员', weapon: '装备' }[this.queryParam.type]
|
||||
},
|
||||
formItems() {
|
||||
const result = []
|
||||
switch (this.queryParam.type) {
|
||||
case 'staff':
|
||||
result.push(
|
||||
{
|
||||
label: '岗位名称',
|
||||
prop: 'typeId',
|
||||
component: 'AntOriginSelect',
|
||||
zzzbFormItems() {
|
||||
return [
|
||||
this.zzzbModal.mode === 'add'
|
||||
? {
|
||||
label: '装备名称',
|
||||
prop: 'weaponId',
|
||||
component: 'AntOriginTreeSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
this.$http({
|
||||
url: '/unit/getAll',
|
||||
url: '/tree/armament',
|
||||
method: 'get',
|
||||
}),
|
||||
labelKey: 'name',
|
||||
readonly: this.AEModal.editStatus,
|
||||
readonly: false,
|
||||
},
|
||||
},
|
||||
{ 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
|
||||
}
|
||||
: { label: '装备名称', prop: 'name', customRender: (v) => v },
|
||||
{ label: '装备数量', prop: 'number' },
|
||||
]
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
|
@ -240,82 +302,116 @@ export default {
|
|||
method: 'get',
|
||||
params: { unittype: 1 },
|
||||
})
|
||||
this.zzTree = res.data
|
||||
this.selectedKeys = [this.zzTree[0].key]
|
||||
this.getList()
|
||||
this.zzjg.treeData = res.data
|
||||
this.zzjg.selectedKeys = [this.zzjg.treeData[0].key]
|
||||
this.handleChangeZzjgSelected()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
resetList() {
|
||||
this.getList()
|
||||
handleChangeZzjgSelected() {
|
||||
this.$refs['zzry-table'].commitAction('reload')
|
||||
this.$refs['zzzb-table'].commitAction('reload')
|
||||
},
|
||||
async getList(parameter = {}) {
|
||||
handleOpenAddZzjgModal(parentId) {
|
||||
this.zzjgModal.title = '新建作战力量'
|
||||
this.zzjgModal.mode = 'add'
|
||||
this.zzjgModal.formData = { unittype: 1, parentId }
|
||||
this.zzjgModal.visible = true
|
||||
},
|
||||
async handleOpenEditZzjgModal(id) {
|
||||
try {
|
||||
this.loadingTable = true
|
||||
const res = await this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/${this.selectedKeys[0]}`,
|
||||
url: `/baseData/fightPowerHierarchy/${id}`,
|
||||
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
|
||||
this.zzjgModal.title = '编辑作战力量'
|
||||
this.zzjgModal.mode = 'edit'
|
||||
this.zzjgModal.formData = res.data
|
||||
this.zzjgModal.visible = true
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('未知错误，请重试')
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.AEModal.visible = false
|
||||
this.AEModal.form = {}
|
||||
handleSubmitZzjg(formData) {
|
||||
return this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/save`,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
})
|
||||
},
|
||||
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)
|
||||
}
|
||||
handleSubmitZzjgSuccess() {
|
||||
this.getZzTree()
|
||||
},
|
||||
async handleDelete(record) {
|
||||
async handleDeleteZzjg(id, title) {
|
||||
try {
|
||||
await this.$confirm({ content: `确定删除作战力量-${title}？` })
|
||||
await this.$http({
|
||||
url: `/baseData/scenario/remove/${record.id}`,
|
||||
url: `/baseData/fightPowerHierarchy/remove/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
this.$message.success('删除角色成功')
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.$message.error('删除角色失败')
|
||||
}
|
||||
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></style>
|
||||
<style lang="less" scoped>
|
||||
.contextmenu-zz {
|
||||
padding: 5px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px #aaaaaa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user