feat(produce): 完善统计、菜单与扫码搜索
This commit is contained in:
@@ -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 {}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}) || []
|
||||
|
||||
Reference in New Issue
Block a user