角色 页面

CODE/smart-community/app-api/src/main/java/com/community/huiju/service/impl/TaUserServiceImpl.java

         // 下发门禁权限
         HKOpenApi.downloadAuthorityByDeviceUuids();
 
+        //--------- 可视对讲 ----------
+        visualIntercom(user);
+
+
+        TaUserVO taUserVO = new TaUserVO();
+        BeanUtils.copyProperties(user,taUserVO);
+        response.addSuccess(taUserVO);
+        return response;
+    }
+
+    /**
+     * 可视对讲下发
+     * @param user
+     */
+    private void visualIntercom(TaUser user){
         // TODO 目前下发的 authName权限组是我们自定义的, 后面肯定是按照小区的 期楼栋号来设置的
         // TODO longNums设备编号, 可视对讲的机器编号, 应该根据 期楼栋号 下面的机器编号来设置的
 
 //        // 可视对讲 指定人员指纹权限下载
 //        HKOpenApi.downloadFinger(downloadFingerMap);
 
-
-
-        TaUserVO taUserVO = new TaUserVO();
-        BeanUtils.copyProperties(user,taUserVO);
-        response.addSuccess(taUserVO);
-        return response;
     }
 
     @Transactional(rollbackFor = Exception.class)
         // 下发门禁权限
         HKOpenApi.downloadAuthorityByDeviceUuids();
 
+        //--------- 可视对讲 ----------
+        visualIntercom(user);
+
         if ("0".equals(response.getCode())) {
             response.addSuccess(user);
         }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/controller/SysMenuController.java

+package com.community.huiju.controller;
+
+import com.community.commom.mode.ResponseBean;
+import com.community.huiju.service.IToSysMenuService;
+import io.swagger.annotations.Api;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.cloud.context.config.annotation.RefreshScope;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequestMapping("/")
+@RefreshScope
+@Api(value = "菜单 API", description = "菜单 API")
+public class SysMenuController {
+
+    @Autowired
+    private IToSysMenuService iToSysMenuService;
+
+    @RequestMapping(value = "/menu/list", method = RequestMethod.GET)
+    public ResponseBean getAll() {
+        ResponseBean responseBean = iToSysMenuService.getMenuAll();
+        return responseBean;
+    }
+
+}

CODE/smart-community/operate-api/src/main/java/com/community/huiju/dao/ToSysMenuMapper.java

 
 import com.community.huiju.model.ToSysMenu;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
 
 @Mapper
 public interface ToSysMenuMapper {
     int updateByPrimaryKeySelective(ToSysMenu record);
 
     int updateByPrimaryKey(ToSysMenu record);
+
+    /**
+     * 根据 parentId 查询菜单
+     * @param parentId 父级菜单ID
+     * @param menuType 菜单类型 0 页面菜单  1功能菜单
+     * @return
+     */
+    List<ToSysMenu> selectParentId(@Param("parentId") Integer parentId, @Param("menuType") Integer menuType);
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/dao/ToSysRoleMapper.java

 
 import com.community.huiju.model.ToSysRole;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
 
 import java.util.List;
 
      *
      * @return
      */
-    List<ToSysRole> selectAll(String roleName);
+    List<ToSysRole> selectAll(@Param("roleName") String roleName);
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/model/ToSysMenu.java

 package com.community.huiju.model;
 
+import java.util.List;
+
 public class ToSysMenu {
     private Integer id;
 
 
     private String status;
 
+    /**
+     * 节点
+     */
+    private List<ToSysMenu> children;
+
     public Integer getId() {
         return id;
     }
     public void setStatus(String status) {
         this.status = status == null ? null : status.trim();
     }
+
+    public List<ToSysMenu> getChildren() {
+        return children;
+    }
+
+    public void setChildren(List<ToSysMenu> children) {
+        this.children = children;
+    }
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/model/ToSysRole.java

 
     private Date updateDate;
 
+    /**
+     * 创建人用户名
+     */
+    private String createUserName;
+
+    /**
+     * 修改人用户名
+     */
+    private String updateUserName;
+
     public Integer getId() {
         return id;
     }
     public void setUpdateDate(Date updateDate) {
         this.updateDate = updateDate;
     }
+
+    public String getCreateUserName() {
+        return createUserName;
+    }
+
+    public void setCreateUserName(String createUserName) {
+        this.createUserName = createUserName;
+    }
+
+    public String getUpdateUserName() {
+        return updateUserName;
+    }
+
+    public void setUpdateUserName(String updateUserName) {
+        this.updateUserName = updateUserName;
+    }
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/IToSysMenuService.java

+package com.community.huiju.service;
+
+import com.community.commom.mode.ResponseBean;
+
+/**
+ * 运营web端菜单 业务
+ */
+public interface IToSysMenuService {
+
+    /**
+     * 获取所有 菜单
+     * @return
+     */
+    ResponseBean getMenuAll();
+
+}

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/impl/ToSysMenuServiceImpl.java

+package com.community.huiju.service.impl;
+
+import com.community.commom.mode.ResponseBean;
+import com.community.huiju.dao.ToSysMenuMapper;
+import com.community.huiju.model.ToSysMenu;
+import com.community.huiju.service.IToSysMenuService;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.collections.CollectionUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@Slf4j
+public class ToSysMenuServiceImpl implements IToSysMenuService {
+
+    @Autowired
+    private ToSysMenuMapper toSysMenuMapper;
+
+    @Override
+    public ResponseBean getMenuAll() {
+        ResponseBean responseBean = new ResponseBean();
+        List<ToSysMenu> menuList = getMenu(1, 0);
+        responseBean.addSuccess(menuList);
+        return responseBean;
+    }
+
+    /**
+     * 根据 parentId 查询菜单
+     * @param parentId 父级菜单ID
+     * @param menuType 菜单类型 0 页面菜单  1功能菜单
+     * @return
+     */
+    private List<ToSysMenu> getMenu (Integer parentId, Integer menuType){
+        List<ToSysMenu> sysMenuList = toSysMenuMapper.selectParentId(parentId, menuType);
+        if (CollectionUtils.isNotEmpty(sysMenuList)) {
+            sysMenuList.forEach(e -> getMenu(e.getId(), menuType));
+        }
+        return sysMenuList;
+    }
+
+}

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/impl/ToSysRoleServiceImpl.java

 
 import com.alibaba.fastjson.JSONObject;
 import com.community.commom.mode.ResponseBean;
+import com.community.huiju.dao.TaUserMapper;
 import com.community.huiju.dao.ToSysRoleMapper;
+import com.community.huiju.dao.ToUserMapper;
+import com.community.huiju.model.TaUser;
 import com.community.huiju.model.ToSysRole;
+import com.community.huiju.model.ToUser;
 import com.community.huiju.service.IToSysRoleService;
+import com.github.pagehelper.Page;
 import com.github.pagehelper.PageHelper;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 @Service("iToSysRoleService")
 @Slf4j
     @Autowired
     private ToSysRoleMapper toSysRoleMapper;
 
+    @Autowired
+    private ToUserMapper toUserMapper;
+
     @Override
     public List<ToSysRole> selectRoleByUserId(Integer userId) {
 
         Integer pageSize = jsonObject.getInteger("pageSize");
         String roleName = jsonObject.getString("roleName").trim();
 
-        PageHelper.startPage(pageNum, pageSize);
+        Page<ToSysRole> pageInfo = PageHelper.startPage(pageNum, pageSize);
         List<ToSysRole> roleList = toSysRoleMapper.selectAll(roleName);
-        responseBean.addSuccess(roleList);
+        roleList.forEach(e -> {
+            ToUser createUser = toUserMapper.selectByPrimaryKey(e.getCreateUser());
+            ToUser updateUser = toUserMapper.selectByPrimaryKey(e.getUpdateUser());
+            e.setCreateUserName(createUser.getUserName());
+            e.setUpdateUserName(updateUser.getUserName());
+        });
+
+        Map<String, Object> resMap = new HashMap<>();
+        resMap.put("list", roleList);
+        resMap.put("pageNum", pageInfo.getPageNum());
+        resMap.put("pageSize", pageInfo.getPageSize());
+        resMap.put("total", pageInfo.getTotal());
+
+
+        responseBean.addSuccess(resMap);
         return responseBean;
     }
 }

CODE/smart-community/operate-api/src/main/resources/mapper/ToSysMenuMapper.xml

       status = #{status,jdbcType=CHAR}
     where id = #{id,jdbcType=INTEGER}
   </update>
+  <select id="selectParentId" parameterType="integer" resultMap="BaseResultMap">
+    select
+    <include refid="Base_Column_List"/>
+    from to_sys_menu
+    <trim prefix="where" prefixOverrides="and">
+      <if test="parentId != null">
+        and parent_id = #{parentId,jdbcType=INTEGER}
+      </if>
+      <if test="menuType != null">
+        and menu_type = #{menuType,jdbcType=CHAR}
+      </if>
+    </trim>
+  </select>
 </mapper>

CODE/smart-community/operate-api/src/main/resources/mapper/ToSysRoleMapper.xml

     from to_sys_role
     <where>
       <if test="roleName != null and roleName != ''">
-        role_name = #{roleName,jdbcType=VARCHAR}
+        role_name like concat('%',#{roleName,jdbcType=VARCHAR},'%')
       </if>
     </where>
   </select>

VUECODE/smart-operate-manage/src/router/index.js

         component: () => import('@/views/account/role/index'),
         name: 'role-index',
         meta: { title: '角色管理', icon: 'table' }
+      },
+      {
+        path: '/account/role/add',
+        component: () => import('@/views/account/role/add/index'),
+        name: 'role-add',
+        hidden: true,
+        meta: { title: '添加角色', icon: 'table' }
+      },
+      {
+        path: '/account/role/edi',
+        component: () => import('@/views/account/role/edi/index'),
+        name: 'role-edi',
+        hidden: true,
+        meta: { title: '修改角色', icon: 'table' }
+      },
+      {
+        path: '/account/role/info',
+        component: () => import('@/views/account/role/info/index'),
+        name: 'role-info',
+        hidden: true,
+        meta: { title: '角色详情', icon: 'table' }
       }
     ]
   },

VUECODE/smart-operate-manage/src/store/index.js

 import community from './modules/community'
 import trunkIndex from './modules/trunkIndex'
 import getters from './getters'
+import role from './modules/role'
 
 Vue.use(Vuex)
 
     user,
     community,
     banner,
-    trunkIndex
+    trunkIndex,
+    role
   },
   getters
 })

VUECODE/smart-operate-manage/src/store/modules/role.js

-import { getRoleList } from "@/api/role";
+import { getRoleList } from '@/api/role'
 
 const role = {
 
   actions: {
-    GetRoleList() {
-      getRoleList().then().catch((err)=>{
-        
+    GetRoleList({ commit }, data) { // 根据条件获取所有的角色列表
+      console.log('角色列表请求参数: ', data)
+      return new Promise((resolve, reject) => {
+        getRoleList(data).then(response => {
+          resolve(response)
+        }).catch((err) => {
+          reject(err)
+        })
       })
     }
   }

VUECODE/smart-operate-manage/src/views/account/role/add/index.vue

+<template>
+  <div id="root">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="ruleForm.roleName"/>
+      </el-form-item>
+      <el-form-item label="角色描述" prop="description">
+        <el-input v-model="ruleForm.description"/>
+      </el-form-item>
+      <el-form-item label="权限资源" prop="menuArray">
+        <el-tree
+          :data="menuData"
+          :default-expanded-keys="[2, 3]"
+          :default-checked-keys="[5]"
+          :props="defaultProps"
+          show-checkbox
+          node-key="id"
+          @check-change="handleCheckChange"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        roleName: '',
+        description: '',
+        menuArray: [] // 已选中的权限资源
+      },
+      menuData: [], // 所有权限资源
+      defaultProps: { // 设置树形节点的渲染的属性
+        id: 'id',
+        children: 'children',
+        label: 'label'
+      },
+      rules: {
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入角色描述', trigger: 'blur' }
+        ],
+        menuArray: [
+          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+    handleCheckChange(data, checked, indeterminate) { // 树形图选择事件
+      console.log(data, checked, indeterminate)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

VUECODE/smart-operate-manage/src/views/account/role/edi/index.vue

+<template>
+  <div id="root">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
+      <el-form-item label="活动名称" prop="name">
+        <el-input v-model="ruleForm.name"/>
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region">
+        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"/>
+          <el-option label="区域二" value="beijing"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间" required>
+        <el-col :span="11">
+          <el-form-item prop="date1">
+            <el-date-picker v-model="ruleForm.date1" type="date" placeholder="选择日期" style="width: 100%;"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="2" class="line">-</el-col>
+        <el-col :span="11">
+          <el-form-item prop="date2">
+            <el-time-picker v-model="ruleForm.date2" type="fixed-time" placeholder="选择时间" style="width: 100%;"/>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="即时配送" prop="delivery">
+        <el-switch v-model="ruleForm.delivery"/>
+      </el-form-item>
+      <el-form-item label="活动性质" prop="type">
+        <el-checkbox-group v-model="ruleForm.type">
+          <el-checkbox label="美食/餐厅线上活动" name="type"/>
+          <el-checkbox label="地推活动" name="type"/>
+          <el-checkbox label="线下主题活动" name="type"/>
+          <el-checkbox label="单纯品牌曝光" name="type"/>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="特殊资源" prop="resource">
+        <el-radio-group v-model="ruleForm.resource">
+          <el-radio label="线上品牌商赞助"/>
+          <el-radio label="线下场地免费"/>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="活动形式" prop="desc">
+        <el-input v-model="ruleForm.desc" type="textarea"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        date1: [
+          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        date2: [
+          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+        ],
+        type: [
+          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+        ],
+        resource: [
+          { required: true, message: '请选择活动资源', trigger: 'change' }
+        ],
+        desc: [
+          { required: true, message: '请填写活动形式', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

VUECODE/smart-operate-manage/src/views/account/role/index.vue

         <el-input v-model="listQuery.roleName" placeholder="角色名称"/>
       </el-form-item>
       <el-form-item>
-        <el-button type="info" @click="onSubmit">清空</el-button>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="info" @click="cleanQuery">清空</el-button>
+        <el-button type="primary" @click="queryData">查询</el-button>
       </el-form-item>
     </el-form>
     <div class="but-content">
-      <el-button type="primary" @click="onSubmit">添加</el-button>
-      <el-button type="warning" @click="onSubmit">修改</el-button>
-      <el-button type="danger" @click="onSubmit">删除</el-button>
+      <el-button type="primary" @click="addRole">添加</el-button>
+      <el-button type="warning" @click="updateRole">修改</el-button>
+      <el-button type="danger" @click="deleteRole">删除</el-button>
     </div>
     <el-table
+      v-loading="listLoading"
       ref="multipleTable"
       :data="listData"
       tooltip-effect="dark"
         label="角色描述"
         align="center"/>
       <el-table-column
-        prop="createUser"
+        prop="createUserName"
         label="创建人"
         align="center"/>
       <el-table-column
         prop="createDate"
         label="创建时间"
-        align="center"/>
+        align="center">
+        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
+      </el-table-column>
       <el-table-column
-        prop="updateUuser"
+        prop="updateUserName"
         label="修改人"
         align="center"/>
       <el-table-column
         prop="updateDate"
         label="修改时间"
-        align="center"/>
+        align="center">
+        <template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template>
+      </el-table-column>
     </el-table>
     <div class="footer-page">
       <el-pagination
         pageSize: 10
       },
       total: 0, // 总数
-      listData: []
+      listData: [],
+      listLoading: false // 表格加载框
     }
   },
+  mounted() {
+    this.getRoleList()
+  },
   methods: {
     onSubmit() {
       console.log('submit!')
+    },
+    getRoleList() { // 查询Role列表
+      this.listLoading = true
+      this.$store.dispatch('GetRoleList', this.listQuery).then((response) => {
+        const resCode = response.code
+        const resData = response.data
+        if (resCode === '0') {
+          this.listData = resData.list
+          this.listQuery.pageSize = resData.pageSize
+          this.listQuery.pageNum = resData.pageNum
+          this.total = resData.total
+          this.listLoading = false
+          return
+        }
+        this.$message.error(response.message)
+        this.listLoading = false
+      }).catch(() => {
+        console.log('error GetRoleList')
+        this.listLoading = false
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.listQuery.pageSize = val
+      this.getRoleList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.listQuery.pageNum = val
+      this.getRoleList()
+    },
+    handleSelectionChange(rows) { // 表格选择框
+      console.log(rows)
+    },
+    formatDate(val) {
+      var value = new Date(val)
+      var year = value.getFullYear()
+      var month = value.getMonth() + 1
+      var day = value.getDate()
+      // var hour = value.getHours()
+      // var minutes = value.getMinutes()
+      // var seconds = value.getSeconds()
+      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
+      return year + '-' + month + '-' + day
+    },
+    queryData() { // 点击查询按钮
+      this.listQuery.pageNum = 1
+      this.listQuery.pageSize = 10
+      this.getRoleList()
+    },
+    cleanQuery() { // 清楚查询条件
+      this.listQuery.pageNum = 1
+      this.listQuery.pageSize = 10
+      this.listQuery.roleName = ''
+      this.getRoleList()
+    },
+    deleteRole() { // 删除角色
+    },
+    updateRole() { // 修改角色
+    },
+    addRole() { // 添加角色
+      this.$router.push({ name: 'role-add' })
     }
   }
 }

VUECODE/smart-operate-manage/src/views/account/role/info/index.vue

+<template>
+  <div id="root">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
+      <el-form-item label="活动名称" prop="name">
+        <el-input v-model="ruleForm.name"/>
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region">
+        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"/>
+          <el-option label="区域二" value="beijing"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间" required>
+        <el-col :span="11">
+          <el-form-item prop="date1">
+            <el-date-picker v-model="ruleForm.date1" type="date" placeholder="选择日期" style="width: 100%;"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="2" class="line">-</el-col>
+        <el-col :span="11">
+          <el-form-item prop="date2">
+            <el-time-picker v-model="ruleForm.date2" type="fixed-time" placeholder="选择时间" style="width: 100%;"/>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="即时配送" prop="delivery">
+        <el-switch v-model="ruleForm.delivery"/>
+      </el-form-item>
+      <el-form-item label="活动性质" prop="type">
+        <el-checkbox-group v-model="ruleForm.type">
+          <el-checkbox label="美食/餐厅线上活动" name="type"/>
+          <el-checkbox label="地推活动" name="type"/>
+          <el-checkbox label="线下主题活动" name="type"/>
+          <el-checkbox label="单纯品牌曝光" name="type"/>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="特殊资源" prop="resource">
+        <el-radio-group v-model="ruleForm.resource">
+          <el-radio label="线上品牌商赞助"/>
+          <el-radio label="线下场地免费"/>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="活动形式" prop="desc">
+        <el-input v-model="ruleForm.desc" type="textarea"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        date1: [
+          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        date2: [
+          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+        ],
+        type: [
+          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+        ],
+        resource: [
+          { required: true, message: '请选择活动资源', trigger: 'change' }
+        ],
+        desc: [
+          { required: true, message: '请填写活动形式', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>