15 changed files with 1262 additions and 468 deletions
@ -0,0 +1,204 @@ |
|||||
|
<template> |
||||
|
<!-- 组件功能：普通新增编辑（目前只有主表）参数配置从api获取 --> |
||||
|
<el-dialog |
||||
|
:visible.sync="show" |
||||
|
:modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
:show-close="true" |
||||
|
@close="close" |
||||
|
class="searchPageComponents" |
||||
|
:fullscreen="true" |
||||
|
style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)" |
||||
|
> |
||||
|
<!-- 标题 --> |
||||
|
<div class="dialogOuterTitle">{{formTitle}}</div> |
||||
|
<!-- 表单 --> |
||||
|
<el-form |
||||
|
ref="addEditFrom_Ref" |
||||
|
v-if="formData" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
> |
||||
|
<el-row :gutter="40"> |
||||
|
<el-col |
||||
|
:span="item.colSpan || 12" |
||||
|
v-for="(item, index) in formItemData" |
||||
|
:key="index" |
||||
|
> |
||||
|
<el-form-item |
||||
|
:label="item.label" |
||||
|
:prop="item.prop" |
||||
|
> |
||||
|
<!-- 数值 --> |
||||
|
<el-input-number |
||||
|
v-if="item.apiBaseType === 'number'" |
||||
|
v-model="formData[item.prop]" |
||||
|
:min="item.minimum || undefined" |
||||
|
:max="item.maximum || undefined" |
||||
|
:maxlength="item.maxLength || undefined" |
||||
|
:minlength="item.minLength || undefined" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
@change="changeValue(item.prop,item,$event)" |
||||
|
@clear="clearValue(item.prop,$event)" |
||||
|
></el-input-number> |
||||
|
|
||||
|
<!-- 时间转换 --> |
||||
|
<el-date-picker |
||||
|
v-else-if="item.apiBaseType === 'datetime'" |
||||
|
v-model="formData[item.prop]" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-date-picker> |
||||
|
|
||||
|
<!-- 布尔、枚举 --> |
||||
|
<el-select |
||||
|
v-else-if="item.isEnums || item.apiBaseType === 'boolean'" |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请选择' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in getItemEnums(item)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
<!-- 文本框 --> |
||||
|
<el-input |
||||
|
v-else |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<!-- 操作按钮 --> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="show = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="submitHandle()">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name:"addEditFromApiPop", |
||||
|
props: { |
||||
|
// 编辑行数据 |
||||
|
editRowData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 操作类型：add/edit |
||||
|
handleType:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
show:true, |
||||
|
formTitle:null,//form名称 |
||||
|
formData:{},//表单数据 |
||||
|
formItemData:null,//表单item配置 |
||||
|
formRules: {},//表单验证 |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initTitle() |
||||
|
this.initFormItems() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 初始化form名称 |
||||
|
initTitle(){ |
||||
|
if(this.handleType){ |
||||
|
this.formTitle = this.handleType == 'add' ? '新增'+this.$route.name : '编辑'+this.$route.name |
||||
|
} |
||||
|
}, |
||||
|
// 初始化表单配置、rules |
||||
|
initFormItems(){ |
||||
|
let data = this.$store.getters.dtoColumnTypes |
||||
|
let _dtoList_type = this.handleType == 'add' ? 'C' : 'U' |
||||
|
let _dtoList = data[this.$route.name][_dtoList_type].dtoList |
||||
|
this.formItemData = JSON.parse(JSON.stringify(_dtoList)) |
||||
|
// 表单验证格式化 |
||||
|
this.formRules={} |
||||
|
_dtoList.forEach(item=>{ |
||||
|
if(item.isRequired){ |
||||
|
this.formRules[item.prop] = [{ required: true, trigger: "blur", message: "不可为空" }] |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取枚举、布尔 |
||||
|
getItemEnums(item){ |
||||
|
let _option = [] |
||||
|
// 布尔 |
||||
|
if(item.apiBaseType == 'boolean'){ |
||||
|
_option = [{ |
||||
|
value: true, |
||||
|
label: '是' |
||||
|
},{ |
||||
|
value: false, |
||||
|
label: '否' |
||||
|
},] |
||||
|
} |
||||
|
if(item.isEnums){ |
||||
|
_option = item.enums_list |
||||
|
} |
||||
|
return _option |
||||
|
}, |
||||
|
// 关闭弹窗 |
||||
|
close() { |
||||
|
this.show = false |
||||
|
this.$emit("closePop") |
||||
|
}, |
||||
|
// 提交表单 |
||||
|
submitHandle(){ |
||||
|
this.$refs.addEditFrom_Ref.validate((valid) => { |
||||
|
if (valid) { |
||||
|
console.log(this.handleType,this.formData) |
||||
|
// 新增 |
||||
|
if(this.handleType == 'add'){ |
||||
|
|
||||
|
} |
||||
|
// 编辑 |
||||
|
else{ |
||||
|
|
||||
|
} |
||||
|
this.show = false |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 值更改函数 |
||||
|
changeValue(prop,item,val) { |
||||
|
this.$emit("changeValue", prop, item, val) |
||||
|
}, |
||||
|
// 值清除函数 |
||||
|
clearValue(prop,item,val) { |
||||
|
this.$emit("clearValue", prop, item, val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-dialog__header{ |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
::v-deep .el-form-item__label{ |
||||
|
float: unset; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input,.el-select,.el-input-number{ |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,888 @@ |
|||||
|
<template> |
||||
|
<div class="currenForm"> |
||||
|
<!-- @submit.native.prevent 阻止form只有一个input输入框回车触发提交事件 --> |
||||
|
<el-form |
||||
|
ref="form" |
||||
|
:size="size" |
||||
|
:label-position="labelPosition" |
||||
|
:inline="inline" |
||||
|
:label-width="labelWidth" |
||||
|
:rules="rules" |
||||
|
:model="searchData" |
||||
|
@submit.native.prevent |
||||
|
v-if="!hide ? true : false" |
||||
|
> |
||||
|
<el-row :gutter="40"> |
||||
|
<el-col |
||||
|
:span="item.colSpan" |
||||
|
v-for="(item, index) in searchForm" |
||||
|
:key="index" |
||||
|
> |
||||
|
<el-form-item |
||||
|
:label="item.label" |
||||
|
:prop="item.showProp ? item.prop + '.' + item.showProp : item.prop" |
||||
|
v-if="!item.hide ? true : false" |
||||
|
> |
||||
|
<!-- 输入框 onkeyup: 正则表达式，用于前端输入校验工作--> |
||||
|
<!-- :onkeyup="item.onkeyup" --> |
||||
|
<el-input |
||||
|
v-if="item.type === 'input'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:maxlength="item.maxlength" |
||||
|
:onkeyup="itemOnKeyUp(item,searchData[item.prop])" |
||||
|
clearable |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:prefix-icon="item.icon" |
||||
|
:show-password="item.showPassword" |
||||
|
@change="changeInput(item.prop,$event)" |
||||
|
@clear="clearInput(item.prop,$event)" |
||||
|
@blur=" |
||||
|
inputPlaceholder($event, item, 'blur',searchData) |
||||
|
" |
||||
|
@focus="inputPlaceholder($event, item, 'focus')" |
||||
|
></el-input> |
||||
|
<!-- 输入框(有上下增加按钮框) onkeyup: 正则表达式，用于前端输入校验工作--> |
||||
|
<el-input-number |
||||
|
v-if="item.type === 'number'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:onkeyup="item.onkeyup" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
@change="changeInput(item.prop,$event)" |
||||
|
@clear="clearInput(item.prop,$event)" |
||||
|
:min="item.min" |
||||
|
:max="item.max" |
||||
|
:precision="item.precision" |
||||
|
class="inputNameberClass" |
||||
|
@blur=" |
||||
|
inputPlaceholder($event, item, 'blur',searchData) |
||||
|
" |
||||
|
@focus="inputPlaceholder($event, item, 'focus')" |
||||
|
></el-input-number> |
||||
|
<!-- 输入框(只能输入数字) onkeyup: 正则表达式，用于前端输入校验工作--> |
||||
|
<!-- oninput="value=value.replace(/[^\d]/g,'')" --> |
||||
|
<el-input |
||||
|
v-if="item.type === 'inputNumber'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:maxlength="item.maxlength" |
||||
|
:onkeyup="typeNumberOnkeyup(item,searchData[item.prop])" |
||||
|
clearable |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:prefix-icon="item.icon" |
||||
|
:show-password="item.showPassword" |
||||
|
@change="changeInput(item.prop,$event)" |
||||
|
@clear="clearInput(item.prop,$event)" |
||||
|
@blur=" |
||||
|
inputPlaceholder($event, item, 'blur',searchData) |
||||
|
" |
||||
|
@focus="inputPlaceholder($event, item, 'focus')" |
||||
|
></el-input> |
||||
|
<!-- 对象输入框 --> |
||||
|
<el-input |
||||
|
v-if="item.type === 'objectInput'" |
||||
|
v-model="searchData[item.prop][item.showProp]" |
||||
|
:maxlength="item.maxlength" |
||||
|
clearable |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:prefix-icon="item.icon" |
||||
|
:show-password="item.showPassword" |
||||
|
@blur=" |
||||
|
inputPlaceholder($event, item, 'blur',searchData) |
||||
|
" |
||||
|
@focus="inputPlaceholder($event, item, 'focus')" |
||||
|
></el-input> |
||||
|
<!-- 对象富文本框 --> |
||||
|
<el-input |
||||
|
v-if="item.type === 'objectTextarea'" |
||||
|
type="textarea" |
||||
|
v-model="searchData[item.prop][item.showProp]" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
></el-input> |
||||
|
<!--查询下拉--> |
||||
|
<el-autocomplete |
||||
|
v-if="item.type === 'autocomplete'" |
||||
|
class="inline-input" |
||||
|
style="width: 100%" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:fetch-suggestions=" |
||||
|
(queryString, cb) => { |
||||
|
querySearch(queryString, cb, item); |
||||
|
} |
||||
|
" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
@select="handleSelect($event, item)" |
||||
|
> |
||||
|
<el-button |
||||
|
slot="append" |
||||
|
icon="el-icon-search" |
||||
|
v-if="item.click" |
||||
|
@click="item.click(item)" |
||||
|
style="color: #1890ff; background-color: #ffffff" |
||||
|
></el-button> |
||||
|
</el-autocomplete> |
||||
|
<!--对象查询下拉--> |
||||
|
<el-autocomplete |
||||
|
v-if="item.type === 'objectAutocomplete'" |
||||
|
class="inline-input" |
||||
|
style="width: 100%" |
||||
|
v-model="searchData[item.prop][item.showProp]" |
||||
|
:fetch-suggestions=" |
||||
|
(queryString, cb) => { |
||||
|
querySearch(queryString, cb, item); |
||||
|
} |
||||
|
" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
@select="handleSelect($event, item)" |
||||
|
> |
||||
|
<el-button |
||||
|
slot="append" |
||||
|
icon="el-icon-search" |
||||
|
v-if="item.click" |
||||
|
@click="item.click(item)" |
||||
|
style="color: #1890ff; background-color: #ffffff" |
||||
|
></el-button> |
||||
|
</el-autocomplete> |
||||
|
<!-- 文本框 --> |
||||
|
<el-input |
||||
|
v-if="item.type === 'textarea'" |
||||
|
:type="item.type" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:rows="item.rows" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:maxlength="item.maxlength" |
||||
|
show-word-limit |
||||
|
></el-input> |
||||
|
<!-- 下拉框 --> |
||||
|
<el-select |
||||
|
v-if="item.type === 'select'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:loading="selectLoading" |
||||
|
:clearable="item.clearable" |
||||
|
:multiple="item.multiple" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:filterable="item.filterable" |
||||
|
:allow-create="item.allowCreate" |
||||
|
style="width: 100%" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
@change="changeSelect(item.prop,$event)" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(op, index) in selectOptions(item.options) || |
||||
|
item.userOptions" |
||||
|
:label="op[item.optionsLabel] || op.label" |
||||
|
:value="op[item.optionsValue] || op.value" |
||||
|
:key="index" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<!-- 链接接口filter下拉框 --> |
||||
|
<filterSelect |
||||
|
v-if="item.type === 'filterSelect'" |
||||
|
:selectModel="searchData[item.prop]" |
||||
|
:selectItem="item" |
||||
|
@filterOptionSelectHandle="filterOptionSelectHandle" |
||||
|
@filterClearHandle="filterClearHandle(item)" |
||||
|
></filterSelect> |
||||
|
<!--对象下拉框 --> |
||||
|
<el-select |
||||
|
v-if="item.type === 'objectSelect'" |
||||
|
v-model="searchData[item.prop][item.showProp]" |
||||
|
:loading="selectLoading" |
||||
|
:clearable="item.clearable" |
||||
|
:multiple="item.multiple" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:filterable="item.filterable" |
||||
|
:allow-create="item.allowCreate" |
||||
|
style="width: 100%" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(op, index) in selectOptions(item.options) || |
||||
|
searchOptions['options']" |
||||
|
:label="op[item.optionsLabel] || op.label" |
||||
|
:value="op[item.optionsValue] || op.value" |
||||
|
:key="index" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<!-- 下拉框多选 --> |
||||
|
<el-select |
||||
|
v-if="item.type === 'selectArray'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
multiple |
||||
|
:placeholder="item.placeholder || '请选择' + item.label" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(op, index) in selectOptions(item.options) || |
||||
|
item.searchOptions" |
||||
|
:label="op[item.optionsLabel] || op.label" |
||||
|
:value="op[item.optionsValue] || op.value" |
||||
|
:key="index" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<!-- 单选 --> |
||||
|
<el-radio-group |
||||
|
v-if="item.type === 'radio'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
@change="radioChange(item.prop,$event)" |
||||
|
> |
||||
|
<el-radio |
||||
|
v-for="ra in searchOptions[item.radio]" |
||||
|
:label="ra.id" |
||||
|
:key="ra.value" |
||||
|
>{{ ra.label }}</el-radio |
||||
|
> |
||||
|
</el-radio-group> |
||||
|
<!-- 单选按钮 --> |
||||
|
<el-radio-group |
||||
|
v-if="item.type === 'radioButton'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
@change="item.change && item.change(searchData[item.prop])" |
||||
|
> |
||||
|
<el-radio-button |
||||
|
v-for="ra in searchOptions[item.radios]" |
||||
|
:label="ra.value" |
||||
|
:key="ra.value" |
||||
|
>{{ ra.label }}</el-radio-button |
||||
|
> |
||||
|
</el-radio-group> |
||||
|
<!-- 复选框 --> |
||||
|
<el-checkbox v-if="item.type === 'checkbox'" :indeterminate="indeterminate" v-model="item.checkAll" @change="handleCheckAllChange($event,item)">全选</el-checkbox> |
||||
|
<el-checkbox-group |
||||
|
v-if="item.type === 'checkbox'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
@change="handleCheckedCitiesChange($event,item)" |
||||
|
> |
||||
|
<el-checkbox |
||||
|
v-for="ch in searchOptions[item.checkboxs]" |
||||
|
:label="ch" |
||||
|
:key="ch" |
||||
|
>{{ ch }}</el-checkbox |
||||
|
> |
||||
|
</el-checkbox-group> |
||||
|
<!-- 日期 --> |
||||
|
<el-date-picker |
||||
|
v-if="item.type === 'date'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
style="width: 100%" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '选择日期'" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
></el-date-picker> |
||||
|
<!-- 时间 --> |
||||
|
<el-time-picker |
||||
|
v-if="item.type === 'time'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:placeholder="item.placeholder || '选择时间'" |
||||
|
style="width: 100%" |
||||
|
:picker-options="{ |
||||
|
selectableRange: '00:00:00 - 23:59:00', |
||||
|
}" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
format="HH:mm" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
></el-time-picker> |
||||
|
<!-- 日期时间 --> |
||||
|
<el-date-picker |
||||
|
v-if="item.type === 'dateTime'" |
||||
|
type="datetime" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:placeholder="item.placeholder || '选择日期时间'" |
||||
|
style="width: 100%" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-date-picker> |
||||
|
<!-- 日期时间 日期有限制 选择范围：当前天及以后--> |
||||
|
<el-date-picker |
||||
|
v-if="item.type === 'dateTimelimit'" |
||||
|
type="datetime" |
||||
|
v-model="searchData[item.prop]" |
||||
|
:placeholder="item.placeholder || '选择日期时间'" |
||||
|
style="width: 100%" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:pickerOptions="endDateTimeLimitPickerOptions()" |
||||
|
></el-date-picker> |
||||
|
<!-- 对象日期时间 --> |
||||
|
<el-date-picker |
||||
|
v-if="item.type === 'objectDateTime'" |
||||
|
type="datetime" |
||||
|
v-model="searchData[item.prop][item.showProp]" |
||||
|
:placeholder="item.placeholder || '选择日期'" |
||||
|
style="width: 100%" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-date-picker> |
||||
|
<!--开始时间结束时间--> |
||||
|
<div |
||||
|
class="RangeDateTime" |
||||
|
v-if="item.type === 'rangeDateTime'" |
||||
|
style="width: 100%; height: 100%" |
||||
|
> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item :prop="item.prop + '.' + item.startDate"> |
||||
|
<el-date-picker |
||||
|
type="datetime" |
||||
|
:placeholder="item.placeholder || '开始日期'" |
||||
|
v-model="searchData[item.prop][item.startDate]" |
||||
|
style="width: 100%" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:pickerOptions=" |
||||
|
startPickerOptions(searchData[item.prop][item.endDate]) |
||||
|
" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col class="line" :span="4">-</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item :prop="item.prop + '.' + item.endDate"> |
||||
|
<el-date-picker |
||||
|
type="datetime" |
||||
|
:placeholder="item.placeholder || '结束日期'" |
||||
|
v-model="searchData[item.prop][item.endDate]" |
||||
|
style="width: 100%" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:pickerOptions=" |
||||
|
endPickerOptions(searchData[item.prop][item.startDate]) |
||||
|
" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</div> |
||||
|
<!-- 开关 --> |
||||
|
<el-switch |
||||
|
v-if="item.type === 'switch'" |
||||
|
v-model="searchData[item.prop]" |
||||
|
></el-switch> |
||||
|
<!--文件上传--> |
||||
|
<currenUpload |
||||
|
v-if="item.type === 'upload'" |
||||
|
:limit="item.limit" |
||||
|
:beforeUpload="beforeAvatarUpload" |
||||
|
:searchData="searchData[item.prop]" |
||||
|
@httpRequestfiles="httpRequestfiles($event, item.prop)" |
||||
|
@handleRemove="handleRemove($event, item.prop)" |
||||
|
> |
||||
|
</currenUpload> |
||||
|
<!--文件上传——列表形式--> |
||||
|
<currenUploadList |
||||
|
v-if="item.type === 'uploadList'" |
||||
|
:limit="item.limit" |
||||
|
:picExt="item.picExt" |
||||
|
:searchData="searchData[item.prop]" |
||||
|
@uploadListView="uploadListView" |
||||
|
@changeUpload="changeUpload($event, item)" |
||||
|
@handleRemove="handleRemove($event, item.prop)" |
||||
|
> |
||||
|
</currenUploadList> |
||||
|
<!-- 缩略图上传 --> |
||||
|
<currenUploadPictureCard |
||||
|
v-if="item.type === 'uploadPictureCard'" |
||||
|
:limit="item.limit" |
||||
|
:multiple="item.multiple" |
||||
|
:picExt="item.picExt" |
||||
|
:searchData="searchData[item.prop]" |
||||
|
@changeUpload="changeUpload($event, item)" |
||||
|
@handleRemove="handleRemove($event, item.prop)" |
||||
|
> |
||||
|
</currenUploadPictureCard> |
||||
|
<el-button |
||||
|
v-if="item.type === 'button'" |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
@click="item.click(item)" |
||||
|
> |
||||
|
{{item.buttonText}} |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<slot></slot> |
||||
|
</el-form> |
||||
|
<div v-if="isHandle" class="formButton"> |
||||
|
<!-- :style="{float:item.float}" 自定义按钮显示位置 --> |
||||
|
<el-button |
||||
|
v-for="(item, index) in searchHandle" |
||||
|
:key="item.label" |
||||
|
:type="item.type" |
||||
|
:size="item.size || size" |
||||
|
:loading="loading" |
||||
|
:style="{float:item.float}" |
||||
|
@click="submitForm(index,item)" |
||||
|
>{{ item.label }}</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import currenUpload from "@/components/currenUpload"; |
||||
|
import currenUploadList from "@/components/currenUploadList"; |
||||
|
import currenUploadPictureCard from "@/components/currenUploadPictureCard"; |
||||
|
import filterSelect from "@/components/filterSelect" |
||||
|
import { getMatchRegConformValue } from "@/utils/index" |
||||
|
export default { |
||||
|
name: "currenForm", |
||||
|
components: { |
||||
|
currenUpload, |
||||
|
currenUploadList, |
||||
|
currenUploadPictureCard, |
||||
|
filterSelect |
||||
|
}, |
||||
|
props: { |
||||
|
loading: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
labelPosition: { |
||||
|
type: String, |
||||
|
default: "right", |
||||
|
}, |
||||
|
isHandle: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
inline: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
labelWidth: { |
||||
|
type: String, |
||||
|
default: "140px", |
||||
|
}, |
||||
|
size: { |
||||
|
type: String, |
||||
|
default: "mini", |
||||
|
}, |
||||
|
searchForm: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
searchHandle: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
searchData: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
searchOptions: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
rules: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
formSpan: { |
||||
|
type: Number, |
||||
|
default: 24, |
||||
|
}, |
||||
|
hide: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
restaurants: [], |
||||
|
indeterminate: false, |
||||
|
selectLoading: false, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
startPickerOptions() { |
||||
|
return function (val) { |
||||
|
return { |
||||
|
disabledDate(time) { |
||||
|
if (val) { |
||||
|
return ( |
||||
|
// time.getTime() > Date.now() || |
||||
|
// time.getTime() > new Date(that.CreateFormData.endDate).getTime() |
||||
|
time.getTime() > val |
||||
|
); |
||||
|
} |
||||
|
// return time.getTime() > Date.now(); //实现1效果 |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
|
}, |
||||
|
endPickerOptions() { |
||||
|
// const that = this; |
||||
|
return function (val) { |
||||
|
return { |
||||
|
disabledDate(time) { |
||||
|
if (val) { |
||||
|
return ( |
||||
|
// time.getTime() > Date.now() || |
||||
|
// time.getTime() < new Date(that.CreateFormData.startDate).getTime() |
||||
|
time.getTime() < val |
||||
|
); |
||||
|
} |
||||
|
// return time.getTime() > Date.now(); //实现1效果 |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
|
}, |
||||
|
// 日期时间组件，选择范围：当前天及以后 |
||||
|
endDateTimeLimitPickerOptions() { |
||||
|
return function () { |
||||
|
return { |
||||
|
disabledDate(time) { |
||||
|
return ( |
||||
|
time.getTime() < Date.now() - 8.64e7 |
||||
|
); |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
|
}, |
||||
|
selectOptions() { |
||||
|
return (val) => { |
||||
|
if (val) { |
||||
|
let options = this.$staticOptions[val]; |
||||
|
if (options) { |
||||
|
return options(); |
||||
|
} else { |
||||
|
return []; |
||||
|
} |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 单选 ， 默认设置 |
||||
|
this.searchForm.forEach(item => { |
||||
|
if (item.type === 'radio') { |
||||
|
this.searchData[item.prop] = item.value + '' |
||||
|
} |
||||
|
if (item.type === 'checkbox') { |
||||
|
this.searchData[item.prop].push(item.value) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// type=input情况下，框实时校验 |
||||
|
itemOnKeyUp(item,value){ |
||||
|
if(item.onkeyup){ |
||||
|
return item.onkeyup() |
||||
|
}else{ |
||||
|
if(value && item.validType){ |
||||
|
this.searchData[item.prop]=getMatchRegConformValue(item.validType,value,item.pointNumberFixed) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 数字类型input框onkeyup最大最小值处理 |
||||
|
typeNumberOnkeyup(item,value){ |
||||
|
if(value){ |
||||
|
// 添加pointNumberFixed 可以输入小数 |
||||
|
if (item.pointNumberFixed) { |
||||
|
let _fixed = item.pointNumberFixed ? Number(item.pointNumberFixed) : 100 |
||||
|
let reg = new RegExp(`\\d+\\.?\\d{0,${_fixed}}`); |
||||
|
let _match = String(value).match(reg) |
||||
|
this.searchData[item.prop] = _match ? _match[0] : _match |
||||
|
} else { |
||||
|
let _match = String(value).match(/\d+/)//正整数 |
||||
|
this.searchData[item.prop] = _match?_match[0]:_match |
||||
|
} |
||||
|
} |
||||
|
if(this.searchData[item.prop] > item.max){ |
||||
|
this.searchData[item.prop] = item.max |
||||
|
} |
||||
|
if(this.searchData[item.prop] && this.searchData[item.prop] < item.min){ |
||||
|
this.searchData[item.prop] = item.min |
||||
|
} |
||||
|
if(item.onkeyup)item.onkeyup() |
||||
|
}, |
||||
|
//复选框全选 |
||||
|
handleCheckAllChange(val,item) { |
||||
|
const options = [] |
||||
|
if(val){ |
||||
|
this.searchOptions[item.checkboxs].forEach(items=>{ |
||||
|
options.push(items) |
||||
|
}) |
||||
|
} |
||||
|
this.searchData[item.prop] = val ? options : []; |
||||
|
this.indeterminate = false; |
||||
|
}, |
||||
|
//取消全选 |
||||
|
handleCheckedCitiesChange(value,item) { |
||||
|
let checkedCount = value.length; |
||||
|
item.checkAll = checkedCount === this.searchOptions[item.checkboxs].length; |
||||
|
this.indeterminate = checkedCount > 0 && checkedCount < this.searchOptions[item.checkboxs].length; |
||||
|
}, |
||||
|
inputPlaceholder(val, item, type, func) { |
||||
|
if (item.valueType) { |
||||
|
if (type == "focus") { |
||||
|
console.log("focus") |
||||
|
//影响必填项，2023-1-3 placeholder不处理 |
||||
|
// val.target.placeholder = '0'; |
||||
|
// if (val.target.value != "") { |
||||
|
// val.target.placeholder = val.target.value; |
||||
|
// val.target.value = ""; |
||||
|
// } |
||||
|
} else if (type == "blur") { |
||||
|
console.log("blur") |
||||
|
// val.target.value = "0" |
||||
|
val.target.value = val.target.value.toString().replace(/[^\d.]/g,'') |
||||
|
// if (val.target.value == "") { |
||||
|
// // if (val.target.placeholder.indexOf('请输入') == -1) { |
||||
|
// val.target.value = val.target.placeholder; |
||||
|
// // } |
||||
|
// } |
||||
|
if(item.showProp){ |
||||
|
if(val.target.value != ""){func[item.prop][item.showProp]= Number(val.target.value)} |
||||
|
}else{ |
||||
|
if(val.target.value != ""){func[item.prop]= Number(val.target.value)} |
||||
|
} |
||||
|
// item.valueType |
||||
|
// ? (this.searchData[item.prop] = item.valueType( |
||||
|
// this.searchData[item.prop] |
||||
|
// )) |
||||
|
// : () => { |
||||
|
// return; |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
querySearch(queryString, cb, val) { |
||||
|
const { options, optionsValue, optionsLabel } = val; |
||||
|
let func = val.focus; |
||||
|
let data = {}; |
||||
|
if (queryString) { |
||||
|
data.filter = [ |
||||
|
{ |
||||
|
logic: "And", |
||||
|
column: optionsValue, |
||||
|
action: "Like", |
||||
|
value: queryString, |
||||
|
}, |
||||
|
// { |
||||
|
// logic: "Or", |
||||
|
// column: optionsLabel, |
||||
|
// action: "Like", |
||||
|
// value: queryString |
||||
|
// } |
||||
|
]; |
||||
|
} |
||||
|
func(data).then((res) => { |
||||
|
var restaurants = this.searchOptions["options"]; |
||||
|
var results = queryString |
||||
|
? restaurants.filter( |
||||
|
this.createFilter(queryString, optionsValue, optionsLabel) |
||||
|
) |
||||
|
: restaurants; |
||||
|
results.forEach((key) => { |
||||
|
if (typeof optionsValue === "string") { |
||||
|
key.value = key[optionsValue] + "----" + key[optionsLabel]; |
||||
|
} else { |
||||
|
key.value = |
||||
|
key[optionsValue[0]][optionsValue[1]] + |
||||
|
"----" + |
||||
|
key[optionsLabel]; |
||||
|
} |
||||
|
}); |
||||
|
// 调用 callback 返回建议列表的数据 |
||||
|
cb(results); |
||||
|
}); |
||||
|
}, |
||||
|
createFilter(queryString, optionsValue, optionsLabel) { |
||||
|
return (restaurant) => { |
||||
|
if (typeof optionsValue === "string") { |
||||
|
restaurant.value = |
||||
|
restaurant[optionsValue] + "----" + restaurant[optionsLabel]; |
||||
|
} else { |
||||
|
restaurant.value = |
||||
|
restaurant[optionsValue[0]][optionsValue[1]] + |
||||
|
"----" + |
||||
|
restaurant[optionsLabel]; |
||||
|
} |
||||
|
return ( |
||||
|
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != |
||||
|
-1 |
||||
|
); |
||||
|
}; |
||||
|
}, |
||||
|
handleSelect(item, val) { |
||||
|
let data = this.searchData; |
||||
|
if (!val.showProp) { |
||||
|
if (typeof val.optionsValue === "string") { |
||||
|
data[val.prop] = item[val.optionsValue]; |
||||
|
} else { |
||||
|
data[val.prop] = item[val.optionsValue[0]][val.optionsValue[1]]; |
||||
|
} |
||||
|
} else { |
||||
|
if (typeof val.optionsValue === "string") { |
||||
|
data[val.prop][val.showProp] = item[val.optionsValue]; |
||||
|
} else { |
||||
|
data[val.prop][val.showProp] = |
||||
|
item[val.optionsValue[0]][val.optionsValue[1]]; |
||||
|
} |
||||
|
} |
||||
|
this.$emit("push", item, val); |
||||
|
}, |
||||
|
// filterSelect点击option事件 |
||||
|
filterOptionSelectHandle(item,props,val){ |
||||
|
this.searchData[props['prop']] = val |
||||
|
this.$emit("push", item, props); |
||||
|
}, |
||||
|
// filterSelect点击清除事件 |
||||
|
filterClearHandle(item){ |
||||
|
this.searchData[item['prop']] = "" |
||||
|
this.$emit("clear",item) |
||||
|
}, |
||||
|
// selectFocus (val, item) { |
||||
|
// this.selectLoading = true; |
||||
|
// let func = item.focus |
||||
|
// func({}).then(res => { |
||||
|
// this.selectLoading = false; |
||||
|
// }) |
||||
|
// }, |
||||
|
// dataFilter (query, item) { |
||||
|
// const { options, optionsValue, optionsLabel } = item |
||||
|
// let func = item.focus |
||||
|
// let data = {} |
||||
|
// this.selectLoading = true; |
||||
|
// if (query) { |
||||
|
// data.filter = { |
||||
|
// logic: "And", |
||||
|
// column: optionsLabel, |
||||
|
// action: "Like", |
||||
|
// value: query |
||||
|
// } |
||||
|
// } |
||||
|
// setTimeout(() => { |
||||
|
// func(data).then(res => { |
||||
|
// this.selectLoading = false; |
||||
|
// }) |
||||
|
// }, 200); |
||||
|
// // this.options = []; |
||||
|
// }, |
||||
|
submitForm(val,item) { |
||||
|
this.$emit("submitForm", val, this.$refs.form,item); |
||||
|
}, |
||||
|
getDom(){ |
||||
|
return this.$refs.form |
||||
|
}, |
||||
|
handleClick(val) { |
||||
|
this.$emit("handleClick", val); |
||||
|
}, |
||||
|
httpRequestfiles(val, item) { |
||||
|
this.searchData[item].push(val); |
||||
|
}, |
||||
|
beforeAvatarUpload(val, data) { |
||||
|
const repeat = data.filter((item) => { |
||||
|
return item.name == val.name; |
||||
|
}); |
||||
|
if (repeat.length != 0) { |
||||
|
this.$errorMsg("文件重复"); |
||||
|
return false; |
||||
|
} else { |
||||
|
return true; |
||||
|
} |
||||
|
}, |
||||
|
handleRemove(val, item) { |
||||
|
this.searchData[item] = val |
||||
|
}, |
||||
|
changeUpload(val, item){ |
||||
|
// 判断上传文件是否满足类型 |
||||
|
let suffix = val.name.substring(val.name.lastIndexOf('.') + 1) |
||||
|
if (item.picExt.indexOf(suffix) === -1) { |
||||
|
this.$warningMsg('上传文件只能是 ' + item.picExt + '格式!') |
||||
|
this.searchData[item.prop] = [] |
||||
|
return false |
||||
|
} else { |
||||
|
this.searchData[item.prop].push(val); |
||||
|
} |
||||
|
}, |
||||
|
uploadListView() { |
||||
|
this.$emit('uploadListView') |
||||
|
}, |
||||
|
radioChange(prop, val) { |
||||
|
this.$emit("radioChange", prop, val) |
||||
|
}, |
||||
|
changeInput(prop, val) { |
||||
|
this.$emit("changeInput", prop, val) |
||||
|
}, |
||||
|
clearInput(prop, val) { |
||||
|
this.$emit("clearInput", prop, val) |
||||
|
}, |
||||
|
changeSelect(prop, val) { |
||||
|
this.$emit("changeSelect", prop, val) |
||||
|
}, |
||||
|
|
||||
|
restrictionRule(item, prop) { |
||||
|
|
||||
|
if(prop) { |
||||
|
console.log('item',item) |
||||
|
console.log('prop', prop) |
||||
|
console.log('this.searchData', this.searchData) |
||||
|
console.log(this.searchData[prop]) |
||||
|
if (this.searchData[prop]) { |
||||
|
return false |
||||
|
} else { |
||||
|
return true |
||||
|
} |
||||
|
} else { |
||||
|
return true |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 单一文件上传输入框——上传文件提示 |
||||
|
// handleExceed (val) { |
||||
|
// this.$warningMsg('最多上传1个文件') |
||||
|
// } |
||||
|
// //自定义select搜索 |
||||
|
// dataFilter (val, data) { |
||||
|
// if (!data) { |
||||
|
// return; |
||||
|
// } else { |
||||
|
// this.$emit(data, val); |
||||
|
// } |
||||
|
// }, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
// .formButton { |
||||
|
// text-align: right; |
||||
|
// } |
||||
|
.inputNameberClass { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.el-row { |
||||
|
::v-deep .el-form-item__content { |
||||
|
position: relative; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.RangeDateTime { |
||||
|
::v-deep .el-col { |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
.line { |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-form-item__label{ |
||||
|
color: #999 !important; |
||||
|
font-weight: normal !important; |
||||
|
} |
||||
|
</style> |
||||
@ -1,354 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
v-loading="loading" |
|
||||
element-loading-text="加载中..." |
|
||||
v-if="displayDialog" |
|
||||
:visible="true" |
|
||||
:fullscreen="true" |
|
||||
:modal="false" |
|
||||
:modal-append-to-body="false" |
|
||||
:show-close="false" |
|
||||
style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)" |
|
||||
> |
|
||||
<div class="dialogOuterTitle">{{formTitle}}</div> |
|
||||
<div v-if="active === 0" class="currentFormAndTable"> |
|
||||
<curren-Form |
|
||||
size="medium" |
|
||||
class="newAndEdiDialogForDetail" |
|
||||
:searchData="FormData" |
|
||||
:searchForm="Form" |
|
||||
:searchOptions="Options" |
|
||||
:searchHandle="Handle" |
|
||||
:rules="Rules" |
|
||||
@changeInput="changeInput" |
|
||||
@push="DataPush(arguments)" |
|
||||
@submitForm="FormClick(arguments)" |
|
||||
@radioChange="radioChange" |
|
||||
@changeSelect="changeSelect" |
|
||||
> |
|
||||
<!-- <template> |
|
||||
<div class="addDetailsContent"> |
|
||||
<div class="title">添加明细数据</div> |
|
||||
<div class="tableBox"> |
|
||||
<currenTableFlex |
|
||||
:flexTableData="flexTableData" |
|
||||
:flexSearchOptions="Options" |
|
||||
:flexTableColumns="flexTableColumns" |
|
||||
:showAddBtn="true" |
|
||||
:showAllDeleteButton="true" |
|
||||
></currenTableFlex> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> --> |
|
||||
<!-- <template v-if="showmyTable"> |
|
||||
<el-form-item class="formTable-box" prop="details"> |
|
||||
<currenTable |
|
||||
:tableData="FormData.details" |
|
||||
:tableColumns="myTableColumns" |
|
||||
:selectionTable="selectionTable" |
|
||||
:tableLoading="tableLoading" |
|
||||
:isShowIndex="isShowIndex" |
|
||||
@handleSelectionChange="handleSelectionChange" |
|
||||
> |
|
||||
<template> |
|
||||
<el-table-column |
|
||||
fixed="right" |
|
||||
label="操作" |
|
||||
width="120"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button |
|
||||
@click.native.prevent="deleteRow(scope.$index, FormData.details)" |
|
||||
type="text" |
|
||||
size="small"> |
|
||||
删除 |
|
||||
</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</template> |
|
||||
</currenTable> |
|
||||
</el-form-item> |
|
||||
</template> --> |
|
||||
</curren-Form> |
|
||||
<!-- 添加子集数据 --> |
|
||||
<div class="addDetailsContent" v-if="active === 0"> |
|
||||
<div class="title">添加明细数据</div> |
|
||||
<currenTableFlex |
|
||||
:flexTableData="flexTableData" |
|
||||
:flexSearchOptions="editOptions" |
|
||||
:flexTableColumns="flexTableColumns" |
|
||||
:showAddBtn="true" |
|
||||
:showAllDeleteButton="true" |
|
||||
></currenTableFlex> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="active === 1 && pageStatus == 'success'" class="page4"> |
|
||||
<el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'"> |
|
||||
<template slot="extra"> |
|
||||
<el-button type="primary" size="medium" @click="close" |
|
||||
>退出</el-button |
|
||||
> |
|
||||
</template> |
|
||||
</el-result> |
|
||||
</div> |
|
||||
<div v-if="active === 2 && pageStatus == 'error'" class="page4"> |
|
||||
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
|
||||
<template slot="extra"> |
|
||||
<el-button type="primary" size="medium" @click="goBack" |
|
||||
>返回</el-button |
|
||||
> |
|
||||
<el-button type="primary" size="medium" @click="close" |
|
||||
>退出</el-button |
|
||||
> |
|
||||
</template> |
|
||||
</el-result> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
<script> |
|
||||
import currenTableFlex from "@/components/currenTableFlex" |
|
||||
export default { |
|
||||
components: { |
|
||||
currenTableFlex, |
|
||||
}, |
|
||||
props: { |
|
||||
loading: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
//控制步骤 |
|
||||
active: { |
|
||||
type: Number, |
|
||||
default: 0 |
|
||||
}, |
|
||||
//结合active控制返回结果 |
|
||||
pageStatus: { |
|
||||
type: String, |
|
||||
default: "" |
|
||||
}, |
|
||||
//显示返回结果 |
|
||||
formReveal: { |
|
||||
type: Boolean, |
|
||||
}, |
|
||||
//dialog标题 |
|
||||
formTitle: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
//dialog是否显示 |
|
||||
displayDialog: { |
|
||||
type: Boolean, |
|
||||
default: () => { |
|
||||
return false |
|
||||
} |
|
||||
}, |
|
||||
//表单数据 |
|
||||
FormData: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
//绑定表单数据 |
|
||||
Form: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return [] |
|
||||
} |
|
||||
}, |
|
||||
//下拉框数据 |
|
||||
Options: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
//表单按钮 |
|
||||
Handle: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return [] |
|
||||
} |
|
||||
}, |
|
||||
//表单验证 |
|
||||
Rules: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
// 列表字段 |
|
||||
myTableColumns: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return [] |
|
||||
} |
|
||||
}, |
|
||||
showmyTable: { |
|
||||
type: Boolean, |
|
||||
default: () => { |
|
||||
return false |
|
||||
} |
|
||||
}, |
|
||||
selectionTable: { |
|
||||
type: Boolean, |
|
||||
default: () => { |
|
||||
return false |
|
||||
} |
|
||||
}, |
|
||||
tableLoading: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
isShowIndex: { |
|
||||
type: Boolean, |
|
||||
default: false, |
|
||||
}, |
|
||||
// detail表头 |
|
||||
flexTableColumns:{ |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return [] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data () { |
|
||||
return { |
|
||||
session: null, |
|
||||
flexTableData: null,//detail数据 |
|
||||
editOptions: {}, |
|
||||
} |
|
||||
}, |
|
||||
mounted () { |
|
||||
this.session = JSON.parse(JSON.stringify(this.FormData)) |
|
||||
this.flexTableData = this.FormData.details || [] |
|
||||
console.log(190,this.flexTableData,this.flexTableColumns) |
|
||||
}, |
|
||||
methods: { |
|
||||
//点击表单提交(新增或编辑) |
|
||||
FormClick (val) { |
|
||||
if (val[0] == 0) { |
|
||||
this.close() |
|
||||
} else { |
|
||||
val[1].validate((valid) => { |
|
||||
if (valid) { |
|
||||
this.$emit('FormSubmit', val); |
|
||||
} else { |
|
||||
this.$errorMsg('请按照提示继续操作') |
|
||||
return false; |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
close () { |
|
||||
const data = JSON.parse(JSON.stringify(this.session)) |
|
||||
this.$emit('close', data) |
|
||||
}, |
|
||||
goBack () { |
|
||||
this.$emit('goBack') |
|
||||
}, |
|
||||
DataPush (val) { |
|
||||
this.$emit('push', val) |
|
||||
}, |
|
||||
deleteRow(index, tableData) { |
|
||||
this.$emit('deleteRow', index, tableData) |
|
||||
}, |
|
||||
radioChange(prop,val){ |
|
||||
this.$emit('radioChange', prop, val) |
|
||||
}, |
|
||||
changeInput(prop, val) { |
|
||||
this.$emit("changeInput", prop, val) |
|
||||
}, |
|
||||
//点击selection框 |
|
||||
handleSelectionChange(val) { |
|
||||
this.$emit("handleSelectionChange", val); |
|
||||
}, |
|
||||
// form表单下拉框change事件 |
|
||||
changeSelect(prop,val ) { |
|
||||
this.$emit("changeSelect", prop, val) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
::v-deep .el-dialog__header{ |
|
||||
padding: 0 !important; |
|
||||
} |
|
||||
::v-deep .el-dialog__body{ |
|
||||
padding-top: 0; |
|
||||
} |
|
||||
.dialogOuterTitle{ |
|
||||
position: relative; |
|
||||
padding: 20px 0; |
|
||||
font-size: 18px; |
|
||||
height: 60px; |
|
||||
overflow: hidden; |
|
||||
color: #333; |
|
||||
font-weight: bold; |
|
||||
padding-left: 18px; |
|
||||
|
|
||||
&::before{ |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 22px; |
|
||||
width: 5px; |
|
||||
height: 22px; |
|
||||
background: #1890ff; |
|
||||
} |
|
||||
} |
|
||||
.currentFormAndTable{ |
|
||||
display: flex; |
|
||||
height: calc(100% - 120px); |
|
||||
} |
|
||||
|
|
||||
::v-deep .newAndEdiDialogForDetail { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
width: 70%; |
|
||||
height: calc(100% - 10px); |
|
||||
.el-form { |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-content: flex-start; |
|
||||
flex-wrap: wrap; |
|
||||
overflow: hidden; |
|
||||
overflow-y: auto; |
|
||||
padding-right: 40px; |
|
||||
} |
|
||||
.screen-push { |
|
||||
color: rgb(64, 158, 255); |
|
||||
span { |
|
||||
cursor: pointer; |
|
||||
&:hover { |
|
||||
color: blue; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.formButton { |
|
||||
position: fixed; |
|
||||
right: 60px; |
|
||||
bottom: 40px; |
|
||||
} |
|
||||
.formTable-box { |
|
||||
height: 40%; |
|
||||
|
|
||||
.el-form-item__content { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
overflow: hidden; |
|
||||
margin: 0 !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.addDetailsContent{ |
|
||||
background: #f8f8f8; |
|
||||
padding: 20px; |
|
||||
height: calc(100% - 10px); |
|
||||
.currenTableFlex{ |
|
||||
height: calc(100% - 20px); |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue