JeroBoot/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【fix ESLint】src/components/jero/JEditableTable

Browse Source
This commit is contained in:
zhaoxiao
2023-03-06 09:07:41 +08:00
parent d0048f4c5f
commit 3e8bfe2f4e
1 changed files with 469 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/jero/JEditableTable.vue
+86 -82
View File
@@ -6,7 +6,7 @@
<a-row type="flex">
<a-col>
<slot name="buttonBefore" :target="getVM()"/>
<slot name="buttonBefore" :target="getVM()" />
</a-col>
<a-col>
<!-- 操作按钮 -->
@@ -18,20 +18,20 @@
<a-col :span="12">选项</a-col>
<a-col :span="12" style="text-align: right;">
<a-tooltip title="保存为默认值">
<a-button type="link" icon="save" size="small" style="position: relative;left:4px;" @click="onAddButtonSettingsSave"/>
<a-button type="link" icon="save" size="small" style="position: relative;left:4px;" @click="onAddButtonSettingsSave" />
</a-tooltip>
</a-col>
</a-row>
<template slot="content">
<a-form-model layout="horizontal" :labelCol="{span:8}" :wrapperCol="{span:16}">
<a-form-model-item label="添加行数">
<a-input-number v-model="settings.addRowNum" :min="1"/>
<a-input-number v-model="settings.addRowNum" :min="1" />
</a-form-model-item>
<a-form-model-item label="添加位置">
<a-input-number v-model="settings.addIndex" :min="0" :max="rows.length"/>
<a-input-number v-model="settings.addIndex" :min="0" :max="rows.length" />
<p style="font-size: 12px;color:#aaa;line-height: 14px;text-align: right;margin: 0;">0 = 最底部</p>
</a-form-model-item>
<a-divider style="margin: 8px 0;"/>
<a-divider style="margin: 8px 0;" />
<a-checkbox v-model="settings.addScrollToBottom">添加后滚动到底部</a-checkbox>
</a-form-model>
</template>
@@ -54,11 +54,11 @@
</div>
</a-col>
<a-col>
<slot name="buttonAfter" :target="getVM()"/>
<slot name="buttonAfter" :target="getVM()" />
</a-col>
</a-row>
<slot name="actionButtonAfter" :target="getVM()"/>
<slot name="actionButtonAfter" :target="getVM()" />
<div :id="`${caseId}inputTable`" class="input-table">
<!-- 渲染表头 -->
@@ -129,17 +129,17 @@
>
<!-- 左侧固定td -->
<div v-if="dragSort" class="td td-ds" :style="style.tdLeft" @dblclick="_handleRowInsertDown(rowIndex)" >
<div v-if="dragSort" class="td td-ds" :style="style.tdLeft" @dblclick="_handleRowInsertDown(rowIndex)">
<a-dropdown :trigger="['click']" :getPopupContainer="getParentContainer">
<div class="td-ds-icons">
<a-icon type="align-left"/>
<a-icon type="align-right"/>
<a-icon type="align-left" />
<a-icon type="align-right" />
</div>
<a-menu slot="overlay">
<a-menu-item key="0" :disabled="rowIndex===0" @click="_handleRowMoveUp(rowIndex)">向上移</a-menu-item>
<a-menu-item key="1" :disabled="rowIndex===(rows.length-1)" @click="_handleRowMoveDown(rowIndex)">向下移</a-menu-item>
<a-menu-divider/>
<a-menu-divider />
<a-menu-item key="3" @click="_handleRowInsertDown(rowIndex)">插入一行</a-menu-item>
</a-menu>
</a-dropdown>
@@ -152,11 +152,11 @@
:id="id"
:key="i"
:checked="selectedRowIds.indexOf(id) !== -1"
@change="handleChangeLeftCheckbox"/>
@change="handleChangeLeftCheckbox" />
</template>
</div>
<div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
<span>{{ rowIndex+1 }}</span>
<span>{{ rowIndex + 1 }}</span>
</div>
<!-- 右侧动态生成td -->
<div
@@ -201,7 +201,7 @@
</template>
<!-- select -->
<template v-else-if="col.type === formTypes.select">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<a-select
v-if="isEditRow(row, col)"
:id="id"
@@ -230,7 +230,7 @@
<!-- 部门选择 -->
<template v-else-if="col.type === formTypes.sel_depart">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<j-select-depart
v-if="isEditRow(row, col)"
:id="id"
@@ -254,7 +254,7 @@
<!-- 用户选择 -->
<template v-else-if="col.type === formTypes.sel_user">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<j-select-user-by-dep
v-if="isEditRow(row, col)"
:id="id"
@@ -278,7 +278,7 @@
<!-- date -->
<template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<j-date
v-if="isEditRow(row, col)"
:id="id"
@@ -304,7 +304,7 @@
</template>
<!-- input_pop -->
<template v-else-if="col.type === formTypes.input_pop">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<j-input-pop
v-if="isEditRow(row, col)"
:id="id"
@@ -329,8 +329,9 @@
</template>
<!-- upload -->
<div v-else-if="col.type === formTypes.upload" :key="i">
<template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
<template v-if="uploadValues[id] != null">
<a-input
v-for="(file,fileKey) of [(uploadValues[id]||{})]"
:key="fileKey"
:readOnly="true"
:value="file.name"
@@ -338,13 +339,13 @@
<template slot="addonBefore" style="width: 30px">
<a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
<a-icon type="loading"/>
<a-icon type="loading" />
</a-tooltip>
<a-tooltip v-else-if="file.status==='done'" title="上传完成">
<a-icon type="check-circle" style="color:#00DB00;"/>
<a-icon type="check-circle" style="color:#00DB00;" />
</a-tooltip>
<a-tooltip v-else :title="file.message||'上传失败'">
<a-icon type="exclamation-circle" style="color:red;"/>
<a-icon type="exclamation-circle" style="color:red;" />
</a-tooltip>
</template>
@@ -354,15 +355,15 @@
<a-icon
v-if="file.status!=='uploading'"
type="setting"
style="cursor: pointer;"/>
style="cursor: pointer;" />
</a-tooltip>
<a-menu slot="overlay">
<a-menu-item v-if="col.allowDownload!==false" @click="handleClickDownloadFile(id)">
<span><a-icon type="download"/>&nbsp;下载</span>
<span><a-icon type="download" />&nbsp;下载</span>
</a-menu-item>
<a-menu-item v-if="col.allowRemove!==false" @click="handleClickDelFile(id)">
<span><a-icon type="delete"/>&nbsp;删除</span>
<span><a-icon type="delete" />&nbsp;删除</span>
</a-menu-item>
</a-menu>
</a-dropdown>
@@ -392,7 +393,7 @@
<!-- update-begin-author:taoyan date:0827 for：popup -->
<template v-else-if="col.type === formTypes.popup">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<j-popup
v-if="isEditRow(row, col)"
:id="id"
@@ -422,35 +423,36 @@
<!-- update-beign-author:taoyan date:0827 for：文件/图片逻辑新增 -->
<div v-else-if="col.type === formTypes.file" :key="i">
<template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
<div :key="fileKey" style="position: relative;">
<template v-if="uploadValues[id] != null">
<div :key="fileKey" style="position: relative;" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
<a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
<a-icon type="loading" style="color:red;"/>
<a-icon type="loading" style="color:red;" />
<span style="color:red;margin-left:5px">{{ file.status }}</span>
</a-tooltip>
<a-tooltip v-else-if="file.status==='done'" :title="file.name">
<a-icon type="paper-clip" />
<span style="margin-left:5px">{{ getEllipsisWord(file.name,5) }}</span>
<span style="margin-left:5px">{{ getEllipsisWord(file.name, 5) }}</span>
</a-tooltip>
<a-tooltip v-else :title="file.message||'上传失败'">
<a-icon type="exclamation-circle" style="color:red;"/>
<span style="margin-left:5px">{{ getEllipsisWord(file.name,5) }}</span>
<a-icon type="exclamation-circle" style="color:red;" />
<span style="margin-left:5px">{{ getEllipsisWord(file.name, 5) }}</span>
</a-tooltip>
<template style="width: 30px">
<a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="getParentContainer" style="margin-left: 10px;">
<a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="getParentContainer"
style="margin-left: 10px;">
<a-tooltip title="操作" :getPopupContainer="getParentContainer">
<a-icon v-if="file.status!=='uploading'" type="setting" style="cursor: pointer;"/>
<a-icon v-if="file.status!=='uploading'" type="setting" style="cursor: pointer;" />
</a-tooltip>
<a-menu slot="overlay">
<a-menu-item v-if="col.allowDownload!==false" @click="handleClickDownFileByUrl(id)">
<span><a-icon type="download"/>&nbsp;下载</span>
<span><a-icon type="download" />&nbsp;下载</span>
</a-menu-item>
<a-menu-item @click="handleClickDelFile(id)">
<span><a-icon type="delete"/>&nbsp;删除</span>
<span><a-icon type="delete" />&nbsp;删除</span>
</a-menu-item>
<a-menu-item @click="handleMoreOperation(id,col,col)">
<span><a-icon type="bars" /> 更多</span>
@@ -481,33 +483,34 @@
</div>
<div v-else-if="col.type === formTypes.image" :key="i">
<template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
<div :key="fileKey" style="position: relative;">
<template v-if="uploadValues[id] != null">
<div :key="fileKey" style="position: relative;" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
<template v-if="!uploadValues[id] || !(uploadValues[id]['url'] || uploadValues[id]['path'] || uploadValues[id]['message'])">
<a-icon type="loading"/>
<a-icon type="loading" />
</template>
<template v-else-if="uploadValues[id]['path']">
<img class="j-editable-image" :src="getCellImageView(id)" alt="无图片" @click="handleMoreOperation(id,'img',col)"/>
<img class="j-editable-image" :src="getCellImageView(id)" alt="无图片" @click="handleMoreOperation(id,'img',col)" />
</template>
<a-tooltip v-else :title="file.message||'上传失败'" @click="handleClickShowImageError(id)">
<a-icon type="exclamation-circle" style="color:red;"/>
<a-icon type="exclamation-circle" style="color:red;" />
</a-tooltip>
<template style="width: 30px">
<a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="getParentContainer" style="margin-left: 10px;">
<a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="getParentContainer"
style="margin-left: 10px;">
<a-tooltip title="操作" :getPopupContainer="getParentContainer">
<a-icon
v-if="file.status!=='uploading'"
type="setting"
style="cursor: pointer;"/>
style="cursor: pointer;" />
</a-tooltip>
<a-menu slot="overlay">
<a-menu-item v-if="col.allowDownload!==false" @click="handleClickDownFileByUrl(id)">
<span><a-icon type="download"/>&nbsp;下载</span>
<span><a-icon type="download" />&nbsp;下载</span>
</a-menu-item>
<a-menu-item @click="handleClickDelFile(id)">
<span><a-icon type="delete"/>&nbsp;删除</span>
<span><a-icon type="delete" />&nbsp;删除</span>
</a-menu-item>
<a-menu-item @click="handleMoreOperation(id,'img',col)">
<span><a-icon type="bars" /> 更多</span>
@@ -541,7 +544,7 @@
<!-- radio-begin -->
<template v-else-if="col.type === formTypes.radio">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<a-radio-group
:id="id"
:key="i"
@@ -556,7 +559,7 @@
<!-- select多选 -begin -->
<template v-else-if="col.type === formTypes.list_multi">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<a-select
v-if="isEditRow(row, col)"
:id="id"
@@ -584,7 +587,7 @@
<!-- select搜索 -begin -->
<template v-else-if="col.type === formTypes.sel_search">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<a-select
v-if="isEditRow(row, col)"
:id="id"
@@ -613,7 +616,7 @@
<!-- select异步搜索 -begin -->
<template v-else-if="col.type === formTypes.sel_search_async">
<a-tooltip v-bind="buildTooltipProps(row, col, id)">
<a-tooltip :key="i" v-bind="buildTooltipProps(row, col, id)">
<j-search-select-tag
v-if="isEditRow(row, col)"
:id="id"
@@ -658,7 +661,8 @@
</div>
<!-- else (normal) -->
<span class="comp-normal" v-else :key="i" :title="inputValues[rowIndex][col.key]" v-bind="buildProps(row,col)">{{ inputValues[rowIndex][col.key] }}</span>
<span class="comp-normal" v-else :key="i" :title="inputValues[rowIndex][col.key]"
v-bind="buildProps(row,col)">{{ inputValues[rowIndex][col.key] }}</span>
</template>
</div>
</div>
@@ -696,7 +700,7 @@
<span
v-show="col.type === formTypes.inputNumber"
style="padding: 0 5px;"
>{{statisticsColumns[col.key]}}</span>
>{{ statisticsColumns[col.key] }}</span>
</div>
</template>
@@ -952,7 +956,7 @@ export default {
realTrWidth () {
const splice = ' + '
let calcWidth = 'calc('
this.columns.forEach((column, i) => {
this.columns.forEach((column) => {
const { type, width } = column
// 隐藏字段不参与计算
if (type !== FormTypes.hidden) {
@@ -1292,7 +1296,7 @@ export default {
}
} else if (column.type === FormTypes.upload || column.type === FormTypes.file || column.type === FormTypes.image) {
if (sourceValue) {
let fileName = ''
let fileName
if (sourceValue.indexOf(',') > 0) {
const sourceValue2 = sourceValue.split(',')[0]
fileName = sourceValue2.substring(sourceValue2.lastIndexOf('/') + 1)
@@ -1389,7 +1393,8 @@ export default {
getInputNumberMaxValue (column) {
let maxNum = 0
this.inputValues.forEach((item, index) => {
const val = item[column.key]; let num
const val = item[column.key]
let num
try {
num = parseInt(val)
} catch {
@@ -1429,9 +1434,6 @@ export default {
target: this
})
// 设置滚动条位置
const tbody = this.getElement('tbody')
const offsetHeight = tbody.offsetHeight
const realScrollTop = tbody.scrollTop + offsetHeight
if (forceScrollToBottom) {
this.$nextTick(() => {
this.resetScrollTop(this.$refs.scrollView.scrollHeight)
@@ -1442,6 +1444,7 @@ export default {
* 在指定位置添加一行
* @param insertIndex 添加位置下标
* @param num 添加的行数，默认1
* @param forceScrollToBottom
*/
insert (insertIndex, num = 1, forceScrollToBottom = false) {
if (this.checkTooFastClick('insert', 1500)) {
@@ -1491,7 +1494,7 @@ export default {
if (typeof id === 'string') {
ids = [id]
} else {
throw `JEditableTable.removeRows() 函数需要的参数可以是string或Array类型，但提供的却是${typeof id}`
throw new Error(`JEditableTable.removeRows() 函数需要的参数可以是string或Array类型，但提供的却是${typeof id}`)
}
}
@@ -1929,7 +1932,8 @@ export default {
/** 通过规则验证值是否正确 */
validateValue (column, value) {
const rules = column.validateRules
let passed = true; let message = ''
let passed = true
let message = ''
// 判断有没有验证规则或验证规则格式正不正确，若条件不符合则默认通过
if (rules instanceof Array) {
for (const rule of rules) {
@@ -1939,8 +1943,7 @@ export default {
if (rule.required === true && isNull) {
passed = false
} else // 使用 else-if 是为了防止一个 rule 中出现两个规则
// 验证规则：唯一校验
if (rule.unique === true || rule.pattern === 'only') {
if (rule.unique === true || rule.pattern === 'only') { // 验证规则：唯一校验
const { values } = this.getValuesSync({ validate: false })
let findCount = 0
for (const val of values) {
@@ -1951,15 +1954,17 @@ export default {
}
}
}
} else
// 验证规则：正则表达式
if (!!rule.pattern && !isNull) {
} else if (!!rule.pattern && !isNull) { // 验证规则：正则表达式
// 兼容 online 的规则
const foo = [
{ title: '6到16位数字', value: 'n6-16', pattern: /^\d{6,16}$/ },
{ title: '6到16位任意字符', value: '*6-16', pattern: /^.{6,16}$/ },
{ title: '6到18位字母', value: 's6-18', pattern: /^[a-z|A-Z]{6,18}$/ },
{ title: '网址', value: 'url', pattern: /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/ },
{
title: '网址',
value: 'url',
pattern: /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/
},
{ title: '电子邮件', value: 'e', pattern: /^([\w]+\.*)([\w]+)@[\w]+\.\w{3}(\.\w{2}|)$/ },
{ title: '手机号码', value: 'm', pattern: /^1[3456789]\d{9}$/ },
{ title: '邮政编码', value: 'p', pattern: /^[1-9]\d{5}$/ },
@@ -1978,9 +1983,7 @@ export default {
}
}
if (!flag) passed = new RegExp(rule.pattern).test(value)
} else
// 校验规则：自定义函数校验
if (typeof rule.handler === 'function') {
} else if (typeof rule.handler === 'function') { // 校验规则：自定义函数校验
return [rule.handler, rule.message]
}
// 如果没有通过验证，则跳出循环。如果通过了验证，则继续验证下一条规则
@@ -2217,7 +2220,9 @@ export default {
recalcSortNumber () {
if (this.dragSort) {
// 重置排序字段
this.inputValues.forEach((val, idx) => val[this.dragSortKey] = (idx + 1))
this.inputValues.forEach((val, idx) => {
val[this.dragSortKey] = (idx + 1)
})
}
},
@@ -2624,9 +2629,8 @@ export default {
// 找到了带有 hidden 的标签，判断它的父级是否还有 hidden，直到遇到完全没有 hidden 或 body 的时候才停止递归
const temp = ifParent(child.parentNode)
return temp != null ? temp : child.parentNode
} else
} else if (child.parentNode && child.parentNode.tagName.toLocaleLowerCase() !== 'body') {
// 当前标签没有 hidden ，如果有父级并且父级不是 body 的话就继续递归判断父级
if (child.parentNode && child.parentNode.tagName.toLocaleLowerCase() !== 'body') {
return ifParent(child.parentNode)
} else {
// 直到 body 都没有遇到有 hidden 的标签
@@ -2924,7 +2928,7 @@ export default {
// 获取没有授权的按钮编码
loadExcludeCode () {
if (!this.authPre || this.authPre.length == 0) {
if (!this.authPre || this.authPre.length === 0) {
this.excludeCode = []
} else {
let pre = this.authPre
@@ -2936,7 +2940,7 @@ export default {
},
// 判断button是否显示
buttonPermission (code) {
if (!this.excludeCode || this.excludeCode.length == 0) {
if (!this.excludeCode || this.excludeCode.length === 0) {
return true
} else {
return this.excludeCode.indexOf(code) < 0
@@ -2954,22 +2958,22 @@ export default {
<style lang="less" scoped>
.action-button {
.action-button {
margin-bottom: 8px;
.gap {
padding-left: 8px;
}
}
}
/* 设定边框参数 */
@borderColor: #e8e8e8;
@border: 1px solid @borderColor;
/* tr & td 之间的间距 */
@spacing: 8px;
/* 设定边框参数 */
@borderColor: #e8e8e8;
@border: 1px solid @borderColor;
/* tr & td 之间的间距 */
@spacing: 8px;
.input-table {
.input-table {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
@@ -3321,7 +3325,7 @@ export default {
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
}
}
}
</style>
<style lang="less">