|
|
|
@ -1,7 +1,8 @@ |
|
|
|
<!-- 附件组件 --> |
|
|
|
<template> |
|
|
|
<div class="table-form"> |
|
|
|
<el-table class="multipleTableComponents" |
|
|
|
<el-table |
|
|
|
class="multipleTableComponents" |
|
|
|
ref="TableBaseComponents_Ref" |
|
|
|
v-loading="tableLoading" |
|
|
|
:data="showTableData()" |
|
|
|
@ -13,7 +14,13 @@ |
|
|
|
@row-click="handleTableSelect" |
|
|
|
> |
|
|
|
<!-- 删除按钮多选 --> |
|
|
|
<el-table-column fixed="left" type="selection" width="50" v-if="isShowReduceButtonSelection" :reserve-selection="true" /> |
|
|
|
<el-table-column |
|
|
|
fixed="left" |
|
|
|
type="selection" |
|
|
|
width="50" |
|
|
|
v-if="isShowReduceButtonSelection" |
|
|
|
:reserve-selection="true" |
|
|
|
/> |
|
|
|
<!-- 删除按钮 --> |
|
|
|
<el-table-column |
|
|
|
fixed="left" |
|
|
|
@ -21,7 +28,13 @@ |
|
|
|
v-else-if="isShowReduceButton" |
|
|
|
v-slot="{ row, $index }" |
|
|
|
> |
|
|
|
<Icon icon="ep:remove" color="#757575" :size="26" style="cursor: pointer;margin-top: -16px;" @click="handleDeleteTable (row, $index)" /> |
|
|
|
<Icon |
|
|
|
icon="ep:remove" |
|
|
|
color="#757575" |
|
|
|
:size="26" |
|
|
|
style="cursor: pointer; margin-top: -16px" |
|
|
|
@click.stop="handleDeleteTable(row, $index)" |
|
|
|
/> |
|
|
|
</el-table-column> |
|
|
|
<!-- 多选 --> |
|
|
|
<el-table-column |
|
|
|
@ -30,7 +43,6 @@ |
|
|
|
:reserve-selection="true" |
|
|
|
type="selection" |
|
|
|
:width="50" |
|
|
|
|
|
|
|
/> |
|
|
|
<!-- 序号 --> |
|
|
|
<el-table-column |
|
|
|
@ -43,73 +55,103 @@ |
|
|
|
/> |
|
|
|
<el-table-column |
|
|
|
v-slot="{ row, $index }" |
|
|
|
v-for="(headerItem) in tableFields.filter(item=>(!item.hidden))" |
|
|
|
v-for="headerItem in tableFields.filter((item) => !item.hidden)" |
|
|
|
:key="headerItem" |
|
|
|
:fixed="headerItem.tableForm?.fixed" |
|
|
|
:label="t(`ts.${headerItem.label}`).replace('ts.','')" :prop="headerItem.field" |
|
|
|
:label="t(`ts.${headerItem.label}`).replace('ts.', '')" |
|
|
|
:prop="headerItem.field" |
|
|
|
:align="headerItem?.tableForm?.align || 'center'" |
|
|
|
:sortable="headerItem?.tableForm?.sortable || false" |
|
|
|
:width="headerItem?.tableForm?.width || '200px'" |
|
|
|
:min-width="headerItem?.tableForm?.minWidth || 'auto'"> |
|
|
|
:min-width="headerItem?.tableForm?.minWidth || 'auto'" |
|
|
|
> |
|
|
|
<el-form |
|
|
|
ref="TableBaseForm_Ref" |
|
|
|
:model="row" |
|
|
|
style="width: 100%;" |
|
|
|
style="width: 100%" |
|
|
|
:rules="tableFormRules" |
|
|
|
:class="tableFormRules ? '' : 'noRulesForm'"> |
|
|
|
:class="tableFormRules ? '' : 'noRulesForm'" |
|
|
|
@click.stop="" |
|
|
|
> |
|
|
|
<!-- 字符串输入框 --> |
|
|
|
<el-form-item |
|
|
|
v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'" |
|
|
|
:prop="headerItem.field" style="display: flex;align-items: center;"> |
|
|
|
<el-input :key="headerItem.field+$index" |
|
|
|
:prop="headerItem.field" |
|
|
|
style="display: flex; align-items: center" |
|
|
|
> |
|
|
|
<el-input |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
clearable |
|
|
|
:type="headerItem?.tableForm?.inputType" |
|
|
|
:placeholder="t(`ts.${headerItem?.tableForm?.placeholder || '请输入' + headerItem.label}`).replace('ts.','')" |
|
|
|
:placeholder=" |
|
|
|
t( |
|
|
|
`ts.${headerItem?.tableForm?.placeholder || '请输入' + headerItem.label}` |
|
|
|
).replace('ts.', '') |
|
|
|
" |
|
|
|
:disabled="disabledInput(headerItem, row)" |
|
|
|
style="flex: 1" |
|
|
|
@blur="inputStringBlur(headerItem, row[headerItem.field], row,index)" |
|
|
|
@blur.stop="inputStringBlur(headerItem, row[headerItem.field], row, index)" |
|
|
|
/> |
|
|
|
<Icon icon="ep:circle-close" v-if="headerItem?.tableForm?.isInpuFocusShow && headerItem?.tableForm?.disabled&& headerItem?.tableForm?.clearable" style='position:absolute;right:50px;cursor: pointer;' @click="clearInput(headerItem.field,row,index)"/> |
|
|
|
<el-button :key="headerItem.field+$index+'button'" v-if="headerItem?.tableForm?.isInpuFocusShow" @click="inpuFocus(headerItem,row,index)"><Icon icon="ep:search" size="14"/></el-button> |
|
|
|
<Icon |
|
|
|
icon="ep:circle-close" |
|
|
|
v-if=" |
|
|
|
headerItem?.tableForm?.isInpuFocusShow && |
|
|
|
headerItem?.tableForm?.disabled && |
|
|
|
headerItem?.tableForm?.clearable |
|
|
|
" |
|
|
|
style="position: absolute; right: 50px; cursor: pointer" |
|
|
|
@click.stop="clearInput(headerItem.field, row, index)" |
|
|
|
/> |
|
|
|
<el-button |
|
|
|
:key="headerItem.field + $index + 'button'" |
|
|
|
v-if="headerItem?.tableForm?.isInpuFocusShow" |
|
|
|
@click.stop="inpuFocus(headerItem, row, index)" |
|
|
|
><Icon icon="ep:search" size="14" |
|
|
|
/></el-button> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'slot'"> |
|
|
|
<slot :row="row"></slot> |
|
|
|
</el-form-item> |
|
|
|
<!-- 金额输入框 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'number'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-input :key="headerItem.field+$index" |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'number'" :prop="headerItem.field" > |
|
|
|
<el-input |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
clearable |
|
|
|
type="number" |
|
|
|
:placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
style="width: 100%;" |
|
|
|
@input="row[headerItem.field] = row[headerItem.field].replace(/[^\d\.-]/g, '')" |
|
|
|
style="width: 100%" |
|
|
|
@input.stop="row[headerItem.field] = row[headerItem.field].replace(/[^\d\.-]/g, '')" |
|
|
|
@click.stop="" |
|
|
|
@focus.stop="" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- 数字输入框 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'InputNumber'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
:prop="headerItem.field" |
|
|
|
> |
|
|
|
<el-input-number |
|
|
|
style="width: 100%;" |
|
|
|
style="width: 100%" |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:max="headerItem?.tableForm?.max" |
|
|
|
:min="headerItem?.tableForm?.min" |
|
|
|
:precision="headerItem?.tableForm?.precision" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
@change="(e)=>{inputNumberChange(headerItem.field, $index, row, e)}" |
|
|
|
@change.stop=" |
|
|
|
(e) => { |
|
|
|
inputNumberChange(headerItem.field, $index, row, e) |
|
|
|
} |
|
|
|
" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- 下拉框 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'Select'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-select :key="headerItem.field+$index" |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'Select'" :prop="headerItem.field"> |
|
|
|
<el-select |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:clearable="headerItem?.tableForm.clearable || true" |
|
|
|
:multiple="headerItem?.tableForm.multiple" |
|
|
|
@ -122,20 +164,24 @@ |
|
|
|
:allow-create="headerItem?.tableForm.allowCreate" |
|
|
|
style="width: 100%" |
|
|
|
:placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label" |
|
|
|
@change="formSelectChange(headerItem.field, $event,row)" |
|
|
|
@blur="tableFormSelectOnBlur(headerItem.field, $event,row, $index)"> |
|
|
|
@change.stop="formSelectChange(headerItem.field, $event, row)" |
|
|
|
@blur.stop="tableFormSelectOnBlur(headerItem.field, $event, row, $index)" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="op in initSelectOptions(headerItem)" |
|
|
|
:label="t(`ts.${op.label}`).replace('ts.', '')" |
|
|
|
:value="op.value" |
|
|
|
:key="op.value" /> |
|
|
|
:key="op.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<!-- 下拉框 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'SelectGroup'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-select :key="headerItem.field+$index" |
|
|
|
:prop="headerItem.field" |
|
|
|
> |
|
|
|
<el-select |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:clearable="headerItem?.tableForm.clearable || true" |
|
|
|
:multiple="headerItem?.tableForm.multiple" |
|
|
|
@ -148,8 +194,9 @@ |
|
|
|
:allow-create="headerItem?.tableForm.allowCreate" |
|
|
|
style="width: 100%" |
|
|
|
:placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label" |
|
|
|
@change="formSelectChange(headerItem.field, $event,row)" |
|
|
|
@blur="tableFormSelectOnBlur(headerItem.field, $event,row, $index)"> |
|
|
|
@change.stop="formSelectChange(headerItem.field, $event, row)" |
|
|
|
@blur.stop="tableFormSelectOnBlur(headerItem.field, $event, row, $index)" |
|
|
|
> |
|
|
|
<el-option-group |
|
|
|
v-for="group in initSelectOptions(headerItem)" |
|
|
|
:key="group.type" |
|
|
|
@ -165,21 +212,20 @@ |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<!-- 时间选择器 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'FormTime'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-time-picker :key="headerItem.field+$index" |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'FormTime'" :prop="headerItem.field"> |
|
|
|
<el-time-picker |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:clearable="true" |
|
|
|
:placeholder="headerItem?.tableForm?.placeholder || '选择时间'" |
|
|
|
style="width: 100%" :disabled="itemIsDisabled(headerItem, row)" |
|
|
|
style="width: 100%" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
:format="headerItem?.tableForm?.format || 'HH:mm:ss'" |
|
|
|
:value-format="headerItem?.tableForm?.valueFormat || 'HH:mm:ss'" /> |
|
|
|
:value-format="headerItem?.tableForm?.valueFormat || 'HH:mm:ss'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- 日期选择器 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'FormDate'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'FormDate'" :prop="headerItem.field"> |
|
|
|
<el-date-picker |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
@ -189,12 +235,14 @@ |
|
|
|
:placeholder="headerItem?.tableForm?.placeholder || '选择日期'" |
|
|
|
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD'" |
|
|
|
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DD'" |
|
|
|
@change="formFormDateChange(headerItem.field, $event,row, $index)" /> |
|
|
|
@change.stop="formFormDateChange(headerItem.field, $event, row, $index)" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- 日期时间选择器 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'FormDateTime'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
:prop="headerItem.field" |
|
|
|
> |
|
|
|
<el-date-picker |
|
|
|
:key="headerItem.field + $index" |
|
|
|
type="datetime" |
|
|
|
@ -204,13 +252,16 @@ |
|
|
|
style="width: 100%" |
|
|
|
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'" |
|
|
|
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" /> |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!--开始时间结束时间选择器 (原类型datetimerange已弃用 使用type+timeType结合方式)--> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'FormTimerange'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-date-picker :key="headerItem.field+$index" |
|
|
|
:prop="headerItem.field" |
|
|
|
> |
|
|
|
<el-date-picker |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:clearable="true" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
@ -219,13 +270,13 @@ |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'" |
|
|
|
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'" /> |
|
|
|
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- Switch 开关 --> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'Switch'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-switch :key="headerItem.field+$index" |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'Switch'" :prop="headerItem.field"> |
|
|
|
<el-switch |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
:loading="headerItem?.tableForm?.loading" |
|
|
|
@ -237,43 +288,45 @@ |
|
|
|
:active-value="headerItem?.tableForm?.activeValue" |
|
|
|
:inactive-value="headerItem?.tableForm?.inactiveValue" |
|
|
|
:active-color="headerItem?.tableForm?.inactiveColor" |
|
|
|
:inactive-color="headerItem?.tableForm?.inactiveColor" /> |
|
|
|
:inactive-color="headerItem?.tableForm?.inactiveColor" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- Radio 单选--> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'Radio'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-radio-group :key="headerItem.field+$index" |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'Radio'" :prop="headerItem.field"> |
|
|
|
<el-radio-group |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:size="headerItem?.tableForm?.size" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
:text-color="headerItem?.tableForm?.textColor" |
|
|
|
:fill="headerItem?.tableForm?.fill" |
|
|
|
:name="headerItem?.tableForm?.name" |
|
|
|
:id="headerItem?.tableForm?.id"> |
|
|
|
:id="headerItem?.tableForm?.id" |
|
|
|
> |
|
|
|
<el-radio |
|
|
|
v-for="(item, index) in initSelectOptions(headerItem)" |
|
|
|
:key="index" |
|
|
|
:label="t(`ts.${item.value}`).replace('ts.', '')" |
|
|
|
:size="headerItem?.tableForm?.size" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
:border="headerItem?.tableForm?.border"> |
|
|
|
:border="headerItem?.tableForm?.border" |
|
|
|
> |
|
|
|
{{ item.label }} |
|
|
|
</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<!-- Checkbox 多选--> |
|
|
|
<el-form-item |
|
|
|
v-if="headerItem?.tableForm?.type == 'Checkbox'" |
|
|
|
:prop="headerItem.field"> |
|
|
|
<el-checkbox-group :key="headerItem.field+$index" |
|
|
|
<el-form-item v-if="headerItem?.tableForm?.type == 'Checkbox'" :prop="headerItem.field"> |
|
|
|
<el-checkbox-group |
|
|
|
:key="headerItem.field + $index" |
|
|
|
v-model="row[headerItem.field]" |
|
|
|
:disabled="itemIsDisabled(headerItem, row)" |
|
|
|
:size="headerItem?.tableForm?.size" |
|
|
|
:min="headerItem?.tableForm?.min" |
|
|
|
:max="headerItem?.tableForm?.max" |
|
|
|
:text-color="headerItem?.tableForm?.textColor" |
|
|
|
:fill="headerItem?.tableForm?.fill"> |
|
|
|
:fill="headerItem?.tableForm?.fill" |
|
|
|
> |
|
|
|
<el-checkbox |
|
|
|
v-for="(item, index) in initSelectOptions(headerItem)" |
|
|
|
:key="index" |
|
|
|
@ -284,7 +337,8 @@ |
|
|
|
:border="headerItem?.tableForm?.border" |
|
|
|
:size="headerItem?.tableForm?.size" |
|
|
|
:name="headerItem?.tableForm?.name" |
|
|
|
:checked="headerItem?.tableForm?.checked"> |
|
|
|
:checked="headerItem?.tableForm?.checked" |
|
|
|
> |
|
|
|
{{ item.label }} |
|
|
|
</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
@ -296,9 +350,16 @@ |
|
|
|
v-for="(itemButton, indexButton) in headerItem?.tableForm?.buttonText.split('|')" |
|
|
|
:key="indexButton" |
|
|
|
type="text" |
|
|
|
style="padding-top: 0px;align-items:unsafe;" |
|
|
|
@click="buttonOperationClick(row, headerItem?.tableForm?.buttonName.split('|')[indexButton], $index)" |
|
|
|
>{{itemButton}}</el-button> |
|
|
|
style="padding-top: 0px; align-items: unsafe" |
|
|
|
@click.stop=" |
|
|
|
buttonOperationClick( |
|
|
|
row, |
|
|
|
headerItem?.tableForm?.buttonName.split('|')[indexButton], |
|
|
|
$index |
|
|
|
) |
|
|
|
" |
|
|
|
>{{ itemButton }}</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<!-- </el-form-item> --> |
|
|
|
</el-form> |
|
|
|
@ -312,11 +373,16 @@ |
|
|
|
v-if="isShowReduceButtonSelection" |
|
|
|
v-slot="{ row, $index }" |
|
|
|
> |
|
|
|
<ButtonBase :Butttondata="[defaultButtons.mainListDeleteBtn(),]" @button-base-click="handleDeleteTable (row, $index)" /> |
|
|
|
<ButtonBase |
|
|
|
:Butttondata="[defaultButtons.mainListDeleteBtn()]" |
|
|
|
@button-base-click="handleDeleteTable(row, $index)" |
|
|
|
/> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<!-- :page-sizes="[ 10,20, 30, 50, 100]" sizes--> |
|
|
|
<el-pagination v-show="tableData.length>10" style="margin-top:10px" |
|
|
|
<el-pagination |
|
|
|
v-show="tableData.length > 10" |
|
|
|
style="margin-top: 10px" |
|
|
|
v-model:current-page="currentPage" |
|
|
|
v-model:page-size="pageSize" |
|
|
|
:small="true" |
|
|
|
@ -325,17 +391,30 @@ |
|
|
|
:total="tableData.length" |
|
|
|
/> |
|
|
|
<div class="button flex" v-if="isShowButton || isShowReduceButtonSelection"> |
|
|
|
<div class="p-12px" v-if="isShowButton" @click="handleAddTable"> |
|
|
|
<Icon icon="ep:circle-plus" color="#409eff" size="26" style="cursor: pointer;" /> |
|
|
|
<div class="p-12px" v-if="isShowButton" @click.stop="handleAddTable"> |
|
|
|
<Icon icon="ep:circle-plus" color="#409eff" size="26" style="cursor: pointer" /> |
|
|
|
<div>{{ t('ts.添加明细') }}</div> |
|
|
|
</div> |
|
|
|
<div class="p-12px" v-if="isShowReduceButtonSelection" @click="handleSelectionDelete"> |
|
|
|
<Icon icon="ep:delete" color="#409eff" size="26" style="cursor: pointer;" /> |
|
|
|
<div class="p-12px" v-if="isShowReduceButtonSelection" @click.stop="handleSelectionDelete"> |
|
|
|
<Icon icon="ep:delete" color="#409eff" size="26" style="cursor: pointer" /> |
|
|
|
<div>{{ t('ts.批量删除') }}</div> |
|
|
|
</div> |
|
|
|
<div class="p-12px" v-if="routeName == 'PurchaseMain'||routeName == 'ProductionMain'||routeName == 'ZZBJDeliverPlanMain'||routeName == 'DeliverPlanMain'||routeName == 'DeliverRequestMain'||routeName == 'ZZBJDeliverRequestMain'||routeName == 'UnplannedreceiptRequestMain'"> |
|
|
|
<div |
|
|
|
class="p-12px" |
|
|
|
v-if=" |
|
|
|
routeName == 'PurchaseMain' || |
|
|
|
routeName == 'ProductionMain' || |
|
|
|
routeName == 'ZZBJDeliverPlanMain' || |
|
|
|
routeName == 'DeliverPlanMain' || |
|
|
|
routeName == 'DeliverRequestMain' || |
|
|
|
routeName == 'ZZBJDeliverRequestMain' || |
|
|
|
routeName == 'UnplannedreceiptRequestMain' |
|
|
|
" |
|
|
|
> |
|
|
|
<el-input v-model="keyWord" style="width: 240px" placeholder="回车自动添加" /> |
|
|
|
<el-button type="primary" style="margin-left: 10px" @click="batchAdd">{{t('批量添加')}}</el-button> |
|
|
|
<el-button type="primary" style="margin-left: 10px" @click.stop="batchAdd">{{ |
|
|
|
t('批量添加') |
|
|
|
}}</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -349,46 +428,46 @@ const props = defineProps({ |
|
|
|
// 是否显示添加按钮 |
|
|
|
isShowButton: { |
|
|
|
type: Boolean, |
|
|
|
default: true, |
|
|
|
default: true |
|
|
|
}, |
|
|
|
// 是否显示选择框 :custom="headerItem.sortable?headerItem.sortable:false" |
|
|
|
selectionTable: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
// 是否显示序号 |
|
|
|
isShowIndex: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
// 是否显示删除按钮--多选 |
|
|
|
isShowReduceButtonSelection: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
// 是否显示删除按钮 |
|
|
|
isShowReduceButton: { |
|
|
|
type: Boolean, |
|
|
|
default: true, |
|
|
|
default: true |
|
|
|
}, |
|
|
|
// 加载状态 |
|
|
|
tableLoading: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
// 列表数据 |
|
|
|
tableData: { |
|
|
|
type: Array, |
|
|
|
default: () => { |
|
|
|
return [] |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
// 列表头定义 |
|
|
|
tableFields: { |
|
|
|
type: Array, |
|
|
|
default: () => { |
|
|
|
return [] |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
// table高度 |
|
|
|
height: { |
|
|
|
@ -406,7 +485,7 @@ const props = defineProps({ |
|
|
|
// 是否有边框（可拖拽） |
|
|
|
border: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
// table输入表单的rules |
|
|
|
tableFormRules: { |
|
|
|
@ -418,7 +497,7 @@ const props = defineProps({ |
|
|
|
type: String, |
|
|
|
required: false, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
} |
|
|
|
}) |
|
|
|
// 传递给父类 |
|
|
|
const emit = defineEmits([ |
|
|
|
@ -475,7 +554,7 @@ const tableSelectionChange = (val) => { |
|
|
|
const handleSelectionDelete = () => { |
|
|
|
emit('tableSelectionDelete', deleteTableData.value) |
|
|
|
nextTick(() => { |
|
|
|
deleteTableData.value.forEach(row=>{ |
|
|
|
deleteTableData.value.forEach((row) => { |
|
|
|
TableBaseComponents_Ref.value!.toggleRowSelection(row, false) |
|
|
|
}) |
|
|
|
}) |
|
|
|
@ -491,12 +570,25 @@ const tableSortChange = (column, prop, order) => { |
|
|
|
|
|
|
|
// 行点击 |
|
|
|
const handleTableSelect = (row, column, event) => { |
|
|
|
const selected = TableBaseComponents_Ref.value |
|
|
|
?.getSelectionRows() |
|
|
|
.some((item) => item.id === row.id) |
|
|
|
if (!selected) { |
|
|
|
TableBaseComponents_Ref.value?.toggleRowSelection(row, true) |
|
|
|
} else { |
|
|
|
// 取消 |
|
|
|
TableBaseComponents_Ref.value?.toggleRowSelection(row, false) |
|
|
|
} |
|
|
|
emit('handleTableSelect', row, column, event) |
|
|
|
} |
|
|
|
|
|
|
|
// 某个item是否禁用 |
|
|
|
const itemIsDisabled = (colum, row) => { |
|
|
|
return Boolean(colum.tableForm?.disabled) || Boolean(row.disabled) || Boolean(row['disabled_' + colum.field]) |
|
|
|
return ( |
|
|
|
Boolean(colum.tableForm?.disabled) || |
|
|
|
Boolean(row.disabled) || |
|
|
|
Boolean(row['disabled_' + colum.field]) |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
// const { t } = useI18n() // 国际化 |
|
|
|
@ -513,10 +605,12 @@ const TableBaseForm_Ref = ref() |
|
|
|
|
|
|
|
const validateForm = () => { |
|
|
|
console.log(TableBaseForm_Ref.value) |
|
|
|
let _lists = TableBaseForm_Ref.value?.map(v => v.validate()) |
|
|
|
return Promise.all(_lists).then(() => { |
|
|
|
let _lists = TableBaseForm_Ref.value?.map((v) => v.validate()) |
|
|
|
return Promise.all(_lists) |
|
|
|
.then(() => { |
|
|
|
return true |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
return false |
|
|
|
}) |
|
|
|
} |
|
|
|
@ -547,14 +641,17 @@ const clearInput= (field, row, index) => { |
|
|
|
} |
|
|
|
//点击table操作列按钮 |
|
|
|
const buttonOperationClick = (row, label, index) => { |
|
|
|
emit("buttonOperationClick", row, label, index); |
|
|
|
emit('buttonOperationClick', row, label, index) |
|
|
|
} |
|
|
|
|
|
|
|
const currentPage = ref(1) |
|
|
|
const pageSize = ref(10) |
|
|
|
const showTableData = () => { |
|
|
|
if (props.tableData.length > 10) { |
|
|
|
return props.tableData.slice((currentPage.value-1)*pageSize.value,currentPage.value*pageSize.value) |
|
|
|
return props.tableData.slice( |
|
|
|
(currentPage.value - 1) * pageSize.value, |
|
|
|
currentPage.value * pageSize.value |
|
|
|
) |
|
|
|
} else { |
|
|
|
return props.tableData |
|
|
|
} |
|
|
|
@ -564,8 +661,8 @@ console.log(9999,props.tableFields) |
|
|
|
const batchAdd = () => { |
|
|
|
console.log(keyWord.value) |
|
|
|
let field = '' |
|
|
|
const itemCodeFields = props.tableFields.find(item=>item.field == 'itemCode') |
|
|
|
const supplierFields = props.tableFields.find(item=>item.field == 'supplierCode') |
|
|
|
const itemCodeFields = props.tableFields.find((item) => item.field == 'itemCode') |
|
|
|
const supplierFields = props.tableFields.find((item) => item.field == 'supplierCode') |
|
|
|
if (itemCodeFields) { |
|
|
|
field = itemCodeFields.field |
|
|
|
} else { |
|
|
|
@ -584,7 +681,12 @@ const disabledInput=(headerItem,row)=>{ |
|
|
|
return true |
|
|
|
} |
|
|
|
} else { |
|
|
|
return headerItem?.tableForm?.disabled || Boolean(row.disabled) || Boolean(row['disabled_' + headerItem.field]) ||false |
|
|
|
return ( |
|
|
|
headerItem?.tableForm?.disabled || |
|
|
|
Boolean(row.disabled) || |
|
|
|
Boolean(row['disabled_' + headerItem.field]) || |
|
|
|
false |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -594,13 +696,12 @@ defineExpose({ |
|
|
|
validateForm, |
|
|
|
keyWord |
|
|
|
}) |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
::v-deep(.el-table__body) { |
|
|
|
padding:10px 0px |
|
|
|
padding: 10px 0px; |
|
|
|
} |
|
|
|
::v-deep(.el-table--default .el-table__cell) { |
|
|
|
padding: 2px 0px; |
|
|
|
@ -623,6 +724,11 @@ defineExpose({ |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.table-form ::v-deep(.is-horizontal) { |
|
|
|
height: 12px !important; |
|
|
|
display: block !important; |
|
|
|
} |
|
|
|
|
|
|
|
.button { |
|
|
|
> div { |
|
|
|
display: flex; |
|
|
|
@ -636,7 +742,5 @@ defineExpose({ |
|
|
|
color: #409eff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
chenfang
4 months ago