系统报表需求添加（丽知项目）
This commit is contained in:
hyt
parent
c4fc2ba79f
commit
3bd259ee0f
|
|
@ -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,198 @@
|
||||||
|
<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="false"
|
||||||
|
:tableData="tableData"
|
||||||
|
:tableColumn="tableColumn"
|
||||||
|
:tableDataMergeList="tableDataMergeList"
|
||||||
|
tableHeight="70vh"
|
||||||
|
id="mainTable"
|
||||||
|
>
|
||||||
|
<template #new_state="{row}">
|
||||||
|
<div>
|
||||||
|
{{ row.new_state === 'Y' ? "成功" : row.new_state === 'N' ? "失败" : "" }}
|
||||||
|
</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,5000,9999]"
|
||||||
|
: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,600 @@
|
||||||
|
<template>
|
||||||
|
<div class="MachineSchedulingTable">
|
||||||
|
<!-- 搜索框-->
|
||||||
|
|
||||||
|
<div class="search">
|
||||||
|
<div class="datepickBox" style="">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryCriteria.business_date_start"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择开始日期"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="datepickBox" style="">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryCriteria.business_date_end"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择结束时间"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="radio">
|
||||||
|
<el-select v-model="queryCriteria.new_state" placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in stateOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.spec_no" placeholder="商家编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.warehouse_no" placeholder="仓库编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.warehouse_name" placeholder="仓库名称"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.new_system_number" placeholder="U8C单号"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.shop_name" placeholder="店铺名称"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.shop_no" placeholder="店铺编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.order_no" placeholder="旺店通出库单编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="query"
|
||||||
|
:loading="loading"
|
||||||
|
size="small"
|
||||||
|
style="width: 5%; margin: 10px 20px"
|
||||||
|
>查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="downLoad"
|
||||||
|
:loading="loading"
|
||||||
|
size="small"
|
||||||
|
style="width: 5%; margin: 10px 20px"
|
||||||
|
>excel导出
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
@click="reset"
|
||||||
|
:loading="loading"
|
||||||
|
size="small"
|
||||||
|
style="width: 5%; margin: 10px 20px"
|
||||||
|
>重置
|
||||||
|
</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: ""},
|
||||||
|
{label: "成功", value: "Y"},
|
||||||
|
{label: "失败", value: "N"},
|
||||||
|
],
|
||||||
|
//搜索框内容
|
||||||
|
queryCriteria: {
|
||||||
|
"reportDate": "",
|
||||||
|
"business_date_start": "",
|
||||||
|
"business_date_end": "",
|
||||||
|
"new_state": "",
|
||||||
|
"spec_no": "",
|
||||||
|
"warehouse_no": "",
|
||||||
|
"warehouse_name": "",
|
||||||
|
"new_system_number": "",
|
||||||
|
"shop_name": "",
|
||||||
|
"shop_no": "",
|
||||||
|
"order_no": ""
|
||||||
|
},
|
||||||
|
pageModel: {
|
||||||
|
"pageSize": 100,
|
||||||
|
"pageNum": 1,
|
||||||
|
pageTotal: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
//搜索按钮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: "new_state",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "成功/失败原因",
|
||||||
|
prop: "new_transmit_info",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "U8C销售单号",
|
||||||
|
prop: "new_system_number",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "U8C销售主键",
|
||||||
|
prop: "new_system_primary",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通品牌名称",
|
||||||
|
prop: "brand_name",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通品牌编码",
|
||||||
|
prop: "barcode",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "商家编码sku",
|
||||||
|
prop: "spec_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通货品数量",
|
||||||
|
prop: "goods_count",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "出库明细主键",
|
||||||
|
prop: "rec_id",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "总货款",
|
||||||
|
prop: "share_amount",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "仓库编码",
|
||||||
|
prop: "warehouse_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "仓库名称",
|
||||||
|
prop: "warehouse_name",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "出库单编码",
|
||||||
|
prop: "order_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通店铺名称",
|
||||||
|
prop: "shop_name",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通店铺编码",
|
||||||
|
prop: "shop_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "发货日期(业务日期)",
|
||||||
|
prop: "consign_time",
|
||||||
|
tooltip: true,
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//正常合并
|
||||||
|
tableDataMergeList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async downLoad() {
|
||||||
|
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 < 31) {
|
||||||
|
} else {
|
||||||
|
this.$vmNews("开始时间和结束时间范围请选择在30天内");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$vmNews("请选择开始时间和结束时间");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let params = {
|
||||||
|
...this.queryCriteria,
|
||||||
|
...this.pageModel,
|
||||||
|
pageSize: 9999,
|
||||||
|
pageNum: 1
|
||||||
|
};
|
||||||
|
this.openLoading('detail')
|
||||||
|
const res = await authApi("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCSalesReportExcel", "", params);
|
||||||
|
|
||||||
|
if (res.status == 200) {
|
||||||
|
const response = await downFilesBasedFileNameFileTypeAPI(res.attribute)
|
||||||
|
// console.log(res)
|
||||||
|
const url = window.URL.createObjectURL(new Blob([response]), {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', 'toc正向流程报表.xlsx'); // 设置下载的文件名
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
}
|
||||||
|
return
|
||||||
|
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.pageModel.pageNum = 1;
|
||||||
|
this.queryCriteria = {
|
||||||
|
"reportDate": "",
|
||||||
|
"business_date_start": "",
|
||||||
|
"business_date_end": "",
|
||||||
|
"new_state": "",
|
||||||
|
"spec_no": "",
|
||||||
|
"warehouse_no": "",
|
||||||
|
"warehouse_name": "",
|
||||||
|
"new_system_number": "",
|
||||||
|
"shop_name": "",
|
||||||
|
"shop_no": "",
|
||||||
|
"order_no": ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//limit改变
|
||||||
|
pageSizeChange(val, obj) {
|
||||||
|
obj.pageSize = val;
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
//页码变更
|
||||||
|
pageChange(val, obj) {
|
||||||
|
obj.page = 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("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCSalesReport", "", params);
|
||||||
|
console.log(res, '初始化res')
|
||||||
|
this.pageModel.pageTotal = res.attribute.total;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
> .main {
|
||||||
|
> .tableBox {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,596 @@
|
||||||
|
<template>
|
||||||
|
<div class="MachineSchedulingTable">
|
||||||
|
<!-- 搜索框-->
|
||||||
|
|
||||||
|
<div class="search">
|
||||||
|
<div class="datepickBox" style="">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryCriteria.business_date_start"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择开始日期"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="datepickBox" style="">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryCriteria.business_date_end"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择结束时间"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="radio">
|
||||||
|
<el-select v-model="queryCriteria.new_state" placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in stateOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.spec_no" placeholder="商家编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.warehouse_no" placeholder="仓库编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.warehouse_name" placeholder="仓库名称"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.new_system_number" placeholder="U8C单号"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.shop_name" placeholder="店铺名称"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.shop_no" placeholder="店铺编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="chunk">
|
||||||
|
<el-input v-model="queryCriteria.order_no" placeholder="旺店通出库单编码"></el-input>
|
||||||
|
</div>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="query"
|
||||||
|
:loading="loading"
|
||||||
|
size="small"
|
||||||
|
style="width: 5%; margin: 10px 20px"
|
||||||
|
>查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="downLoad"
|
||||||
|
:loading="loading"
|
||||||
|
size="small"
|
||||||
|
style="width: 5%; margin: 10px 20px"
|
||||||
|
>excel导出
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
@click="reset"
|
||||||
|
:loading="loading"
|
||||||
|
size="small"
|
||||||
|
style="width: 5%; margin: 10px 20px"
|
||||||
|
>重置
|
||||||
|
</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";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "MachineSchedulingTable",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stateOptions: [
|
||||||
|
{label: "全部", value: ""},
|
||||||
|
{label: "成功", value: "Y"},
|
||||||
|
{label: "失败", value: "N"},
|
||||||
|
],
|
||||||
|
//搜索框内容
|
||||||
|
queryCriteria: {
|
||||||
|
"reportDate": "",
|
||||||
|
"business_date_start": "",
|
||||||
|
"business_date_end": "",
|
||||||
|
"new_state": "",
|
||||||
|
"spec_no": "",
|
||||||
|
"warehouse_no": "",
|
||||||
|
"warehouse_name": "",
|
||||||
|
"new_system_number": "",
|
||||||
|
"shop_name": "",
|
||||||
|
"shop_no": "",
|
||||||
|
"order_no": ""
|
||||||
|
},
|
||||||
|
pageModel: {
|
||||||
|
"pageSize": 100,
|
||||||
|
"pageNum": 1,
|
||||||
|
pageTotal: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
//搜索按钮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: "new_state",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "成功/失败原因",
|
||||||
|
prop: "new_transmit_info",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "U8C销售单号",
|
||||||
|
prop: "new_system_number",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "U8C销售主键",
|
||||||
|
prop: "new_system_primary",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通品牌名称",
|
||||||
|
prop: "brand_name",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通品牌编码",
|
||||||
|
prop: "brand_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "商家编码sku",
|
||||||
|
prop: "spec_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通货品数量",
|
||||||
|
prop: "num",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "价格",
|
||||||
|
prop: "price",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通入库明细主键",
|
||||||
|
prop: "rec_id",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通仓库编码",
|
||||||
|
prop: "warehouse_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通仓库名称",
|
||||||
|
prop: "warehouse_name",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通入库单编码",
|
||||||
|
prop: "order_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通店铺名称",
|
||||||
|
prop: "shop_name",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通店铺编码",
|
||||||
|
prop: "shop_no",
|
||||||
|
tooltip: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "旺店通入库审核日期(业务日期)",
|
||||||
|
prop: "business_date",
|
||||||
|
tooltip: true,
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//正常合并
|
||||||
|
tableDataMergeList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async downLoad() {
|
||||||
|
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 < 31) {
|
||||||
|
} else {
|
||||||
|
this.$vmNews("开始时间和结束时间范围请选择在30天内");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$vmNews("请选择开始时间和结束时间");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let params = {
|
||||||
|
...this.queryCriteria,
|
||||||
|
...this.pageModel,
|
||||||
|
pageSize: 9999,
|
||||||
|
pageNum: 1
|
||||||
|
};
|
||||||
|
this.openLoading('detail')
|
||||||
|
const res = await authApi("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCReturnReportExcel", "", params);
|
||||||
|
|
||||||
|
if (res.status == 200) {
|
||||||
|
const response = await downFilesBasedFileNameFileTypeAPI(res.attribute)
|
||||||
|
// console.log(res)
|
||||||
|
const url = window.URL.createObjectURL(new Blob([response]), {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', 'toc反向流程报表.xlsx'); // 设置下载的文件名
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
}
|
||||||
|
return
|
||||||
|
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.pageModel.pageNum = 1;
|
||||||
|
this.queryCriteria = {
|
||||||
|
"reportDate": "",
|
||||||
|
"business_date_start": "",
|
||||||
|
"business_date_end": "",
|
||||||
|
"new_state": "",
|
||||||
|
"spec_no": "",
|
||||||
|
"warehouse_no": "",
|
||||||
|
"warehouse_name": "",
|
||||||
|
"new_system_number": "",
|
||||||
|
"shop_name": "",
|
||||||
|
"shop_no": "",
|
||||||
|
"order_no": ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//limit改变
|
||||||
|
pageSizeChange(val, obj) {
|
||||||
|
obj.pageSize = val;
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
//页码变更
|
||||||
|
pageChange(val, obj) {
|
||||||
|
obj.page = 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("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCReturnReport", "", params);
|
||||||
|
console.log(res, '初始化res')
|
||||||
|
this.pageModel.pageTotal = res.attribute.total;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
> .main {
|
||||||
|
> .tableBox {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -40,12 +40,12 @@ module.exports = {
|
||||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||||
[process.env.VUE_APP_BASE_API]: {
|
[process.env.VUE_APP_BASE_API]: {
|
||||||
// target: `http://hzya.ufyct.com:9067/`,
|
// target: `http://hzya.ufyct.com:9067/`,
|
||||||
// target: `http://ufidahz.com.cn:9067/`,
|
target: `http://ufidahz.com.cn:9067/`,
|
||||||
// target: `http://127.0.0.1:9081/`,
|
// target: `http://127.0.0.1:9081/`,
|
||||||
// target: `http://192.168.2.78:9999`,
|
// target: `http://192.168.2.78:9999`,
|
||||||
// target: `http://192.168.2.85:9999`,
|
// target: `http://192.168.2.85:9999`,
|
||||||
// target: `http://192.168.2.78:8080`,
|
// target: `http://192.168.2.78:8080`,
|
||||||
target: `http://192.168.2.78:10086`,
|
// target: `http://192.168.2.78:10086`,
|
||||||
// target: `http://192.168.2.185:9999`,
|
// target: `http://192.168.2.185:9999`,
|
||||||
// target: `http://192.168.2.83:9999`,
|
// target: `http://192.168.2.83:9999`,
|
||||||
// target:'http://127.0.0.1:9999/',
|
// target:'http://127.0.0.1:9999/',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue