丽知中台报表更新
This commit is contained in:
hyt
parent
ad7189b2b7
commit
19cf8f2d34
|
|
@ -113,3 +113,25 @@ export function commonFun(url, data) {
|
|||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function dingReportQueryListAPI(data) {
|
||||
return request({
|
||||
url: '/kangarooDataCenterV3/dingReport/queryList',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export function pushByIdAPI(data) {
|
||||
return request({
|
||||
url: '/kangarooDataCenterV3/dingReport/pushById',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export function queryU8CAllCorpAPI(data) {
|
||||
return request({
|
||||
url: '/kangarooDataCenterV3/dingReport/queryU8CAllCorp',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,708 @@
|
|||
<!--
|
||||
* @name: 自定义 el-table
|
||||
* @author: Zhangpengcheng
|
||||
* @date: 2022-08-30
|
||||
* tabLoading 加载 headerStyle表头格式 tableData数据 border纵向边框 @current-change单选触发 summary-method合计 @cell-click某个单元格点击触发事件 @sort-change触发后台排序
|
||||
* @row-click 当某一行被点击时会触发该事件 highlight-current-row是否高亮 show-summary是否合计 SummariesIndex合计需要的index @selection-change多选 tableHeight高度
|
||||
* :style="'height:'+ tableHeight + '!important'"
|
||||
-->
|
||||
<template>
|
||||
<!-- :row-class-name="tableRowClassName" -->
|
||||
<span style="position: relative">
|
||||
<el-table
|
||||
v-loading="tabLoading"
|
||||
ref="elTable"
|
||||
:header-cell-style="headerStyle"
|
||||
:data="tableData"
|
||||
:border="border"
|
||||
:min-width="minWidth"
|
||||
:summary-method="getSummaries"
|
||||
:row-class-name="tableRowClassName"
|
||||
:size="size"
|
||||
:row-key="getRowKey"
|
||||
:max-height="tableMaxHeight"
|
||||
:height="tableHeight"
|
||||
@cell-click="getCellClick"
|
||||
@row-click="getRowClick"
|
||||
@current-change="handleCurrentChange"
|
||||
:highlight-current-row="highlightCurrent"
|
||||
:show-summary="showsummary"
|
||||
:SummariesIndex="SummariesIndex"
|
||||
@row-dblclick="rowDblclick"
|
||||
@selection-change="handleSelectionChange"
|
||||
@select="select"
|
||||
@select-all="selectAll"
|
||||
style="width: 100%"
|
||||
:cell-class-name="tableCellName"
|
||||
:style="'min-height:' + minHeight + ';max-height:' + maxHeight"
|
||||
@sort-change="sortChange"
|
||||
:key="itemKey"
|
||||
@cell-dblclick="doubleClick"
|
||||
fit
|
||||
:span-method="objectSpanMethod"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:reserve-selection="true"
|
||||
v-if="showSelect"
|
||||
type="selection"
|
||||
width="55"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
type="index"
|
||||
v-if="showIndex"
|
||||
width="50"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="indexOperate" style="text-align: center">
|
||||
<p v-if="scope.$index + 1 != tableData.length">
|
||||
{{ scope.$index + 1 }}
|
||||
</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
v-else
|
||||
size="mini"
|
||||
@click="newRow"
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
<p v-else>{{ scope.$index + 1 }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="单选" align="center" v-if="slotrow" width="50">
|
||||
<template slot-scope="scope">
|
||||
<!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作 -->
|
||||
<el-radio v-model="radioIndex" :label="scope.$index"
|
||||
><span></span
|
||||
></el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-for="(item, ind) in tableColumn"
|
||||
:key="ind"
|
||||
:width="item.width ? item.width : 'auto'"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:show-overflow-tooltip="item.tooltip"
|
||||
:sortable="item.sortable"
|
||||
:align="item.align ? item.align : 'center'"
|
||||
:min-width="item.minWidth ? item.minWidth : '100px'"
|
||||
header-align="center"
|
||||
:fixed="item.fixed"
|
||||
>
|
||||
<!-- :isClick="item.other && item.other.isClick ? item.other.isClick : false" -->
|
||||
<template slot-scope="scope">
|
||||
<!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作 -->
|
||||
<slot :name="item.prop" :row="slotrow ? scope : scope.row">
|
||||
<!-- 插槽后备内容：如父组件不使用插槽则使用后备内容 -->
|
||||
<span
|
||||
:style="{
|
||||
color: item.color ? item.color : '#333',
|
||||
cursor: item.isClick ? 'pointer' : 'default',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
!item.stateOption
|
||||
? scope.row[item.prop]
|
||||
: item.stateOption[scope.row[item.prop]] | timeFiter
|
||||
}}
|
||||
</span>
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
:width="funWidth"
|
||||
v-if="funData.length != 0"
|
||||
align="center"
|
||||
header-align="center"
|
||||
:fixed="fixedTable"
|
||||
style="border-radius: 0 10px 10px 0"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div flex="cross:center main:center">
|
||||
<div
|
||||
v-for="(item, index) in funData"
|
||||
:key="index"
|
||||
:class="{ 'mr-12': index + 1 != funData.length }"
|
||||
@click.stop="funcEmit(index, scope.row, item)"
|
||||
class="btnText"
|
||||
>
|
||||
<span
|
||||
:style="'color:' + item.color"
|
||||
v-if="!item.ifField && !item.hiddenField"
|
||||
>{{ item.text }}</span
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color:
|
||||
scope.row[item.ifField] == item.fieldVal
|
||||
? item.fieldColor
|
||||
: item.color,
|
||||
}"
|
||||
v-if="item.ifField"
|
||||
>
|
||||
{{
|
||||
scope.row[item.ifField] == item.fieldVal
|
||||
? item.fieldTxt
|
||||
: item.text
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 操作 、自定义插槽 -->
|
||||
<slot v-else></slot>
|
||||
</el-table>
|
||||
<div class="buttom">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
size="mini"
|
||||
@click="newRow"
|
||||
class="bottom"
|
||||
v-if="tableData.length == 0 && bottomPlus == true"
|
||||
></el-button>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import Sortable from "sortablejs";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
export default {
|
||||
props: {
|
||||
// 最大高度
|
||||
tableMaxHeight: {
|
||||
type: [String, Number],
|
||||
},
|
||||
// loading
|
||||
tabLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 序号操作icon
|
||||
indexOperate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 固定列
|
||||
fixedTable: {
|
||||
type: [Boolean, String],
|
||||
default: "right",
|
||||
},
|
||||
// 读取字段
|
||||
slotrow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showsummary: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 表格高度
|
||||
tableHeight: {
|
||||
type: [Number, String],
|
||||
default: "",
|
||||
},
|
||||
minHeight: {
|
||||
type: [Number, String],
|
||||
default: "auto",
|
||||
},
|
||||
maxHeight: {
|
||||
type: [Number, String],
|
||||
default: "auto",
|
||||
},
|
||||
// 表格高度
|
||||
// windowHight: {
|
||||
// type: [ String],
|
||||
// default: 'auto'
|
||||
// },
|
||||
// 表格尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: "small",
|
||||
},
|
||||
// 表格数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 表头数据
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 合计的index
|
||||
SummariesIndex: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 是否显示选择框
|
||||
showSelect: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示序号
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 操作选项
|
||||
funData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 操作按钮宽度
|
||||
funWidth: {
|
||||
type: Number,
|
||||
default: 80,
|
||||
},
|
||||
// 是否带有纵向边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
minWidth: {
|
||||
type: String,
|
||||
default: "100px",
|
||||
},
|
||||
|
||||
// 单选是否高亮
|
||||
highlightCurrent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 默认拖动
|
||||
sortableSwitch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 表格为空时的添加按钮
|
||||
bottomPlus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// headerStyle:{
|
||||
// type: String,
|
||||
// default:{
|
||||
// 'background-color': '#F5F5F5',
|
||||
// 'color': '#333333',
|
||||
// },
|
||||
// }
|
||||
tableDataMergeList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headerStyle: {
|
||||
"background-color": "#F5F5F5",
|
||||
color: "#333333",
|
||||
},
|
||||
itemKey: true,
|
||||
radioIndex: false,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.rowDrop();
|
||||
// 解决滚动条问题
|
||||
// var tableBody = this.$refs.elTable.$refs.footerWrapper
|
||||
// tableBody.addEventListener('scroll', () => {
|
||||
// // 滚动距离
|
||||
// const scrollLeft = tableBody.scrollLeft
|
||||
// this.$refs.elTable.$refs.bodyWrapper.scrollLeft = scrollLeft
|
||||
// })
|
||||
},
|
||||
filters: {
|
||||
timeFiter(val) {
|
||||
if (!val && val != 0) {
|
||||
return;
|
||||
} else {
|
||||
let returnData = val;
|
||||
// if (typeof val != "number" && typeof val != "boolean") {
|
||||
// // console.log(val,"asdasdad")
|
||||
// returnData = val.split("T").join(" ");
|
||||
// }
|
||||
return returnData;
|
||||
// return val
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
tableData: {
|
||||
deep: true,
|
||||
handler(newV, oldV) {
|
||||
newV.forEach((el, index) => {
|
||||
el.sort = index;
|
||||
});
|
||||
// this.setTableKey()
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
objectSpanMethod({ row, column }) {
|
||||
if (this.tableDataMergeList.includes(column.property)) {
|
||||
if (row[`${column.property}Length`]) {
|
||||
return {
|
||||
rowspan: row[`${column.property}Length`],
|
||||
colspan: 1,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
uuidKey() {
|
||||
return uuidv4();
|
||||
},
|
||||
setCurrent(row) {
|
||||
this.$refs.elTable.setCurrentRow(row);
|
||||
},
|
||||
select(selection, row) {
|
||||
this.$emit("select", selection, row);
|
||||
},
|
||||
selectAll(selection) {
|
||||
this.$emit("selectAll", selection);
|
||||
},
|
||||
setTableKey() {
|
||||
this.itemKey = !this.itemKey;
|
||||
},
|
||||
// 单元格双击事件
|
||||
doubleClick(row, column, cell, event) {
|
||||
this.$emit("doubleClick", row, column, cell, event);
|
||||
},
|
||||
// 取消多选
|
||||
clearSelect() {
|
||||
this.$refs.elTable.clearSelection();
|
||||
},
|
||||
/**
|
||||
* @description 单元格点击事件
|
||||
* @author duanyipeng
|
||||
* @createDate 2020/7/6 21:36
|
||||
* @param { Object } row 每一行数据
|
||||
* @param { Object } column 选中单元格表头数据
|
||||
* @use {
|
||||
* other:{
|
||||
* isClick:true
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
getCellClick(row, column) {
|
||||
let label = column.label;
|
||||
// let itemColumn = this.tableColumn.filter(item => {
|
||||
// return item.label === label
|
||||
// })
|
||||
// if (itemColumn[0] && itemColumn[0].other && itemColumn[0].other.isClick) {
|
||||
// this.$emit('onCellClick', row, label)
|
||||
// }
|
||||
this.$emit("onCellClick", row, label);
|
||||
},
|
||||
// 每一行点击事件
|
||||
getRowClick(row, column, event) {
|
||||
this.handleCurrentChange(row);
|
||||
this.$emit("onRowClick", row, event);
|
||||
},
|
||||
// 每一行双击点击事件
|
||||
rowDblclick(row, column, event) {
|
||||
this.$emit("rowDblclick", row);
|
||||
},
|
||||
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
|
||||
getRowKey(row) {
|
||||
return uuidv4();
|
||||
},
|
||||
// 多选事件
|
||||
handleSelectionChange(selectTable) {
|
||||
this.$emit("onSelectionChange", selectTable);
|
||||
},
|
||||
/**
|
||||
* 触发操作事件
|
||||
* 参数1：当前按钮索引
|
||||
* 参数2：当前按钮所在行数据
|
||||
*/
|
||||
funcEmit(index, row, item) {
|
||||
this.$emit("onFunc", index, row, item);
|
||||
},
|
||||
// 排序改变 降序:descending;升序ascending
|
||||
sortChange(column) {
|
||||
this.$emit("sortChange", column.prop, column.order);
|
||||
},
|
||||
//单选
|
||||
handleCurrentChange(val) {
|
||||
this.radioIndex = val.index;
|
||||
this.$emit("radioChange", val);
|
||||
},
|
||||
clearRadioIndex() {
|
||||
this.radioIndex = false;
|
||||
},
|
||||
setRadioIndex(index) {
|
||||
this.radioIndex = index;
|
||||
},
|
||||
// 添加index
|
||||
tableCellName({ row, column, rowIndex, columnINdex }) {
|
||||
row.index = rowIndex;
|
||||
column.index = columnINdex;
|
||||
},
|
||||
// tableRowClassName({ row,rowIndex}) {
|
||||
// if (rowIndex === 1) {
|
||||
// return 'warning-row';
|
||||
// } else if (rowIndex === 3) {
|
||||
// return 'success-row';
|
||||
// }
|
||||
// return '';
|
||||
// },
|
||||
tableRowClassName: function ({ row, rowIndex }) {
|
||||
let data = "";
|
||||
this.$emit(
|
||||
"row-class-name",
|
||||
{
|
||||
row: row,
|
||||
rowIndex: rowIndex,
|
||||
},
|
||||
(val) => {
|
||||
data = val;
|
||||
}
|
||||
);
|
||||
return data; //属性名必须返回一个string
|
||||
},
|
||||
newRow() {
|
||||
let arr = this.getAddRowData();
|
||||
this.$emit("newRow", arr);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.elTable.bodyWrapper.scrollTop =
|
||||
this.$refs.elTable.bodyWrapper.scrollHeight;
|
||||
this.$refs.elTable.doLayout();
|
||||
});
|
||||
},
|
||||
getAddRowData() {
|
||||
let arr = {};
|
||||
this.tableColumn.forEach((el) => {
|
||||
arr[el.prop] = "";
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
//行拖拽,排序方法
|
||||
rowDrop() {
|
||||
if (!this.sortableSwitch) {
|
||||
return;
|
||||
}
|
||||
const el = this.$refs.elTable.$el.querySelectorAll(
|
||||
".el-table__body-wrapper > table > tbody"
|
||||
)[0];
|
||||
this.sortable = Sortable.create(el, {
|
||||
ghostClass: "sortable-ghost",
|
||||
setData: function (dataTransfer) {
|
||||
dataTransfer.setData("Text", "");
|
||||
},
|
||||
onEnd: (evt) => {
|
||||
const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
|
||||
this.tableData.splice(evt.newIndex, 0, targetRow);
|
||||
},
|
||||
});
|
||||
},
|
||||
// 默认选择
|
||||
toggleSelection(rowData, selected) {
|
||||
if (rowData) {
|
||||
rowData.forEach((row) => {
|
||||
this.$refs.elTable.toggleRowSelection(row, selected);
|
||||
});
|
||||
} else {
|
||||
this.$refs.elTable.clearSelection();
|
||||
}
|
||||
},
|
||||
handlerSpanMethod(row, column, rowIndex, columnIndex) {
|
||||
this.$emit("spanMethod", row, column, rowIndex, columnIndex);
|
||||
},
|
||||
// 合计
|
||||
getSummaries(params) {
|
||||
const { columns, data } = params;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = "合计";
|
||||
return;
|
||||
}
|
||||
this.SummariesIndex.forEach((el) => {
|
||||
if (index == el) {
|
||||
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] = sums[index].toFixed(2);
|
||||
} else {
|
||||
sums[index] = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
this.$emit("sums", sums);
|
||||
|
||||
return sums;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-table .warning-row {
|
||||
background: #ffe562;
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
background: #acf389;
|
||||
}
|
||||
|
||||
.el-table .denger-row {
|
||||
background: #e13501;
|
||||
}
|
||||
|
||||
.fiexTableBottm {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.btnText {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mr-12 {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
::v-deep .cell {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.buttom {
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table__cell:last-child {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
// ::v-deep .el-table .sort-caret.ascending {
|
||||
// top: 1px
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table .sort-caret.descending {
|
||||
// bottom: 2px
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table .caret-wrapper {
|
||||
// height: 23px;
|
||||
// }
|
||||
|
||||
// 解决滚动条问题
|
||||
// div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;}
|
||||
// div ::v-deep .el-table__footer-wrapper {overflow-x: auto;border-top: 1px solid #f4f4f4;}
|
||||
// ::v-deep .el-table {
|
||||
// overflow-x: auto;
|
||||
// }
|
||||
// ::v-deep .el-table__header-wrapper,
|
||||
// ::v-deep .el-table__body-wrapper,
|
||||
// ::v-deep .el-table__footer-wrapper {
|
||||
// overflow: visible;
|
||||
// }
|
||||
// ::v-deep .el-table::after {
|
||||
// position: relative;
|
||||
// }
|
||||
// ::v-deep .el-table--scrollable-x ::v-deep .el-table__body-wrapper {
|
||||
// overflow: visible;
|
||||
// }
|
||||
// ::v-deep .el-table { .el-table__body-wrapper { z-index: 2; } }
|
||||
::v-deep.el-table {
|
||||
width: 100%;
|
||||
margin-bottom: 0vh !important;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
-webkit-border-vertical-spacing: 0px !important; // 垂直间距 设置的是行间距
|
||||
}
|
||||
|
||||
//以下代码是实现边框效果
|
||||
thead th {
|
||||
font-size: 14px;
|
||||
color: #575757 !important;
|
||||
|
||||
&:nth-last-child(2) {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
border-radius: 0 5px 5px 0;
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
thead th,
|
||||
.el-table__row td {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0px solid rgba(0, 0, 0, 0.1) !important;
|
||||
border-radius: 0px 0 0 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row > td {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
|
||||
&:last-child {
|
||||
border-left: 0px solid rgba(0, 0, 0, 0.1) !important;
|
||||
border-radius: 0px 0 0 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #eef5fe !important;
|
||||
}
|
||||
|
||||
.el-table__fixed::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<div class="wrapTable">
|
||||
<div class="RightBtnList">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="item.title"
|
||||
placement="top"
|
||||
v-for="(item, index) in fixedButtonList"
|
||||
:key="index"
|
||||
trigger="hover"
|
||||
>
|
||||
<span>
|
||||
<el-button
|
||||
size="mini"
|
||||
:icon="item.icon"
|
||||
@click.stop="
|
||||
fixedClick(
|
||||
item,
|
||||
'#mainTable',
|
||||
'机台排产表',
|
||||
mainTableData,
|
||||
mainTableColumn
|
||||
)
|
||||
"
|
||||
style="margin: 0"
|
||||
></el-button>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="table">
|
||||
<base-table
|
||||
v-loading="tableLoading"
|
||||
:showIndex="true"
|
||||
:tableData="tableData"
|
||||
:tableColumn="tableColumn"
|
||||
:tableDataMergeList="tableDataMergeList"
|
||||
id="mainTable"
|
||||
>
|
||||
<template #push_status="{row}">
|
||||
<div>
|
||||
<div>
|
||||
<div v-if="row.push_status==='Y'" style="width: 70px;background: yellowgreen;color: #fff">
|
||||
成功
|
||||
</div>
|
||||
<div v-else style="width: 70px;background: red;color: #fff">
|
||||
失败
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #initiate="{row}">
|
||||
<div>
|
||||
{{ row.initiate === 'D' ? '钉钉' : 'u8c' }}
|
||||
</div>
|
||||
</template>
|
||||
<template #approve="{row}">
|
||||
<div>
|
||||
<div v-if="row.approve==='Y'" style="width: 70px;background: yellowgreen;color: #fff">
|
||||
审核
|
||||
</div>
|
||||
<div v-else style="width: 70px;background: red;color: #fff">
|
||||
拒绝
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #operation="{row}">
|
||||
<div style="color: blue;cursor: pointer" @click="clickHandle(row)">
|
||||
补推
|
||||
</div>
|
||||
</template>
|
||||
</base-table>
|
||||
</div>
|
||||
<div class="page" v-if="pageShow">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageModel.pageNum"
|
||||
:page-sizes="[10, 20, 40, 100]"
|
||||
:page-size="pageModel.pageSize"
|
||||
layout="total, prev, pager, next,sizes, jumper"
|
||||
:total="pageModel.pageTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseTable from './baseTable/index.vue'
|
||||
//导出excel使用
|
||||
import XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
//打印
|
||||
import { basePrintJS } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'baseNewTable',
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
tableLoading: { type: Boolean, default: false },
|
||||
exportEventName: { type: String, default: '导出文件名' },
|
||||
tableDataMergeList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
pageShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pageModel: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
pageTotal: 99
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fixedButtonList: [
|
||||
{
|
||||
icon: 'el-icon-printer',
|
||||
title: '打印'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-folder',
|
||||
title: '导出'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHandle(row) {
|
||||
this.$emit('clickHandle', row)
|
||||
},
|
||||
/*
|
||||
* 导出、打印功能
|
||||
* item:当前按钮信息
|
||||
* boxId:打印表单id(仅导出）
|
||||
* name:导出后文件名（仅导出）
|
||||
* tableData:传打印表格当前tableData（仅打印）
|
||||
* tableColumn:传打印表格当前tableColumn（仅打印）
|
||||
* */
|
||||
fixedClick(item, boxId, name) {
|
||||
if (item.title == '导出') {
|
||||
this.exportEvent(name, boxId)
|
||||
} else if (item.title == '打印') {
|
||||
this.duplicate()
|
||||
}
|
||||
},
|
||||
//导出功能
|
||||
exportEvent(excelName, boxId) {
|
||||
let gatherData = {
|
||||
raw: true
|
||||
}
|
||||
let grid = XLSX.utils.table_to_book(
|
||||
document.querySelector(boxId),
|
||||
gatherData
|
||||
)
|
||||
let workbook = XLSX.write(grid, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: true,
|
||||
type: 'array'
|
||||
})
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([workbook], {
|
||||
type: 'application/octet-stream'
|
||||
}),
|
||||
this.exportEventName + '.xlsx'
|
||||
)
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, workbook)
|
||||
}
|
||||
return workbook
|
||||
},
|
||||
//打印
|
||||
duplicate() {
|
||||
basePrintJS(this.tableData, this.tableColumn)
|
||||
},
|
||||
//页码size改变
|
||||
handleSizeChange(val) {
|
||||
console.log(val)
|
||||
this.$emit('pageSizeChange', val)
|
||||
},
|
||||
//页码改变
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pageChange', val)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseTable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapTable {
|
||||
> .RightBtnList {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
> .table {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
> .page {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,630 @@
|
|||
<template>
|
||||
<div class="MachineSchedulingTable">
|
||||
<!-- 搜索框-->
|
||||
<div class="search" style="align-items: center;display: flex;flex-wrap: wrap">
|
||||
<!-- TOB销售-库存 -->
|
||||
<div class="radio">
|
||||
<el-select v-model="queryCriteria.u8c_code_corp" placeholder="公司" clearable>
|
||||
<el-option
|
||||
v-for="item in stateOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="datepickBox" style="">
|
||||
<el-date-picker
|
||||
v-model="queryCriteria.start_time"
|
||||
type="date"
|
||||
placeholder="创建时间-开始"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="datepickBox" style="">
|
||||
<el-date-picker
|
||||
v-model="queryCriteria.end_time"
|
||||
type="date"
|
||||
placeholder="创建时间-结束"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<el-input v-model="queryCriteria.u8c_bill_code" placeholder="单据号"></el-input>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="radioChunk" style="margin-top: 5px ;display: flex ;align-items: center;font-size: 14px">
|
||||
<div class="chunk" style="display: flex;align-items: center;width: 250px">
|
||||
<div>推送状态：</div>
|
||||
|
||||
<el-checkbox-group v-model="queryCriteria.push_status">
|
||||
<el-checkbox v-for="item in successOptions" :label="item.value" :key="item.value">{{
|
||||
item.label
|
||||
}}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="chunk" style="display: flex;align-items: center;width: 250px;margin: 0 10px">
|
||||
<div>钉钉审批结果：</div>
|
||||
<el-checkbox-group v-model="queryCriteria.approve">
|
||||
<el-checkbox v-for="item in resOptions" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="chunk" style="display: flex;align-items: center;width: 280px">
|
||||
<div>发起系统：</div>
|
||||
<el-checkbox-group v-model="queryCriteria.initiate">
|
||||
<el-checkbox v-for="item in sysOptions" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="query"
|
||||
:loading="loading"
|
||||
size="small"
|
||||
style=" margin: 5px 5px"
|
||||
>查询
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="reset"
|
||||
:loading="loading"
|
||||
size="small"
|
||||
style="margin: 5px 5px"
|
||||
>重置
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 主体内容-->
|
||||
<div class="main">
|
||||
<baseNewTable
|
||||
:tableData="mainTableData"
|
||||
:tableColumn="mainTableColumn"
|
||||
:tableLoading="tableLoading"
|
||||
:tableDataMergeList="tableDataMergeList"
|
||||
:pageModel="pageModel"
|
||||
@pageSizeChange="(val) => pageSizeChange(val, pageModel)"
|
||||
@pageChange="(val) => pageChange(val, pageModel)"
|
||||
exportEventName="ToB库存报表"
|
||||
:pageShow="false"
|
||||
@clickHandle="clickHandle"
|
||||
>
|
||||
</baseNewTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseNewTable from './baseNewTable2/index.vue'
|
||||
import {
|
||||
authApi,
|
||||
dingReportQueryListAPI,
|
||||
downFilesBasedFileNameFileTypeAPI,
|
||||
pushByIdAPI,
|
||||
queryListAPI, queryU8CAllCorpAPI
|
||||
} from '@/api/apis/auth'
|
||||
import {
|
||||
basePrintJS
|
||||
} from '@/utils/util.js'
|
||||
|
||||
export default {
|
||||
name: 'MachineSchedulingTable',
|
||||
data() {
|
||||
return {
|
||||
successOptions: [
|
||||
{ label: '成功', value: 'Y' },
|
||||
{ label: '失败', value: 'N' }
|
||||
],
|
||||
resOptions: [
|
||||
{ label: '审核', value: 'Y' },
|
||||
{ label: '拒绝', value: 'N' }
|
||||
],
|
||||
sysOptions: [
|
||||
{ label: '钉钉发起', value: 'D' },
|
||||
{ label: 'U8c发起', value: 'U' }
|
||||
],
|
||||
stateOptions: [],
|
||||
//搜索框内容
|
||||
queryCriteria: {
|
||||
'u8c_code_corp': '',
|
||||
'initiate': [],
|
||||
push_status: [],
|
||||
approve: []
|
||||
},
|
||||
pageModel: {
|
||||
'pageSize': 20,
|
||||
'pageNum': 1,
|
||||
pageTotal: 0
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 'TOB销售',
|
||||
value: 'TOB_ORDER'
|
||||
},
|
||||
{
|
||||
label: 'TOC销售',
|
||||
value: 'TOC_ORDER'
|
||||
}
|
||||
|
||||
],
|
||||
//搜索按钮loading
|
||||
loading: false,
|
||||
//表单loading
|
||||
tableLoading: false,
|
||||
workshop: [],
|
||||
//客户下拉
|
||||
queryCriteriaOption: [],
|
||||
//色号下拉
|
||||
colorNumOption: [],
|
||||
//批号下拉
|
||||
contractCodeOption: [],
|
||||
//机台下拉
|
||||
workBenchIDOption: [],
|
||||
//生产名称下拉
|
||||
cInvNameOption: [],
|
||||
// 产品类型下拉
|
||||
cInvCNameOption: [],
|
||||
//生产班组
|
||||
stateNameOption: [
|
||||
{
|
||||
label: '甲',
|
||||
value: '甲'
|
||||
},
|
||||
{
|
||||
label: '乙',
|
||||
value: '乙'
|
||||
},
|
||||
{
|
||||
label: '丙',
|
||||
value: '丙'
|
||||
}
|
||||
],
|
||||
// 右侧按钮
|
||||
fixedButtonList: [
|
||||
{
|
||||
icon: 'el-icon-printer',
|
||||
title: '打印'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-folder',
|
||||
title: '导出'
|
||||
}
|
||||
],
|
||||
//正常表单
|
||||
mainTableData: [],
|
||||
//缺少字段产品大类、本次生产重量
|
||||
mainTableColumn: [
|
||||
{
|
||||
label: '公司主键',
|
||||
prop: 'u8c_pk_corp',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '公司编码',
|
||||
prop: 'u8c_code_corp',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '公司名称',
|
||||
prop: 'u8c_name_corp',
|
||||
tooltip: true,
|
||||
width: 230
|
||||
},
|
||||
|
||||
{
|
||||
label: 'u8c单据号',
|
||||
prop: 'u8c_bill_code',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '推送状态',
|
||||
prop: 'push_status',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: '推送日志',
|
||||
prop: 'push_info',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '实例id',
|
||||
prop: 'ding_talk_process_id',
|
||||
tooltip: true,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'create_time',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '修改时间',
|
||||
prop: 'modify_time',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '钉钉审批结果',
|
||||
prop: 'ding_res',
|
||||
tooltip: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
label: '审核结果',
|
||||
prop: 'approve',
|
||||
tooltip: true,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: '发起系统',
|
||||
prop: 'initiate',
|
||||
tooltip: true,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: '发起次数',
|
||||
prop: 'push_count',
|
||||
tooltip: true,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: '历史实例id',
|
||||
prop: 'push_process_ids',
|
||||
tooltip: true,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
prop: 'operation',
|
||||
tooltip: true,
|
||||
width: 100,
|
||||
fixed: 'right'
|
||||
}
|
||||
],
|
||||
//正常合并
|
||||
tableDataMergeList: [],
|
||||
dist_state: {
|
||||
Y: '成功',
|
||||
N: '失败'
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTable() {
|
||||
const res = await queryU8CAllCorpAPI({})
|
||||
res.attribute.forEach(item => {
|
||||
item.label = item.unitName
|
||||
item.value = item.unitcode
|
||||
})
|
||||
this.stateOptions = res.attribute
|
||||
},
|
||||
async clickHandle(row) {
|
||||
console.log(row)
|
||||
const res = await pushByIdAPI({
|
||||
id: row.id
|
||||
})
|
||||
this.$vmNews(res.msg, 'success')
|
||||
this.init()
|
||||
},
|
||||
async downLoad() {
|
||||
let params = {
|
||||
...this.queryCriteria
|
||||
}
|
||||
this.openLoading('detail')
|
||||
const res = await authApi('tocofsSaleoutServiceImplReport', 'tocofsSaleoutServiceImplReport', 'exportToCSalesReportExcel', '', params)
|
||||
|
||||
if (res.status == 200) {
|
||||
const response = await downFilesBasedFileNameFileTypeAPI(res.msg)
|
||||
const blob = new Blob([response])
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', 'TOB销售核对表.xlsx')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
window.URL.revokeObjectURL(url) // 释放内存
|
||||
}
|
||||
return
|
||||
|
||||
},
|
||||
reset() {
|
||||
this.pageModel.pageNum = 1
|
||||
this.queryCriteria = {
|
||||
initiate: [],
|
||||
push_status: [],
|
||||
approve: ['U']
|
||||
}
|
||||
},
|
||||
//limit改变
|
||||
pageSizeChange(val, obj) {
|
||||
obj.pageSize = val
|
||||
this.init()
|
||||
},
|
||||
//页码变更
|
||||
pageChange(val, obj) {
|
||||
obj.page = val
|
||||
obj.pageNum = val
|
||||
this.init()
|
||||
},
|
||||
//搜索联想
|
||||
async remoteMethod(val, row, options) {
|
||||
// 客户
|
||||
if (row == 'cusCode') {
|
||||
const res = await GetCustomerListAPI(val)
|
||||
this[options] = []
|
||||
if (res.code == 1) {
|
||||
res.data[1].forEach((item) => {
|
||||
this[options].push({ label: item.cCusName, value: item.cCusCode })
|
||||
})
|
||||
}
|
||||
} else if (row === 'workBenchID') {
|
||||
//这个不需要动态搜索
|
||||
if (this[options].length) return
|
||||
const res = await WorkbenchGetBillListAPI({
|
||||
page: 1,
|
||||
limit: 999,
|
||||
Sequence: '',
|
||||
SequenceName: '',
|
||||
CodeOrName: '',
|
||||
areaID: '',
|
||||
workShopID: ''
|
||||
})
|
||||
this[options] = []
|
||||
if (res.code == 1) {
|
||||
res.data[1].forEach((item) => {
|
||||
this[options].push({
|
||||
label: item.workName,
|
||||
value: item.workID
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (row === 'cInvCode') {
|
||||
const res = await U8BaseGetInvenListAPI({
|
||||
page: 1,
|
||||
limit: 200,
|
||||
codeOrName: val
|
||||
})
|
||||
this[options] = []
|
||||
if (res.code == 1) {
|
||||
res.data[1].forEach((item) => {
|
||||
this[options].push({ label: item.cInvName, value: item.cInvCode })
|
||||
})
|
||||
}
|
||||
} else if (row === 'cInvCCode') {
|
||||
const res = await U8BaseGetInvClassListAPI({
|
||||
page: 1,
|
||||
limit: 200,
|
||||
codeOrName: val
|
||||
})
|
||||
this[options] = []
|
||||
if (res.code == 1) {
|
||||
res.data[1].forEach((item) => {
|
||||
this[options].push({
|
||||
label: item.cInvCName,
|
||||
value: item.cInvCCode
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击查询
|
||||
query() {
|
||||
this.pageModel.pageNum = 1
|
||||
// if (this.queryCriteria.business_date_start && this.queryCriteria.business_date_end) {
|
||||
// let startDate = new Date(this.queryCriteria.business_date_start)
|
||||
// let endDate = new Date(this.queryCriteria.business_date_end)
|
||||
// let differenceInMillis = endDate - startDate
|
||||
// let differenceInDays = differenceInMillis / (1000 * 60 * 60 * 24)
|
||||
// // 判断差值是否在15天以内
|
||||
// if (!isNaN(differenceInDays) && differenceInDays < 11) {
|
||||
// } else {
|
||||
// this.$vmNews('开始时间和结束时间范围请选择在10天内')
|
||||
// return
|
||||
// }
|
||||
// } else {
|
||||
// this.$vmNews('请选择开始时间和结束时间')
|
||||
// return
|
||||
// }
|
||||
this.init()
|
||||
},
|
||||
/*
|
||||
* 导出、打印功能
|
||||
* item:当前按钮信息
|
||||
* boxId:打印表单id(仅导出）
|
||||
* name:导出后文件名（仅导出）
|
||||
* tableData:传打印表格当前tableData（仅打印）
|
||||
* tableColumn:传打印表格当前tableColumn（仅打印）
|
||||
* */
|
||||
fixedClick(item, boxId, name, tableData, tableColumn) {
|
||||
if (item.title == '导出') {
|
||||
this.exportEvent(name, boxId)
|
||||
} else if (item.title == '打印') {
|
||||
this.duplicate(tableData, tableColumn)
|
||||
}
|
||||
},
|
||||
//导出功能
|
||||
exportEvent(excelName, boxId) {
|
||||
console.log(document.querySelector(boxId), '123', boxId)
|
||||
let gatherData = {
|
||||
raw: true
|
||||
}
|
||||
let grid = XLSX.utils.table_to_book(
|
||||
document.querySelector(boxId),
|
||||
gatherData
|
||||
)
|
||||
let workbook = XLSX.write(grid, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: true,
|
||||
type: 'array'
|
||||
})
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([workbook], {
|
||||
type: 'application/octet-stream'
|
||||
}),
|
||||
excelName + '.xlsx'
|
||||
)
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, workbook)
|
||||
}
|
||||
return workbook
|
||||
},
|
||||
//打印
|
||||
duplicate(tableData, tableColumn) {
|
||||
basePrintJS(tableData, tableColumn)
|
||||
},
|
||||
//初始化表单
|
||||
async init() {
|
||||
this.tableLoading = true
|
||||
let params = {
|
||||
...this.queryCriteria,
|
||||
initiate: this.queryCriteria.initiate.join(','),
|
||||
push_status: this.queryCriteria.push_status.join(','),
|
||||
approve: this.queryCriteria.approve.join(',')
|
||||
}
|
||||
//初始化表单
|
||||
console.log(params, 'params')
|
||||
const res = await dingReportQueryListAPI(params)
|
||||
console.log(res, '初始化res')
|
||||
// this.pageModel.pageTotal = res.attribute.total
|
||||
// res.attribute.list.forEach(item => {
|
||||
// item.newstate = this.dist_state[item.newstate]
|
||||
// item.newstate4 = this.dist_state[item.newstate4]
|
||||
// })
|
||||
this.mainTableData = this.dataDispose(
|
||||
res.attribute,
|
||||
this.tableDataMergeList
|
||||
)
|
||||
this.tableLoading = false
|
||||
},
|
||||
//data处理
|
||||
dataDispose(data, arr) {
|
||||
if (!arr.length) return data
|
||||
//分类存放分组
|
||||
let tempObj = {}
|
||||
//结果
|
||||
let result = []
|
||||
//将层级转变为 [[1],[1,2],[1,2,3]]
|
||||
const transformedArray = arr.reduce((acc, currentValue) => {
|
||||
acc.push([...(acc.length ? acc[acc.length - 1] : []), currentValue])
|
||||
return acc
|
||||
}, [])
|
||||
//开始对表单进行排序
|
||||
//排序后的arr
|
||||
let newArr = []
|
||||
let sortObj = {}
|
||||
data.forEach((item) => {
|
||||
let keyValue = ''
|
||||
arr.forEach((key2, index) => {
|
||||
keyValue += item[key2]
|
||||
})
|
||||
if (!sortObj[keyValue]) {
|
||||
sortObj[keyValue] = data.filter((item01) => {
|
||||
return arr.every((prop) => item01[prop] === item[prop])
|
||||
})
|
||||
}
|
||||
})
|
||||
Object.keys(sortObj)
|
||||
.sort()
|
||||
.forEach((key) => {
|
||||
newArr = [...newArr, ...sortObj[key]]
|
||||
})
|
||||
// 开始循环
|
||||
newArr.forEach((item) => {
|
||||
transformedArray.forEach((key) => {
|
||||
//keyValue:当前key下的value加一起，用于tempObj的key
|
||||
let keyValue = ''
|
||||
key.forEach((keyItem, index) => {
|
||||
keyValue += item[keyItem]
|
||||
if (index < key.length - 1) {
|
||||
keyValue += '|'
|
||||
}
|
||||
})
|
||||
if (!tempObj[keyValue]) {
|
||||
//拿到所有当前key下相同数据
|
||||
tempObj[keyValue] = newArr.filter((item01) => {
|
||||
return key.every((prop) => item01[prop] === item[prop])
|
||||
})
|
||||
// 计算总数
|
||||
tempObj[keyValue][0][`${key[key.length - 1]}Length`] =
|
||||
tempObj[keyValue].length
|
||||
|
||||
if (key.length === 1) {
|
||||
result = [...tempObj[keyValue], ...result]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.getTable()
|
||||
},
|
||||
components: {
|
||||
baseNewTable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.MachineSchedulingTable {
|
||||
padding: 15px;
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
|
||||
.div_title {
|
||||
color: #696969;
|
||||
background-color: #f1efef;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
margin: 20px 0 10px;
|
||||
text-align: center;
|
||||
|
||||
> span {
|
||||
width: 23%;
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
> .search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
margin-left: 10px !important;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> .main {
|
||||
> .tableBox {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.radioChunk {
|
||||
.chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -48,7 +48,8 @@ module.exports = {
|
|||
// target: `http://192.168.2.78:10086`,
|
||||
// target: `http://192.168.2.185:10086`,
|
||||
// target: `http://192.168.2.83:9999`,
|
||||
target:'http://39.170.109.90:8081/',
|
||||
// target:'http://39.170.109.90:8081/',
|
||||
target:'http://192.168.2.189:9999/',
|
||||
// target:'http://192.168.2.75:1024/',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue