登录
当前位置： 首页 > 工具软件 > saas-base > 使用案例 >

SaaS-HRM企业管理

慕容坚
2023-12-01

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/"'
})
 类似资料：

相关阅读

python的企业调度程序（如石英）ThreadLocal在企业应用程序中的用法无状态和有状态的企业Java Beanjquery实现企业定位式导航效果通过shell+python实现企业微信预警

相关文章

企业微信团队安卓一面字节飞书企业应用后端企业微信前端一面凉经[面经] 秋招嵌入式企业面经网易 智慧企业事业部 Java 后端 一面（已挂）

相关问答

从Neo4j社区走向企业企业代理阻塞纱、npm和git合并实体-企业架构师独立运行Netlogo-企业环境在企业代理背后使用Selenium RemoteWebDriver（Java）

相关文档

滴滴企业管理接口文档企业微信使用手册滴滴企业用车 API 文档滴滴企业版 帮助中心目睹企业直播帮助文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.