专栏首页cwl_JavaSaaS-HRM企业管理

SaaS-HRM企业管理

4 企业管理

4.1 需求分析

在通用页面配置企业管理模块,完成企业的基本操作

4.2 搭建环境

4.2.1 新增模块

(1)手动创建

方式一:

在src目录下创建文件夹,命名规则:module-模块名称()在文件夹下按照指定的结构配置assets,components,pages,router,store等文件

(2)使用命令自动创建

安装命令行工具

npm install -g itheima-cli

执行命令

itheima moduleAdd saas-clients
`saas-clients` 是新模块的名字
自动创建这些目录和文件
│   ├── module-saas-clients     | saas-clients模块主目录
│   │   ├── assets             | 资源
│   │   ├── components         | 组件
│   │   ├── pages               | 页面
│   │   │   └── index.vue       | 示例
│   │   ├── router             | 路由
│   │   │   └── index.js       | 示例
│   │   └── store               | 数据
│   │       └── app.js         | 示例
  • 每个模块所有的素材、页面、组件、路由、数据,都是独立的,方便大型项目管理,
  • 在实际项目中会有很多子业务项目,它们之间的关系是平行的、低耦合、互不依赖。

4.2.2 构造模拟数据

(1)在 /src/mock 中添加模拟数据company.js

import Mock from 'mockjs'
import { param2Obj } from '@/utils'
const List = []
const count = 100
for (let i = 0; i < 3; i++) {
    let data = {
        id: "1"+i,
        name: "企业"+i,
        managerId: "string",
        version: "试用版v1.0",
        renewalDate: "2018-01-01",
        expirationDate: "2019-01-01",
        companyArea: "string",
        companyAddress: "string",
        businessLicenseId: "string",
        legalRepresentative: "string",
        companyPhone: "13800138000",
        mailbox: "string",
        companySize: "string",
        industry: "string",
        remarks: "string",
        auditState: "string",
        state: "1",
        balance: "string",
        createTime: "string"
   }
  List.push(data) }
  
export default {
  list: () => {
    return {
        code: 10000,
        success: true,
        message: "查询成功",
        data:List
   }
 },
  sassDetail:() => {
    return {
      code: 10000,
      success: true,
      message: "查询成功",
      data:{
        id: "10001",
        name: "测试企业",
        managerId: "string",
        version: "试用版v1.0",
        renewalDate: "2018-01-01",
        expirationDate: "2019-01-01",
        companyArea: "string",
        companyAddress: "string",
        businessLicenseId: "string",
        legalRepresentative: "string",
        companyPhone: "13800138000",
        mailbox: "string",
        companySize: "string",
        industry: "string",
        remarks: "string",
        auditState: "string",
        state: "1",
        balance: "string",
        createTime: "string"
     }
   }
 }
}

(2)配置模拟API接口拦截规则

/src/mock/index.js 中配置模拟数据接口拦截规则

import Mock from 'mockjs'
import TableAPI from './table'
import ProfileAPI from './profile'
import LoginAPI from './login'
import CompanyAPI from './company'

Mock.setup({
  //timeout: '1000'
  })
//如果发送请求的api路径匹配,拦截
//第一个参数匹配的请求api路径,第二个参数匹配请求的方式,第三个参数相应数据如何替换
Mock.mock(/\/table\/list\.*/, 'get', TableAPI.list)
//获取用户信息
Mock.mock(/\/frame\/profile/, 'post', ProfileAPI.profile)
Mock.mock(/\/frame\/login/, 'post', LoginAPI.login)
//配置模拟数据接口
// /company/12
Mock.mock(/\/company\/+/, 'get', CompanyAPI.sassDetail)//根据id查询
Mock.mock(/\/company/, 'get', CompanyAPI.list)  //访问企业列表

4.2.3 注册模块

编辑 src/main.js

/*
* 注册 - 业务模块
*/
import dashboard from '@/module-dashboard/' // 面板
import saasClients from '@/module-saas-clients/' //刚新添加的 企业管理
Vue.use(dashboard, store)
Vue.use(saasClients, store)

4.2.4 配置路由菜单

打开刚才自动创建的 /src/module-saas-clients/router/index.js

import Layout from '@/module-dashboard/pages/layout'
const _import = require('@/router/import_' + process.env.NODE_ENV)
export default [
 {
    path: '/saas-clients',
    component: Layout,
    redirect: 'noredirect',
    name: 'saas-clients',
    meta: {
      title: 'SaaS企业管理',
      icon: 'international'
   },
    root: true,    
    children: [
     {
        path: 'index',
           name: 'saas-clients-index',
           component: _import('saas-clients/pages/index'),
           meta: {title: 'SaaS企业', icon: 'international', noCache: true}
     }
   ]
 }
]

4.2.5 编写业务页面

创建 /src/module-saas-clients/pages/index.vue

<template>
  <div class="dashboard-container">
    saas企业管理
  </div>
</template>
<script>

export default {
  name: 'saasClintList',
  components: {},
  data() {
    return {
   }
 },
  computed: {
 },
  created() {
 }
}</script>

注意文件名 驼峰格式 首字小写 页面请放在目录 /src/module-saas-clients/pages/ 组件请放在目录 /src/module-saas-clients/components/ 页面路由请修改 /src/module-saas-clients/router/index.js

4.3 企业操作

4.3.1 创建api

在api/base目录下创建企业数据交互的API(saasClient.js)

import {createAPI, createFormAPI} from '@/utils/request'

export const list = data => createAPI('/company', 'get', data)
export const detail = data => createAPI(`/company/${data.id}`, 'get', data)

4.3.1 企业列表

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!--elementui的table组件
          data:数据模型
         -->
        <el-table :data="dataList"  border style="width: 100%">
            <!--el-table-column : 构造表格中的每一列
              prop: 数组中每个元素对象的属性名
            -->
            <el-table-column fixed type="index" label="序号" width="50"></el-tablecolumn>
            <el-table-column fixed prop="name" label="企业名称"  width="200"></el-tablecolumn>
            <el-table-column fixed prop="version" label="版本"  width="150"></el-tablecolumn>
            <el-table-column fixed prop="companyphone" label="联系电话"  width="150"> </el-table-column>
            <el-table-column fixed prop="expirationDate" label="截至时间"  width="150"> </el-table-column>
            <el-table-column fixed prop="state" label="状态"  width="150">
              <!--scope:传递当前行的所有数据 -->
              <template slot-scope="scope">
              <!--开关组件
                  active-value:激活的数据值
                  active-color:激活的颜色
                  inactive-value:未激活
                  inactive-color:未激活的颜色
               -->
              <el-switch
                  v-model="scope.row.state"
                  inactive-value="0"    
                  active-value="1"
                  disabled
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
               <router-link :to="'/saas-clients/details/'+scope.row.id">查看</routerlink>
              </template>
            </el-table-column>
          </el-table>
      </el-card>
     </div>
  </div>
</template>
<script>
import {list} from '@/api/base/saasClient'
export default {
  name: 'saas-clients-index',
  data () {
    return {
      dataList:[]
   }
 },
  methods: {
    getList() {
      //调用API发起请求
      //res=响应数据
      list().then(res => {
        this.dataList = res.data.data
     })
   }
 },
  // 创建完毕状态
  created() {
    this.getList()
 }
}</script>
<style rel="stylesheet/scss" lang="scss" scoped> .alert {
  margin: 10px 0px 0px 0px; }.pagination {
  margin-top: 10px;
  text-align: right; }</style>

4.3.2 企业详情

(1)配置路由

/src/module-saas-clients/router/index.js 添加新的子路由配置

     {
       path: 'details/:id',
       name: 'saas-clients-details',
       component: _import('saas-clients/pages/sass-details'),
       meta: {title: 'SaaS企业详情', icon: 'international', noCache: false}
     }

(2)定义公共组件

/src/module-saas-clients/components/ 下创建公共的组件页面 enterprise-info.vue

<template>
  <div class="boxInfo">
    <!-- 表单内容 -->
    <div class="formInfo">
      <div>
        <div class="boxMain">
          <el-form ref="form" :model="formData" label-width="215px" labelposition="right">
              <el-form-item class="formInfo" label="公司名称:">
                <el-input v-model="formData.name" class="inputW" disabled></el-input>
              </el-form-item>
              <el-form-item class="formInfo" label="公司地区:">
                <el-input v-model="formData.companyArea" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="公司地址:">
                <el-input v-model="formData.companyAddress" class="inputW" disabled> </el-input>
              </el-form-item>
              <el-form-item class="formInfo" label="审核状态:">
                <el-input v-model="formData.auditState" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="营业执照:">
                <span v-for="item in fileList" :key='item.id' class="fileImg">
                  <img :src="item.url">
                </span>
              </el-form-item>
              <el-form-item class="formInfo" label="法人代表:">
                <el-input v-model="formData.legalRepresentative" class="inputW"
disabled></el-input>
              </el-form-item>
              <el-form-item class="formInfo" label="公司电话:">
                <el-input v-model="formData.companyPhone" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="邮箱:">
                <el-input v-model="formData.mailbox" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="公司规模:">
               <el-input v-model="formData.companySize" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="所属行业:">
                <el-input v-model="formData.industry" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="备注:">
                <el-input type="textarea" v-model="formData.remarks" class="inputW"> </el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSub('1')">审核</el-button>
            <el-button @click="handleSub('2')">拒绝</el-button>
            
          </div>
        </div>
      </div>
    </div>
    </div>
</template>
<script>
import { auditDetail } from '@/api/base/sassClients'
import { imgDownload } from '@/api/base/baseApi'
var _this = null
export default {
  name: 'userInfo',
  components: {},
  props: ['formData'],
  data() {
    return {
      fileList: []
   }
 },
  methods: {
    // 业务方法
    // 界面交互
    handleSub(state) {
      auditDetail({
        id: this.formData.id,
        remarks: this.formData.remarks,
        state: state
     }).then(() => {
        if (state === '1') {
          this.$message.success('恭喜你,审核成功!')
       }
        if (state === '2') {
          this.$message.success('已拒绝审核!')
       }
        this.$emit('getObjInfo', this.formData)
        })
   },
    // 图片 blob 流转化为可用 src
    imgHandle(obj) {
      return window.URL.createObjectURL(obj)
   },
    // 图片下载
    fillDownload(fid) {
   }
 },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created: function() {
    _this = this
 },
  // 组件更新
  updated: function() {
    // this.imgDownInfo()
    if (
      this.formData.businessLicense !== null
   ) {
      this.fillDownload(this.formData.businessLicense)
   }
 }
}</script>
<style rel="stylesheet/scss" lang="scss"> </style>
<style rel="stylesheet/scss" lang="scss" scoped> .fileImg{
  img{
    width:20%;
 }
}</style>

(3)完成详情展示

在在 /src/module-saas-clients/pages/ 下创建企业详情视图details.vue

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
            <el-tabs v-model="activeName">
                <el-tab-pane label="企业信息" name="first">
                  <!--form表单
                      model : 双向绑定的数据对象
                       -->
                  <el-form ref="form" :model="formData" label-width="200px">
                    <el-form-item label="企业名称" >
                      <el-input v-model="formData.name" style="width:250px" disabled> </el-input>
                    </el-form-item>
                    <el-form-item label="公司地址">
                      <el-input v-model="formData.companyAddress"  style="width:250px"
disabled></el-input>
                    </el-form-item>
                    <el-form-item label="公司电话">
                      <el-input v-model="formData.companyPhone"  style="width:250px"
disabled></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="formData.mailbox"  style="width:250px"
disabled></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                      <el-input v-model="formData.remark"  style="width:250px" ></elinput>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">审核</el-button>
                      <el-button>拒绝</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="账户信息" name="second">账户信息</el-tab-pane>
                <el-tab-pane label="交易记录" name="third">交易记录</el-tab-pane>
            </el-tabs>
      </el-card>
     </div>
  </div>
</template>
<script>
import {detail} from '@/api/base/saasClient'
export default {
  name: 'saas-clients-detail',
  data () {
    return {
        activeName: 'first',
        formData:{}
   }
 },
  methods: {
    detail(id) {
      detail({id:id}).then(res => {
        this.formData = res.data.data
        console.log(id)
        console.log(this.formData)
     })
     }
 },
  // 创建完毕状态
  created() {
    var id = this.$route.params.id
    this.detail(id);
 }
}</script>
<style rel="stylesheet/scss" lang="scss" scoped> .alert {
  margin: 10px 0px 0px 0px; }.pagination {
  margin-top: 10px;
  text-align: right; }</style>

4.4 接口对接

(1)启动第一天的企业微服务服务 (2)在 config/dev.env.js 中配置请求地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:9001/"'
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SaaS-系统用户权限设计(组织机构管理)

    在 /src/api/base/ 创建departments.js作为组织机构管理的API公共接口方法

    cwl_java
  • 快速学习-Kylin入门

    在Hive中创建数据,分别创建部门和员工外部表,并向表中导入数据。 (1)原始数据

    cwl_java
  • SaaS-权限管理

    权限与菜单,菜单与按钮,菜单与API接口都是一对一关系。为了方便操作,在SAAS-HRM系统的表设计中,采用基于共享主键的形式实现一对一关系维护,并且数据库...

    cwl_java
  • 浅入深出Vue:注册

    基本布局已经有了, 现在我们来开始做我们的注册页面~ 当然需要注册才能发表文章啊(糟老头子坏得很, 我可以只有我一个人能发啊)。

    若羽
  • jQuery 写法示例

    Joel
  • DOM 操作写法示例

    Joel
  • 【Vue.js】Vue.js组件库Element的基础用法

    Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是帮助网站快速成型的工具。

    魏晓蕾
  • Vue使用Element实现增删改查+打包

    在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。

    憧憬博客
  • 表格中的输入框验证

    tianyawhl
  • 表格中的输入框验证

    IT茂茂

扫码关注云+社区

领取腾讯云代金券