合并

src/assets/css/main.css

@@ -23,9 +23,9 @@ a {
 
 .content-box {
     position: absolute;
-    left: 250px;
+    left: 200px;
     right: 0;
-    top: 70px;
+    top: 60px;
     bottom: 0;
     padding-bottom: 30px;
     -webkit-transition: left .3s ease-in-out;
@@ -174,4 +174,4 @@ a {
 
 .v-note-wrapper .v-note-panel {
     min-height: 500px;
-}
+}

src/components/common/Header.vue

@@ -98,7 +98,7 @@ export default {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  height: 70px;
+  height: 60px;
   font-size: 22px;
   color: #fff;
 }
@@ -106,12 +106,12 @@ export default {
   float: left;
   padding: 0 21px;
   cursor: pointer;
-  line-height: 70px;
+  line-height: 60px;
 }
 .header .logo {
   float: left;
   width: 250px;
-  line-height: 70px;
+  line-height: 60px;
 }
 .header-right {
   float: right;
@@ -119,7 +119,7 @@ export default {
 }
 .header-user-con {
   display: flex;
-  height: 70px;
+  height: 60px;
   align-items: center;
 }
 .btn-fullscreen {

src/components/common/Home copy.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="wrapper">
+    <v-head></v-head>
+    <v-sidebar></v-sidebar>
+    <div class="content-box" :class="{ 'content-collapse': collapse }">
+      <v-tags></v-tags>
+      <div class="content">
+        <transition name="move" mode="out-in">
+          <keep-alive :include="tagsList">
+            <router-view></router-view>
+          </keep-alive>
+        </transition>
+        <el-backtop target=".content"></el-backtop>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import vHead from './Header.vue';
+import vSidebar from './Sidebar.vue';
+import vTags from './Tags.vue';
+import bus from './bus';
+export default {
+  data() {
+    return {
+      tagsList: [],
+      collapse: false,
+    };
+  },
+  components: {
+    vHead,
+    vSidebar,
+    vTags,
+  },
+  created() {
+    bus.$on('collapse-content', msg => {
+      this.collapse = msg;
+    });
+
+    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+    bus.$on('tags', msg => {
+      let arr = [];
+      for (let i = 0, len = msg.length; i < len; i++) {
+        msg[i].name && arr.push(msg[i].name);
+      }
+      this.tagsList = arr;
+    });
+  },
+};
+</script>

src/components/common/Home.vue

@@ -1,19 +1,27 @@
 <template>
-  <div class="wrapper">
-    <v-head></v-head>
-    <v-sidebar></v-sidebar>
-    <div class="content-box" :class="{ 'content-collapse': collapse }">
-      <v-tags></v-tags>
-      <div class="content">
-        <transition name="move" mode="out-in">
-          <keep-alive :include="tagsList">
-            <router-view></router-view>
-          </keep-alive>
-        </transition>
-        <el-backtop target=".content"></el-backtop>
-      </div>
-    </div>
-  </div>
+  <el-container>
+    <el-header style="padding:0;">
+      <v-head></v-head>
+    </el-header>
+    <el-container>
+      <el-aside width="200px">
+        <v-sidebar></v-sidebar>
+      </el-aside>
+      <el-main>
+        <div class="content-box" :class="{ 'content-collapse': collapse }">
+          <v-tags></v-tags>
+          <div class="content">
+            <transition name="move" mode="out-in">
+              <keep-alive :include="tagsList">
+                <router-view></router-view>
+              </keep-alive>
+            </transition>
+            <el-backtop target=".content"></el-backtop>
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
 <script>

src/components/common/Sidebar.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="sidebar">
-    <!-- background-color="#07c4a8" text-color="#666" active-text-color="#fff" -->
     <el-menu
       class="sidebar-el-menu"
       :default-active="onRoutes"
@@ -112,7 +111,7 @@ export default {
   display: block;
   position: absolute;
   left: 0;
-  top: 70px;
+  top: 60px;
   bottom: 0;
   overflow-y: scroll;
 }
@@ -120,7 +119,7 @@ export default {
   width: 0;
 }
 .sidebar-el-menu:not(.el-menu--collapse) {
-  width: 250px;
+  width: 200px;
 }
 .sidebar > ul {
   height: 100%;

src/views/repair/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <div id="Dashboard">
+    <el-row>
+      <el-col :span="24" class="main">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" class="container">
+          <el-col :span="24" class="add">
+            <el-button type="primary" size="mini" @click="dialog = true">添加</el-button>
+          </el-col>
+          <dataTable :fields="fields" :data="list" :opera="opera" :total="total" @query="search" @edit="toEdit" @delete="toDelete" :toFormat="toFormat">
+            <template #options="{item}">
+              <template v-if="item.prop === 'uid'">
+                <el-option v-for="(i, index) in carList" :key="index" :label="i.name" :value="i.id"></el-option>
+              </template>
+            </template>
+          </dataTable>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog :visible.sync="dialog" title="维修信息" @close="toClose" width="60%">
+      <data-form :data="form" :fields="formfields" :rules="{}" @save="turnSave">
+        <template #radios="{item}">
+          <template v-if="item.model === 'type'">
+            <el-radio label="Km常规保养口">Km常规保养口</el-radio>
+            <el-radio label="一般维修口">一般维修口</el-radio>
+            <el-radio label="事故车口">事故车口</el-radio>
+            <el-radio label="洗车口">洗车口</el-radio>
+            <el-radio label="其他口">其他口</el-radio>
+          </template>
+        </template>
+        <template #options="{item}">
+          <template v-if="item.model === 'uid'">
+            <el-option v-for="(i, index) in carList" :key="index" :label="i.name" :value="i.id"></el-option>
+          </template>
+        </template>
+      </data-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import dataTable from '@/components/frame/filter-page-table.vue';
+import dataForm from '@/components/frame/form.vue';
+import breadcrumb from '@c/common/breadcrumb.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+import bus from '@/components/common/bus';
+const { mapActions: repair } = createNamespacedHelpers('repair');
+const { mapActions: car } = createNamespacedHelpers('car');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {
+    breadcrumb,
+    dataTable,
+    dataForm,
+  },
+  data: function() {
+    return {
+      fields: [
+        { label: '客户姓名', prop: 'uid', filter: 'select', format: 'emit' },
+        { label: '维修项目名', prop: 'name' },
+        { label: '类型', prop: 'type' },
+        { label: '配件', prop: 'parts' },
+        { label: '工时', prop: 'jobdate' },
+        { label: '合计', prop: 'totalmoney' },
+      ],
+      opera: [
+        { label: '修改', method: 'edit' },
+        { label: '删除', method: 'delete' },
+      ],
+      list: [],
+      total: 0,
+      dialog: false,
+      form: {},
+      formfields: [
+        { label: '客户姓名', model: 'uid', type: 'select' },
+        { label: '维修项目名', model: 'name' },
+        { label: '类型', model: 'type', type: 'radio' },
+        { label: '配件', model: 'parts' },
+        { label: '工时', model: 'jobdate' },
+        { label: '合计', model: 'totalmoney' },
+      ],
+      // 客户列表
+      carList: [],
+    };
+  },
+  created() {
+    this.searchother();
+    this.search();
+  },
+  methods: {
+    ...repair(['query', 'create', 'delete', 'update']),
+    ...car({ carquery: 'query' }),
+    // 查询列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      } else {
+        this.$message({
+          message: res.errmsg,
+          type: 'error',
+        });
+      }
+    },
+    // 修改
+    toEdit({ data }) {
+      this.$set(this, `form`, data);
+      this.dialog = true;
+    },
+    // 删除
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '创建成功',
+          type: 'success',
+        });
+        this.toClose();
+      } else {
+        this.$message({
+          message: res.errmsg,
+          type: 'error',
+        });
+      }
+    },
+    // 取消添加
+    toClose() {
+      this.form = {};
+      this.dialog = false;
+      this.search();
+    },
+    // 保存
+    async turnSave({ data }) {
+      if (data.id) {
+        const res = await this.update(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      } else {
+        const res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '创建成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      }
+    },
+    // 查询客户
+    async searchother() {
+      const res = await this.carquery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `carList`, res.data);
+      }
+    },
+    // 过滤客户
+    toFormat({ model, value }) {
+      if (model == 'uid') {
+        let arr = this.carList.find(i => i.id === value);
+        if (arr) return arr.name;
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.add {
+  text-align: right;
+  padding: 10px 0;
+}
+</style>