<template>
|
<div class="customer-edit">
|
<el-dialog :title="title"
|
:visible.sync="dialogVisible"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
:before-close="handleClose"
|
custom-class="comm-dialog"
|
center
|
width="850px">
|
<EditForm ref="contractForm"
|
column="2"
|
:inline="true"
|
:list="formList"
|
:formValues="formValues"
|
:formRules="formRules"
|
:key="info.mailingNo || '1'"
|
@updateValue="updateValue"
|
></EditForm>
|
<div slot="footer"
|
class="dialog-footer popup-form-buttons">
|
<el-button class="comm-button"
|
size="small"
|
@click="$emit('doAction', 'close')">取消</el-button>
|
<el-button class="comm-button"
|
size="small"
|
@click="submit"
|
type="primary">保存</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
// 返现开发商-新增与编辑
|
import EditForm from '../components/EditForm';
|
import addOrModifyCommissionDevelop from '@comprehensive/model/addOrModifyCommissionDevelop';
|
import {
|
getDictionaryList,
|
getProvinceCodeList,
|
getCityCodeList,
|
getAreaCodeList,
|
} from '@comprehensive/serve/public';
|
export default {
|
components: {
|
EditForm,
|
},
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: '新增'
|
},
|
info: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
model: null,
|
formRules: {},
|
formList: [],
|
};
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
const { info } = this;
|
const model = addOrModifyCommissionDevelop();
|
this.model = model;
|
const formList = model.getFormList({
|
...info,
|
address: info.adress || info.address || '',
|
});
|
this.formList = formList;
|
this.formRules = model.getFormRules(formList);
|
// this.getOptions();
|
},
|
|
getOptions() {
|
const { info } = this;
|
const conf = {
|
status: 'MStatus',
|
};
|
const { status = '', province = '', city = '', regions = '' } = info;
|
Object.keys(conf).forEach((key) =>
|
this.getStatus(key, conf[key], status === '')
|
);
|
this.getArea('province', '', province === '');
|
if (province !== '') {
|
this.getArea('city', province, city === '');
|
}
|
if (province !== '' && city !== '') {
|
this.getArea('regions', city, regions === '');
|
}
|
},
|
|
// 邮寄状态
|
async getStatus(name, codeNo, isResetValue = true) {
|
const { result } = await getDictionaryList({ codeNo });
|
this.updateOptions(name, result, 'itemname', 'itemno', isResetValue);
|
},
|
|
updateOptions(name, list, labelKey, valueKey, isResetValue = true) {
|
const valueObj = isResetValue ? { value: '' } : {};
|
this.updateValue(name, {
|
options: list.map((item) => ({
|
label: item[labelKey],
|
value: item[valueKey],
|
})),
|
...valueObj,
|
});
|
},
|
|
async getArea(name, itmeNo, isResetValue = true) {
|
if (name === 'province') {
|
const { result } = await getProvinceCodeList();
|
this.updateOptions(name, result, 'itemname', 'itemno', isResetValue);
|
}
|
|
if (name === 'city') {
|
const { result } = await getCityCodeList({
|
codeNo: 'AreaCode',
|
itmeNo,
|
});
|
this.updateOptions(name, result, 'itemname', 'itemno', isResetValue);
|
}
|
|
if (name === 'regions') {
|
const { result } = await getAreaCodeList({
|
codeNo: 'AreaCode',
|
itmeNo,
|
});
|
this.updateOptions(name, result, 'itemname', 'itemno', isResetValue);
|
}
|
},
|
|
// 更新表单数据
|
updateValue(index, info) {
|
const { formList } = this;
|
if (isNaN(index)) {
|
// index is name
|
index = formList.findIndex(({ name }) => name === index);
|
}
|
if (!isNaN(index) && index > -1) {
|
const preInfo = formList[index];
|
this.$set(formList, index, { ...preInfo, ...info });
|
const regionsIndex = formList.findIndex(
|
({ name }) => name === 'regions'
|
);
|
|
if (info.name === 'province') {
|
this.getArea('city', info.value);
|
this.$set(formList, regionsIndex, {
|
...formList[regionsIndex],
|
options: [],
|
value: '',
|
});
|
}
|
|
if (info.name === 'city') {
|
this.getArea('regions', info.value);
|
}
|
}
|
},
|
|
async submit() {
|
const { model, info } = this;
|
let formInfo = this.$refs.contractForm.validate();
|
if (formInfo) {
|
if('serialno' in info) {
|
formInfo.serialno = info.serialno
|
}
|
this.loading = true;
|
await model.request({
|
...formInfo,
|
});
|
this.$emit('doAction', 'succ');
|
this.loading = false;
|
}
|
},
|
handleClose(done) {
|
this.$refs.contractForm.resetFields()
|
this.$emit('doAction', 'close')
|
}
|
},
|
computed: {
|
// 表单值信息
|
formValues() {
|
const { model, formList } = this;
|
return model.getFormValues(formList);
|
},
|
},
|
watch: {
|
info() {
|
this.init();
|
},
|
},
|
};
|
</script>
|
<style lang="postcss" scoped>
|
.disable-input {
|
background-color: #f5f7fa;
|
border: 1px solid #f5f7fa;
|
border-radius: 4px;
|
color: #c0c4cc;
|
cursor: pointer;
|
width: 190px;
|
height: 32px;
|
line-height: 32px;
|
padding: 0 15px;
|
display: flex;
|
justify-content: space-between;
|
& p {
|
flex: 1;
|
}
|
& >>> .el-icon-tickets {
|
line-height: 34px;
|
}
|
}
|
.customer-edit {
|
& >>> .el-dialog__header {
|
padding-bottom: 0;
|
}
|
& >>> .el-dialog__body {
|
padding-top: 0;
|
}
|
& >>> .el-dialog {
|
width: 950px;
|
}
|
}
|
</style>
|
