丽知中台报表更新
This commit is contained in:
parent
e2a530eeb4
commit
ce6cb725d5
|
|
@ -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: "auto",
|
||||
},
|
||||
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,225 @@
|
|||
<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"
|
||||
tableHeight="calc(100vh - 280px)"
|
||||
id="mainTable"
|
||||
>
|
||||
<template #newstate="{row}">
|
||||
<div v-if="row.newstate==='成功'" style="color: green">
|
||||
{{ row.newstate }}
|
||||
</div>
|
||||
<div v-if="row.newstate==='失败'" style="color: red">
|
||||
{{ row.newstate }}
|
||||
</div>
|
||||
</template>
|
||||
<template #newstate2="{row}">
|
||||
<div v-if="row.newstate2==='成功'" style="color: green">
|
||||
{{ row.newstate2 }}
|
||||
</div>
|
||||
<div v-if="row.newstate2==='失败'" style="color: red">
|
||||
{{ row.newstate2 }}
|
||||
</div>
|
||||
</template>
|
||||
<template #newstate3="{row}">
|
||||
<div v-if="row.newstate3==='成功'" style="color: green">
|
||||
{{ row.newstate3 }}
|
||||
</div>
|
||||
<div v-if="row.newstate3==='失败'" style="color: red">
|
||||
{{ row.newstate3 }}
|
||||
</div>
|
||||
</template>
|
||||
<template #newstate4="{row}">
|
||||
<div v-if="row.newstate4==='成功'" style="color: green">
|
||||
{{ row.newstate4 }}
|
||||
</div>
|
||||
<div v-if="row.newstate4==='失败'" style="color: red">
|
||||
{{ row.newstate4 }}
|
||||
</div>
|
||||
</template>
|
||||
</base-table>
|
||||
</div>
|
||||
<div class="page">
|
||||
<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 [];
|
||||
},
|
||||
},
|
||||
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: {
|
||||
/*
|
||||
* 导出、打印功能
|
||||
* 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,658 @@
|
|||
<template>
|
||||
<div class="MachineSchedulingTable">
|
||||
<!-- 搜索框-->
|
||||
|
||||
<div class="search">
|
||||
<div class="datepickBox" style="">
|
||||
<el-date-picker
|
||||
v-model="queryCriteria.businessDateStart"
|
||||
type="date"
|
||||
placeholder="业务日期开始"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="datepickBox" style="">
|
||||
<el-date-picker
|
||||
v-model="queryCriteria.businessDateEnd"
|
||||
type="date"
|
||||
placeholder="业务日期结束"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<el-select v-model="queryCriteria.newstate" placeholder="入库推送状态">
|
||||
<el-option
|
||||
v-for="item in stateOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>`
|
||||
<div class="radio">
|
||||
<el-select v-model="queryCriteria.newstate2" placeholder="退款推送状态">
|
||||
<el-option
|
||||
v-for="item in stateOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="query"
|
||||
:loading="loading"
|
||||
size="small"
|
||||
style=" margin: 5px 5px"
|
||||
>查询
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="downLoad"
|
||||
:loading="loading"
|
||||
size="small"
|
||||
style=" margin: 5px 5px"
|
||||
>excel导出
|
||||
</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="ToC确认收入报表"
|
||||
>
|
||||
</baseNewTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseNewTable from './baseNewTable2/index.vue'
|
||||
import { authApi, downFilesBasedFileNameFileTypeAPI } from '@/api/apis/auth'
|
||||
import {
|
||||
basePrintJS
|
||||
} from '@/utils/util.js'
|
||||
|
||||
export default {
|
||||
name: 'MachineSchedulingTable',
|
||||
data() {
|
||||
return {
|
||||
stateOptions: [
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '成功', value: 'Y' },
|
||||
{ label: '失败', value: 'N' }
|
||||
],
|
||||
//搜索框内容
|
||||
queryCriteria: {
|
||||
'businesstype': 'TOC_ORDER',
|
||||
'businessDateStart': '2025-03-11',
|
||||
'businessDateEnd': '2025-03-11',
|
||||
'newstate': 'Y',
|
||||
'newstate2': 'Y'
|
||||
},
|
||||
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: 'O无源入库明细主键',
|
||||
prop: 'id',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O无源入库单号',
|
||||
prop: 'receiptCode',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O公司',
|
||||
prop: 'companyCode',
|
||||
tooltip: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: 'O仓库',
|
||||
prop: 'facilityCode',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O店铺',
|
||||
prop: 'storeCode',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O关联时间',
|
||||
prop: 'relatedAt',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '业务类型',
|
||||
prop: 'businesstype',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '业务日期(关联时间)',
|
||||
prop: 'businessdate',
|
||||
tooltip: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: 'O货品sku',
|
||||
prop: 'skucode',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O货品名称',
|
||||
prop: 'skuname',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O入库数量',
|
||||
prop: 'quantity',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '退款完成时间(取O售后订单表头)',
|
||||
prop: 'transactionDate',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: '退款推送时间',
|
||||
prop: 'newpushdate2',
|
||||
tooltip: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: '退款报错详情',
|
||||
prop: 'newtransmitinfo2',
|
||||
tooltip: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: '退款推送状态',
|
||||
prop: 'newstate2',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
|
||||
{
|
||||
label: '入库推送时间',
|
||||
prop: 'newpushdate',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '入库报错详情',
|
||||
prop: 'newtransmitinfo',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: '入库推送状态',
|
||||
prop: 'newstate',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'U销售订单编码',
|
||||
prop: 'newsystemnumber',
|
||||
tooltip: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: 'U销售订单主键',
|
||||
prop: 'newsystemprimary',
|
||||
tooltip: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: 'U应收单号',
|
||||
prop: 'newsystemnumber2',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'U应收单主键',
|
||||
prop: 'newsystemprimary2',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
|
||||
{
|
||||
label: 'O计算应收',
|
||||
prop: 'def1',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O计算公式',
|
||||
prop: 'def2',
|
||||
tooltip: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: 'O平台优惠',
|
||||
prop: 'def3',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O支付优惠',
|
||||
prop: 'def4',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O达人优惠',
|
||||
prop: 'def5',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: 'O商家优惠',
|
||||
prop: 'def6',
|
||||
tooltip: true,
|
||||
width: 150
|
||||
},
|
||||
|
||||
],
|
||||
//正常合并
|
||||
tableDataMergeList: [],
|
||||
dist_state: {
|
||||
Y: '成功',
|
||||
N: '失败'
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async downLoad() {
|
||||
let params = {
|
||||
...this.queryCriteria
|
||||
}
|
||||
this.openLoading('detail')
|
||||
const res = await authApi('tocofsSaleoutServiceImplReport', 'tocofsSaleoutServiceImplReport', 'queryPassiveComponentsReportExcel', '', 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', '无源条件报表.xlsx')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
window.URL.revokeObjectURL(url) // 释放内存
|
||||
}
|
||||
return
|
||||
|
||||
},
|
||||
reset() {
|
||||
this.pageModel.pageNum = 1
|
||||
this.queryCriteria = {
|
||||
businessType: 'TOC_ORDER'
|
||||
}
|
||||
},
|
||||
//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,
|
||||
...this.pageModel
|
||||
}
|
||||
//初始化表单
|
||||
const res = await authApi('tocofsSaleoutServiceImplReport', 'tocofsSaleoutServiceImplReport', 'queryPassiveComponentsReport', '', params)
|
||||
console.log(res, '初始化res')
|
||||
this.pageModel.pageTotal = res.attribute.total
|
||||
res.attribute.list.forEach(item => {
|
||||
item.newstate = this.dist_state[item.newstate]
|
||||
item.newstate2 = this.dist_state[item.newstate2]
|
||||
})
|
||||
this.mainTableData = this.dataDispose(
|
||||
res.attribute.list,
|
||||
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()
|
||||
},
|
||||
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 !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> .main {
|
||||
> .tableBox {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
123
vue.config.js
123
vue.config.js
|
|
@ -1,17 +1,17 @@
|
|||
"use strict";
|
||||
const path = require("path");
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, dir);
|
||||
return path.join(__dirname, dir)
|
||||
}
|
||||
|
||||
const CompressionPlugin = require("compression-webpack-plugin");
|
||||
const CompressionPlugin = require('compression-webpack-plugin')
|
||||
|
||||
const name = process.env.VUE_APP_TITLE || "用安数智中台"; // 网页标题
|
||||
const name = process.env.VUE_APP_TITLE || '用安数智中台' // 网页标题
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 80; // 端口
|
||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
|
||||
const webpack = require('webpack');
|
||||
const webpack = require('webpack')
|
||||
|
||||
// vue.config.js 配置说明
|
||||
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
|
||||
|
|
@ -21,18 +21,18 @@ module.exports = {
|
|||
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
|
||||
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
|
||||
// publicPath: process.env.NODE_ENV === "production" ? "/" : "./",
|
||||
publicPath: "./",
|
||||
publicPath: './',
|
||||
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
|
||||
outputDir: "dist",
|
||||
outputDir: 'dist',
|
||||
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
|
||||
assetsDir: "webPc",
|
||||
assetsDir: 'webPc',
|
||||
// 是否开启eslint保存检测，有效值：ture | false | 'error'
|
||||
lintOnSave: process.env.NODE_ENV === "development",
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||||
productionSourceMap: false,
|
||||
// webpack-dev-server 相关配置
|
||||
devServer: {
|
||||
host: "0.0.0.0",
|
||||
host: '0.0.0.0',
|
||||
// host:"localhost",z
|
||||
port: port,
|
||||
open: true,
|
||||
|
|
@ -49,102 +49,103 @@ module.exports = {
|
|||
// target: `http://192.168.2.185:10086`,
|
||||
// target: `http://192.168.2.83:9999`,
|
||||
// target:'http://39.170.109.90:8081/',
|
||||
target:'http://192.168.2.189:9999/',
|
||||
// target:'http://192.168.2.189:9999/',
|
||||
target: 'http://192.168.2.86:9999/', //刘洋接口
|
||||
// target:'http://192.168.2.75:1024/',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
["^" + process.env.VUE_APP_BASE_API]: "",
|
||||
},
|
||||
},
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
disableHostCheck: true,
|
||||
disableHostCheck: true
|
||||
},
|
||||
css: {
|
||||
loaderOptions: {
|
||||
sass: {
|
||||
sassOptions: { outputStyle: "expanded" },
|
||||
},
|
||||
},
|
||||
sassOptions: { outputStyle: 'expanded' }
|
||||
}
|
||||
}
|
||||
},
|
||||
configureWebpack: {
|
||||
name: name,
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve("src"),
|
||||
},
|
||||
'@': resolve('src')
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
|
||||
new CompressionPlugin({
|
||||
cache: false, // 不启用文件缓存
|
||||
test: /\.(js|css|html)?$/i, // 压缩文件格式
|
||||
filename: "[path].gz[query]", // 压缩后的文件名
|
||||
algorithm: "gzip", // 使用gzip压缩
|
||||
minRatio: 0.8, // 压缩率小于1才会压缩
|
||||
filename: '[path].gz[query]', // 压缩后的文件名
|
||||
algorithm: 'gzip', // 使用gzip压缩
|
||||
minRatio: 0.8 // 压缩率小于1才会压缩
|
||||
}),
|
||||
new webpack.ProvidePlugin({
|
||||
'window.Quill': 'quill/dist/quill.js',
|
||||
'Quill': 'quill/dist/quill.js'
|
||||
})
|
||||
],
|
||||
]
|
||||
},
|
||||
chainWebpack(config) {
|
||||
config.plugins.delete("preload"); // TODO: need test
|
||||
config.plugins.delete("prefetch"); // TODO: need test
|
||||
config.plugins.delete('preload') // TODO: need test
|
||||
config.plugins.delete('prefetch') // TODO: need test
|
||||
|
||||
// set svg-sprite-loader
|
||||
config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
|
||||
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
|
||||
config.module
|
||||
.rule("icons")
|
||||
.rule('icons')
|
||||
.test(/\.svg$/)
|
||||
.include.add(resolve("src/assets/icons"))
|
||||
.include.add(resolve('src/assets/icons'))
|
||||
.end()
|
||||
.use("svg-sprite-loader")
|
||||
.loader("svg-sprite-loader")
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.options({
|
||||
symbolId: "icon-[name]",
|
||||
symbolId: 'icon-[name]'
|
||||
})
|
||||
.end();
|
||||
.end()
|
||||
|
||||
config.when(process.env.NODE_ENV !== "development", (config) => {
|
||||
config.when(process.env.NODE_ENV !== 'development', (config) => {
|
||||
config
|
||||
.plugin("ScriptExtHtmlWebpackPlugin")
|
||||
.after("html")
|
||||
.use("script-ext-html-webpack-plugin", [
|
||||
.plugin('ScriptExtHtmlWebpackPlugin')
|
||||
.after('html')
|
||||
.use('script-ext-html-webpack-plugin', [
|
||||
{
|
||||
// `runtime` must same as runtimeChunk name. default is `runtime`
|
||||
inline: /runtime\..*\.js$/,
|
||||
},
|
||||
inline: /runtime\..*\.js$/
|
||||
}
|
||||
])
|
||||
.end();
|
||||
.end()
|
||||
config.optimization.splitChunks({
|
||||
chunks: "all",
|
||||
chunks: 'all',
|
||||
cacheGroups: {
|
||||
libs: {
|
||||
name: "chunk-libs",
|
||||
name: 'chunk-libs',
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 10,
|
||||
chunks: "initial", // only package third parties that are initially dependent
|
||||
chunks: 'initial' // only package third parties that are initially dependent
|
||||
},
|
||||
elementUI: {
|
||||
name: "chunk-elementUI", // split elementUI into a single package
|
||||
name: 'chunk-elementUI', // split elementUI into a single package
|
||||
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
|
||||
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
|
||||
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
|
||||
},
|
||||
commons: {
|
||||
name: "chunk-commons",
|
||||
test: resolve("src/components"), // can customize your rules
|
||||
name: 'chunk-commons',
|
||||
test: resolve('src/components'), // can customize your rules
|
||||
minChunks: 3, // minimum common number
|
||||
priority: 5,
|
||||
reuseExistingChunk: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
config.optimization.runtimeChunk("single"),
|
||||
{
|
||||
from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
|
||||
to: "./", //到根目录下
|
||||
};
|
||||
});
|
||||
},
|
||||
};
|
||||
reuseExistingChunk: true
|
||||
}
|
||||
}
|
||||
})
|
||||
config.optimization.runtimeChunk('single'),
|
||||
{
|
||||
from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
|
||||
to: './' //到根目录下
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue