Files
laws-sinotruk-client/src/views/enterpriseStandardLibrary/check/CheckList.vue
T
2023-12-26 09:33:56 +08:00

548 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<a-card :bordered="false">
<!-- 搜索区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<!-- 企标编号 -->
<a-col :span="6">
<a-form-item :label="$t('enterpriseStandardLibrary.check.enterpriseStandardNum')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('pleaseEnter')+$t('enterpriseStandardLibrary.check.enterpriseStandardNum')" v-model="queryParam.inspectNo"></a-input>
</a-form-item>
</a-col>
<!-- 企标名称 -->
<a-col :span="6">
<a-form-item :label="$t('enterpriseStandardLibrary.check.enterpriseStandardName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('pleaseEnter')+$t('enterpriseStandardLibrary.check.enterpriseStandardName')" v-model="queryParam.inspectName"></a-input>
</a-form-item>
</a-col>
<!-- 状态 -->
<a-col :span="6">
<a-form-item :label="$t('enterpriseStandardLibrary.check.status')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
:placeholder="$t('pleaseEnter')+$t('enterpriseStandardLibrary.check.status')"
dict-code="inspect_status"
v-model="queryParam.inspectStatus">
</j-dict-select-tag>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<!-- 计划稽查日期 -->
<a-col :span="6">
<a-form-item :label="$t('enterpriseStandardLibrary.check.scheduledCheckDate')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-range-picker
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
@change="scheduledCheckDateChange"
v-model="queryParam.scheduledCheckDate">
</a-range-picker>
</a-form-item>
</a-col>
<!-- 创建日期 -->
<a-col :span="6">
<a-form-item :label="$t('enterpriseStandardLibrary.check.createdDate')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-range-picker
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
@change="createDateChange"
v-model="queryParam.createDateRange">
</a-range-picker>
</a-form-item>
</a-col>
<!-- 所属部门 -->
<a-col :span="6">
<a-form-item :label="$t('enterpriseStandardLibrary.check.department')">
<a-tree-select
tree-node-filter-prop="title"
v-model="queryParam.belongDept"
:maxTagCount="1"
:show-search="true"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
class="box-input"
style="width: 100%"
:tree-data="categoryTreeList"
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect') + $t('enterpriseStandardLibrary.check.department')"
/>
</a-form-item>
</a-col>
</template>
<div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
<a @click="handleToggleSearch">
{{ toggleSearchStatus ? $t('putAway') : $t('open') }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px" v-has="'enterpriseStandardLibrary:check:search'">{{ $t('query') }}</a-button>
<a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
</div>
</a-row>
</a-form>
</div>
<!-- 操作区域 -->
<div class="table-operator">
<!-- 导出-->
<a-button icon="upload" type="primary" ghost v-has="'enterpriseStandardLibrary:check:export'"
@click="handleExportXls($t('enterpriseStandardLibrary.check.exportFileName'))">
{{ $t('export') }}
</a-button>
<!-- 导出延期数据-->
<a-button icon="upload" type="primary" ghost v-has="'enterpriseStandardLibrary:check:exportPostponeData'"
@click="handleExportPostponeData($t('enterpriseStandardLibrary.check.exportPostponeDataName'))">
{{ $t('enterpriseStandardLibrary.check.exportPostponeData') }}
</a-button>
<!-- 导出整改计划-->
<a-button icon="upload" type="primary" ghost v-has="'enterpriseStandardLibrary:check:exportRectificationPlan'"
@click="handleExportRectificationPlan($t('enterpriseStandardLibrary.check.exportRectificationPlanName'))">
{{ $t('enterpriseStandardLibrary.check.exportRectificationPlan') }}
</a-button>
</div>
<div>
<j-table
:can-drag="true"
:scroll="{x: '100%', y: yScrollHeight}"
ref="table"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:operationList="operationList"
:operateMaxNum="operateMaxNum"
operSpecialJudgeField="delayFlag"
:operSpecialJudgeValue="false"
:operSpecialJudgeDelBtn="$t('enterpriseStandardLibrary.check.deferredCheck')"
@operationClick="operationClick"
@change="handleTableChange">
<!-- 企标编号/企标名称 -->
<template v-slot:toDetail="{text, record}">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
<a v-if="text" class="link-a" @click="handleGoDetail(record)">{{ text }}</a>
<div v-else class="table-text">{{ global.emptyLine }}</div>
</a-tooltip>
</template>
<!-- 计划稽查日期 到期前一周标红 -->
<template slot="scheduledCheckDate" slot-scope="{text, record}">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
<div class="table-text" :class="{'table-red-text': isMarkRed(record)}">{{ text || text === 0 ? text : global.emptyLine }}</div>
</a-tooltip>
</template>
<!-- 操作栏 -->
<!--<div slot="action" slot-scope="{text, record}" class="action-span-cell">-->
<!-- <template v-if="record.delayFlag && isHasPermission(operationList[0].has)">-->
<!-- <a @click="operationClick(operationList[0],record)">{{ operationList[0].text }}</a>-->
<!-- <template v-if="operationList.length > operateMaxNum">-->
<!-- <a-divider type="vertical" />-->
<!-- <a-dropdown placement="bottomCenter">-->
<!-- <a-icon type="more" class="operate-icon-btn operate-icon-more" />-->
<!-- <a-menu slot="overlay">-->
<!-- <a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">-->
<!-- <a @click="operationClick(operation,record)">-->
<!-- <div class="operate-btn">-->
<!-- {{ operation.text }}-->
<!-- </div>-->
<!-- </a>-->
<!-- </a-menu-item>-->
<!-- </a-menu>-->
<!-- </a-dropdown>-->
<!-- </template>-->
<!-- </template>-->
<!-- <template v-else-if="operationList.length > 0">-->
<!-- <template v-for="(operation, index) in operationList.slice(1)">-->
<!-- <a :key="index" @click="operationClick(operation,record)">{{ operation.text }}</a>-->
<!-- </template>-->
<!-- </template>-->
<!--</div>-->
</j-table>
</div>
<!-- 延期稽查弹框 -->
<deferred-check-modal ref="deferredCheckModal"></deferred-check-modal>
<!-- 稽查报告弹框 -->
<check-report-modal ref="checkReportModal"></check-report-modal>
<!-- 整改计划弹框 -->
<rectification-plan-modal ref="rectificationPlanModal"></rectification-plan-modal>
</a-card>
</template>
<script>
import { queryDepartTreeList } from '@/api/api'
import { JeroListMixin } from '@/mixins/JeroListMixin'
import { downFile } from '@/api/manage'
import { isHasPermission } from '@/utils/hasPermission'
import JTable from '@/components/jero/JTable'
// 延期稽查弹框
import DeferredCheckModal from './modules/DeferredCheckModal'
// 稽查报告弹框
import CheckReportModal from './modules/CheckReportModal'
import RectificationPlanModal from './modules/RectificationPlanModal'
import { InspectStatus } from '@/enums/commonEnums'
import moment from 'moment'
export default {
name: 'CheckList',
components: { RectificationPlanModal, JTable, CheckReportModal, DeferredCheckModal },
mixins: [JeroListMixin],
data () {
return {
categoryTreeList: [], // 组织机构查询的组织机构树数据
labelCol: {
span: 4
},
wrapperCol: {
span: 14
},
needFilterTableBtn: true,
columns: [
{
title: this.$t('serialNumber'),
dataIndex: '',
key: 'rowIndex',
width: 80,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{ // 稽查依据标准编号
title: this.$t('enterpriseStandardLibrary.check.basedStandardNo'),
align: 'center',
width: 180,
dataIndex: 'inspectNo',
scopedSlots: { customRender: 'toDetail' }
},
{ // 稽查依据标准名称
title: this.$t('enterpriseStandardLibrary.check.basedStandardName'),
align: 'center',
width: 180,
dataIndex: 'inspectName',
scopedSlots: { customRender: 'toDetail' }
},
{ // 计划稽查对象
title: this.$t('enterpriseStandardLibrary.check.planCheckTarget'),
align: 'center',
width: 180,
dataIndex: 'planInspectObject_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 主责标准化工作组
title: this.$t('enterpriseStandardLibrary.check.workGroup'),
align: 'center',
width: 180,
dataIndex: 'standardizationWorkGroup',
scopedSlots: { customRender: 'text' }
},
{ // 所属部门
title: this.$t('enterpriseStandardLibrary.check.department'),
align: 'center',
width: 180,
dataIndex: 'belongDept_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 计划稽查日期
title: this.$t('enterpriseStandardLibrary.check.scheduledCheckDate'),
align: 'center',
width: 180,
dataIndex: 'planInspectDate',
scopedSlots: { customRender: 'scheduledCheckDate' }
},
{ // 稽查负责人
title: this.$t('enterpriseStandardLibrary.check.headOfCheck'),
align: 'center',
width: 180,
dataIndex: 'inspectUser_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 标准化组对接人
title: this.$t('enterpriseStandardLibrary.check.contactPerson'),
align: 'center',
width: 180,
dataIndex: 'standardizationDockingUser_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 实际稽查完成日期
title: this.$t('enterpriseStandardLibrary.check.checkFinishDate'),
align: 'center',
width: 180,
dataIndex: 'completeDate',
scopedSlots: { customRender: 'text' }
},
{ // 实际稽查人
title: this.$t('enterpriseStandardLibrary.check.actualChecker'),
align: 'center',
width: 180,
dataIndex: 'actualInspectUser_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 状态
title: this.$t('enterpriseStandardLibrary.check.status'),
align: 'center',
width: 180,
dataIndex: 'inspectStatus_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 创建日期
title: this.$t('enterpriseStandardLibrary.check.createDate'),
align: 'center',
width: 180,
dataIndex: 'createTime',
scopedSlots: { customRender: 'text' }
},
{
title: this.$t('operation'),
scopedSlots: { customRender: 'action' },
align: 'center',
fixed: 'right',
width: 200
}
],
url: {
list: '/enterprise/inspect/queryByPage',
exportXlsUrl: '/enterprise/inspect/exportData',
exportPostponeDataUrl: '/enterprise/inspect/exportDataWithDelay', // 导出延期数据
exportRectificationPlanUrl: '/enterprise/inspect/exportDataRectifyPlan' // 导出整改计划
},
operationList: [
{ // 延期稽查
text: this.$t('enterpriseStandardLibrary.check.deferredCheck'),
clickEvent: 'handleDeferredCheck',
has: 'enterpriseStandardLibrary:check:deferredCheck'
},
{ // 稽查报告
text: this.$t('enterpriseStandardLibrary.check.checkReport'),
clickEvent: 'handleCheckReport',
has: 'enterpriseStandardLibrary:check:checkReport'
},
{ // 整改计划
text: this.$t('enterpriseStandardLibrary.check.rectificationPlan'),
clickEvent: 'handleRectificationPlan',
has: 'enterpriseStandardLibrary:check:rectificationPlan'
}
],
sevenDaysAgo: undefined
}
},
mounted () {
this.getSysCategoryTree()
this.sevenDaysAgo = this.getSevenDaysAgo()
},
methods: {
isHasPermission,
/**
* 是否标红
* @description fix:79388((进行中 || 稽查中) && 到期前一周) || 拖期
* @param record
* @return {boolean}
*/
isMarkRed (record) {
// 是否进行中或稽查中
const state = [InspectStatus.inProgress.value, InspectStatus.underInspection.value].includes(record.inspectStatus + '')
// 是否到期前一周(比较当前天和每条数据的计划稽查日期小于7天)
const isExpireOneWeek = moment().diff(moment(record.planInspectDate), 'days') < 7
return (state && isExpireOneWeek) || record.inspectStatus === InspectStatus.delay.value
},
// 获取七天前日期
getSevenDaysAgo () {
const dateStr = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate() - 7)
return new Date(Date.parse(dateStr))
},
// 获取组织机构树
getSysCategoryTree () {
queryDepartTreeList().then((res) => {
if (res.success) {
this.categoryTreeList = res.result
} else {
this.categoryTreeList = []
}
})
},
// 计划稽查日期改变
scheduledCheckDateChange (val) {
if (val[0] && val[1]) {
this.queryParam.planInspectDates = val.join(',')
} else {
delete this.queryParam.planInspectDates
}
// this.queryParam.planInspectStartDate = val[0]
// this.queryParam.planInspectEndDate = val[1]
},
// 创建日期改变
createDateChange (val) {
if (val[0] && val[1]) {
this.queryParam.createDate = val.join(',')
} else {
delete this.queryParam.createDate
}
// this.queryParam.inspectCreateStartDate = val[0]
// this.queryParam.inspectCreateEndDate = val[1]
},
// 点击跳转企标详情
handleGoDetail (record) {
this.$openPageNewSheet({
path: '/enterpriseStandardLibrary/enterpriseStandardDetail',
query: {
standardNumber: record.inspectNo
}
})
},
// 导出
handleExportXls (fileName) {
if (!fileName || typeof fileName !== 'string') {
fileName = '导出文件'
}
const param = this.getQueryParams()
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
param.selections = this.selectedRowKeys.join(',')
}
console.log('导出参数', param)
// 加一个大的提示
const modalLoading = this.$info({
title: '提示',
content: <span>正在导出请稍候 <a-spin size="small" /></span>,
keyboard: false
})
// 把知道了这个按钮去掉
this.$nextTick(() => {
document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
})
downFile(this.url.exportXlsUrl, param).then((data) => {
if (!data) {
this.$message.warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
} else {
const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
}).finally(() => {
// 销毁这个提示
modalLoading.destroy()
})
},
// 导出延期数据
handleExportPostponeData (fileName) {
if (!fileName || typeof fileName !== 'string') {
fileName = '导出文件'
}
const param = this.getQueryParams()
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
param.selections = this.selectedRowKeys.join(',')
}
console.log('导出参数', param)
// 加一个大的提示
const modalLoading = this.$info({
title: '提示',
content: <span>正在导出请稍候 <a-spin size="small" /></span>,
keyboard: false
})
// 把知道了这个按钮去掉
this.$nextTick(() => {
document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
})
downFile(this.url.exportPostponeDataUrl, param).then((data) => {
if (!data) {
this.$message.warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
} else {
const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
}).finally(() => {
// 销毁这个提示
modalLoading.destroy()
})
},
// 导出整改计划
handleExportRectificationPlan (fileName) {
if (!fileName || typeof fileName !== 'string') {
fileName = '导出文件'
}
const param = this.getQueryParams()
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
param.selections = this.selectedRowKeys.join(',')
}
console.log('导出参数', param)
// 加一个大的提示
const modalLoading = this.$info({
title: '提示',
content: <span>正在导出请稍候 <a-spin size="small" /></span>,
keyboard: false
})
// 把知道了这个按钮去掉
this.$nextTick(() => {
document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
})
downFile(this.url.exportRectificationPlanUrl, param).then((data) => {
if (!data) {
this.$message.warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
} else {
const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
}).finally(() => {
// 销毁这个提示
modalLoading.destroy()
})
},
// 延期稽查
handleDeferredCheck (record) {
this.$refs.deferredCheckModal.open(record)
},
// 稽查报告
handleCheckReport (record) {
this.$refs.checkReportModal.open(record)
},
// 整改计划
handleRectificationPlan (record) {
this.$refs.rectificationPlanModal.open(record)
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/ .ant-form-item-label{
min-width: 90px !important;
}
</style>