523 lines
17 KiB
Vue
523 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<page-header-title :is-level-one="false" :level-two-title="projectName"></page-header-title>
|
||
<a-card :bordered="false">
|
||
<div class="part-title">
|
||
<div class="part-title-text">项目信息</div>
|
||
</div>
|
||
<!-- 起草组信息区域-->
|
||
<a-spin :spinning="spinning">
|
||
<div class="work-group-detail">
|
||
<div class="work-group-detail-item work-group-detail-item-small"
|
||
v-for="(item, index) in detailTitleList"
|
||
:key="index">
|
||
<div class="work-group-detail-item-title">{{ item.title }}：</div>
|
||
<div class="work-group-detail-item-content work-group-detail-item-filename"
|
||
v-if="(item.fieldName === 'chargeNoticeAId' || item.fieldName === 'chargeNoticeBId') && detail[item.fieldName]">
|
||
<preview-file :file-id="detail[item.fieldName]"></preview-file>
|
||
</div>
|
||
<div class="work-group-detail-item-content" v-else>{{ detail[item.fieldName] }}</div>
|
||
</div>
|
||
<div class="work-group-detail-item">
|
||
<div class="work-group-detail-item-title">任务及目标：</div>
|
||
<div class="work-group-detail-item-content">{{ detail.missionAndObjectives }}</div>
|
||
</div>
|
||
<div class="work-group-detail-item">
|
||
<div class="work-group-detail-item-title">备注：</div>
|
||
<div class="work-group-detail-item-content">{{ detail.remarks }}</div>
|
||
</div>
|
||
</div>
|
||
</a-spin>
|
||
<!-- /起草组信息区域-->
|
||
|
||
<a-divider></a-divider>
|
||
|
||
<!-- 入会信息 -->
|
||
<div class="part-title">
|
||
<div class="part-title-text">入会信息</div>
|
||
</div>
|
||
<a-spin :spinning="spinning">
|
||
<a-row class="flex-col signUpInfo">
|
||
<a-col :xxl="8" :xl="12" :sm="24">
|
||
<label>报名链接：</label><span>{{ showSignUpHref }}</span>
|
||
</a-col>
|
||
<a-col :xxl="8" :xl="12" :sm="24">
|
||
<label>报名二维码：</label><img class="qr-code" :src="signUpQRCode" alt="报名二维码"/><i class="copy primary-color"
|
||
@click="copy(showSignUpHref)">复制</i>
|
||
</a-col>
|
||
</a-row>
|
||
</a-spin>
|
||
<!-- /入会信息 -->
|
||
|
||
<a-divider></a-divider>
|
||
|
||
<!-- 查询区域-->
|
||
<div class="part-title">
|
||
<div class="part-title-text">成员信息</div>
|
||
</div>
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||
<a-row>
|
||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||
<a-form-item label="成员单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input placeholder="请输入成员单位" v-model="queryParam.chargeCompanyTemporaryName"
|
||
:maxLength='50'></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<!--<a-col :xl="6" :lg="7" :md="8" :sm="24">-->
|
||
<!-- <a-form-item label="标签名称" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||
<!-- <a-input placeholder="请输入标签名称" v-model="queryParam.label" :maxLength='50'></a-input>-->
|
||
<!-- </a-form-item>-->
|
||
<!--</a-col>-->
|
||
|
||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||
<span class="table-page-search-submitButtons">
|
||
<a-button type="primary" icon="search" @click="searchQuery"
|
||
v-has="'draftingGroupMember:search'">查询</a-button>
|
||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<!-- /查询区域-->
|
||
|
||
<!-- 操作按钮区域-->
|
||
<div class="table-operator">
|
||
<a-button type="primary" icon="plus" @click="handleAdd" v-has="'draftingGroupMember:add'" v-if="canOperate">
|
||
添加成员
|
||
</a-button>
|
||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :data="importParam"
|
||
:action="importExcelUrl" @change="handleImportExcel" v-has="'draftingGroupMember:import'"
|
||
v-if="canOperate">
|
||
<a-button type="primary" icon="import">导入</a-button>
|
||
</a-upload>
|
||
<a-button type="primary" icon="export" @click="handleExportXls('起草组成员')" v-has="'draftingGroupMember:export'">
|
||
导出
|
||
</a-button>
|
||
<a-button type="primary" icon="download" @click="downTemplate('起草组成员导入模板')"
|
||
v-has="'draftingGroupMember:downTemplate'" v-if="canOperate">下载模板
|
||
</a-button>
|
||
<a-button type="danger" icon="delete" @click="batchDel" v-has="'draftingGroupMember:batchDel'" v-if="canOperate">
|
||
批量删除
|
||
</a-button>
|
||
<!--<a-button type="primary" @click="setLabel" v-has="'workingGroupMember:setLabel'">设置标签</a-button>-->
|
||
</div>
|
||
<!-- /操作按钮区域-end-->
|
||
|
||
<!-- table表格区域-->
|
||
<div>
|
||
<a-table
|
||
ref="table"
|
||
size="middle"
|
||
bordered
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:scroll="{x: 800}"
|
||
:dataSource="dataSource"
|
||
:pagination="ipagination"
|
||
:loading="loading"
|
||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||
@change="handleTableChange"
|
||
class="j-table-force-nowrap">
|
||
|
||
<!-- 起草组名称-->
|
||
<template slot="projectName" slot-scope="text, record">
|
||
<j-ellipsis :value="text"
|
||
:length="18"
|
||
class="primary-color"
|
||
@click="openDetailModal(record)"></j-ellipsis>
|
||
</template>
|
||
|
||
<template slot="text" slot-scope="text">
|
||
<a-tooltip>
|
||
<template slot="title">{{ text }}</template>
|
||
<div class="table-text">{{ text }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
|
||
<span slot="action" class="action-span-cell" slot-scope="text, record" v-if="canOperate">
|
||
<a @click="handleEdit(record)" v-has="'draftingGroupMember:edit'">编辑</a>
|
||
<a @click="handleDelete(record.id)" v-has="'draftingGroupMember:delete'">删除</a>
|
||
</span>
|
||
</a-table>
|
||
</div>
|
||
</a-card>
|
||
|
||
<project-detail-modal :project-type="ProjectTypeEnums.DRAFT_PRO.value" ref="projectDetail"></project-detail-modal>
|
||
<safety-center-member-unit-module ref="modalForm" @ok="modalFormOk"></safety-center-member-unit-module>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||
import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
|
||
import {getDraftingGroupById} from '@api/incomePaymentsApi'
|
||
import ProjectDetailModal from '../../components/ProjectDetailModal'
|
||
import Vue from 'vue'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import PreviewFile from '../../components/jero/PreviewFile'
|
||
import {createQcCode} from '@api/incomeMeetingApi'
|
||
import { ProjectTypeEnums } from '@/enums/commonEnums'
|
||
import SafetyCenterMemberUnitModule
|
||
from '@views/functionalSafetyCenter/modules/SafetyCenterMemberUnitModule'
|
||
|
||
// eslint-disable-next-line no-undef,no-unused-vars
|
||
const Base64 = require('js-base64').Base64
|
||
|
||
export default {
|
||
name: 'FunctionalSafetyMemberUnitMaintenance',
|
||
components: {
|
||
SafetyCenterMemberUnitModule,
|
||
PageHeaderTitle,
|
||
ProjectDetailModal,
|
||
PreviewFile
|
||
},
|
||
mixins: [JeroListMixin],
|
||
computed: {
|
||
// 小程序报名链接
|
||
signUpHerfUrl() {
|
||
return `${ window._CONFIG['singUpDraftTeamQRCodeURL'] }?id=${ this.$route.query.projectId }`
|
||
},
|
||
// 企业端报名地址
|
||
showSignUpHref(){
|
||
return `${ window._CONFIG['singInDraftHref'] }?id=${ this.$route.query.projectId }`
|
||
},
|
||
importExcelUrl: function () {
|
||
return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
|
||
}
|
||
},
|
||
async mounted() {
|
||
// 生成会议报名二维码
|
||
this.signUpQRCode = await this.generateQRCode(this.signUpHerfUrl)
|
||
},
|
||
data() {
|
||
return {
|
||
ProjectTypeEnums,
|
||
signUpQRCode: '',
|
||
disableMixinCreated: true,
|
||
projectName: '',
|
||
projectId: '',
|
||
spinning: false,
|
||
detailTitleList: [
|
||
{
|
||
title: '项目名称',
|
||
fieldName: 'projectName'
|
||
}, {
|
||
title: '负责人',
|
||
fieldName: 'principalName'
|
||
},
|
||
],
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 5 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 10 }
|
||
},
|
||
url: {
|
||
list: '/drafting/payDraftingGroupSubitem/list',
|
||
delete: '/drafting/payDraftingGroupSubitem/delete',
|
||
deleteBatch: '/drafting/payDraftingGroupSubitem/deleteBatch',
|
||
exportXlsUrl: '/drafting/payDraftingGroupSubitem/exportXls',
|
||
importExcelUrl: '/drafting/payDraftingGroupSubitem/importExcel',
|
||
downTemplateUrl: '/drafting/payDraftingGroupSubitem/downloadExcelModel'
|
||
},
|
||
columns: [
|
||
{
|
||
title: '序号',
|
||
dataIndex: '',
|
||
key: 'rowIndex',
|
||
width: 60,
|
||
align: 'center',
|
||
customRender: function (t, r, index) {
|
||
return parseInt(index) + 1
|
||
}
|
||
}, {
|
||
title: '成员单位',
|
||
align: 'center',
|
||
// width: 280,
|
||
dataIndex: 'chargeCompanyTemporaryName',
|
||
scopedSlots: { customRender: 'projectName' }
|
||
}, {
|
||
title: '企业联系人',
|
||
align: 'center',
|
||
// width: 280,
|
||
dataIndex: 'contactsTemporaryNameOne',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
// {
|
||
// title: '待确收金额',
|
||
// align: 'center',
|
||
// dataIndex: 'receivableAmount',
|
||
// width: 180,
|
||
// customRender: (text, record) => (
|
||
// <j-ellipsis value={ record.receivableAmount + '元' } length={ 15 }></j-ellipsis>
|
||
// )
|
||
// }, {
|
||
// title: '实收金额',
|
||
// align: 'center',
|
||
// dataIndex: 'paidAmount',
|
||
// width: 180,
|
||
// customRender: (text, record) => (
|
||
// <j-ellipsis value={ record.paidAmount + '元' } length={ 15 }></j-ellipsis>
|
||
// )
|
||
// }, {
|
||
// title: '标签名称',
|
||
// align: 'center',
|
||
// dataIndex: 'label',
|
||
// width: 100,
|
||
// scopedSlots: { customRender: 'text' }
|
||
// }, {
|
||
// // 2021-10-22需求变更新加
|
||
// title: '收费通知号',
|
||
// align: 'center',
|
||
// width: 280,
|
||
// dataIndex: 'chargeNoticeNo',
|
||
// scopedSlots: { customRender: 'text' }
|
||
// },
|
||
// {
|
||
// title: '打包',
|
||
// align: 'center',
|
||
// fixed: 'right',
|
||
// width: 100,
|
||
// dataIndex: 'pack',
|
||
// scopedSlots: { customRender: 'status-pack' }
|
||
// },
|
||
// }, {
|
||
// title: '需要发票',
|
||
// align: 'center',
|
||
// fixed: 'right',
|
||
// width: 80,
|
||
// dataIndex: 'needInvoice',
|
||
// scopedSlots: { customRender: 'status-pack' }
|
||
// }, {
|
||
// title: '到账',
|
||
// align: 'center',
|
||
// fixed: 'right',
|
||
// width: 80,
|
||
// dataIndex: 'inAccount',
|
||
// scopedSlots: { customRender: 'status' }
|
||
// }, {
|
||
// title: '开票',
|
||
// align: 'center',
|
||
// fixed: 'right',
|
||
// width: 80,
|
||
// dataIndex: 'makeInvoice',
|
||
// scopedSlots: { customRender: 'status-bill' }
|
||
// }, {
|
||
// title: '邮寄',
|
||
// align: 'center',
|
||
// fixed: 'right',
|
||
// width: 80,
|
||
// dataIndex: 'mail',
|
||
// scopedSlots: { customRender: 'status-mail' }
|
||
// },
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
align: 'center',
|
||
fixed: 'right',
|
||
width: 180,
|
||
scopedSlots: { customRender: 'action' }
|
||
}
|
||
],
|
||
detail: {},
|
||
chargeNoticeList: [], // 收费通知号选项
|
||
importParam: {},
|
||
// 给定当年作为来款年份默认查询条件
|
||
// queryParam: {
|
||
// paymentDate: new Date().getFullYear().toString()
|
||
// },
|
||
// lastQueryParam: {
|
||
// paymentDate: new Date().getFullYear().toString()
|
||
// },
|
||
canOperate: true // 是否可操作（负责人B不可操作）
|
||
}
|
||
},
|
||
created() {
|
||
// 初始化起草组信息
|
||
this.initWorkGroupData()
|
||
},
|
||
methods: {
|
||
/*
|
||
* 生成二维码
|
||
* */
|
||
generateQRCode(params) {
|
||
return new Promise(resolve => {
|
||
let code = ''
|
||
createQcCode({ contact: params }).then(res => {
|
||
if (res.success) {
|
||
code = res.result
|
||
} else {
|
||
console.error('生成二维码失败')
|
||
}
|
||
}).finally(() => {
|
||
resolve(code)
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 初始化起草组信息
|
||
*/
|
||
initWorkGroupData() {
|
||
this.spinning = true
|
||
this.projectName = this.$route.query.projectId || ''
|
||
this.projectId = this.$route.query.projectId || ''
|
||
this.filters.projectId = this.projectId
|
||
this.importParam.projectId = this.projectId
|
||
this.loadData()
|
||
let param = {
|
||
id: this.projectId
|
||
}
|
||
getDraftingGroupById(param).then(res => {
|
||
if (res.success) {
|
||
this.detail = res.result || {}
|
||
}
|
||
}).finally(() => {
|
||
this.spinning = false
|
||
})
|
||
},
|
||
/*
|
||
* 复制地址
|
||
* */
|
||
copy(data) {
|
||
// 存储传递过来的数据
|
||
let OrderNumber = data
|
||
// 创建一个input 元素
|
||
// createElement() 方法通过指定名称创建一个元素
|
||
let newInput = document.createElement('input')
|
||
// 讲存储的数据赋值给input的value值
|
||
newInput.value = OrderNumber
|
||
// appendChild() 方法向节点添加最后一个子节点。
|
||
document.body.appendChild(newInput)
|
||
// 选中input元素中的文本
|
||
// select() 方法用于选择该元素中的文本。
|
||
newInput.select()
|
||
// 执行浏览器复制命令
|
||
// execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
|
||
document.execCommand('Copy')
|
||
// 清空输入框
|
||
newInput.remove()
|
||
this.$message.success('复制成功')
|
||
},
|
||
handleAdd: function () {
|
||
this.$refs.modalForm.projectId = this.projectId
|
||
this.$refs.modalForm.add()
|
||
this.$refs.modalForm.title = '添加成员'
|
||
this.$refs.modalForm.disableSubmit = false
|
||
},
|
||
handleEdit: function (record) {
|
||
this.$refs.modalForm.projectId = this.projectId
|
||
this.$refs.modalForm.edit(record)
|
||
this.$refs.modalForm.title = '编辑'
|
||
this.$refs.modalForm.disableSubmit = false
|
||
},
|
||
/**
|
||
* 文件预览
|
||
* @param file
|
||
*/
|
||
previewFile(file) {
|
||
console.log(file)
|
||
if (file && file.url) {
|
||
const fileFullUrl = `${ window._CONFIG['domianWebSocketURL'] }/sys/common/download/${ file.id }?token=${ Vue.ls.get(ACCESS_TOKEN) }&fullfilename=${ file.fileName }`
|
||
// let url = `${ window._CONFIG['onlinePreviewDomainURL'] }?url=${ encodeURIComponent(Base64.encode(fileFullUrl)) }`
|
||
let url = `${ window._CONFIG['onlinePreviewDomainURL'] }?url=${ encodeURIComponent(Base64.encode(fileFullUrl)) }`
|
||
window.open(url)
|
||
}
|
||
},
|
||
// 2021 10 11 沟通后去掉了这个功能
|
||
// searchReset() {
|
||
// this.lastQueryParam = {
|
||
// paymentDate: new Date().getFullYear().toString()
|
||
// }
|
||
// this.queryParam = {
|
||
// paymentDate: new Date().getFullYear().toString()
|
||
// }
|
||
// this.loadData(1)
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.ant-divider-horizontal {
|
||
height: 1px;
|
||
background-color: #F2F2F2;
|
||
margin: 15px 0px;
|
||
}
|
||
|
||
.work-group-detail {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-bottom: 20px;
|
||
|
||
&-item-small {
|
||
width: 33.3% !important;
|
||
}
|
||
|
||
&-item {
|
||
display: flex;
|
||
padding: 5px 5px;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
|
||
&-title {
|
||
flex-shrink: 0;
|
||
color: #999999;
|
||
}
|
||
|
||
&-content {
|
||
word-break: break-all;
|
||
color: #2F3133;
|
||
}
|
||
|
||
&-filename {
|
||
//cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table-text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.flex-col {
|
||
.ant-col {
|
||
display: flex;
|
||
}
|
||
label {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.qr-code {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.copy {
|
||
font-style: normal;
|
||
cursor: pointer;
|
||
}
|
||
.signUpInfo {
|
||
line-height: 3;
|
||
|
||
.ant-col {
|
||
|
||
label {
|
||
color: #999;
|
||
}
|
||
|
||
span {
|
||
color: black;
|
||
}
|
||
}
|
||
}
|
||
</style>
|