486 lines
14 KiB
Vue
486 lines
14 KiB
Vue
<template>
|
|
<div class="root">
|
|
<div class="search-area">
|
|
<el-form :modal="searchForm" :inline="true" class="label-input-form">
|
|
<el-form-item label="核查清单名称" class="search-item">
|
|
<el-input
|
|
v-model="searchForm.checkListName"
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="标准编号/政策文号" class="search-item">
|
|
<el-input
|
|
v-model="searchForm.lawCode"
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="标准名称/政策名称" class="search-item">
|
|
<el-input
|
|
v-model="searchForm.lawName"
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item class="search-item btn-box">
|
|
<el-button
|
|
v-btn-permission="'23e01cb6ac6bfcedd39537f236a769e5'"
|
|
type="primary"
|
|
class="common-button-primary"
|
|
size="small"
|
|
@click="onSearch"
|
|
>
|
|
查询
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="search-item btn-box">
|
|
<el-button
|
|
v-btn-permission="'41945d15f5cb658665ef4916f62354a2'"
|
|
class="common-button-default"
|
|
size="small"
|
|
@click="onClear"
|
|
>
|
|
清空
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="action-bar">
|
|
<el-button
|
|
v-btn-permission="'0dc513b632ea453696b4d0ef15115bf8'"
|
|
type="primary"
|
|
size="mini"
|
|
@click="add"
|
|
>
|
|
<i class="el-icon-plus" />新增
|
|
</el-button>
|
|
<el-button
|
|
v-btn-permission="'d046fce967f47a3f9986bd1c9b88b194'"
|
|
size="mini"
|
|
@click="edit"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
v-btn-permission="'1ce2aee533772d3510768c3d9c2b4eaa'"
|
|
size="mini"
|
|
@click="downTemplate"
|
|
>
|
|
模板下载
|
|
</el-button>
|
|
<el-button
|
|
v-btn-permission="'4f30ffe0dd1b9242f67361c2d4cd065f'"
|
|
size="mini"
|
|
@click="addImportModal"
|
|
>
|
|
导入
|
|
</el-button>
|
|
<el-button
|
|
v-btn-permission="'2ddda790f0c27543147528f6dd669ac5'"
|
|
size="mini"
|
|
@click="exportData"
|
|
>
|
|
导出
|
|
</el-button>
|
|
<el-button
|
|
v-btn-permission="'18c372024eb24fee7a5eed0b9c03dba6'"
|
|
size="mini"
|
|
@click="onDelete"
|
|
>
|
|
批量删除
|
|
</el-button>
|
|
<el-button
|
|
v-btn-permission="'63516794c3bd0508b33144bfe0b0c244'"
|
|
size="mini"
|
|
@click="processDistribution"
|
|
>
|
|
流程下发
|
|
</el-button>
|
|
</div>
|
|
<div class="container">
|
|
<el-table
|
|
ref="selection"
|
|
:data="data"
|
|
tooltip-effect="dark"
|
|
style="width:100%;height: calc(100% - 57px)"
|
|
height="string"
|
|
border
|
|
class="drag-table"
|
|
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px', fontWeight: 'bold', height: '48px', padding: 0}"
|
|
:cell-style="{padding: 0}"
|
|
@sort-change="sortChange"
|
|
@selection-change="selectionChange"
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
width="55"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
type="index"
|
|
width="55"
|
|
label="序号"
|
|
align="center"
|
|
>
|
|
<template slot-scope="{scope, column, $index}">
|
|
{{ ($index + 1) + (searchForm.page - 1) * searchForm.pageSize }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="checkListName"
|
|
label="核查清单名称"
|
|
align="center"
|
|
sortable="custom"
|
|
>
|
|
<template slot-scope="{row, column, $index}">
|
|
<a class="table-jump" style="color: #2d8cf0" @click="detail(row.id)">{{ row.checkListName }}</a>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createUserId"
|
|
label="创建人"
|
|
align="center"
|
|
sortable="custom"
|
|
>
|
|
<template slot-scope="{row}">
|
|
{{ row.createUserName }}({{ row.createUserId }})
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="modifyTime"
|
|
label="更新时间"
|
|
align="center"
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="processIssuanceTime"
|
|
label="流程下发时间"
|
|
align="center"
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="processCompleteTime"
|
|
label="流程完成时间"
|
|
align="center"
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="processNum"
|
|
label="流程编号"
|
|
align="center"
|
|
sortable="custom"
|
|
>
|
|
<template slot-scope="{row, column, $index}">
|
|
<a class="table-jump" style="color: #2d8cf0" @click="toProcessDetail(row.processNum)">{{ row.processNum }}</a>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="processStatus"
|
|
label="流程状态"
|
|
align="center"
|
|
sortable="custom"
|
|
>
|
|
<template slot-scope="{row, column, $index}">
|
|
<span v-if="row.processStatus === 0">未下发</span>
|
|
<span v-if="row.processStatus === 1">进行中</span>
|
|
<span v-if="row.processStatus === 2">已完成</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination :page="searchForm.page" :total="searchForm.total" @pageChange="pageChange" @pageSizeChange="pageSizeChange" />
|
|
<loading :loading="loading">数据获取中...</loading>
|
|
</div>
|
|
<addModel ref="addModel" @ok="onClear" />
|
|
<!-- 导入 -->
|
|
<ImportZip :visible.sync="importModalShowFlag" :action="url.importExcelUrl" @onSuccess="getData" />
|
|
<ImportModel ref="ImportModelRef" @ok="onClear" />
|
|
<!-- 导出 -->
|
|
<ExportDialog ref="exportDialogRef" @exportName="handleExport" />
|
|
<el-dialog title="流程下发" :visible.sync="visible" width="600px" class="processDistributionForm">
|
|
<el-form
|
|
ref="processDistributionRef"
|
|
:model="processDistributionForm"
|
|
:rules="processDistributionRules"
|
|
label-width="200px"
|
|
label-position="left"
|
|
>
|
|
<DatePickerFormItem
|
|
v-model="processDistributionForm.processDeadline"
|
|
label="流程截止时间"
|
|
prop="processDeadline"
|
|
/>
|
|
<DatePickerFormItem
|
|
v-model="processDistributionForm.feedbackDeadline"
|
|
label="责任单位意见反馈截止时间"
|
|
prop="feedbackDeadline"
|
|
/>
|
|
</el-form>
|
|
<div slot="footer">
|
|
<el-button size="small" :loading="processDistributionLoading" @click="visible = false">取消</el-button>
|
|
<el-button size="small" type="primary" :loading="processDistributionLoading" @click="handleProcessDistribution">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import addModel from './addModel'
|
|
import ImportModel from './ImportModel'
|
|
import ImportZip from '@/components/hzwlComponents/importZip'
|
|
import ExportDialog from '@/components/hzwlComponents/exportDialog'
|
|
import DatePickerFormItem from '@/components/hzwlComponents/DatePickerFormItem'
|
|
|
|
export default {
|
|
name: 'StandardTrackingList',
|
|
components: {
|
|
addModel,
|
|
ImportModel,
|
|
ImportZip,
|
|
ExportDialog,
|
|
DatePickerFormItem,
|
|
},
|
|
data () {
|
|
const searchForm = {
|
|
checkListName: '',
|
|
lawCode: '',
|
|
lawName: '',
|
|
page: 1,
|
|
pageSize: this.$store.getters.userInfo.configContent,
|
|
total: 0,
|
|
}
|
|
const processDistributionForm = {
|
|
trackingChecklistId: '',
|
|
processDeadline: '',
|
|
feedbackDeadline: '',
|
|
}
|
|
const processDistributionRules = {
|
|
processDeadline: [
|
|
{ required: true, message: '流程截止时间不能为空', trigger: 'change' }
|
|
],
|
|
feedbackDeadline: [
|
|
{ required: true, message: '责任单位意见反馈截止时间不能为空', trigger: 'change' }
|
|
],
|
|
}
|
|
return {
|
|
searchForm,
|
|
initSearchForm: JSON.parse(JSON.stringify(searchForm)),
|
|
loading: false,
|
|
url: {
|
|
page: 'standardTrackingCheckList/page',
|
|
save: 'standardTrackingCheckList/save',
|
|
delete: 'standardTrackingCheckList/remove',
|
|
getById: 'standardTrackingCheckList/getById',
|
|
update: 'standardTrackingCheckList/update',
|
|
exportTemplateFile: 'api/standardTrackingCheckList/exportTemplateFile',
|
|
importExcelUrl: 'api/standardTrackingCheckList/importTrackingChecklist',
|
|
exportTrackingChecklist: 'api/standardTrackingCheckList/exportTrackingChecklist',
|
|
processDistribution: 'standardTrackingCheckList/processDistribution'
|
|
},
|
|
data: [],
|
|
selectedList: [],
|
|
// 导入
|
|
importModalShowFlag: false,
|
|
visible: false,
|
|
processDistributionForm,
|
|
processDistributionRules,
|
|
processDistributionLoading: false,
|
|
}
|
|
},
|
|
created () {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData () {
|
|
const config = {
|
|
_this: this,
|
|
loading: 'loading'
|
|
}
|
|
this.$http._getData(this.url.page, this.searchForm, config).then(res => {
|
|
if(res.ok) {
|
|
this.data = res.data.list
|
|
this.searchForm.total = res.data.count
|
|
}
|
|
})
|
|
},
|
|
pageChange (page) {
|
|
this.searchForm.page = page
|
|
this.getData()
|
|
},
|
|
pageSizeChange (pageSize) {
|
|
this.searchForm.pageSize = pageSize
|
|
this.getData()
|
|
},
|
|
onSearch () {
|
|
this.getData()
|
|
},
|
|
onClear () {
|
|
this.searchForm = JSON.parse(JSON.stringify(this.initSearchForm))
|
|
this.getData()
|
|
},
|
|
selectionChange (data) {
|
|
this.selectedList = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
this.selectedList.push(data[i].id)
|
|
}
|
|
},
|
|
sortChange ({ column, prop, order }) {
|
|
this.searchForm.sortField = prop
|
|
this.searchForm.sortMode = 'asc'
|
|
if (order === 'descending') {
|
|
this.searchForm.sortMode = 'desc'
|
|
}
|
|
if (!order) {
|
|
this.searchForm.sortField = ''
|
|
this.searchForm.sortMode = ''
|
|
}
|
|
this.getData()
|
|
},
|
|
add () {
|
|
this.$refs.addModel.add()
|
|
},
|
|
edit () {
|
|
if(this.selectedList.length === 0) {
|
|
return this.$message.warning('请选择要编辑的数据')
|
|
}
|
|
if (this.selectedList.length > 1) {
|
|
return this.$message.warning('仅能选择一条数据进行编辑')
|
|
}
|
|
this.$refs.addModel.edit(this.selectedList[0])
|
|
},
|
|
detail (id) {
|
|
this.$refs.addModel.edit(id, 'detail')
|
|
},
|
|
downTemplate () {
|
|
window.open(`${this.url.exportTemplateFile}?fileName=标准跟踪清单导入模板`)
|
|
},
|
|
addImportModal () {
|
|
// this.importModalShowFlag = true
|
|
this.$refs.ImportModelRef.openModel()
|
|
},
|
|
// 导出
|
|
exportData () {
|
|
this.$refs.exportDialogRef.openModel()
|
|
},
|
|
handleExport (exportName) {
|
|
const params = {
|
|
...this.searchForm,
|
|
exportName: exportName,
|
|
exportIds: this.selectedList.join(',')
|
|
}
|
|
let query = '?'
|
|
for(const i in params) {
|
|
if (params[i] && params[i] !== '') {
|
|
query = query + i + '=' + params[i] + '&'
|
|
}
|
|
}
|
|
query = query.slice(0, -1)
|
|
window.open(this.url.exportTrackingChecklist + query)
|
|
this.$refs.exportDialogRef.cancel()
|
|
this.$message.success('导出信息成功')
|
|
},
|
|
onDelete () {
|
|
if (this.selectedList.length === 0) {
|
|
this.$message.warning('请选择要删除的数据')
|
|
return
|
|
}
|
|
const ids = this.selectedList.join(',')
|
|
this.$confirm('确认删除这些数据?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
confirmButtonClass: 'common-button-primary',
|
|
roundButton: true
|
|
}).then(() => {
|
|
this.$http._deleteData(this.url.delete, { ids }).then(res => {
|
|
if (res.ok) {
|
|
this.$message.success('删除成功')
|
|
this.getData()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
processDistribution () {
|
|
if (this.selectedList.length === 0) {
|
|
return this.$message.warning('请选择要下发的数据')
|
|
}
|
|
this.visible = true
|
|
Object.keys(this.processDistributionForm).forEach(key => {
|
|
this.processDistributionForm[key] = ''
|
|
})
|
|
this.$nextTick(() => {
|
|
// this.$refs.processDistributionRef.resetFields()
|
|
this.$refs.processDistributionRef.clearValidate()
|
|
})
|
|
},
|
|
handleProcessDistribution () {
|
|
this.$refs.processDistributionRef.validate(valid => {
|
|
if (valid) {
|
|
this.processDistributionForm.trackingChecklistId = this.selectedList.join(',')
|
|
const config = { _this: this, loading: 'processDistributionLoading' }
|
|
this.$http._post(this.url.processDistribution, this.processDistributionForm, config).then(res => {
|
|
if (res.ok) {
|
|
this.$message.success(res.message)
|
|
this.visible = false
|
|
this.getData()
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
toProcessDetail (prcNum) {
|
|
const routeUrl = this.$router.resolve({
|
|
name: 'ProcessDetail',
|
|
query: { prcNum }
|
|
})
|
|
window.open(routeUrl.href, '_blank')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.root{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.search-area {
|
|
.search-item /deep/ .el-button--small {
|
|
padding: 8px 15px !important;
|
|
height: 30px !important;
|
|
}
|
|
}
|
|
.action-bar /deep/ .el-button{
|
|
height: 32px !important;
|
|
}
|
|
.container {
|
|
flex: 1;
|
|
}
|
|
|
|
.processDistributionForm {
|
|
/deep/ .el-form-item{
|
|
margin-bottom: 10px;
|
|
color: #666;
|
|
.el-form-item__label {
|
|
line-height: 50px;
|
|
}
|
|
.el-form-item__content{
|
|
line-height: 50px;
|
|
}
|
|
.el-input__inner{
|
|
border: none;
|
|
}
|
|
.el-date-editor.el-input, .el-date-editor.el-input__inner {
|
|
width: 100%;
|
|
}
|
|
.el-input__inner{
|
|
color: #666 !important;
|
|
}
|
|
}
|
|
.form-item-first {
|
|
|
|
}
|
|
}
|
|
</style>
|