17 changed files with 1309 additions and 414 deletions
@ -0,0 +1,993 @@ |
|||||
|
<template> |
||||
|
<!-- 解决el-table 数据量过大导致卡顿现象 --> |
||||
|
<u-table |
||||
|
:id="_uid" |
||||
|
:key="isUpdate" |
||||
|
v-loading="tableLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
ref="multipleTable" |
||||
|
:data="tableData" |
||||
|
:row-key="rowKey" |
||||
|
:border="tableBorder" |
||||
|
style="width: 100%" |
||||
|
:cell-style="cellStyle" |
||||
|
use-virtual |
||||
|
:row-height="50" |
||||
|
:height="uTableHeight" |
||||
|
header-row-class-name="uTableHeader" |
||||
|
> |
||||
|
<!-- :tree-props="treeProps" 与 “height” 不能共存， 此组件暂不支持tree的格式--> |
||||
|
<!-- 操作列 （左侧）--> |
||||
|
<u-table-column |
||||
|
v-if="buttonOperationList_left" |
||||
|
:fixed="'left'" |
||||
|
width="auto" |
||||
|
min-width="120px" |
||||
|
:align="'center'" |
||||
|
:header-align="'center'" |
||||
|
> |
||||
|
<template #header> |
||||
|
<span>操作</span> |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
v-for="(itemButton, indexButton) in buttonOperationList_left" |
||||
|
:key="indexButton" |
||||
|
type="text" |
||||
|
size="mini" |
||||
|
@click="buttonOperationClick_left(scope.row, itemButton, indexButton)" |
||||
|
>{{itemButton.label}}</el-button> |
||||
|
</template> |
||||
|
</u-table-column> |
||||
|
<!-- 操作列 （右侧）--> |
||||
|
<u-table-column |
||||
|
v-if="buttonOperationList_right" |
||||
|
:fixed="'right'" |
||||
|
width="auto" |
||||
|
min-width="120px" |
||||
|
:align="'center'" |
||||
|
:header-align="'center'" |
||||
|
> |
||||
|
<template #header> |
||||
|
<span>操作</span> |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
v-for="(itemButton, indexButton) in buttonOperationList_right(scope.row)" |
||||
|
v-show="!itemButton.hide" |
||||
|
:key="indexButton" |
||||
|
type="text" |
||||
|
size="mini" |
||||
|
@click="buttonOperationClick_right(scope.row, itemButton, indexButton)" |
||||
|
>{{itemButton.label}}</el-button> |
||||
|
</template> |
||||
|
</u-table-column> |
||||
|
<u-table-column v-if="selectionTable" fixed="left" type="selection" :reserve-selection="true" /> |
||||
|
<u-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" /> |
||||
|
<template v-for="(item, index) in TableSize"> |
||||
|
<u-table-column |
||||
|
min-width="150" |
||||
|
:key="index" |
||||
|
:prop="item.showProp ? item.prop + '.' + item.showProp : item.prop" |
||||
|
:sortable="item.sortable" |
||||
|
:fixed="setItemFixed(item,index)" |
||||
|
:show-overflow-tooltip="showOverflowTooltip" |
||||
|
:width="item.width" |
||||
|
:align="item.tableAlign" |
||||
|
:header-align="item.tableHeaderAlign" |
||||
|
v-if="item.istrue==null?true:item.istrue" |
||||
|
> |
||||
|
<template #header> |
||||
|
<span>{{ item.label }}</span> |
||||
|
<i style="color: #f56c6c" v-if="item.rules && requiredRules">*</i> |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-form> |
||||
|
<el-form-item |
||||
|
v-if="item.type == 'input'" |
||||
|
:onkeyup="itemOnKeyUp(item,searchData[item.prop])" |
||||
|
:prop="'details.' + scope.$index + '.' + item.prop" |
||||
|
:rules="item.rules" |
||||
|
> |
||||
|
<el-input |
||||
|
:placeholder="'请输入' + item.label" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
v-model="scope.row[item.prop]" |
||||
|
@blur=" |
||||
|
inputPlaceholder($event, item, 'blur',scope.row) |
||||
|
" |
||||
|
@focus="inputPlaceholder($event, item, 'focus')" |
||||
|
clearable |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<!-- 输入框(数字) onkeyup: 正则表达式，用于前端输入校验工作--> |
||||
|
<el-form-item |
||||
|
v-if="item.type == 'inputNumber'" |
||||
|
:prop="'details.' + scope.$index + '.' + item.prop" |
||||
|
:rules="item.rules" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="searchData[item.prop]" |
||||
|
:maxlength="item.maxlength" |
||||
|
:onkeyup="typeNumberOnkeyup(item,searchData[item.prop])" |
||||
|
clearable |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="'请输入' + item.label" |
||||
|
:prefix-icon="item.icon" |
||||
|
:show-password="item.showPassword" |
||||
|
@change="changeInput(item.prop,$event)" |
||||
|
@clear="clearInput(item.prop,$event)" |
||||
|
@blur=" |
||||
|
inputPlaceholder($event, item, 'blur',searchData) |
||||
|
" |
||||
|
@focus="inputPlaceholder($event, item, 'focus')" |
||||
|
></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="item.type == 'objectInput'" |
||||
|
:prop=" |
||||
|
'details.' + scope.$index + '.' + item.prop + '.' + item.showProp |
||||
|
" |
||||
|
:rules="item.rules" |
||||
|
> |
||||
|
<el-input |
||||
|
:placeholder="'请输入' + item.label" |
||||
|
v-model="scope.row[item.prop][item.showProp]" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
@blur=" |
||||
|
inputPlaceholder($event, item, 'blur', scope.row) |
||||
|
" |
||||
|
@focus="inputPlaceholder($event, item, 'focus')" |
||||
|
clearable |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<!-- 下拉框 --> |
||||
|
<el-select |
||||
|
v-if="item.type === 'select'" |
||||
|
v-model="scope.row[item.prop]" |
||||
|
:loading="selectLoading" |
||||
|
:clearable="item.clearable" |
||||
|
:multiple="item.multiple" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
:filterable="item.filterable" |
||||
|
:allow-create="item.allowCreate" |
||||
|
style="width: 100%" |
||||
|
:placeholder="'请输入' + item.label" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(op, index) in selectOptions(item.options) || |
||||
|
searchOptions['options']" |
||||
|
:label="op[item.optionsLabel] || op.label" |
||||
|
:value="op[item.optionsValue] || op.value" |
||||
|
:key="index" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<!--对象下拉框 --> |
||||
|
<el-select |
||||
|
v-if="item.type === 'objectSelect'" |
||||
|
v-model="scope.row[item.prop][item.showProp]" |
||||
|
:loading="selectLoading" |
||||
|
:clearable="item.clearable" |
||||
|
:multiple="item.multiple" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
:filterable="item.filterable" |
||||
|
:allow-create="item.allowCreate" |
||||
|
style="width: 100%" |
||||
|
:placeholder="'请输入' + item.label" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(op, index) in selectOptions(item.options) || |
||||
|
searchOptions['options']" |
||||
|
:label="op[item.optionsLabel] || op.label" |
||||
|
:value="op[item.optionsValue] || op.value" |
||||
|
:key="index" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<!--查询下拉--> |
||||
|
<el-form-item |
||||
|
v-if="item.type === 'autocomplete'" |
||||
|
:prop="'details.' + scope.$index + '.' + item.prop" |
||||
|
:rules="item.rules" |
||||
|
> |
||||
|
<el-autocomplete |
||||
|
class="inline-input" |
||||
|
style="width: 100%" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
v-model="scope.row[item.prop]" |
||||
|
:fetch-suggestions=" |
||||
|
(queryString, cb) => { |
||||
|
querySearch(queryString, cb, item, scope); |
||||
|
} |
||||
|
" |
||||
|
:placeholder="'请输入' + item.label" |
||||
|
@select="handleSelect($event, item, scope)" |
||||
|
> |
||||
|
<!-- <template slot-scope="{item}"> |
||||
|
<div class="name" style="color:green">{{item.value = item.name}}</div> |
||||
|
<div class="name" >{{item.address = item.code}}</div> |
||||
|
</template> --> |
||||
|
<el-button |
||||
|
v-if="item.click" |
||||
|
slot="append" |
||||
|
icon="el-icon-search" |
||||
|
@click="item.click({ scope, item })" |
||||
|
style="color: #1890ff; background-color: #ffffff" |
||||
|
></el-button> |
||||
|
</el-autocomplete> |
||||
|
</el-form-item> |
||||
|
<!-- 对象查询下拉 --> |
||||
|
<el-form-item |
||||
|
v-if="item.type === 'objectAutocomplete'" |
||||
|
:prop=" |
||||
|
'details.' + scope.$index + '.' + item.prop + '.' + item.showProp |
||||
|
" |
||||
|
:rules="item.rules" |
||||
|
> |
||||
|
<el-autocomplete |
||||
|
class="inline-input" |
||||
|
style="width: 100%" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
v-model="scope.row[item.prop][item.showProp]" |
||||
|
:fetch-suggestions=" |
||||
|
(queryString, cb) => { |
||||
|
querySearch(queryString, cb, item, scope); |
||||
|
} |
||||
|
" |
||||
|
:placeholder="'请输入' + item.label" |
||||
|
@select="handleSelect($event, item, scope)" |
||||
|
> |
||||
|
<!-- <template slot-scope="{item}"> |
||||
|
<div class="name" style="color:green">{{item.value = item.name}}</div> |
||||
|
<div class="name" >{{item.address = item.code}}</div> |
||||
|
</template> --> |
||||
|
<el-button |
||||
|
v-if="item.click" |
||||
|
slot="append" |
||||
|
icon="el-icon-search" |
||||
|
@click="item.click({ scope, item })" |
||||
|
style="color: #1890ff; background-color: #ffffff" |
||||
|
></el-button> |
||||
|
</el-autocomplete> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item v-if="item.type == 'inputEnum'" :prop="item.prop"> |
||||
|
<el-input |
||||
|
placeholder="请输入内容" |
||||
|
v-model="scope.row[item.prop]" |
||||
|
clearable |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> --> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if="item.type == 'dateTimeInput'" |
||||
|
:prop="'details.' + scope.$index + '.' + item.prop" |
||||
|
:rules="item.rules" |
||||
|
> |
||||
|
<el-date-picker |
||||
|
type="datetime" |
||||
|
v-model="scope.row[item.prop]" |
||||
|
placeholder="选择日期" |
||||
|
style="width: 100%" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss.sssZ" |
||||
|
format="yyyy-MM-dd" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="item.type == 'objectDateTimeInput'" |
||||
|
:prop="'details.' + scope.$index + '.' + item.prop + '.' + item.showProp" |
||||
|
:rules="item.rules" |
||||
|
> |
||||
|
<el-date-picker |
||||
|
type="datetime" |
||||
|
v-model="scope.row[item.prop][item.showProp]" |
||||
|
placeholder="选择日期" |
||||
|
style="width: 100%" |
||||
|
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss.sssZ" |
||||
|
format="yyyy-MM-dd" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<!-- table表添加按钮事件 v-show="scope.row.number == 'PRJ202210060001'" --> |
||||
|
<!-- <el-form-item v-if="item.type == 'button'" > --> |
||||
|
<div v-if="item.type == 'button'"> |
||||
|
<el-button |
||||
|
v-show="scope.row[item.prop]==undefined?true:false" |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
@click="buttonClick(scope.row, scope.$index, item.label)" |
||||
|
>{{item.label}}</el-button> |
||||
|
</div> |
||||
|
<!-- </el-form-item> --> |
||||
|
<span v-if="item.type == 'object'"> |
||||
|
{{ scope.row[item.prop] ? scope.row[item.prop][item.showProp] : "" }} |
||||
|
</span> |
||||
|
<span v-if="item.type == 'objectDateTime'"> |
||||
|
{{ scope.row[item.prop]? scope.row[item.prop][item.showProp]: "" | formatDate }} |
||||
|
</span> |
||||
|
<span v-if="item.type == 'dateTime'"> |
||||
|
{{ scope.row[item.prop] | formatDate }} |
||||
|
</span> |
||||
|
<!-- 调用主表信息 --> |
||||
|
<span v-else-if="item.type && item.type == 'outerMainFilter'"> |
||||
|
{{ propsData[item.showProp] }} |
||||
|
</span> |
||||
|
<el-tag |
||||
|
v-if="item.type == 'tagFilter'" |
||||
|
:effect="'dark'" |
||||
|
size="medium" |
||||
|
class="tagFilterTypeDarkItem" |
||||
|
:color="scope.row[item.prop] | trigger(item.filters, 'background')" |
||||
|
> |
||||
|
{{ scope.row[item.prop] | trigger(item.filters, "label") }} |
||||
|
</el-tag> |
||||
|
<span |
||||
|
v-if="item.type == 'filter'" |
||||
|
:style="scope.row[item.prop]" |
||||
|
> |
||||
|
{{ scope.row[item.prop] | trigger(item.filters, "label", item.dictType) }} |
||||
|
</span> |
||||
|
<span |
||||
|
v-if="item.type == 'objectFilter'" |
||||
|
:style="scope.row[item.prop][item.showProp]" |
||||
|
> |
||||
|
{{ scope.row[item.prop][item.showProp] | trigger(item.filters, "label") }} |
||||
|
</span> |
||||
|
<span v-else-if="item.type == 'filterList'" > |
||||
|
{{ scope.row[item.prop] | triggerList(item.filters, "label") }} |
||||
|
</span> |
||||
|
<!-- 可点出详情 --> |
||||
|
<span |
||||
|
v-if="item.type == 'showDetail'" |
||||
|
@click="showDetailInfo(scope.row[item.prop])" |
||||
|
style="cursor: pointer;" |
||||
|
:title="'点击查看详情'" |
||||
|
:class="{ showDetailHover: item.type == 'showDetail' }" |
||||
|
>{{ scope.row[item.prop] ? scope.row[item.prop] + "" : scope.row[item.prop] }}</span> |
||||
|
<!-- 可点出json转换的table弹窗 --> |
||||
|
<span |
||||
|
v-if="item.type == 'showJsonTable'" |
||||
|
@click="showJsonTable(scope.row[item.prop])" |
||||
|
style="cursor: pointer;" |
||||
|
:title="'点击查看详情'" |
||||
|
:class="{ showDetailHover: item.type == 'showJsonTable' }" |
||||
|
>{{ scope.row[item.prop] ? scope.row[item.prop] + "" : scope.row[item.prop] }}</span> |
||||
|
<span |
||||
|
v-if="item.type == 'name' || !item.type" |
||||
|
@click="item.type == 'name' && inlineDialog(scope.row)" |
||||
|
:class="{ spamHover: item.type == 'name' }" |
||||
|
>{{ scope.row[item.prop] ? scope.row[item.prop] + "" : scope.row[item.prop] }}</span> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</u-table-column> |
||||
|
</template> |
||||
|
<slot></slot> |
||||
|
|
||||
|
<!-- 点开查看全部弹窗 --> |
||||
|
<el-dialog |
||||
|
:visible.sync="showDetailDialog" |
||||
|
width="35%" |
||||
|
:modal-append-to-body="false" |
||||
|
:append-to-body="true" |
||||
|
:show-close="true" |
||||
|
:title="'内容详情'" |
||||
|
> |
||||
|
{{ showDetailData ? showDetailData + "" : showDetailData }} |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- json弹窗（复制的json内容） --> |
||||
|
<el-dialog |
||||
|
id="copyJsonTextarea_dialog_ref" |
||||
|
:visible.sync="showJsonCopy" |
||||
|
:modal-append-to-body="false" |
||||
|
:append-to-body="true" |
||||
|
:show-close="true" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
:title="'JSON详情'" |
||||
|
> |
||||
|
<el-input |
||||
|
ref="copyJsonTextarea_ref" |
||||
|
type="textarea" |
||||
|
readonly |
||||
|
autosize |
||||
|
placeholder="请输入内容" |
||||
|
v-model="showJsonData_str"> |
||||
|
</el-input> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 点开查看Json转换后table弹窗 --> |
||||
|
<el-dialog |
||||
|
:visible.sync="showJsonDialog" |
||||
|
:modal-append-to-body="false" |
||||
|
:append-to-body="true" |
||||
|
:show-close="true" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
:title="'内容详情'" |
||||
|
> |
||||
|
<el-button |
||||
|
@click="copyJsonHandle()" |
||||
|
type="primary" |
||||
|
style="margin-bottom: 10px;float: right;" |
||||
|
>复制JSON</el-button> |
||||
|
<el-table |
||||
|
:data="showJsonData" |
||||
|
:border="true" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
width="220" |
||||
|
label="属性"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="值" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 --> |
||||
|
<span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span> |
||||
|
<el-table |
||||
|
v-else |
||||
|
height="300" |
||||
|
:data="scope.row.value" |
||||
|
:border="true" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="子属性" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
label="子值" |
||||
|
prop="value" |
||||
|
></el-table-column> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-dialog> |
||||
|
</u-table> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { formatTimeStrToStr } from "@/utils/formatTime"; |
||||
|
import _ from "lodash"; |
||||
|
import { getMatchRegConformValue } from "@/utils/index" |
||||
|
export default { |
||||
|
name: "currenTable", |
||||
|
filters: { |
||||
|
formatDate(time) { |
||||
|
if (time == null) { |
||||
|
return '-' |
||||
|
} |
||||
|
return formatTimeStrToStr(time) |
||||
|
}, |
||||
|
}, |
||||
|
props: { |
||||
|
// 操作列按钮（左侧） |
||||
|
buttonOperationList_left:{ |
||||
|
type: Array, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 操作列按钮(右侧) |
||||
|
buttonOperationList_right:{ |
||||
|
type: Function, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 超出内容是否提示 |
||||
|
showOverflowTooltip:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// table是否有border |
||||
|
tableBorder: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 是否为第一个浮动，如果是，则item中的fixed无效（应用场景：主列表，因为用户排序不定元素为第一项） |
||||
|
firstFixed: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
propsData: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
tableData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
tableLoading: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
tableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
selectionTable: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
requiredRules: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
searchOptions: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
treeProps: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
} |
||||
|
}, |
||||
|
// table key 字段设置顺序后需更新该值 |
||||
|
isUpdate: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
rowKey:{ |
||||
|
type: String, |
||||
|
default: 'id', |
||||
|
}, |
||||
|
isShowIndex: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
cellStyle: { |
||||
|
type: Function, |
||||
|
default: () => { |
||||
|
return Function; |
||||
|
} |
||||
|
}, |
||||
|
// 已app-main高度为100% 需要减掉的高度 |
||||
|
setUTableHeight: { |
||||
|
type: Number, |
||||
|
default: () => { |
||||
|
return 280; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dropCol: null, |
||||
|
selectLoading: false, |
||||
|
random: '', |
||||
|
uTableHeight:null,//表格撑开高度 |
||||
|
showDetailDialog:false,//点开查看全部弹窗 |
||||
|
showDetailData:null,//点开查看全部内容 |
||||
|
showJsonDialog:false,//点开查看Json转换后table弹窗 |
||||
|
showJsonData:null,//点开查看Json的数据 |
||||
|
showJsonData_str:null,//复制的Json字符串 |
||||
|
showJsonCopy:false,//复制json的Dialog显隐控制 |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
selectOptions() { |
||||
|
return (val) => { |
||||
|
if (val) { |
||||
|
let options = this.$staticOptions[val]; |
||||
|
if (options) { |
||||
|
return options(); |
||||
|
} else { |
||||
|
return []; |
||||
|
} |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
TableSize(){ |
||||
|
return this.tableColumnsFilter() |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
tableData: { |
||||
|
handler(val, oldVal) { |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) { |
||||
|
this.$refs.multipleTable.doLayout() |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
immediate: false, |
||||
|
}, |
||||
|
tableColumns: { |
||||
|
handler(val, oldVal) { |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) { |
||||
|
this.$refs.multipleTable.doLayout() |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
immediate: false, |
||||
|
}, |
||||
|
setUTableHeight(n,o){ |
||||
|
this.setTableHeightHandle(n) |
||||
|
} |
||||
|
}, |
||||
|
activated() { |
||||
|
this.$refs.multipleTable.doLayout(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.random = this._uid |
||||
|
this.setTableHeightHandle() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 设置表格高度 |
||||
|
setTableHeightHandle(height){ |
||||
|
let _height = height || this.setUTableHeight |
||||
|
let _app_height = document.getElementsByClassName('app-main')[0].clientHeight |
||||
|
this.uTableHeight = Number(_app_height) - Number(_height) |
||||
|
}, |
||||
|
// 获取表格高度 误删 业务当中有用 |
||||
|
getTableHeight(){ |
||||
|
return this.uTableHeight |
||||
|
}, |
||||
|
setItemFixed(item,index){ |
||||
|
let _re = false |
||||
|
if(this.firstFixed && item.fixed == 'left'){ |
||||
|
if(index == 0)_re = true |
||||
|
}else{ |
||||
|
_re = item.fixed |
||||
|
} |
||||
|
return _re |
||||
|
}, |
||||
|
// type=input情况下，框实时校验 |
||||
|
itemOnKeyUp(item,value){ |
||||
|
if(item.onkeyup){ |
||||
|
return item.onkeyup() |
||||
|
}else{ |
||||
|
if(value && item.validType){ |
||||
|
this.searchData[item.prop]=getMatchRegConformValue(item.validType,value,item.pointNumberFixed) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 数字类型input框onkeyup最大最小值处理 |
||||
|
typeNumberOnkeyup(item,value){ |
||||
|
if(value){ |
||||
|
let _match = String(value).match(/\d+/)//正整数 |
||||
|
this.searchData[item.prop] = _match?_match[0]:_match |
||||
|
} |
||||
|
if(this.searchData[item.prop] > item.max){ |
||||
|
this.searchData[item.prop] = item.max |
||||
|
} |
||||
|
if(this.searchData[item.prop] && this.searchData[item.prop] < item.min){ |
||||
|
this.searchData[item.prop] = item.min |
||||
|
} |
||||
|
if(item.onkeyup)item.onkeyup() |
||||
|
}, |
||||
|
tableColumnsFilter() { |
||||
|
let widthSize = _.cloneDeep(this.tableColumns); |
||||
|
for(let i = 0;i<widthSize.length;i++){ |
||||
|
let item = widthSize[i] |
||||
|
if (item.type == "autocomplete" || item.type == "objectAutocomplete") { |
||||
|
item.width = item.width ? item.width: "300px"; |
||||
|
} else if (item.type == "input" || item.type == "objectInput") { |
||||
|
if (item.width == '100%') { |
||||
|
item.width = '' |
||||
|
} else { |
||||
|
item.width = item.width ? item.width: "200px"; |
||||
|
} |
||||
|
} else if ( |
||||
|
item.type == "dateTimeInput" || |
||||
|
item.type == "objectDateTimeInput" |
||||
|
) { |
||||
|
item.width =item.width ? item.width: "200px"; |
||||
|
} else if (item.type == "objectDateTime" || item.type == "dateTime") { |
||||
|
item.width =item.width ? item.width: "200px"; |
||||
|
} else if (item.width == '100%') { |
||||
|
item.width = '' |
||||
|
} else { |
||||
|
item.width =item.width ? item.width: "auto"; |
||||
|
} |
||||
|
} |
||||
|
return widthSize |
||||
|
}, |
||||
|
inputPlaceholder(val, item, type, func) { |
||||
|
if (item.valueType) { |
||||
|
if (type == "focus") { |
||||
|
val.target.placeholder = "请输入" + item.label; |
||||
|
if (val.target.value != "") { |
||||
|
val.target.placeholder = val.target.value; |
||||
|
val.target.value = ""; |
||||
|
} |
||||
|
} else if (type == "blur") { |
||||
|
// val.target.value = "0" |
||||
|
val.target.value = val.target.value.toString().replace(/[^\d.]/g,'') |
||||
|
if (val.target.value == "") { |
||||
|
// if (val.target.placeholder.indexOf('请输入') == -1) { |
||||
|
val.target.value = val.target.placeholder; |
||||
|
// } |
||||
|
} |
||||
|
if(item.showProp){ |
||||
|
func[item.prop][item.showProp]= Number(val.target.value) |
||||
|
}else{ |
||||
|
func[item.prop]= Number(val.target.value) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//autocomplete下拉 |
||||
|
querySearch(queryString, cb, val, row) { |
||||
|
const { options, optionsValue, optionsLabel } = val; |
||||
|
let func = val.focus; |
||||
|
let data = { |
||||
|
scope: row, |
||||
|
}; |
||||
|
if (queryString) { |
||||
|
data.filter = [ |
||||
|
{ |
||||
|
logic: "And", |
||||
|
column: optionsValue, |
||||
|
action: "Like", |
||||
|
value: queryString, |
||||
|
}, |
||||
|
]; |
||||
|
} |
||||
|
func(data).then((res) => { |
||||
|
var restaurants = this.searchOptions["options"]; |
||||
|
let results = queryString |
||||
|
? restaurants.filter( |
||||
|
this.createFilter(queryString, optionsValue, optionsLabel) |
||||
|
) |
||||
|
: restaurants; |
||||
|
results.forEach((key) => { |
||||
|
if (typeof optionsValue === "string") { |
||||
|
key.value = key[optionsValue] + "----" + key[optionsLabel]; |
||||
|
} else { |
||||
|
key.value = |
||||
|
key[optionsValue[0]][optionsValue[1]] + |
||||
|
"----" + |
||||
|
key[optionsLabel]; |
||||
|
} |
||||
|
}); |
||||
|
// 调用 callback 返回建议列表的数据 |
||||
|
cb(results); |
||||
|
}); |
||||
|
}, |
||||
|
createFilter(queryString, optionsValue, optionsLabel) { |
||||
|
return (restaurant) => { |
||||
|
if (typeof optionsValue === "string") { |
||||
|
restaurant.value = |
||||
|
restaurant[optionsValue] + "----" + restaurant[optionsLabel]; |
||||
|
} else { |
||||
|
restaurant.value = |
||||
|
restaurant[optionsValue[0]][optionsValue[1]] + |
||||
|
"----" + |
||||
|
restaurant[optionsLabel]; |
||||
|
} |
||||
|
return ( |
||||
|
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != |
||||
|
-1 |
||||
|
); |
||||
|
}; |
||||
|
}, |
||||
|
handleSelect(item, val, scope) { |
||||
|
let data = this.tableData[scope.$index]; |
||||
|
if (!val.showProp) { |
||||
|
if (typeof val.optionsValue === "string") { |
||||
|
data[val.prop] = item[val.optionsValue]; |
||||
|
} else { |
||||
|
data[val.prop] = item[val.optionsValue[0]][val.optionsValue[1]]; |
||||
|
} |
||||
|
} else { |
||||
|
if (typeof val.optionsValue === "string") { |
||||
|
data[val.prop][val.showProp] = item[val.optionsValue]; |
||||
|
} else { |
||||
|
data[val.prop][val.showProp] = |
||||
|
item[val.optionsValue[0]][val.optionsValue[1]]; |
||||
|
} |
||||
|
} |
||||
|
this.$emit("push", item, scope, val); |
||||
|
}, |
||||
|
getMaxLength(arr) { |
||||
|
return arr.reduce((acc, item) => { |
||||
|
if (item) { |
||||
|
const calcLen = this.getTexWidth(item); |
||||
|
if (acc < calcLen) { |
||||
|
acc = calcLen; |
||||
|
} |
||||
|
} |
||||
|
return acc; |
||||
|
}, 0); |
||||
|
}, |
||||
|
getTexWidth(str) { |
||||
|
let width = 0; |
||||
|
const html = document.createElement("span"); |
||||
|
html.innerText = str; |
||||
|
html.className = "getTextWidth"; |
||||
|
document.querySelector("body").appendChild(html); |
||||
|
width = document.querySelector(".getTextWidth").offsetWidth; |
||||
|
document.querySelector(".getTextWidth").remove(); |
||||
|
return width; |
||||
|
}, |
||||
|
flexColumnWidth(label, prop) { |
||||
|
const arr = this.tableData.map((x) => { |
||||
|
if (typeof prop !== "string") { |
||||
|
return x[prop[0]][prop[1]]; |
||||
|
} else { |
||||
|
return x[prop]; |
||||
|
} |
||||
|
}); |
||||
|
arr.push(label); |
||||
|
return this.getMaxLength(arr) + 60 + "px"; |
||||
|
}, |
||||
|
//排序 |
||||
|
sortChange(data) { |
||||
|
this.$emit("sortChange", data); |
||||
|
}, |
||||
|
//点击selection框 |
||||
|
handleSelectionChange(val) { |
||||
|
this.$emit("handleSelectionChange", val); |
||||
|
}, |
||||
|
//点击name提交emit打开编辑页面 |
||||
|
inlineDialog(row) { |
||||
|
this.$emit("inlineDialog", row); |
||||
|
}, |
||||
|
//可点出详情弹窗 |
||||
|
showDetailInfo(row) { |
||||
|
this.showDetailDialog = true |
||||
|
this.showDetailData = row |
||||
|
this.$emit("showDetailInfo", row); |
||||
|
}, |
||||
|
// 可点出json转换的table弹窗 |
||||
|
showJsonTable(row){ |
||||
|
this.showJsonDialog = true |
||||
|
let _json = eval('(' + row + ')') |
||||
|
let _arr = [] |
||||
|
let __initJson = (data) => { |
||||
|
let _init = [] |
||||
|
for(let item in data){ |
||||
|
_init.push({name:item,value:data[item]}) |
||||
|
} |
||||
|
return _init |
||||
|
} |
||||
|
for(let item in _json){ |
||||
|
// 直接输出 |
||||
|
if(!_json[item]){ |
||||
|
_arr.push({name:item,value:_json[item]}) |
||||
|
}else if(_json[item] && typeof _json[item] != 'object'){ |
||||
|
_arr.push({name:item,value:_json[item] + ""}) |
||||
|
}else{ |
||||
|
// 如果是数组 |
||||
|
if(Array.isArray(_json[item])){ |
||||
|
// 如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 |
||||
|
let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",") |
||||
|
_arr.push({name:item,value:_value}) |
||||
|
} |
||||
|
// 如果是对象 |
||||
|
else{ |
||||
|
let _obj_arr = __initJson(_json[item]) |
||||
|
// 对象有数据 |
||||
|
if(_obj_arr.length > 0){ |
||||
|
_arr = [..._obj_arr] |
||||
|
}else{ |
||||
|
// 空对象 |
||||
|
_arr.push({name:item,value:""}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.showJsonData = _arr |
||||
|
this.showJsonData_str = JSON.stringify(JSON.parse(JSON.stringify(this.showJsonData)), null, '\t') |
||||
|
this.$emit("showJsonTable", row); |
||||
|
}, |
||||
|
// 复制Json按钮 |
||||
|
copyJsonHandle(){ |
||||
|
this.showJsonCopy = true |
||||
|
navigator.clipboard.writeText(this.showJsonData_str) |
||||
|
.then(() => { |
||||
|
this.$message.success('复制成功'); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
this.$message.error('复制失败'); |
||||
|
}); |
||||
|
this.$nextTick(()=>{ |
||||
|
if(this.$refs.copyJsonTextarea_ref){ |
||||
|
this.$refs.copyJsonTextarea_ref.focus() |
||||
|
this.$nextTick(()=>{ |
||||
|
document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0 |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//点击按钮打开自定义弹窗 |
||||
|
buttonClick(row, index, label) { |
||||
|
this.$emit("buttonClick", row, index, label); |
||||
|
}, |
||||
|
//点击table操作列(左侧)按钮 |
||||
|
buttonOperationClick_left(row, item, index) { |
||||
|
this.$emit("buttonOperationClick_left", row, item, index); |
||||
|
}, |
||||
|
//点击table操作列(右侧)按钮 |
||||
|
buttonOperationClick_right(row, item, index) { |
||||
|
this.$emit("buttonOperationClick_right", row, item, index); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .uTableHeader th{ |
||||
|
background: #f6f7fb !important; |
||||
|
border: none !important; |
||||
|
|
||||
|
// &:last-child{ |
||||
|
// background: unset !important; |
||||
|
// } |
||||
|
} |
||||
|
::v-deep .el-form-item__error{ |
||||
|
position: relative; |
||||
|
} |
||||
|
::v-deep .el-table__fixed { |
||||
|
display: block-inline !important; |
||||
|
height: auto !important; |
||||
|
bottom: 13px !important; |
||||
|
.el-table__fixed-header-wrapper { |
||||
|
z-index: auto !important; |
||||
|
} |
||||
|
.el-table__fixed-body-wrapper { |
||||
|
z-index: auto !important; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-table__fixed-right { |
||||
|
display: block-inline !important; |
||||
|
height: auto !important; |
||||
|
bottom: 13px !important; |
||||
|
.el-table__fixed-header-wrapper { |
||||
|
z-index: auto !important; |
||||
|
} |
||||
|
.el-table__fixed-body-wrapper { |
||||
|
z-index: auto !important; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-table__fixed::before, |
||||
|
.el-table__fixed-right::before { |
||||
|
z-index: auto !important; |
||||
|
} |
||||
|
.spamHover { |
||||
|
color: #409eff; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.spamHover:hover { |
||||
|
border-bottom: 1px solid #409eff; |
||||
|
color: blue; |
||||
|
} |
||||
|
.showDetailHover:hover{ |
||||
|
color: #409eff; |
||||
|
} |
||||
|
span { |
||||
|
white-space: pre; |
||||
|
} |
||||
|
::v-deep .el-select { |
||||
|
.el-input__inner { |
||||
|
padding: 0 30px 0 15px; |
||||
|
} |
||||
|
.el-input__prefix { |
||||
|
width: 100% !important; |
||||
|
left: 0; |
||||
|
.el-button { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.u-table::before { |
||||
|
height: 0px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue