<template>
|
<div class="app-container seal-manage">
|
<div class="search-bar">
|
<el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
|
<el-form-item label="印章名称" prop="name">
|
<el-input v-model="queryParams.name" clearable placeholder="请输入" @keyup.enter="refreshTable" />
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="queryParams.status" clearable placeholder="全部">
|
<el-option label="启用" :value="1" />
|
<el-option label="停用" :value="0" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="refreshTable">查询</el-button>
|
<el-button size="small" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="toolbar">
|
<el-button type="primary" size="small" :icon="$icon('el-icon-plus')" @click="openForm()">新增</el-button>
|
<el-button type="primary" size="small" :icon="$icon('el-icon-download')" :loading="exportLoading" @click="handleExport">
|
导出
|
</el-button>
|
</div>
|
</div>
|
|
<lims-table
|
:table-data="tableData"
|
:column="columns"
|
:page="page"
|
:table-loading="tableLoading"
|
height="calc(100vh - 245px)"
|
@pagination="pagination"
|
/>
|
|
<el-dialog
|
:title="formTitle"
|
v-model="formVisible"
|
width="620px"
|
:close-on-click-modal="false"
|
@closed="resetSealForm"
|
>
|
<el-form ref="sealForm" :model="form" :rules="rules" label-width="100px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="印章名称" prop="name">
|
<el-input v-model="form.name" maxlength="64" placeholder="请输入印章名称" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="印章图片" prop="address">
|
<el-upload
|
ref="sealUpload"
|
class="seal-uploader"
|
:action="uploadAction"
|
:headers="uploadHeader"
|
accept="image/jpeg,image/png"
|
:show-file-list="false"
|
:before-upload="beforeUpload"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
>
|
<img v-if="form.address" :src="sealImageUrl(form.address)" class="seal-preview" alt="印章图片">
|
<div v-else class="seal-upload-placeholder">
|
<lims-icon name="el-icon-upload" />
|
<span>点击上传印章图片</span>
|
</div>
|
</el-upload>
|
<div class="upload-tip">仅支持 jpg / png，大小不超过 2MB</div>
|
</el-form-item>
|
<el-form-item label="使用范围" prop="useScope">
|
<el-input v-model="form.useScope" maxlength="255" placeholder="请输入使用范围" />
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio :value="1">启用</el-radio>
|
<el-radio :value="0">停用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="255" show-word-limit />
|
</el-form-item>
|
</el-form>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="formVisible = false">取 消</el-button>
|
<el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
|
</span></template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import limsTable from '@/components/Table/lims-table.vue'
|
import { addSeal, delSeal, exportSeal, pageSeal, updateSeal } from '@/api/structural/sealConfig'
|
|
function emptyForm() {
|
return {
|
id: null,
|
name: '',
|
address: '',
|
useScope: '',
|
status: 1,
|
remark: ''
|
}
|
}
|
|
export default {
|
name: 'SealManage',
|
components: { limsTable },
|
data() {
|
return {
|
queryParams: {
|
name: '',
|
status: null
|
},
|
page: {
|
total: 0,
|
size: 20,
|
current: 1
|
},
|
tableData: [],
|
tableLoading: false,
|
exportLoading: false,
|
formVisible: false,
|
submitLoading: false,
|
form: emptyForm(),
|
rules: {
|
name: [{ required: true, message: '请输入印章名称', trigger: 'blur' }],
|
address: [{ required: true, message: '请上传印章图片', trigger: 'change' }]
|
},
|
columns: [
|
{ label: '印章编号', prop: 'code', width: '110px' },
|
{ label: '印章名称', prop: 'name', width: '130px' },
|
{ label: '印章图片', prop: 'address', dataType: 'image', width: '100px' },
|
{ label: '使用范围', prop: 'useScope' },
|
{
|
label: '状态',
|
prop: 'status',
|
width: '90px',
|
dataType: 'tag',
|
formatData: value => Number(value) === 1 ? '启用' : '停用',
|
formatType: value => Number(value) === 1 ? 'success' : 'info'
|
},
|
{ label: '备注', prop: 'remark' },
|
{ label: '创建时间', prop: 'createTime', width: '165px' },
|
{
|
label: '操作',
|
dataType: 'action',
|
fixed: 'right',
|
width: '140px',
|
operation: [
|
{ name: '编辑', type: 'text', clickFun: row => this.openForm(row) },
|
{ name: '删除', type: 'text', clickFun: row => this.handleDelete(row) }
|
]
|
}
|
]
|
}
|
},
|
computed: {
|
formTitle() {
|
return this.form.id ? '编辑印章' : '新增印章'
|
},
|
uploadAction() {
|
return this.javaApi + '/sealConfig/upload'
|
}
|
},
|
mounted() {
|
this.getList()
|
},
|
methods: {
|
getList() {
|
this.tableLoading = true
|
const params = { ...this.queryParams, current: this.page.current, size: this.page.size }
|
pageSeal(params).then(res => {
|
this.tableData = res.data.records || []
|
this.page.total = res.data.total || 0
|
}).finally(() => {
|
this.tableLoading = false
|
})
|
},
|
refreshTable() {
|
this.page.current = 1
|
this.getList()
|
},
|
resetQuery() {
|
this.resetForm('queryForm')
|
this.page.current = 1
|
this.getList()
|
},
|
pagination({ page, limit }) {
|
this.page.current = page
|
this.page.size = limit
|
this.getList()
|
},
|
openForm(row) {
|
this.form = row ? { ...row } : emptyForm()
|
this.formVisible = true
|
this.$nextTick(() => this.$refs.sealForm && this.$refs.sealForm.clearValidate())
|
},
|
resetSealForm() {
|
this.form = emptyForm()
|
if (this.$refs.sealUpload) this.$refs.sealUpload.clearFiles()
|
if (this.$refs.sealForm) this.$refs.sealForm.clearValidate()
|
},
|
submitForm() {
|
this.$refs.sealForm.validate(valid => {
|
if (!valid) return
|
this.submitLoading = true
|
const request = this.form.id ? updateSeal : addSeal
|
request(this.form).then(() => {
|
this.$message.success(this.form.id ? '修改成功' : '新增成功')
|
this.formVisible = false
|
this.getList()
|
}).finally(() => {
|
this.submitLoading = false
|
})
|
})
|
},
|
handleDelete(row) {
|
this.$confirm(`确认删除印章“${row.name}”吗？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => delSeal(row.id)).then(() => {
|
this.$message.success('删除成功')
|
if (this.tableData.length === 1 && this.page.current > 1) this.page.current -= 1
|
this.getList()
|
}).catch(() => {})
|
},
|
handleExport() {
|
this.exportLoading = true
|
exportSeal(this.queryParams).then(data => {
|
this.$download.saveAs(new Blob([data]), '印章管理.xlsx')
|
}).finally(() => {
|
this.exportLoading = false
|
})
|
},
|
beforeUpload(file) {
|
const validType = ['image/jpeg', 'image/png'].includes(file.type)
|
const validSize = file.size / 1024 / 1024 <= 2
|
if (!validType) this.$message.error('仅支持 jpg / png 图片')
|
if (validType && !validSize) this.$message.error('图片大小不能超过 2MB')
|
return validType && validSize
|
},
|
handleUploadSuccess(response) {
|
if (response.code !== 200) {
|
this.$message.error(response.msg || '上传失败')
|
return
|
}
|
this.form.address = typeof response.data === 'string' ? response.data : response.data.url
|
this.$nextTick(() => this.$refs.sealForm.validateField('address'))
|
},
|
handleUploadError() {
|
this.$message.error('印章图片上传失败')
|
},
|
sealImageUrl(address) {
|
return this.javaApi + '/img/' + address
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.search-bar {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
}
|
|
.toolbar {
|
flex: none;
|
margin-left: 16px;
|
}
|
|
.seal-uploader :deep(.el-upload) {
|
overflow: hidden;
|
width: 150px;
|
height: 150px;
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
}
|
|
.seal-uploader :deep(.el-upload:hover) {
|
border-color: var(--el-color-primary);
|
}
|
|
.seal-preview {
|
display: block;
|
width: 150px;
|
height: 150px;
|
object-fit: contain;
|
}
|
|
.seal-upload-placeholder {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 100%;
|
color: #909399;
|
}
|
|
.seal-upload-placeholder i {
|
margin-bottom: 8px;
|
font-size: 30px;
|
}
|
|
.upload-tip {
|
color: #909399;
|
font-size: 12px;
|
line-height: 20px;
|
}
|
</style>
|
