Skip to content

P
portalhtml
Commit fe334527 authored by jiangqihao's avatar jiangqihao
Browse files
Options

select组件

parent b79a7d8a
Hide whitespace changes
Inline Side-by-side
Showing with 1175 additions and 1150 deletions
src/components/EleForm/EleForm.vue
View file @ fe334527
<template> <template>
<div <div
ref="wrapper" ref="wrapper"
class="ele-form" class="ele-form"
:class="{ 'ele-form--inline': inline }" :class="{ 'ele-form--inline': inline }"
> >
<el-row <el-row
justify="center" justify="center"
type="flex" type="flex"
> >
<el-col :span="computedSpan"> <el-col :span="computedSpan">
<el-form <el-form
ref="form" ref="form"
:label-position="computedLabelPosition" :label-position="computedLabelPosition"
:label-width="computedLabelWidth" :label-width="computedLabelWidth"
:model="formData" :model="formData"
:rules="computedRules" :rules="computedRules"
:validate-on-rule-change="false" :validate-on-rule-change="false"
:disabled="disabled" :disabled="disabled"
v-bind="formAttrs" v-bind="formAttrs"
@submit.native.prevent="handleSubmitForm" @submit.native.prevent="handleSubmitForm"
> >
<!-- 默认插槽作为表单项 --> <!-- 默认插槽作为表单项 -->
<slot /> <slot />
<el-row :gutter="20"> <el-row :gutter="20">
<slot <slot
:formData="formData" :formData="formData"
:formDesc="orderedFormDesc" :formDesc="orderedFormDesc"
:formErrorObj="formErrorObj" :formErrorObj="formErrorObj"
:props="$props" :props="$props"
name="form-content" name="form-content"
> >
<template v-for="(formItem, field) of orderedFormDesc"> <template v-for="(formItem, field) of orderedFormDesc">
<slot <slot
:name="field + '-wrapper'" :name="field + '-wrapper'"
:data="formData[field]" :data="formData[field]"
:desc="formItem" :desc="formItem"
:field="field" :field="field"
:props="$props" :props="$props"
:formData="formData" :formData="formData"
:disabled="formItem._disabled" :disabled="formItem._disabled"
:type="formItem._type" :type="formItem._type"
:options="formItem._options" :options="formItem._options"
> >
<el-col <el-col
v-if="formItem._vif" v-if="formItem._vif"
:key="field" :key="field"
v-bind="formItem._colAttrs" v-bind="formItem._colAttrs"
:class="{ 'ele-form-col--break': formItem.break }" :class="{ 'ele-form-col--break': formItem.break }"
> >
<el-form-item <el-form-item
:error="formErrorObj ? formErrorObj[field] : null" :error="formErrorObj ? formErrorObj[field] : null"
:label=" :label="
isShowLabel && formItem.isShowLabel !== false isShowLabel && formItem.isShowLabel !== false
? (formItem._label ? formItem._label + '：' : null) ? (formItem._label ? formItem._label + '：' : null)
: null : null
" "
:label-width="formItem.labelWidth || null" :label-width="formItem.labelWidth || null"
:prop="field" :prop="field"
> >
<!-- 具名 作用域插槽(用于用户自定义显示) --> <!-- 具名 作用域插槽(用于用户自定义显示) -->
<slot <slot
:data="formData[field]" :data="formData[field]"
:desc="formItem" :desc="formItem"
:props="$props" :props="$props"
:field="field" :field="field"
:formData="formData" :formData="formData"
:name="field" :name="field"
:disabled="formItem._disabled" :disabled="formItem._disabled"
:type="formItem._type" :type="formItem._type"
:options="formItem._options" :options="formItem._options"
> >
<component <component
:is="formItem._type" :is="formItem._type"
:ref="field" :ref="field"
:disabled="formItem._disabled" :disabled="formItem._disabled"
:readonly="readonly" :readonly="readonly"
:desc="formItem" :desc="formItem"
:options="formItem._options" :options="formItem._options"
:field="field" :field="field"
:form-data="formData" :form-data="formData"
:value="formData[field]" :value="formData[field]"
@input="setValue(field, $event)" @input="setValue(field, $event)"
/> />
</slot> </slot>
<div <div
v-if="formItem._tip" v-if="formItem._tip"
class="ele-form-tip" class="ele-form-tip"
v-html="formItem._tip" v-html="formItem._tip"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
</slot> </slot>
</template> </template>
</slot> </slot>
<slot name="form-footer" /> <slot name="form-footer" />
<!-- 操作按钮区 --> <!-- 操作按钮区 -->
<el-col <el-col
v-if="btns.length" v-if="btns.length"
class="ele-form-btns" class="ele-form-btns"
> >
<el-form-item :label-width="inline ? '10px' : null"> <el-form-item :label-width="inline ? '10px' : null">
<!-- 按钮插槽 --> <!-- 按钮插槽 -->
<slot <slot
:btns="btns" :btns="btns"
name="form-btn" name="form-btn"
> >
<el-button <el-button
v-for="(btn, index) of btns" v-for="(btn, index) of btns"
:key="index" :key="index"
v-bind="btn.attrs" v-bind="btn.attrs"
@click="btn.click" @click="btn.click"
>{{ btn.text }}</el-button> >{{ btn.text }}</el-button>
</slot> </slot>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import responsiveMixin from './mixins/responsiveMixin' import responsiveMixin from './mixins/responsiveMixin'
import { isUnDef, is, castArray, isEmpty } from './tools/utils' import { isUnDef, is, castArray, isEmpty } from './tools/utils'
import { throttle } from 'throttle-debounce' import { throttle } from 'throttle-debounce'
import localeMixin from './mixins/locale' import localeMixin from './mixins/locale'
import { t } from './locale' import { t } from './locale'
import { loadMockJs } from './tools/mock' import { loadMockJs } from './tools/mock'
import fetchDictionary from '@/utils/fetch-dictionary' // 请求枚举值方法 import fetchDictionary from '@/utils/fetch-dictionary' // 请求枚举值方法
const isNumber = require('is-number') const isNumber = require('is-number')
const cloneDeep = require('clone') const cloneDeep = require('clone')
export default { export default {
name: 'EleForm', name: 'EleForm',
// 响应式单独抽离出来作为mixin, 具体实现请到 responsiveMixin 中查看 // 响应式单独抽离出来作为mixin, 具体实现请到 responsiveMixin 中查看
mixins: [responsiveMixin, localeMixin], mixins: [responsiveMixin, localeMixin],
model: { model: {
prop: 'formData', prop: 'formData',
event: 'input' event: 'input'
}, },
provide() { provide() {
return { return {
EleForm: this EleForm: this
} }
}, },
props: { props: {
// 表单描述 // 表单描述
formDesc: { formDesc: {
type: Object, type: Object,
required: true required: true
}, },
// 表单数据 // 表单数据
formData: { formData: {
type: Object, type: Object,
required: true required: true
}, },
// 行内模式 // 行内模式
inline: { inline: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 表单自身属性 // 表单自身属性
formAttrs: { formAttrs: {
type: Object, type: Object,
default: () => { } default: () => { }
}, },
// 校检规则 // 校检规则
rules: { rules: {
type: Object, type: Object,
default() { default() {
return {} return {}
} }
}, },
// 模拟数据 // 模拟数据
mock: { mock: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 提交状态 // 提交状态
isLoading: { isLoading: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 表单错误信息 // 表单错误信息
formError: { formError: {
type: Object, type: Object,
default: () => { } default: () => { }
}, },
// 提交函数 // 提交函数
requestFn: { requestFn: {
type: Function, type: Function,
default: () => { } default: () => { }
}, },
// 自定义表单按钮 // 自定义表单按钮
formBtns: { formBtns: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
// 表单按钮大小 // 表单按钮大小
formBtnSize: { formBtnSize: {
type: String, type: String,
default: '' default: ''
}, },
// 是否显示submit按钮 // 是否显示submit按钮
isShowSubmitBtn: { isShowSubmitBtn: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 是否显示 cancel 取消按钮 // 是否显示 cancel 取消按钮
// 默认值: isDialog = true 时, 默认值为 true, 具体查看: computedIsShowCancelBtn // 默认值: isDialog = true 时, 默认值为 true, 具体查看: computedIsShowCancelBtn
isShowCancelBtn: { isShowCancelBtn: {
type: Boolean, type: Boolean,
default: null default: null
}, },
// 是否显示back按钮 // 是否显示back按钮
// 默认值: 当 inline = true OR isDialog = true, 默认值为 false; 其它情况true. 具体请看计算属性: computedIsShowBackBtn // 默认值: 当 inline = true OR isDialog = true, 默认值为 false; 其它情况true. 具体请看计算属性: computedIsShowBackBtn
isShowBackBtn: { isShowBackBtn: {
type: Boolean, type: Boolean,
default: null default: null
}, },
// 是否显示reset按钮 // 是否显示reset按钮
isShowResetBtn: { isShowResetBtn: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 提交按钮文本 // 提交按钮文本
// 默认值: 当 inline 为true时, 值为 '查询'; inline 为 false 时, 值为 '提交'. 具体请看计算属性: computedSubmitBtnText // 默认值: 当 inline 为true时, 值为 '查询'; inline 为 false 时, 值为 '提交'. 具体请看计算属性: computedSubmitBtnText
submitBtnText: { submitBtnText: {
type: String, type: String,
default: null default: null
}, },
// 返回按钮 // 返回按钮
backBtnText: { backBtnText: {
type: String, type: String,
default: '' default: ''
}, },
// 重置按钮 // 重置按钮
resetBtnText: { resetBtnText: {
type: String, type: String,
default: '' default: ''
}, },
// 取消按钮 // 取消按钮
cancelBtnText: { cancelBtnText: {
type: String, type: String,
default: '' default: ''
}, },
// 是否显示标签 // 是否显示标签
isShowLabel: { isShowLabel: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 标签宽度 // 标签宽度
labelWidth: { labelWidth: {
type: [Number, String], type: [Number, String],
default: 'auto' default: 'auto'
}, },
// 全局禁用表单 // 全局禁用表单
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 全局的readonly // 全局的readonly
readonly: { readonly: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 是否可清空 // 是否可清空
clearable: { clearable: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 是否为弹窗 // 是否为弹窗
isDialog: { isDialog: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 弹窗变量控制 // 弹窗变量控制
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// options 的请求方法 // options 的请求方法
optionsFn: { optionsFn: {
type: Function, type: Function,
default: function() { } default: function() { }
}, },
// 表单项顺序数组 // 表单项顺序数组
// 数组项为formDesc中的key // 数组项为formDesc中的key
order: { order: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
// 是否显示错误后的 notify // 是否显示错误后的 notify
isShowErrorNotify: { isShowErrorNotify: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 一些钩子 // 一些钩子
beforeValidate: { beforeValidate: {
type: Function, type: Function,
default: () => { } default: () => { }
}, },
beforeRequest: { beforeRequest: {
type: Function, type: Function,
default: () => { } default: () => { }
}, },
requestSuccess: { requestSuccess: {
type: Function, type: Function,
default: () => { } default: () => { }
}, },
requestError: { requestError: {
type: Function, type: Function,
default: () => { } default: () => { }
}, },
requestEnd: { requestEnd: {
type: Function, type: Function,
default: () => { } default: () => { }
} }
}, },
data() { data() {
return { return {
formDescData: {}, formDescData: {},
oldFormData: {}, oldFormData: {},
// 是否正在请求中 // 是否正在请求中
innerIsLoading: false, innerIsLoading: false,
// 内部请求出错 // 内部请求出错
innerFormError: {} innerFormError: {}
} }
}, },
computed: { computed: {
isMock() { isMock() {
return ( return (
this.mock || Object.values(this.formDescData).some(item => item.mock) this.mock || Object.values(this.formDescData).some(item => item.mock)
) )
}, },
// 按钮 // 按钮
btns() { btns() {
const formBtnSize = this.formBtnSize const formBtnSize = this.formBtnSize
let btns = [] let btns = []
// 模拟数据 // 模拟数据
if (this.isMock) { if (this.isMock) {
btns.push({ btns.push({
attrs: { attrs: {
type: 'primary', type: 'primary',
size: formBtnSize size: formBtnSize
}, },
text: t('ele-form.mockBtnText'), text: t('ele-form.mockBtnText'),
click: this.reMockData click: this.reMockData
}) })
} }
// 提交按钮 // 提交按钮
if (this.isShowSubmitBtn) { if (this.isShowSubmitBtn) {
btns.push({ btns.push({
attrs: { attrs: {
type: 'primary', type: 'primary',
size: formBtnSize, size: formBtnSize,
loading: this.isLoading || this.innerIsLoading, loading: this.isLoading || this.innerIsLoading,
'native-type': 'submit' 'native-type': 'submit'
}, },
text: this.computedSubmitBtnText, text: this.computedSubmitBtnText,
click() { } click() { }
}) })
} }
// 自定义按钮 // 自定义按钮
if (this.formBtns) { if (this.formBtns) {
const customBtns = this.formBtns.map(btn => ({ const customBtns = this.formBtns.map(btn => ({
attrs: { attrs: {
type: btn.type, type: btn.type,
size: formBtnSize size: formBtnSize
}, },
text: btn.text, text: btn.text,
click: btn.click click: btn.click
})) }))
btns = [...btns, ...customBtns] btns = [...btns, ...customBtns]
} }
// 返回按钮 // 返回按钮
if (this.computedIsShowBackBtn) { if (this.computedIsShowBackBtn) {
btns.push({ btns.push({
attrs: { attrs: {
size: formBtnSize size: formBtnSize
}, },
text: this.backBtnText || t('ele-form.backBtnText'), text: this.backBtnText || t('ele-form.backBtnText'),
click: this.goBack click: this.goBack
}) })
} }
// 取消按钮 // 取消按钮
if (this.computedIsShowCancelBtn) { if (this.computedIsShowCancelBtn) {
btns.push({ btns.push({
attrs: { attrs: {
size: formBtnSize size: formBtnSize
}, },
text: this.cancelBtnText || t('ele-form.cancelBtnText'), text: this.cancelBtnText || t('ele-form.cancelBtnText'),
click: this.handleCancelClick click: this.handleCancelClick
}) })
} }
// 重置按钮 // 重置按钮
if (this.isShowResetBtn) { if (this.isShowResetBtn) {
btns.push({ btns.push({
attrs: { attrs: {
size: formBtnSize size: formBtnSize
}, },
text: this.resetBtnText || t('ele-form.resetBtnText'), text: this.resetBtnText || t('ele-form.resetBtnText'),
click: this.resetForm click: this.resetForm
}) })
} }
return btns return btns
}, },
computedIsShowCancelBtn() { computedIsShowCancelBtn() {
if (is(this.isShowCancelBtn, 'Boolean')) { if (is(this.isShowCancelBtn, 'Boolean')) {
// 如果指定了, 则使用指定的值 // 如果指定了, 则使用指定的值
return this.isShowCancelBtn return this.isShowCancelBtn
} else { } else {
// 如果未指定, 根据 isDialog // 如果未指定, 根据 isDialog
return this.isDialog return this.isDialog
} }
}, },
// 是否显示返回按钮(inline和layout模式下不同) // 是否显示返回按钮(inline和layout模式下不同)
computedIsShowBackBtn() { computedIsShowBackBtn() {
if (is(this.isShowBackBtn, 'Boolean')) { if (is(this.isShowBackBtn, 'Boolean')) {
return this.isShowBackBtn return this.isShowBackBtn
} else { } else {
return !(this.inline || this.isDialog) return !(this.inline || this.isDialog)
} }
}, },
// 提交按钮默认值(inline和layout模式下不同) // 提交按钮默认值(inline和layout模式下不同)
computedSubmitBtnText() { computedSubmitBtnText() {
if (is(this.submitBtnText, 'String')) { if (is(this.submitBtnText, 'String')) {
return this.submitBtnText return this.submitBtnText
} else { } else {
return this.inline return this.inline
? t('ele-form.submitBtnTextInline') ? t('ele-form.submitBtnTextInline')
: t('ele-form.submitBtnText') : t('ele-form.submitBtnText')
} }
}, },
// 标签宽度(数字和字符串两种处理) // 标签宽度(数字和字符串两种处理)
computedLabelWidth() { computedLabelWidth() {
if (isNumber(this.labelWidth)) { if (isNumber(this.labelWidth)) {
return this.labelWidth + 'px' return this.labelWidth + 'px'
} else { } else {
return this.labelWidth return this.labelWidth
} }
}, },
// 表单错误信息 // 表单错误信息
formErrorObj() { formErrorObj() {
return Object.assign({}, this.innerFormError, this.formError) return Object.assign({}, this.innerFormError, this.formError)
}, },
// 校检规则 (支持局部定义和全局定义) // 校检规则 (支持局部定义和全局定义)
// 即: rules: { rules: { a: [xxx, xxx], b:{ xxx } } } 和 formDesc: { name: { rules: {xxx} }, age: { rules: [xxx] } } // 即: rules: { rules: { a: [xxx, xxx], b:{ xxx } } } 和 formDesc: { name: { rules: {xxx} }, age: { rules: [xxx] } }
// 此函数即将局部定义转为全局定义 // 此函数即将局部定义转为全局定义
computedRules() { computedRules() {
return this.formDescKeys.reduce((rules, field) => { return this.formDescKeys.reduce((rules, field) => {
// 合并 (全局 和 局部) 的rules // 合并 (全局 和 局部) 的rules
const formRules = castArray(this.rules[field]) const formRules = castArray(this.rules[field])
const formItemRules = castArray(this.formDescData[field].rules) const formItemRules = castArray(this.formDescData[field].rules)
rules[field] = [...formRules, ...formItemRules] rules[field] = [...formRules, ...formItemRules]
// 为每个规则的validator绑定当前this，方便取得this.formData的值 // 为每个规则的validator绑定当前this，方便取得this.formData的值
rules[field].forEach(item => { rules[field].forEach(item => {
if (item && typeof item.validator === 'function') { if (item && typeof item.validator === 'function') {
item.validator = item.validator.bind(this) item.validator = item.validator.bind(this)
} }
}) })
// 如果采用required, 则判断已有的规则有无, 如果没有, 则添加 // 如果采用required, 则判断已有的规则有无, 如果没有, 则添加
if ( if (
this.formDescData[field].required && this.formDescData[field].required &&
!rules[field].some(rule => rule.required) !rules[field].some(rule => rule.required)
) { ) {
rules[field].push({ rules[field].push({
required: true, required: true,
message: this.formDescData[field]._label + t('ele-form.required') message: this.formDescData[field]._label + t('ele-form.required')
}) })
} }
return rules return rules
}, {}) }, {})
}, },
// formDesc的key // formDesc的key
formDescKeys() { formDescKeys() {
return Object.keys(this.formDescData) return Object.keys(this.formDescData)
}, },
// 通过order数组排序后的formDesc // 通过order数组排序后的formDesc
orderedFormDesc() { orderedFormDesc() {
if (this.order && this.order.length > 0) { if (this.order && this.order.length > 0) {
const orderedFormDesc = {} const orderedFormDesc = {}
// 根据order遍历，先添加到orderedFormDesc的key在之后遍历的时候，会先遍历，从而实现排序的目的。 // 根据order遍历，先添加到orderedFormDesc的key在之后遍历的时候，会先遍历，从而实现排序的目的。
this.order.forEach(field => { this.order.forEach(field => {
if (this.formDescData[field]) { if (this.formDescData[field]) {
orderedFormDesc[field] = this.formDescData[field] orderedFormDesc[field] = this.formDescData[field]
} else { } else {
throw new Error('order中定义的key在formDesc中不存在') throw new Error('order中定义的key在formDesc中不存在')
} }
}) })
// 如果key不在order数组的时候，按照原序添加到orderedFormDesc // 如果key不在order数组的时候，按照原序添加到orderedFormDesc
Object.keys(this.formDescData).forEach(field => { Object.keys(this.formDescData).forEach(field => {
// 当key不在order数组的时候 // 当key不在order数组的时候
if (!orderedFormDesc[field]) { if (!orderedFormDesc[field]) {
orderedFormDesc[field] = this.formDescData[field] orderedFormDesc[field] = this.formDescData[field]
} }
}) })
return orderedFormDesc return orderedFormDesc
} else { } else {
return this.formDescData return this.formDescData
} }
} }
}, },
watch: { watch: {
disabled(val) { disabled(val) {
if (val) { if (val) {
this.$refs.form.clearValidate() this.$refs.form.clearValidate()
} }
}, },
// 同步数据 // 同步数据
formDesc: { formDesc: {
handler(formDesc) { handler(formDesc) {
const oldFormDescData = {} const oldFormDescData = {}
// 去除被删除字段 // 去除被删除字段
Object.keys(this.formDescData) Object.keys(this.formDescData)
.filter(key => formDesc[key]) .filter(key => formDesc[key])
.forEach(key => { .forEach(key => {
oldFormDescData[key] = this.formDescData[key] oldFormDescData[key] = this.formDescData[key]
}) })
this.formDescData = Object.assign( this.formDescData = Object.assign(
{}, {},
oldFormDescData, oldFormDescData,
cloneDeep(formDesc) cloneDeep(formDesc)
) )
}, },
immediate: true, immediate: true,
deep: true deep: true
}, },
formDescData: { formDescData: {
handler(desc) { handler(desc) {
if (desc) { if (desc) {
Object.keys(desc).forEach(field => { Object.keys(desc).forEach(field => {
// 当全局设置 mock 为 true 时, 所有子项都标记为 true // 当全局设置 mock 为 true 时, 所有子项都标记为 true
if (this.mock && isUnDef(desc[field].mock)) { if (this.mock && isUnDef(desc[field].mock)) {
desc[field].mock = true desc[field].mock = true
} }
// 设置默认值 // 设置默认值
this.setDefaultvalue(desc[field], field) this.setDefaultvalue(desc[field], field)
// 转换 tip, 内部属性不显示 // 转换 tip, 内部属性不显示
if (desc[field].tip) { if (desc[field].tip) {
desc[field]._tip = String(desc[field].tip).replace( desc[field]._tip = String(desc[field].tip).replace(
/`(.+?)`/g, /`(.+?)`/g,
'<code>$1</code>' '<code>$1</code>'
) )
} }
// layout值, 内部属性不显示 // layout值, 内部属性不显示
desc[field]._colAttrs = this.getColAttrs(desc[field].layout) desc[field]._colAttrs = this.getColAttrs(desc[field].layout)
// 老数据, 用于options切换不同类型和type切换不懂类型时, 保留旧数据 // 老数据, 用于options切换不同类型和type切换不懂类型时, 保留旧数据
// 例如 原type为 switch, 后改为 input, 出现类型和值不兼容情况, 就需要保留原数据 // 例如 原type为 switch, 后改为 input, 出现类型和值不兼容情况, 就需要保留原数据
if (!desc[field]._oldValue) { if (!desc[field]._oldValue) {
desc[field]._oldValue = {} desc[field]._oldValue = {}
} }
this.setVif(desc[field], field) this.setVif(desc[field], field)
if (desc[field]._vif) { if (desc[field]._vif) {
// 设置 options // 设置 options
this.changeOptions(desc[field].options, field) this.changeOptions(desc[field].options, field)
} }
}) })
// 检查联动 // 检查联动
this.checkLinkage() this.checkLinkage()
} }
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate() this.$refs.form && this.$refs.form.clearValidate()
}) })
}, },
immediate: true immediate: true
}, },
formErrorObj(obj) { formErrorObj(obj) {
// 后端异常的弹窗警告 // 后端异常的弹窗警告
if (obj) { if (obj) {
this.processError(obj) this.processError(obj)
} }
}, },
formData() { formData() {
this.checkLinkage() this.checkLinkage()
} }
}, },
mounted() { mounted() {
if (this.isMock && !window.Mock) { if (this.isMock && !window.Mock) {
loadMockJs() loadMockJs()
} }
}, },
methods: { methods: {
getValue(field) { getValue(field) {
return this.formData[field] return this.formData[field]
}, },
handleChange(field, val) { handleChange(field, val) {
this.oldFormData = cloneDeep(this.formData) this.oldFormData = cloneDeep(this.formData)
if (this.formDescData[field].type === 'lov' && Object.prototype.toString.call(val) === '[object Object]') { if (this.formDescData[field].type === 'lov' && Object.prototype.toString.call(val) === '[object Object]') {
Object.keys(val).forEach(key => { Object.keys(val).forEach(key => {
this.$set(this.formData, key, val[key]) this.$set(this.formData, key, val[key])
}) })
} else { } else if (this.formDescData[field].type === 'select' && Object.prototype.toString.call(val) === '[object Object]') {
this.$set(this.formData, field, val) this.$set(this.formData, field, val.value)
} var text = this.formDescData[field].value
this.$emit('input', this.formData) if (text) {
}, this.$set(this.formData, text, val.text)
setValue(field, val) { }
this.handleChange(field, val) } else {
this.checkLinkage() this.$set(this.formData, field, val)
}, }
// 获取col的属性(是否为inline模式) this.$emit('input', this.formData)
getColAttrs(layout) { },
return this.inline ? { span: layout || 6 } : { md: layout || 24, xs: 24 } setValue(field, val) {
}, this.handleChange(field, val)
// 重新模拟数据 this.checkLinkage()
reMockData() { },
this.formDescKeys.forEach(field => { // 获取col的属性(是否为inline模式)
this.$refs[field][0].mockData() getColAttrs(layout) {
}) return this.inline ? { span: layout || 6 } : { md: layout || 24, xs: 24 }
}, },
// 当类型为函数时的请求 // 重新模拟数据
getFunctionAttr(fn, field) { reMockData() {
return fn(this.formData, this.formDescData[field], this.formDescData) this.formDescKeys.forEach(field => {
}, this.$refs[field][0].mockData()
// 获取动态属性 })
getDynamicAttr(attr, field) { },
return typeof attr === 'function' // 当类型为函数时的请求
? this.getFunctionAttr(attr, field) getFunctionAttr(fn, field) {
: attr return fn(this.formData, this.formDescData[field], this.formDescData)
}, },
// 检测联动 // 获取动态属性
checkLinkage() { getDynamicAttr(attr, field) {
if (this.checkVifFn) { return typeof attr === 'function'
this.checkLinkageFn() ? this.getFunctionAttr(attr, field)
} else { : attr
this.checkLinkageFn = throttle(300, () => { },
const formDescData = this.formDescData // 检测联动
const formData = this.formData checkLinkage() {
Object.keys(formDescData).forEach(field => { if (this.checkVifFn) {
const formItem = formDescData[field] this.checkLinkageFn()
// 1.设置 type } else {
let type = formItem.type this.checkLinkageFn = throttle(300, () => {
if (typeof formItem.type === 'function') { const formDescData = this.formDescData
type = this.getComponentName( const formData = this.formData
this.getFunctionAttr(formItem.type, field) Object.keys(formDescData).forEach(field => {
) const formItem = formDescData[field]
if (formItem._type && formItem._type !== type) { // 1.设置 type
// 获取此类型的以前值 let type = formItem.type
const newVal = formItem._oldValue['type-' + type] || null if (typeof formItem.type === 'function') {
// 保存现在的数据作为老数据 type = this.getComponentName(
this.formDescData[field]._oldValue['type-' + formItem._type] = this.getFunctionAttr(formItem.type, field)
formData[field] )
if (formItem._type && formItem._type !== type) {
// 类型改变, 则删除原数据 // 获取此类型的以前值
this.handleChange(field, newVal) const newVal = formItem._oldValue['type-' + type] || null
// 保存现在的数据作为老数据
this.setDefaultvalue(this.formDescData[field], field) this.formDescData[field]._oldValue['type-' + formItem._type] =
} formData[field]
} else { const val = {
type = this.getComponentName(formItem.type) value: newVal
} }
// 类型改变, 则删除原数据
// 2.触发 v-if 显示 / 隐藏 this.handleChange(field, val)
this.setVif(formItem, field)
this.setDefaultvalue(this.formDescData[field], field)
// 3.触发 disabled 禁用 / 启用 }
let disabled = null } else {
if (typeof formItem.disabled === 'function') { type = this.getComponentName(formItem.type)
disabled = this.getFunctionAttr(formItem.disabled, field) }
} else if (typeof formItem.disabled === 'boolean') {
disabled = formItem.disabled // 2.触发 v-if 显示 / 隐藏
} this.setVif(formItem, field)
// 4.动态属性 // 3.触发 disabled 禁用 / 启用
let attrs = this.getDynamicAttr(formItem.attrs, field) let disabled = null
var defAttrs = { clearable: this.clearable } if (typeof formItem.disabled === 'function') {
if (formItem.type === 'select') { disabled = this.getFunctionAttr(formItem.disabled, field)
defAttrs = { clearable: this.clearable, filterable: true } } else if (typeof formItem.disabled === 'boolean') {
} else if (formItem.type === 'date') { disabled = formItem.disabled
defAttrs = { clearable: this.clearable, filterable: true, valueFormat: 'yyyy-MM-ddTHH:mm:ss' } }
}
attrs = Object.assign(defAttrs, attrs) // 4.动态属性
let attrs = this.getDynamicAttr(formItem.attrs, field)
// 5.动态 label var defAttrs = { clearable: this.clearable }
const label = this.getDynamicAttr(formItem.label, field) if (formItem.type === 'select') {
defAttrs = { clearable: this.clearable, filterable: true }
// 6.动态 prop } else if (formItem.type === 'date') {
const prop = this.getDynamicAttr(formItem.prop, field) defAttrs = { clearable: this.clearable, filterable: true, valueFormat: 'yyyy-MM-ddTHH:mm:ss' }
}
// 7.动态 optionsLinkageFields attrs = Object.assign(defAttrs, attrs)
const optionsLinkageFields = castArray(
this.getDynamicAttr(formItem.optionsLinkageFields, field) // 5.动态 label
) const label = this.getDynamicAttr(formItem.label, field)
this.$set(formItem, '_type', type) // 6.动态 prop
this.$set(formItem, '_disabled', disabled) const prop = this.getDynamicAttr(formItem.prop, field)
this.$set(formItem, '_attrs', attrs)
this.$set(formItem, '_label', label) // 7.动态 optionsLinkageFields
this.$set(formItem, '_prop', prop) const optionsLinkageFields = castArray(
this.$set(formItem, '_optionsLinkageFields', optionsLinkageFields) this.getDynamicAttr(formItem.optionsLinkageFields, field)
)
// 4.重新获取 options
if (formItem._vif) { this.$set(formItem, '_type', type)
this.changeOptions(formItem.options || formItem._options, field) this.$set(formItem, '_disabled', disabled)
} this.$set(formItem, '_attrs', attrs)
}) this.$set(formItem, '_label', label)
}) this.$set(formItem, '_prop', prop)
this.checkLinkageFn() this.$set(formItem, '_optionsLinkageFields', optionsLinkageFields)
}
}, // 4.重新获取 options
setVif(formItem, field) { if (formItem._vif) {
let vif = true this.changeOptions(formItem.options || formItem._options, field)
if (typeof formItem.vif === 'function') { }
vif = Boolean(this.getFunctionAttr(formItem.vif, field)) })
})
if (!vif) { this.checkLinkageFn()
// 如果隐藏, 则使用其默认值 }
this.handleChange(field, formItem._defaultValue) },
} setVif(formItem, field) {
} else if (typeof formItem.vif === 'boolean') { let vif = true
vif = formItem.vif if (typeof formItem.vif === 'function') {
} vif = Boolean(this.getFunctionAttr(formItem.vif, field))
this.$set(formItem, '_vif', vif)
}, if (!vif) {
// 设置默认值 // 如果隐藏, 则使用其默认值
setDefaultvalue(formItem, field) { this.handleChange(field, formItem._defaultValue)
let defaultValue = }
typeof formItem.default === 'function' } else if (typeof formItem.vif === 'boolean') {
? formItem.default(this.formData) vif = formItem.vif
: formItem.default }
// 默认值不为空 & (值为空 || 老值和当前值) this.$set(formItem, '_vif', vif)
if (!isEmpty(defaultValue) && isEmpty(this.formData[field])) { },
// 判断是否有格式化函数 // 设置默认值
if (formItem.displayFormatter) { setDefaultvalue(formItem, field) {
defaultValue = formItem.displayFormatter(defaultValue, this.formData) let defaultValue =
} typeof formItem.default === 'function'
? formItem.default(this.formData)
this.handleChange(field, defaultValue) : formItem.default
} // 默认值不为空 & (值为空 || 老值和当前值)
this.$set(formItem, '_defaultValue', defaultValue) if (!isEmpty(defaultValue) && isEmpty(this.formData[field])) {
}, // 判断是否有格式化函数
// 组件名称 if (formItem.displayFormatter) {
getComponentName(type) { defaultValue = formItem.displayFormatter(defaultValue, this.formData)
if (this.$EleFormBuiltInNames.includes(type)) { }
// 内置组件
return 'ele-form-' + type this.handleChange(field, defaultValue)
} else { }
// 外部组件 this.$set(formItem, '_defaultValue', defaultValue)
return type },
} // 组件名称
}, getComponentName(type) {
// 转对象的key if (this.$EleFormBuiltInNames.includes(type)) {
// 例如 option: { label: '女', val: 1 }, prop: { text: 'label', value: 'val' } // 内置组件
// 转换后 -> option: { text: '女', value: 1 } return 'ele-form-' + type
changeProp(options, prop) { } else {
if (prop) { // 外部组件
return options.map(option => ({ return type
text: option[prop.text || 'text'], }
value: option[prop.value || 'value'] },
})) // 转对象的key
} else { // 例如 option: { label: '女', val: 1 }, prop: { text: 'label', value: 'val' }
return options // 转换后 -> option: { text: '女', value: 1 }
} changeProp(options, prop) {
}, if (prop) {
// 将options转为对象数组 return options.map(option => ({
getObjArrOptions(options) { text: option[prop.text || 'text'],
return options.map(option => { value: option[prop.value || 'value']
if (is(option, ['Number', 'String', 'Boolean'])) { }))
// 例如 ['男', '女'] => [ { text: '男', value: '男' }, { text: '女', value: '女' } ] } else {
return { return options
text: option, }
value: option },
} // 将options转为对象数组
} else { getObjArrOptions(options) {
// 对象 直接返回 return options.map(option => {
return option if (is(option, ['Number', 'String', 'Boolean'])) {
} // 例如 ['男', '女'] => [ { text: '男', value: '男' }, { text: '女', value: '女' } ]
}) return {
}, text: option,
shouldRequest(field) { value: option
const formItem = this.formDescData[field] }
// 如果 _options 不存在，则代表第一次进入，需要请求 } else {
if (!formItem._options) return true // 对象 直接返回
// 如果关联字段不存在，则直接返回 false return option
if (!formItem._optionsLinkageFields.length) { }
return false })
} },
// 判断关联字段的值有无更新，有不同的，则更新 shouldRequest(field) {
return formItem._optionsLinkageFields.some( const formItem = this.formDescData[field]
field => this.formData[field] !== this.oldFormData[field] // 如果 _options 不存在，则代表第一次进入，需要请求
) if (!formItem._options) return true
}, // 如果关联字段不存在，则直接返回 false
// 将四种类型: 字符串数组, 对象数组, Promise对象和函数统一为 对象数组 if (!formItem._optionsLinkageFields.length) {
changeOptions(options, field) { return false
if (options) { }
if (options instanceof Array) { // 判断关联字段的值有无更新，有不同的，则更新
// 当options为数组时: 直接获取 return formItem._optionsLinkageFields.some(
this.setOptions(options, field) field => this.formData[field] !== this.oldFormData[field]
} else if (options instanceof Function) { )
// 当options为Promise时: 等待Promise结束, 并获取值 },
if (this.formDescData[field]._isLoadingOptions) return // 将四种类型: 字符串数组, 对象数组, Promise对象和函数统一为 对象数组
if (!this.shouldRequest(field)) return changeOptions(options, field) {
if (options) {
const res = this.getFunctionAttr(options, field) if (options instanceof Array) {
if (res instanceof Promise) { // 当options为数组时: 直接获取
this.formDescData[field]._isLoadingOptions = true this.setOptions(options, field)
} } else if (options instanceof Function) {
// 当options为函数: 执行函数并递归 // 当options为Promise时: 等待Promise结束, 并获取值
this.changeOptions(res, field) if (this.formDescData[field]._isLoadingOptions) return
} else if (options instanceof Promise) { if (!this.shouldRequest(field)) return
options.then(options => {
this.formDescData[field]._isLoadingOptions = false const res = this.getFunctionAttr(options, field)
this.changeOptions(options, field) if (res instanceof Promise) {
}) this.formDescData[field]._isLoadingOptions = true
} else if (options.toString() === '[object Object]') { }
if (this.formDescData[field]._isLoadingOptions) return // 当options为函数: 执行函数并递归
if (!this.shouldRequest(field)) return this.changeOptions(res, field)
this.formDescData[field]._isLoadingOptions = true } else if (options instanceof Promise) {
this.changeOptions(fetchDictionary(options), field) options.then(options => {
} else if (typeof options === 'string' && this.optionsFn) { this.formDescData[field]._isLoadingOptions = false
if (this.formDescData[field]._isLoadingOptions) return this.changeOptions(options, field)
if (!this.shouldRequest(field)) return })
} else if (options.toString() === '[object Object]') {
this.formDescData[field]._isLoadingOptions = true if (this.formDescData[field]._isLoadingOptions) return
// options为url地址 if (!this.shouldRequest(field)) return
this.changeOptions(this.optionsFn(options), field) this.formDescData[field]._isLoadingOptions = true
} else { this.changeOptions(fetchDictionary(options), field)
if (typeof options === 'string') { } else if (typeof options === 'string' && this.optionsFn) {
throw new TypeError( if (this.formDescData[field]._isLoadingOptions) return
`options值为: ${options}, 为字符串, 但是未配置options-fn参数, 具体请参考: https://www.yuque.com/chaojie-vjiel/vbwzgu/rgenav#ZVYtf` if (!this.shouldRequest(field)) return
)
} else { this.formDescData[field]._isLoadingOptions = true
// 其他报错 // options为url地址
throw new TypeError( this.changeOptions(this.optionsFn(options), field)
'options的类型不正确, options及options请求结果类型可为: 字符串数组, 对象数组, 函数和Promise或者URL地址, 当前值为: ' + } else {
options + if (typeof options === 'string') {
', 不属于以上四种类型, 具体请参考: https://www.yuque.com/chaojie-vjiel/vbwzgu/rgenav' throw new TypeError(
) `options值为: ${options}, 为字符串, 但是未配置options-fn参数, 具体请参考: https://www.yuque.com/chaojie-vjiel/vbwzgu/rgenav#ZVYtf`
} )
} } else {
} else { // 其他报错
if (this.formDescData[field]._options) { throw new TypeError(
// 如果new options为null / undefined, 且 old Options 存在, 则设置 'options的类型不正确, options及options请求结果类型可为: 字符串数组, 对象数组, 函数和Promise或者URL地址, 当前值为: ' +
this.setOptions([], field) options +
} ', 不属于以上四种类型, 具体请参考: https://www.yuque.com/chaojie-vjiel/vbwzgu/rgenav'
} )
}, }
// 设置options }
setOptions(options, field) { } else {
const formItem = this.formDescData[field] if (this.formDescData[field]._options) {
const prop = formItem._prop // 如果new options为null / undefined, 且 old Options 存在, 则设置
// 将options每一项转为对象 this.setOptions([], field)
let newOptions = this.getObjArrOptions(options) }
const oldOptionsValues = (formItem._options || []) }
.map(item => item.value) },
.join(',') // 设置options
// 改变prop为规定的prop setOptions(options, field) {
newOptions = this.changeProp(newOptions, prop) const formItem = this.formDescData[field]
const newOptionsValues = newOptions.map(item => item.value).join(',') const prop = formItem._prop
this.$set(this.formDescData[field], '_options', newOptions) // 将options每一项转为对象
let newOptions = this.getObjArrOptions(options)
// 新 options 和老 options 不同时，触发值的改变 const oldOptionsValues = (formItem._options || [])
if (formItem.isRestValByOptions !== false) { .map(item => item.value)
if (oldOptionsValues && newOptionsValues !== oldOptionsValues) { .join(',')
this.setValue(field, null) // 改变prop为规定的prop
} newOptions = this.changeProp(newOptions, prop)
} const newOptionsValues = newOptions.map(item => item.value).join(',')
}, this.$set(this.formDescData[field], '_options', newOptions)
// 验证表单
validateForm() { // 新 options 和老 options 不同时，触发值的改变
return new Promise((resolve, reject) => { if (formItem.isRestValByOptions !== false) {
if (this.computedRules) { if (oldOptionsValues && newOptionsValues !== oldOptionsValues) {
// 当传递了验证规则 this.setValue(field, null)
this.$refs.form.validate((valid, invalidFields) => { }
if (valid) { }
// 验证通过 },
resolve() // 验证表单
} else { validateForm() {
// 显示错误 return new Promise((resolve, reject) => {
reject(invalidFields) if (this.computedRules) {
} // 当传递了验证规则
}) this.$refs.form.validate((valid, invalidFields) => {
} else { if (valid) {
resolve() // 验证通过
} resolve()
}) } else {
}, // 显示错误
reject(invalidFields)
// 验证所有组件的内置验证方法 }
validateComponent() { })
const validators = this.formDescKeys } else {
.map(key => resolve()
this.$refs[key] && this.$refs[key][0] }
? this.$refs[key][0].validate })
: null },
)
.filter(Boolean) // 验证所有组件的内置验证方法
return Promise.all(validators.map(fn => fn())) validateComponent() {
}, const validators = this.formDescKeys
.map(key =>
// 处理错误 this.$refs[key] && this.$refs[key][0]
processError(errObj) { ? this.$refs[key][0].validate
if (!this.isShowErrorNotify) return : null
try { )
const messageArr = Object.keys(errObj).reduce((acc, key) => { .filter(Boolean)
const formItem = this.formDescData[key] return Promise.all(validators.map(fn => fn()))
const label = },
formItem && formItem._label ? formItem._label + ': ' : key + ': '
if (errObj[key] instanceof Array) { // 处理错误
// errorObj: { name: [ { filed: 'name', message: 'name is required' }] } processError(errObj) {
// 内部校检结果返回的错误信息样式 if (!this.isShowErrorNotify) return
errObj[key].forEach(item => { try {
acc.push(label + item.message) const messageArr = Object.keys(errObj).reduce((acc, key) => {
}) const formItem = this.formDescData[key]
} else { const label =
// errorObj: { name: 'name is required' } formItem && formItem._label ? formItem._label + ': ' : key + ': '
// 外部校检返回的错误信息 if (errObj[key] instanceof Array) {
acc.push(label + errObj[key]) // errorObj: { name: [ { filed: 'name', message: 'name is required' }] }
} // 内部校检结果返回的错误信息样式
errObj[key].forEach(item => {
return acc acc.push(label + item.message)
}, []) })
this.showError(messageArr) } else {
// eslint-disable-next-line // errorObj: { name: 'name is required' }
} catch { } // 外部校检返回的错误信息
}, acc.push(label + errObj[key])
}
// 显示错误
showError(messageArr) { return acc
if (messageArr.length) { }, [])
this.$message({ this.showError(messageArr)
message: messageArr[0], // eslint-disable-next-line
type: 'warning' } catch { }
}) },
// const h = this.$createElement
// messageArr = messageArr.map(msg => { // 显示错误
// return h('div', { style: { marginBottom: '8px' } }, msg) showError(messageArr) {
// }) if (messageArr.length) {
// this.$notify.error({ this.$message({
// title: t('ele-form.formError'), message: messageArr[0],
// message: h('div', { style: { marginTop: '12px' } }, messageArr) type: 'warning'
// }) })
} // const h = this.$createElement
}, // messageArr = messageArr.map(msg => {
// 验证表单 // return h('div', { style: { marginBottom: '8px' } }, msg)
async validate() { // })
try { // this.$notify.error({
await this.validateForm() // title: t('ele-form.formError'),
await this.validateComponent() // message: h('div', { style: { marginTop: '12px' } }, messageArr)
} catch (error) { // })
console.log(error) }
this.processError(error) },
await Promise.reject(error) // 验证表单
} async validate() {
}, try {
// 提交表单 await this.validateForm()
async handleSubmitForm() { await this.validateComponent()
try { } catch (error) {
// 自定义处理 console.log(error)
this.$emit('before-validate', this.formData) this.processError(error)
if (this.beforeValidate) { await Promise.reject(error)
const isPass = await this.beforeValidate(this.formData) }
if (isPass === false) return },
} // 提交表单
async handleSubmitForm() {
await this.validate() try {
// 为了不影响原值, 这里进行 clone // 自定义处理
let data = cloneDeep(this.formData) this.$emit('before-validate', this.formData)
// valueFormatter的处理 if (this.beforeValidate) {
for (const field in data) { const isPass = await this.beforeValidate(this.formData)
const formItem = this.formDescData[field] if (isPass === false) return
if (formItem && formItem.valueFormatter) { }
data[field] = formItem.valueFormatter(data[field], data)
} await this.validate()
} // 为了不影响原值, 这里进行 clone
let data = cloneDeep(this.formData)
this.$emit('before-request', data) // valueFormatter的处理
if (this.beforeRequest) { for (const field in data) {
const beforeRequestData = this.beforeRequest(data) const formItem = this.formDescData[field]
if (beforeRequestData === false) return if (formItem && formItem.valueFormatter) {
if (typeof beforeRequestData === 'object') { data[field] = formItem.valueFormatter(data[field], data)
data = beforeRequestData }
} }
}
this.$emit('before-request', data)
if (this.requestFn) { if (this.beforeRequest) {
// 在内部请求 const beforeRequestData = this.beforeRequest(data)
if (this.innerIsLoading) return if (beforeRequestData === false) return
this.innerIsLoading = true if (typeof beforeRequestData === 'object') {
try { data = beforeRequestData
const response = await this.requestFn(data) }
this.$nextTick(() => { }
this.$emit('request-success', response)
if (this.requestSuccess) { if (this.requestFn) {
this.requestSuccess(response) // 在内部请求
} if (this.innerIsLoading) return
}) this.innerIsLoading = true
} catch (error) { try {
if (this.requestError) { const response = await this.requestFn(data)
this.requestError(error) this.$nextTick(() => {
} this.$emit('request-success', response)
if (this.requestSuccess) {
console.error(error) this.requestSuccess(response)
// 处理异常情况 }
if (error instanceof Error) { })
// 返回的是Error类型, 则进行解析 } catch (error) {
try { if (this.requestError) {
const msg = JSON.parse(error.message) this.requestError(error)
if (msg instanceof Object) { }
this.innerFormError = msg
} console.error(error)
// eslint-disable-next-line // 处理异常情况
} catch { } if (error instanceof Error) {
} else if (error instanceof Object) { // 返回的是Error类型, 则进行解析
// 返回的是对象类型, 则直接设置 try {
this.innerFormError = error const msg = JSON.parse(error.message)
} if (msg instanceof Object) {
this.$emit('request-error') this.innerFormError = msg
} finally { }
this.innerIsLoading = false // eslint-disable-next-line
if (this.requestEnd) { } catch { }
this.requestEnd() } else if (error instanceof Object) {
} // 返回的是对象类型, 则直接设置
this.$emit('request-end') this.innerFormError = error
} }
} else { this.$emit('request-error')
// 在外部请求 } finally {
if (this.isLoading) return this.innerIsLoading = false
this.$emit('request', data) if (this.requestEnd) {
} this.requestEnd()
} catch (error) { }
return this.processError(error) this.$emit('request-end')
} }
}, } else {
// 返回按钮 // 在外部请求
goBack() { if (this.isLoading) return
this.$emit('back') this.$emit('request', data)
if (this.$router) { }
// vue-router } catch (error) {
this.$router.back() return this.processError(error)
} else { }
// 浏览器history API },
history.back() // 返回按钮
} goBack() {
}, this.$emit('back')
// 点击取消按钮 if (this.$router) {
handleCancelClick() { // vue-router
this.$emit('close') this.$router.back()
this.$emit('cancel') } else {
this.$emit('update:visible', false) // 浏览器history API
}, history.back()
// 重置表单 }
resetForm() { },
this.$emit('reset') // 点击取消按钮
this.$refs.form.resetFields() handleCancelClick() {
this.$emit('close')
// 调用内部方法进行值的重置 this.$emit('cancel')
this.$refs.form.fields.forEach(field => { this.$emit('update:visible', false)
this.formData[field.prop] = field.initialValue },
}) // 重置表单
} resetForm() {
} this.$emit('reset')
} this.$refs.form.resetFields()
</script>
// 调用内部方法进行值的重置
<style> this.$refs.form.fields.forEach(field => {
.ele-form--inline .ele-form-btns { this.formData[field.prop] = field.initialValue
width: auto; })
} }
.ele-form-col--break { }
clear: both; }
} </script>
.ele-form-tip {
color: #909399; <style>
line-height: 1.5em; .ele-form--inline .ele-form-btns {
margin-top: 3px; width: auto;
} }
.ele-form-tip code { .ele-form-col--break {
padding: 2px 4px; clear: both;
font-size: 90%; }
color: #c7254e; .ele-form-tip {
background-color: #f9f2f4; color: #909399;
border-radius: 4px; line-height: 1.5em;
} margin-top: 3px;
}
.ele-form-full-line.el-date-editor.el-input, .ele-form-tip code {
.ele-form-full-line.el-date-editor .el-input__inner, padding: 2px 4px;
.ele-form-full-line.el-date-editor--daterange.el-input__inner, font-size: 90%;
.ele-form-full-line.el-date-editor--datetimerange.el-input__inner, color: #c7254e;
.ele-form-full-line.el-date-editor--timerange.el-input__inner, background-color: #f9f2f4;
.ele-form-full-line.el-date-editor--monthrange.el-input__inner, border-radius: 4px;
.ele-form-full-line.el-cascader, }
.ele-form-full-line.el-select,
.ele-form-full-line.el-autocomplete { .ele-form-full-line.el-date-editor.el-input,
width: 100%; .ele-form-full-line.el-date-editor .el-input__inner,
} .ele-form-full-line.el-date-editor--daterange.el-input__inner,
.ele-form-full-line.el-date-editor--datetimerange.el-input__inner,
.el-radio-group { .ele-form-full-line.el-date-editor--timerange.el-input__inner,
line-height: inherit; .ele-form-full-line.el-date-editor--monthrange.el-input__inner,
border: 0.5px solid transparent; .ele-form-full-line.el-cascader,
} .ele-form-full-line.el-select,
</style> .ele-form-full-line.el-autocomplete {
width: 100%;
}
.el-radio-group {
line-height: inherit;
border: 0.5px solid transparent;
}
</style>
src/components/EleForm/components/EleFormSelect.vue
View file @ fe334527
...@@ -68,30 +68,30 @@ export default { ...@@ -68,30 +68,30 @@ export default {
}, },
methods: { methods: {
// 变化处理 // 变化处理
// handleChange(value) { handleChange(value) {
// var result = {} var result = {}
// if (!this.attrs.multiple) { if (!this.attrs.multiple) {
// this.options.forEach(item => { this.options.forEach(item => {
// if (item.value === value) { if (item.value === value) {
// result = item.value result = item
// } }
// }) })
// } else { } else {
// result = { result = {
// value: [], value: [],
// text: [] text: []
// } }
// this.options.forEach(item => { this.options.forEach(item => {
// value.forEach(jtem => { value.forEach(jtem => {
// if (item.value === jtem) { if (item.value === jtem) {
// result.value.push(item.value) result.value.push(item.value)
// result.text.push(item.text) result.text.push(item.text)
// } }
// }) })
// }) })
// } }
// this.$emit('input', result) this.$emit('input', result)
// }, },
changeOptions(q) { changeOptions(q) {
if (this.remoteMethod) { if (this.remoteMethod) {
this.loading = true this.loading = true
......
src/store/modules/permission.js
View file @ fe334527
...@@ -98,7 +98,7 @@ const actions = { ...@@ -98,7 +98,7 @@ const actions = {
var permissions = [] var permissions = []
var paths = [] var paths = []
treeToArray(menus, permissions, paths) treeToArray(menus, permissions, paths)
console.log(paths) // console.log(paths)
localStorage.setItem('PERMISSIONS', JSON.stringify(permissions)) localStorage.setItem('PERMISSIONS', JSON.stringify(permissions))
localStorage.setItem('PATHS', JSON.stringify(paths)) localStorage.setItem('PATHS', JSON.stringify(paths))
commit('SET_PERMISSIONS', permissions) commit('SET_PERMISSIONS', permissions)
......
src/views/customers/customers-add/index.vue
View file @ fe334527
...@@ -76,7 +76,7 @@ export default { ...@@ -76,7 +76,7 @@ export default {
type: 'input', type: 'input',
label: '社会统一信用代码', label: '社会统一信用代码',
layout: 12, layout: 12,
disabled: this.displayBtn disabled: true
}, },
ExtRegisteredCapital_SDK: { ExtRegisteredCapital_SDK: {
type: 'input', type: 'input',
...@@ -105,6 +105,10 @@ export default { ...@@ -105,6 +105,10 @@ export default {
type: 'select', type: 'select',
label: '省份', label: '省份',
layout: 12, layout: 12,
value: 'ExtProvinceName_SDK',
attrs: {
multiple: false
},
options: async data => { options: async data => {
const res = await provinceSearch({}) const res = await provinceSearch({})
var result = res.results.map(item => { var result = res.results.map(item => {
...@@ -122,6 +126,10 @@ export default { ...@@ -122,6 +126,10 @@ export default {
label: '地市', label: '地市',
layout: 12, layout: 12,
isOptions: true, isOptions: true,
value: 'ExtCityName_SDK',
attrs: {
multiple: false
},
optionsLinkageFields: ['ExtProvince_SDK'], optionsLinkageFields: ['ExtProvince_SDK'],
options: async data => { options: async data => {
if (!data.ExtProvince_SDK) { if (!data.ExtProvince_SDK) {
...@@ -145,6 +153,10 @@ export default { ...@@ -145,6 +153,10 @@ export default {
label: '县市', label: '县市',
layout: 12, layout: 12,
isOptions: true, isOptions: true,
attrs: {
multiple: false
},
value: 'ExtDistrictName_SDK',
optionsLinkageFields: ['ExtProvince_SDK', 'ExtCity_SDK'], optionsLinkageFields: ['ExtProvince_SDK', 'ExtCity_SDK'],
options: async data => { options: async data => {
if (!data.ExtCity_SDK) { if (!data.ExtCity_SDK) {
...@@ -240,8 +252,8 @@ export default { ...@@ -240,8 +252,8 @@ export default {
// ExtRegisteredCapital_SDK: {required: true, message: '注册资本必填' }, // ExtRegisteredCapital_SDK: {required: true, message: '注册资本必填' },
ExtCorporateName_SDK: { required: true, message: '法人必填' }, ExtCorporateName_SDK: { required: true, message: '法人必填' },
ExtProvince_SDK: { required: true, message: '省份必填' }, ExtProvince_SDK: { required: true, message: '省份必填' },
ExtDistrict_SDK: {required: true, message: '城市必填' }, ExtCity_SDK: {required: true, message: '地市必填' },
ExtCity_SDK: { required: true, message: '县区必填' }, ExtDistrict_SDK: { required: true, message: '县区必填' },
ExtLeader_SDK: { required: true, message: '公司负责人姓名' }, ExtLeader_SDK: { required: true, message: '公司负责人姓名' },
ExtLeaderPhone_SDK: { required: true, message: '公司负责人联系方式' }, ExtLeaderPhone_SDK: { required: true, message: '公司负责人联系方式' },
ExtLeaderEmail_SDK: { required: true, message: '公司负责人邮箱' }, ExtLeaderEmail_SDK: { required: true, message: '公司负责人邮箱' },
...@@ -265,7 +277,7 @@ export default { ...@@ -265,7 +277,7 @@ export default {
methods: { methods: {
handleSubmit (data) { handleSubmit (data) {
const formData = this.$translateToC4CData(data) const formData = this.$translateToC4CData(data)
formData.extCustomerType_SDK = '121' console.log(formData)
this.loading = true this.loading = true
customerCreate(this.paramsToFormData(formData)).then(res => { customerCreate(this.paramsToFormData(formData)).then(res => {
this.addBtnStart = true this.addBtnStart = true
......
src/views/customers/customers-details/area.vue
View file @ fe334527
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</el-button> </el-button>
</div> </div>
<div> <div>
<PersonalInFo :addBtnStart='addBtnStart' :dedeleBtnStart="dedeleBtnStart" :type-code="typeCode" :isShowBtn='isShowBtn' :isShowEditBtn="isShowEditBtn"/> <PersonalInFo :addBtnStart='addBtnStart' :dedeleBtnStart="dedeleBtnStart" :type-code="typeCode" :isShowBtn='isShowBtn' :isShowEditBtn="isShowEditBtn" @showAuthentication="showStart"/>
</div> </div>
<!-- <PersonalInFo :addBtnStart='addBtnStart' :dedeleBtnStart="dedeleBtnStart" :type-code="typeCode" :isShowEditBtn='btn'/> --> <!-- <PersonalInFo :addBtnStart='addBtnStart' :dedeleBtnStart="dedeleBtnStart" :type-code="typeCode" :isShowEditBtn='btn'/> -->
</div> </div>
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
formData: {}, formData: {},
isShowSubmitBtn: false, isShowSubmitBtn: false,
isShowBackBtn: false, isShowBackBtn: false,
showAuthentication: false, showAuthentication: true,
sections: [ sections: [
{ {
title: '基本信息', title: '基本信息',
...@@ -300,18 +300,19 @@ export default { ...@@ -300,18 +300,19 @@ export default {
rules: {} rules: {}
} }
}, },
// watch: { watch: {
// 'formData.ExtSocialUnifiedCreditCode_SDK': { // 'formData.ExtSocialUnifiedCreditCode_SDK': {
// handler(newValue) { // handler(newValue) {
// console.log("单个属性监听", newValue) // console.log("单个属性监听", newValue)
// qccGetOne({searchKey: newValue}).then(res =>{ // qccGetOne({searchKey: newValue}).then(res =>{
// this.sections[0].formDesc.ExtRegisteredCapital_SDK.default = res.results.Result.RegistCapi // this.sections[0].formDesc.ExtRegisteredCapital_SDK.default = res.results.Result.RegistCapi
// console.log(this.sections[0].formDesc.ExtRegisteredCapital_SDK.default) // console.log(this.sections[0].formDesc.ExtRegisteredCapital_SDK.default)
// }) // })
// } // }
// } // }
// }, },
created() { created() {
console.log(this.$refs)
this.getOneData() this.getOneData()
}, },
methods: { methods: {
...@@ -331,6 +332,9 @@ export default { ...@@ -331,6 +332,9 @@ export default {
}); });
return formData; return formData;
}, },
showStart(val) {
this.showAuthentication = val
},
getOneData() { getOneData() {
this.loading = true this.loading = true
const dataId = this.$route.query.objectID const dataId = this.$route.query.objectID
......
src/views/customers/personal-customers/conponents/personal-info/index.vue
View file @ fe334527
...@@ -143,6 +143,7 @@ export default { ...@@ -143,6 +143,7 @@ export default {
} }
}, },
created() { created() {
console.log(this.$refs.eleTable)
this.tableConfig.columns.handle.vif = this.isShowBtn this.tableConfig.columns.handle.vif = this.isShowBtn
constant.tableConfig.initialParams = { constant.tableConfig.initialParams = {
BusinessObjectID: this.objectID || this.$route.query.objectID, BusinessObjectID: this.objectID || this.$route.query.objectID,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment