|
@@ -5,7 +5,7 @@
|
|
|
<el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
|
|
|
</div>
|
|
|
<template v-if="tableData.length">
|
|
|
- <el-table :data="filteredTableData" :span-method="tableSpanMethod" stripe show-summary border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%; overflow: auto">
|
|
|
+ <el-table :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe show-summary border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%; overflow: auto">
|
|
|
<el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel">
|
|
|
<template #header>
|
|
|
<span class="colTips">
|
|
@@ -33,10 +33,14 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <el-table-column fixed="right" label="操作" width="130">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
|
|
|
- <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
|
|
|
+ <div class="hd-td">
|
|
|
+ <div class="hd-tr">
|
|
|
+ <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
|
|
|
+ <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -55,13 +59,18 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col v-for="(item, index) in tableColsCopy" :key="index" :span="rows">
|
|
|
<el-form-item :label="item.columnLabel">
|
|
|
- <!-- <template v-if="
|
|
|
- item.dataType == 'longtext' ||
|
|
|
- item.dataType.includes('int')
|
|
|
+ <template v-if="
|
|
|
+ item.listqueryTemplateID ||
|
|
|
+ item.listqueryTemplateID == 0
|
|
|
">
|
|
|
+ <el-select size="small" clearable style="width: 100%" v-model="tableForm[item.columnName]" placeholder="请选择">
|
|
|
+ <el-option v-for="item in tableOptions[item.columnName]" :key="item.v" :label="item.k" :value="item.v">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
<el-input size="small" v-model="tableForm[item.columnName]"></el-input>
|
|
|
- </template> -->
|
|
|
- <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
|
|
|
+ </template>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -150,6 +159,9 @@ export default {
|
|
|
tableForm: {}, //弹框表单
|
|
|
rmTitle: "", //弹框-删除-标题
|
|
|
tableObj: {}, //增/删/改数据缓存
|
|
|
+ tableOptions: {}, //弹框-下来数据缓存
|
|
|
+ tableArrs: [], //重组table-表头下拉
|
|
|
+ proAll: false //重组时-所有请求是否都完成
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -183,6 +195,18 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ proAll: {
|
|
|
+ handler (val) {
|
|
|
+ if (val) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.setTable()
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
created () {
|
|
|
this.getQuery();
|
|
|
},
|
|
@@ -246,15 +270,62 @@ export default {
|
|
|
this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
|
|
|
this.tableDataCopy = _.cloneDeep(this.tableData);
|
|
|
const datas = _.cloneDeep(this.tableColsCopy);
|
|
|
- datas.forEach((item) => {
|
|
|
+ const reqUts = []
|
|
|
+ datas.forEach(async (item) => {
|
|
|
this.tableDataFilters[item.columnName] = [];
|
|
|
if (item.needGroup) {
|
|
|
this.tableGroups.push(item.columnName);
|
|
|
}
|
|
|
+ if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
|
|
|
+ this.tableArrs.push(item.columnName)
|
|
|
+ const reqUt = this.getSelectData(item.listqueryTemplateID)
|
|
|
+ reqUts.push(reqUt)
|
|
|
+ this.tableOptions[item.columnName] = await this.getSelectData(item.listqueryTemplateID)
|
|
|
+ }
|
|
|
// this.filterValues[item.columnName] = ''
|
|
|
});
|
|
|
setTableFilters(this.tableData, this.tableDataFilters);
|
|
|
this.tableGroup(this.tableData);
|
|
|
+ this.getSelectDataAll(reqUts)
|
|
|
+ },
|
|
|
+ //获取所有获取弹框-下拉数据-请求状态
|
|
|
+ getSelectDataAll (reqUts) {
|
|
|
+ Promise.all(reqUts).then(res => {
|
|
|
+ this.proAll = true
|
|
|
+ }).catch(err => {
|
|
|
+ this.proAll = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取弹框-下拉数据
|
|
|
+ async getSelectData (id) {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ id,
|
|
|
+ dataContent: [],
|
|
|
+ });
|
|
|
+ if (code == 0) {
|
|
|
+ return returnData.listValues;
|
|
|
+ } else {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //重组table-显示名称
|
|
|
+ setTable () {
|
|
|
+ this.tableArrs.forEach(item => {
|
|
|
+ this.tableOptions[item].forEach(p => {
|
|
|
+ this.tableDataCopy.forEach(msg => {
|
|
|
+ if (msg[item] == p.v) {
|
|
|
+ msg[item] = p.k
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.tableDataFilters[item].forEach(cap => {
|
|
|
+ if (cap.value == p.v) {
|
|
|
+ cap.text = p.k
|
|
|
+ cap.value = p.k
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.tableData = this.tableDataCopy
|
|
|
},
|
|
|
//分组
|
|
|
tableGroup (tableData) {
|
|
@@ -294,6 +365,30 @@ export default {
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
+ //合计
|
|
|
+ getSummaries (param) {
|
|
|
+ const { columns, data } = param;
|
|
|
+ const sums = [];
|
|
|
+ columns.forEach((column, index) => {
|
|
|
+ this.tableColsCopy.forEach((p) => {
|
|
|
+ if (column.property == p.columnName && p.needCount) {
|
|
|
+ const values = data.map((item) => Number(item[column.property]));
|
|
|
+ if (!values.every((value) => isNaN(value))) {
|
|
|
+ sums[index] = values.reduce((prev, curr) => {
|
|
|
+ const value = Number(curr);
|
|
|
+ if (!isNaN(value)) {
|
|
|
+ return prev + curr;
|
|
|
+ } else {
|
|
|
+ return prev;
|
|
|
+ }
|
|
|
+ }, 0);
|
|
|
+ sums[index] += "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return sums;
|
|
|
+ },
|
|
|
//弹框-确定
|
|
|
handleOk () {
|
|
|
this.submitClickHandler();
|
|
@@ -308,6 +403,7 @@ export default {
|
|
|
this.tableType = "add";
|
|
|
this.tableTitle = "新增";
|
|
|
this.tableForm = {};
|
|
|
+ console.log(this.tableOptions);
|
|
|
},
|
|
|
//表格-编辑
|
|
|
handleEdit (row) {
|
|
@@ -411,7 +507,7 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
float: left;
|
|
|
- margin-right: 2px;
|
|
|
+ margin: 0 7px;
|
|
|
span {
|
|
|
color: #2d67e3;
|
|
|
}
|
|
@@ -436,6 +532,10 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .hd-td {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
}
|
|
|
.data-table-btn {
|
|
|
margin-bottom: 20px;
|