111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<template>
|
|
<page-header-wrapper>
|
|
<Grid>
|
|
<a-card class="my-card">
|
|
<AntQueryTable
|
|
height="100%"
|
|
ref="tx-table"
|
|
:queryConfig="txTable.queryConfig"
|
|
:tableConfig="txTable.tableConfig"
|
|
:pageConfig="txTable.pageConfig"
|
|
:showTool="txTable.showTool"
|
|
>
|
|
<template #toolbar-left>
|
|
<a-button type="primary" icon="plus" @click="handleOpenAddModal">新增</a-button>
|
|
</template>
|
|
<template #tablecell-iconBase64="{ text }">
|
|
<img :src="text" alt="" style="width: 24px; height: 24px; object-fit: contain" />
|
|
</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 { deleteAction, getAction, postAction, putAction } from '@/api/manage'
|
|
export default {
|
|
name: 'Txsjk',
|
|
data() {
|
|
return {
|
|
txTable: {
|
|
queryConfig: false,
|
|
tableConfig: {
|
|
query: (params) => getAction('/icon/list', params),
|
|
columns: [
|
|
{ dataIndex: 'serial' },
|
|
{ dataIndex: 'iconName', title: '军标名称', width: 'auto', align: 'center' },
|
|
{ dataIndex: 'iconBase64', title: '军标图片', width: 'auto', align: 'center' },
|
|
{ dataIndex: 'action' },
|
|
],
|
|
},
|
|
pageConfig: true,
|
|
showTool: true,
|
|
},
|
|
AEModal: {
|
|
visible: false,
|
|
title: '新增图形',
|
|
formItems: [
|
|
{ label: '军标名称', prop: 'iconName' },
|
|
{ label: '军标图片', prop: 'iconBase64', component: 'Image2Base64' },
|
|
],
|
|
formRules: {},
|
|
formData: {},
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleOpenAddModal() {
|
|
this.AEModal.formData = {}
|
|
this.AEModal.visible = true
|
|
},
|
|
async handleOpenEditModal(record) {
|
|
try {
|
|
const res = await getAction(`/icon/${record.id}`)
|
|
this.AEModal.formData = res.data
|
|
this.AEModal.visible = true
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
handleSubmitAE(formData) {
|
|
return this.$http({
|
|
url: '/icon/save',
|
|
method: 'post',
|
|
data: formData,
|
|
})
|
|
},
|
|
handleSubmitAESuccess() {
|
|
this.$refs['tx-table'].commitAction('query')
|
|
},
|
|
async handleDelete(record) {
|
|
try {
|
|
await this.$confirm({ title: '温馨提示', content: '确定要删除该军标吗？' })
|
|
const res = await getAction('/icon/remove/' + record.id)
|
|
this.$message.success(res.message)
|
|
this.$refs['tx-table'].commitAction('query')
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|