You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
367 lines
11 KiB
367 lines
11 KiB
<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)"
|
|
v-loading="Loading.addEditApiLoading"
|
|
>
|
|
<!-- 数据填写 -->
|
|
<div v-if="active === 0" style="height: 100%;">
|
|
<div class="centerInnerContent" :class="{'hasDetails' : flexTableData}">
|
|
<!-- 左侧主表 -->
|
|
<div class="leftMainForm">
|
|
<div class="dialogOuterTitle">{{formTitle}} 【主表信息】</div>
|
|
<!-- 表单 -->
|
|
<el-form
|
|
class="addEditFrom"
|
|
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"
|
|
v-if="item.label.toUpperCase() != 'DETAILS'"
|
|
>
|
|
<!-- 数值 -->
|
|
<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 item.enums_list"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
|
|
<!-- 文本框 -->
|
|
<!-- <el-input
|
|
v-else
|
|
type="textarea"
|
|
autosize
|
|
resize="none"
|
|
v-model="formData[item.prop]"
|
|
:placeholder="item.placeholder || '请输入' + item.label"
|
|
:disabled="Boolean(item.disabled)"
|
|
></el-input> -->
|
|
<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>
|
|
</div>
|
|
<!-- 右侧子表 -->
|
|
<div class="rightDetailTable" v-if="flexTableData">
|
|
<div class="dialogOuterTitle">{{formTitle}} 【子表信息】</div>
|
|
<currenTableFlex
|
|
ref="currenTableFlex_Ref"
|
|
:isShowIndex="true"
|
|
:isEditable="true"
|
|
:setUTableHeight="230"
|
|
class="currenTableFlex"
|
|
:flexTableData="flexTableData"
|
|
:flexTableColumns="flexTableColumns"
|
|
></currenTableFlex>
|
|
</div>
|
|
</div>
|
|
<!-- 操作按钮 -->
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="show = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitHandle()">确 定</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 成功提示 -->
|
|
<div v-if="active === 1">
|
|
<el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'">
|
|
<template slot="extra">
|
|
<el-button type="primary" size="medium" @click="exitHandle"
|
|
>退出</el-button
|
|
>
|
|
</template>
|
|
</el-result>
|
|
</div>
|
|
<!-- 错误提示 -->
|
|
<div v-if="active === 2">
|
|
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'">
|
|
<template slot="extra">
|
|
<el-button type="primary" size="medium" @click="changeActive(0)"
|
|
>返回</el-button
|
|
>
|
|
<el-button type="primary" size="medium" @click="exitHandle"
|
|
>退出</el-button
|
|
>
|
|
</template>
|
|
</el-result>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { ApiTypePost, ApiTypePut } from "@/api/wms-api"
|
|
import { LoadingMixins } from "@/mixins/LoadingMixins";
|
|
import currenTableFlex from "@/components/currenTableFlex"
|
|
import * as allUrlOption from '@/utils/baseData/urlOption'
|
|
export default {
|
|
name:"addEditFromApiPop",
|
|
mixins:[ LoadingMixins ],
|
|
components: { currenTableFlex },
|
|
props: {
|
|
// 编辑行数据
|
|
editRowData:{
|
|
type: Object,
|
|
default: null
|
|
},
|
|
// 操作类型：add/edit
|
|
handleType:{
|
|
type: String,
|
|
default: null
|
|
},
|
|
// 提交事件
|
|
submitForm:{
|
|
type:Function,
|
|
default:null
|
|
},
|
|
// 特殊的【新增】接口，如果没有就走路由下的配置文件
|
|
addSubmitUrl:{
|
|
type: String,
|
|
default: null
|
|
},
|
|
// 特殊的【编辑】接口，如果没有就走路由下的配置文件
|
|
editSubmitUrl:{
|
|
type: String,
|
|
default: null
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
//明细-列表
|
|
URLOption_detailList:allUrlOption[this.$route.name].detailListURL,
|
|
// 当前的dto
|
|
currentDtos:this.$store.getters.dtoColumnTypes[this.$route.name],
|
|
active:0,//显示内容：0表单 1成功 2失败
|
|
show:true,
|
|
formTitle:null,//form名称
|
|
formData:{},//表单数据
|
|
formItemData:null,//表单item配置
|
|
formRules: {},//表单验证
|
|
flexTableData:null,//子表table
|
|
// flexTableColumns:null,//子表table列
|
|
flexTableColumns: null,
|
|
}
|
|
},
|
|
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 _dtoList_type = this.handleType == 'add' ? 'C' : 'U'
|
|
let _dtoList = this.currentDtos[_dtoList_type].dtoList
|
|
// 除去子表信息
|
|
let _formItems = _dtoList.filter(item=>{
|
|
return item.prop.toUpperCase() != 'DETAILS'
|
|
})
|
|
if(_formItems)this.formItemData = _formItems
|
|
// 编辑格式：特殊处理默认值
|
|
if(this.handleType == 'edit' && this.editRowData){
|
|
this.formData = JSON.parse(JSON.stringify(this.editRowData))
|
|
}else{
|
|
this.formData = {}
|
|
}
|
|
// 子表数据
|
|
let _list = _dtoList.filter(item=>{
|
|
return item.prop.toUpperCase() == 'DETAILS'
|
|
})
|
|
if(_list && _list.length > 0){
|
|
if(this.handleType == 'edit'){
|
|
this.flexTableData = this.formData[_list[0].prop]
|
|
}else{
|
|
this.flexTableData = []
|
|
}
|
|
}
|
|
// 子表数据列
|
|
if(this.URLOption_detailList){
|
|
let _detailApi = this.URLOption_detailList.slice(0,this.URLOption_detailList.lastIndexOf('/'))
|
|
let _detailDtos = this.$store.getters.dtoColumnTypes[_detailApi].S.dtoList
|
|
this.flexTableColumns = _detailDtos
|
|
}
|
|
|
|
// 表单验证格式化
|
|
this.formRules={}
|
|
_dtoList.forEach(item=>{
|
|
if(item.isRequired){
|
|
this.formRules[item.prop] = [{ required: true, trigger: "blur", message: "不可为空" }]
|
|
}
|
|
})
|
|
},
|
|
// 关闭弹窗
|
|
close() {
|
|
this.show = false
|
|
this.$emit("closePop")
|
|
},
|
|
// 提交表单
|
|
submitHandle(){
|
|
this.$refs.addEditFrom_Ref.validate((valid) => {
|
|
if(this.submitForm){
|
|
this.submitForm(valid,this.formData,this.handleType,this.formItemData,this.formRules)
|
|
return
|
|
}
|
|
this.formData.details = this.flexTableData
|
|
this.Loading.addEditApiLoading = true
|
|
if (valid) {
|
|
// 新增
|
|
if(this.handleType == 'add'){
|
|
ApiTypePost(
|
|
this.formData,
|
|
this.currentDtos.C.actionsUrl
|
|
).then(res => {
|
|
this.changeActive(1)
|
|
}).catch(err => {
|
|
this.changeActive(2)
|
|
})
|
|
}
|
|
// 编辑
|
|
else{
|
|
ApiTypePut(
|
|
this.formData,
|
|
this.formData.id,
|
|
this.currentDtos.U.actionsUrl
|
|
).then(res => {
|
|
this.changeActive(1)
|
|
}).catch(err => {
|
|
this.changeActive(2)
|
|
})
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 结果页退出
|
|
exitHandle(){
|
|
this.close()
|
|
if(this.active == '1')this.oldSkipCount = 1;
|
|
this.show = false
|
|
this.$emit("exitAfterHandle")
|
|
this.$nextTick(()=>{
|
|
this.active = 0
|
|
})
|
|
},
|
|
// 更改页面步骤
|
|
changeActive(sta){
|
|
this.active = sta
|
|
this.Loading.addEditApiLoading = 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-row{
|
|
width: 100%;
|
|
}
|
|
::v-deep .addEditFrom{
|
|
height: calc(100%);
|
|
overflow: auto;
|
|
}
|
|
::v-deep .el-form-item__label{
|
|
float: unset;
|
|
}
|
|
|
|
::v-deep .el-input,.el-select,.el-input-number{
|
|
width: 100% !important;
|
|
}
|
|
|
|
.dialog-footer{
|
|
padding-top: 15px;
|
|
text-align: right;
|
|
}
|
|
.centerInnerContent{
|
|
height: calc(100% - 60px);
|
|
overflow: auto;
|
|
|
|
.leftMainForm{
|
|
height: calc(100% - 60px);
|
|
}
|
|
|
|
&.hasDetails{
|
|
display: flex;
|
|
|
|
.leftMainForm{
|
|
width: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rightDetailTable{
|
|
height: calc(100% - 60px);
|
|
width: calc(50%);
|
|
padding-left:40px;
|
|
border-left: #ddd solid 1px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|