<template>
|
<div id="project-members">
|
<el-button type="primary" size="mini" @click="handleAdd" style="margin-bottom: 20px" v-if="pagetype == 'add'">新增</el-button>
|
<el-form ref="ruleForm" :model="ruleForm" :show-message="false">
|
<el-table :data="ruleForm.tableData" fit stripe size="small">
|
<el-table-column label=" " type="index"> </el-table-column>
|
<!-- 1-->
|
<!-- :render-header="renderHeader" -->
|
<el-table-column prop="productpeopleDesc" width="140px">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">姓名</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div v-if="!action[scope.$index].edit">{{ scope.row.productpeopleDesc }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.productpeopleDesc'"
|
:rules="rules"
|
v-if="action[scope.$index].edit"
|
>
|
<el-select
|
v-if="action[scope.$index].edit"
|
v-model="scope.row.productpeopleDesc"
|
filterable
|
remote
|
size="mini"
|
reserve-keyword
|
@change="onchagne(scope.row.productpeopleDesc, scope.$index, (type = 'productphone'))"
|
placeholder="请输入关键词"
|
:remote-method="remoteMethod"
|
:loading="loading"
|
>
|
<el-option
|
v-for="item in options.productpeople"
|
:key="item.userDesc"
|
:label="item.userDesc"
|
:value="item.userDesc"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<!-- 2-->
|
<el-table-column prop="productphone" width="200px">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">项目人员手机号</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div v-if="!action[scope.$index].edit">{{ scope.row.productphone }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.productphone'"
|
:rules="rules"
|
v-if="action[scope.$index].edit"
|
>
|
<el-input
|
v-if="action[scope.$index].edit"
|
v-model.number="scope.row.productphone"
|
size="mini"
|
@input="handlePhone(scope.row.productphone, scope.$index, (type = 'productphone'))"
|
></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<!--3-->
|
<el-table-column prop="productroleDesc" width="200px">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">项目角色</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div v-if="!action[scope.$index].edit">{{ scope.row.productroleDesc }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.productrole'"
|
:rules="rules"
|
v-if="action[scope.$index].edit"
|
>
|
<el-select
|
v-model="scope.row.productrole"
|
size="mini"
|
placeholder="请选择"
|
filterable
|
clearable
|
v-if="action[scope.$index].edit"
|
>
|
<el-option
|
v-for="item in options.productrole"
|
:key="item.value"
|
:label="item.valueDesc"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="remark" min-width="200">
|
<template slot="header">
|
<span>
|
<!-- <span class="red-star"></span> -->
|
<span style="padding-left:8px">人员备注</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<!-- <div v-if="!action[scope.$index].edit">{{ scope.row.remark }}</div> -->
|
<div v-if="!action[scope.$index].edit">
|
<el-popover v-if="scope.row.remark.length > 16" class="beyondContent" placement="top-start" width="200" trigger="hover" >
|
<div>{{scope.row.remark}}</div>
|
<span slot="reference">{{ scope.row.remark}}</span>
|
</el-popover>
|
<div v-else>{{ scope.row.remark }}</div>
|
</div>
|
<el-form-item v-if="action[scope.$index].edit">
|
<el-input v-if="action[scope.$index].edit" v-model="scope.row.remark" size="mini" class="remark"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="项目人员管理" prop="status" fixed="right" width="140px" v-if="pagetype == 'add'" >
|
<template slot-scope="scope">
|
<el-button
|
v-if="action[scope.$index].status === 'edit'"
|
type="text"
|
size="mini"
|
@click="handleEdit(scope.row,scope.$index)"
|
>
|
修改
|
</el-button>
|
<el-button
|
v-if="action[scope.$index].status === 'save'"
|
type="text"
|
size="mini"
|
@click="handleSave(scope.row, scope.$index)"
|
>
|
保存
|
</el-button>
|
<el-button
|
v-if="action[scope.$index].state === 'del'"
|
type="text"
|
size="mini"
|
@click="handleDelete(scope.row, scope.$index)"
|
>
|
删除
|
</el-button>
|
<el-button
|
v-if="action[scope.$index].state === 'cancel'"
|
type="text"
|
size="mini"
|
@click="handleCancel(scope.row,scope.$index)"
|
>
|
取消
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="listQuery.currentPage"
|
:limit.sync="listQuery.pageSize"
|
@pagination="tableList"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/Pagination'
|
import {
|
getProjectPersonnelList,
|
clickAddProjectPersonListInfo,
|
queryUserList,
|
projectQrycondition,
|
updateProjectPersonListInfo,
|
delProjectPersonListInfo,
|
queryPhaseNoBySerialno
|
} from '@/api/area'
|
import { mapState } from 'vuex'
|
export default {
|
props: ['pagetype'],
|
components: { Pagination },
|
data: function() {
|
return {
|
tableData: [],
|
total: 0,
|
listQuery: {
|
currentPage: 1,
|
pageSize: 10
|
},
|
options: {
|
productpeople: '',
|
productmanage: '',
|
productrole: ''
|
},
|
loading: false,
|
ruleForm: {
|
tableData: []
|
},
|
form: {
|
productrole: '',
|
productmanageDesc: '',
|
productmanagephone: '',
|
productpeopleDesc: '',
|
overtime: '',
|
remark: '',
|
begintime: '',
|
productphone: ''
|
},
|
row: {
|
productrole: '',
|
productmanageDesc: '',
|
productmanagephone: '',
|
productpeopleDesc: '',
|
overtime: '',
|
remark: '',
|
begintime: '',
|
productphone: ''
|
},
|
action: [],
|
phaseno: '',
|
objectno: '',
|
rules: { required: true, message: '请输入活动名称', trigger: 'blur' },
|
modifyRow: '',
|
saveSuccess: true
|
}
|
},
|
created() {
|
this.tableList()
|
this.setProductrole()
|
},
|
computed: {
|
...mapState({
|
detailsParams: state => state.risk.detailsParams
|
}),
|
lastDouble() {
|
if (this.phaseno === '0040' || this.phaseno === '0050') {
|
return false
|
} else {
|
return true
|
}
|
}
|
},
|
methods: {
|
tableList() {
|
let status = {
|
status: 'edit',
|
edit: false,
|
state: 'del',
|
del: false
|
}
|
let detailsParams = {
|
objectType: this.detailsParams.objectType,
|
dataType: this.detailsParams.dataType,
|
projectFlag: this.detailsParams.projectFlag,
|
projectType: this.detailsParams.projectType,
|
serialno: this.detailsParams.objectNo
|
}
|
let params = Object.assign({}, this.listQuery, detailsParams)
|
// 初始化表格
|
getProjectPersonnelList(params).then(res => {
|
this.ruleForm.tableData = res.result.records
|
if(res.result.records.length == 0) return
|
this.objectno = res.result.records[0].objectno
|
this.total = res.result.total
|
let action = []
|
for (let i = 0; i < this.ruleForm.tableData.length; i++) {
|
action.push(status)
|
}
|
this.action = action
|
if (res.code === '00') {
|
let params = {
|
serialno: this.objectno
|
}
|
queryPhaseNoBySerialno(params).then(res => {
|
this.phaseno = res.result.phaseNo
|
})
|
}
|
})
|
// 获取权限
|
clickAddProjectPersonListInfo(params).then(res => {
|
let params = res.result
|
Object.keys(this.form).forEach(key => {
|
this.$set(this.form, key, params[key])
|
})
|
})
|
},
|
// 获取阶段号
|
// async getPhaseno(){
|
// let params = {
|
// serialno: '190919095704164001'
|
// }
|
// let res = await queryPhaseNoBySerialno(params)
|
// // console.log(res)
|
// },
|
remoteMethod(value) {
|
if (!this._.isEmpty(value)) {
|
this.loading = true
|
let params = {
|
queryInfo: value
|
}
|
setTimeout(() => {
|
this.loading = false
|
queryUserList(params).then(res => {
|
this.options.productpeople = res.result
|
})
|
}, 200)
|
} else {
|
this.options.productpeople = []
|
}
|
},
|
remoteMethod2(value) {
|
if (!this._.isEmpty(value)) {
|
this.loading = true
|
let params = {
|
queryInfo: value
|
}
|
setTimeout(() => {
|
this.loading = false
|
queryUserList(params).then(res => {
|
this.options.productmanage = res.result
|
})
|
}, 200)
|
} else {
|
this.options.productmanage = []
|
}
|
},
|
onchagne(value, index, type) {
|
if (type === 'productphone') {
|
let item = this.options.productpeople.find(item => {
|
return item.userDesc === value
|
})
|
this.$set(this.ruleForm.tableData[index], 'productphone', item.phone)
|
} else if (type === 'productmanagephone') {
|
let item = this.options.productmanage.find(item => {
|
return item.userDesc === value
|
})
|
this.$set(this.ruleForm.tableData[index], 'productmanagephone', item.phone)
|
}
|
},
|
setProductrole() {
|
let params = {
|
conditionName: 'ProductRole'
|
}
|
projectQrycondition(params).then(res => {
|
this.options.productrole = res.result
|
})
|
},
|
// 修改
|
handleEdit(row,index) {
|
this.modifyRow = Object.assign({}, row)
|
let findSave = { status: 'save' }
|
if (this._.find(this.action, findSave)) {
|
this.$message.warning('保存当前数据!')
|
return false
|
}
|
let params = {
|
status: 'save',
|
edit: true,
|
state: 'cancel',
|
del: true
|
}
|
this.$set(this.action, index, params)
|
},
|
handleSave(value, index) {
|
this.$refs['ruleForm'].validate(valid => {
|
if (valid) {
|
let status = {
|
stutas: 'edit',
|
edit: false
|
}
|
let params = {
|
dataType: this.detailsParams.dataType,
|
objecttype: this.detailsParams.objectType,
|
objectno: this.detailsParams.objectNo
|
}
|
params = Object.assign({}, params, value)
|
updateProjectPersonListInfo(params).then(res => {
|
if (res.code === '00') {
|
this.$message.success('保存成功!')
|
this.$set(this.action, index, status)
|
this.tableList()
|
}
|
})
|
} else {
|
this.$message.warning('必填项不能为空！')
|
}
|
})
|
},
|
handleDelete(value, index) {
|
if (this.action[index].newRow) {
|
this.ruleForm.tableData.splice(index, 1)
|
this.action.splice(index, 1)
|
return false
|
}
|
this.$confirm('此操作将永久删除该内容, 是否继续?', '删除确认', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
customClass: 'pro_messages_box',
|
confirmButtonClass: 'pro_messages_box_confirm',
|
cancelButtonClass: 'pro_messages_box_cancel',
|
center: true
|
})
|
.then(() => {
|
let params = {
|
serialno: value.serialno,
|
objectType: this.detailsParams.objectType,
|
dataType: this.detailsParams.dataType,
|
projectFlag: this.detailsParams.projectFlag,
|
projectType: this.detailsParams.projectType
|
}
|
delProjectPersonListInfo(params).then(res => {
|
if (res.code === '00') {
|
this.$message.success('删除成功')
|
// this.action.splice(index, 1)
|
this.tableList()
|
}
|
})
|
})
|
.catch(() => {})
|
},
|
// 取消
|
handleCancel(row, index) {
|
for (let key in row) {
|
if (row[key] !== this.modifyRow[key]) {
|
this.saveSuccess = false // 用户修改了数据
|
break
|
}
|
}
|
if (!this.saveSuccess) {
|
// 数据修改了
|
this.$confirm('检测到未保存的内容，是否保存当行修改？', '取消确认', {
|
distinguishCancelAndClose: true,
|
confirmButtonText: '保存',
|
cancelButtonText: '放弃修改',
|
customClass: 'pro_messages_box',
|
confirmButtonClass: 'pro_messages_box_confirm',
|
cancelButtonClass: 'pro_messages_box_cancel',
|
center: true
|
})
|
.then(() => {
|
// 保存
|
this.isModify(index)
|
// this.$message.success('保存成功');
|
this.handleSave(row, index)
|
this.saveSuccess = true
|
})
|
.catch(() => {
|
for (let key in row) {
|
row[key] = this.modifyRow[key]
|
}
|
this.isModify(index)
|
this.saveSuccess = true
|
})
|
} else {
|
// 数据未修改
|
this.isModify(index)
|
}
|
},
|
handleAdd() {
|
let params = { status: 'save' }
|
if (this._.find(this.action, params)) {
|
this.$message.warning('请保存当前数据')
|
return false
|
}
|
let status = {
|
status: 'save',
|
edit: true,
|
state: 'del',
|
del: true,
|
newRow: true
|
}
|
let newRow = {}
|
newRow = Object.assign({}, newRow, this.row)
|
this.ruleForm.tableData.unshift(newRow)
|
this.action.unshift(status)
|
},
|
handlePhone(value, index, type) {
|
var reg = /^1[3456789]\d{9}$/
|
let params = {
|
queryInfo: value
|
}
|
if (reg.test(value)) {
|
queryUserList(params).then(res => {
|
if (res.code === '00' && res.result.length > 0 && res.result[0].phone !== null) {
|
let userDesc = res.result[0].userDesc
|
if (type === 'productphone') {
|
this.$set(this.ruleForm.tableData[index], 'productpeopleDesc', userDesc)
|
} else if (type === 'productmanagephone') {
|
this.$set(this.ruleForm.tableData[index], 'productmanageDesc', userDesc)
|
}
|
}
|
})
|
}
|
},
|
// 取消-> 保存/放弃修改
|
isModify(index) {
|
this.action[index].edit = false
|
this.action[index].status = 'edit'
|
this.action[index].state = 'del'
|
},
|
// renderHeader (h,{column}) { // h即为cerateElement的简写
|
// return h(
|
// 'div',
|
// [
|
// [
|
// h('span', {
|
// style:'position:absolute;top:5px;left:12px;border:2px solid #FF4300;content:"";border-radius:50%;color:#FF4300;margin-right:5px;line-height:12px'
|
// }),
|
// h('span', column.label,
|
// {
|
// style: 'position:absolute;top:0px;left:0px;'
|
// })
|
// ],
|
// ],
|
// );
|
// },
|
}
|
}
|
</script>
|
|
<style lang="stylus" scoped>
|
#project-members
|
@media only screen and (max-width: 1280px) {
|
// width: 854px
|
}
|
>>> .el-form
|
.cell
|
div
|
&:nth-child(1)
|
line-height 1
|
.el-form-item__content
|
.el-input--mini
|
// left 10px
|
.el-input__inner
|
// width 155px
|
// min-width 155px
|
font-size 14px
|
.remark
|
.el-input__inner
|
// width 180px
|
.red-star
|
display inline-block
|
width 5px
|
height 5px
|
border-radius 50%
|
vertical-align: middle;
|
// color: #F56C6C;
|
background-color #f56c66
|
margin-bottom 3px
|
</style>
|
