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.
 
 
 
 

288 lines
8.4 KiB

<template>
<basic-container>
<div class="avue-crud">
<div class="avue-crud__header">
<!-- 头部左侧按钮模块 -->
<div class="avue-crud__left">
<el-button type="primary" icon="el-icon-plus" @click="handleTrade">确定</el-button>
</div>
</div>
<el-row>
<!-- 列表模块 -->
<el-table
ref="table"
v-loading="loading"
@selection-change="selectionChange"
:data="data"
:height="height"
style="width: 100%"
:border="option.border"
>
<el-table-column
type="selection"
v-if="option.selection"
width="55"
align="center"
></el-table-column>
<el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
<el-table-column v-if="option.index" label="序号" type="index" width="70" align="center">
</el-table-column>
<template v-for="(item, index) in option.column">
<!-- table字段 -->
<el-table-column
v-if="item.hide !== true"
:prop="item.prop"
:label="item.label"
:width="item.width"
:key="index"
>
</el-table-column>
</template>
<el-table-column prop="menu" label="转库存品数量" :width="220" align="center">
<template #="{ row }">
<!-- <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>-->
<!-- <el-input v-model="row.inventoryQuantity" @blur="handleNumberRange($event,row)" :disabled= !this.ids.includes(row.id) ></el-input>-->
<el-input v-model="row.quantity" disabled></el-input>
</template>
</el-table-column>
<!-- 操作栏模块 -->
<!-- <el-table-column prop="menu" label="操作" :width="220" align="center">-->
<!-- <template #="{row}">-->
<!-- <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>-->
<!-- <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>-->
<!-- <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</el-row>
<el-row>
<div class="avue-crud__pagination" style="width: 100%">
<!-- 分页模块 -->
<el-pagination
align="right"
background
@size-change="sizeChange"
@current-change="currentChange"
:current-page="page.currentPage"
:page-sizes="[30, 50, 80, 120]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
>
</el-pagination>
</div>
</el-row>
</div>
</basic-container>
</template>
<script>
import { getList, getDetail, add, update, remove } from '@/api/distribution/distributionParcelList';
import option from '@/option/distribution/distributionStockArticleFrom';
import { mapGetters } from 'vuex';
import { addStockRow } from '@/api/distribution/distributionStockArticle';
export default {
data() {
return {
height: 0,
// 弹框标题
title: '',
// 是否展示弹框
box: false,
// 是否显示查询
search: true,
// 加载中
loading: true,
// 是否为查看模式
view: false,
// 查询信息
query: {},
// 分页信息
page: {
currentPage: 1,
pageSize: 30,
total: 40,
},
// 表单数据
form: {},
// 选择行
selectionList: [],
// 表单配置
option: option,
// 表单列表
data: [],
};
},
mounted() {
this.init();
this.onLoad(this.page);
},
computed: {
...mapGetters(['permission']),
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(',');
},
},
methods: {
async handleTrade() {
if (this.ids.length > 0) {
let a = await addStockRow({ids: this.ids});
console.log('>>>>===', a.data);
// if (a.data.success) {
// this.onLoad(this.page);
// }
} else {
this.$message.warning('请选择需要转的包件信息!!!');
}
},
//数量校验
handleNumberRange(e, row) {
console.log('执行了2222', e, e.target.value, row);
if (e.target.value) {
e.target.value = e.target.value.replace(/[^\.\d]/g, ''); //替换掉与数字无关的字符(中英文与符号都会被替换掉,只留下数字,此时值类型为字符串)
if (e.target.value) {
//如果替换后还有值
e.target.value = parseInt(e.target.value); //把字符型转成整数型
}
if (e.target.value > row.quantity) {
this.$message.error('数量不能大于订单数');
e.target.value = row.quantity;
return;
}
}
},
init() {
this.height = this.setPx(document.body.clientHeight - 340);
},
searchHide() {
this.search = !this.search;
},
searchChange() {
this.onLoad(this.page);
},
searchReset() {
this.query = {};
this.page.currentPage = 1;
this.onLoad(this.page);
},
handleSubmit() {
if (!this.form.id) {
add(this.form).then(() => {
this.box = false;
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
} else {
update(this.form).then(() => {
this.box = false;
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
}
},
handleAdd() {
this.title = '新增';
this.form = {};
this.box = true;
},
handleEdit(row) {
this.title = '编辑';
this.box = true;
getDetail(row.id).then(res => {
this.form = res.data.data;
});
},
handleView(row) {
this.title = '查看';
this.view = true;
this.box = true;
getDetail(row.id).then(res => {
this.form = res.data.data;
});
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning('请选择至少一条数据');
return;
}
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.selectionClear();
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
},
rowDel(row) {
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
},
beforeClose(done) {
done();
this.form = {};
this.view = false;
},
selectionChange(list) {
this.selectionList = list;
console.log('<><><><><==', list);
},
selectionClear() {
this.selectionList = [];
this.$refs.table.clearSelection();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
this.onLoad(this.page);
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
this.onLoad(this.page);
},
onLoad(page, params = {}) {
this.loading = true;
this.query.stockArticleId = this.$route.query.id;
this.query.conditions = '1';
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
},
},
};
</script>