普通项目管理接口;分标委页面;工作组项目会议维护页面

This commit is contained in:
zhaoxiao
2021-08-30 18:42:06 +08:00
parent eec31f453b
commit 9dc24b2b8b
11 changed files with 837 additions and 103 deletions
@@ -1,13 +0,0 @@
<template>
</template>
<script>
export default {
name: 'CommitteeMaintenance'
}
</script>
<style scoped>
</style>
@@ -0,0 +1,252 @@
<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-select placeholder="请选择分标委名称"
show-search
option-filter-prop="children"
v-model="queryParam.name"
:filter-option="filterOption">
<a-select-option v-for="item in dataSource" :key="item.id" :value="item.name">{{ item.name }}</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">
<a-input placeholder="请输入企业名称" v-model="queryParam.companyName"></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.contactsName"></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">查询</a-button>
<a-button icon="reload" @click="searchReset">重置</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="export" @click="handleExportXls('分标委维护')">导出</a-button>
<a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
</div>
<!-- 操作按钮区域-end-->
<!-- table表格区域-->
<div>
<a-table rowKey="id"
:scroll="{x: 1300}"
:columns="columns"
:data-source="dataSource"
:pagination="ipagination"
bordered
:loading="loading"
class="j-table-force-nowrap">
<template slot="text" slot-scope="text,record">
<j-ellipsis :value="text" :length="20"></j-ellipsis>
</template>
<span slot="operation" class="action-span-cell" slot-scope="text, record">
<a @click="handleAddCommitteeMember(record)">新增委员</a>
<a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record.id)">删除</a>
</span>
<a-table
rowKey="id"
slot="expandedRowRender"
slot-scope="text, record"
:columns="committeeMemberColumns"
:data-source="record.committeeMember"
:pagination="false"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange"
class="j-table-force-nowrap">
<template slot="textRow" 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>
</a-table>
</div>
<!-- /table表格区域-->
<!-- 新增分标委-->
<committee-module ref="modalForm" @ok="modalFormOk"></committee-module>
<committee-member-module ref="memberModalForm" @ok="modalFormOk"></committee-member-module>
</a-card>
</template>
<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import CommitteeModule from '@views/dataNetworkDiskManagement/committee/modules/CommitteeModule'
import CommitteeMemberModule from '@views/dataNetworkDiskManagement/committee/modules/CommitteeMemberModule'
import { getAction } from '@api/manage'
export default {
name: 'CommitteeMaintenance',
components: { CommitteeModule, CommitteeMemberModule },
mixins: [JeroListMixin],
data() {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 10 }
},
url: {
list: '/payCaseCommittee/payCaseCommittee/list',
committeeMemberList: '/payCaseCommitteeSubitem/payCaseCommitteeSubitem/list',
delete: '',
deleteBatch: '',
exportXlsUrl: ''
},
// 父级表头
columns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 80,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
}, {
title: '分标委名称',
align: 'center',
dataIndex: 'name',
scopedSlots: { customRender: 'text' }
}, {
title: '操作',
dataIndex: 'operation',
align: 'center',
width: 200,
scopedSlots: { customRender: 'operation' }
}
],
// 委员表头
committeeMemberColumns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 80,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
}, {
title: '姓名',
align: 'center',
dataIndex: 'contactsName',
scopedSlots: { customRender: 'textRow' }
}, {
title: '企业名称',
align: 'center',
dataIndex: 'companyName',
scopedSlots: { customRender: 'textRow' }
}, {
title: '职务',
align: 'center',
dataIndex: '',
scopedSlots: { customRender: 'textRow' }
}, {
title: '手机号',
align: 'center',
dataIndex: '',
scopedSlots: { customRender: 'textRow' }
}, {
title: '操作',
dataIndex: 'action',
align: 'center',
width: 199,
scopedSlots: { customRender: 'action' }
}
],
dataSource: []
}
},
methods: {
loadData(arg) {
if (!this.url.list) {
this.$message.error("请设置url.list属性!")
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
let params = this.getQueryParams();//查询条件
this.loading = true;
getAction(this.url.list, params).then((res) => {
if (res.success) {
//update-begin---author:zhangyafei Date:20201118 for:适配不分页的数据列表------------
this.dataSource = res.result.records
if (this.dataSource.length > 0) {
this.dataSource.forEach(item => {
const param = {
committeeId: item.id
}
getAction(this.url.committeeMemberList, param).then(tt =>{
item.committeeMember = tt.result.records
})
})
}
if (res.result.total) {
this.ipagination.total = res.result.total;
//清空列表选中
this.onClearSelected()
} else {
this.ipagination.total = 0;
}
//update-end---author:zhangyafei Date:20201118 for:适配不分页的数据列表------------
}
if (res.code === 510) {
this.$message.warning(res.message)
}
this.loading = false;
}).finally(() => {
this.loading = false
})
},
// 下拉框的搜索
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
handleAddCommitteeMember(record) {
console.log(record)
record.committeeId = record.id
this.$refs.memberModalForm.add(record);
this.$refs.memberModalForm.title = "新增成员";
this.$refs.memberModalForm.disableSubmit = false;
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>
@@ -0,0 +1,207 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="分标委名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入分标委名称"
v-decorator="['name',validatorRules.name]"
:disabled="true"
: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">
<company-select placeholder="请选择企业"
v-decorator="['company',validatorRules.company]"
@change="companyChange">
</company-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<select-contacts :selected-company="selectedCompany"
placeholder="请选择联系人"
v-decorator="['contactsId',validatorRules.contactsId]"
:maxLength='50'
ref="selectContacts"
@change="handleContactChange"
@ok="addContactsOk"></select-contacts>
</a-form-item>
</a-col>
<a-col :xl="12" :sm="24">
<a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入职务"
v-decorator="['post',validatorRules.post]"
:disabled="true"
: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">
<a-input placeholder="请输入手机"
v-decorator="['phone',validatorRules.phone]"
:disabled="true"
: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">
<a-input placeholder="请输入邮箱"
v-decorator="['email',validatorRules.email]"
:disabled="true"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'
import { getContactsById } from '@api/api'
import CompanySelect from '@comp/company/CompanySelect'
import SelectContacts from '@comp/company/SelectContacts'
export default {
name: 'CommitteeMemberModule',
components: { CompanySelect, SelectContacts },
data() {
return {
title: '操作',
width: 800,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
selectedCompany: {},
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 }
},
validatorRules: {
company: {
rules: [{ required: true, message: '请选择企业' }],
validateTrigger: 'blur'
},
contactsId: {
rules: [{ required: true, message: '请选择联系人' }],
validateTrigger: 'blur'
}
}
}
},
methods: {
add(record) {
this.edit(record)
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
console.log(this.model, '=========')
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'name'))
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
values.dataSource = this.dataForm
values.signingUp = this.applyAdd
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()
},
/**
* 选中企业变化,将联系人的值清空
* @param value
*/
companyChange(value) {
console.log(value)
this.selectedCompany = value
this.model.contactsId = undefined
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'contactsId', 'mailContactsId'))
})
},
/**
* 在新增成功后重新获取联系人列表
*/
addContactsOk() {
this.$refs.selectContacts.getContactsList()
},
/**
* 获取选中联系人的信息并回显
* @param value
*/
handleContactChange(value) {
const param = {
id: value
}
getContactsById(param).then(res => {
this.model = Object.assign(this.model, res.result)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'email', 'phone', 'post'))
})
})
}
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,131 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col>
<a-form-item label="分标委名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入分标委名称"
v-decorator="['name',validatorRules.name]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea
placeholder="请输入备注"
v-decorator="['remarks']"
:auto-size="{ minRows: 3, maxRows: 6 }"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'
export default {
name: 'CommitteeModule',
data() {
return {
title: '操作',
width: 800,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 3 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 21 }
},
validatorRules: {
name: {
rules: [{ required: true, message: '请输入分标委名称' }],
validateTrigger: 'blur'
}
}
}
},
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, ))
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
values.dataSource = this.dataForm
values.signingUp = this.applyAdd
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()
},
// 下拉框的搜索
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
}
}
</script>
<style scoped>
</style>