16 changed files with 1360 additions and 446 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> |
|||
@ -0,0 +1,112 @@ |
|||
<template> |
|||
<div class="page-box" v-loading="Loading.tableLoading"> |
|||
<tablePagination |
|||
v-if="apiColumns_Table" |
|||
:currenButtonData="currenButtonData" |
|||
:tableData="tableData" |
|||
:tableLoading="Loading.tableLoading" |
|||
:tableColumns="apiColumns_Table" |
|||
@rowDrop="rowDrop" |
|||
:totalCount="totalCount" |
|||
:multipleSelection="multipleSelection" |
|||
:MaxResultCount="PageListParams.MaxResultCount" |
|||
@topbutton="topbutton" |
|||
@inlineDialog="inlineDialog" |
|||
@sortChange="sortChange" |
|||
@alertoldSkipCount="alertoldSkipCount" |
|||
@alterResultCount="alterResultCount" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
:currentPageProps="oldSkipCount" |
|||
:quicklySearchOption="quicklySearchOption" |
|||
@quicklySearchClick="quicklySearchClick" |
|||
@quicklySearchClear="quicklySearchClear" |
|||
:primarySearchOption="primarySearchOption" |
|||
@overallSearchFormClick="overallSearchFormClick" |
|||
:httpOverallSearchData="httpOverallSearchData" |
|||
:buttonOperationList_left="buttonOperationClick_leftBase" |
|||
@buttonOperationClick_left="buttonOperationClick_left" |
|||
:buttonOperationList_right="(data)=>{return buttonOperationList_rightApi(data,'edit')}" |
|||
@buttonOperationClick_right="buttonOperationClick_right" |
|||
></tablePagination> |
|||
<!-- :buttonOperationList_left="buttonOperationClick_leftBase" |
|||
@buttonOperationClick_left="buttonOperationClick_left" --> |
|||
<curren-Drawer |
|||
ref="currenDrawer_Ref" |
|||
:title="apiColumns_DesTions" |
|||
@rowDrop="rowDrop" |
|||
:tableColumns="apiColumns_DetailsTable" |
|||
:tabsDesTions="apiColumns_DesTions" |
|||
:DrawerLoading="Loading.DrawerLoading" |
|||
:drawer="displayDialog.detailsDialog" |
|||
:propsData="propsData" |
|||
:Butttondata="[]" |
|||
@drawerShut="(val) => (displayDialog.detailsDialog = val)" |
|||
@drawerbutton="drawerbutton" |
|||
@handleCommand="drawerHandle" |
|||
@close-value="closeValue" |
|||
:totalCount="totalCountDetails" |
|||
:currentPage="oldSkipCountDetails" |
|||
:MaxResultCount="MaxResultCountDetails" |
|||
@alterResultCountDetails="alterResultCountDetails" |
|||
@alertoldSkipCountDetails="alertoldSkipCountDetails" |
|||
:buttonOperationList_left="operationButtonsDetail" |
|||
></curren-Drawer> |
|||
<!-- 导出弹窗 --> |
|||
<exportDrop |
|||
v-if="displayDialog.exportDialog" |
|||
@closeDialog="closeExportDrop" |
|||
@exportDropSubmit="exportDropSubmit" |
|||
></exportDrop> |
|||
<!-- Api新增 --> |
|||
<addEditFromApiPop |
|||
v-if="displayDialog.addEditApiDialog" |
|||
:handleType="addEditApiType" |
|||
@closePop="closeAddEditApiPop" |
|||
></addEditFromApiPop> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { tableMixins } from "@/mixins/TableMixins"; |
|||
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
|||
import { drawerMixins } from "@/mixins/drawerMixins" |
|||
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins"; |
|||
import { mixins } from "@/mixins/mixins"; |
|||
import { filterSelectMixins } from '@/mixins/filter-Select' |
|||
import { getToken } from '@/utils/auth' |
|||
|
|||
|
|||
export default { |
|||
name: "IncomingData", |
|||
mixins: [ |
|||
tableMixins, |
|||
LoadingMixins, |
|||
drawerMixins, |
|||
TableHeaderMixins, |
|||
mixins, |
|||
filterSelectMixins, |
|||
], |
|||
data() { |
|||
return { |
|||
//常用按钮数据 |
|||
currenButtonData: [ |
|||
this.defaultAddBtn({ |
|||
name:'addFromApi' |
|||
}),//新增 |
|||
this.defaultExportBtn({ |
|||
isRedundance:true, |
|||
isDetailExport:true |
|||
}),//导出 |
|||
this.defaultFieldSettingBtn(),//字段设置 |
|||
this.defaultFreshBtn(),//刷新 |
|||
this.defaultFilterBtn(),//筛选 |
|||
], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.paging(); |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/styles/basicData.scss"; |
|||
</style> |
|||
Loading…
Reference in new issue