<template>
|
<div>
|
<!-- <el-dialog :visible.sync="dialogShow"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
@close="close"
|
title="开发商配置"
|
custom-class="comm-dialog"
|
center
|
width="1250px"> -->
|
<p class="section-title">项目配置</p>
|
<!-- <el-form ref="ruleForm"
|
label-width="100px"
|
class="demo-ruleForm"
|
inline>
|
<el-form-item label="省份">
|
<el-input style="padding-left:15px"
|
size="small"
|
v-model="projectInfo.projectProvinceDesc"
|
readonly=""></el-input>
|
|
</el-form-item>
|
<el-form-item label="城市">
|
<el-input style="padding-left:15px"
|
size="small"
|
v-model="projectInfo.projectCityDesc"
|
readonly=""></el-input>
|
|
</el-form-item>
|
<el-form-item label="项目名称">
|
<el-input style="padding-left:15px"
|
size="small"
|
v-model="projectInfo.projectName"
|
readonly=""></el-input>
|
|
</el-form-item>
|
</el-form> -->
|
<div class="contact">
|
<el-button type="primary"
|
@click="addcontact"
|
v-if="powerControl.addControl"
|
size="medium">新增</el-button>
|
<el-table stripe
|
:data="contactData"
|
style="margin-top:30px"
|
:cell-style="cell"
|
:header-cell-style="{background:'#f5f5f5',color:'#222222'}"
|
highlight-current-row>
|
|
<el-table-column min-width="100">
|
<template slot="header">
|
<span style="padding-left:8px">服务类型</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.serviceTypeDesc}}</span>
|
<el-select style="padding-left:15px;display:block;"
|
v-model="row.serviceType"
|
filterable
|
placeholder="请选择"
|
size="small"
|
v-show="row.isEdit">
|
<el-option v-for="item in relationshipList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="100">
|
<template slot="header">
|
<span style="padding-left:8px">服务类目</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.serviceCategory}}</span>
|
<el-input style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.serviceCategory"
|
placeholder="请输入"
|
require></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100">
|
<template slot="header">
|
<span style="padding-left:8px">入账金额</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.customerFeeAmt}}</span>
|
<el-input style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.customerFeeAmt"
|
placeholder="请输入"
|
require></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100">
|
<template slot="header">
|
<span style="padding-left:8px">抵扣房价描述</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.discountHouseInfo}}</span>
|
<el-input style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.discountHouseInfo"
|
placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100">
|
<template slot="header">
|
<p style="padding-left:8px">家电包</p>
|
<p style="padding-left:8px">支出金额</p>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.bagPayAmt}}</span>
|
<el-input style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.bagPayAmt"
|
placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100">
|
<template slot="header">
|
<p style="padding-left:8px">家电包</p>
|
<p style="padding-left:8px">采购成本</p>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.bagStockAmt}}</span>
|
<el-input style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.bagStockAmt"
|
placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100">
|
<template slot="header">
|
<p style="padding-left:8px">服务费比例</p>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.serviceFeeRate}}</span>
|
<el-input-number size="small"
|
v-show="row.isEdit"
|
v-model="row.serviceFeeRate"
|
placeholder="请输入"
|
class="num-inp"
|
:max="100"
|
:controls="false"
|
:precision="2">
|
</el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100">
|
<template slot="header">
|
<p style="padding-left:8px">保证金比例</p>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.guaranteeRate}}</span>
|
<el-input-number size="small"
|
v-show="row.isEdit"
|
v-model="row.guaranteeRate"
|
placeholder="请输入"
|
class="num-inp"
|
:max="100"
|
:controls="false"
|
:precision="2">
|
</el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100">
|
<template slot="header">
|
<p style="padding-left:8px">税额差补比例</p>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px"
|
v-show="!row.isEdit">{{row.taxMakeupRate}}</span>
|
<el-input-number size="small"
|
v-show="row.isEdit"
|
v-model="row.taxMakeupRate"
|
placeholder="请输入"
|
class="num-inp"
|
:max="100"
|
:controls="false"
|
:precision="2">
|
</el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column label="管理"
|
min-width="160"
|
>
|
<template slot-scope="scope">
|
<div v-if="!powerControl.addControl">
|
<el-button type="text"
|
@click.native="handleEditConfigImg(scope.row)"
|
>查看影像</el-button>
|
</div>
|
<div v-else>
|
<el-button type="text"
|
@click.native="handleEdit(scope.row)"
|
v-if="!scope.row.isEdit">修改</el-button>
|
<el-button type="text"
|
@click.native="handleSave(scope.row)"
|
v-else>保存</el-button>
|
<el-button type="text"
|
@click.native="handleCancel(scope.row,scope.$index)"
|
v-if="scope.row.isCancel">取消</el-button>
|
<el-button type="text"
|
@click.native="handleDelete(scope.row,scope.$index)"
|
v-else>删除</el-button>
|
<el-button type="text"
|
@click.native="handleEditConfigImg(scope.row)"
|
v-if="!scope.row.isEdit">编辑影像</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- <span slot="footer"
|
class="dialog-footer">
|
<el-button @click="close()"
|
class="comm-button">关闭</el-button>
|
</span> -->
|
<!-- </el-dialog> -->
|
<HouseholdBagServiceConfigImg :visible="uploadVisible"
|
:serviceInfo="serviceInfo"
|
:powerControl="powerControl"
|
@close="handleConfigImg" />
|
</div>
|
</template>
|
<script>
|
import { getDictionaryList } from '@comprehensive/serve/public';
|
import {
|
addOrModifyHouseholdBagServiceConfig,
|
qryHouseholdBagServiceConfigList,
|
deleteHouseholdBagServiceConfig,
|
qryHouseholdBagProjectInfo,
|
} from '@/api/comprehensiveTransaction';
|
import common from '@/utils/common';
|
import HouseholdBagServiceConfigImg from './HouseholdBagServiceConfigImg';
|
|
export default {
|
components: {
|
HouseholdBagServiceConfigImg,
|
},
|
props: {
|
serialno: {
|
type: String,
|
default: '',
|
},
|
powerControl: {
|
type: Object,
|
default: () => ({}),
|
},
|
dialogVisible: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
uploadVisible: false,
|
applyInfo: this.$store.state.product.applyInfo,
|
contactData: [],
|
contactArr: [],
|
initialArr: [],
|
relationshipList: [],
|
serviceInfo: {},
|
projectInfo: {},
|
show: true,
|
};
|
},
|
computed: {
|
dialogShow: {
|
get() {
|
return this.dialogVisible;
|
},
|
set(newVal) {
|
// this.$emit('input', newVal)
|
},
|
},
|
},
|
watch: {
|
dialogShow(newV) {
|
if (newV) {
|
this.setSelectOptions();
|
// 查询开发商
|
this.getConfigList();
|
// this.qryHouseholdBagProjectInfo();
|
}
|
},
|
},
|
async mounted() {},
|
methods: {
|
init(){
|
this.setSelectOptions();
|
// 查询开发商
|
this.getConfigList();
|
},
|
cell({ row, column, rowIndex, columnIndex }) {
|
const { applyInfo } = this;
|
const { refuseFlag } = applyInfo;
|
if (refuseFlag == 1) {
|
const { customerInfo } = this.$store.state.product.fields;
|
const { customerRelativeList } = customerInfo;
|
if (customerRelativeList && customerRelativeList.length) {
|
for (let i = 0; i < customerRelativeList.length; i++) {
|
const object = customerRelativeList[i];
|
for (const key in object) {
|
if (row[key] != object[key] && column.property == key) {
|
return { color: '#222', 'font-weight': '700' };
|
}
|
}
|
}
|
}
|
}
|
},
|
|
// 设置表单下拉菜单
|
setSelectOptions() {
|
this.getDictionaryList('relationshipList', {
|
codeNo: 'HouseholdAppBagServiceType',
|
});
|
},
|
|
// 获取select中options数据
|
async getDictionaryList(name, info = {}) {
|
const { result } = await getDictionaryList(info);
|
this.relationshipList = result;
|
},
|
// 查询服务项列表
|
getConfigList() {
|
qryHouseholdBagServiceConfigList({
|
projectSerialNo: this.serialno,
|
}).then((res) => {
|
this.contactData = [];
|
this.initialArr = [];
|
// this.contactArr = res.result;
|
let arr = [];
|
res.result.length && res.result.forEach((val) => {
|
val.isEdit = false;
|
arr.push(val);
|
});
|
this.contactData = res.result;
|
this.initialArr = JSON.parse(JSON.stringify(res.result));
|
});
|
},
|
// 获取项目信息
|
qryHouseholdBagProjectInfo() {
|
qryHouseholdBagProjectInfo({
|
projectSerialNo: this.serialno,
|
}).then((res) => {
|
this.projectInfo = res.result;
|
});
|
},
|
// 新增开发商
|
addcontact() {
|
for (let i = 0; i < this.contactData.length; i++) {
|
if (this.contactData[i].isEdit) {
|
this.$message.warning('请先保存当前开发商再新增');
|
return;
|
}
|
}
|
this.contactData.unshift({
|
relativecustomername: '',
|
phone: '',
|
relationship: '',
|
applyserialno: this.applyInfo.serialNo,
|
customerid: this.applyInfo.customerid,
|
isEdit: true,
|
});
|
},
|
// 保存开发商
|
handleSave(row) {
|
if (!row.serviceType) {
|
this.$message.warning('请选择服务类型！');
|
return;
|
}
|
if (!row.serviceCategory) {
|
this.$message.warning('请输入服务类目！');
|
return;
|
}
|
|
if (row.customerFeeAmt === ""||row.customerFeeAmt == null||row.customerFeeAmt ==undefined) {
|
this.$message.warning('请输入入账金额！');
|
return;
|
}
|
|
// if (!row.discountHouseInfo) {
|
// this.$message.warning('请输入抵扣房价描述！');
|
// return;
|
// }
|
if (row.bagPayAmt === ""||row.bagPayAmt == null||row.bagPayAmt ==undefined) {
|
this.$message.warning('请输入家电包支出金额！');
|
return;
|
}
|
if (row.bagStockAmt === ""||row.bagStockAmt == null||row.bagStockAmt ==undefined) {
|
this.$message.warning('请输入家电包采购成本！');
|
return;
|
}
|
if (row.serviceFeeRate === ""||row.serviceFeeRate == null||row.serviceFeeRate ==undefined) {
|
this.$message.warning('请输入服务费比例！');
|
return;
|
}
|
if (row.guaranteeRate === ""||row.guaranteeRate == null||row.guaranteeRate ==undefined) {
|
this.$message.warning('请输入保证金比例！');
|
return;
|
}
|
if (row.taxMakeupRate === ""||row.taxMakeupRate == null||row.taxMakeupRate ==undefined) {
|
this.$message.warning('请输入税额差补比例！');
|
return;
|
}
|
|
addOrModifyHouseholdBagServiceConfig({
|
projectSerialno: this.serialno,
|
...row,
|
}).then((res) => {
|
if (res.code == '00') {
|
this.$message.success('保存成功');
|
this.getConfigList();
|
}
|
});
|
},
|
// 修改
|
handleEdit(row) {
|
for (let i = 0; i < this.contactData.length; i++) {
|
if (this.contactData.length > 1 && this.contactData[i].isEdit) {
|
this.$message.warning('请先保存当前开发商');
|
return;
|
}
|
}
|
this.$set(row, 'isEdit', true);
|
this.$set(row, 'isCancel', true);
|
},
|
handleEditConfigImg(row) {
|
this.serviceInfo = row;
|
this.uploadVisible = true;
|
},
|
// 取消
|
handleCancel(row, index) {
|
const arr = [];
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if (i == index) {
|
for (const key in row) {
|
console.log(key, row[key], this.initialArr[i][key]);
|
if (
|
key != 'isEdit' &&
|
key != 'isCancel' &&
|
row[key] != this.initialArr[i][key]
|
) {
|
arr.push(key);
|
}
|
}
|
}
|
}
|
if (arr.length) {
|
common.comfirm('提示', '当前有数据未保存，是否放弃保存？', () => {
|
this.$set(row, 'isEdit', false);
|
this.$set(row, 'isCancel', false);
|
arr.forEach((val) => {
|
for (const key in this.initialArr[index]) {
|
if (this.initialArr[index].hasOwnProperty(val)) {
|
this.contactData[index][key] = this.initialArr[index][key];
|
}
|
}
|
});
|
});
|
} else {
|
this.$set(row, 'isEdit', false);
|
this.$set(row, 'isCancel', false);
|
}
|
},
|
// 删除
|
handleDelete(row, index) {
|
// for (let i = 0; i < this.contactData.length; i++) {
|
// if (this.contactData.length == 1 && !this.contactData[i].isEdit) {
|
// this.$message.warning('至少保留一个服务项');
|
// return;
|
// }
|
// }
|
if (row.serialno) {
|
common.comfirm('提示', `请确认是否需要删除：${row.serialno}?`, () => {
|
if (row.serialno) {
|
deleteHouseholdBagServiceConfig({ serialno: row.serialno }).then(
|
(res) => {
|
if (res.code == '00') {
|
this.$message.success('删除成功');
|
this.getConfigList();
|
}
|
}
|
);
|
}
|
});
|
} else {
|
this.getConfigList();
|
}
|
},
|
close() {
|
this.$emit('doAction', 'close');
|
},
|
handleConfigImg() {
|
this.uploadVisible = false;
|
},
|
},
|
};
|
</script>
|
|
<style>
|
</style>
|
<style lang="postcss" scoped>
|
.section-title {
|
margin: 30px 0 20px 0;
|
padding: 0 0 0 10px;
|
border-left: solid 2px #0081f0;
|
line-height: 16px;
|
font-size: 14px;
|
color: #222222;
|
}
|
.contact {
|
> .el-button {
|
padding: 9px 12px;
|
}
|
> p {
|
height: 20px;
|
color: #222222;
|
font-weight: 500;
|
font-size: 14px;
|
position: relative;
|
margin-bottom: 30px;
|
> span {
|
width: 2px;
|
height: 14px;
|
background-color: #0081f0;
|
position: absolute;
|
left: -10px;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.red-star {
|
width: 7px;
|
display: inline-block;
|
vertical-align: middle;
|
color: #ff4300;
|
}
|
}
|
}
|
.el-input__inner {
|
padding: 0 1.5em 0 4px !important;
|
}
|
.el-input-number--small {
|
width: 100px;
|
}
|
.num-inp {
|
position: relative;
|
&:after {
|
content: '%';
|
position: absolute;
|
width: 1.5em;
|
height: calc(100% - 2px);
|
top: 0;
|
right: 0;
|
text-align: center;
|
background-color: #f5f7fa;
|
border: 1px solid #dcdfe6;
|
color: #909399;
|
border-radius: 0 4px 4px 0;
|
}
|
}
|
</style>
|
