You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
490 lines
13 KiB
490 lines
13 KiB
<!--客户结算单表-->
|
|
<template>
|
|
<div class="cr-body-content">
|
|
<flexbox class="content-header">
|
|
<!-- <el-button
|
|
class="filter-item"
|
|
type="danger"
|
|
icon="el-icon-delete"
|
|
size="mini"
|
|
@click="handleDelete()"
|
|
>批量删除
|
|
</el-button> -->
|
|
<el-input
|
|
v-model="searchContent"
|
|
clearable
|
|
size="small"
|
|
placeholder="搜索..."
|
|
style="width: 200px"
|
|
class="search-container"
|
|
@keyup.enter.native="handleFilter"
|
|
/>
|
|
<el-button
|
|
size="mini"
|
|
type="success"
|
|
icon="el-icon-search"
|
|
@click="handleFilter"
|
|
>搜索
|
|
</el-button>
|
|
</flexbox>
|
|
<!--表格渲染-->
|
|
<el-table
|
|
ref="multipleTable"
|
|
|
|
class="cr-table"
|
|
:data="tableData"
|
|
:render-header="labelHead"
|
|
:span-method="cellMerge"
|
|
show-summary
|
|
size="small"
|
|
stripe
|
|
border
|
|
highlight-current-row
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column prop="id" label="类型" width="100" fixed>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="零件编号" width="150" fixed>
|
|
</el-table-column>
|
|
<el-table-column prop="desc" label="描述" width="180" fixed>
|
|
</el-table-column>
|
|
<el-table-column prop="amount2" label="总库存" width="90" fixed>
|
|
</el-table-column>
|
|
<el-table-column prop="amount1" label="总订单数" width="90" fixed>
|
|
</el-table-column>
|
|
<el-table-column prop="amount2" label="预计划合计" width="100">
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="item"
|
|
v-for="(item, index) in header"
|
|
:key="item"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span
|
|
v-for="(item2, index2) in scope.row.transportNumByDistance"
|
|
:key="index2"
|
|
>
|
|
<div v-if="index2 == index">
|
|
{{ scope.row.transportNumByDistance[index2].transportNum }}
|
|
</div>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="table-footer">
|
|
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
|
|
<pagination
|
|
v-show="totalCount > 0"
|
|
:total="totalCount"
|
|
:page.sync="page"
|
|
:limit.sync="listQuery.MaxResultCount"
|
|
@pagination="getList"
|
|
/>
|
|
<!-- 抽屉控件 -->
|
|
<el-drawer
|
|
title="信息详细页"
|
|
size="75%"
|
|
direction="rtl"
|
|
:visible.sync="drawer"
|
|
:before-close="handleDrawerClose"
|
|
>
|
|
</el-drawer>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
|
import permission from "@/directive/permission/index.js";
|
|
import moment from "moment";
|
|
|
|
export default {
|
|
name: "SecondaryActuralAdjustmentReport",
|
|
components: { Pagination },
|
|
directives: { permission },
|
|
filters: {
|
|
IsCustomerSignFilter(status) {
|
|
//翻译是否签字
|
|
const statusMap = {
|
|
true: "是",
|
|
false: "否",
|
|
};
|
|
return statusMap[status];
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
crmType: "deliveGoods",
|
|
header: [
|
|
"2/1",
|
|
"2/2",
|
|
"2/3",
|
|
"2/4",
|
|
"2/5",
|
|
"2/6",
|
|
"2/7",
|
|
"2/8",
|
|
"2/9",
|
|
"2/10",
|
|
"2/11",
|
|
"2/12",
|
|
], //动态列头header
|
|
tableData: [
|
|
{
|
|
id: "保险杠",
|
|
name: "A1568804340 9999",
|
|
desc: "V205 AMG 前保蒙皮_无PTS",
|
|
amount1: "234",
|
|
amount2: "32",
|
|
amount3: 10,
|
|
},
|
|
{
|
|
id: "保险杠",
|
|
name: "A2538850001 9999",
|
|
amount1: "165",
|
|
desc: "V205 AMG 前保蒙皮_PTS",
|
|
amount2: "443",
|
|
amount3: 12,
|
|
},
|
|
{
|
|
id: "保险杠",
|
|
name: "A2538851101 9999",
|
|
desc: "V205 AMG 前保蒙皮_PTS&Camera（ 高配）",
|
|
amount1: "324",
|
|
amount2: "19",
|
|
amount3: 9,
|
|
},
|
|
{
|
|
id: "小件",
|
|
name: "A1568859400 9999",
|
|
desc: "X156 MOPF AMG 前保蒙皮",
|
|
amount1: "621",
|
|
amount2: "22",
|
|
amount3: 17,
|
|
},
|
|
{
|
|
id: "小件",
|
|
name: "A1568803740 9999",
|
|
desc: "X156 AMG 前保蒙皮_PTS(高配)",
|
|
amount1: "539",
|
|
amount2: "41",
|
|
amount3: 15,
|
|
},
|
|
],
|
|
mergerItems: [
|
|
{ columnIndex: 0, spanArr: [], pos: 0, prop: "id" },
|
|
{ columnIndex: 1, spanArr: [], pos: 0, prop: "name" },
|
|
],
|
|
rules: {
|
|
//前端定义的规则，后端也有验证
|
|
erpMaterialCode: [
|
|
{ required: true, message: "必须输入！", trigger: "blur" },
|
|
],
|
|
},
|
|
customerInfos: [],
|
|
searchContent: "", // 输入内容
|
|
drawer: false,
|
|
form: {
|
|
dicDetailID: "",
|
|
customerId: "",
|
|
projectId: "",
|
|
},
|
|
list: null,
|
|
totalCount: 0,
|
|
listLoading: true,
|
|
formLoading: false,
|
|
// 高级搜索
|
|
filterObj: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
listQuery: {
|
|
Filters: [
|
|
{
|
|
logic: 0,
|
|
column: "Enabled",
|
|
action: 0,
|
|
value: "true",
|
|
}, //默认查询可用的
|
|
],
|
|
//OrgID:"",
|
|
SkipCount: 0,
|
|
MaxResultCount: 15,
|
|
},
|
|
page: 1,
|
|
dialogFormVisible: false,
|
|
multipleSelection: [],
|
|
formTitle: "",
|
|
drawer: false,
|
|
showExcelImport: false,
|
|
tableHeight: document.documentElement.clientHeight - 260,
|
|
isEdit: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
var self = this;
|
|
window.onresize = function () {
|
|
var offsetHei = document.documentElement.clientHeight;
|
|
self.tableHeight = offsetHei - 190;
|
|
};
|
|
},
|
|
created() {
|
|
//this.getList();
|
|
this.getSpanArr(this.tableData, this.mergerItems);
|
|
},
|
|
computed: {
|
|
/** 列表字段 */
|
|
getDefaultField() {
|
|
var tempsTabs = [];
|
|
tempsTabs.push({
|
|
label: "预发货计划单号",
|
|
prop: "customCode",
|
|
width: 150,
|
|
});
|
|
tempsTabs.push({
|
|
label: "预计发货日期",
|
|
prop: "beginTime",
|
|
width: 110,
|
|
formType: "datetime",
|
|
});
|
|
tempsTabs.push({ label: "车次", prop: "customName", width: 130 });
|
|
tempsTabs.push({ label: "零件类型", prop: "documentStatus", width: 55 });
|
|
tempsTabs.push({ label: "发货类型", prop: "remark", width: 250 });
|
|
return tempsTabs;
|
|
},
|
|
},
|
|
methods: {
|
|
// labelHead(h, { column, index }) {
|
|
// //动态表头渲染
|
|
// //let l = column.label.length;
|
|
// //let f = 12; //每个字大小,其实是每个字的比例值,大概会比字体大小打差不多大
|
|
// //column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
|
|
// //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
|
|
// //h即为cerateElement的简写，具体可看vue官方文档
|
|
// return h("span", { class: "table-head", style: { width: "100%" } }, [
|
|
// column.label,
|
|
// ]);
|
|
// },
|
|
|
|
// labelHead(h, { column }) {
|
|
// // h即为cerateElement的简写，具体可看vue官方文档
|
|
// return h("div", [
|
|
// h("span", column.label),
|
|
// h("i", {
|
|
// class: "el-icon-question",
|
|
// }),
|
|
// ]);
|
|
// },
|
|
|
|
labelHead(h, { column }) {
|
|
return h("div", [
|
|
h("span", column.label),
|
|
h(
|
|
"el-tooltip",
|
|
{
|
|
props: {
|
|
effect: "dark",
|
|
content: "这是一个提示",
|
|
placement: "top",
|
|
},
|
|
},
|
|
[
|
|
h("i", {
|
|
class: "el-icon-question",
|
|
style: "color:#409eff;margin-left:5px;",
|
|
}),
|
|
]
|
|
),
|
|
]);
|
|
},
|
|
cellMerge({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 0 || columnIndex === 1) {
|
|
//这里判断第几列需要合并
|
|
let item = this.mergerItems.find(
|
|
(item) => item.columnIndex === columnIndex
|
|
);
|
|
const _row = item.spanArr[rowIndex];
|
|
const _col = _row > 0 ? 1 : 0;
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col,
|
|
};
|
|
}
|
|
},
|
|
getSpanArr(data, array) {
|
|
//循环数据处理
|
|
for (let n = 0; n < array.length; n++) {
|
|
array[n].spanArr = []; //数据清空(重新调此方法的时候需要清空上一次的数据)
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (i === 0) {
|
|
array[n].spanArr.push(1);
|
|
array[n].pos = 0;
|
|
} else {
|
|
// 判断当前元素与上一个元素是否相同
|
|
if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
|
|
array[n].spanArr[array[n].pos] += 1;
|
|
array[n].spanArr.push(0);
|
|
} else {
|
|
array[n].spanArr.push(1);
|
|
array[n].pos = i;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//抽屉
|
|
handleDrawerOpen(param) {
|
|
this.drawer = true;
|
|
var parentId = param.id; //主键id
|
|
this.customerInfos = [
|
|
{
|
|
ParentId: parentId,
|
|
},
|
|
];
|
|
},
|
|
handleDrawerClose(done) {
|
|
done();
|
|
},
|
|
/** 格式化字段 */
|
|
fieldFormatter(row, column) {
|
|
if (column.property == "beginTime" || column.property == "endTime") {
|
|
var date = row[column.property];
|
|
if (date == undefined) {
|
|
return "";
|
|
}
|
|
return moment(date).format("YYYY-MM-DD HH:mm:ss");
|
|
}
|
|
// if(column.property=="documentType"){
|
|
// return { 4: "NPA", 5: "PICK", 5: "PICK", 6: "ISS", 7: "TR", 8: "CYC", 201: "AdvanceShippingNotice", 202: "ArrivalNotice", 203: "Receipt" }[row[column.property]];
|
|
// }
|
|
if (column.property == "documentStatus") {
|
|
return { 0: "新建", 1: "进行中", 5: "完成", 9: "取消" }[
|
|
row[column.property]
|
|
];
|
|
}
|
|
return row[column.property] || "--";
|
|
},
|
|
importExcelData() {
|
|
//关闭导入窗体时调用
|
|
this.showExcelImport = false;
|
|
this.getList();
|
|
},
|
|
getList() {
|
|
this.listLoading = true;
|
|
this.listQuery.SkipCount = (this.page - 1) * 10;
|
|
this.$axios
|
|
.posts("/api/settleaccount/sec-act-adjust-report/list", this.listQuery)
|
|
.then((response) => {
|
|
this.list = response.items;
|
|
//alert(JSON.stringify(response.Items))
|
|
this.totalCount = response.totalCount;
|
|
setTimeout(() => {
|
|
//大数据量加载时
|
|
this.listLoading = false;
|
|
}, 500);
|
|
})
|
|
.catch(() => {
|
|
this.listLoading = false;
|
|
});
|
|
},
|
|
fetchData(id) {
|
|
//循环动态
|
|
this.$axios
|
|
.gets("/api/settleaccount/sec-act-adjust-report/" + id)
|
|
.then((response) => {
|
|
this.form = response;
|
|
});
|
|
},
|
|
/** 筛选操作 */
|
|
handleFilter() {
|
|
this.page = 1;
|
|
this.getList();
|
|
this.listQuery.Filters = [];
|
|
if (this.searchContent != "") {
|
|
var column = "documentNumber";
|
|
let filter = {
|
|
logic: 0,
|
|
column: column,
|
|
action: 0,
|
|
value: this.searchContent,
|
|
};
|
|
this.listQuery.Filters.push(filter);
|
|
}
|
|
this.getList();
|
|
},
|
|
resetQuery() {},
|
|
handleDelete(row) {
|
|
//批量删除
|
|
var params = [];
|
|
let myalert = ""; //声明变量，其变量必须在此声明后使用
|
|
if (row) {
|
|
//单行
|
|
params.push(row.id);
|
|
myalert = row.name;
|
|
} else {
|
|
//多选
|
|
this.multipleSelection.forEach((element) => {
|
|
let id = element.id;
|
|
params.push(id);
|
|
});
|
|
myalert = "选中项";
|
|
}
|
|
this.$confirm("是否删除" + myalert + "?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.$axios
|
|
.posts("/api/settleaccount/sec-act-adjust-report/delete", params)
|
|
.then((response) => {
|
|
const index = this.list.indexOf(row);
|
|
this.$notify({
|
|
title: "成功",
|
|
message: "删除成功",
|
|
type: "success",
|
|
duration: 2000,
|
|
});
|
|
this.getList();
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
sortChange(data) {
|
|
const { prop, order } = data;
|
|
if (!prop || !order) {
|
|
this.handleFilter();
|
|
return;
|
|
}
|
|
this.listQuery.Sorting = prop + " " + order;
|
|
this.handleFilter();
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
/** 通过回调控制style */
|
|
cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
return { textAlign: "left" };
|
|
},
|
|
handleRowClick(row, column, event) {
|
|
this.$refs.multipleTable.clearSelection();
|
|
this.$refs.multipleTable.toggleRowSelection(row);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../styles/crmtable.scss";
|
|
</style>
|
|
|
|
|