5 changed files with 1659 additions and 328 deletions
@ -0,0 +1,976 @@ |
|||
<template> |
|||
<Dialog |
|||
:title="dialogTitle" |
|||
v-model="dialogVisible" |
|||
:width="dialogWidth" |
|||
:close-on-click-modal="false" |
|||
:vLoading="formLoading" |
|||
> |
|||
|
|||
<div |
|||
style="max-height: 60vh;overflow-y: auto;"> |
|||
<Form |
|||
ref="formRef" |
|||
:rules="rules" |
|||
:schema="formSchema" |
|||
:is-col="true" |
|||
@opensearchTable="opensearchTable" |
|||
@hiddenFilterButton="hiddenSearchTableFilterButton" |
|||
@changeDialogWidth="changeDialogWidth" |
|||
@clearSearchInput="clearSearchInput" |
|||
@onChange="onChange" |
|||
@onBlur="onBlur" |
|||
@onEnter="onEnter" |
|||
> |
|||
<template #crontab="formSchema1" v-if="fromeWhere == 'countPlan'"> |
|||
|
|||
<crontab v-model="formSchema1.crontab" :disabled="formSchema?.find(item=>item.field == 'crontab')?.componentProps?.disabled "/> |
|||
</template> |
|||
<template #type="formSchema" v-if="fromeWhere == 'countPlan'"> |
|||
<el-select |
|||
v-model="formSchema.type" |
|||
placeholder="选择盘点类型" |
|||
@change="selectChange('type', $event)" |
|||
v-if="!isDetail" |
|||
> |
|||
<el-option |
|||
v-for="dict in getStrDictOptions(DICT_TYPE.COUNT_TYPE)" |
|||
:key="dict.value" |
|||
:label="dict.label" |
|||
:value="dict.value" |
|||
/> |
|||
</el-select> |
|||
<el-select |
|||
v-model="formSchema.type" |
|||
placeholder="选择盘点范围类型" |
|||
@change="selectChangeDetail('type', $event,formSchema)" |
|||
v-if="isDetail" |
|||
> |
|||
<el-option |
|||
v-for="dict in getStrDictOptions(DICT_TYPE.COUNT_SCOPE_TYPE)" |
|||
:key="dict.value" |
|||
:label="dict.label" |
|||
:value="dict.value" |
|||
/> |
|||
</el-select> |
|||
</template> |
|||
<template #value="formSchema" v-if="fromeWhere == 'countPlan'"> |
|||
<el-select |
|||
v-model="formSchema.value" |
|||
placeholder="选择盘点范围值" |
|||
v-if="isDetail&& formTypeDetail =='Select'" |
|||
> |
|||
<el-option |
|||
v-for="dict in countPlanAllList" |
|||
:key="dict.value" |
|||
:label="dict.label" |
|||
:value="dict.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-model="formSchema.value" v-if="isDetail && formTypeDetail =='InputString'"/> |
|||
</template> |
|||
</Form> |
|||
<div class="table" v-if="isBusiness && formType == 'create' && fromeWhere != 'countPlan'"> |
|||
<TableForm |
|||
ref="tableFormRef" |
|||
class="w-[100%]" |
|||
:maxHeight = "490" |
|||
:tableFields="tableAllSchemas.tableFormColumns" |
|||
:tableData="tableData" |
|||
:tableFormRules="tableFormRules" |
|||
:isShowButton="isShowButton" |
|||
:isShowReduceButton="isShowReduceButton" |
|||
:isShowReduceButtonSelection="isShowReduceButtonSelection" |
|||
@handleAddTable="handleAddTable" |
|||
@handleDeleteTable="handleDeleteTable" |
|||
@tableSelectionChange="tableSelectionChange" |
|||
@tableSelectionDelete="tableSelectionDelete" |
|||
@extendedButtonsClick="extendedButtonsClick" |
|||
@formSelectChange="formSelectChange" |
|||
@formSelectvVisibleChange="formSelectvVisibleChange" |
|||
@tableSortChange="tableSortChange" |
|||
@selectCallback="selectCallback" |
|||
@handleTableSelect="handleTableSelect" |
|||
@inpuFocus="inpuFocus" |
|||
@buttonOperationClick="buttonOperationClick" |
|||
@inputStringBlur="inputStringBlur" |
|||
@inputNumberChange="inputNumberChange" |
|||
@tableFormSelectOnBlur="tableFormSelectOnBlur" |
|||
@formFormDateChange="formFormDateChange" |
|||
@clearInput='clearInput' |
|||
@inputFocusPlan='inputFocusPlan' |
|||
> |
|||
<template v-slot="{row}"> |
|||
<slot :row="row"></slot> |
|||
</template> |
|||
</TableForm> |
|||
</div> |
|||
<div v-if="isBusiness && formType == 'create' && fromeWhere == 'countPlan'"> |
|||
<TableFormCountPlan |
|||
:tableFields="tableAllSchemas.tableFormColumns" |
|||
:tableData="tableData" |
|||
:countScopeType="countScopeType" |
|||
:tableFormRules="tableFormRules" |
|||
ref="tableFormRef" |
|||
@tableFormChange="tableFormChange" |
|||
@handleAddTable="handleAddTable" |
|||
@handleDeleteTable="handleDeleteTable" |
|||
@inpuFocus="inpuFocus" |
|||
/> |
|||
|
|||
</div> |
|||
<Form |
|||
ref="formRef1" |
|||
:rules="rules" |
|||
:schema="CountPlanMain1FormAllSchemas" |
|||
:is-col="true" |
|||
style="margin-top:20px" |
|||
|
|||
@opensearchTable="opensearchTable1" |
|||
@hiddenFilterButton="hiddenSearchTableFilterButton" |
|||
@changeDialogWidth="changeDialogWidth" |
|||
@clearSearchInput="clearSearchInput" |
|||
@onChange="onChange" |
|||
@onBlur="onBlur" |
|||
@onEnter="onEnter" |
|||
/> |
|||
</div> |
|||
<template #footer> |
|||
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" /> |
|||
</template> |
|||
|
|||
</Dialog> |
|||
<SearchTable ref="searchTableRef" :showSearchTableQueryFields="showSearchTableQueryFields" @searchTableSuccess="searchTableSuccess" /> |
|||
<SearchTable ref="searchTableRef1" :showSearchTableQueryFields="showSearchTableQueryFields" @searchTableSuccess="searchTableSuccess1" /> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { SearchTable } from '@/components/SearchTable' |
|||
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
|||
import ButtonBase from '@/components/XButton/src/ButtonBase.vue' |
|||
import TableForm from '@/components/TableForm/src/TableForm.vue' |
|||
import TableFormCountPlan from '@/components/TableFormCountPlan/src/TableFormCountPlan.vue' |
|||
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' |
|||
import { debounce } from 'lodash-es' |
|||
|
|||
const props = defineProps({ |
|||
// 显示窗口宽度设置 |
|||
basicFormWidth: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示TableForm 新增/删除按钮 |
|||
isShowButton: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示删除按钮--多选 |
|||
isShowReduceButtonSelection:{ |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 是否显示tableForm 删除按钮 |
|||
isShowReduceButton: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 校验rules |
|||
rules: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// 表单，列表 相关信息 |
|||
formAllSchemas: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// 列表 相关信息 |
|||
tableAllSchemas: { |
|||
type: Array, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// 列表数据 |
|||
tableData: { |
|||
type: Array, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
tableFormRules: { |
|||
type: Array, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// 查询参数 |
|||
// searchTableParams: { |
|||
// type: Array, |
|||
// required: false, |
|||
// default: null |
|||
// }, |
|||
// API——Vo |
|||
apiVo: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// API——创建 |
|||
apiCreate: { |
|||
type: Function, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// API——编辑 |
|||
apiUpdate: { |
|||
type: Function, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// 是否是业务表单（区分是不显示tableForm） |
|||
isBusiness: { |
|||
type: Boolean, |
|||
required: true, |
|||
default: true |
|||
}, |
|||
// 表单form |
|||
form: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// 详情数据 |
|||
detailData: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
// // 主表参数 |
|||
// masterParmas: { |
|||
// type: Object, |
|||
// required: false, |
|||
// default: null |
|||
// }, |
|||
// 来源 countPlan盘点计划进入 |
|||
fromeWhere: { |
|||
type: String, |
|||
required: false, |
|||
default: '' |
|||
}, |
|||
// 盘点范围类型 |
|||
countScopeType: { |
|||
type: Array, |
|||
required: false, |
|||
default: null |
|||
}, |
|||
// 是否从详情进入 |
|||
isDetail: { |
|||
type: Boolean, |
|||
required: false, |
|||
default: false |
|||
}, |
|||
//盘点详情子表新增的时候判断盘点范围值显示输入框还是下拉框 |
|||
formTypeDetail: { |
|||
type: String, |
|||
required: false, |
|||
default: 'InputString' |
|||
}, |
|||
//盘点详情子表新增的时候判断盘点范围值的下拉列表 |
|||
countPlanAllList: { |
|||
type: Array, |
|||
required: false, |
|||
default: null |
|||
}, |
|||
// 窗体底部按钮 显示or隐藏：保存，关闭 |
|||
isShowFooterButtton: { |
|||
type: Boolean, |
|||
required: false, |
|||
default: true |
|||
}, |
|||
// 明细数据长度校验 |
|||
tableFormDataLength: { |
|||
type: Boolean, |
|||
required: false, |
|||
default: true |
|||
}, |
|||
// 底部按钮集合 |
|||
footButttondata: { |
|||
type: Array, |
|||
required: false, |
|||
default: null |
|||
}, |
|||
//是否直接展示搜索表单 |
|||
isOpenSearchTable:{ |
|||
type: Boolean, |
|||
required: false, |
|||
default: false |
|||
}, |
|||
|
|||
fieldTableColumn:{ |
|||
type: String, |
|||
required: false, |
|||
default: '' |
|||
}, |
|||
//表单中展示的数据，需要用searchTable中字段计算 |
|||
/***[{ |
|||
formField:form中对应的field, |
|||
tableField:searchtable中对应的field, |
|||
}]*/ |
|||
sumFormDataField:{ |
|||
type: Array, |
|||
required: false, |
|||
default: null |
|||
}, |
|||
sumFormDataByForm:{ |
|||
type:Function, |
|||
required: false, |
|||
default: null |
|||
}, |
|||
sumFormDataByTableCustom:{ |
|||
type:Function, |
|||
required: false, |
|||
default: null |
|||
}, |
|||
showSearchTableQueryFields:{ |
|||
type: Array, |
|||
required: false, |
|||
default: [] |
|||
}, |
|||
// 表单，列表 相关信息 |
|||
CountPlanMain1FormAllSchemas: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
} |
|||
}) |
|||
|
|||
const { t } = useI18n() // 国际化 |
|||
const message = useMessage() // 消息弹窗 |
|||
const dialogWidth = ref() |
|||
if (props.basicFormWidth) { |
|||
dialogWidth.value = props.basicFormWidth + '%' |
|||
} else { |
|||
dialogWidth.value = props.isBusiness ? '60%' : '40%' |
|||
} |
|||
|
|||
const dialogVisible = ref(false) // 弹窗的是否展示 |
|||
const dialogTitle = ref('') // 弹窗的标题 |
|||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
|||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
|||
|
|||
const formRef = ref() // 表单 Ref |
|||
const formRef1 = ref() // 表单 Ref |
|||
const formSchema = ref(props.formAllSchemas?.formSchema) |
|||
const CountPlanMain1FormAllSchemas = ref(props.CountPlanMain1FormAllSchemas?.formSchema) |
|||
const tableAllSchemas = ref(props.tableAllSchemas) |
|||
const tableFormRules = ref(props.tableFormRules) |
|||
console.log(111,formSchema) |
|||
|
|||
// 列表-按钮 |
|||
// const buttondata = [ |
|||
// defaultButtons.mainListEditBtn(null), // 编辑 |
|||
// defaultButtons.mainListDeleteBtn(null) |
|||
// ] |
|||
// // 列表-操作按钮事件 |
|||
// const buttonTableClick = async (val, row) => { |
|||
// if (val == 'edit') { |
|||
|
|||
// } else if (val == 'delete') { |
|||
|
|||
// } else { |
|||
// } |
|||
// } |
|||
|
|||
/** 弹层操作 */ |
|||
// formField form表单中的字段 |
|||
// searchField 查询列表中的字段 |
|||
// type 发起事件位置 type=tableForm 是明细中发起的 否则 为主表发起的 |
|||
// searchCondition 查询条件 |
|||
const searchTableRef = ref() |
|||
const searchTableRef1 = ref() |
|||
const opensearchTable = ( |
|||
formField, |
|||
searchField, |
|||
searchTitle, |
|||
searchAllSchemas, |
|||
searchPage, |
|||
searchCondition, |
|||
multiple, |
|||
type, |
|||
row, |
|||
isConcatDetailSchemas=false, |
|||
searchDetailSchemas: any |
|||
) => { |
|||
const _searchCondition = {} |
|||
// 判断查询条件中，是否存在指向主表的数据 |
|||
if (searchCondition && searchCondition.length > 0) { |
|||
// 转换筛选条件所需 |
|||
let filters: any[] = [] |
|||
for (var i=0; i< searchCondition.length; i++ ) { |
|||
// searchCondition.forEach((item) => { |
|||
// 查询条件为主表某字段，需要赋值主表数据，数据来源是详情的，赋值需要从row中获取 |
|||
if (searchCondition[i].isMainValue) { |
|||
_searchCondition[searchCondition[i].key] = formRef.value.formModel[searchCondition[i].value] |
|||
? formRef.value.formModel[searchCondition[i].value] |
|||
: props.detailData |
|||
? props.detailData[searchCondition[i].value] |
|||
: row |
|||
? row[searchCondition[i].value] |
|||
: '' |
|||
// 是否含有空参数情况 |
|||
let isNull = false |
|||
if (_searchCondition[searchCondition[i].key] == '' || _searchCondition[searchCondition[i].key] == undefined) { |
|||
isNull = true |
|||
} |
|||
if (isNull) { |
|||
message.warning(searchCondition[i].message?searchCondition[i].message:'前置条件未选择！') |
|||
return |
|||
} |
|||
}else if(searchCondition[i].isTableRowValue){ |
|||
if(searchCondition[i].required){ |
|||
if (row[searchCondition[i].value] == '' ||row[searchCondition[i].value] == undefined) { |
|||
message.warning(searchCondition[i].message?searchCondition[i].message:'前置条件未选择！') |
|||
return |
|||
} |
|||
} |
|||
row[searchCondition[i].value] |
|||
//查询当前table表数据的值 |
|||
_searchCondition[searchCondition[i].key] = row[searchCondition[i].value] |
|||
} else { |
|||
// 扩展 转换为筛选条件进行查询 |
|||
if (searchCondition[i].isSearch) { |
|||
if (searchCondition[i].isFormModel) { |
|||
//用formModel中的值 |
|||
if(searchCondition[i].required){ |
|||
if (formRef.value.formModel[searchCondition[i].value] == '' ||formRef.value.formModel[searchCondition[i].value] == undefined) { |
|||
message.warning(searchCondition[i].message?searchCondition[i].message:'前置条件未选择！') |
|||
return |
|||
} |
|||
} |
|||
filters.push({ |
|||
action: searchCondition[i].action, |
|||
column: searchCondition[i].key, |
|||
value: formRef.value.formModel[searchCondition[i].value] |
|||
}) |
|||
}else{ |
|||
filters.push({ |
|||
action: searchCondition[i].action, |
|||
column: searchCondition[i].key, |
|||
value: searchCondition[i].value |
|||
}) |
|||
} |
|||
|
|||
} else { |
|||
_searchCondition[searchCondition[i].key] = searchCondition[i].value |
|||
} |
|||
} |
|||
} |
|||
if (filters.length > 0) { |
|||
_searchCondition.isSearch = true |
|||
_searchCondition.filters = filters |
|||
} |
|||
} |
|||
const _searchTableTitle = searchTitle |
|||
const _searchTableAllSchemas = searchAllSchemas |
|||
const _searchTablePage = searchPage |
|||
searchTableRef.value.open( |
|||
_searchTableTitle, |
|||
_searchTableAllSchemas, |
|||
_searchTablePage, |
|||
formField, |
|||
searchField, |
|||
multiple, |
|||
type, |
|||
row, |
|||
_searchCondition, |
|||
undefined, |
|||
isConcatDetailSchemas, |
|||
searchDetailSchemas |
|||
) |
|||
} |
|||
const opensearchTable1 = ( |
|||
formField, |
|||
searchField, |
|||
searchTitle, |
|||
searchAllSchemas, |
|||
searchPage, |
|||
searchCondition, |
|||
multiple, |
|||
type, |
|||
row, |
|||
isConcatDetailSchemas=false, |
|||
searchDetailSchemas: any |
|||
) => { |
|||
console.log(formField,searchField,searchTitle,searchAllSchemas,searchPage) |
|||
const _searchCondition = {} |
|||
// 判断查询条件中，是否存在指向主表的数据 |
|||
if (searchCondition && searchCondition.length > 0) { |
|||
// 转换筛选条件所需 |
|||
let filters: any[] = [] |
|||
for (var i=0; i< searchCondition.length; i++ ) { |
|||
// searchCondition.forEach((item) => { |
|||
// 查询条件为主表某字段，需要赋值主表数据，数据来源是详情的，赋值需要从row中获取 |
|||
if (searchCondition[i].isMainValue) { |
|||
_searchCondition[searchCondition[i].key] = formRef1.value.formModel[searchCondition[i].value] |
|||
? formRef1.value.formModel[searchCondition[i].value] |
|||
: props.detailData |
|||
? props.detailData[searchCondition[i].value] |
|||
: row |
|||
? row[searchCondition[i].value] |
|||
: '' |
|||
// 是否含有空参数情况 |
|||
let isNull = false |
|||
if (_searchCondition[searchCondition[i].key] == '' || _searchCondition[searchCondition[i].key] == undefined) { |
|||
isNull = true |
|||
} |
|||
if (isNull) { |
|||
message.warning(searchCondition[i].message?searchCondition[i].message:'前置条件未选择！') |
|||
return |
|||
} |
|||
}else if(searchCondition[i].isTableRowValue){ |
|||
if(searchCondition[i].required){ |
|||
if (row[searchCondition[i].value] == '' ||row[searchCondition[i].value] == undefined) { |
|||
message.warning(searchCondition[i].message?searchCondition[i].message:'前置条件未选择！') |
|||
return |
|||
} |
|||
} |
|||
row[searchCondition[i].value] |
|||
//查询当前table表数据的值 |
|||
_searchCondition[searchCondition[i].key] = row[searchCondition[i].value] |
|||
} else { |
|||
// 扩展 转换为筛选条件进行查询 |
|||
if (searchCondition[i].isSearch) { |
|||
if (searchCondition[i].isFormModel) { |
|||
//用formModel中的值 |
|||
if(searchCondition[i].required){ |
|||
if (formRef1.value.formModel[searchCondition[i].value] == '' ||formRef1.value.formModel[searchCondition[i].value] == undefined) { |
|||
message.warning(searchCondition[i].message?searchCondition[i].message:'前置条件未选择！') |
|||
return |
|||
} |
|||
} |
|||
filters.push({ |
|||
action: searchCondition[i].action, |
|||
column: searchCondition[i].key, |
|||
value: formRef1.value.formModel[searchCondition[i].value] |
|||
}) |
|||
}else{ |
|||
filters.push({ |
|||
action: searchCondition[i].action, |
|||
column: searchCondition[i].key, |
|||
value: searchCondition[i].value |
|||
}) |
|||
} |
|||
|
|||
} else { |
|||
_searchCondition[searchCondition[i].key] = searchCondition[i].value |
|||
} |
|||
} |
|||
} |
|||
if (filters.length > 0) { |
|||
_searchCondition.isSearch = true |
|||
_searchCondition.filters = filters |
|||
} |
|||
} |
|||
const _searchTableTitle = searchTitle |
|||
const _searchTableAllSchemas = searchAllSchemas |
|||
const _searchTablePage = searchPage |
|||
searchTableRef1.value.open( |
|||
_searchTableTitle, |
|||
_searchTableAllSchemas, |
|||
_searchTablePage, |
|||
formField, |
|||
searchField, |
|||
multiple, |
|||
type, |
|||
row, |
|||
_searchCondition, |
|||
undefined, |
|||
isConcatDetailSchemas, |
|||
searchDetailSchemas |
|||
) |
|||
} |
|||
|
|||
//修改 searchTable 弹窗宽度 |
|||
const changeDialogWidth = (width)=>{ |
|||
searchTableRef.value.changeDialogWidth(width) |
|||
} |
|||
const hiddenSearchTableFilterButton = ()=>{ |
|||
searchTableRef.value.hiddenFilterButton() |
|||
} |
|||
const clearSearchInput = (field)=>{ |
|||
emit('clearSearchInput',field) |
|||
} |
|||
const sumFormDataByTable = () => { |
|||
if(props.sumFormDataField){ |
|||
const sumObject = {} |
|||
props.sumFormDataField.forEach(sumItem=>{ |
|||
sumObject[sumItem?.formField]= props.tableData.reduce((prev, item) => prev + item[sumItem?.tableField],0) |
|||
}) |
|||
nextTick(()=>{ |
|||
formRef.value.setValues(sumObject) |
|||
}) |
|||
} |
|||
} |
|||
watch(()=>props.tableData,() => { |
|||
sumFormDataByTable() |
|||
if(props?.sumFormDataByTableCustom&&unref(formRef)?.formModel&&props.tableData){ |
|||
props?.sumFormDataByTableCustom(formRef,unref(formRef)?.formModel,props.tableData) |
|||
} |
|||
|
|||
},{ |
|||
deep:true |
|||
}) |
|||
watch(()=>unref(formRef)?.formModel,() => { |
|||
if(props?.sumFormDataByForm&&unref(formRef)?.formModel){ |
|||
props?.sumFormDataByForm(formRef,unref(formRef)?.formModel) |
|||
} |
|||
},{ |
|||
deep:true |
|||
}) |
|||
|
|||
// 弹层确定返回所选数据 |
|||
// val ： 弹层列表row 数据 |
|||
const searchTableSuccess = (formField, searchField, val, type, row) => { |
|||
emit('searchTableSuccess', formField, searchField, val, formRef.value, type, row) |
|||
} |
|||
const searchTableSuccess1 = (formField, searchField, val, type, row) => { |
|||
emit('searchTableSuccess', formField, searchField, val, formRef1.value, type, row) |
|||
} |
|||
/** 打开弹窗 */ |
|||
const open = async (type: string, row?: any, masterParmas?: any, titleName?: any, alltitleName?: any) => { |
|||
dialogVisible.value = true |
|||
if(alltitleName){ |
|||
dialogTitle.value = alltitleName |
|||
}else if (titleName) { |
|||
dialogTitle.value = t('action.' + titleName) |
|||
} else { |
|||
dialogTitle.value = t('action.' + type) |
|||
} |
|||
formType.value = type |
|||
resetForm() |
|||
// 修改时，设置数据 |
|||
// 如果是从主表的详情页面进图添加子表，需要添加masterId，number参数 |
|||
if (masterParmas) { |
|||
if (!row) { |
|||
row = { |
|||
masterId: masterParmas.masterId, |
|||
number: masterParmas.number |
|||
} |
|||
} |
|||
} |
|||
if (row?.id || row?.masterId) { |
|||
formLoading.value = true |
|||
try { |
|||
nextTick(() => { |
|||
formRef.value.setValues(row) |
|||
}) |
|||
} finally { |
|||
formLoading.value = false |
|||
} |
|||
}else{ |
|||
if(row){ |
|||
nextTick(() => { |
|||
formRef.value.setValues(row) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
// 添加数据 |
|||
const handleAddTable = () => { |
|||
if(props.isOpenSearchTable){ |
|||
const tableFormKeys = {} |
|||
tableAllSchemas.value.tableFormColumns.forEach(item => { |
|||
tableFormKeys[item.field] = item.default ? item.default : '' |
|||
}) |
|||
if(props.fieldTableColumn!=''){ |
|||
inpuFocus(tableAllSchemas.value.tableFormColumns.find(item=>item.field==props.fieldTableColumn),tableFormKeys,0) |
|||
} |
|||
}else{ |
|||
emit('handleAddTable') |
|||
} |
|||
|
|||
} |
|||
|
|||
/** 弹窗按钮 */ |
|||
let Butttondata:any = [] |
|||
if (props.isShowFooterButtton) { |
|||
Butttondata = [ |
|||
defaultButtons.formSaveBtn(null), // 保存 |
|||
defaultButtons.formCloseBtn(null) // 关闭 |
|||
] |
|||
} |
|||
if (props.footButttondata) { |
|||
Butttondata = props.footButttondata |
|||
} |
|||
|
|||
/** 按钮事件 */ |
|||
const buttonBaseClick = (val) => { |
|||
// 扩展 按钮事件回调 |
|||
if (props.footButttondata) { |
|||
emit('footButtonClick',val) |
|||
} |
|||
// 保存 |
|||
else if (val == 'save') { |
|||
submitForm() |
|||
} |
|||
// 关闭 |
|||
else if (val == 'close') { |
|||
dialogVisible.value = false |
|||
} |
|||
} |
|||
|
|||
/** 提交表单 */ |
|||
// const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
|||
|
|||
const tableFormRef = ref() |
|||
const submitForm = async () => { |
|||
const elForm = unref(formRef)?.getElFormRef() |
|||
// 校验表单 |
|||
if (!elForm) return |
|||
const valid = await elForm.validate() |
|||
if (!valid) return |
|||
// 针对主子表 明细校验 |
|||
if (props.isBusiness) { |
|||
formLoading.value = true |
|||
if (formType.value == 'create') { |
|||
const validateForm = await tableFormRef.value.validateForm() |
|||
if (!validateForm && props.tableFormDataLength) { |
|||
if (props.tableData.length == 0) { |
|||
message.warning('请填写明细信息！') |
|||
formLoading.value = false |
|||
return |
|||
} |
|||
formLoading.value = false |
|||
return |
|||
} |
|||
// 主子表——提交请求 |
|||
try { |
|||
const data = unref(formRef)?.formModel |
|||
emit('submitForm', formType.value, data) |
|||
} finally { |
|||
formLoading.value = false |
|||
} |
|||
} else { |
|||
// 编辑 |
|||
try { |
|||
const data = unref(formRef)?.formModel |
|||
emit('submitForm', formType.value, data) |
|||
} finally { |
|||
formLoading.value = false |
|||
} |
|||
} |
|||
} else { |
|||
// 基础数据单表——提交请求 |
|||
formLoading.value = true |
|||
try { |
|||
const data = unref(formRef)?.formModel |
|||
emit('success', formType.value, data) |
|||
} finally { |
|||
formLoading.value = false |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** 重置表单 */ |
|||
const resetForm = () => { |
|||
unref(formRef)?.resetFields() |
|||
} |
|||
|
|||
// 传递给父类 |
|||
const emit = defineEmits([ |
|||
'success', |
|||
'tableSelectionChange', |
|||
'tableSelectionDelete', |
|||
'tableFormSelectOnBlur', |
|||
'extendedButtonsClick', |
|||
'formSelectChange', |
|||
'formSelectvVisibleChange', |
|||
'tableSortChange', |
|||
'selectCallback', |
|||
'handleTableSelect', |
|||
'handleDeleteTable', |
|||
'handleAddTable', |
|||
'inpuFocus', |
|||
'searchTableSuccess', |
|||
'opensearchTable', |
|||
'submitForm', |
|||
'selectChange', |
|||
'selectChangeDetail', |
|||
'tableFormChange', |
|||
'buttonOperationClick', |
|||
'inputStringBlur', |
|||
'onChange', |
|||
'onBlur', |
|||
'onEnter', |
|||
'inputNumberChange', |
|||
'formFormDateChange', |
|||
'footButtonClick', |
|||
'clearSearchInput', |
|||
'clearInput', |
|||
'inputFocusPlan' |
|||
]) |
|||
//普通下拉改变事件 |
|||
const formSelectChange = (field, val, row) => { |
|||
emit('formSelectChange', field, val, row) |
|||
} |
|||
// 日期改变事件 |
|||
const formFormDateChange = (field, val,row, index) => { |
|||
emit('formFormDateChange', field, val,row, index) |
|||
} |
|||
const formSelectvVisibleChange = (field, val, row) => { |
|||
emit('formSelectvVisibleChange', field, val, row) |
|||
} |
|||
// 点击selection框 |
|||
const tableSelectionChange = (val) => { |
|||
emit('tableSelectionChange', val) |
|||
} |
|||
const tableSelectionDelete = (val) => { |
|||
emit('tableSelectionDelete', val) |
|||
} |
|||
// tableform select bulr |
|||
const tableFormSelectOnBlur = (field, val, row, index) => { |
|||
emit('tableFormSelectOnBlur', field, val, row, index) |
|||
} |
|||
// 列表排序 |
|||
const tableSortChange = (column, prop, order) => { |
|||
emit('tableSortChange', column, prop, order) |
|||
} |
|||
|
|||
// 数字输入-改变事件 |
|||
const inputNumberChange = (field, index, row, val) => { |
|||
emit('inputNumberChange', field, index, row, val) |
|||
} |
|||
//下拉框回显方法 |
|||
// const showSelect = (val, statusID) => { |
|||
// return getDictForStatusID(val, statusID) |
|||
// } |
|||
|
|||
// 行点击 |
|||
const handleTableSelect = (row, column, event) => { |
|||
emit('handleTableSelect', row, column, event) |
|||
} |
|||
|
|||
// 删除数据 |
|||
const handleDeleteTable = (row, index) => { |
|||
emit('handleDeleteTable', row, index,formRef.value) |
|||
} |
|||
const inputFocusPlan = (row)=>{ |
|||
emit('inputFocusPlan', row) |
|||
} |
|||
|
|||
|
|||
// 输入框聚焦 |
|||
const inpuFocus = (headerItem, row) => { |
|||
console.log(headerItem, row) |
|||
emit('inpuFocus', headerItem, row) |
|||
|
|||
opensearchTable( |
|||
headerItem.field, |
|||
headerItem.tableForm.searchField, |
|||
row?.searchTable?.searchTitle, |
|||
row?.searchTable?.searchAllSchemas, |
|||
row?.searchTable?.searchPage, |
|||
headerItem.tableForm.searchCondition, |
|||
headerItem.tableForm.multiple, |
|||
'tableForm', |
|||
row, |
|||
headerItem.tableForm?.isConcatDetailSchemas, |
|||
headerItem.tableForm?.searchDetailSchemas |
|||
) |
|||
} |
|||
const clearInput = (field, row, index) => { |
|||
emit('clearInput',field, row, index) |
|||
} |
|||
/** |
|||
* 监听改变事件 |
|||
* @param field 当前操作字段 |
|||
* @param cur 改变后值 |
|||
*/ |
|||
const onChange = (field, cur) => { |
|||
emit('onChange', field, cur, formRef) |
|||
} |
|||
|
|||
/** |
|||
* 监听失焦事件 |
|||
* @param field 当前操作字段 |
|||
* @param e |
|||
*/ |
|||
const onBlur = (field, e) => { |
|||
emit('onBlur', field, e) |
|||
} |
|||
/** |
|||
* 回车事件 |
|||
* @param field 当前操作字段 |
|||
* @param e |
|||
*/ |
|||
const onEnter = (field,value, e) => { |
|||
emit('onEnter', field,value, e) |
|||
} |
|||
|
|||
// 修改盘点类型 |
|||
const selectChange = (field, val) => { |
|||
emit('selectChange', field, val) |
|||
} |
|||
// 修改盘点范围类型 |
|||
const selectChangeDetail = (field, val,formSchema) => { |
|||
formSchema.value = '' |
|||
emit('selectChangeDetail', field, val) |
|||
} |
|||
|
|||
|
|||
const tableFormChange = (field, val, row) => { |
|||
emit('tableFormChange', field, val, row) |
|||
} |
|||
|
|||
const buttonOperationClick = (row, label, index)=> { |
|||
emit("buttonOperationClick", row, label, index); |
|||
} |
|||
|
|||
const inputStringBlur = (headerItem, row, index)=> { |
|||
emit("inputStringBlur", headerItem, row, index); |
|||
} |
|||
defineExpose({ open, formRef, opensearchTable, dialogVisible, formLoading ,handleAddTable,changeDialogWidth}) // 提供 open 方法，用于打开弹窗 |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.table { |
|||
border: 1px solid #dedede; |
|||
border-radius: 8px; |
|||
padding: 10px; |
|||
width: calc(100% - 32px); |
|||
display: flex; |
|||
} |
|||
::v-deep(.el-table__body) { |
|||
padding: 10px 0px; |
|||
} |
|||
::v-deep(.el-table--default .el-table__cell) { |
|||
padding: 2px 0px; |
|||
border: none; |
|||
} |
|||
|
|||
::v-deep(.el-table td.el-table__cell .el-form-item__content) { |
|||
display: flex !important; |
|||
align-items: center !important; |
|||
justify-content: center !important; |
|||
} |
|||
::v-deep(.el-table td.el-table__cell div) { |
|||
overflow: visible; |
|||
} |
|||
|
|||
::v-deep(.el-icon) { |
|||
display: block; |
|||
}button |
|||
.button { |
|||
> div { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
|
|||
> div { |
|||
margin-left: 6px; |
|||
text-decoration: underline; |
|||
color: #409eff; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue