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

View File

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

View File

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

View File

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