fix:searchHeader样式修改

This commit is contained in:
shijing 2024-06-19 13:38:18 +08:00
parent 21c1575ebb
commit c5bd0352ec
4 changed files with 519 additions and 392 deletions

View File

@ -1,140 +1,174 @@
<template>
<el-container>
<el-header style="height: 50%; padding: 0;">
<el-container>
<el-header>
<div class="left-panel">
<div style="font-size: 14px">仓库</div>
<el-select v-model="query.warehouse" clearable placeholder="所在仓库" @change="handleQuery"
style="margin-left: 4px">
<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input v-model="query.search" placeholder="物料名/批次号" clearable
style="margin-right: 5px;"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="params">
<el-table-column type="index" width="50" />
<el-table-column label="批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.specification }} {{ scope.row.material_.model }}
</span>
</template>
</el-table-column>
<el-table-column label="已完成工序">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.process_name }}
</span>
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-header>
<el-main class="nopadding">
<el-container>
<el-header>
<div class="left-panel">
<span style="font-size: 14px">车间库存</span>
<!-- <el-select v-model="queryWm.material__process" clearable placeholder="已到工序" @change="handleQueryWm"
<el-container>
<el-header style="height: 50%; padding: 0">
<el-container>
<el-header>
<div class="left-panel">
<div style="font-size: 14px">仓库</div>
<el-select
v-model="query.warehouse"
clearable
placeholder="所在仓库"
@change="handleQuery"
style="margin-left: 10px; width: 150px"
>
<el-option
v-for="item in warehouseOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input
v-model="query.search"
placeholder="物料名/批次号"
clearable
style="margin-right: 5px"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
:params="params"
>
<el-table-column type="index" width="50" />
<el-table-column label="批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.specification }}
{{ scope.row.material_.model }}
</span>
</template>
</el-table-column>
<el-table-column label="已完成工序">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.process_name }}
</span>
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-header>
<el-main class="nopadding">
<el-container>
<el-header>
<div class="left-panel">
<span style="font-size: 14px">车间库存</span>
<!-- <el-select v-model="queryWm.material__process" clearable placeholder="已到工序" @change="handleQueryWm"
style="margin-left: 4px">
<el-option v-for="item in processOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select> -->
</div>
</el-header>
<el-main>
<scTable ref="table_wm" :apiObj="apiObjWm" row-key="id" :params="paramsWm" stripe>
<el-table-column label="批次" prop="batch"> </el-table-column>
<el-table-column label="物料名" prop="material">
<template #default="scope">{{
scope.row.material_.name
}}</template>
</el-table-column>
<el-table-column label="规格" prop="material">
<template #default="scope">{{
scope.row.material_.specification
}}</template>
</el-table-column>
<el-table-column label="型号" prop="material">
<template #default="scope">{{
scope.row.material_.model
}}</template>
</el-table-column>
<el-table-column label="已到工序" prop="material">
<template #default="scope">{{
scope.row.material_.process_name
}}</template>
</el-table-column>
<el-table-column label="所在车间" prop="belong_dept_name">
</el-table-column>
<el-table-column label="数量" prop="count" width="80">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
</el-container>
</div>
</el-header>
<el-main>
<scTable
ref="table_wm"
:apiObj="apiObjWm"
row-key="id"
:params="paramsWm"
stripe
>
<el-table-column label="批次" prop="batch">
</el-table-column>
<el-table-column label="物料名" prop="material">
<template #default="scope">{{
scope.row.material_.name
}}</template>
</el-table-column>
<el-table-column label="规格" prop="material">
<template #default="scope">{{
scope.row.material_.specification
}}</template>
</el-table-column>
<el-table-column label="型号" prop="material">
<template #default="scope">{{
scope.row.material_.model
}}</template>
</el-table-column>
<el-table-column label="已到工序" prop="material">
<template #default="scope">{{
scope.row.material_.process_name
}}</template>
</el-table-column>
<el-table-column
label="所在车间"
prop="belong_dept_name"
>
</el-table-column>
<el-table-column label="数量" prop="count" width="80">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
</el-container>
</template>
<script>
export default {
name: "halfgood",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type: 10 },
selection: [],
query: {},
warehouseOptions: [],
apiObjWm: this.$API.wpm.wmaterial.list,
paramsWm: { count__gte: 1, material__type: 10 },
// processOptions: [],
queryWm: {}
};
},
mounted() {
this.getWarehouse()
// this.getProcessOptions()
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then(res => {
this.warehouseOptions = res
})
},
getProcessOptions() {
this.$API.mtm.process.list.req({ page: 0 }).then(res => {
this.processOptions = res
})
},
handleQueryWm() {
this.$refs.table_wm.queryData(this.queryWm)
},
handleQuery() {
this.$refs.table.queryData(this.query)
},
resetQuery() {
this.query = {};
},
},
name: "halfgood",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type: 10 },
selection: [],
query: {},
warehouseOptions: [],
apiObjWm: this.$API.wpm.wmaterial.list,
paramsWm: { count__gte: 1, material__type: 10 },
// processOptions: [],
queryWm: {},
};
},
mounted() {
this.getWarehouse();
// this.getProcessOptions()
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then((res) => {
this.warehouseOptions = res;
});
},
getProcessOptions() {
this.$API.mtm.process.list.req({ page: 0 }).then((res) => {
this.processOptions = res;
});
},
handleQueryWm() {
this.$refs.table_wm.queryData(this.queryWm);
},
handleQuery() {
this.$refs.table.queryData(this.query);
},
resetQuery() {
this.query = {};
},
},
};
</script>
</script>

View File

@ -1,140 +1,183 @@
<template>
<el-container>
<el-header style="height: 50%; padding: 0;">
<el-container>
<el-header>
<div class="left-panel">
<div style="font-size: 14px">仓库</div>
<el-select v-model="query.warehouse" clearable placeholder="所在仓库" @change="handleQuery"
style="margin-left: 4px">
<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input v-model="query.search" placeholder="物料名/批次号" clearable
style="margin-right: 5px;"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="params">
<el-table-column type="index" width="50" />
<el-table-column label="批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.specification }} {{ scope.row.material_.model }}
</span>
</template>
</el-table-column>
<el-table-column label="已完成工序">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.process_name }}
</span>
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-header>
<el-main class="nopadding">
<el-container>
<el-header>
<div class="left-panel">
<span style="font-size: 14px">车间库存</span>
<el-select v-model="queryWm.material__process" clearable placeholder="已到工序" @change="handleQueryWm"
style="margin-left: 4px">
<el-option v-for="item in processOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</div>
</el-header>
<el-main>
<scTable ref="table_wm" :apiObj="apiObjWm" row-key="id" :params="paramsWm" stripe>
<el-table-column label="批次" prop="batch"> </el-table-column>
<el-table-column label="物料名" prop="material">
<template #default="scope">{{
scope.row.material_.name
}}</template>
</el-table-column>
<el-table-column label="规格" prop="material">
<template #default="scope">{{
scope.row.material_.specification
}}</template>
</el-table-column>
<el-table-column label="型号" prop="material">
<template #default="scope">{{
scope.row.material_.model
}}</template>
</el-table-column>
<el-table-column label="已到工序" prop="material">
<template #default="scope">{{
scope.row.material_.process_name
}}</template>
</el-table-column>
<el-table-column label="所在车间" prop="belong_dept_name">
</el-table-column>
<el-table-column label="数量" prop="count" width="80">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
</el-container>
<el-container>
<el-header style="height: 50%; padding: 0">
<el-container>
<el-header>
<div class="left-panel">
<div style="font-size: 14px">仓库</div>
<el-select
v-model="query.warehouse"
clearable
placeholder="所在仓库"
@change="handleQuery"
style="margin-left: 10px; width: 150px"
>
<el-option
v-for="item in warehouseOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input
v-model="query.search"
placeholder="物料名/批次号"
clearable
style="margin-right: 5px"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
:params="params"
>
<el-table-column type="index" width="50" />
<el-table-column label="批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.specification }}
{{ scope.row.material_.model }}
</span>
</template>
</el-table-column>
<el-table-column label="已完成工序">
<template #default="scope">
<span v-if="scope.row.material_">
{{ scope.row.material_.process_name }}
</span>
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-header>
<el-main class="nopadding">
<el-container>
<el-header>
<div class="left-panel">
<span style="font-size: 14px">车间库存</span>
<el-select
v-model="queryWm.material__process"
clearable
placeholder="已到工序"
@change="handleQueryWm"
style="margin-left: 10px; width: 150px"
>
<el-option
v-for="item in processOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
</el-header>
<el-main>
<scTable
ref="table_wm"
:apiObj="apiObjWm"
row-key="id"
:params="paramsWm"
stripe
>
<el-table-column label="批次" prop="batch">
</el-table-column>
<el-table-column label="物料名" prop="material">
<template #default="scope">{{
scope.row.material_.name
}}</template>
</el-table-column>
<el-table-column label="规格" prop="material">
<template #default="scope">{{
scope.row.material_.specification
}}</template>
</el-table-column>
<el-table-column label="型号" prop="material">
<template #default="scope">{{
scope.row.material_.model
}}</template>
</el-table-column>
<el-table-column label="已到工序" prop="material">
<template #default="scope">{{
scope.row.material_.process_name
}}</template>
</el-table-column>
<el-table-column
label="所在车间"
prop="belong_dept_name"
>
</el-table-column>
<el-table-column label="数量" prop="count" width="80">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
</el-container>
</template>
<script>
export default {
name: "halfgood",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type: 20 },
selection: [],
query: {},
warehouseOptions: [],
apiObjWm: this.$API.wpm.wmaterial.list,
paramsWm: { count__gte: 1 },
processOptions: [],
queryWm: {}
};
},
mounted() {
this.getWarehouse()
this.getProcessOptions()
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then(res => {
this.warehouseOptions = res
})
},
getProcessOptions() {
this.$API.mtm.process.list.req({ page: 0 }).then(res => {
this.processOptions = res
})
},
handleQueryWm() {
this.$refs.table_wm.queryData(this.queryWm)
},
handleQuery() {
this.$refs.table.queryData(this.query)
},
resetQuery() {
this.query = {};
},
},
name: "halfgood",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type: 20 },
selection: [],
query: {},
warehouseOptions: [],
apiObjWm: this.$API.wpm.wmaterial.list,
paramsWm: { count__gte: 1 },
processOptions: [],
queryWm: {},
};
},
mounted() {
this.getWarehouse();
this.getProcessOptions();
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then((res) => {
this.warehouseOptions = res;
});
},
getProcessOptions() {
this.$API.mtm.process.list.req({ page: 0 }).then((res) => {
this.processOptions = res;
});
},
handleQueryWm() {
this.$refs.table_wm.queryData(this.queryWm);
},
handleQuery() {
this.$refs.table.queryData(this.query);
},
resetQuery() {
this.query = {};
},
},
};
</script>
</script>

View File

@ -1,68 +1,93 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-select v-model="query.warehouse" clearable placeholder="所在仓库" @change="handleQuery">
<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input v-model="query.search" placeholder="物料名" clearable style="margin-right: 5px;"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="params">
<el-table-column type="index" width="50" />
<el-table-column label="物料批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
{{ scope.row.specification }} {{ scope.row.model }}
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-container>
<el-header>
<div class="left-panel">
<el-select
v-model="query.warehouse"
clearable
placeholder="所在仓库"
@change="handleQuery"
style="width: 150px"
>
<el-option
v-for="item in warehouseOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input
v-model="query.search"
placeholder="物料名"
clearable
style="margin-right: 5px"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
:params="params"
>
<el-table-column type="index" width="50" />
<el-table-column label="物料批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
{{ scope.row.specification }} {{ scope.row.model }}
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
</template>
<script>
export default {
name: "materials",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type__in: '40, 50, 60, 70' },
selection: [],
query: {},
warehouseOptions: []
};
},
mounted() {
this.getWarehouse()
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then(res => {
this.warehouseOptions = res
})
},
handleQuery() {
this.$refs.table.queryData(this.query)
},
resetQuery() {
this.query = {};
},
},
name: "materials",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type__in: "40, 50, 60, 70" },
selection: [],
query: {},
warehouseOptions: [],
};
},
mounted() {
this.getWarehouse();
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then((res) => {
this.warehouseOptions = res;
});
},
handleQuery() {
this.$refs.table.queryData(this.query);
},
resetQuery() {
this.query = {};
},
},
};
</script>
</script>

View File

@ -1,68 +1,93 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-select v-model="query.warehouse" clearable placeholder="所在仓库" @change="handleQuery">
<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input v-model="query.search" placeholder="物料名" clearable style="margin-right: 5px;"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="params">
<el-table-column type="index" width="50" />
<el-table-column label="物料批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
{{ scope.row.specification }} {{ scope.row.model }}
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-container>
<el-header>
<div class="left-panel">
<el-select
v-model="query.warehouse"
clearable
placeholder="所在仓库"
@change="handleQuery"
style="width: 150px"
>
<el-option
v-for="item in warehouseOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<div class="right-panel">
<el-input
v-model="query.search"
placeholder="物料名"
clearable
style="margin-right: 5px"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
:params="params"
>
<el-table-column type="index" width="50" />
<el-table-column label="物料批次" prop="batch">
</el-table-column>
<el-table-column label="物料名称" prop="material_name">
</el-table-column>
<el-table-column label="规格型号">
<template #default="scope">
{{ scope.row.specification }} {{ scope.row.model }}
</template>
</el-table-column>
<el-table-column label="仓库" prop="warehouse_name">
</el-table-column>
<el-table-column label="物料存量" prop="count">
</el-table-column>
<el-table-column label="有效期" prop="expiration_date">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</scTable>
</el-main>
</el-container>
</template>
<script>
export default {
name: "materials",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type__in: '30' },
selection: [],
query: {},
warehouseOptions: []
};
},
mounted() {
this.getWarehouse()
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then(res => {
this.warehouseOptions = res
})
},
handleQuery() {
this.$refs.table.queryData(this.query)
},
resetQuery() {
this.query = {};
},
},
name: "materials",
data() {
return {
apiObj: this.$API.inm.warehouse.batch,
params: { count__gte: 1, material__type__in: "30" },
selection: [],
query: {},
warehouseOptions: [],
};
},
mounted() {
this.getWarehouse();
},
methods: {
getWarehouse() {
this.$API.inm.warehouse.list.req({ page: 0 }).then((res) => {
this.warehouseOptions = res;
});
},
handleQuery() {
this.$refs.table.queryData(this.query);
},
resetQuery() {
this.query = {};
},
},
};
</script>
</script>