Skip to content

H
hs-sky-ui
Commit 6ad7f3ce authored by 何虹's avatar 何虹 💬
Browse files
Options

测试

parent 7d706d09
Show whitespace changes
Inline Side-by-side
Showing with 1332 additions and 942 deletions
src/App.vue
View file @ 6ad7f3ce
......@@ -9,7 +9,7 @@
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import HelloWorld from "./components/hsTable.vue";
export default {
name: "App",
......
src/components/apiUc.js
View file @ 6ad7f3ce
......@@ -28,15 +28,13 @@ export default {
},
methods: {
async requestMethod (config, value) {
const { ref, proxyTag, dyncQueryParms } = config || {}
const { const_id, table_name, columns, remote_condition } = ref || {}
const url_dynamic = `${proxyTag}/ref/table`
const url_static = `${proxyTag}/ref/items`
let real_url = ''
const url = ''
const { ref, dyncQueryParms } = config || {}
const { remote_condition } = ref || {}
let real_url = this.initRealUrl(config)
if (!real_url) return []
let remote_condition_ = remote_condition.trim()
let parms = ''
const dyncQueryParms_=_.cloneDeep(dyncQueryParms||{})
const dyncQueryParms_ = _.cloneDeep(dyncQueryParms || {})
if (value) {
dyncQueryParms_[remote_condition_] = value.trim()
}
......@@ -47,23 +45,13 @@ export default {
parms += `&${key}=${encodeURIComponent(dyncQueryParms_[key])}`
}
}
if (const_id !== '0' && Number(const_id)) {
// 常量id
real_url = `${url_static}/${const_id}/`
} else if (table_name) {// 表名字段名
// 字段查询
real_url = `${url_dynamic}/${table_name}/${columns}/`
} else if (url) {
real_url = url
}
if (real_url.includes('?')) {
real_url += parms
} else {
real_url += '?' + parms
}
if (!real_url) return []
const type = typeof value
if (type === 'undefined' && remote_condition) {// 远程搜索的时候
if (type === 'undefined' && remote_condition_) {// 远程搜索的时候
return []
} else {
const res = await axios.get(real_url)
......@@ -96,5 +84,26 @@ export default {
return list
},
initRealUrl (config) {
const { url, ref, proxyTag } = config
const { const_id, table_name, columns, remote_condition } = ref
const url_dynamic = `${proxyTag}/ref/table`
const url_static = `${proxyTag}/ref/items`
if (remote_condition) {
if (table_name) {
return `${url_dynamic}/${table_name}/${columns}/`
} else {
return `${url}`
}
} else {
if (const_id && Number(const_id) !== 0) {
return `${url_static}/${const_id}/`
} else if (table_name) {
return `${url_dynamic}/${table_name}/${columns}/`
} else {
return url
}
}
}
},
}
src/components/hsTable.vue 0 → 100644
View file @ 6ad7f3ce
<template>
<div>
<hsTable
maxHeight='500px'
:allSourceData='allSourceData'
></hsTable>
</div>
</template>
<script>
import apiUc from "./apiUc";
export default {
mixins: [apiUc],
data() {
return {
allSourceData: {
config: {},
sourceData: []
}
};
},
mounted() {
this.init();
},
methods: {
init() {
this.allSourceData.config = {
showIndex: false, // 是否显示 序号
hsConfig: {
default_type: 1 // mes风格
},
showHandle: true, // 是否显示操作栏
selection: true, // 是否显示复选框
handleWidth: 180, // 操作栏宽度
isAdaptive: true, // 宽度自适应
toolItems: [
// 工具栏
{
label: "测试2",
icon: "",
type: "text",
isHide: false, // 是否隐藏
disabled: false, // 是否禁用
click: () => {
alert("测试2");
}
}
],
handleColumns: [
// 操作栏
{
label: "测试1",
icon: "",
isHide: false, // 是否隐藏
type: "text",
disabled: false, // 是否禁用
click: () => {
alert("测试");
}
},
{
label: "测试2",
icon: "",
isHide: false, // 是否隐藏
type: "text",
disabled: false, // 是否禁用
click: () => {
this.allSourceData.sourceData.push({});
}
}
],
columnsConfig: [
// 列信息
{
prop: "order_size", //对应后端的字段
label: "型号", // 列名
showOverflowTooltip: true, // 超出时 显示省略
showType: "hsSelectPlus", // 列类型
allSourceData: {
// 参照配置
config: {
url: "",
isInnerRequest: true, // 是否在内部请求
proxyTag: "commonUtilAPI", // 代理前缀
ref: {
const_id: "0", // 常量值
table_name: "im_store_group", // 表名
columns: "id,name", //列名
remote_condition: "", // 是否远程搜索
displayfield: "", // 显示默认值
writebackfield: [] //回写字段
},
dyncQueryParms: {}, // 查询参数
multiple: false, // 是否多选
disabled: false,
size: "mini",
clearable: true,
title: "",
placeholder: "请选择",
value: "id", // 对应的后端字段
label: "name", // 对应的后端字段
is_computed: false // 是否是计算属性
},
sourceData: []
},
requestMethod: this.requestMethod // 参照请求方法
},
{
prop: "style_code",
label: "款号",
showOverflowTooltip: true,
showType: "input" // 普通输入框
},
{
prop: "customer_name",
label: "客户",
showOverflowTooltip: true,
showType: "text" // 文本
}
]
};
this.allSourceData.sourceData = [
{ customer_name: 1, style_code: 2, order_size: "0" }
];
}
}
};
</script>
\ No newline at end of file
src/packages/hs-table/index.vue
View file @ 6ad7f3ce
<template>
<div :id="elId"
<div
:id="elId"
class="_hs_table"
style="width:100%;height:100%">
<span class='toolsBox' v-show="configData.isShowTools">
style="width:100%;height:100%"
>
<span
class='toolsBox'
v-show="configData.isShowTools"
>
<el-popover
placement="top-start"
width="200"
trigger="hover"
>
<template v-for="(item,index) in tool_list">
<div class="closeAllItem" v-if="showItem(item)" :key="index">
<el-button type="text" :disabled="disabledItem(item)" size="mini" @click="itemClickAction(item)">
<div
class="closeAllItem"
v-if="showItem(item)"
:key="index"
>
<el-button
type="text"
:disabled="disabledItem(item)"
size="mini"
@click="itemClickAction(item)"
>
{{item.label}}
</el-button>
</div>
</template>
<el-button size="mini" type="primary" slot="reference" icon='el-icon-menu' circle></el-button>
<el-button
size="mini"
type="primary"
slot="reference"
icon='el-icon-menu'
circle
></el-button>
</el-popover>
</span>
<el-table v-if="isPicture==='0'"
<el-table
v-if="isPicture==='0'"
ref='hsTable'
style="width:100%;overflow: auto;"
:data="this.tableData"
......@@ -46,8 +67,17 @@
@row-dblclick='tableRowDblclick'
@selection-change='selectionChange'
>
<el-table-column v-if="configData.selection" type="selection" width="55"></el-table-column>
<el-table-column v-if="configData.showIndex" label='序号' type="index" width="55"></el-table-column>
<el-table-column
v-if="configData.selection"
type="selection"
width="55"
></el-table-column>
<el-table-column
v-if="configData.showIndex"
label='序号'
type="index"
width="55"
></el-table-column>
<template v-if="columnsProp.length">
<template v-for='(column,index) in columnsProp'>
<template v-if="!column.childs&&!column.isHide">
......@@ -61,26 +91,34 @@
>
<template slot-scope="scope">
<template v-if="column.prop.startsWith('img_')">
<el-image :src="scope.row[column.prop]"
<el-image
:src="scope.row[column.prop]"
:fit="fit"
:style="imgStyle">
:style="imgStyle"
>
</el-image>
</template>
<template v-else>
<template v-if="!jumpDisable(scope.row,column.prop)">
<el-popover placement="top-start"
<el-popover
placement="top-start"
width="400"
@show='showpopover(scope.row,column.prop)'
:close-delay='0'
trigger="hover">
<el-table :data="tableDataDetail"
trigger="hover"
>
<el-table
:data="tableDataDetail"
:header-row-style="setCellHeaderRowStyle"
:row-style="setCellRowStyle"
style="width: 100%">
<el-table-column v-for="(prop,index) in tableHeader"
style="width: 100%"
>
<el-table-column
v-for="(prop,index) in tableHeader"
:prop="prop"
:label="prop"
:key="index">
:key="index"
>
</el-table-column>
</el-table>
<div slot="reference">{{scope.row[column.prop]}}</div>
......@@ -109,7 +147,10 @@
</el-table-column>
</template>
<template v-else-if="column.childs&&column.childs.length">
<el-table-column :label="column.label" :key="index">
<el-table-column
:label="column.label"
:key="index"
>
<template v-for="item in column.childs">
<el-table-column
:width='minWidthFun(item,2)'
......@@ -120,19 +161,25 @@
>
<template slot-scope="scope">
<template v-if='!jumpDisable(scope.row,item.prop)'>
<el-popover placement="top-start"
<el-popover
placement="top-start"
width="400"
@show='showpopover(scope.row,item.prop)'
:close-delay='0'
trigger="hover">
<el-table :data="tableDataDetail"
trigger="hover"
>
<el-table
:data="tableDataDetail"
:header-row-style="setCellHeaderRowStyle"
:row-style="setCellRowStyle"
style="width: 100%">
<el-table-column v-for="(props,index) in tableHeader"
style="width: 100%"
>
<el-table-column
v-for="(props,index) in tableHeader"
:prop="props"
:label="props"
:key="index">
:key="index"
>
</el-table-column>
</el-table>
<div slot="reference">{{scope.row[item.prop]}}</div>
......@@ -143,7 +190,7 @@
<i :class="rowCellBoolean(scope.row[item.prop])"></i>
</template>
<template v-else>
<div >{{scope.row[item.prop]}}</div>
<div>{{scope.row[item.prop]}}</div>
</template>
</template>
</template>
......@@ -153,37 +200,61 @@
</template>
</template>
</template>
<el-table-column v-if='configData.showHandle' label="操作" :width='configData.handleWidth' fixed="right">
<el-table-column
v-if='configData.showHandle'
label="操作"
:width='configData.handleWidth'
fixed="right"
>
<!-- <template slot-scope="scope">
<slot name="table_handle" :row='scope.row' :$index='scope.$index'></slot>
</template> -->
<!-- <template slot-scope="scope"> -->
<template slot-scope="scope">
<template v-for="(item,index) in handleColumns_">
<el-button v-if="showItem(item,scope.row)" :disabled='disabledItem(item,scope.row)||dtlDialogFormDisAbled' :key="index" size="mini" :icon="item.icon" :type="item.type" @click="itemClickActionHandle(item,scope.$index,scope.row)"> {{item.label}}</el-button>
<el-button
v-if="showItem(item,scope.row)"
:disabled='disabledItem(item,scope.row)||dtlDialogFormDisAbled'
:key="index"
size="mini"
:icon="item.icon"
:type="item.type"
@click="itemClickActionHandle(item,scope.$index,scope.row)"
> {{item.label}}</el-button>
</template>
<template v-for="(item) in dtl_list">
<el-link :disabled="dtlDialogFormDisAbled" :key="item.label" type="primary" class="elLink" @click='linkDtl(item,scope.row)'>{{item.label}}</el-link>
<el-link
:disabled="dtlDialogFormDisAbled"
:key="item.label"
type="primary"
class="elLink"
@click='linkDtl(item,scope.row)'
>{{item.label}}</el-link>
</template>
</template>
</el-table-column>
</el-table>
<div v-if="isPicture==='1'">
<div><img :src="imgUrl"
style="width:100%;height:100%;"></div>
<div><img
:src="imgUrl"
style="width:100%;height:100%;"
></div>
</div>
<div class="paginationBox">
<el-pagination v-if="paging"
<el-pagination
v-if="paging"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="paginationPage"
:page-sizes="pageSizes"
:page-size="paginationPageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="paginationTotal">
:total="paginationTotal"
>
</el-pagination>
</div>
<jsoneditor v-model='jsoneditorVisible'
<jsoneditor
v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:allSourceData='allSourceData'
......@@ -192,7 +263,11 @@
:isEditColumns='isEditColumns||configData.isEditColumns'
>
</jsoneditor>
<tableDeatil v-model='detailVisible' :cellDetailStyle='cellDetailStyle' :tableData='tableDataDetail'>
<tableDeatil
v-model='detailVisible'
:cellDetailStyle='cellDetailStyle'
:tableData='tableDataDetail'
>
</tableDeatil>
<el-dialog
title="详情"
......@@ -202,31 +277,50 @@
:close-on-click-modal='false'
:append-to-body='true'
>
<iframe :src='pageSrc' style="width:100%;height:500px;padding-top:10px" sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"></iframe>
<iframe
:src='pageSrc'
style="width:100%;height:500px;padding-top:10px"
sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"
></iframe>
</el-dialog>
<tbaleColumsSet
v-model="dialogVisibleTbaleColums" :tableDataColums='tableDataColums'
v-model="dialogVisibleTbaleColums"
:tableDataColums='tableDataColums'
:allSourceData='allSourceData'
:elInfo='elInfo'
@submit="submitTableColums"
:isEditColumns='isEditColumns'></tbaleColumsSet>
<dialogUpload @importSuccess='importSuccess' :entityConfig='entityConfig' :currentImportItem='currentImportItem' v-model="dialogUploadVisible" @submit="submitUpload"></dialogUpload>
<dialogIframe :entityManger='entityManger' @importSuccess='importSuccess' :currentImportItem='currentImportItem' :entityConfig='entityConfig' v-model="dialogIframeVisible" :src='dialogIframeSrc'></dialogIframe>
:isEditColumns='isEditColumns'
></tbaleColumsSet>
<dialogUpload
@importSuccess='importSuccess'
:entityConfig='entityConfig'
:currentImportItem='currentImportItem'
v-model="dialogUploadVisible"
@submit="submitUpload"
></dialogUpload>
<dialogIframe
:entityManger='entityManger'
@importSuccess='importSuccess'
:currentImportItem='currentImportItem'
:entityConfig='entityConfig'
v-model="dialogIframeVisible"
:src='dialogIframeSrc'
></dialogIframe>
</div>
</template>
<script>
import commonUtility from '../funTools/commonUtility'
import uuidv1 from 'uuid/v1'
import mes_style from './mes_style'
import screen_style from './screen_style'
import _ from 'lodash'
import request from '../funTools/request'
import tableDeatil from './tableDetail'
import jsoneditor from '../common/jsoneditor'
import childItem from './ItemComponentChild'
import tbaleColumsSet from '../common/tbaleColumsSet'
import dialogUpload from '../common/dialogTemplate/dialogUpload'
import dialogIframe from '../common/dialogTemplate/dialogIframe'
import commonUtility from "../funTools/commonUtility";
import uuidv1 from "uuid/v1";
import mes_style from "./mes_style";
import screen_style from "./screen_style";
import _ from "lodash";
import request from "../funTools/request";
import tableDeatil from "./tableDetail";
import jsoneditor from "../common/jsoneditor";
import childItem from "./ItemComponentChild";
import tbaleColumsSet from "../common/tbaleColumsSet";
import dialogUpload from "../common/dialogTemplate/dialogUpload";
import dialogIframe from "../common/dialogTemplate/dialogIframe";
// const tableDeatil = r => require.ensure([], () => r(require('./tableDetail')), 'tableDeatil_')
// const childItem = r => require.ensure([], () => r(require('./ItemComponentChild')), 'ItemComponentChild_')
// const jsoneditor = r => require.ensure([], () => r(require('../common/jsoneditor')), 'jsoneditor_')
......@@ -241,49 +335,52 @@ export default {
childItem,
tbaleColumsSet,
dialogUpload,
dialogIframe,
dialogIframe
},
name: 'hsTable',
name: "hsTable",
props: {
importInfo: {// 导入信息
importInfo: {
// 导入信息
type: Array,
default() {
return []
return [];
}
},
isEditColumns: {}, // 是否可编辑列
maxHeight: {},
height: {},
elInfo: {// 组件信息
elInfo: {
// 组件信息
type: Object,
default() {
return {}
return {};
}
},
allSourceData: {// 数据和配置
allSourceData: {
// 数据和配置
type: Object,
default() {
return {
config: {},
sourceData: [],
picture_url: ''
}
picture_url: ""
};
}
},
isCarousel: {
type: Boolean,
default() {
return true
return true;
}
},
params: {
type: Object,
default() {
return {
el: 'hsTable',
page: 'page1',
position: 'table1'
}
el: "hsTable",
page: "page1",
position: "table1"
};
}
},
layout: {},
......@@ -293,43 +390,49 @@ export default {
jsoneditorOpenAfter: {
type: Function
},
getSourceData: {// 获取所有数据
getSourceData: {
// 获取所有数据
type: Function
},
toggleRow: {// 外部传入的当前行
toggleRow: {
// 外部传入的当前行
},
entityConfig: {}, // 实体
readonly: {// 是否只读
readonly: {
// 是否只读
},
handleColumns: {// 外部传入的操作列
handleColumns: {
// 外部传入的操作列
type: Array,
default() {
return []
return [];
}
},
dtl_list: {// 外部传入的操作列
dtl_list: {
// 外部传入的操作列
type: Array,
default() {
return []
return [];
}
},
fromWhere: {// 来自哪里的表格 列表 or 详情
default: 'list'
fromWhere: {
// 来自哪里的表格 列表 or 详情
default: "list"
},
entityManger: {}// 实体manger
entityManger: {} // 实体manger
},
data() {
return {
imgUrl: '',
elId: '',
imgUrl: "",
elId: "",
tableData: [],
configData: {
toolItems: [],
handleColumns: []
},
jsoneditorVisible: false,
tableStyle: '',
imgStyle: '',
tableStyle: "",
imgStyle: "",
pageArr: {},
page: 0,
currentPage: 0,
......@@ -337,7 +440,7 @@ export default {
tableObj: {},
time: 0,
timer: null,
fit: 'fill',
fit: "fill",
paging: null,
paginationPage: 1,
paginationPageSize: 50,
......@@ -346,8 +449,8 @@ export default {
tableDataDetail: [],
tableHeader: [],
outBoxDom: null,
maxHeight_: 'none',
isPicture: '',
maxHeight_: "none",
isPicture: "",
columnsProp: [],
visible2: false,
cellDetailStyle: {},
......@@ -357,17 +460,17 @@ export default {
columnsConfig: [],
pageSizes: [10, 20, 50, 100, 200, 1000],
subjoinStyle: {
'hyperlink': {
'text-decoration': 'underline',
'cursor': 'pointer'
hyperlink: {
"text-decoration": "underline",
cursor: "pointer"
},
'asyncQueryDetail': {
'text-decoration': 'underline',
'cursor': 'pointer'
asyncQueryDetail: {
"text-decoration": "underline",
cursor: "pointer"
}
},
dialogVisiblePage: false,
pageSrc: '',
pageSrc: "",
handleWidth: 200,
allColumsConfig: {},
dataChangeNumber: 0,
......@@ -375,52 +478,60 @@ export default {
dialogVisibleTbaleColums: false,
dialogUploadVisible: false,
currentImportItem: null,
dialogIframeSrc: '',
dialogIframeSrc: "",
dialogIframeVisible: false,
tableDataFirst: null, // table[0]第一行数据
hsDyncProp: false, // 是否含有动态列
targetRowInner: {}, // 当前行
dtlDialogFormDisAbled: false
}
};
},
watch: {
targetRowInner: {
handler: function(newVal, oldVal) {
this.$emit('setCurrentRow', newVal)
this.$emit("setCurrentRow", newVal);
},
deep: true
},
toggleRow: {
handler: function(newVal, oldVal) {
this.setRowSelect(newVal)
this.setRowSelect(newVal);
},
deep: true
},
paging: {
handler: function(newVal, oldVal) {
if (!newVal) return
const per_page = Array.isArray(newVal) ? parseInt(newVal[0].per_page) : parseInt(newVal.per_page)
const list = [10, 20, 50, 100, 200, 1000]
if (!newVal) return;
const per_page = Array.isArray(newVal)
? parseInt(newVal[0].per_page)
: parseInt(newVal.per_page);
const list = [10, 20, 50, 100, 200, 1000];
if (!list.includes(per_page)) {
list.unshift(per_page)
list.unshift(per_page);
}
this.pageSizes = list
this.pageSizes = list;
},
deep: true
},
allSourceData: {
"allSourceData.sourceData": {
handler: function(newVal, oldVal) {
this.initTabelData(newVal);
},
deep: true
},
"allSourceData.config": {
handler: function(newVal, oldVal) {
this.initTable(newVal)
this.initTabelconfig(newVal);
},
deep: true
},
isCarousel: {
handler: function(newVal, oldVal) {
if (newVal && this.timer !== null) {
this.timer = setInterval(this.changeTableDataFun, newVal)
this.timer = setInterval(this.changeTableDataFun, newVal);
} else {
clearInterval(this.timer)// 清除定时器
this.timer = null
clearInterval(this.timer); // 清除定时器
this.timer = null;
}
},
deep: true
......@@ -428,7 +539,7 @@ export default {
time: {
handler: function(newVal, oldVal) {
if (newVal > 0 && this.isCarousel) {
this.timer = setInterval(this.changeTableDataFun, newVal)
this.timer = setInterval(this.changeTableDataFun, newVal);
}
},
deep: true
......@@ -436,317 +547,322 @@ export default {
},
computed: {
handleColumns_: function() {
const list1 = _.cloneDeep(this.handleColumns || [])
const list2 = _.cloneDeep(this.configData.handleColumns || [])
this.mergeData(list1, list2)
const list1 = _.cloneDeep(this.handleColumns || []);
const list2 = _.cloneDeep(this.configData.handleColumns || []);
this.mergeData(list1, list2);
list2.forEach(item => {
const { click, isHide } = item
const isHideType = typeof isHide === 'boolean'
if (!isHideType) return
const { click, isHide } = item;
const isHideType = typeof isHide === "boolean";
if (!isHideType) return;
switch (click) {
case '$addRow':
case '$deleteRow':
if (this.fromWhere === 'hdrDtl') {
case "$addRow":
case "$deleteRow":
if (this.fromWhere === "hdrDtl") {
if (this.readonly) {
this.$set(item, 'disabled', true)
this.$set(item, "disabled", true);
} else {
this.$set(item, 'disabled', false)
this.$set(item, "disabled", false);
}
}
if (this.readonly && this.fromWhere !== 'hdrDtl') {
this.$set(item, 'disabled', true)
if (this.readonly && this.fromWhere !== "hdrDtl") {
this.$set(item, "disabled", true);
}
break
break;
}
})
return list2
});
return list2;
},
tool_list: function() {
const newList = []
const newVal_ = _.cloneDeep(this.importInfo)
const toolItems = _.cloneDeep(this.configData.toolItems || [])
newList.push(...newVal_, ...toolItems)
const newList = [];
const newVal_ = _.cloneDeep(this.importInfo);
const toolItems = _.cloneDeep(this.configData.toolItems || []);
newList.push(...newVal_, ...toolItems);
newList.forEach(item => {
const { click, isHide } = item
const isHideType = typeof isHide === 'boolean'
const { click, isHide } = item;
const isHideType = typeof isHide === "boolean";
switch (click) {
case '$addRow':
case '$deleteRow':
if (this.fromWhere === 'hdrDtl') {
case "$addRow":
case "$deleteRow":
if (this.fromWhere === "hdrDtl") {
if (this.readonly) {
this.$set(item, 'disabled', true)
this.$set(item, "disabled", true);
} else if (isHide === undefined || isHideType) {
this.$set(item, 'disabled', false)
this.$set(item, "disabled", false);
}
}
if (this.readonly && this.fromWhere !== 'hdrDtl') {
this.$set(item, 'disabled', true)
if (this.readonly && this.fromWhere !== "hdrDtl") {
this.$set(item, "disabled", true);
}
break
case '$excelImportItem':
case '$dataImportItem':
if (this.fromWhere === 'hdrDtl') {
break;
case "$excelImportItem":
case "$dataImportItem":
if (this.fromWhere === "hdrDtl") {
if (this.readonly) {
this.$set(item, 'disabled', true)
this.$set(item, "disabled", true);
} else if (isHide === undefined || isHideType) {
this.$set(item, 'disabled', false)
this.$set(item, "disabled", false);
}
}
break
break;
}
})
return newList || []
});
return newList || [];
},
showSummary: function() {
const tkeys = Object.keys(this.total)
const tkeys = Object.keys(this.total);
const sumKey = this.columnsConfig.reduce((prve, curr) => {
if (curr.summarizing) {
prve.push(curr.prop)
prve.push(curr.prop);
}
return prve
}, [])
return !!tkeys.length || !!sumKey.length
return prve;
}, []);
return !!tkeys.length || !!sumKey.length;
}
},
created() {
this.elId = uuidv1() // 获取随机id
this.elId = uuidv1(); // 获取随机id
},
mounted() {
this.initTable(this.allSourceData)
this.initTable(this.allSourceData);
this.$nextTick(() => {
setTimeout(() => {
this.showEditJsonDialog()
}, 1000)
})
this.showEditJsonDialog();
}, 1000);
});
},
destroyed() {
if (this.outBoxDom) {
this.outBoxDom.removeEventListener('mousedown', this.boxEventMouse)
this.outBoxDom.removeEventListener("mousedown", this.boxEventMouse);
}
this.chart = null
this.chart = null;
},
beforeDestroy() {
clearInterval(this.timer)// 清除定时器
clearInterval(this.timer); // 清除定时器
if (this.chart) {
this.chart.clear()
this.chart.clear();
}
this.grouptableData = null
this.chart = null
this.timer = null
this.time = 0
this.grouptableData = null;
this.chart = null;
this.timer = null;
this.time = 0;
},
methods: {
disabledItem(item, row) {
const { disabled } = item
const type = typeof disabled
const { disabled } = item;
const type = typeof disabled;
const data = {
row,
item
}
if (type === 'boolean') {
return disabled
} else if (type === 'function') {
return disabled(data)
};
if (type === "boolean") {
return disabled;
} else if (type === "function") {
return disabled(data);
} else {
return false
return false;
}
},
showItem(item, row) {
const { isHide } = item
const type = typeof isHide
const { isHide } = item;
const type = typeof isHide;
const data = {
row,
item
}
if (type === 'boolean') {
return !isHide
} else if (type === 'function') {
};
if (type === "boolean") {
return !isHide;
} else if (type === "function") {
try {
return !isHide(data)
return !isHide(data);
} catch (error) {
console.log(error)
const funName = '$' + isHide
this.$message.error(`${funName} 有误`)
console.log(error);
const funName = "$" + isHide;
this.$message.error(`${funName} 有误`);
}
} else {
return true
return true;
}
},
cumputedisabled(item) {
return !!item.disabled
return !!item.disabled;
},
linkDtl(item, row) {
this.$emit('RowClick', {
this.$emit("RowClick", {
row: row
})
const that = this
});
const that = this;
setTimeout(() => {
const tartItem = that.dtl_list.find(item__ => item__.url === item.url)
this.$emit('linkDtl', tartItem, row)
}, 100)
},
mergeData(data1, data2, prop = 'click') {
if (!Array.isArray(data1)) return
if (!Array.isArray(data2)) return
const list = []
const tartItem = that.dtl_list.find(item__ => item__.url === item.url);
this.$emit("linkDtl", tartItem, row);
}, 100);
},
mergeData(data1, data2, prop = "click") {
if (!Array.isArray(data1)) return;
if (!Array.isArray(data2)) return;
const list = [];
data1.forEach(item => {
let target = data2.find(_item => _item[prop] === item[prop])
let target = data2.find(_item => _item[prop] === item[prop]);
if (target) {
target = Object.assign(target, item)
target = Object.assign(target, item);
} else {
list.push(item)
list.push(item);
}
})
data2.push(...list)
});
data2.push(...list);
},
itemClickActionHandle(item, index, row) {
const { click } = item
const type = typeof click
if (type === 'string' && click.startsWith('$')) {
const item_ = Object.assign({}, item)
item_.click = item_.click.substr(1)
this.itemClick(item_, index)
} else if (type === 'function') {
click(row)
const { click } = item;
const type = typeof click;
if (type === "string" && click.startsWith("$")) {
const item_ = Object.assign({}, item);
item_.click = item_.click.substr(1);
this.itemClick(item_, index);
} else if (type === "function") {
click(row);
}
},
itemClickAction(item, index) {
const { click } = item
const type = typeof click
if (type === 'string' && click.startsWith('$')) {
const item_ = Object.assign({}, item)
item_.click = item_.click.substr(1)
this.itemClick(item_)
} else if (type === 'function') {
click(item)
const { click } = item;
const type = typeof click;
if (type === "string" && click.startsWith("$")) {
const item_ = Object.assign({}, item);
item_.click = item_.click.substr(1);
this.itemClick(item_);
} else if (type === "function") {
click(item);
}
},
itemClick(item, index) {
const { click } = item
const { click } = item;
switch (click) {
case 'exportCurrPageData':
this.exportExcel(1)
break
case 'exportAllPageData':
this.exportExcel(2)
break
case 'tableColumnSet':
this.tableColumnSet()
break
case 'dataImportItem':
case 'excelImportItem':
this.importItem(item)
break
case 'addRow':
this.addRow(index)
break
case 'deleteRow':
this.deleteRow(index)
break
case 'editRow':
this.editRow(index)
break
case "exportCurrPageData":
this.exportExcel(1);
break;
case "exportAllPageData":
this.exportExcel(2);
break;
case "tableColumnSet":
this.tableColumnSet();
break;
case "dataImportItem":
case "excelImportItem":
this.importItem(item);
break;
case "addRow":
this.addRow(index);
break;
case "deleteRow":
this.deleteRow(index);
break;
case "editRow":
this.editRow(index);
break;
}
},
editRow(index) {
const data = {
row: this.tableData[index],
index: index
}
this.$emit('editRow', data)
};
this.$emit("editRow", data);
},
addRow(index) {
this.$emit('addRow', index)
this.$emit("addRow", index);
},
deleteRow(index) {
if (typeof index === 'number') {
this.tableData.splice(index, 1)
if (typeof index === "number") {
this.tableData.splice(index, 1);
} else {
// 逆向循环删除数组某些项
var arr = this.tableData
var arr = this.tableData;
for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i].isSelected) {
arr.splice(i, 1)
arr.splice(i, 1);
}
}
}
},
initTable(data) {
const { config, sourceData } = data
this.initTabelData(sourceData)
this.initTabelconfig(config)
const { config, sourceData } = data;
this.initTabelData(sourceData);
this.initTabelconfig(config);
},
getSessionInfo() {
const { db_name, db_code } = commonUtility.parseUrlQueryString()
const { appCode, pagename } = commonUtility.parseUrlQueryBIDyncAppcodePageName()
const dbName = db_name || ''
const { db_name, db_code } = commonUtility.parseUrlQueryString();
const {
appCode,
pagename
} = commonUtility.parseUrlQueryBIDyncAppcodePageName();
const dbName = db_name || "";
const obj = _.cloneDeep({
dbName,
appCode,
page: pagename,
db_code
})
return obj
});
return obj;
},
importSuccess(data) {
this.$emit('importSuccess', data)
this.dialogIframeVisible = false
this.$emit("importSuccess", data);
this.dialogIframeVisible = false;
},
submitUpload(fileList) {
const file = fileList[0]
this.$emit('importItem', file.raw, this.currentImportItem)
const file = fileList[0];
this.$emit("importItem", file.raw, this.currentImportItem);
},
importItem(item) {
this.currentImportItem = item
this.$emit('setCurrentImportItem', item)
const parms = item.parms
if (!item.url) { // excel 导入
this.dialogUploadVisible = true
this.currentImportItem = item;
this.$emit("setCurrentImportItem", item);
const parms = item.parms;
if (!item.url) {
// excel 导入
this.dialogUploadVisible = true;
} else {
if (!item.import_name) {
this.$message.error('请配置-import_name')
return
this.$message.error("请配置-import_name");
return;
}
// 数据导入
const href = location.href
const startUrl = href.split('#')[0]
let url = item.url
if (item.url.includes('?')) {
url = item.url + '&fromMenu=1'
const href = location.href;
const startUrl = href.split("#")[0];
let url = item.url;
if (item.url.includes("?")) {
url = item.url + "&fromMenu=1";
} else {
url = item.url + '?fromMenu=1'
url = item.url + "?fromMenu=1";
}
let parmsStr = ''
let parmsStr = "";
for (const key in parms) {
parmsStr += `&${key}=${parms[key]}`
parmsStr += `&${key}=${parms[key]}`;
}
const appInfo = this.getSessionInfo()
const url_ = `${startUrl}#${url}` + `&db_name=${appInfo.dbName}` + parmsStr
this.dialogIframeSrc = url_
this.dialogIframeVisible = true
const appInfo = this.getSessionInfo();
const url_ =
`${startUrl}#${url}` + `&db_name=${appInfo.dbName}` + parmsStr;
this.dialogIframeSrc = url_;
this.dialogIframeVisible = true;
}
},
getPageInfo(info = this.elInfo) {
const data = {
sControl: info.position
}
return request.getSql(data)
};
return request.getSql(data);
},
async submitTableColums(data, flage) {
const res = await this.getPageInfo()
let paramsData = {}
const res = await this.getPageInfo();
let paramsData = {};
if (!res || (res && Array.isArray(res) && !res.length)) {
const { config, sourceData } = this.allSourceData
paramsData.json_config = JSON.stringify(config)
paramsData.json_data = JSON.stringify(sourceData)
paramsData.is_mock = 1
paramsData.query_sql = ''
const { config, sourceData } = this.allSourceData;
paramsData.json_config = JSON.stringify(config);
paramsData.json_data = JSON.stringify(sourceData);
paramsData.is_mock = 1;
paramsData.query_sql = "";
} else {
paramsData = res[0]
paramsData = res[0];
}
const { query_sql, json_config, json_data, is_mock } = paramsData
const json_config_ = JSON.parse(json_config)
json_config_.columnsConfig = data
const { query_sql, json_config, json_data, is_mock } = paramsData;
const json_config_ = JSON.parse(json_config);
json_config_.columnsConfig = data;
const dataw = {
sControl: this.elInfo.position,
sConfig: json_config_,
......@@ -754,159 +870,194 @@ export default {
sQuerySql: query_sql,
elInfo: this.elInfo,
is_mock: is_mock ? 1 : 0
}
};
request.runSave(dataw).then(res => {
if (flage !== 'columnStyleSet') {
this.dialogVisibleTbaleColums = false
if (flage !== "columnStyleSet") {
this.dialogVisibleTbaleColums = false;
}
this.configData.columnsConfig = data
})
this.configData.columnsConfig = data;
});
},
tableColumnSet() {
const config = _.cloneDeep(this.configData)
const config = _.cloneDeep(this.configData);
if (config && config.columnsConfig && config.columnsConfig.length) {
this.tableDataColums = [...config.columnsConfig]
this.tableDataColums = [...config.columnsConfig];
} else {
this.tableDataColums = [{}]
this.tableDataColums = [{}];
}
this.tableDataColums.forEach((item, index) => {
if (item.childs) {
this.tableDataColums.splice(index, 1, ...item.childs)
this.tableDataColums.splice(index, 1, ...item.childs);
}
})
this.dialogVisibleTbaleColums = true
});
this.dialogVisibleTbaleColums = true;
},
selectionChange(data) {
data.forEach(item => {
this.$set(item, 'isSelected', true)
})
this.$emit('selectionChange', data)
this.$set(item, "isSelected", true);
});
this.$emit("selectionChange", data);
},
jumpItem(prop) {
const target = this.columnsConfig.find(item => item.prop === prop && !item.isHide)
const target1 = this.columnsProp.find(item => item.prop === prop && !item.isHide)
return target || target1
const target = this.columnsConfig.find(
item => item.prop === prop && !item.isHide
);
const target1 = this.columnsProp.find(
item => item.prop === prop && !item.isHide
);
return target || target1;
},
set_row_style(row) {
if (
row.bill_status === '5' ||
row.bill_status === "5" ||
row.usable === false ||
row.bUsable === false
) {
return {
'text-decoration': 'line-through',
color: '#afafaf'
}
"text-decoration": "line-through",
color: "#afafaf"
};
}
},
tableRowDblclick(row, column, event) {
const disaledDblClick = this.configData.disaledDblClick
const disaledDblClick = this.configData.disaledDblClick;
if (!disaledDblClick) {
this.$emit('tableRowDblclick', row)
this.$emit("tableRowDblclick", row);
}
},
selectAll(selection) {
this.tableData.forEach(item => {
this.$set(item, 'isSelected', !!selection.length)
})
if (!selection.length) { // 清空时 去掉当前行
this.$refs.hsTable.setCurrentRow()
this.$set(item, "isSelected", !!selection.length);
});
if (!selection.length) {
// 清空时 去掉当前行
this.$refs.hsTable.setCurrentRow();
}
},
selectCheckBox(selection, row) {
this.$set(row, 'isSelected', !row.isSelected)
this.$set(row, "isSelected", !row.isSelected);
// 设置当前行是否高亮
if (!row.isSelected) {
this.$refs.hsTable.setCurrentRow()
this.targetRowInner = {}
this.$refs.hsTable.setCurrentRow();
this.targetRowInner = {};
} else {
this.$refs.hsTable.setCurrentRow(row)
this.targetRowInner = row
this.$refs.hsTable.setCurrentRow(row);
this.targetRowInner = row;
}
},
async exportExcel(flage) {
const data = this.tableData
const columnsProp_ = []
const data = this.tableData;
const columnsProp_ = [];
this.columnsProp.forEach(item => {
if (item.childs) {
columnsProp_.push(...item.childs)
columnsProp_.push(...item.childs);
} else {
columnsProp_.push(item)
columnsProp_.push(item);
}
})
const tHeader = []
});
const tHeader = [];
columnsProp_.forEach(item => {
const str = `${item.label}=${item.prop}`
tHeader.push(str)
})
const exportExcelName = this.configData.exportExcelName || '表'
const str = `${item.label}=${item.prop}`;
tHeader.push(str);
});
const exportExcelName = this.configData.exportExcelName || "表";
if (flage === 2) {
const result = await this.getSourceData({ param: { per_page: -1 }, elInfo: this.elInfo })
const result = await this.getSourceData({
param: { per_page: -1 },
elInfo: this.elInfo
});
if (Array.isArray(result) && result.length) {
let exportExcelData = []
let exportExcelData = [];
if (result[0].json_data) {
const json_data = typeof result[0].json_data === 'string' ? JSON.parse(result[0].json_data) : result[0].json_data
exportExcelData = Array.isArray(json_data) ? json_data : json_data.table
const json_data =
typeof result[0].json_data === "string"
? JSON.parse(result[0].json_data)
: result[0].json_data;
exportExcelData = Array.isArray(json_data)
? json_data
: json_data.table;
} else {
exportExcelData = result
exportExcelData = result;
}
this.$utilsExcel.exportToExcel(tHeader, exportExcelData, exportExcelName)
this.$utilsExcel.exportToExcel(
tHeader,
exportExcelData,
exportExcelName
);
} else {
this.$message.warning('暂无数据~')
this.$message.warning("暂无数据~");
}
} else {
this.$utilsExcel.exportToExcel(tHeader, data, exportExcelName)
this.$utilsExcel.exportToExcel(tHeader, data, exportExcelName);
}
},
handleClose() {
this.dialogVisiblePage = false
this.dialogVisiblePage = false;
},
headerClick(column, event) {
const target = event.target
const className = target.className
const target = event.target;
const className = target.className;
const data = {
prop: column.property,
order: ''
}
if (className && className.includes('sort-caret')) {
if (className.includes('ascending') && !target.className.includes('activeBottomSort')) {
data.order = '1'
target.className = target.className + ' activeBottomSort'
target.nextSibling.className = target.nextSibling.className.replace('activeTopSort', '')
} else if (className.includes('ascending') && target.className.includes('activeBottomSort')) {
data.order = ''
target.className = target.className.replace('activeBottomSort', '')
} else if (className.includes('descending') && !target.className.includes('activeTopSort')) {
data.order = '0'
target.className = target.className + ' activeTopSort'
target.previousSibling.className = target.previousSibling.className.replace('activeBottomSort', '')
} else if (className.includes('descending') && target.className.includes('activeTopSort')) {
data.order = ''
target.className = target.className.replace('activeTopSort', '')
order: ""
};
if (className && className.includes("sort-caret")) {
if (
className.includes("ascending") &&
!target.className.includes("activeBottomSort")
) {
data.order = "1";
target.className = target.className + " activeBottomSort";
target.nextSibling.className = target.nextSibling.className.replace(
"activeTopSort",
""
);
} else if (
className.includes("ascending") &&
target.className.includes("activeBottomSort")
) {
data.order = "";
target.className = target.className.replace("activeBottomSort", "");
} else if (
className.includes("descending") &&
!target.className.includes("activeTopSort")
) {
data.order = "0";
target.className = target.className + " activeTopSort";
target.previousSibling.className = target.previousSibling.className.replace(
"activeBottomSort",
""
);
} else if (
className.includes("descending") &&
target.className.includes("activeTopSort")
) {
data.order = "";
target.className = target.className.replace("activeTopSort", "");
}
this.$emit('sortChange', data)
this.$emit("sortChange", data);
}
},
ascendingClick() {
},
ascendingClick() {},
renderHeader(h, { column, $index }) {
const { property, label } = column
const { property, label } = column;
const target = this.columnsProp.find(item => {
return item.prop === property && !item.isHide
})
return item.prop === property && !item.isHide;
});
if (!target) {
return label
return label;
}
let innerHtml = column.label
let innerHtml = column.label;
if (target && target.isRequired) {
innerHtml = '<i style="color:red;">*</i>' + innerHtml
innerHtml = '<i style="color:red;">*</i>' + innerHtml;
}
if (target && target.isSort) {
innerHtml += '<span class="caret-wrapper"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>'
innerHtml +=
'<span class="caret-wrapper"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>';
}
return h(
'span',
"span",
{
domProps: {
innerHTML: innerHtml
......@@ -915,722 +1066,826 @@ export default {
click: this.ascendingClick
}
},
[h('span')]
)
[h("span")]
);
},
sortChange(column) {
const data = {
prop: column.prop,
order: column.order
}
this.$emit('sortChange', data)
},
cellClickItem(value, action) {
};
this.$emit("sortChange", data);
},
cellClickItem(value, action) {},
cellDblclick(row, column, cell, event) {
// const { property } = column
},
rowCellBoolean(value) {
if (Number(value)) {
return 'el-icon-check'
return "el-icon-check";
} else {
return 'el-icon-close'
return "el-icon-close";
}
},
getSummaries(param) {
const { columns } = param
const sums = []
const { columns } = param;
const sums = [];
const sumKey = this.columnsConfig.reduce((prve, curr) => {
if (curr.summarizing) {
prve.push(curr.prop)
prve.push(curr.prop);
}
return prve
}, [])
const sumObj = {}
return prve;
}, []);
const sumObj = {};
sumKey.forEach(key => {
sumObj[key] = 0
sumObj[key] = 0;
this.tableData.forEach(item => {
if (item[key]) {
sumObj[key] += Number(item[key])
sumObj[key] += Number(item[key]);
}
})
})
const total_ = Object.assign(_.cloneDeep(this.total))
const tkeys = Object.keys(total_)
});
});
const total_ = Object.assign(_.cloneDeep(this.total));
const tkeys = Object.keys(total_);
columns.forEach((column, index) => {
const { property } = column
const { property } = column;
if (index === 0) {
sums[index] = '合计'
sums[index] = "合计";
} else if (tkeys.length) {
if (tkeys.includes(property)) {
sums[index] = total_[property]
sums[index] = total_[property];
} else {
sums[index] = ''
sums[index] = "";
}
} else if (sumKey.length) {
if (sumKey.includes(property)) {
sums[index] = sumObj[property]
sums[index] = sumObj[property];
} else {
sums[index] = ''
sums[index] = "";
}
}
})
return sums
});
return sums;
},
jumpDisable(row, key) {
if (row[`_data_${key}`]) {
return false
return false;
} else {
return true
return true;
}
},
showpopover(row, key, cell) {
if (row[`_data_${key}`]) {
const _data_value = row[`_data_${key}`]
this.tableDataDetail = _data_value
if (!this.tableDataDetail.length) return
this.tableHeader = Object.keys(this.tableDataDetail[0])
const _data_value = row[`_data_${key}`];
this.tableDataDetail = _data_value;
if (!this.tableDataDetail.length) return;
this.tableHeader = Object.keys(this.tableDataDetail[0]);
} else {
// this.tableDataDetail = []
}
},
minWidthChildFun(label) {
const l = label.length
const f = 12
const minWidth = f * l // 加上一个文字长度
return minWidth
const l = label.length;
const f = 12;
const minWidth = f * l; // 加上一个文字长度
return minWidth;
},
minWidthFun(column, flage) {
// 表示要自适应
const { width, label, prop: property } = column
if (width) return width
if (this.configData.isAdaptive) return
if (!label) return
const l = flage === 1 ? label.length : label.split('__')[1].length
const f = 12
const sortList = this.columnsConfig.find(item => item.isSort && item.prop === property)
let minWidth = f * (l + 2)
const { width, label, prop: property } = column;
if (width) return width;
if (this.configData.isAdaptive) return;
if (!label) return;
const l = flage === 1 ? label.length : label.split("__")[1].length;
const f = 12;
const sortList = this.columnsConfig.find(
item => item.isSort && item.prop === property
);
let minWidth = f * (l + 2);
if (sortList) {
minWidth = f * (l + 4)
minWidth = f * (l + 4);
}
return minWidth
return minWidth;
},
initTabelData(sourceData) {
if (sourceData && sourceData.picture_url && sourceData.picture_url !== '') {
this.imgUrl = '/uploadAPI/file/' + sessionStorage.getItem('app_code') + '/' + this.allSourceData.picture_url
this.isPicture = '1'
if (
sourceData &&
sourceData.picture_url &&
sourceData.picture_url !== ""
) {
this.imgUrl =
"/uploadAPI/file/" +
sessionStorage.getItem("app_code") +
"/" +
this.allSourceData.picture_url;
this.isPicture = "1";
} else {
this.isPicture = '0'
this.isPicture = "0";
}
if (sourceData) {
if (Array.isArray(sourceData)) {
this.tableData = sourceData
this.paging = null
this.total = {}
this.tableData = sourceData;
this.paging = null;
this.total = {};
} else {
const total = sourceData.total || sourceData.set3
const total = sourceData.total || sourceData.set3;
if (total) {
if (Array.isArray(total)) {
this.total = total[0]
this.total = total[0];
} else {
this.total = total
this.total = total;
}
}
this.tableData = sourceData.table || sourceData.set1 || []
this.paging = sourceData.paging || sourceData.set2// 分页信息
this.tableData = sourceData.table || sourceData.set1 || [];
this.paging = sourceData.paging || sourceData.set2; // 分页信息
if (this.paging) {
if (Array.isArray(this.paging)) {
this.paginationPage = parseInt(this.paging[0].page) // 当前页
this.paginationPageSize = parseInt(this.paging[0].per_page) // 分页条数
this.paginationTotal = parseInt(this.paging[0].total)
this.paginationPage = parseInt(this.paging[0].page); // 当前页
this.paginationPageSize = parseInt(this.paging[0].per_page); // 分页条数
this.paginationTotal = parseInt(this.paging[0].total);
} else {
this.paginationPage = parseInt(this.paging.page) // 当前页
this.paginationPageSize = parseInt(this.paging.per_page) // 分页条数
this.paginationTotal = parseInt(this.paging.total)
this.paginationPage = parseInt(this.paging.page); // 当前页
this.paginationPageSize = parseInt(this.paging.per_page); // 分页条数
this.paginationTotal = parseInt(this.paging.total);
}
}
}
}
if (this.tableData.length) {
const data0 = this.tableData[0]
this.tableDataFirst = _.cloneDeep(data0)
const data0 = this.tableData[0];
this.tableDataFirst = _.cloneDeep(data0);
if (data0._id) {
// 此时有动态列 且 此时数据为空
this.tableData.splice(0, 1)
this.tableData.splice(0, 1);
}
}
this.tableData.forEach(item => {
for (const p in item) {
if (p.includes('_data_')) {
if (typeof item[p] === 'string') {
item[p] = JSON.parse(item[p])
if (p.includes("_data_")) {
if (typeof item[p] === "string") {
item[p] = JSON.parse(item[p]);
}
}
}
})
});
},
initTabelconfig(config_) {
const config = _.cloneDeep(config_)
this.configData = this.getDefaultConfig(config)
const config = _.cloneDeep(config_);
this.configData = this.getDefaultConfig(config);
if (config && config.maxHeight) {
this.maxHeight_ = config.maxHeight
this.maxHeight_ = config.maxHeight;
}
const { columnsConfig, cellDetailStyle } = this.configData
this.columnsConfig = columnsConfig || []
const { columnsConfig, cellDetailStyle } = this.configData;
this.columnsConfig = columnsConfig || [];
if (columnsConfig && columnsConfig.length) {
this.columnsProp = [...columnsConfig] // 筛选出可显示的
const dyncProp = this.columnsProp.find(item => item.prop === '*')
this.columnsProp = [...columnsConfig]; // 筛选出可显示的
const dyncProp = this.columnsProp.find(item => item.prop === "*");
if (dyncProp) {
this.hsDyncProp = true
this.setHeaderAnynsProp(this.columnsProp)
this.hsDyncProp = true;
this.setHeaderAnynsProp(this.columnsProp);
} else {
this.hsDyncProp = false
this.hsDyncProp = false;
}
} else {
this.columnsProp = [...this.getAsyncProp(this.tableDataFirst)]
this.columnsProp = [...this.getAsyncProp(this.tableDataFirst)];
}
this.getHeaderCellStyle(this.tableData)
this.getHeaderCellStyle(this.tableData);
this.columnsProp.forEach(item => {
if (!item.showType || item.showType === 'text') {
item.showOverflowTooltip = true
if (!item.showType || item.showType === "text") {
item.showOverflowTooltip = true;
} else {
item.showOverflowTooltip = false
item.showOverflowTooltip = false;
}
})
this.columnsProp = this.groupByProp(this.columnsProp)
console.log(this.columnsConfig, ' this.columnsConfig')
});
this.columnsProp = this.groupByProp(this.columnsProp);
console.log(this.columnsConfig, " this.columnsConfig");
// 避免数据变更 再次发出请求
if (this.dataChangeNumber < 4) {
this.dataChangeNumber++
this.dataChangeNumber++;
// this.initTableColumnsControl()
}
if (this.hsDyncProp) { // 有动态列的时候 每次数据变得都得重新请求一次下拉数据
if (this.hsDyncProp) {
// 有动态列的时候 每次数据变得都得重新请求一次下拉数据
// this.initTableColumnsControl()
}
this.setCellDetailStyle(cellDetailStyle)
this.dtlDialogFormDisAbled = this.disabledItem(this.configData)
this.setCellDetailStyle(cellDetailStyle);
this.dtlDialogFormDisAbled = this.disabledItem(this.configData);
},
getHeaderCellStyle(datas) {
if (!datas.length) return
if (!datas.length) return;
if (datas[0]._headerCellStyleSetting_) {
const _headerCellStyleSetting_ = datas[0]._headerCellStyleSetting_
this.headerCellStyleSetting_ = _headerCellStyleSetting_
const _headerCellStyleSetting_ = datas[0]._headerCellStyleSetting_;
this.headerCellStyleSetting_ = _headerCellStyleSetting_;
}
},
setHeaderAnynsProp(data) {
data.forEach((item, index) => {
if (item.prop === '*') {
if (item.prop === "*") {
// 获取所有的动态列
const anyncProp = this.getAsyncProp(this.tableDataFirst, data)
const anyncProp = this.getAsyncProp(this.tableDataFirst, data);
anyncProp.forEach(item_ => {
// item.showType = 'input'
this.$set(item_, 'showType', item.showType)
})
this.$set(item_, "showType", item.showType);
});
// 删除那一带*的行 替换成动态列
data.splice(index, 1, ...anyncProp)
data.splice(index, 1, ...anyncProp);
}
})
});
},
getAsyncProp(tableDataFirst, columnsProp = []) {
if (!tableDataFirst) return []
const props = Object.keys(tableDataFirst)
if (!tableDataFirst) return [];
const props = Object.keys(tableDataFirst);
// 已经手动设置存在的表表头
const constProps = []
const constProps = [];
if (columnsProp.length) {
columnsProp.forEach(item => {
if (item.prop !== '*') {
constProps.push(item.prop)
if (item.prop !== "*") {
constProps.push(item.prop);
}
})
});
}
// 动态设置1维表头
const constProps_ = []
const constProps_ = [];
props.forEach(prop => {
if (!prop.includes('__') && !prop.startsWith('_') && !prop.includes('_data_') && prop !== 'isSelected') {
if (
!prop.includes("__") &&
!prop.startsWith("_") &&
!prop.includes("_data_") &&
prop !== "isSelected"
) {
constProps_.push({
prop: prop,
label: prop,
'showOverflowTooltip': true
})
} else if (prop.includes('__')) {
const one_title = prop.split('__')[0]
const target = columnsProp.find(p => p.prop.split('__')[0] === one_title)
if (target) return
const one_title_list = props.filter(item => item.split('__')[0] === one_title)
const one_title_list_prop = []
showOverflowTooltip: true
});
} else if (prop.includes("__")) {
const one_title = prop.split("__")[0];
const target = columnsProp.find(
p => p.prop.split("__")[0] === one_title
);
if (target) return;
const one_title_list = props.filter(
item => item.split("__")[0] === one_title
);
const one_title_list_prop = [];
one_title_list.forEach(item => {
one_title_list_prop.push({
prop: item,
label: item,
'showOverflowTooltip': true
})
})
const t = constProps_.find(item => item.prop === one_title)
showOverflowTooltip: true
});
});
const t = constProps_.find(item => item.prop === one_title);
if (!t) {
constProps_.push({
prop: one_title,
label: one_title,
childs: one_title_list_prop
})
});
}
}
})
const result = constProps_.filter(item => !constProps.includes(item.prop))
return result || []
});
const result = constProps_.filter(
item => !constProps.includes(item.prop)
);
return result || [];
},
groupByProp(list) {
const parms = []
const parms = [];
list.forEach(item => {
// const itemProp = item.prop
// if (!itemProp) {
// item.prop = item.label
// }
if (!item.prop) {
item.prop = ''
item.prop = "";
}
const prop = item.prop.split('__')[0]
if (item.prop.includes('__')) {
const prop = item.prop.split("__")[0];
if (item.prop.includes("__")) {
// const prop = item.prop.split('__')[0]
const t = parms.find(jtem => jtem.prop === prop)
const t = parms.find(jtem => jtem.prop === prop);
if (t) {
t.childs.push(item)
t.childs.push(item);
} else {
const obj = {
prop: '',
label: '',
prop: "",
label: "",
childs: []
}
obj.prop = prop
obj.label = prop
obj.childs.push(item)
parms.push(obj)
};
obj.prop = prop;
obj.label = prop;
obj.childs.push(item);
parms.push(obj);
}
} else {
parms.push(item)
parms.push(item);
}
})
return parms
});
return parms;
},
tansFormAsyncProps(list) {
const rasyncProps = _(list).groupBy(item => item.split('__')[0]).value()
const Keys = Object.keys(rasyncProps)
const result = []
const rasyncProps = _(list)
.groupBy(item => item.split("__")[0])
.value();
const Keys = Object.keys(rasyncProps);
const result = [];
Keys.forEach(k => {
const obj = {
prop: '',
label: '',
'showOverflowTooltip': true,
prop: "",
label: "",
showOverflowTooltip: true,
childs: []
}
obj.prop = k
obj.label = k
};
obj.prop = k;
obj.label = k;
rasyncProps[k].forEach(i => {
obj.childs.push({
prop: i,
label: i,
'showOverflowTooltip': true
})
})
result.push(obj)
})
return result
showOverflowTooltip: true
});
});
result.push(obj);
});
return result;
},
getTableHeader(data = this.tableData) {
if (!data.length) return []
const props = Object.keys(data[0])
let __list = []
const list = []
if (!data.length) return [];
const props = Object.keys(data[0]);
let __list = [];
const list = [];
props.forEach((prop, index) => {
if (prop.includes('__') && !prop.includes('_data_')) {
__list.push(prop)
delete props[index]
} else if (!prop.startsWith('_') && !prop.includes('_data_') && prop !== 'isSelected') {
list.push(prop)
if (prop.includes("__") && !prop.includes("_data_")) {
__list.push(prop);
delete props[index];
} else if (
!prop.startsWith("_") &&
!prop.includes("_data_") &&
prop !== "isSelected"
) {
list.push(prop);
}
})
});
if (__list.length) {
__list = _(__list).groupBy(item => item.split('__')[0]).value()
__list = _(__list)
.groupBy(item => item.split("__")[0])
.value();
}
list.push(__list)
return list
list.push(__list);
return list;
},
getDefaultConfig(config = {}) {
let _config = {}
if (config.hsConfig !== undefined && config.hsConfig.default_type + '' === '1') {
let _config = {};
if (
config.hsConfig !== undefined &&
config.hsConfig.default_type + "" === "1"
) {
// mes样式
_config = this.config_merge(mes_style, config)
_config = this.config_merge(mes_style, config);
} else {
// 大屏样式
_config = this.config_merge(screen_style, config)
_config = this.config_merge(screen_style, config);
}
if (_config.queryBiTheme) {
sessionStorage['queryBiTheme_'] = JSON.stringify(_config.queryBiTheme)
sessionStorage["queryBiTheme_"] = JSON.stringify(_config.queryBiTheme);
}
return _config
return _config;
},
config_merge(defaultConfig, config) {
if (!Object.keys(config).length) {
return defaultConfig
return defaultConfig;
}
const _defaultConfig = _.cloneDeep(defaultConfig)
const _defaultConfig = _.cloneDeep(defaultConfig);
for (const key1 in _defaultConfig) {
if (typeof _defaultConfig[key1] === 'object') {
if (typeof _defaultConfig[key1] === "object") {
for (const key2 in _defaultConfig[key1]) {
if (config[key1] !== undefined && config[key1][key2] !== undefined) {
_defaultConfig[key1][key2] = config[key1][key2]
if (
config[key1] !== undefined &&
config[key1][key2] !== undefined
) {
_defaultConfig[key1][key2] = config[key1][key2];
}
}
} else if (Array.isArray(_defaultConfig[key1])) {
_defaultConfig[key1] = config[key1]
_defaultConfig[key1] = config[key1];
} else {
if (config[key1] !== undefined) {
_defaultConfig[key1] = config[key1]
_defaultConfig[key1] = config[key1];
}
}
}
Object.keys(config).forEach(item => {
if (!(item in _defaultConfig)) {
_defaultConfig[item] = config[item]
_defaultConfig[item] = config[item];
}
})
return _defaultConfig
});
return _defaultConfig;
},
setRowSelect(row, f) {
this.tableData.forEach(item => {
if (item.isSelected) {
this.$set(item, 'isSelected', false)
this.$set(item, "isSelected", false);
}
})
row.isSelected = true
this.$refs.hsTable.clearSelection()
this.$refs.hsTable.setCurrentRow(row)
this.$refs.hsTable.toggleRowSelection(row)
this.targetRowInner = row
});
row.isSelected = true;
this.$refs.hsTable.clearSelection();
this.$refs.hsTable.setCurrentRow(row);
this.$refs.hsTable.toggleRowSelection(row);
this.targetRowInner = row;
},
tableRowClick(row, column, event) {
this.$emit('RowClick', {
this.$emit("RowClick", {
row: row,
column: column,
event: event
})
});
},
// 单击某个单元格的时候 弹出明细
tableCellClick(row, column, cell, event) {
this.setRowSelect(row)
const key = column.label
const { property } = column
const target = this.columnsConfig.find(item => item.prop === property)
if (target && (target.type === 'hyperlink' || target.type === 'asyncQueryDetail')) {
let value_ = row[property]
const otherConfig = target.otherConfig
if (otherConfig && !otherConfig.startsWith('/') && !otherConfig.startsWith('http')) {
value_ = row[target.otherConfig]
this.setRowSelect(row);
const key = column.label;
const { property } = column;
const target = this.columnsConfig.find(item => item.prop === property);
if (
target &&
(target.type === "hyperlink" || target.type === "asyncQueryDetail")
) {
let value_ = row[property];
const otherConfig = target.otherConfig;
if (
otherConfig &&
!otherConfig.startsWith("/") &&
!otherConfig.startsWith("http")
) {
value_ = row[target.otherConfig];
} else if (otherConfig) {
value_ = otherConfig
value_ = otherConfig;
}
const reg = /\{(.*?)\}/g // /(?<=\{).*?(?=\})/g
const queryList = value_.match(reg) || []// value_.match(/(?<=\{).*?(?=\})/g) || [] // value_.match(reg) || [] //
const reg = /\{(.*?)\}/g; // /(?<=\{).*?(?=\})/g
const queryList = value_.match(reg) || []; // value_.match(/(?<=\{).*?(?=\})/g) || [] // value_.match(reg) || [] //
queryList.forEach(p => {
const p_ = p.replace('{', '').replace('}', '')
const pt = row[p_]
value_ = value_.replace(`{${p_}}`, pt)
})
const origin = location.origin
let url = value_
if (value_.startsWith('http')) {
url = value_
} else if (value_.startsWith('/')) {
url = origin + '/#' + value_
}
if (target.type === 'hyperlink') {
window.open(url, '_blank')
} else if (target.type === 'asyncQueryDetail') {
const property = column.property
const p_ = p.replace("{", "").replace("}", "");
const pt = row[p_];
value_ = value_.replace(`{${p_}}`, pt);
});
const origin = location.origin;
let url = value_;
if (value_.startsWith("http")) {
url = value_;
} else if (value_.startsWith("/")) {
url = origin + "/#" + value_;
}
if (target.type === "hyperlink") {
window.open(url, "_blank");
} else if (target.type === "asyncQueryDetail") {
const property = column.property;
if (row[property]) {
this.pageSrc = url
this.dialogVisiblePage = true
this.pageSrc = url;
this.dialogVisiblePage = true;
}
}
}
if (row[`_data_${key}`]) {
this.detailVisible = true
const _data_value = row[`_data_${key}`]
this.tableDataDetail = _data_value
this.detailVisible = true;
const _data_value = row[`_data_${key}`];
this.tableDataDetail = _data_value;
} else {
this.$emit('CellClick', {
this.$emit("CellClick", {
row: row,
column: column,
cell: cell,
event: event
})
});
}
},
// 鼠标移入事件
tableCellmouse(row, column, cell, event) {
if (this.configData.hover) {
const { hoverBackground } = this.configData.hover
const { hoverBackground } = this.configData.hover;
if (hoverBackground) {
cell.parentNode.style.background = hoverBackground
cell.parentNode.style.background = hoverBackground;
}
}
},
// 鼠标离开事件
tableCelleave(row, column, cell, event) {
const { property } = column
const { _styleCellSetting_, _styleRowSetting_ } = row
const _styleRowSetting__ = _styleRowSetting_ || {}
const cellStyel = {}
const { property } = column;
const { _styleCellSetting_, _styleRowSetting_ } = row;
const _styleRowSetting__ = _styleRowSetting_ || {};
const cellStyel = {};
if (_styleCellSetting_) {
const keys = Object.keys(_styleCellSetting_)
const targetKey = keys.find(k => k === property)
const keys = Object.keys(_styleCellSetting_);
const targetKey = keys.find(k => k === property);
if (targetKey) {
Object.assign(cellStyel, _styleCellSetting_[property])
Object.assign(cellStyel, _styleCellSetting_[property]);
}
}
// this.detailVisible2 = false
if (this.configData.hover) {
const { leaveBackground } = this.configData.hover
const { leaveBackground } = this.configData.hover;
if (leaveBackground) {
if (_styleRowSetting__.background) {
cell.parentNode.style.background = _styleRowSetting__.background
cell.parentNode.style.background = _styleRowSetting__.background;
} else {
cell.parentNode.style.background = leaveBackground
cell.parentNode.style.background = leaveBackground;
}
}
}
},
handleSizeChange(pageSize) {
this.paginationPageSize = parseInt(pageSize)
this.paginationPageSize = parseInt(pageSize);
if (this.paginationPage !== 1) {
this.paginationPage = 1
this.paginationPage = 1;
}
this.$emit('paginationFun', {
this.$emit("paginationFun", {
elInfo: this.elInfo, // 此处把组件信息返回出去 方便queryBi统一处理
pageSize: this.paginationPageSize,
page: this.paginationPage
})
});
},
// 当前页 change cb
handleCurrentChange(currentPage) {
this.paginationPage = parseInt(currentPage)
this.$emit('paginationFun', {
this.paginationPage = parseInt(currentPage);
this.$emit("paginationFun", {
elInfo: this.elInfo,
pageSize: this.paginationPageSize,
page: this.paginationPage
})
});
},
// 轮播table数据
changeTableDataFun() {
if (this.currentPage === this.page) {
this.currentPage = 0
this.currentPage = 0;
}
this.grouptableData = this.pageArr[this.currentPage]
this.currentPage = this.currentPage + 1
this.grouptableData = this.pageArr[this.currentPage];
this.currentPage = this.currentPage + 1;
},
boxEventMouse(event) {
const that = this
event.stopPropagation()
const that = this;
event.stopPropagation();
if (event.shiftKey && event.altKey && !event.ctrlKey) {
that.jsoneditorVisible = true
that.jsoneditorVisible = true;
}
},
// 弹出可编辑的弹框
showEditJsonDialog() {
this.outBoxDom = document.getElementById(this.elId)
this.outBoxDom = document.getElementById(this.elId);
if (this.outBoxDom) {
this.maxHeight_ = this.outBoxDom.offsetHeight
this.outBoxDom.addEventListener('mousedown', this.boxEventMouse)
this.maxHeight_ = this.outBoxDom.offsetHeight;
this.outBoxDom.addEventListener("mousedown", this.boxEventMouse);
}
},
// 修改表头行的样式
setHeaderRowStyle(rowData) {
const headerRowStyle = this.configData.headerRowStyle || {}
return typeof headerRowStyle === 'string' ? JSON.parse(headerRowStyle) : headerRowStyle
const headerRowStyle = this.configData.headerRowStyle || {};
return typeof headerRowStyle === "string"
? JSON.parse(headerRowStyle)
: headerRowStyle;
},
// 修改表头单元格样式 会合并行的样式
setHeaderCellStyle(rowData) {
const { column } = rowData
const headerCellStyle = this.configData.headerCellStyle || {}
const { property } = column
const { column } = rowData;
const headerCellStyle = this.configData.headerCellStyle || {};
const { property } = column;
// 这是后台设置的表头单元格子数据
const commonStyle_ = this.headerCellStyleSetting_.commonStyle || {}
const data_ = this.headerCellStyleSetting_.data || []
const target = data_.find(item => item.property === property)
let targetStyle_ = {}
const commonStyle_ = this.headerCellStyleSetting_.commonStyle || {};
const data_ = this.headerCellStyleSetting_.data || [];
const target = data_.find(item => item.property === property);
let targetStyle_ = {};
if (target && target.style) {
targetStyle_ = target.style
targetStyle_ = target.style;
}
const commonStyle = headerCellStyle.commonStyle || {}
const data = headerCellStyle.data || []
const targetProp = data.find(item => item.property === property)
let targetPropStyle = {}
const commonStyle = headerCellStyle.commonStyle || {};
const data = headerCellStyle.data || [];
const targetProp = data.find(item => item.property === property);
let targetPropStyle = {};
if (targetProp && targetProp.style) {
targetPropStyle = targetProp.style
targetPropStyle = targetProp.style;
}
const result = Object.assign(_.cloneDeep(commonStyle), _.cloneDeep(targetPropStyle), _.cloneDeep(commonStyle_), targetStyle_)
return result
const result = Object.assign(
_.cloneDeep(commonStyle),
_.cloneDeep(targetPropStyle),
_.cloneDeep(commonStyle_),
targetStyle_
);
return result;
},
setRowStyle(rowData) {
const { rowStyle, onlyDataStyleRow } = this.configData
const { rowIndex, row } = rowData
const data_style = _.cloneDeep(this.set_row_style(row) || {})// 数据样式
const _styleRowSetting_ = row._styleRowSetting_ || {}
const _styleRowSetting_P = typeof _styleRowSetting_ === 'string' ? JSON.parse(_styleRowSetting_) : _styleRowSetting_
const { rowStyle, onlyDataStyleRow } = this.configData;
const { rowIndex, row } = rowData;
const data_style = _.cloneDeep(this.set_row_style(row) || {}); // 数据样式
const _styleRowSetting_ = row._styleRowSetting_ || {};
const _styleRowSetting_P =
typeof _styleRowSetting_ === "string"
? JSON.parse(_styleRowSetting_)
: _styleRowSetting_;
// 如果设置了这个参数 仅仅数据样式生效
if (onlyDataStyleRow) {
return Object.assign(_.cloneDeep(_styleRowSetting_P), _.cloneDeep(data_style))
}
if (rowStyle) { // 合并本地默认样式+手动设置样式+后台返回样式
const { commonStyle, data } = rowStyle
const data_ = data || []
let targetRowIndexStyle = {}
const targetRow = data_.find(item => parseInt(item.rowIndex) === rowIndex)
if (targetRow) { targetRowIndexStyle = targetRow.style }
const result = Object.assign(_.cloneDeep(commonStyle), _.cloneDeep(targetRowIndexStyle), _.cloneDeep(_styleRowSetting_), _.cloneDeep(data_style))
return result
} else { // 只有后台样式或者没有任何样式
const result = Object.assign(_.cloneDeep(_styleRowSetting_P), _.cloneDeep(data_style))
return result
return Object.assign(
_.cloneDeep(_styleRowSetting_P),
_.cloneDeep(data_style)
);
}
if (rowStyle) {
// 合并本地默认样式+手动设置样式+后台返回样式
const { commonStyle, data } = rowStyle;
const data_ = data || [];
let targetRowIndexStyle = {};
const targetRow = data_.find(
item => parseInt(item.rowIndex) === rowIndex
);
if (targetRow) {
targetRowIndexStyle = targetRow.style;
}
const result = Object.assign(
_.cloneDeep(commonStyle),
_.cloneDeep(targetRowIndexStyle),
_.cloneDeep(_styleRowSetting_),
_.cloneDeep(data_style)
);
return result;
} else {
// 只有后台样式或者没有任何样式
const result = Object.assign(
_.cloneDeep(_styleRowSetting_P),
_.cloneDeep(data_style)
);
return result;
}
},
setCellStyle(cellData) {
const { column, columnIndex, row, rowIndex } = cellData
const { property } = column // 对应的列名
const { column, columnIndex, row, rowIndex } = cellData;
const { property } = column; // 对应的列名
// 后端返回的样式
const _styleCellSetting_ = row._styleCellSetting_ || {} // 对应行 所有列的样式汇总
const _styleCellSetting_ = row._styleCellSetting_ || {}; // 对应行 所有列的样式汇总
// 前端config中设置的样式
const { onlyDataStyleCell, cellStyle, columnStyle } = this.configData
let cellDataStyle = {}// 数据中的样式
let config_columnStyle = {} // config中的columnStyle的样式
let config_cellStyle = {}// config中的cellStyle的样式
let columnsConfig_columnStyle = {} // columnsConfig数据列配置中的columnStyle
let columnsConfig_otherStyle = {} // 其他样式
const _styleCellSetting_P = typeof _styleCellSetting_ === 'string' ? JSON.parse(_styleCellSetting_) : _styleCellSetting_
const keys = Object.keys(_styleCellSetting_P)
const targetKey = keys.find(k => k === property)
const { onlyDataStyleCell, cellStyle, columnStyle } = this.configData;
let cellDataStyle = {}; // 数据中的样式
let config_columnStyle = {}; // config中的columnStyle的样式
let config_cellStyle = {}; // config中的cellStyle的样式
let columnsConfig_columnStyle = {}; // columnsConfig数据列配置中的columnStyle
let columnsConfig_otherStyle = {}; // 其他样式
const _styleCellSetting_P =
typeof _styleCellSetting_ === "string"
? JSON.parse(_styleCellSetting_)
: _styleCellSetting_;
const keys = Object.keys(_styleCellSetting_P);
const targetKey = keys.find(k => k === property);
// 附加样式 如超链接 配置中columnsConfig
const otherStyle = this.columnsConfig.find(item => item.prop === property)
if (otherStyle && (otherStyle.type === 'hyperlink' || otherStyle.type === 'asyncQueryDetail')) {
columnsConfig_otherStyle = this.subjoinStyle[otherStyle.type] || {}
const otherStyle = this.columnsConfig.find(
item => item.prop === property
);
if (
otherStyle &&
(otherStyle.type === "hyperlink" ||
otherStyle.type === "asyncQueryDetail")
) {
columnsConfig_otherStyle = this.subjoinStyle[otherStyle.type] || {};
}
if (otherStyle && otherStyle.columnStyle) {
columnsConfig_columnStyle = otherStyle.columnStyle || {}
columnsConfig_columnStyle = otherStyle.columnStyle || {};
}
if (targetKey) {
cellDataStyle = _styleCellSetting_P[property]
}
if (onlyDataStyleCell) { // 仅仅 数据样式生效本地样式不生效
return cellDataStyle
}
if (columnStyle) { // config中的columnStyle的样式的时候
const { data, commonStyle: commonColumnStyle } = columnStyle
const data_ = data
const commonColumnStyle_ = _.cloneDeep(commonColumnStyle || {})
const targetColumn = data_.find(item => item.property === property)
let targetColumnStyle = {}
cellDataStyle = _styleCellSetting_P[property];
}
if (onlyDataStyleCell) {
// 仅仅 数据样式生效本地样式不生效
return cellDataStyle;
}
if (columnStyle) {
// config中的columnStyle的样式的时候
const { data, commonStyle: commonColumnStyle } = columnStyle;
const data_ = data;
const commonColumnStyle_ = _.cloneDeep(commonColumnStyle || {});
const targetColumn = data_.find(item => item.property === property);
let targetColumnStyle = {};
if (targetColumn && targetColumn.style) {
targetColumnStyle = targetColumn.style
targetColumnStyle = targetColumn.style;
}
config_columnStyle = Object.assign(commonColumnStyle_, targetColumnStyle)
config_columnStyle = Object.assign(
commonColumnStyle_,
targetColumnStyle
);
}
if (cellStyle) {
const { commonStyle: commonCellStyle, data } = cellStyle
const data_ = data || []
const commonCellStyle_ = _.cloneDeep(commonCellStyle || {})
let targetCellIndexStyle = {}
const targetCell = data_.find(item => parseInt(item.rowIndex) === rowIndex && (item.property === property || parseInt(item.columnIndex) === columnIndex))
if (targetCell) targetCellIndexStyle = _.cloneDeep(targetCell.style || {})
config_cellStyle = Object.assign(commonCellStyle_, targetCellIndexStyle)
}
return Object.assign(config_columnStyle, config_cellStyle, cellDataStyle, columnsConfig_otherStyle, columnsConfig_columnStyle)
const { commonStyle: commonCellStyle, data } = cellStyle;
const data_ = data || [];
const commonCellStyle_ = _.cloneDeep(commonCellStyle || {});
let targetCellIndexStyle = {};
const targetCell = data_.find(
item =>
parseInt(item.rowIndex) === rowIndex &&
(item.property === property ||
parseInt(item.columnIndex) === columnIndex)
);
if (targetCell)
targetCellIndexStyle = _.cloneDeep(targetCell.style || {});
config_cellStyle = Object.assign(
commonCellStyle_,
targetCellIndexStyle
);
}
return Object.assign(
config_columnStyle,
config_cellStyle,
cellDataStyle,
columnsConfig_otherStyle,
columnsConfig_columnStyle
);
},
alterConfigAction() {
if (this.configData.tableStyle) {
this.tableStyle = JSON.stringify(this.configData.tableStyle).replace(new RegExp('\"', 'g'), '').replace(new RegExp('{', 'g'), '').replace(new RegExp('\,', 'g'), ';').replace(new RegExp('}', 'g'), ';')
this.tableStyle = JSON.stringify(this.configData.tableStyle)
.replace(new RegExp('"', "g"), "")
.replace(new RegExp("{", "g"), "")
.replace(new RegExp(",", "g"), ";")
.replace(new RegExp("}", "g"), ";");
}
if (this.configData.imgStyle) {
this.imgStyle = JSON.stringify(this.configData.imgStyle).replace(new RegExp('\"', 'g'), '').replace(new RegExp('{', 'g'), '').replace(new RegExp('\,', 'g'), ';').replace(new RegExp('}', 'g'), ';')
this.imgStyle = JSON.stringify(this.configData.imgStyle)
.replace(new RegExp('"', "g"), "")
.replace(new RegExp("{", "g"), "")
.replace(new RegExp(",", "g"), ";")
.replace(new RegExp("}", "g"), ";");
}
if (this.configData.gutter) {
var tableId = document.getElementById(this.elId)
if (!tableId) return
var gutterArr = tableId.getElementsByClassName('gutter')
if ((gutterArr && !gutterArr.length) || !gutterArr) return
gutterArr[0].style.background = this.configData.gutter.background
gutterArr[0].style.border = this.configData.gutter.border
gutterArr[0].style.borderTop = this.configData.gutter.borderTop
gutterArr[0].style.borderBottom = this.configData.gutter.borderBottom
gutterArr[0].style.borderLeft = this.configData.gutter.borderLeft
gutterArr[0].style.borderRight = this.configData.gutter.borderRight
var tableId = document.getElementById(this.elId);
if (!tableId) return;
var gutterArr = tableId.getElementsByClassName("gutter");
if ((gutterArr && !gutterArr.length) || !gutterArr) return;
gutterArr[0].style.background = this.configData.gutter.background;
gutterArr[0].style.border = this.configData.gutter.border;
gutterArr[0].style.borderTop = this.configData.gutter.borderTop;
gutterArr[0].style.borderBottom = this.configData.gutter.borderBottom;
gutterArr[0].style.borderLeft = this.configData.gutter.borderLeft;
gutterArr[0].style.borderRight = this.configData.gutter.borderRight;
}
},
setCellDetailStyle(data = {}) {
// const { headerRowStyle, rowStyle } = data
this.cellDetailStyle = data
this.cellDetailStyle = data;
},
setCellHeaderRowStyle() {
const { headerRowStyle } = this.cellDetailStyle
return headerRowStyle || {}
const { headerRowStyle } = this.cellDetailStyle;
return headerRowStyle || {};
},
setCellRowStyle() {
const { rowStyle } = this.cellDetailStyle
return rowStyle || {}
const { rowStyle } = this.cellDetailStyle;
return rowStyle || {};
}
}
}
};
</script>
<style>
.activeBottomSort{
.activeBottomSort {
border-bottom-color: #1f5ede !important;
}
.activeTopSort{
.activeTopSort {
border-top-color: #1f5ede !important;
}
._hs_table .el-table--border {
border: 1px solid #EBEEF5 !important;
border: 1px solid #ebeef5 !important;
}
/* 禁止掉默认的hover事件 */
._hs_table .el-table--striped .el-table__body tr.current-row > td,
._hs_table .el-table__body tr.hover-row.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped > td,
._hs_table .el-table__body tr.hover-row > td {
/* 禁止掉默认的hover事件 */
._hs_table .el-table--striped .el-table__body tr.current-row > td,
._hs_table .el-table__body tr.hover-row.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped > td,
._hs_table .el-table__body tr.hover-row > td {
background-color: transparent !important;
}
._hs_table .el-table--enable-row-hover .el-table__body tr:hover > td {
}
._hs_table .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent !important;
}
/* 去除表格边框线 */
._hs_table .el-table::before,
._hs_table .el-table::after {
}
/* 去除表格边框线 */
._hs_table .el-table::before,
._hs_table .el-table::after {
height: 0 !important;
}
._hs_table body .el-table th.gutter {
}
._hs_table body .el-table th.gutter {
display: table-cell !important;
}
.paginationBox{
}
.paginationBox {
display: flex;
justify-content: flex-end;
}
/*滑块轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar {
/*滑块轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
._hs_table .el-table__body-wrapper::-webkit-scrollbar-thumb {
}
._hs_table .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 3px;
}
/*轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar-track {
}
/*轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
background: transparent;
}
._hs_table .el-table::-webkit-scrollbar-track{
._hs_table .el-table::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: none;
-webkit-box-shadow: none;
......@@ -1645,33 +1900,32 @@ export default {
opacity: 0.7;
}
.addtableFooterWrapper {
margin-top: -57px;
margin-top: -57px;
}
.addtableBodyWrapper{
.addtableBodyWrapper {
padding-bottom: 49px;
}
._hs_table ::-webkit-scrollbar
{
._hs_table ::-webkit-scrollbar {
width: 0px;
background-color: transparent
background-color: transparent;
}
.closeAllItem {
padding: 3px;
cursor: pointer;
font-size: 10px;
}
.paginationBox .el-input__inner{
border: 1px solid #DCDFE6 !important;
.paginationBox .el-input__inner {
border: 1px solid #dcdfe6 !important;
border-radius: 4px;
background-color: #FFF;
background-color: #fff;
background-image: none;
}
.elLink{
.elLink {
margin: 0 3px;
font-size: 12px;
}
.toolsBox{
.toolsBox {
float: right;
top: 34px;
position: relative;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment