feat: npm install vuex & config vuex

ittpc/package-lock.json

@@ -12034,6 +12034,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.4.0.tgz",
+      "integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",

ittpc/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "element-ui": "^2.15.10",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

ittpc/src/main.js

@@ -9,12 +9,15 @@ import './elementui/index.css'
 
 Vue.use(ElementUI);
 
+import store from './store/store' 
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

ittpc/src/store/store.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: { // 存放数据 和data类似
+    userModulesView: 0 // 0 -- 查询；1 -- 记录
+  },
+  mutations: { // 用来修改state和getters里面的数据
+    setUserModulesView(state, data) {
+      state.userModulesView = data
+    }
+  }
+})

ittpc/src/views/modules/user/query.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="user-page-query" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
+          <el-form-item label="用户昵称">
+            <el-input v-model="searchForm.user" placeholder="模糊搜索"></el-input>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input v-model="searchForm.phone" placeholder="精确搜索"></el-input>
+          </el-form-item>
+          <el-form-item label="管理员">
+            <el-select v-model="searchForm.admin" placeholder="请选择">
+              <el-option label="是" value="1"></el-option>
+              <el-option label="否" value="0"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">查询</el-button>
+            <el-button>重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-table :data="tableData" border stripe style="width: 100%" size="small" max-height="700">
+          <el-table-column prop="name" label="用户昵称"></el-table-column>
+          <el-table-column prop="phone" label="用户手机号"></el-table-column>
+          <el-table-column prop="time" label="创建时间"></el-table-column>
+          <el-table-column prop="times" label="用户建档次数"></el-table-column>
+          <el-table-column prop="count" label="检测次数"></el-table-column>
+          <el-table-column prop="admin" label="是否为管理员"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="handleCancelAdmin(scope.row)">取消管理员</el-button>
+              <el-button type="text" size="small" @click="handleServeRecord(scope.row)">服务记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20 flexend" >
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          size="small"
+          >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        phone: '',
+        user: '',
+        admin: ''
+      },
+      tableData: [
+        {
+          name: '范一岚',
+          phone: '18626576880',
+          time: '1995-12-27',
+          times: 100,
+          count: 227,
+          admin: '是'
+        }
+      ],
+      currentPage: 1
+    };
+  },
+  mounted() {
+    console.log('query mounted');
+  },
+  methods: {
+    handleSizeChange () {
+
+    },
+    handleCurrentChange () {
+      
+    },
+    handleCancelAdmin () {
+      this.$confirm('确定取消管理员吗？').then( _=> {
+        console.log('ok');
+      }).catch(_ => {});
+    },
+    handleServeRecord (row) {
+      this.$store.commit('setUserModulesView', 1)
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.user-page-query {
+  width: 100%;
+  height: 100%;
+  .padding20 {
+    padding: 20px;
+  }
+  .flexend {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

ittpc/src/views/modules/user/recoed.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="user-page-record" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-page-header @back="goback" content="范一岚的服务记录"></el-page-header>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
+          <el-form-item label="服务时间">
+             <el-date-picker
+                v-model="date"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="预约来源">
+            <el-input v-model="searchForm.origin" placeholder="请输入预约来源"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">查询</el-button>
+            <el-button>重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-table :data="tableData" border stripe style="width: 100%" size="small" max-height="700">
+          <el-table-column prop="name" label="用户昵称"></el-table-column>
+          <el-table-column prop="phone" label="用户手机号"></el-table-column>
+          <el-table-column prop="time" label="创建时间"></el-table-column>
+          <el-table-column prop="times" label="用户建档次数"></el-table-column>
+          <el-table-column prop="count" label="检测次数"></el-table-column>
+          <el-table-column prop="admin" label="是否为管理员"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="handleCancelAdmin(scope.row)">取消管理员</el-button>
+              <el-button type="text" size="small" @click="handleServeRecord(scope.row)">服务记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20 flexend" >
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          size="small"
+          >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      date: '',
+      searchForm: {
+        origin: ''
+      },
+      tableData: [
+        {
+          name: '范一岚',
+          phone: '18626576880',
+          time: '1995-12-27',
+          times: 100,
+          count: 227,
+          admin: '是'
+        }
+      ],
+      currentPage: 1
+    };
+  },
+  mounted() {
+    console.log('record mounted');
+  },
+  methods: {
+    goback () {
+      this.$store.commit('setUserModulesView', 0)
+    },
+    handleSizeChange () {
+
+    },
+    handleCurrentChange () {
+      
+    },
+    handleCancelAdmin () {
+      this.$confirm('确定取消管理员吗？').then( _=> {
+        console.log('ok');
+      }).catch(_ => {});
+    },
+    handleServeRecord (row) {
+
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.user-page-record {
+  width: 100%;
+  height: 100%;
+  .padding20 {
+    padding: 20px;
+  }
+  .flexend {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

ittpc/src/views/modules/user/user.vue

@@ -1,88 +1,39 @@
 <template>
-  <div class="user-page" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
-    <el-row>
-      <el-col :span="24" class="padding20">
-        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
-          <el-form-item label="用户昵称">
-            <el-input v-model="searchForm.user" placeholder="模糊搜索"></el-input>
-          </el-form-item>
-          <el-form-item label="手机号">
-            <el-input v-model="searchForm.phone" placeholder="精确搜索"></el-input>
-          </el-form-item>
-          <el-form-item label="管理员">
-            <el-select v-model="searchForm.admin" placeholder="请选择">
-              <el-option label="是" value="1"></el-option>
-              <el-option label="否" value="0"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary">查询</el-button>
-            <el-button>重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="24" class="padding20">
-        <el-table :data="tableData" border stripe style="width: 100%" size="small" height="700">
-          <el-table-column prop="date" label="用户昵称"></el-table-column>
-          <el-table-column prop="name" label="用户手机号"></el-table-column>
-          <el-table-column prop="time" label="创建时间"></el-table-column>
-          <el-table-column prop="times" label="用户建档次数"></el-table-column>
-          <el-table-column prop="count" label="检测次数"></el-table-column>
-          <el-table-column prop="admin" label="是否为管理员"></el-table-column>
-          <el-table-column label="操作">
-            <template slot-scope="scope">
-              <el-button type="text" size="small">取消管理员</el-button>
-              <el-button type="text" size="small">服务记录</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="24" class="padding20 flexend" >
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[100, 200, 300, 400]"
-          :page-size="100"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="400"
-          size="small"
-          >
-        </el-pagination>
-      </el-col>
-    </el-row>
+  <div class="user-page">
+    <transition name="el-fade-in-linear">
+      <Query v-show="userModulesView == 0"></Query>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <Record v-show="userModulesView == 1"></Record>
+    </transition>
   </div>
 </template>
 
 <script>
+import Query from './query'
+import Record from './recoed'
+import { mapState } from 'vuex'
 export default {
   name: 'user',
   data() {
     return {
-      loading: false,
-      searchForm: {
-        phone: '',
-        user: '',
-        admin: ''
-      },
-      tableData: [],
-      currentPage: 1
+      
     };
   },
+  computed: {
+    ...mapState({
+      userModulesView: s => s.userModulesView
+    })
+  },
+  components: {
+    Query,
+    Record
+  },
   mounted() {
-
+    console.log('user mounted', this.userModulesView, this.$store);
   },
   methods: {
-    handleSizeChange () {
-
-    },
-    handleCurrentChange () {
-      
-    }
+    
   },
 };
 </script>
@@ -91,12 +42,5 @@ export default {
 .user-page {
   width: 100%;
   height: 100%;
-  .padding20 {
-    padding: 20px;
-  }
-  .flexend {
-    display: flex;
-    justify-content: flex-end;
-  }
 }
 </style>