5 changed files with 517 additions and 34 deletions
-
21src/api/labelSetting/label_type_management.js
-
414src/views/modules/labelSetting/components/LabelTypeManagementDialog.vue
-
30src/views/modules/labelSetting/default_label_setting.vue
-
58src/views/modules/labelSetting/label_setting.vue
-
28src/views/modules/labelSetting/label_setting_printer.vue
@ -0,0 +1,21 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
/** |
|||
* 标签类型管理API接口 |
|||
*/ |
|||
|
|||
// 分页查询标签类型列表
|
|||
export const getLabelTypeManagementList = data => createAPI('/label/labelType/getList', 'POST', data) |
|||
|
|||
// 获取所有标签类型（用于下拉选择）
|
|||
export const getAllLabelTypes = data => createAPI('/label/labelType/getAllList', 'POST', data) |
|||
|
|||
// 保存标签类型
|
|||
export const saveLabelType = data => createAPI('/label/labelType/save', 'POST', data) |
|||
|
|||
// 更新标签类型
|
|||
export const updateLabelType = data => createAPI('/label/labelType/update', 'POST', data) |
|||
|
|||
// 删除标签类型
|
|||
export const deleteLabelType = data => createAPI('/label/labelType/delete', 'POST', data) |
|||
|
|||
@ -0,0 +1,414 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="标签类型管理" |
|||
:visible.sync="dialogVisible" |
|||
width="1000px" |
|||
:before-close="handleClose" |
|||
:close-on-click-modal="false" |
|||
:append-to-body="true" |
|||
> |
|||
<div class="label-type-management"> |
|||
<!-- 查询表单 --> |
|||
<el-form :inline="true" label-width="100px" style="margin-bottom: 10px;"> |
|||
<el-form-item label="标签类型"> |
|||
<el-input |
|||
v-model="queryParams.name" |
|||
placeholder="请输入标签类型" |
|||
style="width: 200px;" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadLabelTypes">查询</el-button> |
|||
<el-button type="primary" @click="openAddDialog">新增</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<!-- 标签类型列表表格 --> |
|||
<el-table |
|||
:data="labelTypeList" |
|||
border :height="200" |
|||
v-loading="loading" |
|||
style="width: 100%;" |
|||
max-height="450" |
|||
> |
|||
<el-table-column |
|||
prop="name" |
|||
label="标签类型" |
|||
width="150" |
|||
align="left" |
|||
/> |
|||
<el-table-column |
|||
prop="viewSql" |
|||
label="WMS视图" |
|||
width="200" |
|||
align="left" |
|||
/> |
|||
<el-table-column |
|||
prop="ifsViewSql" |
|||
label="IFS视图" |
|||
width="200" |
|||
align="left" |
|||
/> |
|||
<el-table-column |
|||
prop="createdBy" |
|||
label="创建人" |
|||
width="100" |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
prop="createdTime" |
|||
label="创建时间" |
|||
width="150" |
|||
align="center" |
|||
> |
|||
<template slot-scope="scope"> |
|||
{{ formatDate(scope.row.createdTime) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="操作" |
|||
width="150" |
|||
align="center" |
|||
fixed="right" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<a |
|||
type="text" |
|||
size="small" |
|||
@click="openEditDialog(scope.row)" |
|||
>编辑</a> |
|||
<a |
|||
type="text" |
|||
size="small" |
|||
@click="handleDelete(scope.row)" |
|||
>删除</a> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="pageIndex" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
:total="totalPage" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
style="margin-top: 20px; text-align: right;" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 新增/编辑对话框 --> |
|||
<el-dialog |
|||
:title="editMode ? '编辑标签类型' : '新增标签类型'" |
|||
:visible.sync="editDialogVisible" |
|||
width="200px" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-form :inline="true" label-position="top" |
|||
:model="formData" :rules="formRules" ref="formRef"> |
|||
<el-form-item label="标签类型" prop="name"> |
|||
<el-input style="width: 180px;" |
|||
v-model="formData.name" |
|||
placeholder="请输入标签类型名称" |
|||
:disabled="editMode"/> |
|||
</el-form-item> |
|||
<el-form-item label="WMS视图" prop="viewSql"> |
|||
<el-input style="width: 180px;" |
|||
v-model="formData.viewSql" |
|||
placeholder="请输入WMS视图名称"/> |
|||
</el-form-item> |
|||
<el-form-item label="IFS视图" prop="ifsViewSql"> |
|||
<el-input style="width: 180px;" |
|||
v-model="formData.ifsViewSql" |
|||
placeholder="请输入IFS视图名称"/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="editDialogVisible = false">取消</el-button> |
|||
<el-button type="primary" @click="handleSave" :loading="saving"> |
|||
保存 |
|||
</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="handleClose">关闭</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getLabelTypeManagementList, |
|||
saveLabelType, |
|||
updateLabelType, |
|||
deleteLabelType |
|||
} from '@/api/labelSetting/label_type_management.js'; |
|||
|
|||
export default { |
|||
name: 'LabelTypeManagementDialog', |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
editDialogVisible: false, |
|||
editMode: false, |
|||
loading: false, |
|||
saving: false, |
|||
|
|||
// 查询参数 |
|||
queryParams: { |
|||
site: this.$store.state.user.site, |
|||
name: '', |
|||
page: 1, |
|||
limit: 20 |
|||
}, |
|||
|
|||
// 标签类型列表 |
|||
labelTypeList: [], |
|||
|
|||
// 分页参数 |
|||
pageIndex: 1, |
|||
pageSize: 20, |
|||
totalPage: 0, |
|||
|
|||
// 表单数据 |
|||
formData: { |
|||
name: '', |
|||
site: this.$store.state.user.site, |
|||
viewSql: '', |
|||
ifsViewSql: '' |
|||
}, |
|||
|
|||
// 表单验证规则 |
|||
formRules: { |
|||
name: [ |
|||
{ required: true, message: '请输入标签类型名称', trigger: 'blur' }, |
|||
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' } |
|||
], |
|||
viewSql: [ |
|||
{ max: 200, message: '长度不能超过 200 个字符', trigger: 'blur' } |
|||
], |
|||
ifsViewSql: [ |
|||
{ max: 200, message: '长度不能超过 200 个字符', trigger: 'blur' } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
watch: { |
|||
visible(val) { |
|||
this.dialogVisible = val; |
|||
if (val) { |
|||
this.initDialog(); |
|||
} |
|||
}, |
|||
dialogVisible(val) { |
|||
this.$emit('update:visible', val); |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化对话框 |
|||
*/ |
|||
initDialog() { |
|||
this.queryParams.name = ''; |
|||
this.pageIndex = 1; |
|||
this.pageSize = 20; |
|||
this.loadLabelTypes(); |
|||
}, |
|||
|
|||
/** |
|||
* 加载标签类型列表 |
|||
*/ |
|||
async loadLabelTypes() { |
|||
this.loading = true; |
|||
try { |
|||
this.queryParams.page = this.pageIndex; |
|||
this.queryParams.limit = this.pageSize; |
|||
|
|||
const response = await getLabelTypeManagementList(this.queryParams); |
|||
|
|||
if (response.data && response.data.code === 200) { |
|||
this.labelTypeList = response.data.page.list || []; |
|||
this.totalPage = response.data.page.totalCount || 0; |
|||
} else { |
|||
this.$message.error(response.data.msg || '查询标签类型失败'); |
|||
} |
|||
} catch (error) { |
|||
console.error('查询标签类型失败:', error); |
|||
this.$message.error('查询标签类型失败'); |
|||
} finally { |
|||
this.loading = false; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 打开新增对话框 |
|||
*/ |
|||
openAddDialog() { |
|||
this.editMode = false; |
|||
this.formData = { |
|||
name: '', |
|||
site: this.$store.state.user.site, |
|||
viewSql: '', |
|||
ifsViewSql: '' |
|||
}; |
|||
this.editDialogVisible = true; |
|||
|
|||
// 清除表单验证 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.formRef) { |
|||
this.$refs.formRef.clearValidate(); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 打开编辑对话框 |
|||
*/ |
|||
openEditDialog(row) { |
|||
this.editMode = true; |
|||
this.formData = { ...row }; |
|||
this.editDialogVisible = true; |
|||
|
|||
// 清除表单验证 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.formRef) { |
|||
this.$refs.formRef.clearValidate(); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 保存标签类型 |
|||
*/ |
|||
handleSave() { |
|||
this.$refs.formRef.validate(async (valid) => { |
|||
if (!valid) { |
|||
return false; |
|||
} |
|||
|
|||
this.saving = true; |
|||
try { |
|||
let response; |
|||
if (this.editMode) { |
|||
// 更新 |
|||
response = await updateLabelType(this.formData); |
|||
} else { |
|||
// 新增 |
|||
response = await saveLabelType(this.formData); |
|||
} |
|||
|
|||
if (response.data && response.data.code === 200) { |
|||
this.$message.success(this.editMode ? '更新成功' : '保存成功'); |
|||
this.editDialogVisible = false; |
|||
this.loadLabelTypes(); |
|||
this.$emit('label-type-updated'); |
|||
} else { |
|||
this.$message.error(response.data.msg || '保存失败'); |
|||
} |
|||
} catch (error) { |
|||
console.error('保存标签类型失败:', error); |
|||
this.$message.error('保存标签类型失败'); |
|||
} finally { |
|||
this.saving = false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 删除标签类型 |
|||
*/ |
|||
handleDelete(row) { |
|||
this.$confirm('确定要删除该标签类型吗？', '删除确认', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(async () => { |
|||
try { |
|||
const response = await deleteLabelType({ |
|||
name: row.name, |
|||
site: row.site |
|||
}); |
|||
|
|||
if (response.data && response.data.code === 200) { |
|||
this.$message.success('删除成功'); |
|||
this.loadLabelTypes(); |
|||
this.$emit('label-type-updated'); |
|||
} else { |
|||
this.$message.error(response.data.msg || '删除失败'); |
|||
} |
|||
} catch (error) { |
|||
console.error('删除标签类型失败:', error); |
|||
this.$message.error('删除标签类型失败'); |
|||
} |
|||
}).catch(() => { |
|||
// 取消删除 |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 分页大小改变 |
|||
*/ |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
this.pageIndex = 1; |
|||
this.loadLabelTypes(); |
|||
}, |
|||
|
|||
/** |
|||
* 当前页改变 |
|||
*/ |
|||
handleCurrentChange(val) { |
|||
this.pageIndex = val; |
|||
this.loadLabelTypes(); |
|||
}, |
|||
|
|||
/** |
|||
* 格式化日期 |
|||
*/ |
|||
formatDate(date) { |
|||
if (!date) return ''; |
|||
const d = new Date(date); |
|||
const year = d.getFullYear(); |
|||
const month = String(d.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(d.getDate()).padStart(2, '0'); |
|||
const hours = String(d.getHours()).padStart(2, '0'); |
|||
const minutes = String(d.getMinutes()).padStart(2, '0'); |
|||
const seconds = String(d.getSeconds()).padStart(2, '0'); |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|||
}, |
|||
|
|||
/** |
|||
* 关闭对话框 |
|||
*/ |
|||
handleClose() { |
|||
this.dialogVisible = false; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.label-type-management { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.dialog-footer { |
|||
text-align: center; |
|||
} |
|||
|
|||
.el-table { |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue