<!--
|
* @Author: your name
|
* @Date: 2019-10-21 15:40:58
|
* @LastEditTime : 2019-12-25 11:45:20
|
* @LastEditors : PengJianTian
|
* @Description: In User Settings Edit
|
* @FilePath: /e:\Demo\cts-web\src\views\area\enterprise\update\components\ProductInfoTable.vue
|
-->
|
<template>
|
<div id="product">
|
<el-button type="primary" size="mini" @click="handleAdd" style="margin-bottom: 20px;margin-top: 50px;" v-if="stageShow">新增</el-button>
|
<el-table v-loading="listLoading" stripe :data="ruleForm.tableData" highlight-current-row>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">项目公司名称</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px" v-show="!row.save">{{
|
row.companyName
|
}}</span>
|
<el-input
|
style="padding-left: 15px"
|
size="small"
|
v-show="row.save"
|
v-model="row.companyName"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">项目省份</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px" v-show="!row.save">{{
|
row.projectProvinceDesc
|
}}</span>
|
<el-select size="small" v-model="row.projectProvince" filterable clearable placeholder="请选择" v-show="row.save" @change="provinceChange">
|
<el-option v-for="(item, index) in provinces" :key="index" :label="item.itemname" :value="item.itemno">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">项目城市</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px" v-show="!row.save">{{
|
row.projectCityDesc
|
}}</span>
|
<el-select size="small" v-model="row.projectCity" filterable clearable placeholder="请选择" v-show="row.save">
|
<el-option v-for="(item, index) in citys" :key="index" :label="item.itemname" :value="item.itemno">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">项目公司地址</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px" v-show="!row.save">{{
|
row.projectAddress
|
}}</span>
|
<el-input
|
style="padding-left: 15px"
|
size="small"
|
v-show="row.save"
|
v-model="row.projectAddress"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="200" v-if="stageShow" fixed="right">
|
<template slot-scope="scope">
|
<el-button v-if="!scope.row.save" type="text" size="mini" @click="handleEdit(scope.row,scope.$index)">
|
修改
|
</el-button>
|
<el-button v-if="scope.row.save" type="text" size="mini" @click="handleSave(scope.row, scope.$index)">
|
保存
|
</el-button>
|
<el-button type="text" v-if="!scope.row.cancel" size="mini" @click="handleDelete(scope.row, scope.$index)">
|
删除
|
</el-button>
|
<el-button type="text" v-if="scope.row.cancel" size="mini" @click="handleCancel(scope.row,scope.$index)">
|
取消
|
</el-button>
|
<el-button v-if="!scope.row.save" type="text" size="mini" @click="showContractInfo(scope.row, scope.$index)">
|
联系人信息
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <pagination
|
v-show="total > 1"
|
:total="total"
|
:page.sync="listQuery.currentPage"
|
:limit.sync="listQuery.pageSize"
|
@pagination="initTable"
|
/> -->
|
<ContractInfo ref="contractInfo"></ContractInfo>
|
|
</div>
|
</template>
|
|
<script>
|
import TableInput from './components/TableInput'
|
import ContractInfo from './components/ContractInfo'
|
import { saveEntProjectInfo, delEntProjectInfo, qryEntProjectInfoList } from '@/api/area/enterprise'
|
import { mapState } from 'vuex'
|
import Pagination from '@/components/Pagination'
|
import { getProvinceCodeList, getCityCodeList } from '@/api/area'
|
export default {
|
components: { Pagination, TableInput, ContractInfo },
|
data: function() {
|
return {
|
// 分页
|
listLoading: true,
|
total: 0,
|
listQuery: {
|
currentPage: 1,
|
pageSize: 10
|
},
|
ruleForm: {
|
tableData: []
|
},
|
items: [
|
{ label: '项目公司名称', prop: 'companyName', key: 1, width: 200 },
|
{ label: '项目省份', prop: 'projectProvince', key: 2, width: 200 },
|
{ label: '项目城市', prop: 'projectCity', key: 2, width: 200 },
|
{ label: '项目公司地址', prop: 'projectAddress;', key: 3, width: 200 },
|
],
|
form: {
|
companyName: '',
|
projectProvince: '',
|
projectCity: '',
|
projectAddress: '',
|
},
|
row: {},
|
provinces: [],
|
citys: [],
|
saveSuccess: true
|
}
|
},
|
computed: {
|
...mapState({
|
enterpriseParams: state => state.risk.enterpriseParams
|
}),
|
stageShow() {
|
if (this.enterpriseParams.phaseno === '0040' || this.enterpriseParams.phaseno === '0050') {
|
return false
|
} else {
|
return true
|
}
|
}
|
},
|
watch: {
|
},
|
created() {
|
this.initTable()
|
|
getProvinceCodeList({}).then(res => {
|
this.provinces = res.result
|
})
|
},
|
methods: {
|
provinceChange(newVal) {
|
let params = {
|
codeNo: 'AreaCode',
|
itmeNo: newVal
|
}
|
getCityCodeList(params).then(res => {
|
this.citys = res.result
|
})
|
},
|
async initTable() {
|
let params = {
|
entSerialno: this.enterpriseParams.masterSerialNo,
|
}
|
// Object.assign(params, this.listQuery)
|
let res = await qryEntProjectInfoList(params)
|
this.ruleForm.tableData = res.result
|
this.ruleForm.tableData.forEach((item, key) => {
|
item = Object.assign({}, item, { save: false })
|
})
|
// this.initForm()
|
this.listLoading = false
|
},
|
// async initForm() {
|
// let params = { entSerialno: this.enterpriseParams.masterSerialNo }
|
// Object.assign(this.row, this.form)
|
// let res = await clickAddEnpProductInfo(params)
|
// this._.merge(this.form, res.result)
|
// },
|
// 修改
|
handleEdit(row, index) {
|
if (this._.find(this.ruleForm.tableData, { save: true })) {
|
this.$message.warning('请保存当前数据！')
|
return false
|
}
|
this.$set(this.ruleForm.tableData[index], 'save', true)
|
this.$set(this.ruleForm.tableData[index], 'cancel', true)
|
this.modifyRow = Object.assign({}, row)
|
},
|
// 保存
|
handleSave(row, index) {
|
saveEntProjectInfo(row).then(res => {
|
if (res.code === '00') {
|
this.$message.success('保存成功')
|
this.$set(this.ruleForm.tableData[index], 'save', false)
|
this.$set(this.ruleForm.tableData[index], 'cancel', false)
|
this.initTable()
|
}
|
})
|
},
|
// 删除
|
async handleDelete(row, index) {
|
if (row.newRow) {
|
this.ruleForm.tableData.splice(index, 1)
|
this.initTable()
|
return false
|
}
|
let confirm = await this.$confirm('此操作将永久删除该内容, 是否继续?', '删除确认', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
customClass: 'enp_messages_box',
|
confirmButtonClass: 'enp_messages_box_confirm',
|
cancelButtonClass: 'enp_messages_box_cancel',
|
center: true
|
})
|
.then(() => {
|
return true
|
})
|
.catch(() => {
|
return false
|
})
|
let params = { serialno: row.serialno }
|
if (confirm) {
|
let res = await delEntProjectInfo(params)
|
if (res.code === '00') {
|
this.$message.success('删除成功！')
|
this.initTable()
|
}
|
}
|
},
|
handleAdd() {
|
if (this._.find(this.ruleForm.tableData, { save: true })) {
|
this.$message.warning('请保存当前数据！')
|
return false
|
}
|
let params = {
|
save: true,
|
cancel: false,
|
newRow: true,
|
entSerialno: this.enterpriseParams.masterSerialNo,
|
companyName: '',
|
projectProvince: '',
|
projectCity: '',
|
projectAddress: '',
|
}
|
this.ruleForm.tableData.unshift(params)
|
},
|
// 取消
|
handleCancel(row, index) {
|
// console.log(row)
|
// console.log(this.modifyRow)
|
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: 'enp_messages_box',
|
confirmButtonClass: 'enp_messages_box_confirm',
|
cancelButtonClass: 'enp_messages_box_cancel',
|
center: true
|
})
|
.then(() => {
|
// 保存
|
row.cancel = !row.cancel
|
row.save = !row.save
|
this.handleSave(row,index)
|
// this.$message.success('保存成功');
|
this.saveSuccess = true
|
})
|
.catch(() => {
|
for (let key in row) {
|
row[key] = this.modifyRow[key]
|
}
|
row.cancel = !row.cancel
|
row.save = !row.save
|
this.saveSuccess = true
|
})
|
} else {
|
// 数据未修改
|
row.cancel = !row.cancel
|
row.save = !row.save
|
}
|
},
|
showContractInfo(row) {
|
this.$refs.contractInfo.init(row.serialno)
|
},
|
|
// 表单提交
|
handleSubmit() {
|
this.$emit('handleNextPage', true)
|
},
|
// 表格必填样式控制
|
renderHeader (h, {column}) { // h即为cerateElement的简写
|
return h(
|
'div',
|
[
|
[
|
h('span', {
|
style: 'position:absolute;top:7px;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>
|
#product
|
>>> .el-form
|
.cell
|
div
|
&:nth-child(1)
|
line-height 18px
|
width auto
|
.el-form-item__content
|
.el-input--mini
|
// left 10px
|
.el-input__inner
|
// width 170px
|
font-size 14px
|
.red-star
|
display inline-block
|
width 5px
|
height 5px
|
border-radius 50%
|
vertical-align: middle;
|
// color: #F56C6C;
|
background-color #f56c66
|
margin-bottom 3px
|
</style>
|
