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