260 lines
8.0 KiB
Vue
260 lines
8.0 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
|
|
<el-card >
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
|
|
<el-form-item label="供应商名称" prop="supplierName">
|
|
<el-input
|
|
v-model="queryParams.supplierName"
|
|
placeholder="请输入供应商名称"
|
|
clearable
|
|
style="width: 240px;"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="联系人" prop="contactPerson">
|
|
<el-input
|
|
v-model="queryParams.contactPerson"
|
|
placeholder="请输入联系人"
|
|
clearable
|
|
style="width: 240px;"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="供应商电话" prop="contactPhone">
|
|
<el-input
|
|
v-model.number="queryParams.contactPhone"
|
|
placeholder="请输入供应商电话"
|
|
clearable
|
|
style="width: 240px;"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
<!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<!-- 列表-->
|
|
<el-card style="margin-top: 20px" >
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="suppliersAdd"
|
|
>新增供应商</el-button>
|
|
</el-col>
|
|
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
|
|
</el-row>
|
|
<el-table ref="tables"
|
|
v-loading="loading"
|
|
:data="suppliersList"
|
|
:default-sort="defaultSort">
|
|
<el-table-column label="id" align="center" prop="id"/>
|
|
<el-table-column label="供应商名称" align="center" prop="supplierName"/>
|
|
<el-table-column label="联系人" align="center" prop="contactPerson" />
|
|
<el-table-column label="联系方式" align="center" prop="contactPhone"/>
|
|
<el-table-column label="联系地址" align="center" prop="contactAddress"/>
|
|
<el-table-column label="备注信息" align="center" prop="remarks"/>
|
|
<el-table-column label="创建时间" align="center" prop="createTime"/>
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleUpdate(scope.row)"
|
|
>修改</el-button>
|
|
</template>
|
|
<!-- v-hasPermi="['']"-->
|
|
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.page"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
</el-card>
|
|
|
|
<!-- 新增/修改-->
|
|
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
|
|
<el-form ref="form" :model="suppliersForm" :rules="rules" label-width="120px">
|
|
<el-row :gutter="24">
|
|
<el-col :span="20">
|
|
<el-form-item label="供应商" prop="supplierName">
|
|
<el-input v-model="suppliersForm.supplierName" placeholder="供应商名称" maxlength="30"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="10">
|
|
<el-form-item label="联系人" prop="contactPerson">
|
|
<el-input v-model="suppliersForm.contactPerson" placeholder="联系人名称" maxlength="30"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item label="联系电话" prop="contactPhone">
|
|
<el-input v-model="suppliersForm.contactPhone" placeholder="联系电话" maxlength="30"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="20">
|
|
<el-form-item label="联系地址" prop="contactAddress">
|
|
<el-input v-model="suppliersForm.contactAddress" placeholder="联系地址" maxlength="30"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="20">
|
|
<el-form-item label="备注信息" prop="remarks">
|
|
<el-input type="textarea" v-model="suppliersForm.remarks" placeholder="备注信息" maxlength="30"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {getSuppliersListApi, insertSuppliersApi, updateSuppliersApi} from "@/api/oilConfig/oilSuppliers";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
suppliersList:[],
|
|
suppliersForm:{
|
|
id: null,
|
|
supplierName: '',
|
|
contactPerson: '',
|
|
contactPhone: '',
|
|
contactAddress: '',
|
|
remarks: '',
|
|
createTime:''
|
|
},
|
|
// 弹出框标题
|
|
title:'',
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
disableInput: false, // 默认不禁用
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 总条数
|
|
total: 0,
|
|
// 查询参数
|
|
queryParams: {
|
|
supplierName: '',
|
|
contactPerson: '',
|
|
contactPhone: '',
|
|
page:null,
|
|
pageSize:null
|
|
},
|
|
// 遮罩层
|
|
loading: false,
|
|
// 默认排序
|
|
defaultSort: {prop: 'createTime', order: 'descending'},
|
|
// 表单校验
|
|
rules: {
|
|
supplierName: [
|
|
{ required: true, message: "供应商名称不能为空", trigger: "blur" },
|
|
],
|
|
// contactPerson: [
|
|
// { required: true, message: "联系人不能为空", trigger: "blur" },
|
|
// ],
|
|
// contactPhone: [
|
|
// { required: true, message: "联系电话不能为空", trigger: "blur" },
|
|
// ],
|
|
// contactAddress: [
|
|
// { required: true, message: "供应商地址不能为空", trigger: "blur" },
|
|
// ]
|
|
}
|
|
}
|
|
|
|
},
|
|
async created() {
|
|
await this.getList();
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.loading = true;
|
|
getSuppliersListApi(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
|
this.suppliersList = response.data.records;
|
|
this.total = response.data.total;
|
|
// response.data.records.forEach(item=>{
|
|
// this.categoryOptions.push(item.category)
|
|
})
|
|
this.loading = false;
|
|
},
|
|
// 提交
|
|
submitForm: function() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
if (!this.suppliersForm.id) {
|
|
insertSuppliersApi(this.suppliersForm).then(response => {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
} else {
|
|
updateSuppliersApi(this.suppliersForm).then(response => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 新增
|
|
suppliersAdd() {
|
|
this.suppliersForm = {}
|
|
this.open = true
|
|
this.title = '新增供应商'
|
|
},
|
|
handleUpdate(data) {
|
|
this.suppliersForm = data
|
|
this.open = true
|
|
this.title = '新增供应商'
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 搜索按钮操作
|
|
handleQuery() {
|
|
this.queryParams.page = 1;
|
|
this.getList();
|
|
},
|
|
},
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.app-container{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #f6f8f9;
|
|
}
|
|
</style>
|