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