Commit 0bd97cc7 by tianxinyu

Merge branch 'development-202206' of http://114.115.138.98:8900/fukai/vue-gjjs…

Merge branch 'development-202206' of http://114.115.138.98:8900/fukai/vue-gjjs into development-202206
parents 1f2f8a80 45e7238e
......@@ -400,12 +400,7 @@
.el-table__fixed,
.el-table__fixed-right {
height: 100% !important;
bottom: 16px;
z-index: 1;
}
.el-table__body-wrapper,.is-scrolling-left{
z-index: 2;
bottom: 17px;
}
/* medium_button_change_small */
......
......@@ -235,7 +235,7 @@ export default {
mixins: [commonProcess, commonFuncs], // 里面包含了Default、Check等的公共处理
data() {
return {
tabVal: "utlp",
tabVal: "utlp,ovwp,docpre,shpdet",
trnName: "brtlat",
model: new Brtlat().data,
checkRules: Check,
......
<template>
<div class="eContainer-table-block">
<div style="text-align: left" v-if="showButtonFlg" class="buttonDiv">
<c-button
icon="el-icon-s-tools"
@click="clounmSetting"
style="margin-right: 87px;margin-top: 10px;"
></c-button>
</div>
<el-table
ref="table"
:data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
"
style="width: 100%"
class="eContainer-table"
@selection-change="handleSelectionChange"
:row-key="getRowKey"
:header-cell-style="{
background: 'rgb(235, 235, 235)',
color: 'rgb(51, 51, 51)',
}"
:highlight-current-row="true"
@row-click="rowClick"
:border="true"
max-height="380"
>
<el-table-column
type="selection"
width="55"
v-if="showSelection"
:reserve-selection="true"
></el-table-column>
<c-table-column
v-for="(item, key) in tableColumns"
:key="key"
:prop="item.prop"
:label="item.label"
:width="item.width"
sortable
>
<template v-slot="{ scope }">
<!-- <template slot-scope="{ scope }"> -->
<span>{{
!item.render ? scope.row[item.prop] : item.render(item, scope)
}}</span>
</template>
</c-table-column>
<slot></slot>
</el-table>
<el-dialog
class="showColumnDialog"
:visible.sync="setColumnFlg"
:title="'自定义列属性'"
appenD-to-body
v-if="showButtonFlg"
>
<el-form-item label-width="0" style="display: flex;
align-items: center;">
<el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
<el-checkbox
class="selectColumnClass checkbox-left"
style="margin-right:45px;"
v-for="item in tableColumnsOrigin"
:key="item.label"
:label="parseInt(item.index)"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<span slot="footer" style="display: flex;
align-items: center;">
<el-checkbox
class="selectAllClass checkbox-left"
:indeterminate="
columnGroup.length > 0 &&
columnGroup.length < tableColumnsOrigin.length
"
v-model="selectAll"
@change="setAll"
>全选</el-checkbox
>
<el-button type="primary" @click="saveColumnEvent" style="margin-left:10px;">保存</el-button>
</span>
</el-dialog>
<c-col :span="16" v-if="tableData.length>10">
<el-pagination
v-if="paginationShow"
class="eContainer-pagination"
layout="prev, pager, next, jumper"
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
:total="tableData.length"
@size-change="sizeChange"
@current-change="currentChange"
></el-pagination>
</c-col>
<c-col :span="8" style="float:right">
<div class="paginationLable" v-if="paginationShow">
当前显示第 {{ (currentPage - 1) * pageSize + 1 }}-{{
currentPage * pageSize > tableData.length
? tableData.length
: currentPage * pageSize
}}
条,共 {{ tableData.length }} 条
</div>
</c-col>
</div>
</template>
<script>
import CodeTable from "~/config/CodeTable";
export default {
props: {
columns: {
type: Array,
default: () => {
return [];
},
},
list: {
type: Array,
default: () => {
return [];
},
},
showSelection: {
type: Boolean,
default: false,
},
paginationShow: {
type: Boolean,
required: false,
default: true,
},
showButtonFlg: {
type: Boolean,
required: false,
default: false,
},
},
watch: {
columns() {
this.generateColumns();
},
},
computed: {
tableData() {
// return this.list.map((row) => {
// const res = {}
// const vals = row.split("\t");
// for (let i = 0; i < vals.length; i++) {
// res[`${i}`] = vals[i];
// }
// return res;
// });
const arr = [];
for (let i = 0; i < this.list.length; i++) {
const d = this.list[i];
const items = d.split("\t");
const it = {};
for (let j = 0; j < this.tableColumns.length; j++) {
const column = this.tableColumns[j];
it[column["prop"]] = column.children
.map((c) => items[c["idx"]] || " ")
.join("\n");
}
it["IDX"] = i;
it["INR"] = items[0];
if (it["INR"].length < 8) {
it["INR"] = items[1];
}
it.srcStr = d;
arr.push(it);
}
this.currentPage = 1;
return arr;
},
},
data() {
return {
tableColumnsOrigin: [],
tableColumns: [],
currentPage: 1,
pageSizes: [5, 10, 20, 30, 40, 50, 100],
pageSize: 10,
selectAll: true,
columnGroup: [],
setColumnFlg: false,
codes: {
...CodeTable,
},
};
},
mounted() {
this.generateColumns();
},
methods: {
generateColumns() {
const columnArr = [];
const lines = this.columns;
const etyReg = /\"([^\"]*)\"/;
const obj = {};
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
if (typeof line === "object") {
//如果是对象,支持自定义处理
//{width,position,index,label,pattern,render}
let { width, position, index, label, pattern, render, ...rest } =
line;
position += "";
if (!obj[position]) {
obj[position] = [];
}
obj[position].push({
idx: index,
prop: label,
// width:width+'px',
width: width === "auto" ? width : width + "px",
pattern,
render,
...rest,
});
continue;
}
if (etyReg.test(line)) {
const gs = line.match(etyReg);
const columnName = gs[1];
const newLine = line.replace(gs[0], "_");
const colPropArr = newLine.split(" ");
const positionArr = colPropArr[1].split(":");
if (!obj[positionArr[0]]) {
obj[positionArr[0]] = [];
}
obj[positionArr[0]].push({
idx: colPropArr[0],
prop: columnName,
// width: colPropArr[3] + 'px',
width:
colPropArr[3] === "auto" ? colPropArr[3] : colPropArr[3] + "px",
});
}
}
for (const k in obj) {
if (Object.hasOwnProperty.call(obj, k)) {
const o = obj[k];
const tableColumn = o.map((item) => item.prop).join("\n");
let colInfo = {
prop: tableColumn,
label: tableColumn,
width: o[0].width,
// width: "auto",
index: k,
children: o,
};
//支持自定义处理
if (o.length == 1) {
if (o[0].pattern && this[o[0].pattern]) {
colInfo.render = this[o[0].pattern];
colInfo.code = o[0].code;
} else if (o[0].render) {
colInfo.render = o[0].render;
}
}
columnArr.push(colInfo);
}
}
const arr = columnArr.sort((a, b) => {
return parseInt(a.index) - parseInt(b.index);
});
this.tableColumnsOrigin = arr;
this.tableColumns = arr;
this.columnGroup = arr.map((item) => parseInt(item.index));
return arr;
},
sizeChange(size) {
this.pageSize = size;
},
currentChange(currentPage) {
this.currentPage = currentPage;
},
handleSelectionChange(val) {
this.$emit("multipleSelect", this.getSelectedRowIndex(val));
},
getRowKey(row) {
return row["IDX"];
},
getSelectedRowIndex(val) {
const indexArr = [];
for (let j = 0; j < val.length; j++) {
const v = val[j];
for (let i = 0; i < this.tableData.length; i++) {
const data = this.tableData[i];
if (v["IDX"] === data["IDX"]) {
indexArr.push(i);
}
}
}
return indexArr;
},
// 行点击,设置高亮
rowClick(row, column, event) {
this.$refs.table.setCurrentRow(row);
this.$emit("chooseRowEvent", row);
},
clounmSetting() {
this.setColumnFlg = true;
},
saveColumnEvent() {
this.setColumnFlg = false;
const arr = this.columnGroup.map((idx) => parseInt(idx));
arr.sort((a, b) => a - b);
this.columnGroup = arr;
this.tableColumns = this.columnGroup.map(
(index) => this.tableColumnsOrigin[parseInt(index) - 1]
);
},
setAll(val) {
this.columnGroup = val
? this.tableColumnsOrigin.map((item) => parseInt(item.index))
: [];
},
handleColumnChange() {
this.selectAll =
this.tableColumnsOrigin.length === this.columnGroup.length;
},
//补充自定义列处理函数
//去掉日期的时分秒毫秒
date(item, scope) {
let value = scope.row[item.prop];
if (!value) {
return "";
}
let idx = value.indexOf(" ");
if (idx > 0) return value.substring(0, idx);
return value;
},
//code映射
code(item, scope) {
let value = scope.row[item.prop];
let code = item.code;
if (typeof code == "string") {
code = this.codes[code];
}
if (!value || !code) {
return "";
}
let em = code.find((item) => item.value.trim() == value.trim());
if (!em) {
return value;
}
return em.label;
},
//去掉时间的毫秒
time(item, scope) {
let value = scope.row[item.prop];
if (!value) {
return "";
}
let idx = value.indexOf(".");
if (idx > 0) return value.substring(0, idx);
return value;
},
//日期格式化
dateFormat(item, scope) {
let value = scope.row[item.prop];
if (!value) {
return "";
}
return (
value.substring(0, 4) +
"-" +
value.substring(4, 6) +
"-" +
value.substring(6)
);
},
},
};
</script>
<style scoped>
.eContainer-table-block {
margin-top: 15px;
position: relative;
}
.eContainer-table-block .paginationLable {
font-size: 12px;
color: #808080;
height: 26px;
line-height: 26px;
float: right;
/* margin-top: 20px; */
}
.eContainer-table-block .el-table__body-wrapper {
overflow: auto;
}
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.selectColumnClass .el-checkbox__label {
width: 67px;
font-size: 13px;
}
.selectAllClass .el-checkbox__label {
width: 30px;
font-size: 13px;
padding-left: 5px;
}
.eContainer-table-block >>> .el-table .cell {
white-space: pre-wrap;
}
.eContainer-table-block >>> .el-dialog .el-dialog__footer {
display: flex;
justify-content: center;
}
.buttonDiv {
text-align: left;
display: inline-block;
margin: 0;
margin-top: -3px;
position: absolute;
z-index: 999;
right: 5px;
padding-top: 3px;
}
</style>
\ No newline at end of file
......@@ -85,18 +85,18 @@
<c-input v-model="model.cnystm" placeholder="请输入Selection"></c-input>
</el-form-item>
</c-col> -->
<c-istream-table
<c-istream-table-noOperate
:list="stmData.data"
:columns="stmData.columns"
:showButtonFlg="true"
>
<el-table-column fixed="right" prop="op" label="操作" width="200px">
<!-- <template slot="header">
<c-col :span="11" style="text-align: left"><span>操作</span></c-col> -->
<el-table-column fixed="right" prop="op" width="auto">
<template slot="header">
<!-- <c-col :span="11" style="text-align: center"></c-col> -->
<!-- <c-col :span="12" style="text-align:right"><c-button icon="el-icon-s-tools"></c-button></c-col> -->
<!-- </template>-->
</template>
</el-table-column>
</c-istream-table>
</c-istream-table-noOperate>
</c-col>
</div>
......@@ -109,10 +109,15 @@ import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Cnysel/Event";
import IStreamTableNoOperate from "./IStreamTable.vue";
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [commonProcess],
components: {
"c-istream-table-noOperate": IStreamTableNoOperate
},
data() {
return {
ownextkey:[
......@@ -122,7 +127,7 @@ export default {
],
stmData: {
columns: [
'0 1 "业务编号" 110',
'0 1 "业务编号" 120',
'1 2 "币种" 110',
'2 3 "金额" 120 2 8:1 2 5',
'3 4 "收款人名称" 250',
......
......@@ -18,7 +18,9 @@
>
<!--PD000001 -->
<el-tab-pane label="接口信息选择" name="selp">
<m-selp :model="model" :codes="codes" />
<content>
<m-selp :model="model" :codes="codes" />
</content>
</el-tab-pane>
</c-tabs>
</el-form>
......
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