499 lines
17 KiB
Vue
499 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 操作区域 -->
|
||
<div class="table-operator">
|
||
<!-- 新增 -->
|
||
<a-button icon="plus" type="primary" @click="handleAdd">
|
||
{{ $t('newlyAdded') }}
|
||
</a-button>
|
||
<!-- 导入 -->
|
||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||
<a-button icon="upload" type="primary" ghost>{{ $t('import') }}</a-button>
|
||
</a-upload>
|
||
<!-- 模板下载 -->
|
||
<a-button icon="download" type="primary" ghost @click="downTemplate($t('workCenter.revisionPlanActivelyReport.standardizationInitTemplate'))">
|
||
{{ $t('templateDownload') }}
|
||
</a-button>
|
||
<!-- 批量删除 -->
|
||
<a-button icon="delete" type="primary" ghost @click="batchDel">
|
||
{{ $t('batchDelete') }}
|
||
</a-button>
|
||
<!-- 批量设置联络人 -->
|
||
<a-button v-if="!isRejectedTodo" icon="setting" type="primary" ghost @click="batchSetContact">
|
||
{{ $t('workCenter.revisionPlanActivelyReport.batchSetContact') }}
|
||
</a-button>
|
||
</div>
|
||
|
||
<div>
|
||
<j-table
|
||
:can-drag="true"
|
||
:scroll="{x: '100%'}"
|
||
ref="table"
|
||
:rowKey="(record, index) => {
|
||
return index
|
||
}"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:pagination="false"
|
||
:loading="loading"
|
||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
|
||
|
||
<!-- 原企标编号/企标名称 -->
|
||
<template v-slot:toDetailOld="{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="handleGoDetailOld(record)">{{ text }}</a>
|
||
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
|
||
<!-- 新企标编号/企标名称 -->
|
||
<template v-slot:toDetailNew="{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="handleGoDetailNew(record)">{{ text }}</a>
|
||
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
<!-- 操作栏 -->
|
||
<div slot="action" slot-scope="{record, index}" class="action-span-cell">
|
||
<a @click="handleEdit(record, index)" class="table-ope-btn">{{ $t('edit') }}</a>
|
||
<a-divider type="vertical" />
|
||
<a @click="handleDelete(record.id, index)" class="table-ope-btn">{{ $t('delete') }}</a>
|
||
</div>
|
||
|
||
</j-table>
|
||
</div>
|
||
|
||
<!-- 新增，编辑的弹框 -->
|
||
<base-info-table-modal ref="baseInfoTableModal" @ok="modelFormOk"></base-info-table-modal>
|
||
|
||
<!-- 选人弹框 -->
|
||
<user-select-modal ref="userSelectModal" type="radio" @change="userSelectModalChange" @nameChange="userSelectNameChange"></user-select-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
|
||
import store from '@/store'
|
||
import JTable from '@/components/jero/JTable'
|
||
import { downloadFile } from '@/api/manage'
|
||
import UserSelectByContact from '@/components/selection/UserSelectByContact'
|
||
import UserSelectModal from '@/components/selection/UserSelectModal'
|
||
import BaseInfoTableModal from './BaseInfoTableModal'
|
||
|
||
// 导入的加载提示
|
||
let importModalLoading
|
||
|
||
export default {
|
||
name: 'EngineerInitBaseInfo',
|
||
components: { BaseInfoTableModal, UserSelectByContact, JTable, UserSelectModal },
|
||
props: {
|
||
disabled: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false
|
||
},
|
||
currentNode: {
|
||
type: Number,
|
||
required: false,
|
||
default: 0
|
||
}
|
||
},
|
||
computed: {
|
||
tokenHeader () {
|
||
const head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }
|
||
const tenantid = Vue.ls.get(TENANT_ID)
|
||
if (tenantid) {
|
||
head['tenant-id'] = tenantid
|
||
}
|
||
return head
|
||
},
|
||
importExcelUrl: function () {
|
||
return `${window._CONFIG.domianURL}/${this.url.importExcelUrl}`
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
loading: false,
|
||
columns: [
|
||
{
|
||
title: this.$t('serialNumber'),
|
||
dataIndex: '',
|
||
key: 'rowIndex',
|
||
align: 'center',
|
||
width: 80,
|
||
customRender: function (t, r, index) {
|
||
return parseInt(index) + 1
|
||
}
|
||
},
|
||
{ // 制修订类型
|
||
title: this.$t('enterpriseStandardLibrary.plan.revisionType'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'projectType_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 原企标编号
|
||
title: this.$t('enterpriseStandardLibrary.plan.oldEnterpriseStandardNum'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'originEnStandardNo',
|
||
scopedSlots: { customRender: 'toDetailOld' }
|
||
},
|
||
{ // 新企标编号
|
||
title: this.$t('enterpriseStandardLibrary.plan.newEnterpriseStandardNum'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'newEnStandardNo',
|
||
scopedSlots: { customRender: 'toDetailNew' }
|
||
},
|
||
{ // 原企标名称
|
||
title: this.$t('enterpriseStandardLibrary.plan.oldEnterpriseStandardName'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'originEnStandardName',
|
||
scopedSlots: { customRender: 'toDetailOld' }
|
||
},
|
||
{ // 新企标名称
|
||
title: this.$t('enterpriseStandardLibrary.plan.newEnterpriseStandardName'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'newEnStandardName',
|
||
scopedSlots: { customRender: 'toDetailNew' }
|
||
},
|
||
{ // 授权部门
|
||
title: this.$t('enterpriseStandardLibrary.plan.authDepartment'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'authDept_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 企业标准代号
|
||
title: this.$t('enterpriseStandardLibrary.plan.enterpriseStandardCode'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'enStandardCode_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 配合单位
|
||
title: this.$t('enterpriseStandardLibrary.plan.suitUnit'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'cooperationUnit_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 主起草人
|
||
title: this.$t('enterpriseStandardLibrary.plan.principalDrafter'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'mainDraftingUser_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 主起草单位
|
||
title: this.$t('enterpriseStandardLibrary.plan.mainDraftingUnit'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'mainDraftingUnit_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 主起草单位负责人
|
||
title: this.$t('enterpriseStandardLibrary.plan.headOfMainDraftingUnit'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'mainDraftingUnitResponsiblePerson_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 标准推进人
|
||
title: this.$t('enterpriseStandardLibrary.plan.standardPusher'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'standardPromoter_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 草稿计划完成日期
|
||
title: this.$t('enterpriseStandardLibrary.plan.draftPlanFinishDate'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'draftPlannedCompleteDate',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 征求意见稿计划完成日期
|
||
title: this.$t('enterpriseStandardLibrary.plan.exposureDraftPlanFinishDate'),
|
||
align: 'center',
|
||
width: 200,
|
||
dataIndex: 'solicitationDraftPlanCompleteDate',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 计划报批日期
|
||
title: this.$t('enterpriseStandardLibrary.plan.planSubmissionDate'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'planApprovalDate',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 变更状态
|
||
title: this.$t('enterpriseStandardLibrary.plan.changeState'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'changeStatus_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 联络人
|
||
title: this.$t('workCenter.revisionPlanActivelyReport.contactPerson'),
|
||
align: 'center',
|
||
width: 300,
|
||
dataIndex: 'contactUser',
|
||
customRender: (value, row, index) => {
|
||
if (this.isRejectedTodo) {
|
||
// 是被驳回的待办
|
||
return this.dataSource[index].contactUser_dictText
|
||
} else {
|
||
// 不是被驳回的待办，可以设置联络人
|
||
return <user-select-by-contact v-model={this.dataSource[index].contactUser}
|
||
nameStr={this.dataSource[index].contactUser_dictText}
|
||
disabled={this.disabled} type={'radio'} placeholder={this.$t('pleaseSelect')} />
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: this.$t('operation'),
|
||
scopedSlots: { customRender: 'action' },
|
||
align: 'center',
|
||
fixed: 'right',
|
||
width: 200
|
||
}
|
||
],
|
||
dataSource: [],
|
||
selectedRowKeys: [],
|
||
selectionRows: [],
|
||
url: {
|
||
list: '',
|
||
downTemplateUrl: '/process/es/annualInit/templateDownload',
|
||
importExcelUrl: '/process/es/annualInit/importExcel'
|
||
},
|
||
modalType: '', // 是在新增还是在编辑，编辑的时候放正在编辑的下标
|
||
isRejectedTodo: false, // 是否是被驳回的待办，被驳回的待办不可设置联络人
|
||
selectNames: '' // 选完人的名字，批量设置人需要用
|
||
}
|
||
},
|
||
mounted () {
|
||
/**
|
||
* 需要能判断是否是被驳回，产生的待办点击进入的，是的话需要显示带出被驳回的法规的联络人，
|
||
* 并且去掉批量设置联络人按钮，如需修改联络人，删除该标准重新走标准化发起流程 ??
|
||
*/
|
||
if (this.$route.query.currentNode && this.$route.query.currentNode === 3) {
|
||
this.isRejectedTodo = true
|
||
} else {
|
||
this.isRejectedTodo = false
|
||
}
|
||
},
|
||
methods: {
|
||
// 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
|
||
initData (data) {
|
||
// 给表格赋值
|
||
this.dataSource = data.dataList
|
||
},
|
||
// 外层要获取数据
|
||
getData () {
|
||
// 把数据抛出
|
||
const data = {}
|
||
data.dataSource = this.dataSource.map(item => {
|
||
return { ...item, enStandardSystem: item.enStandardSystem ? item.enStandardSystem.join(',') : ''}
|
||
})
|
||
return data
|
||
},
|
||
// 外层获取数据要过校验,返回false表示没有通过校验
|
||
getDataValidate () {
|
||
// 校验表格是否每行都有数据，每行的联络人是否都有
|
||
let data = {}
|
||
if (this.dataSource && this.dataSource.length > 0) {
|
||
data.dataSource = this.dataSource
|
||
let hasErr = false
|
||
for (const item of this.dataSource) {
|
||
if (!item.contactUser) {
|
||
// 需要选联络人,但是没有选择
|
||
hasErr = true
|
||
break
|
||
}
|
||
}
|
||
if (hasErr) {
|
||
this.$message.warning(this.$t('workCenter.revisionPlanActivelyReport.pleaseSelectContact'))
|
||
data = false
|
||
}
|
||
} else {
|
||
this.$message.warning(this.$t('addAtLeastOneRowOfData'))
|
||
data = false
|
||
}
|
||
return data
|
||
},
|
||
// 企标编号，企标名称跳转详情,原企标
|
||
handleGoDetailOld (record) {
|
||
this.$openPageNewSheet({
|
||
path: '/enterpriseStandardLibrary/enterpriseStandardDetail',
|
||
query: {
|
||
standardNumber: record.originEnStandardNo
|
||
}
|
||
})
|
||
},
|
||
// 企标编号，企标名称跳转详情,新企标
|
||
handleGoDetailNew (record) {
|
||
this.$openPageNewSheet({
|
||
path: '/enterpriseStandardLibrary/enterpriseStandardDetail',
|
||
query: {
|
||
standardNumber: record.newEnStandardNo
|
||
}
|
||
})
|
||
},
|
||
// 表格选中
|
||
onSelectChange (selectedRowKeys, selectionRows) {
|
||
this.selectedRowKeys = selectedRowKeys
|
||
this.selectionRows = selectionRows
|
||
},
|
||
// 下载导入模板
|
||
downTemplate (fileName) {
|
||
if (!fileName || typeof fileName !== 'string') {
|
||
fileName = '模板文件'
|
||
}
|
||
downloadFile(this.url.downTemplateUrl, fileName + '.xls')
|
||
},
|
||
// 新增或编辑完成
|
||
modelFormOk (value) {
|
||
console.log(value, this.modalType)
|
||
if (this.modalType === 'add') {
|
||
this.dataSource.push(value)
|
||
} else if (this.modalType && this.modalType.split(',')[0] === 'edit') {
|
||
this.dataSource.splice(Number(this.modalType.split(',')[1]), 1, value)
|
||
}
|
||
},
|
||
// 新增
|
||
handleAdd () {
|
||
this.modalType = 'add'
|
||
this.$refs.baseInfoTableModal.add()
|
||
},
|
||
// 导入
|
||
handleImportExcel (info) {
|
||
// 限制导入大于500MB
|
||
if (info.file.size > 1024 * 1024 * 500) {
|
||
this.$message.error('导入文件最大500MB！')
|
||
info.fileList.pop()
|
||
return
|
||
}
|
||
// 加一个大的提示
|
||
if (!this.loading) {
|
||
importModalLoading = this.$info({
|
||
title: '提示',
|
||
content: <span>正在导入，请稍候 <a-spin size="small" /></span>,
|
||
keyboard: false
|
||
})
|
||
}
|
||
this.loading = true
|
||
// 把知道了这个按钮去掉
|
||
this.$nextTick(() => {
|
||
document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
|
||
})
|
||
if (info.file.status !== 'uploading') {
|
||
console.log(info.file, info.fileList)
|
||
}
|
||
if (info.file.status === 'done') {
|
||
// 销毁这个提示
|
||
importModalLoading && importModalLoading.destroy()
|
||
this.loading = false
|
||
if (info.file.response.success) {
|
||
// this.$message.success(`${info.file.name} 文件上传成功`);
|
||
if (info.file.response.code === 201) {
|
||
const { message, result: { msg, fileUrl, fileName } } = info.file.response
|
||
const href = window._CONFIG.domianURL + fileUrl
|
||
this.$warning({
|
||
title: message,
|
||
content: (<div>
|
||
<span>{msg}</span><br />
|
||
<span>具体详情请 <a href={href} target="_blank" download={fileName}>点击下载</a> </span>
|
||
</div>
|
||
)
|
||
})
|
||
} else {
|
||
this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
|
||
}
|
||
// 推入表格中
|
||
this.dataSource = this.dataSource.concat(info.file.response.result)
|
||
} else {
|
||
this.$message.warning(`${info.file.name} ${info.file.response.message}.`)
|
||
}
|
||
} else if (info.file.status === 'error') {
|
||
// 销毁这个提示
|
||
importModalLoading && importModalLoading.destroy()
|
||
this.loading = false
|
||
if (info.file.response.status === 500) {
|
||
const data = info.file.response
|
||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||
if (token && data.message.includes('Token失效')) {
|
||
this.error({
|
||
title: '登录已过期',
|
||
content: '很抱歉，登录已过期，请重新登录',
|
||
okText: '重新登录',
|
||
mask: false,
|
||
onOk: () => {
|
||
store.dispatch('Logout').then(() => {
|
||
Vue.ls.remove(ACCESS_TOKEN)
|
||
window.location.reload()
|
||
})
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this.$message.warning(`文件上传失败: ${info.file.msg} `)
|
||
}
|
||
}
|
||
},
|
||
// 编辑
|
||
handleEdit (record, index) {
|
||
this.modalType = 'edit' + ',' + index
|
||
this.$refs.baseInfoTableModal.edit(record)
|
||
},
|
||
// 查看
|
||
handleLook (record) {
|
||
this.$refs.baseInfoTableModal.look(record)
|
||
},
|
||
// 删除
|
||
handleDelete (id, index) {
|
||
this.dataSource.splice(index, 1)
|
||
},
|
||
// 批量删除
|
||
batchDel () {
|
||
for (let i = 0; i < this.selectedRowKeys.length; i++) {
|
||
this.dataSource.splice(this.selectedRowKeys[i], 1, false)
|
||
}
|
||
this.dataSource = this.dataSource.filter(item => !!item)
|
||
this.selectedRowKeys = []
|
||
},
|
||
// 批量设置联络人
|
||
batchSetContact () {
|
||
if (this.selectedRowKeys.length <= 0) {
|
||
// 请选择要分发的数据
|
||
this.$message.warning(this.$t('pleaseSelectDistributeData'))
|
||
return
|
||
}
|
||
this.$refs.userSelectModal.open()
|
||
},
|
||
// 批量设置联络人选择人后的回调
|
||
userSelectModalChange (value) {
|
||
for (const item of this.selectedRowKeys) {
|
||
this.dataSource[item].contactUser = value
|
||
this.dataSource[item].contactUser_dictText = this.selectNames
|
||
}
|
||
this.dataSource = JSON.parse(JSON.stringify(this.dataSource))
|
||
},
|
||
// 选人的名字获取
|
||
userSelectNameChange (value) {
|
||
this.selectNames = value
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|