Commit 5f7fc421 authored by renjintao's avatar renjintao

列车管理 取消操作

parent 3ef40bd6
<template> <template>
<div class="train"> <div class="train">
<Row :gutter="16" style="margin-bottom:10px"> <Row :gutter="16" style="margin-bottom:10px">
<Col span="4"> <Col span="4">
<Input v-model="keys" search placeholder="请输入车辆编号" clearable /> <Input v-model="keys" search placeholder="请输入车辆编号" clearable />
</Col> </Col>
<Col span="20" style="text-align:right"> <Col span="20" style="text-align:right">
<Button type="primary" @click="add">新增</Button> <Button type="primary" @click="add">新增</Button>
</Col> </Col>
</Row> </Row>
<Table border :columns="columns" :data="projectList"></Table> <Table border :columns="columns" :data="projectList"></Table>
<div class="page-v"> <div class="page-v">
<Page :total="4" size="small" show-elevator show-sizer show-total :page-size="20" /> <Page :total="4" size="small" show-elevator show-sizer show-total :page-size="20" />
</div> </div>
<Modal v-model="modal" :title="title" @on-ok="ok" @on-cancel="cancel" width="600"> <Modal v-model="modal" :title="title" @on-ok="ok" @on-cancel="cancel" width="600">
<Form :model="formItem" :label-width="100"> <Form :model="formItem" :label-width="100">
<FormItem label="车辆编号"> <FormItem label="车辆编号">
<Input v-model="formItem.name" placeholder="请输入车辆编号"></Input> <Input v-model="formItem.name" placeholder="请输入车辆编号"></Input>
</FormItem> </FormItem>
<FormItem label="车辆类型"> <FormItem label="车辆类型">
<Select v-model="formItem.name1" style="width:200px"> <Select v-model="formItem.name1" style="width:200px">
<Option value="1">CR2001</Option> <Option value="1">CR2001</Option>
<Option value="2">CR200J</Option> <Option value="2">CR200J</Option>
<Option value="3">CR2008</Option> <Option value="3">CR2008</Option>
</Select> </Select>
</FormItem> </FormItem>
<FormItem label="类型编号"> <FormItem label="类型编号">
<Input v-model="formItem.a2" placeholder="请输入类型编号"></Input> <Input v-model="formItem.a2" placeholder="请输入类型编号"></Input>
</FormItem> </FormItem>
<FormItem label="生产厂家"> <FormItem label="生产厂家">
<Select v-model="formItem.a" style="width:200px"> <Select v-model="formItem.a" style="width:200px">
<Option value="1">长客</Option> <Option value="1">长客</Option>
<Option value="2">唐厂</Option> <Option value="2">唐厂</Option>
</Select> </Select>
</FormItem> </FormItem>
<FormItem label="出厂时间"> <FormItem label="出厂时间">
<DatePicker <DatePicker type="date" placeholder="Select startTime" v-model="formItem.startTime" style="width: 408px"></DatePicker>
type="date" </FormItem>
placeholder="Select startTime" <FormItem label="配属时间">
v-model="formItem.startTime" <DatePicker type="date" placeholder="Select startTime" v-model="formItem.a1" style="width: 408px"></DatePicker>
style="width: 408px" </FormItem>
></DatePicker> </Form>
</FormItem>
<FormItem label="配属时间">
<DatePicker
type="date"
placeholder="Select startTime"
v-model="formItem.a1"
style="width: 408px"
></DatePicker>
</FormItem>
</Form>
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "", name: "",
data() { data() {
return { return {
title: "", title: "",
formInline: { formInline: {
name: "", name: "",
}, },
keys: "", keys: "",
formItem: { formItem: {
name: "", name: "",
name1: "", name1: "",
startTime: "", startTime: "",
a2: "", a2: "",
a: "", a: "",
a1: "", a1: "",
}, },
modal: false, modal: false,
modal1: false, modal1: false,
columns: [ columns: [{
{ title: "序号",
title: "序号", type: "index",
type: "index", width: 60,
width: 60, align: "center",
align: "center", },
},
{
title: "车辆编号",
key: "name",
},
{
title: "车辆类型",
key: "name1",
},
{
title: "类型编号",
key: "a2",
},
{
title: "生产厂家",
key: "a",
},
{
title: "出厂时间",
key: "startTime",
},
{
title: "配属时间",
key: "a1",
},
{
title: "操作",
key: "action",
width: 120,
align: "center",
render: (h, params) => {
return h("div", [
h(
"op",
{ {
props: { title: "车辆编号",
type: "detail", key: "name",
size: "small", },
}, {
style: { title: "车辆类型",
marginRight: "5px", key: "name1",
}, },
on: { {
click: () => { title: "类型编号",
this.edit(params.row); key: "a2",
}, },
}, {
title: "生产厂家",
key: "a",
},
{
title: "出厂时间",
key: "startTime",
},
{
title: "配属时间",
key: "a1",
}, },
"编辑"
),
h(
"op",
{ {
props: { title: "操作",
type: "detail", key: "action",
size: "small", width: 120,
}, align: "center",
style: { render: (h, params) => {
marginRight: "5px", return h("div", [
}, h(
on: { "op", {
click: () => { props: {
this.remover(params.index); 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: "CR200J3001",
}, name1: "CR200J",
startTime: "2017-02-05",
a2: "003",
a: "长客",
a1: "2018-03-01",
},
{
name: "CR200J3003",
name1: "CR200J",
startTime: "2017-02-15",
a2: "003",
a: "长客",
a1: "2018-03-01",
},
{
name: "CR200J1009",
name1: "CR200J",
startTime: "2017-02-15",
a2: "001",
a: "唐厂",
a1: "2018-03-01",
},
{
name: "CR200J1021",
name1: "CR200J",
startTime: "2017-02-09",
a2: "001",
a: "唐厂",
a1: "2018-03-01",
},
],
};
},
computed: {
projectList() {
return this.data.filter((u) => {
return u.name.indexOf(this.keys) > -1;
});
}, },
], },
data: [ methods: {
{ handleSubmit(name) {
name: "CR200J3001", this.$refs[name].validate((valid) => {
name1: "CR200J", if (valid) {
startTime: "2017-02-05", this.$Message.success("Success!");
a2: "003", } else {
a: "长客", this.$Message.error("Fail!");
a1: "2018-03-01", }
});
}, },
{ reset() {},
name: "CR200J3003", add() {
name1: "CR200J", this.title = "新建";
startTime: "2017-02-15", this.modal = true;
a2: "003",
a: "长客",
a1: "2018-03-01",
}, },
{ edit(row) {
name: "CR200J1009", console.log(row);
name1: "CR200J", this.title = "编辑";
startTime: "2017-02-15", this.modal = true;
a2: "001", this.formItem.name = row.name;
a: "唐厂", this.formItem.startTime = row.startTime;
a1: "2018-03-01", this.formItem.a2 = row.a2;
this.formItem.a1 = row.a1;
this.formItem.name1 = "2";
if (row.a == "唐厂") {
this.formItem.a = "2";
} else {
this.formItem.a = "1";
}
}, },
{ remover() {
name: "CR200J1021", this.$Modal.confirm({
name1: "CR200J", title: "删除",
startTime: "2017-02-09", content: "<p>您确定删除此信息?</p>",
a2: "001", onOk: () => {
a: "唐厂", this.$Message.info("操作成功");
a1: "2018-03-01", },
onCancel: () => {
this.$Message.info("取消操作");
},
});
}, },
], ok() {
}; this.$Message.info("操作成功");
},
computed: {
projectList() {
return this.data.filter((u) => {
return u.name.indexOf(this.keys) > -1;
});
},
},
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) {
console.log(row);
this.title = "编辑";
this.modal = true;
this.formItem.name = row.name;
this.formItem.startTime = row.startTime;
this.formItem.a2 = row.a2;
this.formItem.a1 = row.a1;
this.formItem.name1 = "2";
if (row.a == "唐厂") {
this.formItem.a = "2";
} else {
this.formItem.a = "1";
}
},
remover() {
this.$Modal.confirm({
title: "删除",
content: "<p>您确定删除此信息?</p>",
onOk: () => {
this.$Message.info("Clicked ok");
}, },
onCancel: () => { cancel() {
this.$Message.info("Clicked cancel"); this.$Message.info("取消操作");
}, },
});
}, },
ok() {
this.$Message.info("Clicked ok");
},
cancel() {
this.$Message.info("Clicked cancel");
},
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
.train { .train {
padding-top: 10px; padding-top: 10px;
.ivu-form-item-content {
float: left; .ivu-form-item-content {
} float: left;
.page-v { }
text-align: right;
margin-top: 10px; .page-v {
} text-align: right;
margin-top: 10px;
}
} }
</style> </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