sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

tableForm组件样式修改，滚动条，这一个数据时默认checkbox默认选中

hella_online_20240829
zhang_li 5 months ago
parent
a035e5c635
commit
06c4e1aaeb
4 changed files with 525 additions and 367 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      src/components/SearchTable/src/SearchTable.vue
  2. 30
      src/components/Table/src/Table.vue
  3. 512
      src/components/TableForm/src/TableForm.vue
  4. 2
      src/components/XButton/src/ButtonBase.vue

164
src/components/SearchTable/src/SearchTable.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="searchDialogVisible" :width="dialogWidth" > <Dialog :title="dialogTitle" v-model="searchDialogVisible" :width="dialogWidth">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<ContentWrap v-if="searchQuery"> <ContentWrap v-if="searchQuery">
<Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" /> <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" />
@ -14,7 +14,8 @@
:allSchemas="allSchemasRef" :allSchemas="allSchemasRef"
/> />
<ContentWrap> <ContentWrap>
<Table v-clientSearchTable <Table
v-clientSearchTable
ref="searchTableRef" ref="searchTableRef"
:columns="tableColumns" :columns="tableColumns"
:data="tableObjectRef.tableList" :data="tableObjectRef.tableList"
@ -30,6 +31,7 @@
:selectionTotal="multipleBol" :selectionTotal="multipleBol"
:reserveSelection="true" :reserveSelection="true"
row-key="id" row-key="id"
@rowClick="rowClick"
/> />
</ContentWrap> </ContentWrap>
<template #footer> <template #footer>
@ -45,7 +47,7 @@
<script setup lang="ts"> <script setup lang="ts">
import * as defaultButtons from '@/utils/disposition/defaultButtons' import * as defaultButtons from '@/utils/disposition/defaultButtons'
const props = defineProps({ const props = defineProps({
showSearchTableQueryFields:{ showSearchTableQueryFields: {
type: Array, type: Array,
required: false, required: false,
default: [] default: []
@ -63,23 +65,25 @@ const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const multipleBol = ref(false) const multipleBol = ref(false)
// 列表头部按钮 // 列表头部按钮
const HeadButttondata = ref(multipleBol.value? const HeadButttondata = ref(
[ multipleBol.value
defaultButtons.defaultWhenPageBtn(null), // 选择当页 ? [
defaultButtons.defaultUnselectPageBtn(null), // 反选当页 defaultButtons.defaultWhenPageBtn(null), // 选择当页
// defaultButtons.defaultDeselectAllBtn(null), // 取消全选 defaultButtons.defaultUnselectPageBtn(null), // 反选当页
defaultButtons.defaultFilterBtn(null), // 筛选 // defaultButtons.defaultDeselectAllBtn(null), // 取消全选
]:[ defaultButtons.defaultFilterBtn(null) // 筛选
defaultButtons.defaultFilterBtn(null) // 筛选 ]
]) : [
defaultButtons.defaultFilterBtn(null) // 筛选
]
)
/** 打开弹窗 */ /** 打开弹窗 */
const getListRef = ref() const getListRef = ref()
const setSearchParamsRef = ref() const setSearchParamsRef = ref()
const tableObjectRef = ref() const tableObjectRef = ref()
const getPage:any = ref() const getPage: any = ref()
const searchSchema = ref() const searchSchema = ref()
const tableColumns = ref() const tableColumns = ref()
const formFieldRef = ref() const formFieldRef = ref()
@ -88,67 +92,88 @@ const typeRef = ref()
const rowRef = ref() const rowRef = ref()
const allSchemasRef = ref() const allSchemasRef = ref()
const searchConditionRef = ref() const searchConditionRef = ref()
const searchTableSelectionsList = ref()//表格弹窗回显的列表 const searchTableSelectionsList = ref() //表格弹窗回显的列表
const searchQuery = ref(false) const searchQuery = ref(false)
const openData = (titleName: any, tableObject:any ,allSchemas: any,multiple: any) => { const openData = (titleName: any, tableObject: any, allSchemas: any, multiple: any) => {
dialogWidth.value = '80%' dialogWidth.value = '80%'
multipleBol.value = multiple multipleBol.value = multiple
HeadButttondata.value = multiple?[ HeadButttondata.value = multiple
defaultButtons.defaultWhenPageBtn(null), // 选择当页 ? [
defaultButtons.defaultUnselectPageBtn(null), // 反选当页 defaultButtons.defaultWhenPageBtn(null), // 选择当页
// defaultButtons.defaultDeselectAllBtn(null), // 取消全选 defaultButtons.defaultUnselectPageBtn(null), // 反选当页
defaultButtons.defaultFilterBtn(null), // 筛选 // defaultButtons.defaultDeselectAllBtn(null), // 取消全选
]:[ defaultButtons.defaultFilterBtn(null) // 筛选
defaultButtons.defaultFilterBtn(null), // 筛选 ]
] : [
dialogTitle.value = t(`ts.${titleName}`).replace('ts.','') defaultButtons.defaultFilterBtn(null) // 筛选
]
dialogTitle.value = t(`ts.${titleName}`).replace('ts.', '')
tableObjectRef.value = tableObject tableObjectRef.value = tableObject
searchDialogVisible.value = true searchDialogVisible.value = true
allSchemasRef.value = allSchemas allSchemasRef.value = allSchemas
searchSchema.value = allSchemas.searchSchema searchSchema.value = allSchemas.searchSchema
tableColumns.value = allSchemas.tableColumns tableColumns.value = allSchemas.tableColumns
} }
const open = (titleName: any, allSchemas: any,getApiPage: any, formField: any, searchField: any,multiple: any, type: any, row: any, searchCondition:any , isCountRequestRe:any,isConcatDetailSchemas=false,detailSchemas: any, searchTableSelections:any) => { const open = (
searchQuery.value = props.showSearchTableQueryFields.find(item=>item==formField)?true:false titleName: any,
allSchemas: any,
getApiPage: any,
formField: any,
searchField: any,
multiple: any,
type: any,
row: any,
searchCondition: any,
isCountRequestRe: any,
isConcatDetailSchemas = false,
detailSchemas: any,
searchTableSelections: any
) => {
searchQuery.value = props.showSearchTableQueryFields.find((item) => item == formField)
? true
: false
dialogWidth.value = '80%' dialogWidth.value = '80%'
multipleBol.value = multiple multipleBol.value = multiple
HeadButttondata.value = multiple?[ HeadButttondata.value = multiple
defaultButtons.defaultWhenPageBtn(null), // 选择当页 ? [
defaultButtons.defaultUnselectPageBtn(null), // 反选当页 defaultButtons.defaultWhenPageBtn(null), // 选择当页
// defaultButtons.defaultDeselectAllBtn(null), // 取消全选 defaultButtons.defaultUnselectPageBtn(null), // 反选当页
defaultButtons.defaultFilterBtn(null), // 筛选 // defaultButtons.defaultDeselectAllBtn(null), // 取消全选
]: defaultButtons.defaultFilterBtn(null) // 筛选
[ ]
defaultButtons.defaultFilterBtn(null), // 筛选 : [
] defaultButtons.defaultFilterBtn(null) // 筛选
]
searchDialogVisible.value = true searchDialogVisible.value = true
formFieldRef.value = formField formFieldRef.value = formField
searchFieldRef.value = searchField searchFieldRef.value = searchField
allSchemasRef.value = allSchemas allSchemasRef.value = allSchemas
searchSchema.value = allSchemas.searchSchema searchSchema.value = allSchemas.searchSchema
if(isConcatDetailSchemas){ if (isConcatDetailSchemas) {
//主子表合并 //主子表合并
console.log('detailSchemas',detailSchemas) console.log('detailSchemas', detailSchemas)
tableColumns.value = [...allSchemas?.tableColumns,...detailSchemas?.tableMainColumns].filter(item => (item.field !== 'action')) tableColumns.value = [...allSchemas?.tableColumns, ...detailSchemas?.tableMainColumns].filter(
}else{ (item) => item.field !== 'action'
tableColumns.value = allSchemas?.tableColumns.filter(item => (item.field !== 'action')) )
} else {
tableColumns.value = allSchemas?.tableColumns.filter((item) => item.field !== 'action')
} }
getPage.value = getApiPage getPage.value = getApiPage
typeRef.value = type typeRef.value = type
rowRef.value = row rowRef.value = row
// dialogTitle.value = t('action.' + type) // dialogTitle.value = t('action.' + type)
dialogTitle.value = t(`ts.${titleName}`).replace('ts.','') dialogTitle.value = t(`ts.${titleName}`).replace('ts.', '')
searchTableSelectionsList.value = searchTableSelections searchTableSelectionsList.value = searchTableSelections
const {tableObject, tableMethods } = useTable({ const { tableObject, tableMethods } = useTable({
getListApi: getPage.value // 分页接口 getListApi: getPage.value // 分页接口
}) })
tableObjectRef.value = tableObject tableObjectRef.value = tableObject
searchConditionRef.value = searchCondition searchConditionRef.value = searchCondition
if (searchCondition) tableObjectRef.value.params = searchCondition; if (searchCondition) tableObjectRef.value.params = searchCondition
// 获得表格的各种操作 // 获得表格的各种操作
const { getList , setSearchParams } = tableMethods const { getList, setSearchParams } = tableMethods
setSearchParamsRef.value = setSearchParams setSearchParamsRef.value = setSearchParams
getListRef.value = getList getListRef.value = getList
getList() getList()
@ -157,7 +182,7 @@ const dialogWidth = ref('80%')
const changeDialogWidth = (width: any) => { const changeDialogWidth = (width: any) => {
dialogWidth.value = width dialogWidth.value = width
} }
const hiddenFilterButton = ()=>{ const hiddenFilterButton = () => {
HeadButttondata.value = [] HeadButttondata.value = []
} }
@ -170,30 +195,30 @@ const searchFormClick = (searchData) => {
// 20240321 修改 判断 searchData 是否有条件 如果有 拼接 // 20240321 修改 判断 searchData 是否有条件 如果有 拼接
if (searchData.filters) { if (searchData.filters) {
if (searchConditionRef.value.filters) { if (searchConditionRef.value.filters) {
Object.keys(searchConditionRef.value.filters).forEach(key => { Object.keys(searchConditionRef.value.filters).forEach((key) => {
searchData.filters.push(searchConditionRef.value.filters[key]) searchData.filters.push(searchConditionRef.value.filters[key])
}); })
} else { } else {
Object.keys(searchConditionRef.value).forEach(key => { Object.keys(searchConditionRef.value).forEach((key) => {
searchData.filters.push({ searchData.filters.push({
action: "==", action: '==',
column: key, column: key,
value: searchConditionRef.value[key] value: searchConditionRef.value[key]
}) })
}); })
} }
} else { } else {
if (searchConditionRef.value.filters) { if (searchConditionRef.value.filters) {
searchData.filters = searchConditionRef.value.filters searchData.filters = searchConditionRef.value.filters
} else { } else {
searchData.filters = [] searchData.filters = []
Object.keys(searchConditionRef.value).forEach(key => { Object.keys(searchConditionRef.value).forEach((key) => {
searchData.filters.push({ searchData.filters.push({
action: "==", action: '==',
column: key, column: key,
value: searchConditionRef.value[key] value: searchConditionRef.value[key]
}) })
}); })
} }
} }
tableObjectRef.value.params = { tableObjectRef.value.params = {
@ -216,8 +241,7 @@ const buttonBaseClick = (val, item) => {
} }
} }
defineExpose({ open, openData, hiddenFilterButton, changeDialogWidth }) // 提供 open 方法，用于打开弹窗
defineExpose({ open,openData,hiddenFilterButton ,changeDialogWidth}) // 提供 open 方法，用于打开弹窗
// Table 组件 ref // Table 组件 ref
const searchTableRef = ref() const searchTableRef = ref()
@ -229,15 +253,15 @@ const submitForm = async () => {
formLoading.value = true formLoading.value = true
const selections = searchTableRef.value.selections const selections = searchTableRef.value.selections
// 如果不是多选的 // 如果不是多选的
if(!multipleBol.value){ if (!multipleBol.value) {
if(selections.length > 1 || selections.length == 0) { if (selections.length > 1 || selections.length == 0) {
message.warning('请选择一条数据！') message.warning('请选择一条数据！')
formLoading.value = false formLoading.value = false
return return
} }
// 多选 // 多选
}else{ } else {
if(selections.length == 0) { if (selections.length == 0) {
message.warning('至少选择一条数据！') message.warning('至少选择一条数据！')
formLoading.value = false formLoading.value = false
return return
@ -247,11 +271,29 @@ const submitForm = async () => {
try { try {
searchDialogVisible.value = false searchDialogVisible.value = false
// 发送操作成功的事件 // 发送操作成功的事件
emit('searchTableSuccess', formFieldRef.value, searchFieldRef.value, selections, typeRef.value, rowRef.value) emit(
'searchTableSuccess',
formFieldRef.value,
searchFieldRef.value,
selections,
typeRef.value,
rowRef.value
)
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
const rowClick = (row: any, column: any, event: Event) => {
const selected = searchTableRef.value?.elTableRef
?.getSelectionRows()
.some((item) => item.id === row.id)
if (!selected) {
searchTableRef.value?.elTableRef?.toggleRowSelection(row, true)
} else {
// 取消
searchTableRef.value?.elTableRef?.toggleRowSelection(row, false)
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
</style> </style>

30
src/components/Table/src/Table.vue
View File

@ -63,7 +63,7 @@ export default defineComponent({
searchTableSelectionsList:[],//回显列表 searchTableSelectionsList:[],//回显列表
selectionColor: propTypes.bool.def(false), selectionColor: propTypes.bool.def(false),
}, },
emits: ['update:pageSize', 'update:currentPage', 'register', 'update:sort','getSelectionRows'], emits: ['update:pageSize', 'update:currentPage', 'register', 'update:sort','getSelectionRows','rowClick'],
setup(props, { attrs, slots, emit, expose }) { setup(props, { attrs, slots, emit, expose }) {
const elTableRef = ref<ComponentRef<typeof ElTable>>() const elTableRef = ref<ComponentRef<typeof ElTable>>()
@ -120,12 +120,24 @@ export default defineComponent({
const sortRef = ref() const sortRef = ref()
// 选中某行 // 选中某行
const selectRow = ()=>{ const selectRow = ()=>{
console.log(currentPageRef.value,elTableRef.value?.getSelectionRows())
emit('getSelectionRows', currentPageRef.value,elTableRef.value?.getSelectionRows()) emit('getSelectionRows', currentPageRef.value,elTableRef.value?.getSelectionRows())
} }
//全选回调 //全选回调
const selectAll = ()=>{ const selectAll = ()=>{
emit('getSelectionRows', currentPageRef.value,elTableRef.value?.getSelectionRows()) emit('getSelectionRows', currentPageRef.value,elTableRef.value?.getSelectionRows())
} }
const rowClick = (row: any, column: any, event: Event)=>{
// const selected = elTableRef.value?.getSelectionRows().some(item => item.id === row.id)
// if (!selected) {
// elTableRef.value?.toggleRowSelection(row, true);
// } else {
// // 取消
// elTableRef.value?.toggleRowSelection(row, false);
// }
// console.log(elTableRef.value?.getSelectionRows())
emit('rowClick',row,column,event)
}
//反选 //反选
const togglePageSelection = ()=>{ const togglePageSelection = ()=>{
unref(getProps).data.forEach(row=>{ unref(getProps).data.forEach(row=>{
@ -165,7 +177,8 @@ export default defineComponent({
selectAll, selectAll,
toggleAllSelection, toggleAllSelection,
togglePageSelection, togglePageSelection,
clearSelection clearSelection,
elTableRef
}) })
const pagination = computed(() => { const pagination = computed(() => {
@ -388,6 +401,7 @@ export default defineComponent({
onSelect-all={selectAll} onSelect-all={selectAll}
onSelection-change={selectionChange} onSelection-change={selectionChange}
onSort-change={sortChange} onSort-change={sortChange}
onRow-click={rowClick}
{...unref(getBindValue)} {...unref(getBindValue)}
> >
{{ {{
@ -397,7 +411,7 @@ export default defineComponent({
}} }}
</ElTable> </ElTable>
{unref(getProps).selectionTotal ? ( {unref(getProps).selectionTotal ? (
<div class="mt-5px">已选{selections.value.length}条数据</div> <div class="mt-15px float-left" style='height:32px;line-height:32px'>已选{selections.value.length}条数据</div>
):undefined} ):undefined}
{unref(getProps).pagination ? ( {unref(getProps).pagination ? (
// update by 芋艿：保持和 Pagination 组件一致 // update by 芋艿：保持和 Pagination 组件一致
@ -416,18 +430,17 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
.expandTable .el-table .tableHeader{ .expandTable .el-table .tableHeader {
--el-table-header-bg-color: #f5f5f5; --el-table-header-bg-color: #f5f5f5;
} }
.expandTable .el-table .tableRow{ .expandTable .el-table .tableRow {
--el-table-tr-bg-color: #f5f5f5; --el-table-tr-bg-color: #f5f5f5;
--el-bg-color:#f5f5f5; --el-bg-color: #f5f5f5;
} }
.el-table .selectionRow{ .el-table .selectionRow {
--el-table-tr-bg-color: var(--el-color-primary-light-9); --el-table-tr-bg-color: var(--el-color-primary-light-9);
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-button.is-text) { :deep(.el-button.is-text) {
@ -439,5 +452,4 @@ export default defineComponent({
padding: 8px 4px; padding: 8px 4px;
margin-left: 0; margin-left: 0;
} }
</style> </style>

512
src/components/TableForm/src/TableForm.vue
View File

@ -1,7 +1,8 @@
<!-- 附件组件 --> <!-- 附件组件 -->
<template> <template>
<div class="table-form"> <div class="table-form">
<el-table class="multipleTableComponents" <el-table
class="multipleTableComponents"
ref="TableBaseComponents_Ref" ref="TableBaseComponents_Ref"
v-loading="tableLoading" v-loading="tableLoading"
:data="showTableData()" :data="showTableData()"
@ -13,7 +14,13 @@
@row-click="handleTableSelect" @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 <el-table-column
fixed="left" fixed="left"
@ -21,7 +28,13 @@
v-else-if="isShowReduceButton" v-else-if="isShowReduceButton"
v-slot="{ row, $index }" 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>
<!-- 多选 --> <!-- 多选 -->
<el-table-column <el-table-column
@ -30,7 +43,6 @@
:reserve-selection="true" :reserve-selection="true"
type="selection" type="selection"
:width="50" :width="50"
/> />
<!-- 序号 --> <!-- 序号 -->
<el-table-column <el-table-column
@ -43,145 +55,179 @@
/> />
<el-table-column <el-table-column
v-slot="{ row, $index }" v-slot="{ row, $index }"
v-for="(headerItem) in tableFields.filter(item=>(!item.hidden))" v-for="headerItem in tableFields.filter((item) => !item.hidden)"
:key="headerItem" :key="headerItem"
:fixed="headerItem.tableForm?.fixed" :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'" :align="headerItem?.tableForm?.align || 'center'"
:sortable="headerItem?.tableForm?.sortable || false" :sortable="headerItem?.tableForm?.sortable || false"
:width="headerItem?.tableForm?.width || '200px'" :width="headerItem?.tableForm?.width || '200px'"
:min-width="headerItem?.tableForm?.minWidth || 'auto'"> :min-width="headerItem?.tableForm?.minWidth || 'auto'"
>
<el-form <el-form
ref="TableBaseForm_Ref" ref="TableBaseForm_Ref"
:model="row" :model="row"
style="width: 100%;" style="width: 100%"
:rules="tableFormRules" :rules="tableFormRules"
:class="tableFormRules ? '' : 'noRulesForm'"> :class="tableFormRules ? '' : 'noRulesForm'"
@click.stop=""
>
<!-- 字符串输入框 --> <!-- 字符串输入框 -->
<el-form-item <el-form-item
v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'" v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'"
:prop="headerItem.field" style="display: flex;align-items: center;"> :prop="headerItem.field"
<el-input :key="headerItem.field+$index" style="display: flex; align-items: center"
>
<el-input
:key="headerItem.field + $index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
clearable clearable
:type="headerItem?.tableForm?.inputType" :type="headerItem?.tableForm?.inputType"
:placeholder="t(`ts.${headerItem?.tableForm?.placeholder || '请输入' + headerItem.label}`).replace('ts.','')" :placeholder="
:disabled="disabledInput(headerItem,row)" t(
style="flex:1" `ts.${headerItem?.tableForm?.placeholder || '请输入' + headerItem.label}`
@blur="inputStringBlur(headerItem, row[headerItem.field], row,index)" ).replace('ts.', '')
"
:disabled="disabledInput(headerItem, row)"
style="flex: 1"
@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)"/> <Icon
<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="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>
<el-form-item v-if="headerItem?.tableForm?.type == 'slot'"> <el-form-item v-if="headerItem?.tableForm?.type == 'slot'">
<slot :row="row"></slot> <slot :row="row"></slot>
</el-form-item> </el-form-item>
<!-- 金额输入框 --> <!-- 金额输入框 -->
<el-form-item <el-form-item v-if="headerItem?.tableForm?.type == 'number'" :prop="headerItem.field" >
v-if="headerItem?.tableForm?.type == 'number'" <el-input
:prop="headerItem.field"> :key="headerItem.field + $index"
<el-input :key="headerItem.field+$index" v-model="row[headerItem.field]"
v-model="row[headerItem.field]" clearable
clearable type="number"
type="number" :placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label"
:placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label" :disabled="itemIsDisabled(headerItem, row)"
:disabled="itemIsDisabled(headerItem, row)" style="width: 100%"
style="width: 100%;" @input.stop="row[headerItem.field] = row[headerItem.field].replace(/[^\d\.-]/g, '')"
@input="row[headerItem.field] = row[headerItem.field].replace(/[^\d\.-]/g, '')" @click.stop=""
/> @focus.stop=""
</el-form-item> />
</el-form-item>
<!-- 数字输入框 --> <!-- 数字输入框 -->
<el-form-item <el-form-item
v-if="headerItem?.tableForm?.type == 'InputNumber'" v-if="headerItem?.tableForm?.type == 'InputNumber'"
:prop="headerItem.field"> :prop="headerItem.field"
>
<el-input-number <el-input-number
style="width: 100%;" style="width: 100%"
:key="headerItem.field+$index" :key="headerItem.field + $index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:max="headerItem?.tableForm?.max" :max="headerItem?.tableForm?.max"
:min="headerItem?.tableForm?.min" :min="headerItem?.tableForm?.min"
:precision="headerItem?.tableForm?.precision" :precision="headerItem?.tableForm?.precision"
:disabled="itemIsDisabled(headerItem, row)" :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>
<!-- 下拉框 --> <!-- 下拉框 -->
<el-form-item <el-form-item v-if="headerItem?.tableForm?.type == 'Select'" :prop="headerItem.field">
v-if="headerItem?.tableForm?.type == 'Select'" <el-select
:prop="headerItem.field"> :key="headerItem.field + $index"
<el-select :key="headerItem.field+$index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="headerItem?.tableForm.clearable || true" :clearable="headerItem?.tableForm.clearable || true"
:multiple="headerItem?.tableForm.multiple" :multiple="headerItem?.tableForm.multiple"
:size="headerItem?.tableForm.size" :size="headerItem?.tableForm.size"
:collapse-tags ="headerItem?.tableForm.collapseTags" :collapse-tags="headerItem?.tableForm.collapseTags"
:collapse-tags-tooltip ="headerItem?.tableForm.collapseTagsTooltip" :collapse-tags-tooltip="headerItem?.tableForm.collapseTagsTooltip"
:multiple-limit ="headerItem?.tableForm.multipleLimit" :multiple-limit="headerItem?.tableForm.multipleLimit"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:filterable="headerItem?.tableForm.filterable" :filterable="headerItem?.tableForm.filterable"
:allow-create="headerItem?.tableForm.allowCreate" :allow-create="headerItem?.tableForm.allowCreate"
style="width: 100%" style="width: 100%"
:placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label" :placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label"
@change="formSelectChange(headerItem.field, $event,row)" @change.stop="formSelectChange(headerItem.field, $event, row)"
@blur="tableFormSelectOnBlur(headerItem.field, $event,row, $index)"> @blur.stop="tableFormSelectOnBlur(headerItem.field, $event, row, $index)"
>
<el-option <el-option
v-for="op in initSelectOptions(headerItem)" v-for="op in initSelectOptions(headerItem)"
:label="t(`ts.${op.label}`).replace('ts.','')" :label="t(`ts.${op.label}`).replace('ts.', '')"
:value="op.value" :value="op.value"
:key="op.value" /> :key="op.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 下拉框 --> <!-- 下拉框 -->
<el-form-item <el-form-item
v-if="headerItem?.tableForm?.type == 'SelectGroup'" v-if="headerItem?.tableForm?.type == 'SelectGroup'"
:prop="headerItem.field"> :prop="headerItem.field"
<el-select :key="headerItem.field+$index" >
<el-select
:key="headerItem.field + $index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="headerItem?.tableForm.clearable || true" :clearable="headerItem?.tableForm.clearable || true"
:multiple="headerItem?.tableForm.multiple" :multiple="headerItem?.tableForm.multiple"
:size="headerItem?.tableForm.size" :size="headerItem?.tableForm.size"
:collapse-tags ="headerItem?.tableForm.collapseTags" :collapse-tags="headerItem?.tableForm.collapseTags"
:collapse-tags-tooltip ="headerItem?.tableForm.collapseTagsTooltip" :collapse-tags-tooltip="headerItem?.tableForm.collapseTagsTooltip"
:multiple-limit ="headerItem?.tableForm.multipleLimit" :multiple-limit="headerItem?.tableForm.multipleLimit"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:filterable="headerItem?.tableForm.filterable" :filterable="headerItem?.tableForm.filterable"
:allow-create="headerItem?.tableForm.allowCreate" :allow-create="headerItem?.tableForm.allowCreate"
style="width: 100%" style="width: 100%"
:placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label" :placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label"
@change="formSelectChange(headerItem.field, $event,row)" @change.stop="formSelectChange(headerItem.field, $event, row)"
@blur="tableFormSelectOnBlur(headerItem.field, $event,row, $index)"> @blur.stop="tableFormSelectOnBlur(headerItem.field, $event, row, $index)"
<el-option-group >
v-for="group in initSelectOptions(headerItem)" <el-option-group
:key="group.type" v-for="group in initSelectOptions(headerItem)"
:label="t(`ts.${group.name}`).replace('ts.','')" :key="group.type"
> :label="t(`ts.${group.name}`).replace('ts.', '')"
<el-option >
v-for="item in group.options" <el-option
:key="item.value" v-for="item in group.options"
:label="t(`ts.${item.label}`).replace('ts.','')" :key="item.value"
:value="item.value" :label="t(`ts.${item.label}`).replace('ts.', '')"
/> :value="item.value"
</el-option-group> />
</el-option-group>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 时间选择器 --> <!-- 时间选择器 -->
<el-form-item <el-form-item v-if="headerItem?.tableForm?.type == 'FormTime'" :prop="headerItem.field">
v-if="headerItem?.tableForm?.type == 'FormTime'" <el-time-picker
:prop="headerItem.field"> :key="headerItem.field + $index"
<el-time-picker :key="headerItem.field+$index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="true" :clearable="true"
:placeholder="headerItem?.tableForm?.placeholder || '选择时间'" :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'" :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>
<!-- 日期选择器 --> <!-- 日期选择器 -->
<el-form-item <el-form-item v-if="headerItem?.tableForm?.type == 'FormDate'" :prop="headerItem.field">
v-if="headerItem?.tableForm?.type == 'FormDate'"
:prop="headerItem.field">
<el-date-picker <el-date-picker
:key="headerItem.field+$index" :key="headerItem.field + $index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="true" :clearable="true"
style="width: 100%" style="width: 100%"
@ -189,14 +235,16 @@
:placeholder="headerItem?.tableForm?.placeholder || '选择日期'" :placeholder="headerItem?.tableForm?.placeholder || '选择日期'"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD'" :format="headerItem?.tableForm?.format || 'YYYY-MM-DD'"
:value-format="headerItem?.tableForm?.valueFormat || '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>
<!-- 日期时间选择器 --> <!-- 日期时间选择器 -->
<el-form-item <el-form-item
v-if="headerItem?.tableForm?.type == 'FormDateTime'" v-if="headerItem?.tableForm?.type == 'FormDateTime'"
:prop="headerItem.field"> :prop="headerItem.field"
>
<el-date-picker <el-date-picker
:key="headerItem.field+$index" :key="headerItem.field + $index"
type="datetime" type="datetime"
:clearable="true" :clearable="true"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
@ -204,13 +252,16 @@
style="width: 100%" style="width: 100%"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'" :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'"
:disabled="itemIsDisabled(headerItem, row)" /> :disabled="itemIsDisabled(headerItem, row)"
/>
</el-form-item> </el-form-item>
<!--开始时间结束时间选择器 (原类型datetimerange已弃用 使用type+timeType结合方式)--> <!--开始时间结束时间选择器 (原类型datetimerange已弃用 使用type+timeType结合方式)-->
<el-form-item <el-form-item
v-if="headerItem?.tableForm?.type == 'FormTimerange'" v-if="headerItem?.tableForm?.type == 'FormTimerange'"
:prop="headerItem.field"> :prop="headerItem.field"
<el-date-picker :key="headerItem.field+$index" >
<el-date-picker
:key="headerItem.field + $index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="true" :clearable="true"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
@ -219,13 +270,13 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'" :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> </el-form-item>
<!-- Switch 开关 --> <!-- Switch 开关 -->
<el-form-item <el-form-item v-if="headerItem?.tableForm?.type == 'Switch'" :prop="headerItem.field">
v-if="headerItem?.tableForm?.type == 'Switch'" <el-switch
:prop="headerItem.field"> :key="headerItem.field + $index"
<el-switch :key="headerItem.field+$index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:loading="headerItem?.tableForm?.loading" :loading="headerItem?.tableForm?.loading"
@ -237,69 +288,79 @@
:active-value="headerItem?.tableForm?.activeValue" :active-value="headerItem?.tableForm?.activeValue"
:inactive-value="headerItem?.tableForm?.inactiveValue" :inactive-value="headerItem?.tableForm?.inactiveValue"
:active-color="headerItem?.tableForm?.inactiveColor" :active-color="headerItem?.tableForm?.inactiveColor"
:inactive-color="headerItem?.tableForm?.inactiveColor" /> :inactive-color="headerItem?.tableForm?.inactiveColor"
/>
</el-form-item> </el-form-item>
<!-- Radio 单选--> <!-- Radio 单选-->
<el-form-item <el-form-item v-if="headerItem?.tableForm?.type == 'Radio'" :prop="headerItem.field">
v-if="headerItem?.tableForm?.type == 'Radio'" <el-radio-group
:prop="headerItem.field"> :key="headerItem.field + $index"
<el-radio-group :key="headerItem.field+$index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:size="headerItem?.tableForm?.size" :size="headerItem?.tableForm?.size"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:text-color="headerItem?.tableForm?.textColor" :text-color="headerItem?.tableForm?.textColor"
:fill="headerItem?.tableForm?.fill" :fill="headerItem?.tableForm?.fill"
:name="headerItem?.tableForm?.name" :name="headerItem?.tableForm?.name"
:id="headerItem?.tableForm?.id"> :id="headerItem?.tableForm?.id"
>
<el-radio <el-radio
v-for="(item, index) in initSelectOptions(headerItem)" v-for="(item, index) in initSelectOptions(headerItem)"
:key="index" :key="index"
:label="t(`ts.${item.value}`).replace('ts.','')" :label="t(`ts.${item.value}`).replace('ts.', '')"
:size="headerItem?.tableForm?.size" :size="headerItem?.tableForm?.size"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:border="headerItem?.tableForm?.border"> :border="headerItem?.tableForm?.border"
>
{{ item.label }} {{ item.label }}
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- Checkbox 多选--> <!-- Checkbox 多选-->
<el-form-item <el-form-item v-if="headerItem?.tableForm?.type == 'Checkbox'" :prop="headerItem.field">
v-if="headerItem?.tableForm?.type == 'Checkbox'" <el-checkbox-group
:prop="headerItem.field"> :key="headerItem.field + $index"
<el-checkbox-group :key="headerItem.field+$index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:size="headerItem?.tableForm?.size" :size="headerItem?.tableForm?.size"
:min="headerItem?.tableForm?.min" :min="headerItem?.tableForm?.min"
:max="headerItem?.tableForm?.max" :max="headerItem?.tableForm?.max"
:text-color="headerItem?.tableForm?.textColor" :text-color="headerItem?.tableForm?.textColor"
:fill="headerItem?.tableForm?.fill"> :fill="headerItem?.tableForm?.fill"
>
<el-checkbox <el-checkbox
v-for="(item, index) in initSelectOptions(headerItem)" v-for="(item, index) in initSelectOptions(headerItem)"
:key="index" :key="index"
:label="t(`ts.${item.value}`).replace('ts.','')" :label="t(`ts.${item.value}`).replace('ts.', '')"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:true-label="t(`ts.${headerItem?.tableForm?.trueLabel}`).replace('ts.','')" :true-label="t(`ts.${headerItem?.tableForm?.trueLabel}`).replace('ts.', '')"
:false-label="t(`ts.${headerItem?.tableForm?.falseLabel}`).replace('ts.','')" :false-label="t(`ts.${headerItem?.tableForm?.falseLabel}`).replace('ts.', '')"
:border="headerItem?.tableForm?.border" :border="headerItem?.tableForm?.border"
:size="headerItem?.tableForm?.size" :size="headerItem?.tableForm?.size"
:name="headerItem?.tableForm?.name" :name="headerItem?.tableForm?.name"
:checked="headerItem?.tableForm?.checked"> :checked="headerItem?.tableForm?.checked"
>
{{ item.label }} {{ item.label }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<!-- table表添加操作列 --> <!-- table表添加操作列 -->
<!-- <el-form-item> --> <!-- <el-form-item> -->
<div v-if="headerItem?.tableForm?.type == 'action'" :key="headerItem.field+$index"> <div v-if="headerItem?.tableForm?.type == 'action'" :key="headerItem.field + $index">
<el-button <el-button
v-for="(itemButton, indexButton) in headerItem?.tableForm?.buttonText.split('|')" v-for="(itemButton, indexButton) in headerItem?.tableForm?.buttonText.split('|')"
:key="indexButton" :key="indexButton"
type="text" type="text"
style="padding-top: 0px;align-items:unsafe;" style="padding-top: 0px; align-items: unsafe"
@click="buttonOperationClick(row, headerItem?.tableForm?.buttonName.split('|')[indexButton], $index)" @click.stop="
>{{itemButton}}</el-button> buttonOperationClick(
</div> row,
headerItem?.tableForm?.buttonName.split('|')[indexButton],
$index
)
"
>{{ itemButton }}</el-button
>
</div>
<!-- </el-form-item> --> <!-- </el-form-item> -->
</el-form> </el-form>
</el-table-column> </el-table-column>
@ -312,30 +373,48 @@
v-if="isShowReduceButtonSelection" v-if="isShowReduceButtonSelection"
v-slot="{ row, $index }" 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-column>
</el-table> </el-table>
<!-- :page-sizes="[ 10,20, 30, 50, 100]" sizes--> <!-- :page-sizes="[ 10,20, 30, 50, 100]" sizes-->
<el-pagination v-show="tableData.length>10" style="margin-top:10px" <el-pagination
v-model:current-page="currentPage" v-show="tableData.length > 10"
v-model:page-size="pageSize" style="margin-top: 10px"
:small="true" v-model:current-page="currentPage"
:background="false" v-model:page-size="pageSize"
layout="total, prev, pager, next, jumper" :small="true"
:total="tableData.length" :background="false"
/> layout="total, prev, pager, next, jumper"
<div class="button flex" v-if="isShowButton||isShowReduceButtonSelection"> :total="tableData.length"
<div class="p-12px" v-if="isShowButton" @click="handleAddTable"> />
<Icon icon="ep:circle-plus" color="#409eff" size="26" style="cursor: pointer;" /> <div class="button flex" v-if="isShowButton || isShowReduceButtonSelection">
<div>{{t('ts.添加明细')}}</div> <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>
<div class="p-12px" v-if="isShowReduceButtonSelection" @click="handleSelectionDelete"> <div class="p-12px" v-if="isShowReduceButtonSelection" @click.stop="handleSelectionDelete">
<Icon icon="ep:delete" color="#409eff" size="26" style="cursor: pointer;" /> <Icon icon="ep:delete" color="#409eff" size="26" style="cursor: pointer" />
<div>{{t('ts.批量删除')}}</div> <div>{{ t('ts.批量删除') }}</div>
</div> </div>
<div class="p-12px" v-if="routeName == 'PurchaseMain'||routeName == 'ProductionMain'||routeName == 'ZZBJDeliverPlanMain'||routeName == 'DeliverPlanMain'||routeName == 'DeliverRequestMain'||routeName == 'ZZBJDeliverRequestMain'||routeName == 'UnplannedreceiptRequestMain'"> <div
<el-input v-model="keyWord" style="width: 240px" placeholder="回车自动添加"/> class="p-12px"
<el-button type="primary" style="margin-left: 10px" @click="batchAdd">{{t('批量添加')}}</el-button> 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.stop="batchAdd">{{
t('批量添加')
}}</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -349,46 +428,46 @@ const props = defineProps({
// 是否显示添加按钮 // 是否显示添加按钮
isShowButton: { isShowButton: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
// 是否显示选择框 :custom="headerItem.sortable?headerItem.sortable:false" // 是否显示选择框 :custom="headerItem.sortable?headerItem.sortable:false"
selectionTable: { selectionTable: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
// 是否显示序号 // 是否显示序号
isShowIndex: { isShowIndex: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
// 是否显示删除按钮--多选 // 是否显示删除按钮--多选
isShowReduceButtonSelection:{ isShowReduceButtonSelection: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
// 是否显示删除按钮 // 是否显示删除按钮
isShowReduceButton:{ isShowReduceButton: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
// 加载状态 // 加载状态
tableLoading: { tableLoading: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
// 列表数据 // 列表数据
tableData: { tableData: {
type: Array, type: Array,
default: () => { default: () => {
return [] return []
}, }
}, },
// 列表头定义 // 列表头定义
tableFields: { tableFields: {
type: Array, type: Array,
default: () => { default: () => {
return [] return []
}, }
}, },
// table高度 // table高度
height: { height: {
@ -406,7 +485,7 @@ const props = defineProps({
// 是否有边框（可拖拽） // 是否有边框（可拖拽）
border: { border: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
// table输入表单的rules // table输入表单的rules
tableFormRules: { tableFormRules: {
@ -418,7 +497,7 @@ const props = defineProps({
type: String, type: String,
required: false, required: false,
default: '' default: ''
}, }
}) })
// 传递给父类 // 传递给父类
const emit = defineEmits([ const emit = defineEmits([
@ -444,16 +523,16 @@ const initSelectOptions = (item) => {
return item.dictType ? getStrDictOptions(item.dictType) : item.tableForm.initOptions return item.dictType ? getStrDictOptions(item.dictType) : item.tableForm.initOptions
} }
//普通下拉改变事件 //普通下拉改变事件
const formSelectChange = (field, val,row) => { const formSelectChange = (field, val, row) => {
emit('formSelectChange', field, val,row) emit('formSelectChange', field, val, row)
} }
// 日期改变事件 // 日期改变事件
const formFormDateChange = (field, val,row, index) => { const formFormDateChange = (field, val, row, index) => {
emit('formFormDateChange', field, val,row, index) emit('formFormDateChange', field, val, row, index)
} }
// 普通下拉失焦事件 // 普通下拉失焦事件
const tableFormSelectOnBlur = (field, val,row,index) => { const tableFormSelectOnBlur = (field, val, row, index) => {
emit('tableFormSelectOnBlur', field, val,row,index) emit('tableFormSelectOnBlur', field, val, row, index)
} }
// 数字输入-改变事件 // 数字输入-改变事件
const inputNumberChange = (field, index, row, e) => { const inputNumberChange = (field, index, row, e) => {
@ -465,18 +544,18 @@ const deleteTableData = ref([])
// 点击selection框 // 点击selection框
const tableSelectionChange = (val) => { const tableSelectionChange = (val) => {
if(props.isShowReduceButtonSelection){ if (props.isShowReduceButtonSelection) {
//勾选删除 //勾选删除
deleteTableData.value = val deleteTableData.value = val
}else{ } else {
emit('tableSelectionChange', val) emit('tableSelectionChange', val)
} }
} }
const handleSelectionDelete = ()=>{ const handleSelectionDelete = () => {
emit('tableSelectionDelete', deleteTableData.value) emit('tableSelectionDelete', deleteTableData.value)
nextTick(()=>{ nextTick(() => {
deleteTableData.value.forEach(row=>{ deleteTableData.value.forEach((row) => {
TableBaseComponents_Ref.value!.toggleRowSelection(row,false) TableBaseComponents_Ref.value!.toggleRowSelection(row, false)
}) })
}) })
} }
@ -491,12 +570,25 @@ const tableSortChange = (column, prop, order) => {
// 行点击 // 行点击
const handleTableSelect = (row, column, event) => { 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) emit('handleTableSelect', row, column, event)
} }
// 某个item是否禁用 // 某个item是否禁用
const itemIsDisabled = (colum, row) => { 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() // 国际化 // const { t } = useI18n() // 国际化
@ -506,25 +598,27 @@ const TableBaseComponents_Ref = ref()
const TableBaseForm_Ref = ref() const TableBaseForm_Ref = ref()
/** /**
* 验证表单是否符合rules * 验证表单是否符合rules
* @param {*} success 如果验证【成功】走的方法 * @param {*} success 如果验证【成功】走的方法
* @param {*} error 如果验证【不成功】走的方法 * @param {*} error 如果验证【不成功】走的方法
*/ */
const validateForm = () => { const validateForm = () => {
console.log(TableBaseForm_Ref.value) console.log(TableBaseForm_Ref.value)
let _lists = TableBaseForm_Ref.value?.map(v => v.validate()) let _lists = TableBaseForm_Ref.value?.map((v) => v.validate())
return Promise.all(_lists).then(() => { return Promise.all(_lists)
return true .then(() => {
}).catch(() => { return true
return false })
}) .catch(() => {
return false
})
} }
// 删除数据 // 删除数据
const handleDeleteTable = (row, index) => { const handleDeleteTable = (row, index) => {
emit('handleDeleteTable', row, index) emit('handleDeleteTable', row, index)
nextTick(()=>{ nextTick(() => {
TableBaseComponents_Ref.value!.toggleRowSelection(row,false) TableBaseComponents_Ref.value!.toggleRowSelection(row, false)
}) })
} }
// 添加数据 // 添加数据
@ -532,59 +626,67 @@ const handleAddTable = () => {
emit('handleAddTable') emit('handleAddTable')
} }
// 输入框聚焦 // 输入框聚焦
const inpuFocus = (headerItem, row, index)=>{ const inpuFocus = (headerItem, row, index) => {
if(headerItem?.tableForm?.isInpuFocusShow){ if (headerItem?.tableForm?.isInpuFocusShow) {
emit('inpuFocus', headerItem, row, index) emit('inpuFocus', headerItem, row, index)
} }
} }
// input输入失去焦点事件 // input输入失去焦点事件
const inputStringBlur = (headerItem, val,row,index) => { const inputStringBlur = (headerItem, val, row, index) => {
emit('inputStringBlur', headerItem, val,row,index) emit('inputStringBlur', headerItem, val, row, index)
} }
const clearInput= (field, row, index) => { const clearInput = (field, row, index) => {
emit('clearInput',field, row, index) emit('clearInput', field, row, index)
} }
//点击table操作列按钮 //点击table操作列按钮
const buttonOperationClick = (row, label, index)=> { const buttonOperationClick = (row, label, index) => {
emit("buttonOperationClick", row, label, index); emit('buttonOperationClick', row, label, index)
} }
const currentPage =ref(1) const currentPage = ref(1)
const pageSize = ref(10) const pageSize = ref(10)
const showTableData = ()=>{ const showTableData = () => {
if(props.tableData.length>10){ if (props.tableData.length > 10) {
return props.tableData.slice((currentPage.value-1)*pageSize.value,currentPage.value*pageSize.value) return props.tableData.slice(
}else{ (currentPage.value - 1) * pageSize.value,
currentPage.value * pageSize.value
)
} else {
return props.tableData return props.tableData
} }
} }
const keyWord = ref('') const keyWord = ref('')
console.log(9999,props.tableFields) console.log(9999, props.tableFields)
const batchAdd = ()=>{ const batchAdd = () => {
console.log(keyWord.value) console.log(keyWord.value)
let field = '' let field = ''
const itemCodeFields = props.tableFields.find(item=>item.field == 'itemCode') const itemCodeFields = props.tableFields.find((item) => item.field == 'itemCode')
const supplierFields = props.tableFields.find(item=>item.field == 'supplierCode') const supplierFields = props.tableFields.find((item) => item.field == 'supplierCode')
if(itemCodeFields){ if (itemCodeFields) {
field = itemCodeFields.field field = itemCodeFields.field
}else { } else {
if(itemCodeFields){ if (itemCodeFields) {
field = supplierFields.field field = supplierFields.field
} }
} }
console.log(field) console.log(field)
emit('batchAdd',keyWord.value) emit('batchAdd', keyWord.value)
} }
const disabledInput=(headerItem,row)=>{ const disabledInput = (headerItem, row) => {
if(headerItem.tableForm?.isInpuFocusShow){ if (headerItem.tableForm?.isInpuFocusShow) {
if(headerItem.tableForm?.enterSearch){ if (headerItem.tableForm?.enterSearch) {
return false return false
}else{ } else {
return true return true
} }
}else{ } 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, validateForm,
keyWord keyWord
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep(.el-table__body){ ::v-deep(.el-table__body) {
padding:10px 0px padding: 10px 0px;
} }
::v-deep(.el-table--default .el-table__cell) { ::v-deep(.el-table--default .el-table__cell) {
padding: 2px 0px; padding: 2px 0px;
@ -623,20 +724,23 @@ defineExpose({
display: block; display: block;
} }
.table-form ::v-deep(.is-horizontal) {
height: 12px !important;
display: block !important;
}
.button { .button {
>div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
>div { > div {
margin-left: 6px; margin-left: 6px;
text-decoration: underline; text-decoration: underline;
color: #409eff; color: #409eff;
} }
} }
} }
</style> </style>

2
src/components/XButton/src/ButtonBase.vue
View File

@ -8,7 +8,7 @@
:disabled="item.disabled" :disabled="item.disabled"
v-hasPermi="[item.hasPermi] || []" v-hasPermi="[item.hasPermi] || []"
v-if="item.name != 'set'" v-if="item.name != 'set'"
@click="buttonBaseClick(item.name, item, $event)" @click.stop="buttonBaseClick(item.name, item, $event)"
> >
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" /> <Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
<span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span> <span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span>

Write Preview
Loading…
Cancel
Save