420 lines
11 KiB
Vue
420 lines
11 KiB
Vue
<template>
|
||
<view class="page-wrap">
|
||
<view class="search-bar">
|
||
<uni-icons type="settings-filled" color="#2979ff" size="28" @click="show = true" />
|
||
<u-popup :show="show" mode="top" :round="10" @close="close" @open="open">
|
||
<view class="filter-form">
|
||
|
||
|
||
<view class="filter-row" @click.stop="handleShowPicker({title: '生产单元', name: 'SKProductionUnit'})">
|
||
<text class="filter-field-title">生产单元</text>
|
||
<u--input suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.MineType" suffixIconStyle="color: #909399"></u--input>
|
||
</view>
|
||
<view class="filter-row" @click.stop="handleShowPicker({title: '检查层级', name: 'SKDepartmentTypeEnum'})">
|
||
<text class="filter-field-title">检查层级</text>
|
||
<u--input suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckLevel" suffixIconStyle="color: #909399"></u--input>
|
||
</view>
|
||
<view class="filter-row" @click.stop="handleShowPicker({title: '检查类型', name: 'CheckType'})">
|
||
<text class="filter-field-title">检查类型</text>
|
||
<u--input placeholder="选择任务类型" suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckType" suffixIconStyle="color: #909399"></u--input>
|
||
</view>
|
||
<view class="filter-row" @click.stop="handleShowPicker({title: '检查周期', name: 'SKPLANCHECKFREQUENCYEnum'})">
|
||
<text class="filter-field-title">检查周期</text>
|
||
<u--input suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckCycle" suffixIconStyle="color: #909399"></u--input>
|
||
</view>
|
||
<view class="filter-row">
|
||
<text class="filter-field-title">检查部门</text>
|
||
<u--input placeholder="检查部门" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckDepart"></u--input>
|
||
</view>
|
||
<view class="filter-row">
|
||
<text class="filter-field-title">检查对象</text>
|
||
<u--input placeholder="请输入检查对象" v-model="filterModel.CheckPost" customStyle="height: 20px" fontSize="13px"></u--input>
|
||
</view>
|
||
<view class="btn-groups">
|
||
<button @click="handleReset" size='mini' type="default">重置</button>
|
||
<button @click="handleSearch" size='mini' type="primary">查询</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-picker :show="comPickerInfo.showPicker" :columns="comPickerInfo.columns" @confirm="onConfirmPicker" @close="closePicker" @cancel="closePicker" keyName="NAME"></u-picker>
|
||
</view>
|
||
<view class="list-wrap">
|
||
<common-card v-if="lists.length" :titleIcon="true" :dataSource="item" v-for="item in lists" @click="viewDetail(item)">
|
||
<view class="content">
|
||
<view class="field">
|
||
<text class="left">生产单元：</text>
|
||
<text class="value">{{item.MineType}}</text>
|
||
</view>
|
||
<view class="field">
|
||
<text class="left">检查层级：</text>
|
||
<text class="value">{{item.CheckLevel}}</text>
|
||
</view>
|
||
<view class="field">
|
||
<text class="left">检查类型：</text>
|
||
<text class="value">{{item.CheckType}}</text>
|
||
</view>
|
||
<view class="field">
|
||
<text class="left">检查周期：</text>
|
||
<text class="value">{{item.CheckCycle}}</text>
|
||
</view>
|
||
<view class="field">
|
||
<text class="left">检查部门：</text>
|
||
<text class="value">{{item.CheckDepart}}</text>
|
||
</view>
|
||
<view class="field">
|
||
<text class="left">检查对象：</text>
|
||
<text class="value">{{item.CheckPost}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
</common-card>
|
||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||
<view v-else class="loading-tip">已加载全部数据</view>
|
||
|
||
<u-empty v-else text="暂无数据" icon="/static/empty@2x.png">
|
||
</u-empty>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
initFilter,
|
||
extendRule,
|
||
extendInclude,
|
||
extendIgnoreDataRule
|
||
} from '../../../../../utils/common'
|
||
import {
|
||
getEnum
|
||
} from '../../../../../services/common';
|
||
import {
|
||
GetSKCheckType,
|
||
SKEnterpriseLibraryNew
|
||
} from '../../../../../services/apply/subPages/SK/SKServices.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
lists: [],
|
||
show: false,
|
||
pageIndex: 20,
|
||
loading: true,
|
||
pageSize: 20,
|
||
total: 0,
|
||
filterModel: {
|
||
MineType: '',
|
||
CheckLevel: '',
|
||
CheckCycle:'',
|
||
CheckType: '',
|
||
CheckDepart: '',
|
||
CheckPost: '',
|
||
},
|
||
comPickerInfo: {
|
||
showPicker: false,
|
||
columns: [],
|
||
title: '',
|
||
name: ''
|
||
},
|
||
totalData: {},
|
||
allData: {},
|
||
filterData: {},
|
||
enumsData: {}, // 存储所有枚举数据（键：枚举名称，值：处理后的枚举列表）
|
||
enumsText: {} // 存储枚举文本列表（用于下拉选择等场景）
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.fetchEnums(['SKProductionUnit', 'SKDepartmentTypeEnum','SKPLANCHECKFREQUENCYEnum']);
|
||
// this.loadData()
|
||
},
|
||
methods: {
|
||
async fetchEnums(enumNames) {
|
||
try {
|
||
// 存储所有枚举请求的Promise
|
||
const enumPromises = enumNames.map(name => {
|
||
return getEnum({
|
||
name
|
||
}).then(res => {
|
||
// 统一处理枚举格式：添加name/code字段，便于后续映射
|
||
return {
|
||
enumName: name,
|
||
data: res.map(item => ({
|
||
...item,
|
||
name: item.NAME, // 统一显示名称字段
|
||
code: item.ID // 统一值字段
|
||
}))
|
||
};
|
||
});
|
||
});
|
||
|
||
// 等待所有枚举请求完成
|
||
const results = await Promise.all(enumPromises);
|
||
// 存储枚举结果到data中（键为枚举名称，值为处理后的数据）
|
||
results.forEach(({
|
||
enumName,
|
||
data
|
||
}) => {
|
||
this.enumsData[enumName] = data;
|
||
// 生成文本列表（如需要）
|
||
this.enumsText[enumName] = data.map(item => item.name);
|
||
});
|
||
// 所有枚举获取完成后，执行loadData
|
||
this.loadData();
|
||
} catch (error) {
|
||
console.error('枚举请求失败:', error);
|
||
uni.showToast({
|
||
title: '枚举数据加载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
handleSearch() {
|
||
this.initData()
|
||
this.reserch()
|
||
this.show = false
|
||
this.comPickerInfo.showPicker = false
|
||
},
|
||
reserch() {
|
||
let filteredData = this.allData.filter(item => {
|
||
// 生产单元筛选（非空时才过滤）
|
||
if (this.filterModel.MineType && item.MineType !== this.filterModel.MineType) {
|
||
return false;
|
||
}
|
||
// 检查层级筛选
|
||
if (this.filterModel.CheckLevel && item.CheckLevel !== this.filterModel.CheckLevel) {
|
||
return false;
|
||
}
|
||
// 检查层级筛选
|
||
if (this.filterModel.CheckCycle && item.CheckCycle !== this.filterModel.CheckCycle) {
|
||
return false;
|
||
}
|
||
// 检查类型筛选
|
||
if (this.filterModel.CheckType && item.CheckType !== this.filterModel.CheckType) {
|
||
return false;
|
||
}
|
||
// 检查部门筛选（支持模糊匹配）
|
||
if (this.filterModel.CheckDepart &&
|
||
!item.CheckDepart.includes(this.filterModel.CheckDepart)) {
|
||
return false;
|
||
}
|
||
// 检查对象筛选（支持模糊匹配）
|
||
if (this.filterModel.CheckPost &&
|
||
!item.CheckPost.includes(this.filterModel.CheckPost)) {
|
||
return false;
|
||
}
|
||
// 所有条件都满足
|
||
return true;
|
||
});
|
||
// 将筛选后的数据赋值给totalData，用于后续分页加载
|
||
this.totalData = filteredData;
|
||
this.filData()
|
||
// 重新加载数据（会根据分页规则显示第一页）
|
||
// this.reload();
|
||
},
|
||
handleReset() {
|
||
this.filterModel = {
|
||
MineType: '',
|
||
CheckLevel: '',
|
||
CheckCycle:'',
|
||
CheckType: '',
|
||
CheckDepart: '',
|
||
CheckPost: '',
|
||
}
|
||
this.initData()
|
||
this.filData()
|
||
this.show = false
|
||
this.comPickerInfo.showPicker = false
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
open() {
|
||
|
||
},
|
||
viewDetail(checkShowData) {
|
||
uni.setStorageSync('checkShowData', checkShowData);
|
||
uni.navigateTo({
|
||
url: 'checkShow'
|
||
})
|
||
},
|
||
onConfirmPicker(e) {
|
||
if (this.comPickerInfo.name == 'CheckType') {
|
||
this.filterModel.CheckType = e.value[0].NAME
|
||
} else if (this.comPickerInfo.name == 'SKDepartmentTypeEnum') {
|
||
this.filterModel.CheckLevel = e.value[0].NAME
|
||
} else if (this.comPickerInfo.name == 'SKPLANCHECKFREQUENCYEnum') {
|
||
this.filterModel.CheckCycle = e.value[0].NAME
|
||
} else if (this.comPickerInfo.name == 'SKProductionUnit') {
|
||
this.filterModel.MineType = e.value[0].NAME
|
||
}
|
||
|
||
this.comPickerInfo.showPicker = false
|
||
},
|
||
handleShowPicker(val) {
|
||
if (val.name == 'CheckType') {
|
||
const orgId = uni.getStorageSync('orgId')
|
||
const json = initFilter(orgId)
|
||
GetSKCheckType(json).then(res => {
|
||
this.comPickerInfo = {
|
||
showPicker: true,
|
||
title: val.title,
|
||
name: val.name,
|
||
formIndex: val.formIndex,
|
||
columns: [res.Data]
|
||
}
|
||
})
|
||
} else {
|
||
this.comPickerInfo = {
|
||
showPicker: true,
|
||
title: val.title,
|
||
name: val.name,
|
||
formIndex: val.formIndex,
|
||
columns: [this.enumsData[val.name]]
|
||
}
|
||
}
|
||
},
|
||
handleTab(t) {
|
||
this.currentTab = t
|
||
},
|
||
initData() {
|
||
this.lists = []
|
||
this.totalData = this.allData
|
||
this.pageIndex = 20
|
||
|
||
|
||
},
|
||
async loadData() {
|
||
const orgId = uni.getStorageSync('orgId')
|
||
const json = initFilter(orgId);
|
||
extendIgnoreDataRule(json)
|
||
SKEnterpriseLibraryNew(json).then(res => {
|
||
|
||
this.totalData = (res || []).map(i => {
|
||
return {
|
||
...i,
|
||
title: i.CheckDepart,
|
||
}
|
||
})
|
||
this.allData = this.totalData
|
||
|
||
|
||
|
||
this.filData()
|
||
})
|
||
},
|
||
filData() {
|
||
if (this.totalData.length > 20) {
|
||
this.loading = true
|
||
this.lists = this.totalData.slice(0, 20);
|
||
} else {
|
||
this.lists = this.totalData
|
||
this.loading = false
|
||
}
|
||
},
|
||
reload() {
|
||
if (this.lists.length < this.totalData.length) {
|
||
this.loading = true
|
||
const endIndex = this.pageIndex + this.pageSize;
|
||
this.lists = this.totalData.slice(0, endIndex);
|
||
this.pageIndex = endIndex;
|
||
|
||
} else {
|
||
this.loading = false
|
||
}
|
||
|
||
|
||
},
|
||
closePicker() {
|
||
this.comPickerInfo = {
|
||
showSheet: false,
|
||
columns: [],
|
||
title: '',
|
||
name: '',
|
||
formIndex: undefined
|
||
}
|
||
},
|
||
},
|
||
onReachBottom() {
|
||
this.reload()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
@import url("../../../../../style/css/editTemplate.css");
|
||
|
||
.loading-tip {
|
||
text-align: center;
|
||
padding: 15px 0;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.filter-form {
|
||
padding: 16px;
|
||
}
|
||
|
||
.filter-row {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.filter-field-title {
|
||
font-size: 14px;
|
||
color: #8f9ca2;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.search-bar {
|
||
margin-bottom: 10px;
|
||
text-align: right;
|
||
}
|
||
|
||
.btn-groups {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.btn-groups button {
|
||
width: 48%;
|
||
}
|
||
|
||
.content-list {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.content .field {
|
||
font-size: 14px;
|
||
line-height: 18px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.content .field .label {
|
||
color: #666;
|
||
}
|
||
|
||
.content .field .value {
|
||
color: #333333;
|
||
}
|
||
|
||
.card-title {
|
||
margin-bottom: 6px;
|
||
display: flex;
|
||
font-weight: bold;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.card-title .left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-title .title-icon {
|
||
margin-right: 4px;
|
||
}
|
||
</style> |