<template>
|
<div class="app-container">
|
<div class="search">
|
<div>
|
<el-form
|
:model="queryParams"
|
ref="queryForm"
|
size="small"
|
:inline="true"
|
>
|
<el-form-item label="客户名称" prop="company">
|
<el-input
|
size="small"
|
placeholder="请输入"
|
clearable
|
v-model="queryParams.company"
|
@keyup.enter.native="getList"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="mini"
|
@click="getList"
|
>查 询</el-button
|
>
|
<el-button icon="el-icon-refresh" size="mini" @click="refresh"
|
>重 置</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div>
|
<el-button
|
size="small"
|
type="primary"
|
@click="openFormDia('add')"
|
icon="el-icon-plus"
|
>新增</el-button
|
>
|
</div>
|
</div>
|
<div>
|
<lims-table
|
:tableData="tableData"
|
:column="column"
|
:page="page"
|
:tableLoading="tableLoading"
|
></lims-table>
|
</div>
|
<el-dialog :title="formTitle" :visible.sync="addDia" width="450px">
|
<el-form
|
ref="userForm"
|
:model="user"
|
:rules="userRules"
|
label-position="right"
|
label-width="100px"
|
>
|
<el-form-item label="客户名称" prop="company">
|
<el-input v-model="user.company" size="small" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="客户单位EN" prop="companyEn">
|
<el-input v-model="user.companyEn" size="small" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="单位地址" prop="address">
|
<el-input
|
type="textarea"
|
v-model="user.address"
|
size="small"
|
clearable
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="单位地址EN" prop="addressEn">
|
<el-input
|
type="textarea"
|
v-model="user.addressEn"
|
size="small"
|
clearable
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="单位电话" prop="phone">
|
<el-input v-model="user.phone" size="small" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="加急额度" prop="num">
|
<el-input v-model="user.num" size="small" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="客户编号" prop="code2">
|
<el-input v-model="user.code2" size="small" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="工厂域" prop="code">
|
<el-input v-model="user.code" size="small" clearable></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="reset">取 消</el-button>
|
<el-button type="primary" @click="customAdd" :loading="loading"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import limsTable from "@/components/Table/lims-table.vue";
|
import {
|
addCustom,
|
selectCustomPageList,
|
upCustom,
|
} from "@/api/system/customer";
|
export default {
|
components: {
|
limsTable,
|
},
|
data() {
|
return {
|
queryParams: {
|
company: "",
|
},
|
tableData: [],
|
column: [
|
{ label: "客户名称", prop: "company" },
|
{ label: "客户单位EN", prop: "companyEn" },
|
{ label: "单位地址", prop: "address" },
|
{ label: "单位地址EN", prop: "addressEn" },
|
{ label: "单位电话", prop: "phone" },
|
{ label: "加急额度", prop: "num" },
|
{ label: "客户编号", prop: "code2" },
|
{ label: "工厂域", prop: "code" },
|
{
|
dataType: "action",
|
fixed: "right",
|
label: "操作",
|
operation: [
|
{
|
name: "编辑",
|
type: "text",
|
clickFun: (row) => {
|
this.openFormDia("edit", row);
|
},
|
},
|
],
|
},
|
],
|
page: {
|
total: 0,
|
size: 10,
|
current: 0,
|
},
|
tableLoading: false,
|
// 编辑客户弹框
|
operationType: "",
|
formTitle: "",
|
addDia: false,
|
addPower: true,
|
user: {},
|
userRules: {
|
company: [
|
{ required: true, message: "请输入客户名称", trigger: "blur" },
|
],
|
companyEn: [
|
{ required: true, message: "请输入客户名称EN", trigger: "blur" },
|
],
|
address: [
|
{ required: true, message: "请输入单位地址", trigger: "blur" },
|
],
|
addressEn: [
|
{ required: true, message: "请输单位地址EN", trigger: "blur" },
|
],
|
num: [{ required: true, message: "请输入加急额度", trigger: "blur" }],
|
code2: [{ required: true, message: "请输入客户编号", trigger: "blur" }],
|
},
|
loading: false,
|
//
|
};
|
},
|
mounted() {
|
this.getList();
|
},
|
methods: {
|
// 查询客户列表
|
getList() {
|
this.tableLoading = true;
|
selectCustomPageList({ ...this.queryParams, ...this.page })
|
.then((res) => {
|
this.tableLoading = false;
|
if (res.code === 200) {
|
this.tableData = res.data;
|
this.page.total = res.total;
|
}
|
})
|
.catch((err) => {
|
this.tableLoading = false;
|
});
|
},
|
// 重置table
|
refresh() {
|
this.queryParams.company = "";
|
this.getList();
|
},
|
openFormDia(type, row) {
|
this.addDia = true;
|
this.formTitle = type === "add" ? "新增客户" : "编辑客户";
|
this.operationType = type;
|
},
|
customAdd() {
|
this.$refs["userForm"].validate((valid) => {
|
if (valid) {
|
this.loading = true;
|
if (this.operationType === "add") {
|
addCustom(this.user)
|
.then((res) => {
|
this.loading = false;
|
if (res.code !== 200) return;
|
this.$message.success("新增成功");
|
this.getList();
|
this.reset();
|
})
|
.catch((err) => {
|
this.loading = false;
|
});
|
} else {
|
upCustom(this.user)
|
.then((res) => {
|
this.loading = false;
|
if (res.code !== 200) return;
|
this.$message.success("修改成功");
|
this.getList();
|
this.reset();
|
})
|
.catch((err) => {
|
this.loading = false;
|
});
|
}
|
}
|
});
|
},
|
reset() {
|
this.addDia = false;
|
this.resetForm("userForm");
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.search {
|
height: 46px;
|
display: flex;
|
justify-content: space-between;
|
}
|
</style>
|
