update

components/form.md

@@ -13,6 +13,7 @@
 |placeholder|String|`-`|否|占位,正常用,只是个透传|
 |options|object|`-`|否|标签的属性设置,例如:textarea 需要显示剩余字数,或者input限制长度,都往这里写,key-value形式(键值对,json的基本了解,不知道百度,具体属性看你具体用那个组件,那个组件有什么属性,瞎写不一定好使)|
 |custom|Boolean|`-`|否|是否使用自定义插槽|
+|tip|String|`-`|否|提示语,例如:请输入11位电话号码|
 
 ###### rules
 > object类型 非必填 校验规则,不会找el-form的例子,不过使用的async-validator这个依赖为基础,会写这个也可以~~(那就厉害了,反正我是不行)~~

components/form.vue

@@ -5,52 +5,54 @@
         <template v-if="!loading">
           <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
             <template v-if="!item.custom">
-              <template v-if="item.type === `date` || item.type === `datetime`">
-                <el-date-picker v-model="form[item.model]" :type="item.type" placeholder="选择择" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
-                </el-date-picker>
-              </template>
-              <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
-                <el-date-picker
-                  v-model="form[item.model]"
-                  :type="item.type"
-                  placeholder="选择择"
-                  :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
-                  :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
-                >
-                </el-date-picker>
-              </template>
-              <template v-else-if="item.type === 'radio'">
-                <el-radio-group v-model="form[item.model]" size="mini" v-bind="item.options">
-                  <slot name="radios" v-bind="{ item, form, fieldChange }"></slot>
-                </el-radio-group>
-              </template>
-              <template v-else-if="item.type === 'checkbox'">
-                <el-checkbox-group v-model="form[item.model]" v-bind="item.options">
-                  <slot name="checkboxs" v-bind="{ item, form, fieldChange }"></slot>
-                </el-checkbox-group>
-              </template>
-              <template v-else-if="item.type === 'select'">
-                <el-select v-model="form[item.model]" v-bind="item.options" filterable>
-                  <slot name="options" v-bind="{ item, form, fieldChange }"></slot>
-                </el-select>
-              </template>
-              <template v-else-if="item.type === 'textarea'">
-                <el-input v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
-              </template>
-              <template v-else-if="item.type === 'editor'">
-                <wang-editor v-model="form[item.model]"></wang-editor>
-              </template>
-              <template v-else-if="item.type === 'text'">
-                {{ form[item.model] }}
-              </template>
-              <template v-else>
-                <el-input
-                  v-model="form[item.model]"
-                  :type="getField('type', item)"
-                  :placeholder="getField('placeholder', item)"
-                  v-bind="item.options"
-                ></el-input>
-              </template>
+              <el-tooltip class="item" effect="dark" :content="item.tip" placement="top-start" :disabled="!item.tip">
+                <template v-if="item.type === `date` || item.type === `datetime`">
+                  <el-date-picker v-model="form[item.model]" :type="item.type" placeholder="选择择" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                  </el-date-picker>
+                </template>
+                <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
+                  <el-date-picker
+                    v-model="form[item.model]"
+                    :type="item.type"
+                    placeholder="选择择"
+                    :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
+                    :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
+                  >
+                  </el-date-picker>
+                </template>
+                <template v-else-if="item.type === 'radio'">
+                  <el-radio-group v-model="form[item.model]" size="mini" v-bind="item.options">
+                    <slot name="radios" v-bind="{ item, form, fieldChange }"></slot>
+                  </el-radio-group>
+                </template>
+                <template v-else-if="item.type === 'checkbox'">
+                  <el-checkbox-group v-model="form[item.model]" v-bind="item.options">
+                    <slot name="checkboxs" v-bind="{ item, form, fieldChange }"></slot>
+                  </el-checkbox-group>
+                </template>
+                <template v-else-if="item.type === 'select'">
+                  <el-select v-model="form[item.model]" v-bind="item.options" filterable>
+                    <slot name="options" v-bind="{ item, form, fieldChange }"></slot>
+                  </el-select>
+                </template>
+                <template v-else-if="item.type === 'textarea'">
+                  <el-input v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
+                </template>
+                <template v-else-if="item.type === 'editor'">
+                  <wang-editor v-model="form[item.model]"></wang-editor>
+                </template>
+                <template v-else-if="item.type === 'text'">
+                  {{ form[item.model] }}
+                </template>
+                <template v-else>
+                  <el-input
+                    v-model="form[item.model]"
+                    :type="getField('type', item)"
+                    :placeholder="getField('placeholder', item)"
+                    v-bind="item.options"
+                  ></el-input>
+                </template>
+              </el-tooltip>
             </template>
             <template v-else>
               <slot name="custom" v-bind="{ item, form, fieldChange }"></slot>

layout/admin/navBar.vue

@@ -12,47 +12,80 @@
             </el-badge>
           </span>
         </div> -->
-          <el-dropdown>
+          <el-dropdown @command="handleCommand">
             <div class="user-profile-body">
               <img class="user-avatar" src="https://img.alicdn.com/tfs/TB1ONhloamWBuNjy1XaXXXCbXXa-200-200.png" />
               <span class="user-name" v-if="user && user.userid">欢迎,{{ (user && user.name) || '' }}</span>
               <span class="user-name" v-else @click="toLogin">请登录</span>
             </div>
-            <el-dropdown-menu class="user-dropdown" slot="dropdown">
-              <!-- <router-link to="/updatePw" v-if="user && user.id">
-              <el-dropdown-item>
+            <el-dropdown-menu class="user-dropdown" slot="dropdown" v-if="user && user.userid">
+              <el-dropdown-item :divided="true" icon="el-icon-key" command="passwd">
                 修改密码
               </el-dropdown-item>
-            </router-link> -->
-              <el-dropdown-item v-if="user && user.userid">
-                <span @click="toLogout()" style="display:block;">退出</span>
+              <el-dropdown-item :divided="true" icon="el-icon-guide" command="logout">
+                退出
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
       </div>
     </el-menu>
+    <el-dialog title="修改密码" :visible.sync="dialog" center @close="toClose" :destroy-on-close="true">
+      <data-form :data="info" :fields="fields" :rules="rules" @save="handleSave" :isNew="true"> </data-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-
+import dataForm from '@frame/components/form';
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import _ from 'lodash';
+const { mapActions } = createNamespacedHelpers('login');
 export default {
   name: 'navBar',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: { dataForm },
+  data: () => ({
+    info: {},
+    dialog: false,
+    fields: [{ label: '密码', required: true, model: 'passwd', type: 'password', tip: '密码至少6位' }],
+    rules: {
+      passwd: [
+        { required: true, message: '请输入密码' },
+        { min: 6, message: '密码最少6位', trigger: 'blur' },
+      ],
+    },
+  }),
   created() {},
   computed: {
     ...mapState(['user']),
   },
   methods: {
+    ...mapMutations(['deleteUser']),
+    ...mapActions(['login', 'update']),
     async toLogout() {
-      this.$router.push({ path: '/admin' });
+      this.deleteUser();
+      this.toLogin();
+    },
+    handleCommand(type) {
+      if (type === 'logout') this.toLogout();
+      if (type === 'passwd') this.toPasswd();
     },
     async toLogin() {
-      console.log(`to login`);
+      //TODO
+      console.log(`to login page`);
+    },
+    toPasswd() {
+      this.dialog = true;
+    },
+    toClose() {
+      this.info = {};
+      this.dialog = false;
+    },
+    async handleSave({ data }) {
+      data.id = this.user.id;
+      let res = await this.update(data);
+      if (this.$checkRes(res, '修改成功', '修改失败')) this.toClose();
     },
   },
 };

store/dir-plan.js

@@ -4,6 +4,7 @@ import _ from 'lodash';
 Vue.use(Vuex);
 const api = {
   interface: `/api/train/teaplan`,
+  canUse: `/api/train/teaplan/findteacher`,
 };
 const state = () => ({});
 const mutations = {};
@@ -29,6 +30,10 @@ const actions = {
     const res = await this.$axios.$delete(`${api.interface}/${payload}`);
     return res;
   },
+  async getDirTeacher({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.canUse}`, payload);
+    return res;
+  },
 };
 export default {
   namespaced: true,

store/login.js

@@ -16,7 +16,7 @@ const actions = {
     let result = true;
     if (res.errcode === 0) {
       let info = jwt.decode(res.data);
-      sessionStorage.setItem('user', JSON.stringify(info));
+      localStorage.setItem('user', JSON.stringify(info));
       commit('setUser', info, { root: true });
     } else result = res;
     return result;

store/trainplan.js

@@ -4,6 +4,7 @@ import _ from 'lodash';
 Vue.use(Vuex);
 const api = {
   interface: `/api/train/trainplan`,
+  notice: `/api/train/class/notice`,
 };
 const state = () => ({});
 const mutations = {};
@@ -29,6 +30,11 @@ const actions = {
     const res = await this.$axios.$delete(`${api.interface}/${payload}`);
     return res;
   },
+  async notice({ commit }, payload) {
+    //payload是班级id的集合
+    const res = await this.$axios.$post(`${api.notice}`, payload);
+    return res;
+  },
 };
 export default {
   namespaced: true,

store/user/mutations.js

@@ -0,0 +1,21 @@
+export const setUser = (state, payload) => {
+  let res = true;
+  //登陆时
+  if (payload) state.user = payload;
+  else {
+    //已经登陆,切换路由时取出用户信息放在总store中
+    let user = localStorage.getItem('user');
+    if (user) state.user = JSON.parse(user);
+    else {
+      res = false;
+      state.user = undefined;
+      console.warn('用户未登录');
+    }
+  }
+  return res;
+};
+
+export const deleteUser = (state, payload) => {
+  state.user = {};
+  localStorage.removeItem('user');
+};

store/user/state.js

@@ -0,0 +1 @@
+export const user = {};