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/"'
})举报
腾讯云开发者
