修程管理

pages/demo/RepairProcess/index.vue

+<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="name" label="修程公里数">
+            <Input type="text" v-model="formInline.name" placeholder="请输入修程公里数"></Input>
+          </FormItem>
+        </Col>
+
+        <Col span="4">
+          <FormItem prop="date2" label="修程时间">
+            <DatePicker
+              type="date"
+              placeholder="请选择"
+              style="width: 200px"
+              v-model="formInline.date2"
+            ></DatePicker>
+          </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="修程时间（天）">
+          <DatePicker
+            type="date"
+            placeholder="Select date"
+            v-model="formItem.a4"
+            style="width: 408px"
+          ></DatePicker>
+        </FormItem>
+        <FormItem label="检修内容">
+          <Input v-model="formItem.a5" placeholder="请输入检修内容"></Input>
+        </FormItem>
+
+        <FormItem label="是否有效">
+          <RadioGroup v-model="formItem.a6">
+            <Radio label="male">有</Radio>
+            <Radio label="female">无</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="备注">
+          <Input
+            v-model="formItem.a7"
+            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: "",
+      },
+      modal: false,
+      modal1: false,
+      columns: [
+        {
+          title: "序号",
+          type: "index",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "修程名称",
+          key: "name",
+        },
+        {
+          title: "涉及班组",
+          key: "a1",
+          width: 310,
+        },
+        {
+          title: "修程下限（公里）",
+          key: "a2",
+        },
+        {
+          title: "修程上限（公里）",
+          key: "a3",
+        },
+        {
+          title: "修程时间（天）",
+          key: "a4",
+        },
+
+        {
+          title: "检修内容",
+          key: "a5",
+          width: 340,
+        },
+        {
+          title: "备注",
+          key: "a6",
+          width: 340,
+        },
+
+        {
+          title: "是否有效",
+          key: "a7",
+          width: 100,
+        },
+        {
+          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.index);
+                    },
+                  },
+                },
+                "编辑"
+              ),
+              h(
+                "op",
+                {
+                  props: {
+                    type: "detail",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.remover(params.index);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+      data: [
+        {
+          name: "D1修",
+          a1: "车辆、机务、电务、乘务、整备队、主机厂",
+          a2: "3600",
+          a3: "4400",
+          a4: "7",
+          a5:
+            "D1（动力车及控制车机务设备由机务检修，拖车及控制车（不含机务设备）由车辆检修）",
+          a6: "动力车及控制车机务设备对应实施机车一级整备",
+          a7: "有",
+        },
+        {
+          name: "D2修",
+          a1: "车辆、机务、电务、乘务、整备队、主机厂",
+          a2: "27000",
+          a3: "33000",
+          a4: "365",
+          a5:
+            "D2（动力车及控制车机务设备由机务检修，拖车及控制车（不含机务设备）由车辆检修）",
+          a6: "动力车及控制车机务设备对应实施机车一级整备",
+          a7: "有",
+        },
+        {
+          name: "车辆月度专项修",
+          a1: "车辆",
+          a2: "180",
+          a3: "220",
+          a4: "30",
+          a5: "控制车非机务设备，拖车",
+          a6: "",
+          a7: "有",
+        },
+        {
+          name: "机务月度专项修",
+          a1: "机务",
+          a2: "3405",
+          a3: "7410",
+          a4: "90",
+          a5: "动力车及控制车机务设备",
+          a6: "",
+          a7: "有",
+        },
+        {
+          name: "电务月度专项修",
+          a1: "电务",
+          a2: "3600",
+          a3: "4400",
+          a4: "30",
+          a5: "车内通讯及数据收集，数据监测设备",
+          a6: "",
+          a7: "有",
+        },
+      ],
+    };
+  },
+  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() {
+      this.title = "编辑";
+      this.modal = true;
+    },
+    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