列车管理

pages/resourceManagement/train/index.vue

+<template>
+  <div class="train">
+    <Row :gutter="16" style="margin-bottom:10px">
+      <Col span="4">
+        <Input v-model="keys" search placeholder="请输入车辆编号" clearable />
+      </Col>
+      <Col span="20" style="text-align:right">
+        <Button type="primary" @click="add">新增</Button>
+      </Col>
+    </Row>
+
+    <Table border :columns="columns" :data="projectList"></Table>
+    <Modal v-model="modal" :title="title" @on-ok="ok" @on-cancel="cancel" width="600">
+      <Form :model="formItem" :label-width="100">
+        <FormItem label="车辆编号">
+          <Input v-model="formItem.name" placeholder="请输入车辆编号"></Input>
+        </FormItem>
+        <FormItem label="车辆类型">
+          <Select v-model="formItem.name1" style="width:200px">
+            <Option value="1">CR2001</Option>
+            <Option value="2">CR200J</Option>
+            <Option value="3">CR2008</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="类型编号">
+          <Input v-model="formItem.a2" placeholder="请输入类型编号"></Input>
+        </FormItem>
+        <FormItem label="生产厂家">
+          <Select v-model="formItem.a" style="width:200px">
+            <Option value="1">长客</Option>
+            <Option value="2">唐厂</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="出厂时间">
+          <DatePicker
+            type="date"
+            placeholder="Select startTime"
+            v-model="formItem.startTime"
+            style="width: 408px"
+          ></DatePicker>
+        </FormItem>
+        <FormItem label="配属时间">
+          <DatePicker
+            type="date"
+            placeholder="Select startTime"
+            v-model="formItem.a1"
+            style="width: 408px"
+          ></DatePicker>
+        </FormItem>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      title: "",
+      formInline: {
+        name: "",
+      },
+      keys: "",
+      formItem: {
+        name: "",
+        name1: "",
+        startTime: "",
+        a2: "",
+        a: "",
+        a1: "",
+      },
+      modal: false,
+      modal1: false,
+      columns: [
+        {
+          title: "序号",
+          type: "index",
+          width: 60,
+          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: {
+                    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;
+      });
+    },
+  },
+  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: () => {
+          this.$Message.info("Clicked cancel");
+        },
+      });
+    },
+    ok() {
+      this.$Message.info("Clicked ok");
+    },
+    cancel() {
+      this.$Message.info("Clicked cancel");
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.train {
+  padding-top: 10px;
+  .ivu-form-item-content {
+    float: left;
+  }
+}
+</style>
\ No newline at end of file