<template>
|
<!-- 2021.11.18移除voltable方法@cell-mouse-leave="rowEndEdit" -->
|
<div
|
class="vol-table"
|
:class="[
|
textInline ? 'text-inline' : '',
|
fxRight ? 'fx-right' : '',
|
isChrome ? 'chrome' : '',
|
smallCell ? 'small-table' : ''
|
]"
|
>
|
<div class="mask" v-show="loading"></div>
|
<div class="message" v-show="loading">加载中.....</div>
|
<el-table
|
:show-summary="summary"
|
:summary-method="getSummaryData"
|
:row-key="rowKey"
|
:key="randomTableKey"
|
:lazy="lazy"
|
:defaultExpandAll="defaultExpandAll"
|
:expand-row-keys="rowKey ? expandRowKeys : undefined"
|
stripe
|
:load="loadTreeChildren"
|
@select="userSelect"
|
@select-all="userSelect"
|
@selection-change="selectionChange"
|
@row-dblclick="rowDbClick"
|
@row-click="rowClick"
|
@header-click="headerClick"
|
:highlight-current-row="highlightCurrentRow"
|
ref="table"
|
class="v-table"
|
@sort-change="sortChange"
|
tooltip-effect="dark"
|
:height="realHeight"
|
:max-height="realMaxHeight"
|
:data="url ? rowData : tableData"
|
border
|
:row-class-name="initIndex"
|
:cell-style="getCellStyle"
|
style="width: 100%"
|
:scrollbar-always-on="true"
|
:span-method="cellSpanMethod"
|
@expand-change="expandChange"
|
>
|
<el-table-column v-if="columnIndex" type="index" :fixed="fixed" width="55"></el-table-column>
|
<el-table-column
|
v-if="ck"
|
type="selection"
|
:fixed="fixed"
|
:selectable="selectable"
|
width="55"
|
></el-table-column>
|
|
<!-- 2020.10.10移除table第一行强制排序 -->
|
<el-table-column
|
v-for="(column, cindex) in filterColumns"
|
:prop="column.field"
|
:label="column.title"
|
:min-width="column.width"
|
:formatter="formatter"
|
:fixed="column.fixed"
|
:key="column.field + cindex"
|
:align="column.align"
|
:sortable="column.sort ? 'custom' : false"
|
:show-overflow-tooltip="true"
|
>
|
<template #header>
|
<span v-if="(column.require || column.required) && column.edit" class="column-required"
|
>*</span
|
>{{ column.title }}
|
</template>
|
|
<template #default="scope">
|
<!-- 2022.01.08增加多表头，现在只支持常用功能渲染，不支持编辑功能(涉及到组件重写) -->
|
<el-table-column
|
style="border: none"
|
v-for="columnChildren in filterChildrenColumn(column.children)"
|
:key="columnChildren.field"
|
:min-width="columnChildren.width"
|
:class-name="columnChildren.class"
|
:prop="columnChildren.field"
|
:align="columnChildren.align"
|
:label="columnChildren.title"
|
>
|
<template #default="scopeChildren">
|
<a
|
href="javascript:void(0);"
|
style="text-decoration: none"
|
@click="link(scopeChildren.row, columnChildren, $event)"
|
v-if="columnChildren.link"
|
v-text="scopeChildren.row[columnChildren.field]"
|
></a>
|
<table-render
|
v-else-if="columnChildren.render && typeof columnChildren.render == 'function'"
|
:row="scopeChildren.row"
|
key="rd-01"
|
:index="scope.$index"
|
:column="columnChildren"
|
:render="columnChildren.render"
|
></table-render>
|
<div
|
v-else-if="columnChildren.formatter"
|
@click="
|
columnChildren.click &&
|
columnChildren.click(scopeChildren.row, columnChildren, scopeChildren.$index)
|
"
|
v-html="
|
columnChildren.formatter(scopeChildren.row, columnChildren, scopeChildren.$index)
|
"
|
></div>
|
<div v-else-if="columnChildren.bind">
|
{{ formatter(scopeChildren.row, columnChildren, true) }}
|
</div>
|
<span v-else-if="columnChildren.type == 'date'">{{
|
formatterDate(scopeChildren.row, columnChildren)
|
}}</span>
|
<template v-else>
|
{{ scopeChildren.row[columnChildren.field] }}
|
</template>
|
</template>
|
</el-table-column>
|
<!-- 2020.06.18增加render渲染自定义内容 -->
|
<table-render
|
v-if="column.render && typeof column.render == 'function'"
|
:row="scope.row"
|
key="rd-01"
|
:index="scope.$index"
|
:column="column"
|
:render="column.render"
|
></table-render>
|
<!-- 启用双击编辑功能，带编辑功能的不会渲染下拉框文本背景颜色 -->
|
<!-- @click="rowBeginEdit(scope.$index,cindex)" -->
|
<!-- 2021.09.21增加编辑时对readonly属性判断 -->
|
<template
|
v-else-if="
|
column.edit &&
|
!column.readonly &&
|
['file', 'img', 'excel'].indexOf(column.edit.type) != -1
|
"
|
>
|
<div style="display: flex; align-items: center" @click.stop>
|
<i
|
v-if="!column.showUpload || column.showUpload(scope.row, column)"
|
style="padding: 3px; margin-right: 10px; color: #8f9293; cursor: pointer"
|
@click="showUpload(scope.row, column)"
|
class="el-icon-upload"
|
></i>
|
<template v-if="column.edit.type == 'img'">
|
<img
|
v-for="(file, imgIndex) in getFilePath(scope.row[column.field], column)"
|
:key="imgIndex"
|
@error="handleImageError"
|
@click="viewImg(scope.row, column, file.path, $event, imgIndex)"
|
class="table-img"
|
:src="file.path"
|
/>
|
</template>
|
<a
|
style="margin-right: 8px"
|
v-else
|
class="t-file"
|
v-for="(file, fIndex) in getFilePath(scope.row[column.field], column)"
|
:key="fIndex"
|
@click="dowloadFile(file)"
|
>{{ file.name }}</a
|
>
|
</div>
|
</template>
|
<div
|
v-else-if="
|
column.edit && !column.readonly && (column.edit.keep || edit.rowIndex == scope.$index)
|
"
|
class="edit-el"
|
>
|
<div @click.stop class="e-item">
|
<div>
|
<!-- 2020.07.24增加日期onChange事件 -->
|
<el-date-picker
|
clearable
|
size="default"
|
style="width: 100%"
|
v-if="['date', 'datetime'].indexOf(column.edit.type) != -1"
|
v-model="scope.row[column.field]"
|
@change="
|
(val) => {
|
column.onChange && column.onChange(scope.row, column, val)
|
}
|
"
|
:type="column.edit.type"
|
:placeholder="column.placeholder || column.title"
|
:disabledDate="(val) => getDateOptions(val, column)"
|
:value-format="getDateFormat(column)"
|
:disabled="initColumnDisabled(scope.row, column)"
|
>
|
</el-date-picker>
|
<el-time-picker
|
clearable
|
size="default"
|
style="width: 100%"
|
v-else-if="column.edit.type == 'time'"
|
v-model="scope.row[column.field]"
|
@change="
|
(val) => {
|
column.onChange && column.onChange(scope.row, column, val)
|
}
|
"
|
:placeholder="column.placeholder || column.title"
|
:value-format="column.format || 'HH:mm:ss'"
|
:disabled="initColumnDisabled(scope.row, column)"
|
>
|
</el-time-picker>
|
<el-switch
|
v-else-if="column.edit.type == 'switch'"
|
v-model="scope.row[column.field]"
|
active-color="#0f84ff"
|
inactive-color="rgb(194 194 194)"
|
active-text="是"
|
inactive-text="否"
|
inline-prompt
|
@change="
|
(val) => {
|
switchChange(val, scope.row, column)
|
}
|
"
|
:active-value="
|
typeof scope.row[column.field] == 'boolean'
|
? true
|
: typeof scope.row[column.field] == 'string'
|
? '1'
|
: 1
|
"
|
:inactive-value="
|
typeof scope.row[column.field] == 'boolean'
|
? false
|
: typeof scope.row[column.field] == 'string'
|
? '0'
|
: 0
|
"
|
:disabled="initColumnDisabled(scope.row, column)"
|
>
|
</el-switch>
|
<template v-else-if="['select', 'selectList'].indexOf(column.edit.type) != -1">
|
<el-select-v2
|
style="width: 100%"
|
:size="size"
|
v-if="column.bind.data.length >= select2Count"
|
v-model="scope.row[column.field]"
|
filterable
|
:multiple="column.edit.type == 'select' ? false : true"
|
:placeholder="column.placeholder || column.title"
|
:autocomplete="column.autocomplete"
|
:options="column.bind.data"
|
@change="column.onChange && column.onChange(scope.row, column)"
|
clearable
|
:disabled="initColumnDisabled(scope.row, column)"
|
>
|
<template #default="{ item }">
|
{{ item.label }}
|
</template>
|
</el-select-v2>
|
|
<el-select
|
size="default"
|
style="width: 100%"
|
v-else
|
v-model="scope.row[column.field]"
|
:filterable="column.filter || column.bind.data.length > 10 ? true : false"
|
:multiple="column.edit.type == 'select' ? false : true"
|
:placeholder="column.placeholder || column.title"
|
:allow-create="column.autocomplete"
|
@change="column.onChange && column.onChange(scope.row, column)"
|
clearable
|
:disabled="initColumnDisabled(scope.row, column)"
|
>
|
<el-option
|
v-for="item in column.bind.data"
|
:key="item.key"
|
v-show="!item.hidden"
|
:disabled="item.disabled"
|
:label="item.value"
|
:value="item.key"
|
>{{ item.value }}
|
</el-option>
|
</el-select>
|
</template>
|
<el-tree-select
|
style="width: 100%"
|
v-else-if="column.edit.type == 'treeSelect' || column.edit.type == 'cascader'"
|
v-model="scope.row[column.field]"
|
:data="column.bind.data"
|
:multiple="column.multiple === undefined ? true : column.multiple"
|
:render-after-expand="false"
|
:show-checkbox="true"
|
:check-strictly="column.checkStrictly === undefined ? true : column.checkStrictly"
|
check-on-click-node
|
node-key="key"
|
@change="column.onChange && column.onChange(scope.row, column)"
|
:props="{ label: 'label' }"
|
>
|
<template #default="{ data, node }"> {{ data.label }}</template>
|
</el-tree-select>
|
<!-- <div v-else-if="column.edit.type == 'cascader'">4444444</div> -->
|
<!-- <el-cascader
|
clearable
|
style="width: 100%;"
|
v-model="scope.row[column.field]"
|
v-else-if="column.edit.type == 'cascader'"
|
:data="column.bind.data"
|
:props="{
|
checkStrictly: column.changeOnSelect || column.checkStrictly,
|
}"
|
@change="column.onChange && column.onChange(scope.row, column)"
|
>
|
</el-cascader> -->
|
<el-input
|
v-else-if="column.edit.type == 'textarea'"
|
type="textarea"
|
:placeholder="column.placeholder || column.title"
|
v-model="scope.row[column.field]"
|
:disabled="initColumnDisabled(scope.row, column)"
|
>
|
</el-input>
|
<input
|
class="table-input"
|
v-else-if="!column.summary && !column.onKeyPress"
|
v-model.lazy="scope.row[column.field]"
|
:placeholder="column.placeholder || column.title"
|
:disabled="initColumnDisabled(scope.row, column)"
|
/>
|
<el-input
|
v-else
|
@change="inputKeyPress(scope.row, column, $event)"
|
@input="inputKeyPress(scope.row, column, $event)"
|
@keyup.enter="inputKeyPress(scope.row, column, $event)"
|
size="default"
|
v-model="scope.row[column.field]"
|
:placeholder="column.placeholder || column.title"
|
:disabled="initColumnDisabled(scope.row, column)"
|
></el-input>
|
</div>
|
<div class="extra" v-if="column.extra && edit.rowIndex == scope.$index">
|
<a
|
:style="column.extra.style"
|
style="text-decoration: none"
|
@click="extraClick(scope.row, column)"
|
>
|
<i v-if="column.extra.icon" :class="[column.extra.icon]" />
|
{{ column.extra.text }}
|
</a>
|
</div>
|
</div>
|
</div>
|
<!--没有编辑功能的直接渲染标签-->
|
<template v-else>
|
<a
|
href="javascript:void(0)"
|
style="text-decoration: none; line-height: 1.3"
|
@click="link(scope.row, column, $event)"
|
v-if="column.link"
|
v-text="scope.row[column.field]"
|
></a>
|
<img
|
v-else-if="column.type == 'img'"
|
v-for="(file, imgIndex) in getFilePath(scope.row[column.field], column)"
|
:key="imgIndex"
|
@error="handleImageError"
|
@click="viewImg(scope.row, column, file.path, $event, imgIndex)"
|
class="table-img"
|
:src="file.path"
|
/>
|
<a
|
style="margin-right: 8px"
|
v-else-if="column.type == 'file' || column.type == 'excel'"
|
class="t-file"
|
v-for="(file, fIndex) in getFilePath(scope.row[column.field], column)"
|
:key="fIndex"
|
@click="dowloadFile(file)"
|
>{{ file.name }}</a
|
>
|
<span v-else-if="column.type == 'date'">{{ formatterDate(scope.row, column) }}</span>
|
<div
|
v-else-if="column.formatter"
|
@click="formatterClick(scope.row, column, $event)"
|
v-html="column.formatter(scope.row, column)"
|
></div>
|
<!-- 2021.11.18修复table数据源设置为normal后点击行$event缺失的问题 -->
|
<div
|
v-else-if="column.bind && (column.normal || column.edit)"
|
@click="formatterClick(scope.row, column, $event)"
|
:style="column.getStyle && column.getStyle(scope.row, column)"
|
>
|
{{ formatter(scope.row, column, true) }}
|
</div>
|
<div
|
v-else-if="column.click && !column.bind"
|
@click="formatterClick(scope.row, column)"
|
>
|
{{ scope.row[column.field] }}
|
</div>
|
<div
|
@click="
|
() => {
|
column.click && formatterClick(scope.row, column)
|
}
|
"
|
v-else-if="column.bind"
|
>
|
<el-tag
|
v-if="useTag"
|
class="cell-tag"
|
:class="[isEmptyTag(scope.row, column)]"
|
:type="getColor(scope.row, column)"
|
:effect="column.effect"
|
>{{ formatter(scope.row, column, true) }}</el-tag
|
>
|
<template v-else>{{ formatter(scope.row, column, true) }}</template>
|
</div>
|
|
<span v-else>{{ formatter(scope.row, column, true) }}</span>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
<template v-if="!paginationHide">
|
<div class="block pagination" key="pagination-01" style="display: flex">
|
<div style="flex: 1"></div>
|
<el-pagination
|
key="pagination-02"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="paginations.page"
|
:page-sizes="paginations.sizes"
|
:page-size="paginations.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="paginations.total"
|
></el-pagination>
|
</div>
|
</template>
|
</div>
|
|
<VolBox v-model="uploadModel" title="上传" :height="228" :width="500" :padding="15" lazy>
|
<!-- 上传图片、excel或其他文件、文件数量、大小限制都可以，参照volupload组件api -->
|
<div style="height: 200px; display: flex; align-items: center">
|
<VolUpload
|
style="text-align: center"
|
:autoUpload="currentColumn.edit.autoUpload"
|
:multiple="currentColumn.edit.multiple"
|
:url="uploadUrl"
|
:max-file="currentColumn.edit.maxFile"
|
:img="currentColumn.edit.type == 'img'"
|
:excel="currentColumn.edit.type == 'excel'"
|
:fileTypes="currentColumn.edit.fileTypes ? currentColumn.edit.fileTypes : []"
|
:fileInfo="fileInfo"
|
:upload-after="uploadAfter"
|
:upload-before="uploadBefore"
|
:append="currentColumn.edit.accept"
|
>
|
<div>{{ currentColumn.message }}</div>
|
</VolUpload>
|
</div>
|
<template #footer>
|
<div style="text-align: center">
|
<el-button type="default" size="small" @click="uploadModel = false">关闭</el-button>
|
<el-button type="primary" size="small" @click="saveUpload">保存</el-button>
|
</div>
|
</template>
|
</VolBox>
|
<vol-image-viewer ref="viewer"></vol-image-viewer>
|
</template>
|
<script>
|
import VolTableRender from './VolTable/VolTableRender'
|
let _errMsg
|
import { defineComponent, defineAsyncComponent } from 'vue'
|
export default defineComponent({
|
emits: ['loadBefore', 'loadAfter', 'rowChange', 'rowClick', 'rowDbClick', 'selectionChange'],
|
//https://github.com/element-plus/element-plus/issues/1483
|
//没有原先的selection属性了，看issue上使用select/selectall获取
|
//监听数组长度，如果删除了数据，现在只能被迫清除所有选中的行
|
watch: {
|
'tableData.length': {
|
handler(newLen, oldLen) {
|
this.watchRowSelectChange(newLen, oldLen)
|
}
|
},
|
'rowData.length': {
|
handler(newLen, oldLen) {
|
this.watchRowSelectChange(newLen, oldLen)
|
}
|
}
|
},
|
components: {
|
'vol-image-viewer': defineAsyncComponent(() => import('./VolImageViewer.vue')),
|
'table-render': VolTableRender,
|
VolUpload: defineAsyncComponent(() => import('./VolUpload.vue')),
|
VolBox: defineAsyncComponent(() => import('./VolBox.vue'))
|
},
|
props: {
|
rowKey: {
|
// 树形结构的主键字段，如果设置值默认会开启树形table；注意rowKey字段的值必须是唯一（2021.05.02）
|
typeof: String,
|
default: undefined
|
},
|
loadTreeChildren: {
|
// 树形结构加载子节点
|
type: Function,
|
default: (tree, treeNode, resolve) => {
|
if (resolve) {
|
return resolve([])
|
}
|
}
|
},
|
textInline: {
|
// 表格内容超出后是否换行显示（2020.01.16）
|
type: Boolean,
|
default: true
|
},
|
tableData: {
|
// 表数据源,配置了url就不用传这个参数了
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
columns: {
|
type: Array,
|
default: []
|
},
|
height: {
|
type: Number,
|
default: 0
|
},
|
maxHeight: {
|
type: Number,
|
default: 0
|
},
|
linkView: {
|
type: Function,
|
default: function () {
|
return 1
|
}
|
},
|
pagination: {
|
type: Object,
|
default: function () {
|
return { total: 0, size: 30, sortName: '' }
|
}
|
},
|
url: {
|
type: String,
|
default: ''
|
},
|
paginationHide: {
|
type: Boolean,
|
default: true
|
},
|
color: {
|
type: Boolean,
|
default: true
|
},
|
index: {
|
// 是否创建索引号,如果需要表格编辑功能，这里需要设置为true
|
type: Boolean,
|
default: false
|
},
|
allowEmpty: {
|
// 表格数据为空时是否默认为--
|
type: Boolean,
|
default: true
|
},
|
defaultLoadPage: {
|
// 传入了url，是否默认加载表格数据
|
type: Boolean,
|
default: true
|
},
|
loadKey: {
|
// 是否自动从后台加载数据源
|
type: Boolean,
|
default: true
|
},
|
single: {
|
type: Boolean, // 是否单选
|
default: false
|
},
|
doubleEdit: {
|
type: Boolean, // 是否双击启用编辑功能
|
default: true
|
},
|
beginEdit: {
|
// 编辑开始
|
type: Function,
|
default: function (row, column, index) {
|
return true
|
}
|
},
|
endEditBefore: {
|
// 结束编辑前
|
type: Function,
|
default: function (row, column, index) {
|
return true
|
}
|
},
|
endEditAfter: {
|
// 结束编辑前
|
type: Function,
|
default: function (row, column, index) {
|
return true
|
}
|
},
|
ck: {
|
// 是否显示checkbox
|
type: Boolean,
|
default: true
|
},
|
columnIndex: {
|
// 是否显示行号(2020..11.1)
|
type: Boolean,
|
default: true
|
},
|
highlightCurrentRow: {
|
//增加选中行高亮显示(2022.10.07)
|
type: Boolean,
|
default: true
|
},
|
select2Count: {
|
//超出数量显示select2组件
|
type: Number,
|
default: 2000
|
},
|
selectable: {
|
type: Function,
|
default: (row, index) => {
|
return true
|
}
|
},
|
spanMethod: {
|
type: Function,
|
default: ({ row, column, rowIndex, columnIndex }) => {}
|
},
|
lazy: {
|
//树形表格是否默认延迟加载
|
type: Boolean,
|
default: true
|
},
|
defaultExpandAll: {
|
//树形表格是否展开所有
|
type: Boolean,
|
default: false
|
},
|
expandRowKeys: {
|
//默认展开行
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
rowParentField: {
|
//树形表格父级id
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
fixed: false, //是固定行号与checkbox
|
clickEdit: true, //2021.07.17设置为点击行结束编辑
|
randomTableKey: 1,
|
visiblyColumns: [],
|
key: '',
|
realHeight: 0,
|
realMaxHeight: 0,
|
enableEdit: false, // 是否启表格用编辑功能
|
empty: this.allowEmpty ? '' : '--',
|
defaultImg: new URL('@/assets/imgs/error-img.png', import.meta.url).href,
|
loading: false,
|
footer: {},
|
total: 0,
|
formatConfig: {},
|
// defaultColor: "",
|
// 2020.09.06调整table列数据源的背景颜色
|
colors: ['primary', 'success', 'info', 'warning', 'danger'], // ["warning", "success", "danger", "info"],
|
rule: {
|
phone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
|
decimal: /(^[\-0-9][0-9]*(.[0-9]+)?)$/,
|
number: /(^[\-0-9][0-9]*([0-9]+)?)$/
|
},
|
columnNames: [],
|
rowData: [],
|
paginations: {
|
sort: '',
|
order: 'desc',
|
Foots: '',
|
total: 0,
|
// 2020.08.29增加自定义分页条大小
|
sizes: [30, 60, 100, 120],
|
size: 30, // 默认分页大小
|
Wheres: [],
|
page: 1,
|
rows: 30
|
},
|
errorFiled: '',
|
edit: { columnIndex: -1, rowIndex: -1 }, // 当前双击编辑的行与列坐标
|
editStatus: {},
|
summary: false, // 是否显示合计
|
// 目前只支持从后台返回的summaryData数据
|
summaryData: [],
|
summaryIndex: {},
|
remoteColumns: [], // 需要每次刷新或分页后从后台加载字典数据源的列配置
|
cellStyleColumns: {}, // 有背景颜色的配置
|
fxRight: false, //是否有右边固定表头
|
selectRows: [], //当前选中的行
|
isChrome: false,
|
//vol-table带数据源的单元格是否启用tag标签(下拉框等单元格以tag标签显示)
|
//2023.04.02更新voltable与main.js
|
useTag: true,
|
currentRow: {},
|
currentColumn: [],
|
fileInfo: [],
|
uploadUrl: '',
|
uploadModel: false,
|
smallCell: true
|
}
|
},
|
created() {
|
try {
|
this.useTag = this.$global.table && this.$global.table.useTag
|
this.smallCell = this.$global.table && this.$global.table.smallCell
|
} catch (error) {
|
console.log(error.message)
|
}
|
|
this.realHeight = this.getHeight()
|
this.realMaxHeight = this.getMaxHeight()
|
this.fxRight = this.columns.some((x) => {
|
return x.fixed == 'right'
|
})
|
//2021.09.21移除强制固定行号与checkbox列
|
if (
|
this.columns.some((x) => {
|
return x.fixed && x.fixed != 'right'
|
})
|
) {
|
this.fixed = true
|
}
|
//2022.04.06优化table合计固定列显示
|
// if (
|
// this.columns.some((x) => {
|
// return x.summary;
|
// })
|
// ) {
|
// this.columns.forEach((x) => {
|
// if (x.fixed && x.fixed != 'right') {
|
// x.fixed = false;
|
// }
|
// });
|
// this.fixed = false;
|
// }
|
|
// 从后台加下拉框的[是否启用的]数据源
|
let keys = []
|
let columnBind = []
|
this.summaryData.push('合计')
|
if (this.columnIndex) {
|
this.summaryData.push(' ')
|
}
|
this.initCellStyleColumns()
|
this.columns.forEach((x, _index) => {
|
if (!x.hidden) {
|
// this.summaryIndex[x.field] = _index;
|
// 2020.10.11修复求和列错位的问题
|
this.summaryData.push('')
|
this.summaryIndex[x.field] = this.summaryData.length - 1
|
}
|
// 求和
|
if (x.summary && !this.summary) {
|
this.summary = true
|
}
|
if (x.children && Array.isArray(x.children)) {
|
x.children.forEach((cl) => {
|
if (cl.bind && cl.bind.key && (!cl.bind.data || cl.bind.data.length == 0)) {
|
keys.push(cl.bind.key)
|
cl.bind.valueType = cl.type
|
columnBind.push(cl.bind)
|
}
|
})
|
} else if (x.bind && x.bind.key && (!x.bind.data || x.bind.data.length == 0)) {
|
// 写入远程
|
if (!x.bind.data) x.bind.data = []
|
if (x.bind.remote) {
|
this.remoteColumns.push(x)
|
} else if (this.loadKey) {
|
keys.push(x.bind.key)
|
x.bind.valueType = x.type
|
if (x.edit && x.edit.type) {
|
x.bind.editType = x.edit.type
|
}
|
columnBind.push(x.bind)
|
}
|
}
|
})
|
if (keys.length > 0) {
|
this.http.post('/api/Sys_Dictionary/GetVueDictionary', keys).then((dic) => {
|
dic.forEach((x) => {
|
if (x.data.length > this.select2Count) {
|
x.data.forEach((item) => {
|
item.label = item.value
|
item.value = item.key
|
})
|
}
|
const arrType = ['cascader', 'treeSelect']
|
columnBind.forEach((c) => {
|
if (arrType.indexOf(c.valueType) != -1 || arrType.indexOf(c.editType) != -1) {
|
this.columns.forEach((col) => {
|
if (col.bind && col.bind.key == c.key) {
|
col.bind.orginData = JSON.parse(JSON.stringify(x.data))
|
}
|
})
|
x.data = this.base.convertTree(x.data, (node, data, isRoot) => {
|
if (!node.inited) {
|
node.inited = true
|
node.label = node.value
|
node.value = node.key + ''
|
}
|
})
|
}
|
// 转换数据源的类型与列的类型一致(2020.04.04)
|
else if (c.key == x.dicNo && (c.valueType == 'int' || c.valueType == 'sbyte')) {
|
x.data.forEach((d) => {
|
// 2020.09.01增加对数字类型的二次判断
|
if (!isNaN(d.key)) {
|
d.key = ~~d.key
|
}
|
})
|
}
|
if (c.key == x.dicNo) c.data.push(...x.data)
|
})
|
})
|
})
|
}
|
|
this.paginations.sort = this.pagination.sortName
|
// 2020.08.29增加自定义分页条大小
|
Object.assign(this.paginations, this.pagination)
|
if (this.pagination.size) {
|
this.paginations.rows = this.pagination.size
|
}
|
this.enableEdit = this.columns.some((x) => {
|
return x.hasOwnProperty('edit')
|
})
|
let keyColumn = this.columns.find((x) => {
|
return x.isKey
|
})
|
if (keyColumn) {
|
this.key = keyColumn.field
|
}
|
this.defaultLoadPage && this.load()
|
},
|
computed: {
|
filterColumns() {
|
return this.columns.filter((x, index) => {
|
if (!x.field) {
|
x.field = x.title + index
|
}
|
return !x.hidden
|
})
|
}
|
},
|
methods: {
|
initCellStyleColumns() {
|
this.columns.forEach((x) => {
|
if (x.cellStyle) {
|
this.cellStyleColumns[x.field] = x.cellStyle
|
}
|
})
|
},
|
watchRowSelectChange(newLen, oldLen) {
|
if (newLen < oldLen && this.selectRows.length) {
|
this.selectRows = []
|
this.$refs.table.clearSelection()
|
}
|
},
|
switchChange(val, row, column) {
|
//这里在初始化的时候也会触发change事件
|
if (Object.keys(row).length <= 1) {
|
return
|
}
|
if (column.onChange) {
|
column.onChange(val, row, column)
|
}
|
},
|
inputKeyPress(row, column, $event, $e) {
|
column.onKeyPress && column.onKeyPress(row, column, $event)
|
this.getInputSummaries(null, null, $event, column)
|
},
|
extraClick(row, column) {
|
column.extra.click &&
|
column.extra.click(row, column, this.url ? this.rowData : this.tableData)
|
},
|
headerClick(column, event) {
|
if (this.clickEdit && this.edit.rowIndex != -1) {
|
if (
|
this.rowEndEdit(
|
this.url ? this.rowData[this.edit.rowIndex] : this.tableData[this.edit.rowIndex],
|
column
|
)
|
) {
|
this.edit.rowIndex = -1
|
}
|
}
|
// this.edit.rowIndex = -1;
|
},
|
rowDbClick(row, column, event) {
|
//2021.05.23增加双击行事件
|
this.$emit('rowDbClick', { row, column, event })
|
},
|
rowClick(row, column, event) {
|
//2022.02.20增加点击时表格参数判断
|
if (!column) {
|
return
|
}
|
//正在编辑时，禁止出发rowClick事件
|
if (this.edit.rowIndex == -1) {
|
this.$emit('rowClick', { row, column, event })
|
}
|
// 点击行事件(2020.11.07)
|
|
if (!this.doubleEdit) {
|
return
|
}
|
// 点击其他行时，如果点击的行与正在编辑的行相同，保持编辑状态
|
if (this.clickEdit && this.edit.rowIndex != -1) {
|
if (row.elementIndex == this.edit.rowIndex) {
|
// 点击的单元格如果不可以编辑，直接结束编辑
|
// 2020.10.12修复结束编辑时，element table高版本属性获取不到的问题
|
let _col = this.columns.find((x) => {
|
return x.field == ((event && event.property) || column.property)
|
})
|
if (_col && (!_col.edit || _col.readonly)) {
|
if (this.rowEndEdit(row, event)) {
|
this.edit.rowIndex = -1
|
}
|
}
|
return
|
}
|
if (this.rowEndEdit(row, event && event.property ? event : column)) {
|
this.edit.rowIndex = -1
|
}
|
//当正在编辑，且点击到其他行时，在原编辑的行结束编辑后，触发新行的rowClick事件
|
//正在编辑时，禁止出发rowClick事件
|
if (this.edit.rowIndex == -1) {
|
this.$emit('rowClick', { row, column, event })
|
}
|
}
|
this.rowBeginEdit(row, column)
|
},
|
dowloadFile(file) {
|
this.base.dowloadFile(
|
file.path,
|
file.name,
|
{
|
Authorization: this.$store.getters.getToken()
|
},
|
this.http.ipAddress
|
)
|
},
|
getFilePath(pathSring, column) {
|
// 获取表的图片与文件显示
|
if (!pathSring) return []
|
// 增加图片自定义操作
|
// 返回格式必须是[{name:"文件名",path:"图片全路径或base64格式"}]
|
if (column.formatter) {
|
return column.formatter(pathSring)
|
}
|
let filePath
|
if (column.base64 && pathSring.indexOf('data') != -1) {
|
filePath = (',' + pathSring)
|
.split(',data')
|
.filter((x) => {
|
return x
|
})
|
.map((m) => {
|
return 'data' + m
|
})
|
} else {
|
filePath = pathSring.replace(/\\/g, '/').split(',')
|
}
|
|
let fileInfo = []
|
for (let index = 0; index < filePath.length; index++) {
|
let file = filePath[index]
|
// 2020.12.19增加base64图片显示
|
if (column.base64) {
|
fileInfo.push({
|
name: '',
|
path: (file.indexOf('data') == -1 ? 'data:image/png;base64,' : '') + file
|
})
|
} else if (file.indexOf('.') != -1) {
|
let splitFile = file.split('/')
|
if (splitFile.length > 0) {
|
fileInfo.push({
|
name: splitFile[splitFile.length - 1],
|
path: this.base.isUrl(file) ? file : this.http.ipAddress + file
|
})
|
}
|
}
|
}
|
return fileInfo
|
},
|
// 重置table
|
reset() {
|
if (this.tableData && this.tableData.length > 0) {
|
this.tableData.splice(0)
|
}
|
if (this.rowData && this.rowData.length > 0) {
|
this.rowData.splice(0)
|
}
|
if (!this.paginationHide) {
|
this.paginations.page = 1
|
// this.paginations.rows = 30;
|
if (this.paginations.wheres && this.paginations.wheres.length > 0) {
|
this.paginations.wheres.splice(0)
|
}
|
}
|
this.errorFiled = ''
|
this.edit.columnIndex = -1
|
this.edit.rowIndex = -1
|
},
|
getHeight() {
|
// 没有定义高度与最大高度，使用table默认值
|
if (!this.height && !this.maxHeight) {
|
return null
|
}
|
// 定义了最大高度则不使用高度
|
if (this.maxHeight) {
|
return null
|
}
|
// 使用当前定义的高度
|
return this.height
|
},
|
getMaxHeight() {
|
// 没有定义高度与最大高度，使用table默认值
|
if (!this.height && !this.maxHeight) {
|
return null
|
}
|
// 定义了最大高度使用最大高度
|
if (this.maxHeight) {
|
return this.maxHeight
|
}
|
// 不使用最大高度
|
return null
|
},
|
getSelectedOptions(column) {
|
if (column.bind && column.bind.data && column.bind.data.length > 0) {
|
return column.bind.data
|
}
|
return []
|
},
|
formatterClick(row, column, event) {
|
if (column.click) {
|
column.click(row, column, event)
|
event.stopPropagation && event.stopPropagation()
|
} else {
|
this.rowClick(row, column, event)
|
}
|
},
|
initIndex({ row, rowIndex }) {
|
if (this.index) {
|
row.elementIndex = rowIndex
|
}
|
// if (rowIndex%2!==0) {
|
// return "even-row";
|
// }
|
return
|
},
|
toggleEdit(event) {},
|
setEditStatus(status) {
|
// this.columns.forEach((x) => {
|
// if (x.hasOwnProperty("edit")) {
|
// this.$set(x.edit, "status", status);
|
// }
|
// });
|
},
|
// 通过button按钮启用编辑
|
beginWithButtonEdit(scope) {
|
// url?rowData:tableData
|
this.rowBeginEdit(scope.row, this.columns[scope.$index])
|
},
|
rowBeginEdit(row, column) {
|
if (this.edit.rowIndex != -1) {
|
return
|
}
|
let _row = this.columns.find((x) => x.field == column.property)
|
if (_row) {
|
if (_row.readonly) {
|
return
|
}
|
if (
|
//不能编辑的字段、switch，点击不开启启编辑功能
|
!_row.edit ||
|
(_row.edit.keep && _row.edit.type == 'switch')
|
) {
|
return
|
}
|
}
|
if (!this.enableEdit) return
|
_errMsg = ''
|
// 编辑前
|
this.columns
|
.filter((x) => {
|
return x.bind && x.bind.data && x.bind.data.length
|
})
|
.forEach((column) => {
|
let val = row[column.field]
|
if (typeof column.bind.data[0].key == 'string') {
|
if (typeof val == 'number') {
|
row[column.field] = row[column.field] + ''
|
}
|
} else {
|
//多选或者级联编辑回写,2023.01.06
|
if (Array.isArray(val)) {
|
val = val.map((v) => {
|
return v * 1
|
})
|
row[column.field] = val
|
} else if (typeof val == 'string' && val) {
|
let _val = val * 1
|
if (_val + '' === val) {
|
row[column.field] = _val
|
}
|
}
|
}
|
})
|
if (!this.beginEdit(row, column, row.elementIndex)) return
|
if (row.hasOwnProperty('elementIndex')) {
|
if (this.edit.rowIndex == row.elementIndex) {
|
return
|
}
|
this.edit.rowIndex = row.elementIndex
|
}
|
},
|
rowEndEdit(row, column, event) {
|
if (this.clickEdit && event) {
|
return true
|
}
|
if (!this.enableEdit) {
|
if (!this.errorFiled) {
|
if (this.edit.rowIndex != -1 && !this.endEditAfter(row, column, this.edit.rowIndex)) {
|
return false
|
}
|
this.edit.rowIndex = -1
|
}
|
return true
|
}
|
if (!this.doubleEdit && event) {
|
return true
|
}
|
let _row = this.url ? this.rowData[this.edit.rowIndex] : this.tableData[this.edit.rowIndex]
|
// 结束编辑前
|
if (!this.endEditBefore(_row, column, this.edit.rowIndex)) return false
|
if (this.edit.rowIndex != -1) {
|
//2022.06.26修复表格内容切换后行数不一致时不能编辑的问题
|
if (this.edit.rowIndex - 1 > (this.rowData || this.tableData).length) {
|
this.edit.rowIndex = -1
|
return
|
}
|
let row = (this.url ? this.rowData : this.tableData)[this.edit.rowIndex]
|
for (let index = 0; index < this.columns.length; index++) {
|
const _column = this.columns[index]
|
if (_column.edit) {
|
if (!this.validateRow(row, _column)) {
|
return
|
}
|
}
|
}
|
}
|
if (!this.endEditAfter(_row, column, this.edit.rowIndex)) return false
|
this.edit.rowIndex = -1
|
return true
|
},
|
validateRow(row, option1) {
|
if (!this.validateColum(option1, row)) {
|
this.errorFiled = option1.field
|
// 2022.05.06 修改错误信息重复的问题
|
this.$message.error(option1.title + _errMsg)
|
return false
|
}
|
this.errorFiled = ''
|
return true
|
},
|
validateColum(option, data) {
|
if (option.hidden || option.bind || !data) return true
|
let val = data[option.field]
|
if (option.require || option.required) {
|
if (val != '0' && (val === '' || val === undefined)) {
|
if (!this.errorFiled) {
|
_errMsg = '不能为空'
|
}
|
return false
|
}
|
}
|
if (!option.edit) {
|
return true
|
}
|
let editType = option.edit.type
|
// 验证数字
|
if (editType == 'int' || editType == 'decimal' || editType == 'number') {
|
if (val == '' || val == undefined) return true
|
if (editType == 'decimal') {
|
if (!this.rule.decimal.test(val)) {
|
_errMsg = '只能是数字'
|
return false
|
}
|
} else if (!this.rule.decimal.test(val)) {
|
_errMsg = '只能是数字'
|
return false
|
}
|
if (
|
option.edit.min != undefined &&
|
typeof option.edit.min === 'number' &&
|
val < option.edit.min
|
) {
|
_errMsg = '不能小于' + option.edit.min
|
return false
|
}
|
if (
|
option.edit.max != undefined &&
|
typeof option.edit.max === 'number' &&
|
val > option.edit.max
|
) {
|
_errMsg = '不能大于' + option.edit.max
|
return false
|
}
|
return true
|
}
|
|
// 验证字符串
|
if (val && (editType == 'text' || editType == 'string')) {
|
if (
|
option.edit.min != undefined &&
|
typeof option.edit.min === 'number' &&
|
val.length < option.edit.min
|
) {
|
_errMsg = '至少' + option.edit.min + '个字符'
|
return false
|
}
|
if (
|
option.edit.max != undefined &&
|
typeof option.edit.max === 'number' &&
|
val.length > option.edit.max
|
) {
|
_errMsg = '最多' + option.edit.max + '个字符'
|
return false
|
}
|
}
|
return true
|
},
|
delRow() {
|
let rows = this.getSelected()
|
if (rows.length == 0) return this.$Message.error('请选择要删除的行!')
|
|
let data = this.url ? this.rowData : this.tableData
|
let indexArr = this.getSelectedIndex()
|
if (indexArr.length == 0) {
|
return this.$Message.error("删除操作必须设置VolTable的属性index='true'")
|
}
|
// if (indexArr.length == 0 || !this.key) {
|
// return this.$message.error(
|
// "请设置index=true属性或指columns的字段为key"
|
// );
|
// }
|
if (indexArr.length == 0) {
|
// let keyValues=[]
|
// rows.forEach(x=>{
|
// if (x[this.key]) {
|
// }
|
// keyValues.push(x[this.key])
|
// })
|
// data.find(x=>)
|
} else {
|
for (let i = data.length - 1; i >= 0; i--) {
|
if (indexArr.indexOf(i) != -1) {
|
data.splice(i, 1)
|
}
|
}
|
}
|
this.edit.rowIndex = -1
|
return rows
|
},
|
addRow(row) {
|
if (!row) {
|
row = {}
|
}
|
this.columns.forEach((x) => {
|
// 2022.05.06 添加行时，如果列有编辑属性，设置开启编辑(避免关闭编辑后，无法再次启用编辑)??
|
//x.readonly = false;
|
if (!row.hasOwnProperty(x.field)) {
|
if (x.edit && x.edit.type == 'switch') {
|
row[x.field] = x.type == 'bool' ? false : 0
|
} else if (!row.hidden) {
|
// 2020.09.06添加行时，设置默认字段
|
row[x.field] = undefined
|
}
|
}
|
})
|
if (!this.url) {
|
this.tableData.push(row)
|
return
|
}
|
this.rowData.push(row)
|
},
|
viewImg(row, column, url, $event, index) {
|
$event.stopPropagation()
|
const imgs = this.getFilePath(row[column.field], column).map((x) => {
|
return x.path
|
})
|
this.$refs.viewer.show(imgs, index)
|
//this.base.previewImg(url);
|
// window.open(row[column.field]);
|
},
|
link(row, column, $e) {
|
$e.stopPropagation()
|
this.$props.linkView(row, column)
|
},
|
getSelected() {
|
return this.selectRows
|
},
|
getSelectedIndex() {
|
if (!this.index) {
|
// 只有设置了属性index才有索引行
|
return []
|
}
|
let indexArr = this.selectRows.map((x) => {
|
return x.elementIndex
|
})
|
return indexArr || []
|
},
|
GetTableDictionary(rows) {
|
// 分页或刷新或重新绑定数据源
|
if (this.remoteColumns.length == 0 || !rows || rows.length == 0) return
|
let remoteInfo = {}
|
for (let index = 0; index < this.remoteColumns.length; index++) {
|
const column = this.remoteColumns[index]
|
// column.bind.data.splice(0);
|
let key = column.bind.key
|
let data = []
|
rows.forEach((row) => {
|
if (row[column.field] || row[column.field] == '0') {
|
if (data.indexOf(row[column.field]) == -1) {
|
data.push(row[column.field])
|
}
|
}
|
})
|
if (data.length > 0) {
|
remoteInfo[key] = data
|
}
|
}
|
if (remoteInfo.length == 0) return
|
// ha= Object.assign([], ha, hb)
|
this.http.post('/api/Sys_Dictionary/GetTableDictionary', remoteInfo).then((dic) => {
|
dic.forEach((x) => {
|
this.remoteColumns.forEach((column) => {
|
if (column.bind.key == x.key) {
|
column.bind.data = Object.assign([], column.bind.data, x.data)
|
// column.bind.data.push(...x.data);
|
}
|
})
|
})
|
this.$emit('dicInited', dic)
|
})
|
},
|
load(query, isResetPage) {
|
// isResetPage重置分页数据
|
if (!this.url) return
|
if (isResetPage) {
|
this.resetPage()
|
}
|
let param = {
|
page: this.paginations.page,
|
rows: this.paginationHide ? 1000 : this.paginations.rows,
|
sort: this.paginations.sort,
|
order: this.paginations.order,
|
wheres: [] // 查询条件，格式为[{ name: "字段", value: "xx" }]
|
}
|
let status = true
|
// 合并查询信息(包查询分页、排序、查询条件等)
|
if (query) {
|
param = Object.assign(param, query)
|
}
|
/* 查询前处理(如果需要查询条件，实现组件方法loadBefore方法即可:
|
loadBefore=(param, callBack)=>{
|
param.wheres = [{ name: "PhoneNo", value: "13419098211" }];
|
callBack(true);
|
})
|
*/
|
this.$emit('loadBefore', param, (result) => {
|
status = result
|
})
|
if (!status) return
|
|
if (param.wheres && param.wheres instanceof Array) {
|
param.wheres = JSON.stringify(param.wheres)
|
}
|
this.loading = true
|
let url = param.url || this.url
|
param.url = undefined
|
this.http.post(url, param).then(
|
(data) => {
|
//2021.06.04修复tree不刷新的问题
|
if (this.rowKey) {
|
this.randomTableKey++
|
this.rowData.splice(0)
|
}
|
this.loading = false
|
let rows = data.rows || []
|
// 查询返回结果后处理
|
// 2020.10.30增加查询后返回所有的查询信息
|
this.$emit(
|
'loadAfter',
|
rows,
|
(result) => {
|
status = result
|
},
|
data
|
)
|
if (!status) return
|
this.GetTableDictionary(data.rows)
|
|
if (this.rowParentField) {
|
rows = this.base.convertTree(rows, null, this.rowKey, this.rowParentField)
|
}
|
this.rowData = rows
|
this.paginations.total = data.total
|
// 合计
|
this.getSummaries(data)
|
// this.$nextTick(() => {
|
// this.$refs.table.doLayout();
|
// });
|
},
|
(error) => {
|
this.loading = false
|
// this.$Message.error(error || "网络异常");
|
}
|
)
|
}, // 获取统计
|
getSummaries(data) {
|
if (!this.summary || !data.summary) return
|
this.summaryData.splice(0)
|
// 开启了行号的，+1
|
if (this.columnIndex) {
|
this.summaryData.push('')
|
}
|
// 如果有checkbox，应该算作是第一行
|
if (this.ck) {
|
this.summaryData.push('')
|
}
|
|
this.columns.forEach((col) => {
|
if (col.children && col.children.length) {
|
col.children.forEach((item) => {
|
this.getColumnSummaries(item, data)
|
})
|
} else {
|
this.getColumnSummaries(col, data)
|
}
|
})
|
if (this.summaryData.length > 0 && this.summaryData[0] == '') {
|
this.summaryData[0] = '合计'
|
}
|
},
|
getColumnSummaries(col, data) {
|
if (!col.hidden) {
|
if (data.summary.hasOwnProperty(col.field)) {
|
let sum = data.summary[col.field]
|
//2024.01.07增加自定义合计格式化
|
if (col.summaryFormatter) {
|
sum = col.summaryFormatter(sum, col, data, this.summaryData)
|
} else if (sum) {
|
sum = (sum * 1.0).toFixed(col.numberLength || 2).replace('.00', '') * 1.0
|
}
|
this.summaryData.push(sum)
|
} else {
|
this.summaryData.push('')
|
}
|
}
|
},
|
getInputChangeSummaries() {},
|
handleSizeChange(val) {
|
this.paginations.size = val
|
this.paginations.rows = val
|
this.load()
|
},
|
handleCurrentChange(val) {
|
this.paginations.page = val
|
this.load()
|
},
|
sortChange(sort) {
|
this.paginations.sort = sort.prop
|
this.paginations.order = sort.order == 'ascending' ? 'asc' : 'desc'
|
this.load()
|
},
|
resetPage() {
|
// 重置查询分页
|
// this.paginations.rows = 30;
|
this.paginations.page = 1
|
},
|
selectionChange(selection) {
|
// console.log(selection);
|
// 选择行事件,只有单选才触发
|
this.selectRows = selection
|
if (this.single) {
|
if (selection.length == 1) {
|
this.$emit('rowChange', selection[0])
|
}
|
if (selection.length > 1) {
|
let _row = selection[selection.length - 1]
|
this.$refs.table.toggleRowSelection(selection[0])
|
this.selectRows = [_row]
|
}
|
}
|
// 将selectionchange暴露出去
|
this.$emit('selectionChange', selection)
|
},
|
getColor(row, column) {
|
let val = row[column.field]
|
if (column.getColor && typeof column.getColor === 'function') {
|
let _color = column.getColor(row, column)
|
if (_color) {
|
return _color
|
}
|
}
|
if (!val && val != '0') {
|
return undefined
|
}
|
if (!this.formatConfig[column.field]) {
|
this.formatConfig[column.field] = [val]
|
return this.colors[0]
|
}
|
let index = this.formatConfig[column.field].indexOf(val)
|
if (index != -1) {
|
return this.colors[index]
|
}
|
if (this.formatConfig[column.field].length > 5) {
|
return ''
|
}
|
|
if (index == -1) {
|
this.formatConfig[column.field].push(val)
|
index = this.formatConfig[column.field].length - 1
|
}
|
return this.colors[index] || 'info'
|
},
|
formatterDate(row, column) {
|
return (row[column.field] || '').substr(0, 10)
|
},
|
formatter(row, column, template) {
|
if (!template) return row[column.property]
|
let val = row[column.field]
|
if (!val && val != 0) return val
|
// 是否值
|
if (column.edit && column.edit.type == 'switch') {
|
return val ? '是' : '否'
|
}
|
if (!column.bind || !column.bind.data) {
|
return row[column.field]
|
}
|
|
if (
|
column.edit &&
|
(column.edit.type == 'selectList' ||
|
column.edit.type == 'treeSelect' ||
|
column.bind.type == 'cascader' ||
|
column.bind.type == 'treeSelect')
|
) {
|
if (!Array.isArray(val)) {
|
row[column.field] = (val + '').split(',')
|
} else {
|
val = val.join(',')
|
}
|
return this.getSelectFormatter(column, val)
|
}
|
// 编辑多选table显示
|
// if (
|
// column.bind.type == "selectList" ||
|
// column.bind.type == "checkbox" ||
|
// column.bind.type == "cascader" ||
|
// column.bind.type == "treeSelect"
|
// ) {
|
if (typeof val === 'string' && val.indexOf(',') != -1) {
|
return this.getSelectFormatter(column, val)
|
}
|
//}
|
let source = column.bind.data.filter((x) => {
|
// return x.key != "" && x.key == val;
|
// 2020.06.06修复单独使用table组件时,key为数字0时转换成文本失败的问题
|
return x.key !== '' && x.key !== undefined && x.key + '' === val + ''
|
})
|
if (source && source.length > 0) val = source[0].label || source[0].value
|
return val
|
},
|
getSelectFormatter(column, val) {
|
// 编辑多选table显示
|
let valArr = (val + '').split(',')
|
for (let index = 0; index < valArr.length; index++) {
|
;(column.bind.orginData && column.bind.orginData.length
|
? column.bind.orginData
|
: column.bind.data
|
).forEach((x) => {
|
// 2020.06.06修复数据源为selectList时,key为数字0时不能转换文本的问题
|
if (x.key !== '' && x.key !== undefined && x.key + '' == valArr[index] + '') {
|
valArr[index] = x.label || x.value
|
}
|
})
|
}
|
return valArr.join(',')
|
},
|
onChange(scope, val, event, column) {
|
// 2020.09.03修复onChange不触发的问题
|
let row = scope.row
|
if (column.onChange && !column.onChange(row, val, event)) {
|
return
|
}
|
// 输入框求和实时计算
|
this.getInputSummaries(scope, val, event, column)
|
},
|
// input输入实时求和
|
getInputSummaries(scope, val, event, column) {
|
// column列设置了summary属性的才计算值
|
if (!column.summary) return
|
let sum = 0
|
// let _index = 0;
|
;(this.url ? this.rowData : this.tableData).forEach((x, index) => {
|
if (x.hasOwnProperty(column.field) && !isNaN(x[column.field])) {
|
// _index = index;
|
sum += x[column.field] * 1
|
}
|
})
|
if (sum) {
|
if (column.summary == 'avg') {
|
sum = sum / (this.rowData.length || this.tableData.length || 1)
|
}
|
sum = (sum * 1.0).toFixed(column.numberLength || 2).replace('.00', '') * 1.0
|
}
|
this.summaryData[this.summaryIndex[column.field]] = sum
|
},
|
getSummaryData({ columns, data }) {
|
return this.summaryData
|
},
|
getCellStyle(row) {
|
// 2020.12.13增加设置单元格颜色
|
if (row.column.property) {
|
return (
|
this.cellStyleColumns[row.column.property] &&
|
this.cellStyleColumns[row.column.property](row.row, row.rowIndex, row.columnIndex)
|
)
|
}
|
},
|
compareDate(date1, date2) {
|
if (!date2) {
|
return true
|
}
|
return date1.valueOf() < (typeof date2 == 'number' ? date2 : new Date(date2).valueOf())
|
},
|
getDateOptions(date, item) {
|
//2021.07.17设置时间可选范围
|
if ((!item.min && !item.max) || !date) {
|
return false
|
}
|
if (item.min && item.min.indexOf(' ') == -1) {
|
//不设置时分秒，后面会自动加上 08:00
|
item.min = item.min + ' 00:00:000'
|
}
|
return this.compareDate(date, item.min) || !this.compareDate(date, item.max)
|
},
|
getDateFormat(column) {
|
if (column.format) {
|
return column.format
|
}
|
if (column.edit.type == 'month') {
|
return 'YYYY-MM'
|
}
|
//见https://day.js.org/docs/zh-CN/display/format
|
return column.edit.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'
|
},
|
userSelect(selection, row) {
|
this.selectRows = selection
|
if (!this.single) {
|
this.$emit('rowChange', { row, selection })
|
}
|
},
|
isEmptyTag(row, column) {
|
if (!row[column.field] && row[column.field] != '0') {
|
return 'empty-tag'
|
}
|
return ''
|
},
|
filterChildrenColumn(children) {
|
if (!children) {
|
return []
|
}
|
return children.filter((x) => {
|
return !x.hidden
|
})
|
},
|
initColumnDisabled(row, column) {
|
return column.getDisabled && column.getDisabled(row, column)
|
},
|
showUpload(row, column) {
|
this.fileInfo = (row[column.field] || '')
|
.split(',')
|
.filter((x) => {
|
return x
|
})
|
.map((item) => {
|
return { path: item, name: '' }
|
})
|
this.currentRow = row
|
this.currentColumn = column
|
if (this.currentColumn.edit.autoUpload === undefined) {
|
this.currentColumn.edit.autoUpload = true
|
}
|
if (this.currentColumn.edit.multiple === undefined) {
|
this.currentColumn.edit.multiple = false
|
}
|
|
if (this.currentColumn.edit.url === undefined) {
|
this.uploadUrl = 'api/' + (this.url || '').replace('/api', 'api').split('/')[1] + '/upload'
|
} else {
|
this.uploadUrl = this.currentColumn.edit.url
|
}
|
this.uploadModel = true
|
},
|
uploadAfter(result, files) {
|
this.currentColumn.uploadAfter && this.currentColumn.uploadAfter(result, files)
|
return true
|
},
|
uploadBefore(files, params) {
|
this.currentColumn.uploadBefore &&
|
this.currentColumn.uploadBefore(files, this.currentRow, params)
|
return true
|
},
|
saveUpload() {
|
//生成保存后返回的路径
|
let arr = this.fileInfo.map((x) => {
|
if (x.path) {
|
return x.path
|
}
|
return result.data + x.name
|
})
|
|
this.currentRow[this.currentColumn.field] = arr.join(',')
|
this.uploadModel = false
|
return true
|
},
|
expandChange(row, expandedRows) {
|
// 当用户对某一行展开或者关闭的时
|
if (!this.defaultExpandAll && !this.lazy) {
|
if (expandedRows) {
|
if (this.expandRowKeys.indexOf(row[this.rowKey]) == -1) {
|
this.expandRowKeys.push(row[this.rowKey])
|
}
|
} else {
|
let _index = this.expandRowKeys.findIndex((x) => {
|
return x == row[this.rowKey]
|
})
|
if (_index != -1) {
|
this.expandRowKeys.splice(_index, 1)
|
}
|
}
|
}
|
},
|
handleImageError($e) {
|
$e.target.src = this.defaultImg
|
},
|
cellSpanMethod({ row, column, rowIndex, columnIndex }) {
|
return this.spanMethod(
|
{ row, column, rowIndex, columnIndex },
|
this.url ? this.rowData : this.tableData
|
)
|
}
|
}
|
})
|
</script>
|
<style lang="less" scoped>
|
.vol-table {
|
position: relative;
|
|
.mask {
|
opacity: 0.2;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
background: #d0d0d0;
|
z-index: 100;
|
}
|
|
.message {
|
text-align: center;
|
color: #635c5c;
|
font-size: 15px;
|
font-weight: 600;
|
background: #eee;
|
transform: translateY(-50%);
|
top: 50%;
|
position: absolute;
|
z-index: 200;
|
left: 0;
|
right: 0;
|
width: 150px;
|
margin: 0 auto;
|
line-height: 40px;
|
border-radius: 4px;
|
border: 1px solid #a09e9e;
|
}
|
}
|
|
.e-item {
|
display: flex;
|
|
> div:first-child {
|
flex: 1;
|
}
|
}
|
|
.vol-table ::v-deep(.el-pager .number) {
|
padding: 0 7px;
|
border-radius: 5px;
|
border: 1px solid #e6e6e6;
|
margin-left: 8px;
|
font-weight: 500;
|
min-width: 28px;
|
height: 27px;
|
}
|
|
.vol-table ::v-deep(.el-pager .number.active) {
|
background: #ed4014;
|
color: #fff;
|
}
|
|
.vol-table ::v-deep(.el-pagination .el-input__wrapper) {
|
height: 27px;
|
}
|
|
.vol-table .t-file {
|
color: #1e8cff;
|
cursor: pointer;
|
border-bottom: 1px solid;
|
padding-bottom: 2px;
|
}
|
|
.vol-table .empty-tag {
|
border: none;
|
background: none;
|
}
|
|
.v-table ::v-deep(.el-date-editor .el-icon-date),
|
.v-table ::v-deep(.el-date-editor .el-icon-time) {
|
width: 10px;
|
}
|
|
.column-required {
|
position: relative;
|
color: #f20303;
|
font-size: 14px;
|
top: 2px;
|
right: 2px;
|
}
|
</style>
|
|
<style scoped>
|
/* .v-table ::v-deep(.even-row){
|
background: rgb(245,247,250);
|
} */
|
.pagination {
|
text-align: right;
|
padding: 2px 28px;
|
border: 1px solid #eee;
|
border-top: 0px;
|
}
|
|
/* .v-table ::v-deep(.el-input .el-input__inner) {
|
padding: 0 7px;
|
} */
|
.v-table ::v-deep(.el-table__header th) {
|
/* padding: 0px !important; */
|
background-color: #f8f8f9 !important;
|
font-size: 13px;
|
/* height: 46px; */
|
color: #616161;
|
}
|
|
.v-table ::v-deep(.el-table__header th.is-sortable) {
|
padding: 3px !important;
|
}
|
|
.vol-table.text-inline ::v-deep(.el-table__body .cell),
|
.vol-table.text-inline ::v-deep(.el-table__header-wrapper .cell) {
|
word-break: inherit !important;
|
white-space: nowrap !important;
|
}
|
|
/* .v-table ::v-deep(.el-table__body td) {
|
padding: 9px 0 !important;
|
} */
|
|
.v-table ::v-deep(.el-table__footer td) {
|
padding: 7px 0 !important;
|
}
|
|
.vol-table ::v-deep(.el-table-column--selection .cell) {
|
display: inline;
|
}
|
|
.vol-table.text-inline ::v-deep(.el-table th > .cell) {
|
white-space: nowrap !important;
|
}
|
|
.vol-table .table-img {
|
height: 40px;
|
border-radius: 5px;
|
margin-right: 10px;
|
width: 40px;
|
object-fit: cover;
|
}
|
|
.vol-table .table-img:hover {
|
cursor: pointer;
|
}
|
|
.vol-table ::v-deep(.cell) {
|
padding: 2px 10px;
|
}
|
|
.vol-table ::v-deep(.cell .el-tag) {
|
padding: 5px 9px;
|
}
|
|
.table-input {
|
color: rgb(104, 103, 103);
|
padding: 3px 10px;
|
height: 32px;
|
line-height: 32px;
|
width: 100%;
|
border-radius: 4px;
|
border: 1px solid #dcdcdc;
|
}
|
|
.table-input:focus {
|
outline: 1px solid #49a3fd;
|
}
|
|
.small-table ::v-deep(.el-pagination .el-input__wrapper) {
|
height: 27px;
|
}
|
|
.small-table ::v-deep(.el-table__cell) {
|
padding: 6px 0;
|
font-size: 13px;
|
}
|
|
.small-table ::v-deep(.cell-tag) {
|
padding: 0 5px !important;
|
height: 19px;
|
}
|
</style>
|
