121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<page-header-wrapper>
|
|
<Grid>
|
|
<a-card class="my-card">
|
|
<AntQueryTable
|
|
height="100%"
|
|
ref="fd-table"
|
|
:queryConfig="fdTable.queryConfig"
|
|
:tableConfig="fdTable.tableConfig"
|
|
:pageConfig="fdTable.pageConfig"
|
|
:showTool="fdTable.showTool"
|
|
>
|
|
<template #toolbar-left>
|
|
<a-button type="primary" icon="plus" @click="handleOpenAddModal()">新增</a-button>
|
|
</template>
|
|
<template #tablecell-action="{ record }">
|
|
<a-button type="text-primary" icon="edit" @click="handleOpenEditModal(record)"></a-button>
|
|
<a-button type="text-danger" icon="delete" @click="handleDelete(record)"></a-button>
|
|
</template>
|
|
</AntQueryTable>
|
|
</a-card>
|
|
</Grid>
|
|
<AntFormModal
|
|
:visible.sync="AEModal.visible"
|
|
:title="AEModal.title"
|
|
width="900px"
|
|
:formConfig="{ labelCol: { span: 3 }, wrapperCol: { span: 19 } }"
|
|
:formItems="AEModal.formItems"
|
|
:formRules="AEModal.formRules"
|
|
:formData="AEModal.formData"
|
|
:onSubmit="handleSubmitAE"
|
|
@success="handleSubmitAESuccess"
|
|
></AntFormModal>
|
|
</page-header-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction, postAction } from '@/api/manage'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
fdTable: {
|
|
queryConfig: false,
|
|
tableConfig: {
|
|
query: () => getAction('/team/list'),
|
|
columns: [
|
|
{ dataIndex: 'serial' },
|
|
{ dataIndex: 'name', title: '分队名称', width: 'auto', minWidth: 160 },
|
|
{
|
|
dataIndex: 'type',
|
|
title: '分队类型',
|
|
width: 'auto',
|
|
minWidth: 160,
|
|
align: 'center',
|
|
customRender: (text) => ['作战分队', '保障分队'][text],
|
|
},
|
|
{ dataIndex: 'action' },
|
|
],
|
|
},
|
|
pageConfig: true,
|
|
showTool: true,
|
|
},
|
|
AEModal: {
|
|
visible: false,
|
|
title: '',
|
|
formItems: [
|
|
{ label: '分队名称', prop: 'name' },
|
|
{
|
|
label: '分队类型',
|
|
prop: 'type',
|
|
component: 'AntOriginSelect',
|
|
options: {
|
|
dataSource: () => ({
|
|
data: [
|
|
{ title: '作战分队', id: 0 },
|
|
{ title: '保障分队', id: 1 },
|
|
],
|
|
}),
|
|
},
|
|
},
|
|
{ label: '分队军标', prop: 'iconId', component: 'IconSelector' },
|
|
],
|
|
formRules: {},
|
|
formData: {},
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleOpenAddModal() {
|
|
this.AEModal.title = '新增分队'
|
|
this.AEModal.formData = {}
|
|
this.AEModal.visible = true
|
|
},
|
|
handleOpenEditModal(record) {
|
|
this.AEModal.title = '编辑分队'
|
|
this.AEModal.formData = { ...record }
|
|
this.AEModal.visible = true
|
|
},
|
|
handleSubmitAE(formData) {
|
|
return postAction('/team/save', formData)
|
|
},
|
|
handleSubmitAESuccess() {
|
|
this.$refs['fd-table'].commitAction('query')
|
|
},
|
|
async handleDelete(record) {
|
|
try {
|
|
await this.$confirm({ title: '温馨提示', content: '确定要删除该分队吗？' })
|
|
const res = await getAction('/team/remove/' + record.id)
|
|
this.$message.success(res.message)
|
|
this.$refs['fd-table'].commitAction('query')
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|