动车所

pages/demo/Fax/index.vue

 <template>
   <div class="fax">
     <Form ref="formInline" :model="formInline" inline>
-      <FormItem prop="name" label="名称">
-        <Input type="text" v-model="formInline.name" placeholder="请输入名称"></Input>
-      </FormItem>
-      <FormItem prop="company" label="出发单位">
-        <Select v-model="formInline.company" style="width:200px">
-          <Option value="beijing">New York</Option>
-          <Option value="shanghai">London</Option>
-          <Option value="shenzhen">Sydney</Option>
-        </Select>
-      </FormItem>
-      <FormItem prop="date1" label="出发时间">
-        <DatePicker type="date" style="width: 200px" placeholder="请选择" v-model="formInline.date1"></DatePicker>
-      </FormItem>
-      <FormItem prop="date2" label="接受时间">
-        <DatePicker type="date" placeholder="请选择" style="width: 200px" v-model="formInline.date2"></DatePicker>
-      </FormItem>
-      <FormItem prop="user" label="接受人">
-        <Input type="text" v-model="formInline.user" placeholder="请输入接受人"></Input>
-      </FormItem>
-      <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>
+      <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="company" label="出发单位">
+            <Select v-model="formInline.company" style="width:200px">
+              <Option value="beijing">New York</Option>
+              <Option value="shanghai">London</Option>
+              <Option value="shenzhen">Sydney</Option>
+            </Select>
+          </FormItem>
+        </Col>
+        <Col span="4">
+          <FormItem prop="date1" label="出发时间">
+            <DatePicker
+              type="date"
+              style="width: 200px"
+              placeholder="请选择"
+              v-model="formInline.date1"
+            ></DatePicker>
+          </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 prop="user" label="接受人">
+            <Input type="text" v-model="formInline.user" placeholder="请输入接受人"></Input>
+          </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="新建" @on-ok="ok" @on-cancel="cancel">
@@ -93,7 +117,7 @@ export default {
     return {
       formInline: {
         user: "",
-        password: ""
+        password: "",
       },
       formItem: {
         input: "",
@@ -104,7 +128,7 @@ export default {
         date: "",
         time: "",
         slider: [20, 50],
-        textarea: ""
+        textarea: "",
       },
       modal: false,
       modal1: false,
@@ -113,41 +137,41 @@ export default {
           title: "序号",
           type: "index",
           width: 60,
-          align: "center"
+          align: "center",
         },
         {
           title: "名称",
           key: "name",
-          width: 440
+          width: 440,
         },
         {
           title: "出发时间",
-          key: "startTime"
+          key: "startTime",
         },
         {
           title: "接收时间",
-          key: "a1"
+          key: "a1",
         },
         {
           title: "发出单位",
-          key: "a2"
+          key: "a2",
         },
         {
           title: "接收部门",
-          key: "a3"
+          key: "a3",
         },
         {
           title: "接收人",
-          key: "a4"
+          key: "a4",
         },
         {
           title: "主要内容",
           key: "a5",
-          width: 400
+          width: 400,
         },
         {
           title: "备注",
-          key: "a6"
+          key: "a6",
         },
         {
           title: "操作",
@@ -161,22 +185,22 @@ export default {
                 {
                   props: {
                     type: "detail",
-                    size: "small"
+                    size: "small",
                   },
                   style: {
-                    marginRight: "5px"
+                    marginRight: "5px",
                   },
                   on: {
                     click: () => {
                       this.show(params.index);
-                    }
-                  }
+                    },
+                  },
                 },
                 "查看详情"
-              )
+              ),
             ]);
-          }
-        }
+          },
+        },
       ],
       data: [
         {
@@ -187,7 +211,7 @@ export default {
           a3: "成都双流整备所",
           a4: "张三",
           a5: "成都局集团公司关于五月继续加开、重联部分客车等事宜",
-          a6: ""
+          a6: "",
         },
         {
           name: "成都局集团公司关于五月继续加开、重联部分客车等事宜的通知",
@@ -197,7 +221,7 @@ export default {
           a3: "成都双流整备所",
           a4: "张三",
           a5: "成都局集团公司关于五月继续加开、重联部分客车等事宜",
-          a6: ""
+          a6: "",
         },
         {
           name: "成都局集团公司关于五月继续加开、重联部分客车等事宜的通知",
@@ -207,7 +231,7 @@ export default {
           a3: "成都双流整备所",
           a4: "张三",
           a5: "成都局集团公司关于五月继续加开、重联部分客车等事宜",
-          a6: ""
+          a6: "",
         },
         {
           name: "成都局集团公司关于五月继续加开、重联部分客车等事宜的通知",
@@ -217,14 +241,14 @@ export default {
           a3: "成都双流整备所",
           a4: "张三",
           a5: "成都局集团公司关于五月继续加开、重联部分客车等事宜",
-          a6: ""
-        }
-      ]
+          a6: "",
+        },
+      ],
     };
   },
   methods: {
     handleSubmit(name) {
-      this.$refs[name].validate(valid => {
+      this.$refs[name].validate((valid) => {
         if (valid) {
           this.$Message.success("Success!");
         } else {
@@ -244,8 +268,8 @@ export default {
     },
     cancel() {
       this.$Message.info("Clicked cancel");
-    }
-  }
+    },
+  },
 };
 </script>