<template>
|
<div class="productionRreport-container">
|
<div class="filter-card">
|
<CommonSearch
|
:show-add="false"
|
:amount-view="false"
|
placeholder="请输入关键词"
|
@searchClick="onFilterSearch"
|
>
|
<template slot="leftButton">
|
<!-- <el-select
|
v-model="marketId"
|
placeholder="请选择庄口"
|
class="select-width margin_right_10px"
|
multiple
|
collapse-tags
|
>
|
<el-option
|
v-for="item in marketList"
|
:key="item.ID"
|
:label="item.name"
|
:value="item.ID"
|
>
|
</el-option>
|
</el-select> -->
|
<el-cascader
|
v-model="marketId"
|
placeholder="请选择"
|
class="select-width margin_right_10px"
|
:options="marketList"
|
:show-all-levels="false"
|
collapse-tags
|
:props="{
|
multiple:true,
|
value:'ID',
|
label:'name'
|
}"
|
>
|
</el-cascader>
|
<el-button size="small" type="primary" @click="exportBtnClick"
|
>导出</el-button
|
>
|
</template>
|
</CommonSearch>
|
</div>
|
<div class="body-card">
|
<div class="list-view">
|
<TableCommonView
|
ref="tableListRef"
|
v-loading="loading"
|
:table-list="tableList"
|
@selTableCol="selTableCol"
|
>
|
</TableCommonView>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getAttendanceStatistic } from "@/api/reportManage/report.js";
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin";
|
import { getDictList } from "@/api/productManage/silkRegisterForm.js";
|
export default {
|
name: "productionReport",
|
props: {},
|
components: {},
|
mixins: [pageMixin],
|
computed: {},
|
data() {
|
return {
|
loading: false,
|
tableList: {},
|
marketId: [],
|
marketList: [], //庄口
|
tableColumn: [
|
{ label: "车间", prop: "name", default: true },
|
{ label: "机组", prop: "member_name" },
|
{ label: "Ⅱ度", prop: "client_level" },
|
{ label: "清洁", prop: "next_visit_time" },
|
{ label: "洁净", prop: "detail_address" },
|
{ label: "最大纤度", prop: "client_status" },
|
{ label: "最小纤度", prop: "contact_name" },
|
{ label: "平均纤度", prop: "contact_phone" },
|
{ label: "公量纤度", prop: "client_level" },
|
{ label: "最大偏差", prop: "next_visit_time" },
|
{ label: "纤度偏差", prop: "detail_address" },
|
{ label: "日产量", prop: "client_status" },
|
{ label: "等级", prop: "contact_name" },
|
{ label: "综合等级", prop: "contact_phone" },
|
],
|
showCol: [
|
"车间",
|
"机组",
|
"Ⅱ度",
|
"清洁",
|
"洁净",
|
"最大纤度",
|
"最小纤度",
|
"平均纤度",
|
"公量纤度",
|
"最大偏差",
|
"纤度偏差",
|
"日产量",
|
"等级",
|
"综合等级",
|
],
|
};
|
},
|
created() {
|
this.getSelectDataList();
|
this.setTable();
|
this.getData();
|
},
|
methods: {
|
getSelectDataList() {
|
//庄口
|
getDictList({
|
dictType: 0,
|
}).then((res) => {
|
if (res.code == 200) {
|
if(res.data&&res.data.length>0){
|
this.marketList = [
|
{
|
ID:0,
|
name:'全部',
|
children:res.data||[]
|
}
|
]
|
this.marketId=[];
|
for(let i in res.data){
|
this.marketId.push([0,res.data[i].ID])
|
}
|
|
}
|
|
}
|
});
|
},
|
setTable() {
|
this.tableList = {
|
selectIndex: true,
|
tableInfomation: [],
|
allcol: [],
|
showcol: this.showCol,
|
tableColumn: this.setColumnVisible(this.showCol),
|
};
|
this.tableList.allcol = this.tableList.tableColumn
|
.filter((ele) => !ele.default)
|
.map((ele) => ele.label);
|
this.searchOptions = [];
|
for (let i = 0; i < this.tableList.tableColumn.length; i++) {
|
const label = this.tableList.tableColumn[i].label;
|
const value = this.tableList.tableColumn[i].prop;
|
this.searchOptions.push({ value: value, label: label });
|
}
|
},
|
setColumnVisible(showCol) {
|
return this.tableColumn.map((ele) => {
|
return {
|
...ele,
|
isShowColumn: showCol.includes(ele.label),
|
};
|
});
|
},
|
selTableCol(val) {
|
this.showcol = val;
|
this.tableList.tableColumn = this.setColumnVisible(val);
|
},
|
// 请求数据
|
async getData() {
|
this.loading = true;
|
await getAttendanceStatistic({
|
keyword: this.keyword,
|
month: "2024-04",
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
if (res.data.list && res.data.list.length > 0) {
|
const list = res.data.list.map((item) => {
|
return {
|
...item,
|
};
|
});
|
this.tableList.tableInfomation = list || [];
|
this.pagerOptions.totalCount = res.total||0;
|
} else {
|
this.tableList.tableInfomation = [];
|
}
|
} else {
|
this.tableList.tableInfomation = [];
|
}
|
this.loading = false;
|
})
|
.catch((err) => {
|
console.log(err);
|
this.tableList.tableInfomation = [];
|
this.loading = false;
|
});
|
},
|
// 搜索
|
onFilterSearch(searchText) {
|
this.keyword = searchText ?? "";
|
this.pagerOptions.currPage = 1;
|
this.getData();
|
},
|
// 导出
|
exportBtnClick() {},
|
},
|
};
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.productionRreport-container {
|
height: 100%;
|
.filter-card {
|
margin: 20px 30px;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
padding: 0 20px 0 20px;
|
border-radius: 12px;
|
background-color: #fff;
|
}
|
.body-card {
|
margin: 0 30px;
|
border-radius: 12px;
|
background-color: #fff;
|
height: calc(100% - 140px);
|
}
|
.list-view {
|
height: calc(100% - 60px);
|
overflow: hidden;
|
}
|
.btn-pager {
|
display: flex;
|
margin-top: 10px;
|
.page {
|
margin-left: auto;
|
}
|
}
|
}
|
</style>
|
