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