feat(produce): 完善统计、菜单与扫码搜索

This commit is contained in:
2026-09-01 20:45:40 +08:00
parent 32f1486f5e
commit 793f140a45
26 changed files with 591 additions and 41 deletions
@@ -18,5 +18,52 @@ const [BasicCrud] = useCrud({
<style scoped>
.produce-scan-data-page {
height: 100%;
padding: 16px;
box-sizing: border-box;
background: var(--el-bg-color-page);
}
.produce-scan-data-page :deep(.art-search-bar) {
padding: 14px 16px;
background: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
box-shadow: none;
}
.produce-scan-data-page :deep(.art-search-bar .el-form-item) {
margin-bottom: 0;
}
.produce-scan-data-page :deep(.art-search-bar .el-row) {
gap: 12px;
}
.produce-scan-data-page :deep(.art-search-bar .el-col:not(.action-column)) {
flex: 0 0 var(--search-item-width);
min-width: 0;
max-width: var(--search-item-width);
}
.produce-scan-data-page :deep(.art-search-bar .action-column) {
flex: 0 0 auto;
max-width: none;
}
.produce-scan-data-page :deep(.art-search-bar .el-input),
.produce-scan-data-page :deep(.art-search-bar .el-select),
.produce-scan-data-page :deep(.art-search-bar .el-date-editor) {
width: 100%;
}
.produce-scan-data-page :deep(.art-table-card) {
margin-top: 12px;
}
@media (max-width: 640px) {
.produce-scan-data-page :deep(.art-search-bar .el-col:not(.action-column)) {
flex-basis: 100%;
min-width: 0;
max-width: 100%;
}
}
</style>
@@ -22,21 +22,49 @@ export const crudSchema = (): CrudSchema => {
viewAuth: 'produce:scan-data:read',
rowKey: 'id',
searchFormSchema: {
labelWidth: '100px',
labelWidth: 0,
gutter: 0,
span: 6,
isExpand: true,
showExpandButton: false,
schema: [
{
prop: 'keyword',
label: '关键字',
prop: 'LIKE_order_no',
label: '',
searchWidth: '170px',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入订单号/用户编码/操作人员/备注',
placeholder: '请输入订单号',
},
colSpan: 6,
},
{
prop: 'LIKE_user_code',
label: '',
searchWidth: '160px',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入用户编码',
},
colSpan: 6,
},
{
prop: 'LIKE_operator',
label: '',
searchWidth: '180px',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入操作人员',
},
colSpan: 6,
},
{
prop: 'process_id',
label: '工序名称',
label: '',
searchWidth: '160px',
component: 'ApiSelect',
componentProps: {
api: '/produce/process',
@@ -49,7 +77,8 @@ export const crudSchema = (): CrudSchema => {
},
{
prop: 'step_id',
label: '步骤名称',
label: '',
searchWidth: '160px',
component: 'ApiSelect',
componentProps: {
api: '/produce/process-step',
@@ -62,7 +91,8 @@ export const crudSchema = (): CrudSchema => {
},
{
prop: 'status_id',
label: '步骤状态',
label: '',
searchWidth: '160px',
component: 'ApiSelect',
componentProps: {
api: '/produce/step-status',
@@ -74,18 +104,20 @@ export const crudSchema = (): CrudSchema => {
colSpan: 6,
},
{
prop: 'LIKE_operator',
label: '操作人员',
prop: 'LIKE_remark',
label: '',
searchWidth: '160px',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入操作人员',
placeholder: '请输入备注',
},
colSpan: 6,
},
{
prop: 'scan_result',
label: '扫码结果',
label: '',
searchWidth: '170px',
component: 'Select',
componentProps: {
clearable: true,
@@ -99,7 +131,8 @@ export const crudSchema = (): CrudSchema => {
},
{
prop: 'scan_time_range',
label: '扫码时间',
label: '',
searchWidth: '280px',
component: 'DatePicker',
componentProps: {
type: 'daterange',
@@ -108,7 +141,7 @@ export const crudSchema = (): CrudSchema => {
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
},
colSpan: 12,
colSpan: 6,
},
],
},
@@ -12,6 +12,8 @@
<el-option label="全部数据" value="all" />
<el-option label="订单数据" value="order" />
<el-option label="整机数据" value="machine" />
<el-option label="异常提报" value="exception" />
<el-option label="维修记录" value="repair" />
</el-select>
<el-input
v-model="filters.user_code"
@@ -12,6 +12,8 @@
<el-option label="全部数据" value="all" />
<el-option label="订单数据" value="order" />
<el-option label="整机数据" value="machine" />
<el-option label="异常提报" value="exception" />
<el-option label="维修记录" value="repair" />
</el-select>
<el-input
v-model="filters.user_code"
@@ -18,6 +18,7 @@
:md="getColSpan(item.span, 'md')"
:lg="getColSpan(item.span, 'lg')"
:xl="getColSpan(item.span, 'xl')"
:style="getItemStyle(item)"
>
<ElFormItem
:prop="item.key"
@@ -188,6 +189,8 @@
items: SearchFormItem[]
/** 每列的宽度(基于 24 格布局) */
span?: number
/** 搜索项的紧凑宽度 */
width?: string
/** 表单控件间隙 */
gutter?: number
/** 展开/收起 */
@@ -239,7 +242,17 @@
*/
const isExpanded = ref(props.defaultExpanded)
const rootProps = ['label', 'labelWidth', 'key', 'type', 'hidden', 'span', 'slots']
const rootProps = [
'label',
'labelWidth',
'key',
'type',
'hidden',
'span',
'width',
'searchWidth',
'slots'
]
const getProps = (item: SearchFormItem) => {
if (item.props) return item.props
@@ -248,6 +261,12 @@
return props
}
const getItemStyle = (item: SearchFormItem) => {
if (!item.width) return undefined
return { '--search-item-width': item.width }
}
// 获取插槽
const getSlots = (item: SearchFormItem) => {
if (!item.slots) return {}
+6
View File
@@ -4,6 +4,10 @@ export interface FormSchema {
labelPosition?: 'left' | 'right' | 'top'
gutter?: number // 栅格间隔
labelWidth?: string | number
// 每列的栅格宽度
span?: number
// 是否始终展开所有搜索条件
isExpand?: boolean
schema?: FormItemSchema[]
// 显示默认操作按钮
showDefaultActions?: boolean
@@ -24,6 +28,8 @@ export interface FormSchema {
}
export interface FormItemSchema {
labelWidth?: string | number
// 搜索栏中按内容设置的控件宽度
searchWidth?: string
// 表单项标签
label: string
// 表单项属性名
@@ -4,6 +4,11 @@
:show-reset="formSchemaRef.showResetButton"
:show-search="formSchemaRef.showSubmitButton"
:show-expand="formSchemaRef.showExpandButton"
:label-position="formSchemaRef.labelPosition"
:label-width="formSchemaRef.labelWidth"
:gutter="formSchemaRef.gutter"
:span="formSchemaRef.span"
:is-expand="formSchemaRef.isExpand"
:items="cItems"
v-model="searchFormState"
@search="handleSearch"
@@ -63,6 +68,7 @@
key: item.prop,
type: item.component,
span: item.colSpan,
width: item.searchWidth,
props: item.componentProps
}
}) || []