Skip to content

V
vue-gjjs
Commit e2fc8ee0 by liuxin
Options

Merge branch 'master' of http://192.168.0.110:11080/fukai/vue-gjjs

parents e502cfd5 a183bef4
Showing with 157 additions and 116 deletions
src/assets/css/common.css
......@@ -287,3 +287,6 @@
line-height: 16px;
font-size: 12px;
}
.el-table--border td.lastColumn{
border-right: 0!important;
}
\ No newline at end of file
src/components/IStreamTable.vue
......@@ -29,7 +29,46 @@
>
</el-table-column>
<slot></slot>
<el-table-column fixed="right" width="48px" v-if="showButtonFlg" class-name="buttonColumn">
<template slot="header">
<c-col style="text-align: left"
><c-button
icon="el-icon-s-tools"
@click="clounmSetting"
style="padding:0 7px"
></c-button
></c-col>
</template>
</el-table-column>
</el-table>
<el-dialog
class="showColumnDialog"
:visible.sync="setColumnFlg"
:title="'自定义列属性'"
appenD-to-body
>
<el-form-item label-width="0">
<el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
<el-checkbox
class="selectColumnClass"
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">
<el-checkbox
class="selectAllClass"
:indeterminate="columnGroup.length > 0 && columnGroup.length < tableColumnsOrigin.length"
v-model="selectAll"
@change="setAll"
>全选</el-checkbox
>
<el-button type="primary" @click="saveColumnEvent">保存</el-button>
</span>
</el-dialog>
<c-col :span="16">
<el-pagination
v-if="paginationShow"
......@@ -80,49 +119,18 @@ export default {
required: false,
default: true,
},
},
computed: {
tableColumns() {
const columnArr = [];
const lines = this.columns;
const etyReg = /\"([^\"]*)\"/;
const obj = {};
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
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',
});
}
}
for (const k in obj) {
if (Object.hasOwnProperty.call(obj, k)) {
const o = obj[k];
const tableColumn = o.map((item) => item.prop).join("\n");
columnArr.push({
prop: tableColumn,
label: tableColumn,
width: o[0].width,
// width: "auto",
index: k,
children: o,
});
showButtonFlg: {
type: Boolean,
required: false,
default: false,
}
},
watch: {
columns() {
this.generateColumns();
}
return columnArr.sort((a, b) => {
return parseInt(a.index) - parseInt(b.index);
});
},
computed: {
tableData() {
// return this.list.map((row) => {
// const res = {}
......@@ -156,12 +164,65 @@ export default {
},
data() {
return {
tableColumnsOrigin: [],
tableColumns: [],
currentPage: 1,
pageSizes: [5, 10, 20, 30, 40, 50, 100],
pageSize: 10,
selectAll: true,
columnGroup: [],
setColumnFlg: false
};
},
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 (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',
});
}
}
for (const k in obj) {
if (Object.hasOwnProperty.call(obj, k)) {
const o = obj[k];
const tableColumn = o.map((item) => item.prop).join("\n");
columnArr.push({
prop: tableColumn,
label: tableColumn,
width: o[0].width,
// width: "auto",
index: k,
children: o,
});
}
}
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;
},
......@@ -192,7 +253,25 @@ export default {
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;
},
}
};
</script>
......@@ -217,8 +296,20 @@ export default {
.el-table .success-row {
background: #f0f9eb;
}
.selectColumnClass .el-checkbox__label {
width: 60px;
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;
}
.el-table.buttonColumn th>.cell {
padding-left: 0;
padding-right: 0;
}
</style>
\ No newline at end of file
src/views/Business/Sptsel/Menu.vue
......@@ -295,19 +295,20 @@
<c-col :span="24">
<c-istream-table
:list="stmData.data"
:columns="saveColumnFlg ? stmData.columns : saveColumns"
:columns="stmData.columns"
:showButtonFlg="true"
>
<el-table-column fixed="right" prop="op" label="操作" width="165px">
<el-table-column fixed="right" prop="op" label="操作" width="165px" class-name="lastColumn">
<template slot="header">
<c-col :span="11" style="text-align: left"
<c-col style="text-align: left"
><span>操作</span></c-col
>
<c-col :span="12" style="text-align: right"
<!-- <c-col style="text-align: right"
><c-button
icon="el-icon-s-tools"
@click="clounmSetting"
></c-button
></c-col>
></c-col> -->
</template>
<template slot-scope="scope">
<c-button style="margin-left: 0" size="small" @click="onDetails"
......@@ -338,33 +339,7 @@
</c-col>
</el-row>
<el-dialog
class="showColumnDialog"
:visible.sync="setColumnFlg"
:title="'自定义列属性'"
appenD-to-body
>
<el-form-item label-width="0">
<el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
<el-checkbox
v-for="item in setColumn"
:key="item.label"
:label="item.index"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<span slot="footer">
<el-checkbox
class="cbClass"
:indeterminate="isIndeterminate"
v-model="selectAll"
@change="setAll"
>全选</el-checkbox
>
<el-button type="primary" @click="saveColumnEvent">保存</el-button>
</span>
</el-dialog>
<!-- <el-row style="margin-top: 2rem">
<c-col :span="23">
<el-card class="box-card">
......@@ -440,15 +415,14 @@ export default {
mixins: [CommonProcess],
data() {
return {
saveColumns: [],
// saveColumns: [],
sourceModel: [],
sourceData: [],
initdialog: false,
detailDialog: false,
setColumnFlg: false,
saveColumnFlg: true,
selectAll: true,
isIndeterminate: false,
// setColumnFlg: false,
// saveColumnFlg: true,
transactionStatus: {
busiNo: "",
modTimes: 0,
......@@ -457,8 +431,7 @@ export default {
earnCount: 0,
earnAmt: 0,
},
setColumn: [],
columnGroup: [],
// setColumn: [],
stmData: {
columns: [
'4 1 "交易代码" 70 ',
......@@ -512,49 +485,21 @@ export default {
this.model[element] = "t";
});
},
clounmSetting() {
this.setColumnFlg = true;
},
saveColumnEvent() {
this.setColumnFlg = false;
this.saveColumnFlg = false;
this.saveColumns = this.columnGroup.map(
(index) => this.stmData.columns[index]
);
},
setAll(val) {
this.columnGroup = val ? this.setColumn.map((item) => item.index) : [];
this.isIndeterminate = false;
},
handleColumnChange() {
this.selectAll = this.setColumn.length === this.columnGroup.length;
this.isIndeterminate =
this.columnGroup.length > 0 &&
this.columnGroup.length < this.setColumn.length;
},
...Event,
},
created: function () {
this.setColumn = this.stmData.columns.map((item, index) => {
let begIdx = item.indexOf('"');
let endIdx = item.indexOf('"', begIdx + 1);
let label = item.substring(begIdx + 1, endIdx);
return { label, value: true, index };
});
this.columnGroup = this.setColumn.map((item) => item.index);
// this.setColumn = this.stmData.columns.map((item, index) => {
// let begIdx = item.indexOf('"');
// let endIdx = item.indexOf('"', begIdx + 1);
// let label = item.substring(begIdx + 1, endIdx);
// return { label, value: true, index };
// });
// this.columnGroup = this.setColumn.map((item) => item.index);
},
};
</script>
<style scoped>
.el-checkbox >>> .el-checkbox__label {
width: 60px;
font-size: 13px;
}
.cbClass >>> .el-checkbox__label {
width: 30px;
font-size: 13px;
padding-left: 5px;
}
.showColumnDialog >>> .el-dialog__body {
padding-bottom: 10px;
}
......
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