Commit 69f1d930 authored by 仇晓婷's avatar 仇晓婷

供应商管理

parent cc818f1d
<template>
<div class="fax">
<Form ref="formInline" :model="formInline" inline>
<Row :gutter="16">
<Col span="4">
<FormItem prop="name" label="供应商名称">
<Input type="text" v-model="formInline.name" placeholder="请输入供应商名称"></Input>
</FormItem>
</Col>
<Col span="4">
<FormItem prop="name2" label="联系人">
<Input type="text" v-model="formInline.name2" placeholder="请输入联系人"></Input>
</FormItem>
</Col>
<Col span="4">
<FormItem prop="name3" label="产品名称">
<Input type="text" v-model="formInline.name3" placeholder="请输入产品名称"></Input>
</FormItem>
</Col>
<Col span="4">
<FormItem prop="date2" label="产品类型">
<Select v-model="formInline.city" placeholder="请选择" style="width:200px">
<Option value="1">类型一</Option>
<Option value="2">类型二</Option>
<Option value="3">类型三</Option>
</Select>
</FormItem>
</Col>
<Col span="4">
<FormItem>
<Button type="primary" @click="handleSubmit('formInline')">查询</Button>
</FormItem>
<FormItem>
<Button @click="reset('formInline')">重置</Button>
</FormItem>
<FormItem>
<Button type="primary" @click="add('formInline')">新建</Button>
</FormItem>
</Col>
</Row>
</Form>
<Table border :columns="columns" :data="data"></Table>
<Modal v-model="modal" :title="title" @on-ok="ok" @on-cancel="cancel" width="600">
<Form :model="formItem" :label-width="150">
<FormItem label="供应商名称">
<Input v-model="formItem.name" placeholder="请输入供应商名称"></Input>
</FormItem>
<FormItem label="供应商编号">
<Input v-model="formItem.a1" placeholder="请输入供应商编号"></Input>
</FormItem>
<FormItem label="联系人">
<Input v-model="formItem.a2" placeholder="请输入联系人"></Input>
</FormItem>
<FormItem label="联系电话">
<Input v-model="formItem.a3" placeholder="请输入联系电话"></Input>
</FormItem>
<FormItem label="公司地址">
<Input v-model="formItem.a4" placeholder="请输入公司地址"></Input>
</FormItem>
<FormItem label="公司邮箱">
<Input v-model="formItem.a5" placeholder="请输入公司邮箱"></Input>
</FormItem>
<FormItem label="产品类型">
<Input v-model="formItem.a6" placeholder="请输入产品类型"></Input>
</FormItem>
<FormItem label="产品名称">
<Input v-model="formItem.a7" placeholder="请输入产品名称"></Input>
</FormItem>
<FormItem label="产品型号">
<Input v-model="formItem.a8" placeholder="请输入产品型号"></Input>
</FormItem>
<FormItem label="备注">
<Input
v-model="formItem.a9"
type="textarea"
:autosize="{minRows: 2,maxRows: 5}"
placeholder="Enter something..."
></Input>
</FormItem>
</Form>
</Modal>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
title: "",
formInline: {
name: "",
company1: "",
},
formItem: {
name: "",
a1: "",
a2: "",
a3: "",
a4: "",
a5: "",
a6: "",
a7: "",
a8: "",
a9: "",
},
modal: false,
modal1: false,
columns: [
{
title: "序号",
type: "index",
width: 60,
align: "center",
},
{
title: "供应商名称",
key: "name",
},
{
title: "供应商编号",
key: "a1",
},
{
title: "联系人",
key: "a2",
},
{
title: "联系电话",
key: "a3",
},
{
title: "公司地址",
key: "a4",
},
{
title: "公司邮箱",
key: "a5",
},
{
title: "产品类型",
key: "a6",
},
{
title: "产品名称",
key: "a7",
},
{
title: "产品型号",
key: "a8",
},
{
title: "备注",
key: "a9",
},
{
title: "操作",
key: "action",
width: 120,
align: "center",
render: (h, params) => {
return h("div", [
h(
"op",
{
props: {
type: "detail",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"编辑"
),
h(
"op",
{
props: {
type: "detail",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.remover(params.index);
},
},
},
"删除"
),
]);
},
},
],
data: [
{
name: "北京福禄克",
a1: "01001",
a2: "张倩",
a3: "13288888888",
a4: "北京回龙观东大街",
a5: "",
a6: "工具工装",
a7: "万用表",
a8: "NCQ991",
a9: "",
},
{
name: "天津精工",
a1: "02001",
a2: "李杰",
a3: "13311111111",
a4: "天津保税区",
a5: "",
a6: "测量仪器",
a7: "卡尺",
a8: "K3000",
a9: "",
},
{
name: "大连天逸",
a1: "03001",
a2: "王强",
a3: "13922222222",
a4: "大连新城区",
a5: "",
a6: "监测设备",
a7: "手持式探伤",
a8: "TK991",
a9: "",
},
{
name: "陕西爱瑞德",
a1: "04001",
a2: "宋强",
a3: "15311111111",
a4: "西安雁引路",
a5: "",
a6: "检测设备",
a7: "游标卡尺",
a8: "YC200",
a9: "",
},
{
name: "梅思安成都办事处",
a1: "06001",
a2: "谢泽东",
a3: "15011111111",
a4: "成都新科广场",
a5: "",
a6: "安防设备",
a7: "安全帽",
a8: "MSA A 200",
a9: "",
},
{
name: "鑫烁电力",
a1: "07001",
a2: "司徒燎",
a3: "13422222222",
a4: "河北肃宁县",
a5: "",
a6: "高压工具",
a7: "高压接电线",
a8: "KC200",
a9: "",
},
],
};
},
methods: {
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success("Success!");
} else {
this.$Message.error("Fail!");
}
});
},
reset() {},
add() {
this.title = "新建";
this.modal = true;
},
edit(row) {
this.title = "编辑";
this.modal = true;
this.formItem=row
},
remover() {
this.$Modal.confirm({
title: "删除",
content: "<p>您确定删除此信息?</p>",
onOk: () => {
this.$Message.info("Clicked ok");
},
onCancel: () => {
this.$Message.info("Clicked cancel");
},
});
},
ok() {
this.$Message.info("Clicked ok");
},
cancel() {
this.$Message.info("Clicked cancel");
},
},
};
</script>
<style lang="less">
.fax {
padding-top: 10px;
.ivu-form-item-content {
float: left;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment