LK/income_payments_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

普通项目管理页面；选择企业组件；

Browse Source
This commit is contained in:
zhaoxiao
2021-08-25 18:09:53 +08:00
parent a871898de6
commit 5d7ae8724d
8 changed files with 763 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BusinessModules/BusinessSelect.vue → src/components/company/BusinessSelect.vue
+28 -4
View File
@@ -13,7 +13,7 @@
<a-row>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item>
<a-input placeholder="请输入企业名称" v-model="queryParam.businessName"></a-input>
<a-input placeholder="请输入企业名称" v-model="queryParam.companyName"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -35,7 +35,7 @@
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
@change="handleTableChange"
class="j-table-force-nowrap">
<template slot="htmlSlot" slot-scope="text">
@@ -51,6 +51,9 @@
<j-ellipsis @click.native="uploadFile(record.chargeNoticeFileId)" style="color:#219AFF;cursor: pointer"
:value="text" :length="20"/>
</template>
<template slot="text" slot-scope="text,record">
<j-ellipsis :value="text" :length="30"></j-ellipsis>
</template>
</a-table>
</div>
</j-modal>
@@ -76,6 +79,7 @@ export default {
importExcelUrl: '',
exportTemplateUrl: ''
},
selectedCompany: {},
columns: [
{
title: '序号',
@@ -89,20 +93,34 @@ export default {
}, {
title: '企业名称',
align: 'center',
dataIndex: ''
dataIndex: 'companyName',
scopedSlots: { customRender: 'text' }
}
],
dataSource: [
{
id: 1,
companyName: '合众未来'
}, {
id: 2,
companyName: '盛扬信远'
}
]
}
},
methods: {
handleOk() {
this.$emit('ok', this.selectedCompany)
this.close()
},
handleCancel() {
this.close()
},
close() {
this.visible = false
},
onSelectChange(selectedRowKeys, selectionRows) {
this.selectedCompany = selectionRows[0]
}
}
}
@@ -110,4 +128,10 @@ export default {
<style scoped lang="less">
@import '~@assets/less/common.less';
// 把表格单选样式改成实心圆
/deep/ .ant-radio-input:focus + .ant-radio-inner {
background: #069f99;
border-radius: 100px;
}
</style>
src/components/company/CompanySelect.vue
+59
View File
@@ -0,0 +1,59 @@
<template>
<div class="company-select">
<a-input @click="chooseBusiness" :value="value[valueKey]" v-bind="$attrs"></a-input>
<business-select ref="businessSelect" @ok="handleOk"></business-select>
</div>
</template>
<script>
import BusinessSelect from '@comp/company/BusinessSelect'
export default {
name: 'CompanySelect',
components: { BusinessSelect },
props: {
// 是否可以选择
isCompanyDisabled: {
type: Boolean,
required: false,
default: false
},
value: {
type: [Object],
default: () => {
return {}
}
},
// 回显数据的key
valueKey: {
type: String,
default: 'companyName'
}
},
methods: {
/**
* 打开选择企业的模态框，如果父级传参为不可选则不点击
*/
chooseBusiness() {
if (this.isCompanyDisabled) {
return
}
this.$refs.businessSelect.visible = true
},
handleOk(value) {
this.$emit('change', value)
}
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style scoped>
a-input:hover {
cursor: pointer;
}
</style>
src/views/businessManagement/BusinessManagement.vue
+14 -7
View File
@@ -6,7 +6,7 @@
<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.businessName"></a-input>
<a-input placeholder="请输入企业名称" v-model="queryParam.companyName"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -59,6 +59,10 @@
:value="text" :length="20"/>
</template>
<template slot="text" slot-scope="text,record">
<j-ellipsis :value="text" :length="20"></j-ellipsis>
</template>
<span slot="action" class="action-span-cell" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record.id)">删除</a>
@@ -72,7 +76,7 @@
<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import JEllipsis from '@comp/jero/JEllipsis'
import BusinessManagementModule from '@comp/BusinessModules/BusinessManagementModule'
import BusinessManagementModule from './modules/BusinessManagementModule'
export default {
name: 'BusinessManagement',
@@ -102,25 +106,28 @@ export default {
title: '企业名称',
align: 'center',
width: 180,
dataIndex: ''
dataIndex: 'companyName',
scopedSlots: { customRender: 'text' }
}, {
title: '公司地址',
align: 'center',
width: 180,
dataIndex: ''
dataIndex: 'companyAddress',
scopedSlots: { customRender: 'text' }
}, {
title: '公司电话',
align: 'center',
dataIndex: ''
dataIndex: 'companyPhone'
}, {
title: '创建时间',
align: 'center',
dataIndex: ''
dataIndex: 'createTime'
}, {
title: '银行户名',
align: 'center',
width: 140,
dataIndex: ''
dataIndex: 'bankAccountName',
scopedSlots: { customRender: 'text' }
}, {
title: '操作',
dataIndex: 'action',
src/views/businessManagement/ContactManagement.vue
+16 -9
View File
@@ -6,12 +6,12 @@
<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.contactName"></a-input>
<a-input placeholder="请输入姓名" v-model="queryParam.name"></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.businessName"></a-input>
<a-input placeholder="请输入企业名称" v-model="queryParam.companyName"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -69,6 +69,10 @@
:value="text" :length="20"/>
</template>
<template slot="text" slot-scope="text,record">
<j-ellipsis :value="text" :length="20"></j-ellipsis>
</template>
<span slot="action" class="action-span-cell" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record.id)">删除</a>
@@ -81,7 +85,7 @@
<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import ContactManagementModule from '@comp/BusinessModules/ContactManagementModule'
import ContactManagementModule from './modules/ContactManagementModule'
export default {
name: 'ContactManagement',
@@ -119,30 +123,33 @@ export default {
title: '姓名',
align: 'center',
width: 160,
dataIndex: ''
dataIndex: 'name',
scopedSlots: { customRender: 'text' }
}, {
title: '性别',
align: 'center',
width: 80,
dataIndex: ''
dataIndex: 'gender'
}, {
title: '职务',
align: 'center',
width: 160,
dataIndex: ''
dataIndex: 'post',
scopedSlots: { customRender: 'text' }
}, {
title: '手机号',
align: 'center',
dataIndex: ''
dataIndex: 'phone'
}, {
title: '创建时间',
align: 'center',
dataIndex: ''
dataIndex: 'createTime'
}, {
title: '企业名称',
align: 'center',
width: 140,
dataIndex: ''
dataIndex: 'companyName',
scopedSlots: { customRender: 'text' }
}, {
title: '操作',
dataIndex: 'action',
src/components/BusinessModules/BusinessManagementModule.vue → src/views/businessManagement/modules/BusinessManagementModule.vue
+31 -8
View File
@@ -14,7 +14,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入公司名称"
v-decorator="['businessName',validatorRules.businessName]"
v-decorator="['companyName',validatorRules.companyName]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -22,6 +22,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="公司地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入公司地址"
v-decorator="['companyAddress']"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -31,14 +32,15 @@
<a-col :xl="12" :sm="24">
<a-form-item label="公司电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入公司电话"
:maxLength='50'
v-decorator="['companyPhone',validatorRules.companyPhone]"
:maxLength='15'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
<a-input placeholder="请输入邮政编码"
v-decorator="['postcode',validatorRules.postcode]"
v-decorator="['postalCode',validatorRules.postalCode]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
<a class="search-postcode" href="https://www.youbianku.com" target="_blank">查询邮编</a>
@@ -49,6 +51,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="银行户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入银行户名"
v-decorator="['bankAccountName']"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -56,6 +59,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="开户行" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入开户行"
v-decorator="['openingBank']"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -65,6 +69,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入银行账号"
v-decorator="['bankAccount']"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -72,6 +77,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入税号"
v-decorator="['dutyCode']"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -82,8 +88,9 @@
<a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<a-textarea
placeholder="请输入备注"
v-decorator="['remarks']"
:auto-size="{ minRows: 3, maxRows: 6 }"
:maxLength='200'
:maxLength='300'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
@@ -94,7 +101,7 @@
</template>
<script>
import { postcode } from '@/utils/validate'
import { postcode, phoneReg, isPhone } from '@/utils/validate'
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'
@@ -125,11 +132,14 @@ export default {
sm: { span: 21 }
},
validatorRules: {
businessName: {
companyName: {
rules: [{ required: true, message: '请输入企业名称' }],
validateTrigger: 'blur'
},
postcode: {
companyPhone: {
rules: [{ validator: this.checkCompanyPhone }]
},
postalCode: {
rules: [{ validator: this.checkPostcode }]
}
},
@@ -148,7 +158,7 @@ export default {
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'approvalDocumentNumber', 'dateYear', 'chargeNoticeName', 'chargeNoticeFileId'))
this.form.setFieldsValue(pick(this.model, 'companyName', 'companyAddress', 'companyPhone', 'postalCode', 'bankAccountName', 'openingBank', 'bankAccount', 'dutyCode', 'remarks'))
})
},
close() {
@@ -188,6 +198,19 @@ export default {
handleCancel() {
this.close()
},
/**
* 电话号码校验
* @param rules
* @param value
* @param callback
*/
checkCompanyPhone(rules, value, callback) {
if (phoneReg(value) || isPhone(value)) {
callback()
} else {
callback('请填写正确的电话号码')
}
},
/**
* 邮编校验
* @param rules
src/components/BusinessModules/ContactManagementModule.vue → src/views/businessManagement/modules/ContactManagementModule.vue
+46 -27
View File
@@ -12,12 +12,11 @@
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div @click="chooseBusiness">
<a-select placeholder="请选择企业"
v-decorator="['businessName',validatorRules.businessName]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-select>
</div>
<company-select placeholder="请选择企业"
v-decorator="['companyName',validatorRules.companyName]"
:maxLength='50'
:is-company-disabled="isCompanyDisabled"
:disabled="isCompanyDisabled"></company-select>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
@@ -33,7 +32,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select placeholder="请选择性别"
v-decorator="['sex']"
v-decorator="['gender']"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-select>
</a-form-item>
@@ -41,6 +40,7 @@
<a-col :xl="12" :sm="24">
<a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入职务"
v-decorator="['post']"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -51,14 +51,14 @@
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
v-decorator="['phone',validatorRules.phone]"
:maxLength='50'
:maxLength='11'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入邮箱"
v-decorator="['mail',validatorRules.mail]"
v-decorator="['email',validatorRules.email]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
@@ -69,15 +69,15 @@
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入通讯地址"
:maxLength='50'
v-decorator="['mailingAddress',validatorRules.mailingAddress]"
v-decorator="['contactAddress',validatorRules.contactAddress]"
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
<a-input placeholder="请输入邮政编码"
:maxLength='50'
v-decorator="['postcode',validatorRules.postcode]"
:maxLength='6'
v-decorator="['postalCode',validatorRules.postalCode]"
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
<a class="search-postcode" href="https://www.youbianku.com" target="_blank">查询邮编</a>
</a-form-item>
@@ -89,25 +89,41 @@
<a-textarea
placeholder="请输入备注"
:auto-size="{ minRows: 3, maxRows: 6 }"
:maxLength='200'
v-decorator="['remarks']"
:maxLength='300'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<business-select ref="businessSelect"></business-select>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'
import BusinessSelect from '@comp/BusinessModules/BusinessSelect'
import CompanySelect from '@comp/company/CompanySelect'
import { postcode, phoneReg, isEmail } from '@/utils/validate'
export default {
name: 'ContactManagementModule',
components: { BusinessSelect },
components: { CompanySelect },
props: {
// 是否可以选择企业 true--不可选；false--可选
isCompanyDisabled: {
type: Boolean,
required: false,
default: false
},
// 已选中的企业信息，只有isCompanyDisabled为true时该属性才能生效
selectedCompany: {
type: Object,
required: false,
default: () => {
return {}
}
}
},
data() {
return {
title: '操作',
@@ -137,7 +153,7 @@ export default {
edit: ''
},
validatorRules: {
businessName: {
companyName: {
rules: [{ required: true, message: '请选择企业' }],
validateTrigger: 'blur'
},
@@ -149,15 +165,15 @@ export default {
rules: [{ required: true, validator: this.checkPhone }],
validateTrigger: 'blur'
},
mail: {
email: {
rules: [{ required: true, validator: this.checkMail }],
validateTrigger: 'blur'
},
postcode: {
postalCode: {
rules: [{ required: true, validator: this.checkPostcode }],
validateTrigger: 'blur'
},
mailingAddress: {
contactAddress: {
rules: [{ required: true, message: '请输入通讯地址' }],
validateTrigger: 'blur'
}
@@ -167,13 +183,22 @@ export default {
methods: {
add() {
this.edit({})
if (this.isCompanyDisabled) {
let company = {
companyName: this.selectedCompany
}
this.model = Object.assign({}, company)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'companyName'))
})
}
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'approvalDocumentNumber', 'dateYear', 'chargeNoticeName', 'chargeNoticeFileId'))
this.form.setFieldsValue(pick(this.model, 'companyName', 'name', 'gender', 'post', 'phone', 'email', 'contactAddress', 'postalCode', 'remarks'))
})
},
close() {
@@ -213,12 +238,6 @@ export default {
handleCancel() {
this.close()
},
/**
* 打开选择企业的对话框
*/
chooseBusiness() {
this.$refs.businessSelect.visible = true
},
/**
* 手机号校验
* @param rules
src/views/projectManagement/GeneralProjectManagement.vue
+240
View File
@@ -0,0 +1,240 @@
<template>
<a-card :bordered="false">
<!-- 查询区域-start -->
<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.chargeProject"></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.chargeCompanyName"></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-select placeholder="请选择负责人"
v-model="queryParam.principalId"
:maxLength='50'>
<a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ item.username }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="sex"/>
</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.businessName"></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">
<j-date show-type="year" date-format="YYYY" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-date>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date show-type="year" date-format="YYYY" placeholder="请选择运行年份" v-model="queryParam.year"></j-date>
</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">查询</a-button>
<a-button icon="reload">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 查询区域-end-->
<!-- 操作按钮区域-->
<div class="table-operator">
<a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
<a-button type="primary" icon="import">导入</a-button>
<a-button type="primary" icon="export">导出</a-button>
<a-button type="primary" icon="download">下载模板</a-button>
<a-button type="danger" icon="delete">批量删除</a-button>
</div>
<!-- 操作按钮区域-end-->
<!-- table表格区域-->
<div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:scroll="{x: 1000}"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange"
class="j-table-force-nowrap">
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
<img v-else :src="getImgView(text)" height="25px" alt=""
style="max-width:80px;font-size: 12px;font-style: italic;"/>
</template>
<template slot="fileSlot" slot-scope="text,record">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<j-ellipsis @click.native="uploadFile(record.chargeNoticeFileId)" style="color:#219AFF;cursor: pointer"
:value="text" :length="20"/>
</template>
<template slot="text" slot-scope="text,record">
<j-ellipsis :value="text" :length="20"></j-ellipsis>
</template>
<span slot="action" class="action-span-cell" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record.id)">删除</a>
</span>
</a-table>
</div>
<general-project-module ref="modalForm"></general-project-module>
</a-card>
</template>
<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import JDate from '@comp/jero/JDate'
import GeneralProjectModule from './modules/GeneralProjectModule'
export default {
name: 'GeneralProjectManagement',
components: { JDate, GeneralProjectModule },
mixins: [JeroListMixin],
data() {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 10 }
},
columns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
}, {
title: '来款项目',
align: 'center',
width: 180,
dataIndex: 'chargeProject',
scopedSlots: { customRender: 'text' }
}, {
title: '来款用途',
align: 'center',
width: 180,
dataIndex: 'chargeUse',
scopedSlots: { customRender: 'text' }
}, {
title: '来款单位',
align: 'center',
width: 180,
dataIndex: 'chargeCompanyName',
scopedSlots: { customRender: 'text' }
}, {
title: '应收金额',
align: 'center',
width: 100,
dataIndex: 'receivableAmount'
}, {
title: '实收金额',
align: 'center',
width: 100,
dataIndex: 'paidAmount'
}, {
title: '负责人',
align: 'center',
width: 140,
dataIndex: 'principalName',
scopedSlots: { customRender: 'text' }
}, {
title: '企业联系人',
align: 'center',
width: 140,
dataIndex: 'contactsName',
scopedSlots: { customRender: 'text' }
}, {
title: '打包',
align: 'center',
width: 100,
dataIndex: 'packaging'
}, {
title: '需要发票',
align: 'center',
width: 100,
dataIndex: 'invoice'
}, {
title: '到账',
align: 'center',
width: 100,
dataIndex: 'inAccount'
}, {
title: '开票',
align: 'center',
width: 100,
dataIndex: 'makeInvoice'
}, {
title: '邮寄',
align: 'center',
width: 100,
dataIndex: 'mail'
}, {
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: 160,
scopedSlots: { customRender: 'action' }
}
],
url: {
list: '',
delete: '',
deleteBatch: '',
exportXlsUrl: '',
importExcelUrl: '',
exportTemplateUrl: ''
},
userList: [], // 用户管理的所有用户
}
},
created() {
this.initUserList()
},
methods: {
/**
* 获取所有用户
*/
initUserList() {
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>
src/views/projectManagement/modules/GeneralProjectModule.vue
+329
View File
@@ -0,0 +1,329 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-form :form="form">
<a-row>
<a-col>
<a-form-item label="来款项目" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<a-input placeholder="请输入项目名称"
v-decorator="['chargeProject',validatorRules.chargeProject]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date show-type="year" date-format="YYYY" placeholder="请选择运行年份"
v-decorator="['year',validatorRules.year]"></j-date>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select placeholder="请选择负责人"
v-decorator="['principalId',validatorRules.principalId]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}">
<a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ item.username }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="来款企业" :labelCol="labelCol" :wrapperCol="wrapperCol">
<company-select placeholder="请选择来款企业"
v-decorator="['chargeCompanyName',validatorRules.chargeCompanyName]"
@change="companyChange"
:maxLength='50'>
</company-select>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag v-decorator="['chargeUse',validatorRules.chargeUse]" placeholder="请选择来款用途"
dictCode="sex"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="20">
<a-select placeholder="请选择联系人"
v-decorator="['contactsId',validatorRules.contactsId]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}">
<a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ item.contactsName }}</a-select-option>
</a-select>
</a-col>
<a-col :span="4" class="form-btn">
<a-button icon="plus" @click="addContacts"></a-button>
</a-col>
</a-row>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="20">
<a-select placeholder="请选择邮寄联系人"
v-decorator="['mailContactsId',validatorRules.mailContactsId]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}">
<a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ item.mailContactsName }}</a-select-option>
</a-select>
</a-col>
<a-col :span="4" class="form-btn">
<a-button icon="plus" @click="addContacts"></a-button>
</a-col>
</a-row>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="应收金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="20">
<a-input placeholder="请输入应收金额"
v-decorator="['receivableAmount',validatorRules.receivableAmount]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-col>
<a-col :span="1">元</a-col>
</a-row>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="需要发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select placeholder="请选择发票类型"
v-decorator="['invoice',validatorRules.invoice]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}">
<a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{
item.invoice
}}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="来款方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['chargeWay',validatorRules.chargeWay]" @change="handlechargeWayChange">
<a-radio :value="1">无</a-radio>
<a-radio :value="2">合同</a-radio>
<a-radio :value="3">收费通知</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="合同号" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="chargeWayType === 2">
<a-input placeholder="请输入合同号"
v-decorator="['contractNum',validatorRules.contractNum]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row v-show="chargeWayType === 3">
<a-col :xl="12" :sm="24">
<a-form-item label="收费通知号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入收费通知号"
v-decorator="['chargeNoticeNo',validatorRules.chargeNoticeNo]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="收费通知" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload :number="1" file-type="word,pdf" v-decorator="['chargeNoticeId', validatorRules.chargeNoticeId]"
:trigger-change="true"></j-upload>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<a-textarea
placeholder="请输入备注"
:auto-size="{ minRows: 3, maxRows: 6 }"
v-decorator="['remarks']"
:maxLength='300'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<contact-management-module ref="contactForm" is-company-disabled :selected-company="selectedCompany"></contact-management-module>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'
import JDate from '@comp/jero/JDate'
import JUpload from '@comp/jero/JUpload'
import CompanySelect from '@comp/company/CompanySelect'
import ContactManagementModule from '@views/businessManagement/modules/ContactManagementModule'
export default {
name: 'GeneralProjectModule',
components: { JDate, JUpload, CompanySelect, ContactManagementModule },
data() {
return {
title: '操作',
width: 800,
visible: false,
confirmLoading: 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: {
chargeProject: {
rules: [{ required: true, message: '请输入项目名称' }]
},
year: {
rules: [{ required: true, message: '请选择运行年份' }]
},
principalId: {
rules: [{ required: true, message: '请选择负责人' }]
},
chargeCompanyName: {
rules: [{ required: true, message: '请选择来款企业' }]
},
chargeUse: {
rules: [{ required: true, message: '请选择来款用途' }]
},
contactsId: {
rules: [{ required: true, message: '请选择联系人' }]
},
mailContactsId: {
rules: [{ required: true, message: '请选择邮寄联系人' }]
},
receivableAmount: {
rules: [{ required: true, message: '请输入应收金额' }]
},
invoice: {
rules: [{ required: true, message: '请选择发票类型' }]
},
chargeWay: {
rules: [{ required: true, message: '请选择来款方式' }]
},
contractNum: {
rules: [{ required: true, message: '请输入合同号' }]
},
chargeNoticeNo: {
rules: [{ required: true, message: '请输入收费通知号' }]
}
},
userList: [], // 用户列表
chargeWayType: null,
selectedCompany: null
}
},
methods: {
add() {
this.edit({})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'companyName', 'companyAddress', 'companyPhone', 'postalCode', 'bankAccountName', 'openingBank', 'bankAccount', 'dutyCode', 'remarks'))
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
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()
},
/**
* 来款方式变化
* @param e
*/
handlechargeWayChange(e) {
this.chargeWayType = e.target.value
},
companyChange(value) {
console.log('---companyChange---', value)
this.selectedCompany = value
},
addContacts() {
if (this.selectedCompany) {
this.$refs.contactForm.add()
this.$refs.contactForm.title = "新增";
this.$refs.contactForm.disableSubmit = false;
return
}
this.$message.warn('请先选择来款企业再为该企业新建联系人')
}
}
}
</script>
<style scoped>
.form-btn {
padding-top: 1px;
padding-left: 8px;
}
</style>