<template>
|
<div class="customer-edit">
|
<p class="dialog-form-title">历史邮寄信息修改</p>
|
<EditForm
|
:inline="true"
|
:list="formList"
|
@updateValue="updateValue"
|
ref="contractForm"
|
:formValues="formValues"
|
:formRules="formRules"
|
column="2"
|
:key="info.mailingNo || '1'"
|
></EditForm>
|
<div class="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>
|
</div>
|
</template>
|
<script>
|
// 历史邮寄信息修改
|
import EditForm from '../components/EditForm'
|
import updateContractMailInfo from '@comprehensive/model/updateContractMailInfo'
|
import {
|
getDictionaryList,
|
getProvinceCodeList,
|
getCityCodeList,
|
getAreaCodeList
|
} from '@comprehensive/serve/public'
|
export default {
|
components: {
|
EditForm
|
},
|
props: {
|
info: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
model: null,
|
formRules: {},
|
formList: []
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
const { info } = this
|
const model = updateContractMailInfo()
|
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 } = this
|
let info = this.$refs.contractForm.validate()
|
if (info) {
|
this.loading = true
|
await model.request({
|
...info
|
})
|
this.$emit('doAction', 'succ')
|
this.loading = false
|
}
|
}
|
},
|
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>
|
