src/components/data/seller/create/contract.vue
<template>
<create-portlet title="合同信息">
<j-form :model="model" ref="form">
<div class="row">
<div class="col-xs-4">
<j-form-item
prop="contract.cooperationTypeMap"
:rules="[
{validator: selectRequired, message: '合作方式必须', trigger: 'change'}
]"
>
<j-select
v-model="model.contract.cooperationTypeMap"
:options="methodCooperation"
>
<span slot="left" class="input-group-addon">合作方式:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-4">
<j-form-item
prop="contract.isSignContract"
:rules="[
{required: true, message: '是否签合同必须', trigger: 'change'}
]"
>
<div class="input-group j-input-group">
<span class="input-group-addon">是否签合同:</span>
<j-radio-group v-model="model.contract.isSignContract">
<j-radio checked-value="1">是</j-radio>
<j-radio checked-value="0">否</j-radio>
</j-radio-group>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</div>
</j-form-item>
</div>
<template v-if="model.contract.isSignContract == 1">
<div class="col-xs-4">
<j-form-item
prop="contract.startTime"
:rules="[
{required: true, message: '合同结束时间必须', trigger: 'change'}
]"
>
<j-date-group
v-model="model.contract.startTime"
:end-date="model.contract.endTime"
>
<span slot="left" class="input-group-addon">合同开始时间:</span>
<span slot="right" class="input-group-addon font-red">*</span>
</j-date-group>
</j-form-item>
</div>
<div class="col-xs-4">
<j-form-item
prop="contract.endTime"
:rules="[
{required: true, message: '合同结束时间必须', trigger: 'change'}
]"
>
<j-date-group
v-model="model.contract.endTime"
:start-date="model.contract.startTime"
>
<span slot="left" class="input-group-addon">合同结束时间:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-date-group>
</j-form-item>
</div>
<div class="col-xs-4">
<j-form-item
prop="contract.contractNo"
:rules="
[
{required: true, message: '合同编号必须', trigger: 'blur'},
{validator: range, min: 1, max: 20, isString: true, message: '合同编号必须1-20字', trigger: 'blur'},
{validator: eliminateSpace, message: '合同编号不能有空格', trigger: 'blur'}
]"
>
<j-input-group
v-model="model.contract.contractNo"
>
<span slot="left" class="input-group-addon">合同编号:</span>
<span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
</j-input-group>
</j-form-item>
</div>
</template>
</div>
</j-form>
</create-portlet>
</template>
<script>
import createPortlet from 'components/base/createPortlet'
import {
isPhone,
selectRequired,
arrayRequired,
isNumber,
requiredIf,
range,
isText,
eliminateSpace
} from 'assets/scripts/base/validator'
import {unixTimestampFilter} from 'assets/scripts/base/filters'
import {getMerchantCooperationWay} from 'assets/scripts/business/store'
import {mapGetValue, isEqual, dotData} from 'assets/scripts/base/functions'
import cascadeAddress from 'components/base/cascadeAddress'
import jFormItem from 'components/base/form/jFormItem'
import jInputGroup from 'components/base/form/jInputGroup'
import jForm from 'components/base/form/jForm'
import jSelect from 'components/base/form/jSelect'
import jDateGroup from 'components/base/form/jDateGroup'
import jAddressGroup from 'components/base/form/jAddressGroup'
import jCheckbox from 'components/base/form/jCheckbox'
import jCheckboxGroup from 'components/base/form/jCheckboxGroup'
import jRadio from 'components/base/form/jRadio'
import jRadioGroup from 'components/base/form/jRadioGroup'
export default {
name: 'dataSellerCreateCompany',
components: {
createPortlet,
cascadeAddress,
jFormItem,
jInputGroup,
jForm,
jSelect,
jDateGroup,
jAddressGroup,
jCheckbox,
jCheckboxGroup,
jRadio,
jRadioGroup
},
props: {
detail: {
type: Object,
required: true
}
},
data () {
return {
model: {
contract: {
startTime: '',
endTime: '',
isSignContract: '1',
cooperationTypeMap: {value: '', text: ''},
contractNo: ''
}
},
methodCooperation: []
}
},
watch: {
detail (val, oldVal) {
if (isEqual(val, oldVal)) {
return
}
// 合作方式
const cooperationType = dotData(val, 'merchantContractInfo.cooperationType') || dotData(val, 'contract.cooperationType')
if (cooperationType) {
this.model.contract.cooperationTypeMap = {value: cooperationType, text: ''}
}
// 合同
let isSignContract = dotData(val, 'merchantContractInfo.isSignContract')
if (isSignContract !== 0 || isSignContract !== 1) {
isSignContract = dotData(val, 'contract.isSignContract')
}
isSignContract = String(isSignContract)
if (isSignContract === '0' || isSignContract === '1') {
this.model.contract.isSignContract = isSignContract
}
// 开始时间
const startTime = dotData(val, 'merchantContractInfo.startTime') || dotData(val, 'contract.startTime')
this.model.contract.startTime = unixTimestampFilter(startTime, 'YYYY-MM-DD')
const endTime = dotData(val, 'merchantContractInfo.endTime') || dotData(val, 'contract.endTime')
if (endTime) {
this.model.contract.endTime = unixTimestampFilter(endTime, 'YYYY-MM-DD')
}
const contractNo = dotData(val, 'merchantContractInfo.contractNo') || dotData(val, 'contract.contractNo')
this.model.contract.contractNo = contractNo
this.model.contract.id = dotData(val, 'merchantContractInfo.id') || dotData(val, 'contract.id')
}
},
created () {
getMerchantCooperationWay().then(arr => {
this.methodCooperation = arr
})
},
methods: {
isPhone,
selectRequired,
arrayRequired,
isNumber,
requiredIf,
range,
isText,
eliminateSpace,
// 验证并获取数据
getModel () {
return this.$refs.form.validate().then((result) => {
if (result) {
let data = this.model
return mapGetValue(data)
}
return result
})
},
// 获取数据没有验证
getModelWithoutValidation () {
let data = this.model
return mapGetValue(data)
}
}
}
</script>
点击 公司地址输入框:弹出地址选择 组件:
src/components/data/seller/create/company.vue
<template>
<create-portlet title="公司信息">
<j-form :model="model" ref="form">
<div class="row">
<div class="col-xs-3 col-sm-3">
<j-form-item
prop="company"
:rules="[
{validator: