新增会议、项目详情、表格状态插槽

This commit is contained in:
fengachen
2021-08-31 19:54:12 +08:00
parent c55ab80414
commit a5bbfd6532
10 changed files with 621 additions and 44 deletions
+142 -12
View File
@@ -8,7 +8,7 @@
cancelText="关闭">
<!-- 基本信息begin-->
<section class="base-info">
<h3>基本信息</h3>
<h3 class="title">基本信息</h3>
<a-row :gutter="24">
<a-col :span="12">
<label>项目负责人:</label>
@@ -29,7 +29,7 @@
<!-- 基本信息end-->
<!-- 企业信息begin-->
<section class="enterprise-info">
<h3>企业信息</h3>
<h3 class="title">企业信息</h3>
<a-row :gutter="24">
<a-col :span="12">
<label>来款企业:</label>
@@ -94,19 +94,29 @@
<!--企业信息end-->
<!--到账信息begin-->
<section class="payment-info">
<h3>到账信息</h3>
<a-row :gutter="24" v-for="item of paymentInfoList" :key="item.id">
<a-col>2021年到账200元</a-col>
</a-row>
<h3 class="title">到账信息</h3>
<section class="payment-info-title">到账信息</section>
<div class="payment-info-content" v-for="item of paymentInfoList" :key="item.id">2021年到账200元</div>
</section>
<!--到账信息end-->
<!--开票邮寄信息begin-->
<section class="logistics-info">
<h3>开票邮寄信息</h3>
<a-row :gutter="24" v-for="item of logisticsInfoList" :key="item.id">
<a-col :span="24" v-text="createItemInfo(item)"></a-col>
<a-col :span="24"></a-col>
</a-row>
<h3 class="title">开票邮寄信息</h3>
<div class="wrap-table">
<a-table
ref="table"
size="middle"
rowKey="id"
:pagination="false"
:columns="columns"
:dataSource="logisticsInfoList"
class="j-table-force-nowrap"
>
<span slot="action" slot-scope="text, record" class="action-span-cell">
<a @click="lookLogistics()">查看物流</a>
</span>
</a-table>
</div>
</section>
<!--开票邮寄信息end-->
<template slot="footer">
@@ -148,6 +158,54 @@ const logisticsInfoList = [
postNo: "123456"
}
]
const columns = [
{
title: '开票人',
align: "center",
dataIndex: '',
},
{
title: '日期',
align: "center",
dataIndex: '',
},
{
title: '金额(元)',
align: "center",
dataIndex: '',
},
{
title: '票号',
align: "center",
dataIndex: '',
},
{
title: '项目',
align: "center",
dataIndex: '',
},
{
title: '邮寄人',
align: "center",
dataIndex: '',
},
{
title: '快递',
align: "center",
dataIndex: '',
},
{
title: '快递单号',
align: "center",
dataIndex: 'piaoNo',
},
{
title: '操作',
align: "center",
dataIndex: '',
scopedSlots: {customRender: 'action'}
},
]
export default {
name: "ProjectDetailModal",
data() {
@@ -162,6 +220,7 @@ export default {
basicInfo: {},
// 企业信息
enterpriseInfo: {},
columns,
// 到账信息
paymentInfoList,
// 开票邮寄信息
@@ -192,13 +251,84 @@ export default {
})
}
return `${item.person}${item.time}开票,金额为:${item.money}元,票号:${item.piaoNo},项目:${porjectItem}`
},
/*
* 查看物流
* */
lookLogistics() {
window.open("http://www.api.kuaidi100.com", "_blank")
}
}
}
</script>
<style scoped>
<style scoped lang="less">
.ant-row {
margin: 12px;
}
h3 {
position: relative;
}
label {
color: #666;
}
h3.title::before {
position: absolute;
top: 4px;
left: -10px;
content: "";
height: 20px;
width: 2px;
background: #069f99;
}
/* 到账信息 */
.payment-info {
margin-bottom: 14px;
&-title {
text-align: center;
font-size: 14px;
height: 35px;
line-height: 35px;
letter-spacing: 1px;
color: #fff;
background: #069f99;
}
&-content {
color: #424242;
background: #efefef;
padding: 5px;
padding-left: 10px;
border: 1px solid #ccc;
border-top: none;
}
}
/* 开票邮寄信息 */
.wrap-table {
border: 1px solid #ccc;
border-bottom: none;
}
/deep/ .ant-table-thead {
tr > th {
color: #fff;
background: #069f99;
border: none;
}
}
/deep/ .ant-table-tbody {
tr > td {
border: none;
border-bottom: 1px solid #ccc;
}
}
</style>
+1 -1
View File
@@ -53,7 +53,7 @@ export default {
},
created() {
// 编辑 第一次不回显的问题
if(this.selectedCompany.hasOwnProperty('id')){
if(this.selectedCompany!== null && this.selectedCompany.hasOwnProperty('id')){
this.getContactsList()
}
},
+52 -7
View File
@@ -1,9 +1,14 @@
<template>
<div>
<img src=".././../assets/imgs/zero.png"/>
<!-- <img src=".././../assets/imgs/finished.png"/>-->
<!-- <img src=".././../assets/imgs/half.png"/>-->
<!-- <img src=".././../assets/imgs/error.png"/>-->
<!--应收金额为 0 到账 开票 邮寄 显示zero-->
<img v-if="status === 0" src=".././../assets/imgs/zero.png"/>
<!--完成 -->
<img v-if="status === 1" src=".././../assets/imgs/finished.png"/>
<!--进行一半-->
<img v-if="status === 2" src=".././../assets/imgs/half.png"/>
<!-- &lt;!&ndash;没有&ndash;&gt;-->
<img v-if="status === 3" src=".././../assets/imgs/error.png" @click="s"/>
<!-- <slot :name="name">{{name}}</slot>-->
</div>
</template>
@@ -13,12 +18,52 @@ export default {
props: {
statuObj: {
type: Object,
required: true
}
required: false
},
/*
* 0 代表是打包 和需要发票
* 1 代表其他三个
* */
statusType: {
type: Number,
required: false
},
/*
* 具体的状态值
* */
statusNo:{
type: Number,
required: false
},
// name:{
// type:Number,
// }
},
computed: {
status() {
return this.statuObj
// 应收金额为 0 到账 开票 邮寄 显示zero
if (this.statuObj.amountReceivable === 0 || this.statuObj.amountReceivable < 0 ) {
return 0
} else {
// 应收金额不为0
// 未完成
if(this.statusNo === 0){
return 3
}
// 完成
if(this.statusNo === 1){
return 1
}
// 一半
if(this.statusNo === 2){
return 2
}
}
}
},
methods: {
s() {
console.log(this.statuObj)
}
}
}
@@ -0,0 +1,219 @@
<template>
<a-card :bordered="false">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="会议名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入会议名称"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
</a-form-item>
<a-form-item label="会议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag placeholder="请选择会议类型"></j-dict-select-tag>
</a-form-item>
<a-form-item label="标协会议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag placeholder="请选择标协会议类型"></j-dict-select-tag>
</a-form-item>
<a-form-item label="召开时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-range-picker
format="YYYY-MM-DD HH:mm:00"
:show-time="{ format: 'HH:mm' }"
v-decorator="['convokeTime',validatorRules.convokeTime]"
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
<a-form-item label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-year-date placeholder="请选择年份" style="width: 100%"></j-year-date>
</a-form-item>
<a-form-item label="注册签到" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-range-picker
format="YYYY-MM-DD HH:mm:00"
:show-time="{ format: 'HH:mm' }"
v-decorator="['convokeTime',validatorRules.convokeTime]"
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
<a-form-item label="召开地点" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-year-date placeholder="请选择召开地点" style="width: 100%"></j-year-date>
</a-form-item>
<a-form-item label="预计参加人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入预计参加人数"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
</a-form-item>
<a-form-item label="会议通知" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload></j-upload>
</a-form-item>
<a-form-item label="会议内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea
placeholder="请输入会议内容"
:auto-size="{ minRows: 3, maxRows: 6 }"
v-decorator="['remarks']"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
<a-form-item label="报名截至时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择报名截至时间"></j-date>
</a-form-item>
<a-form-item label="VIP" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入邀请码"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="演讲嘉宾" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入邀请码"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="特邀嘉宾" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入邀请码"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="合作伙伴" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入邀请码"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="会议费用" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入会议费用"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="会议费用(标协会员)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入会议费用"
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="会议负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<select-principal placeholder="请选择会议负责人" v-decorator="['directorId',validatorRules.directorId]"></select-principal>
</a-form-item>
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
disabled
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="酒店联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
disabled
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="联系人手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入联系人手机号"
disabled
:maxLength='50'
v-decorator="[ 'chargeStandard']"></a-input>
<span>/</span>
</a-form-item>
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea
placeholder="请输入备注"
:auto-size="{ minRows: 3, maxRows: 6 }"
v-decorator="['remarks']"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-form>
<div>
<a-button type="primary" @click="handleOk">发布</a-button>
<a-button type="primary" @click="handleCancel">取消</a-button>
</div>
</a-spin>
</a-card>
</template>
<script>
import JDictSelectTag from "@comp/dict/JDictSelectTag";
import JYearDate from "@comp/jero/JYearDate";
import JUpload from "@comp/jero/JUpload";
import JDate from "@comp/jero/JDate";
import SelectPrincipal from "@comp/company/SelectPrincipal";
export default {
name: "AddOrDetailMeet",
components: {
JDictSelectTag,
JYearDate,
JUpload,
JDate,
SelectPrincipal
},
data() {
return {
description: '新增会议',
confirmLoading:false,
visible: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 6}
},
wrapperCol: {
xs: {span: 24},
sm: {span: 18}
},
remarksLabelCol: {
xs: {span: 24},
sm: {span: 3}
},
remarksWrapperCol: {
xs: {span: 24},
sm: {span: 21}
},
validatorRules:{
}
}
},
methods:{
/*
* 发布会议
* */
handleOk(){
console.log('发布')
},
/*
* 取消
* */
handleCancel(){
console.log('取消')
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>
@@ -9,6 +9,24 @@
<a-input placeholder="请输入会议名称" v-model="queryParam.projectName"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="会议时间">
<a-range-picker
format="YYYY-MM-DD HH:mm:00"
:show-time="{ format: 'HH:mm' }"
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="创建时间">
<a-range-picker
format="YYYY-MM-DD HH:mm:00"
:show-time="{ format: 'HH:mm' }"
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="年份">
<j-year-date placeholder="请选择年份" v-model="queryParam.particularYear"></j-year-date>
@@ -53,7 +71,7 @@
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text,record">
<!-- <div class="color_blue" @click="handleSafeguardMember(record)" v-html="text"></div>-->
<div class="primary-color">会议名称</div>
</template>
<template slot="text" slot-scope="text">
@@ -68,7 +86,8 @@
</span>
</a-table>
</div>
<meet-modal ref="modalForm" @ok="modalFormOk"></meet-modal>
<!-- <meet-modal ref="modalForm" @ok="modalFormOk"></meet-modal>-->
<upload-meet-file-modal ref="modalForm" @ok="modalFormOk"></upload-meet-file-modal>
</a-card>
</template>
@@ -76,14 +95,16 @@
import {mixinDevice} from '@/utils/mixin'
import {JeroListMixin} from '@/mixins/JeroListMixin'
import JYearDate from "@comp/jero/JYearDate";
import MeetModal from "@views/incomePayments/meetManage/modules/MeetModal";
import UploadMeetFileModal from "@views/incomePayments/meetManage/modules/UploadMeetFileModal";
// import MeetModal from "@views/incomePayments/meetManage/modules/MeetModal";
export default {
name: "MeetManageList",
mixins: [JeroListMixin, mixinDevice],
components: {
JYearDate,
MeetModal
UploadMeetFileModal
// MeetModal
},
data() {
return {
@@ -161,18 +182,40 @@ export default {
* 上传会议文件
* */
handleUploadFile(record) {
console.log("上传会议文件")
this.$refs.modalForm.add({})
},
/*
* 报名信息
* */
handleSignup(record){
handleSignup(record) {
console.log('报名信息')
},
/*
* 编辑
* /incomePayments/meetManage/AddOrDetailMeet
* */
handleEdit(record){
this.$router.push({
path:'/incomePayments/meetManage/AddOrDetailMeet',
})
},
/*
* 新增
* */
handleAdd(){
this.$router.push({
path:'/incomePayments/meetManage/AddOrDetailMeet',
})
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.primary-color {
color: #069f99;
cursor: pointer;
}
</style>
@@ -0,0 +1,114 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col :span="12">
<a-form-item label="会议文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload file-type="pdf" file-type-error-message="请上传会议文件" :multiple="false" :number="1"
:return-id="true"
v-decorator="['chargeNoticeFileId']"
:trigger-change="true"></j-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import {httpAction} from "@api/manage";
import JUpload from "@comp/jero/JUpload";
export default {
name: "UploadMeetFileModal",
components:{
JUpload
},
data() {
return {
title: '上传文件',
width: 400,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 10}
},
wrapperCol: {
xs: {span: 24},
sm: {span: 14}
},
validatorRules: {
directorId: {
rules: [{required: true, message: '请选择负责人'}],
validateTrigger: ['change', 'blur']
}
},
url: {
add: "/jero/memberProject/add",
edit: "/jero/memberProject/edit",
}
}
},
methods: {
add() {
this.edit({})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
let httpurl = ''
let method = 'post'
if (!this.model.id) {
httpurl += this.url.add
} else {
httpurl += this.url.edit
}
const formData = Object.assign(this.model, values)
console.log('表单提交数据', formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
that.close()
} else {
that.$message.warning(res.message)
}
}).finally(() => {
that.confirmLoading = false
})
}
})
},
handleCancel() {
this.close()
},
}
}
</script>
<style scoped>
</style>
@@ -53,7 +53,7 @@
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text,record">
<div class="color_blue" @click="handleSafeguardMember(record)" v-html="text"></div>
<div class="primary-color" @click="handleSafeguardMember(record)" v-html="text"></div>
</template>
<template slot="text" slot-scope="text">
@@ -154,7 +154,7 @@ export default {
<style scoped lang="less">
@import '~@assets/less/common.less';
.color_blue {
.primary-color {
color: #069f99;
cursor: pointer;
}
@@ -1,7 +1,11 @@
<template>
<a-card :bordered="false">
<!-- 会员项目基本信息-->
<section class="project-base-info-title"></section>
<section class="project-base-info-title">
<span @click="handleReback" class="back"><a-icon type="left"/></span>
<h2 class="title">会员项目信息</h2>
</section>
<div class="line"></div>
<div class="project-base-info">
<section class="project-base-info-content">
<a-row :gutter="24">
@@ -18,7 +22,7 @@
<label>收费通知号:</label><span>{{ currentInfo.chargeNoticeNo }}</span>
</a-col>
<a-col :xl="5" :lg="4" :md="4" :sm="8">
<label>收费通知:</label><span class="color_blue">{{ currentInfo.fileName }}</span>
<label>收费通知:</label><span class="primary-color">{{ currentInfo.fileName }}</span>
</a-col>
<a-col :xl="8" :lg="8" :md="8" :sm="24">
<label>备注:</label><span>{{ currentInfo.remark }}</span>
@@ -58,7 +62,7 @@
@change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-button type="primary" icon="download" @click="downTemplate('会员项目成员模板文件')">下载模板</a-button>
<a-button type="primary" icon="download" @click="downTemplate('会员项目成员导入模板文件')">下载模板</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('会员项目成员')">导出</a-button>
<a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
@@ -85,11 +89,11 @@
<span v-else></span>
</template>
<template slot="member" slot-scope="text,record">
<div @click="openDetail(record)" class="color_blue">{{text}}</div>
<div @click="openDetail(record)" class="primary-color">{{ text }}</div>
</template>
<template slot="status" slot-scope="text,record">
<status-slot :statu-obj="record"></status-slot>
<status-slot :statu-obj="record" :status-no="text"></status-slot>
</template>
<span slot="action" slot-scope="text, record" class="action-span-cell">
@@ -205,7 +209,7 @@ export default {
deleteBatch: "/jero/memberProjectSubitem/deleteBatch",
exportXlsUrl: "/jero/memberProjectSubitem/exportXls",
importExcelUrl: "jero/memberProjectSubitem/importExcel",
downTemplateUrl:"jero/memberProjectSubitem/exportTemplate"
downTemplateUrl: "jero/memberProjectSubitem/exportTemplate"
},
}
},
@@ -273,9 +277,9 @@ export default {
/*
* 通过文件id拿到文件信息
* */
getChargeNoFile(){
getFileInfo({id:this.currentInfo.chargeNoticeFileId}).then(res => {
if(res.success){
getChargeNoFile() {
getFileInfo({id: this.currentInfo.chargeNoticeFileId}).then(res => {
if (res.success) {
// 记录收费通知文件名称
this.currentInfo.fileName = res.result.fileName
}
@@ -287,20 +291,42 @@ export default {
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/ .ant-card-body {
padding-top: 0;
}
/* 会员基本信息 */
.project-base-info {
margin-bottom: 20px;
.ant-row {
line-height: 2;
line-height: 4;
}
}
.project-base-info-title{
.project-base-info-title {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
.back {
cursor: pointer;
font-size: 20px;
}
.title {
display: inline-block;
margin-left: 14px;
}
}
.color_blue {
.line {
height: 1px;
background-color: #cccccc;
margin: 0 -24px;
}
.primary-color {
color: #069f99;
cursor: pointer;
}
@@ -48,7 +48,7 @@
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text,record">
<div class="color_blue" @click="handleSafeguardMember(record)" v-html="text"></div>
<div class="primary-color" @click="handleSafeguardMember(record)" v-html="text"></div>
</template>
<template slot="detail" slot-scope="text,record">
@@ -48,7 +48,7 @@
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text,record">
<div class="color_blue" @click="handleSafeguardMember(record)" v-html="text"></div>
<div class="primary-color" @click="handleSafeguardMember(record)" v-html="text"></div>
</template>
<template slot="text" slot-scope="text">
@@ -117,7 +117,7 @@ export default {
<style scoped>
@import '~@assets/less/common.less';
.color_blue {
.primary-color {
color: #069f99;
cursor: pointer;
}