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.
269 lines
8.9 KiB
269 lines
8.9 KiB
3 months ago
|
<template>
|
||
|
|
<el-dialog :close-on-click-modal="false" :title="demandDialogTitle" :visible.sync="consumableVisible"
|
||
|
|
:append-to-body="true" width="70%" @close="handleCloseDetail" fullscreen>
|
||
|
|
<basic-container>
|
||
|
|
<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
|
||
|
|
:page.sync="page" :permission="permissionList" @row-del="rowDel" @search-change="searchChange"
|
||
|
|
@search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
|
||
|
|
@size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
|
||
|
|
@row-change="handleRowChange">
|
||
|
|
<!-- <template slot-scope="scope" slot="menu">
|
||
|
|
<el-button type="text" size="small" @click.stop="handleLog(scope.row)">记录
|
||
|
|
</el-button>
|
||
|
|
</template> -->
|
||
|
|
</avue-crud>
|
||
|
|
</basic-container>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { getList, recordList } from "@/api/firstOrder/list";
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
consumableVisible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
demandDialogTitle: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {},
|
||
|
|
selectionList: [],
|
||
|
|
query: {},
|
||
|
|
loading: true,
|
||
|
|
page: {
|
||
|
|
pageSize: 10,
|
||
|
|
currentPage: 1,
|
||
|
|
total: 0,
|
||
|
|
},
|
||
|
|
option: {
|
||
|
|
height: "auto",
|
||
|
|
calcHeight: 30,
|
||
|
|
tip: false,
|
||
|
|
searchShow: true,
|
||
|
|
searchMenuSpan: 12,
|
||
|
|
border: true,
|
||
|
|
index: true,
|
||
|
|
selection: true,
|
||
|
|
viewBtn: true,
|
||
|
|
dialogClickModal: false,
|
||
|
|
menu: true,
|
||
|
|
printBtn: false,
|
||
|
|
refreshBtn: false,
|
||
|
|
gridBtn: false,
|
||
|
|
gridBackgroundImage: false,
|
||
|
|
gridSpan: false,
|
||
|
|
filterBtn: false,
|
||
|
|
columnBtn: false,
|
||
|
|
menuAlign: "left",
|
||
|
|
searchMenuPosition: "right",
|
||
|
|
menuWidth: 80,
|
||
|
|
column: [
|
||
|
|
{
|
||
|
|
label: "存货编号",
|
||
|
|
prop: "materialCode",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "存货名称",
|
||
|
|
prop: "materialName",
|
||
|
|
search: true,
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "规格型号",
|
||
|
|
prop: "model",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "类别",
|
||
|
|
prop: "type",
|
||
|
|
search: true,
|
||
|
|
type: "select",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "center",
|
||
|
|
dicData: [
|
||
|
|
{
|
||
|
|
label: "易耗品",
|
||
|
|
value: "YH",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "耐用品",
|
||
|
|
value: "NY",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "计量单位",
|
||
|
|
prop: "unit",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "数量",
|
||
|
|
prop: "num",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "单价",
|
||
|
|
prop: "unitPrice",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "金额",
|
||
|
|
prop: "amount",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "描述",
|
||
|
|
prop: "remark",
|
||
|
|
headerAlign: "center",
|
||
|
|
align: "center",
|
||
|
|
formatter: (row, column) => {
|
||
|
|
const value = row.remark;
|
||
|
|
if (value === null || value === undefined || value === "") {
|
||
|
|
return "无";
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
data: [],
|
||
|
|
dialogLogVisible: false,
|
||
|
|
transactionType: "1",
|
||
|
|
tableData: [],
|
||
|
|
ckTable: [],
|
||
|
|
rkTable: [],
|
||
|
|
currentRow: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
permissionList() {
|
||
|
|
return {
|
||
|
|
addBtn: false,
|
||
|
|
viewBtn: false,
|
||
|
|
delBtn: false,
|
||
|
|
editBtn: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
ids() {
|
||
|
|
let ids = [];
|
||
|
|
this.selectionList.forEach((ele) => {
|
||
|
|
ids.push(ele.id);
|
||
|
|
});
|
||
|
|
return ids.join(",");
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.consumableVisible = this.consumableVisible
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
formatTime(row, column, cellValue) {
|
||
|
|
if (!cellValue) return '';
|
||
|
|
const date = new Date(cellValue);
|
||
|
|
const year = date.getFullYear();
|
||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
||
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
|
|
},
|
||
|
|
async handleLog(row) {
|
||
|
|
this.dialogLogVisible = true;
|
||
|
|
this.currentRow = row;
|
||
|
|
this.loadTransactionData();
|
||
|
|
},
|
||
|
|
|
||
|
|
handleTabClick() {
|
||
|
|
this.loadTransactionData();
|
||
|
|
|
||
|
|
},
|
||
|
|
async loadTransactionData() {
|
||
|
|
if (!this.currentRow) return;
|
||
|
|
const params = {
|
||
|
|
oneFromId: this.currentRow.id,
|
||
|
|
transactionType: this.transactionType
|
||
|
|
};
|
||
|
|
const pageNum = this.page.currentPage;
|
||
|
|
const pageSize = this.page.pageSize;
|
||
|
|
this.loading = true;
|
||
|
|
try {
|
||
|
|
const res = await recordList(
|
||
|
|
pageNum,
|
||
|
|
pageSize,
|
||
|
|
Object.assign({}, this.query, params)
|
||
|
|
);
|
||
|
|
if (this.transactionType === "1") {
|
||
|
|
this.ckTable = res.data.result.list;
|
||
|
|
} else {
|
||
|
|
this.rkTable = res.data.result.list;
|
||
|
|
}
|
||
|
|
this.tableData = res.data.result.list;
|
||
|
|
} catch (error) {
|
||
|
|
this.$message.error(error.message);
|
||
|
|
} finally {
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
searchReset() {
|
||
|
|
this.query = {};
|
||
|
|
this.onLoad(this.page);
|
||
|
|
},
|
||
|
|
searchChange(params, done) {
|
||
|
|
this.query = params;
|
||
|
|
this.page.currentPage = 1;
|
||
|
|
this.onLoad(this.page, params);
|
||
|
|
done();
|
||
|
|
},
|
||
|
|
//勾选当前
|
||
|
|
selectionChange(list) {
|
||
|
|
this.selectionList = list;
|
||
|
|
},
|
||
|
|
selectionClear() {
|
||
|
|
this.selectionList = [];
|
||
|
|
this.$refs.crud.toggleSelection();
|
||
|
|
},
|
||
|
|
handleRowChange(row, index, data) {
|
||
|
|
console.log('Selected data:', data);
|
||
|
|
},
|
||
|
|
currentChange(currentPage) {
|
||
|
|
this.handleRowChange()
|
||
|
|
this.page.currentPage = currentPage;
|
||
|
|
},
|
||
|
|
sizeChange(pageSize) {
|
||
|
|
this.page.pageSize = pageSize;
|
||
|
|
},
|
||
|
|
refreshChange() {
|
||
|
|
this.onLoad(this.page, this.query);
|
||
|
|
},
|
||
|
|
onLoad(page, params = {}) {
|
||
|
|
this.loading = true;
|
||
|
|
getList(
|
||
|
|
page.currentPage,
|
||
|
|
page.pageSize,
|
||
|
|
Object.assign(params, this.query)
|
||
|
|
).then((res) => {
|
||
|
|
// const data = res.data.data;
|
||
|
|
this.data = res.data.result.list;
|
||
|
|
this.loading = false;
|
||
|
|
this.page.total = res.data.result.total;
|
||
|
|
// this.selectionClear();
|
||
|
|
});
|
||
|
|
this.loading = false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|