<template>
|
<div id="project-members">
|
<el-button
|
type="primary"
|
size="mini"
|
@click="handleAdd"
|
style="margin-bottom: 20px"
|
v-if="lastDouble"
|
>新增</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="personDesc">
|
<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.personDesc }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.personDesc'"
|
:rules="rules"
|
v-if="action[scope.$index].edit"
|
>
|
<el-select
|
v-if="action[scope.$index].edit"
|
v-model="scope.row.personDesc"
|
filterable
|
remote
|
size="mini"
|
reserve-keyword
|
@change="onchagne(scope.row.personDesc, 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>
|
|
<el-table-column prop="personPhone">
|
<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.personPhone }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.personPhone'"
|
:rules="rules"
|
v-if="action[scope.$index].edit">
|
<el-input
|
v-if="action[scope.$index].edit"
|
v-model="scope.row.personPhone"
|
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="lastDouble"
|
>
|
<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 { mapState } from 'vuex'
|
import {
|
getEnsurePersonnelList,
|
updateEnsurePersonInfo,
|
delEnsurePerson,
|
queryUserList
|
} from '@/api/area'
|
import Pagination from '@/components/Pagination'
|
|
export default {
|
components: { Pagination },
|
data: function() {
|
return {
|
tableData: [],
|
total: 0,
|
listQuery: {
|
currentPage: 1,
|
pageSize: 10
|
},
|
loading: false,
|
ruleForm: {
|
tableData: []
|
},
|
form: {
|
personDesc: '',
|
personPhone: ''
|
},
|
row: {
|
personDesc: '',
|
personPhone: ''
|
},
|
action: [],
|
options: {
|
productpeople: ''
|
},
|
rules: { required: true, message: '请输入活动名称', trigger: 'blur' },
|
modifyRow: '',
|
saveSuccess: true
|
}
|
},
|
created() {
|
this.tableList()
|
},
|
watch: {
|
objectNo: {
|
immediate: true,
|
handler(newVal) {
|
if (!this._.isEmpty(newVal)) {
|
this.tableList()
|
}
|
}
|
}
|
},
|
computed: {
|
...mapState({
|
detailsParams: state => state.risk.detailsParams,
|
projectType: state => state.risk.projectType
|
}),
|
lastDouble() {
|
if (
|
this.detailsParams.phaseNo === '0040' ||
|
this.detailsParams.phaseNo === '0050'
|
) {
|
return false
|
} else {
|
return true
|
}
|
}
|
},
|
methods: {
|
async tableList() {
|
let status = {
|
status: 'edit',
|
edit: false,
|
state: 'del',
|
del: false
|
}
|
const { detailsParams } = this
|
const { objectNo, objectType, projectType, dataType } = detailsParams
|
let params = {
|
objectNo,
|
objectType,
|
projectType,
|
dataType,
|
ensureType:'01'
|
}
|
Object.assign(params, this.listQuery)
|
let res = await getEnsurePersonnelList(params)
|
this.ruleForm.tableData = res.result.records
|
this.total = res.result.total
|
let action = []
|
for (let i = 0; i < this.ruleForm.tableData.length; i++) {
|
action.push(status)
|
}
|
this.action = action
|
// this.initForm()
|
this.listLoading = false
|
this.$emit('proDevInfo',this.ruleForm.tableData)
|
},
|
initForm() {
|
Object.assign(this.row, this.form)
|
const formList = {
|
personDesc: {
|
value: '',
|
codeNo: '',
|
name: 'personDesc',
|
type: 'select',
|
orders: 'null',
|
filedDescription: '驻点员工姓名',
|
visible: true,
|
require: true,
|
writeAble: true
|
},
|
personId: {
|
value: '',
|
codeNo: '',
|
name: 'personId',
|
type: 'select',
|
orders: 'null',
|
filedDescription: '驻点员工工号',
|
visible: true,
|
require: true,
|
writeAble: true
|
},
|
personPhone: {
|
value: '',
|
codeNo: '',
|
name: 'personPhone',
|
type: 'input',
|
orders: 'null',
|
filedDescription: '驻点员工联系方式',
|
visible: true,
|
require: true,
|
writeAble: true
|
}
|
}
|
this._.merge(this.form, formList)
|
},
|
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 = []
|
}
|
},
|
onchagne(value, index, type) {
|
if (type === 'productphone') {
|
let item = this.options.productpeople.find(item => {
|
return item.userDesc === value
|
})
|
this.$set(this.ruleForm.tableData[index], 'personPhone', item.phone)
|
}
|
},
|
// 修改
|
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
|
}
|
const { dataType, objectType, objectNo } = this.detailsParams
|
let params = {
|
dataType,
|
objectType,
|
objectNo,
|
ensureType: '01'
|
}
|
params = Object.assign({}, value, params)
|
updateEnsurePersonInfo(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(async () => {
|
const { serialNo } = value
|
const { dataType } = this.detailsParams
|
let params = {
|
serialNo,
|
dataType
|
}
|
await delEnsurePerson(params).then(res => {
|
if (res.code === '00') {
|
this.$message.success('删除成功')
|
// this.action.splice(index, 1)
|
this.tableList()
|
}
|
})
|
})
|
.catch(() => {})
|
},
|
// 新增
|
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)
|
},
|
// 取消
|
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)
|
}
|
},
|
// 取消-> 保存/放弃修改
|
isModify(index) {
|
this.action[index].edit = false
|
this.action[index].status = 'edit'
|
this.action[index].state = 'del'
|
},
|
}
|
}
|
</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>
|
