<template>
|
<div>
|
<div class="search-bar">
|
<div>
|
<label>申请时间:</label>
|
<el-date-picker
|
v-model="searchParams.range"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
<div>
|
<label>申请人:</label>
|
<el-input type="text" v-model="searchParams.applier" />
|
</div>
|
<div>
|
<el-button type="primary" @click="search" size="mini" icon="el-icon-search">搜索</el-button>
|
<el-button type="default" @click="reset" size="mini" icon="el-icon-refresh">重置</el-button>
|
</div>
|
</div>
|
<table-template
|
:data="tableData"
|
:total="total"
|
selection
|
@selection-change="handleSelectionChange"
|
@page-change="handlePageChange"
|
>
|
<template #toolbar>
|
<el-button type="primary" @click="dialogVisible = true" plain icon="el-icon-plus" size="mini">添加</el-button>
|
<el-button type="danger" :disabled="currentSelection.length === 0" @click="handleMultipleDelete" plain icon="el-icon-delete" size="mini">删除</el-button>
|
</template>
|
<template #columns>
|
<el-table-column
|
prop="itemlist"
|
label="采购清单">
|
</el-table-column>
|
<el-table-column
|
prop="total"
|
label="总价">
|
</el-table-column>
|
<el-table-column
|
prop="applytime"
|
label="申请时间">
|
</el-table-column>
|
<el-table-column
|
prop="applyer"
|
label="申请人">
|
</el-table-column>
|
<el-table-column
|
prop="operation"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</table-template>
|
<el-dialog :visible.sync="dialogVisible" width="600px">
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-form-item label="采购清单">
|
<el-input type="textarea" v-model="form.itemlist"></el-input>
|
</el-form-item>
|
<el-form-item label="总价">
|
<el-input type="text" v-model="form.total"></el-input>
|
</el-form-item>
|
<el-form-item label="申请人">
|
<el-input type="text" v-model="form.applyer" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="采购经理">
|
<el-select v-model="form.purchasemanager">
|
<el-option
|
v-for="(user, i) in userList"
|
:key="i"
|
:label="user.userName"
|
:value="user.userName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="财务">
|
<el-select v-model="form.financeName">
|
<el-option
|
v-for="(user, i) in userList"
|
:key="i"
|
:label="user.userName"
|
:value="user.userName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="出纳">
|
<el-select v-model="form.pay">
|
<el-option
|
v-for="(user, i) in userList"
|
:key="i"
|
:label="user.userName"
|
:value="user.userName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="总经理">
|
<el-select v-model="form.managerName">
|
<el-option
|
v-for="(user, i) in userList"
|
:key="i"
|
:label="user.userName"
|
:value="user.userName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="handleAdd">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import TableTemplate from "@/components/TableTemplate";
|
import {getPurchaseApplyList, addPurchase, deletePurchase, exportPurchase} from "./api/purchase.js";
|
import {listUser} from "@/api/system/user.js"
|
// itemlist: 笔
|
// total: 100
|
// applyer: admin
|
// purchasemanager: admin
|
// finance: admin
|
// pay: admin
|
// manager: admin
|
export default {
|
name: "leaveApply",
|
components: {
|
TableTemplate
|
},
|
data() {
|
return {
|
responseData: {},
|
dialogVisible: false,
|
form: {
|
itemlist: "",
|
total: "",
|
applyer: this.$store.state.user.name,
|
purchasemanager: "admin",
|
financeName: "admin",
|
pay: "admin",
|
managerName: "admin",
|
},
|
searchParams: {
|
range: [],
|
applier: "",
|
pageSize: 10,
|
pageNum: 1
|
},
|
currentSelection: [],
|
userList: []
|
};
|
},
|
computed: {
|
tableData() {
|
return this.responseData.rows || []
|
},
|
total() {
|
return this.responseData.total || 0
|
},
|
selectionIds() {
|
return this.currentSelection.map(item => item.id)
|
},
|
},
|
mounted() {
|
this.getPurchaseApplyListAndRender(this.searchParams);
|
listUser().then(res => {
|
console.log("获取用户", res);
|
this.userList = res.rows;
|
});
|
},
|
methods: {
|
handleSelectionChange(selection) {
|
console.log(selection);
|
this.currentSelection = selection;
|
},
|
getPurchaseApplyListAndRender(params) {
|
const {range = [], pageSize = 10, pageNum = 1, applier = ""} = params;
|
getPurchaseApplyList({
|
pageSize,
|
pageNum,
|
isAsc: "asc",
|
"params[beginApplyTime]": (range && range[0]) || "",
|
"params[endApplyTime]": (range && range[1]) || "",
|
applyer: applier
|
}).then(res => {
|
this.responseData = res;
|
});
|
},
|
handleAdd() {
|
addPurchase(this.form).then(res => {
|
this.$message.success("添加成功!");
|
this.dialogVisible = false;
|
this.getPurchaseApplyListAndRender(this.searchParams);
|
});
|
},
|
search() {
|
this.getPurchaseApplyListAndRender(this.searchParams);
|
},
|
reset() {
|
this.searchParams.applier = "";
|
this.searchParams.range = [];
|
this.getPurchaseApplyListAndRender(this.searchParams);
|
},
|
handleDelete(index, row) {
|
this.$confirm('确定删除吗？', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const {id} = row;
|
this.deleteByIdsAndRender(id)
|
});
|
},
|
handleMultipleDelete() {
|
this.$confirm(`确定删除选中的${this.currentSelection.length}条数据吗？`, {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const ids = this.selectionIds.join(",");
|
this.deleteByIdsAndRender(ids)
|
});
|
},
|
handleExport() {
|
this.$confirm('确定导出所有数据吗？', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const {applier, range} = this.searchParams;
|
const params = {
|
applyer: applier,
|
"params[beginApplyTime]": (range && range[0]) || "",
|
"params[endApplyTime]": (range && range[1]) || "",
|
isAsc: "asc"
|
};
|
exportPurchase(params)
|
});
|
},
|
deleteByIdsAndRender(ids) {
|
deletePurchase({
|
ids
|
}).then(() => {
|
this.$message.error("删除成功!")
|
this.getPurchaseApplyListAndRender(this.searchParams);
|
})
|
},
|
handlePageChange({pageNum, pageSize}) {
|
console.log(pageNum, pageSize);
|
this.searchParams.pageNum = pageNum;
|
this.searchParams.pageSize = pageSize;
|
this.getPurchaseApplyListAndRender(this.searchParams);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.search-bar {
|
display: flex;
|
margin-top: 8px;
|
margin-left: 8px;
|
}
|
.search-bar > *{
|
margin-right: 8px;
|
}
|
.search-bar .el-input {
|
display: inline-block;
|
width: 300px;
|
margin-right: 10px;
|
}
|
.search-bar label {
|
font-size: 14px;
|
color: #606266;
|
margin-right: 8px;
|
}
|
|
</style>
|
