公司管理模块完善

This commit is contained in:
BianLzhaoMin 2025-01-03 15:03:10 +08:00
parent 81753f5a0c
commit 2bce41582e
6 changed files with 371 additions and 216 deletions

View File

@ -12,3 +12,15 @@ export const addCompanyAPI = (data) => {
export const getDeptListAPI = (data = {}) => {
return request.get('/system/dept/deptList', data)
}
/**
* @id 查询参数 获取详情
*/
export const getDeptDetailsAPI = (id) => {
return request.get(`/system/dept/${id}`)
}
/**
* @data 编辑参数 编辑公司信息提交接口
*/
export const editCompanyAPI = (data) => {
return request.post('/system//dept/edit', data)
}

View File

@ -1,67 +0,0 @@
<template>
<div>
<el-upload
:limit="limit"
:action="uploadFileUrl"
list-type="picture-card"
:file-list="fileList"
:on-remove="handleRemove"
:on-preview="handlePreview"
:auto-upload="false"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
export default {
props: {
uploadFileUrl: {
type: String,
default: '#',
},
uploadFileList: {
type: Array,
default: () => [],
},
limit: {
type: Number,
default: () => 1,
},
},
computed: {
fileList: {
get() {
return this.uploadFileList
},
},
},
data() {
return {
dialogVisible: false,
dialogImageUrl: '',
}
},
methods: {
handleRemove() {},
handlePreview() {
this.dialogVisible = true
},
},
}
</script>
<style lang="scss" scoped>
::v-deep .el-upload {
width: 120px;
height: 120px;
}
::v-deep .el-upload--picture-card {
line-height: 120px;
}
</style>

View File

@ -1,16 +1,19 @@
<template>
<!-- 新增修改弹框 -->
<div>
<el-dialog
width="50%"
:title="dialogTitle"
:visible.sync="dialogVisible"
:before-close="handleClose"
append-to-body
>
<el-form
label-width="120px"
:model="addOrEditForm"
:rules="addOrEditFormRef"
ref="addOrEditFormRef"
:disabled="formType == 1"
>
<TitleTip :titleText="`公司信息`" />
<el-form-item label="公司名称:" prop="deptName">
@ -28,14 +31,28 @@
</el-form-item>
<el-form-item label="LOGO设置" prop="logo">
<div class="upload-container">
<UploadModel
:uploadFileList.sync="addOrEditForm.fileList"
/>
<el-upload
:limit="1"
:action="uploadFileUrl"
list-type="picture-card"
:file-list="addOrEditForm.fileList"
:headers="headers"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:show-file-list="true"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
<div>
1上传图片文件格式仅支持SVG <br />
2LOGO图片大小不超过3MB,尺寸100px * 100px <br />
3收集客户的logo请UI设计完成海购添加 <br />
4默认智慧工地LOGO<a> >> 恢复默认</a> <br />
4默认智慧工地LOGO
<a @click="onDefaultLogo()"> &gt;&gt; 恢复默认 </a>
<br />
</div>
</div>
</el-form-item>
@ -64,29 +81,55 @@
</el-button>
</el-form-item>
</el-form>
<el-dialog
width="30%"
:visible.sync="dialogInnerVisible"
append-to-body
:before-close="
() => {
dialogInnerVisible = false
}
"
>
<ImagePreview :width="240" :height="240" :url="previewUrl" />
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import UploadModel from '@/components/UploadModel'
import { addCompanyAPI } from '@/api/company-manage/index.js'
import {
addCompanyAPI,
getDeptDetailsAPI,
editCompanyAPI,
} from '@/api/company-manage/index.js'
import { getToken } from '@/utils/auth'
export default {
props: {
formType: {
type: Number,
default: () => 3,
},
detailsId: {
type: [String, Number],
default: () => '',
},
formDialogVisible: {
type: Boolean,
default: () => false,
},
},
components: {
UploadModel,
},
data() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
fileType: ['svg'],
dialogInnerVisible: false,
previewUrl: '',
headers: {
Authorization: 'Bearer ' + getToken(),
},
//
addOrEditForm: {
deptName: '',
@ -185,20 +228,127 @@ export default {
handleClose() {
this.$emit('update:formDialogVisible', false)
},
async onSubmitForm() {
this.addOrEditForm.userName = this.addOrEditForm.phonenumber
const res = await addCompanyAPI(this.addOrEditForm)
onSubmitForm() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
const {
deptName,
deptAbbreviation,
remark,
password,
logo,
nickName,
phonenumber,
userName,
} = this.addOrEditForm
const params = {
deptName,
deptAbbreviation,
remark,
logo,
orderNum: 200,
sysUser: {
nickName,
phonenumber,
userName: phonenumber,
password,
},
}
const SEND_FUN =
this.formType == 2 ? editCompanyAPI : addCompanyAPI
const res = await SEND_FUN(params)
if (res.code === 200) {
this.$modal.msgSuccess('新增成功')
this.$modal.msgSuccess(
this.formType === 2 ? '修改成功' : '新增成功',
)
}
this.$emit('update:formDialogVisible', false)
this.$emit('updateTableList')
}
})
},
//
handleBeforeUpload(file) {
const isSvg = this.fileType.some((e) => file.type.includes(e))
if (!isSvg) {
this.$modal.msgError(
`文件格式不正确, 请上传${this.fileType.join(
'、',
)}格式的文件!`,
)
return false
}
const isLt = file.size / 1024 / 1024 < 3
if (!isLt) {
this.$modal.msgError(`LOGO大小不能超过 3 MB`)
return false
}
this.$modal.loading('图片正在上传,请稍候...')
},
handleRemove(file) {
this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter(
(item) => item.uid !== file.uid,
)
this.addOrEditForm.logo = ''
},
handlePreview(file) {
console.log(file, '查看')
this.dialogInnerVisible = true
this.previewUrl = file.url
},
handleSuccess(res) {
if (res.code === 200) {
this.addOrEditForm.logo = res.data.url
} else {
this.addOrEditForm.fileList = []
this.addOrEditForm.logo = ''
}
this.$modal.closeLoading()
},
onDefaultLogo() {
this.addOrEditForm.fileList = []
this.addOrEditForm.logo = ''
},
//
handleExceed() {
this.$modal.msgError(`上传的LOGO数量不能超过 1 个`)
},
},
mounted() {
async mounted() {
this.getConfigKey('sys.user.initPassword').then((res) => {
this.addOrEditForm.password = res.msg
})
if (this.formType === 1 || this.formType === 2) {
// console.log(this.detailsId, 'detailsId')
const { data: res } = await getDeptDetailsAPI(this.detailsId)
const {
deptName,
deptAbbreviation,
remark,
deptId,
logo,
parentId,
sysUser,
} = res
const { userName, password, nickName } = sysUser
Object.assign(this.addOrEditForm, {
deptName,
deptAbbreviation,
remark,
deptId,
logo,
parentId,
phonenumber: userName,
userName,
password,
nickName,
fileList: [{ url: logo }],
})
}
},
watch: {
formDialogVisible: {
@ -253,4 +403,17 @@ export default {
}
}
}
::v-deep .el-upload {
width: 120px;
height: 120px;
}
::v-deep .el-upload--picture-card {
line-height: 120px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
width: 120px;
height: 120px;
}
</style>

View File

@ -2,17 +2,35 @@
<div class="company-card">
<div class="company-info">
<div>
<el-avatar
size="large"
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>
<el-avatar size="large" :src="companyInfo.logo" />
</div>
<div style="flex: 1; padding-left: 14px">
<div class="company-title">
<span> {{ companyInfo.deptName }} </span>
<el-tag type="success" effect="dark" size="mini">
<el-tag
type="success"
effect="dark"
size="mini"
v-if="companyInfo.status == 0"
>
启用中
</el-tag>
<el-tag
type="warning"
effect="dark"
size="mini"
v-if="companyInfo.status == 1"
>
停用
</el-tag>
<el-tag
type="danger"
effect="dark"
size="mini"
v-if="companyInfo.status == 2"
>
注销
</el-tag>
</div>
<p> {{ companyInfo.remark }} </p>
@ -44,6 +62,7 @@
</template>
<script>
import { editCompanyAPI } from '@/api/company-manage/index.js'
export default {
props: {
companyInfo: {
@ -69,11 +88,27 @@ export default {
methods: {
onClickButton(type) {
if (type === 1 || type === 2) {
this.$emit('openAddForm', type)
this.$emit('openAddForm', type, this.companyInfo.deptId)
} else {
this.$modal
.confirm('是否确认注销')
.then(() => {})
.then(async () => {
//
const { deptId, parentId, deptName, orderNum } =
this.companyInfo
const params = {
deptId,
parentId,
status: '2',
deptName,
orderNum,
}
const res = await editCompanyAPI(params)
if (res.code === 200) {
this.$modal.msgSuccess('注销成功')
this.$emit('updateTableList')
}
})
.catch(() => {})
}
},
@ -86,7 +121,11 @@ export default {
padding: 12px 10px;
border-radius: 6px;
background-color: #f7f8fc;
min-height: 220px;
max-height: 220px;
display: flex;
flex-direction: column;
justify-content: space-around;
.company-info {
display: flex;
align-items: center;

View File

@ -31,7 +31,11 @@
class="company-items"
v-for="(item, index) in companyList"
>
<CompanyCard @openAddForm="openAddForm" :companyInfo="item" />
<CompanyCard
:companyInfo="item"
@openAddForm="openAddForm"
@updateTableList="getCompanyList"
/>
</div>
</div>
@ -44,6 +48,7 @@
<AddForm
:formType="formType"
:detailsId="detailsId"
v-if="formDialogVisible"
:formDialogVisible.sync="formDialogVisible"
@updateTableList="getCompanyList"
@ -65,6 +70,7 @@ export default {
total: 0,
formType: 3,
companyList: [],
detailsId: '',
formDialogVisible: false,
queryParams: {
pageNum: 1,
@ -81,8 +87,9 @@ export default {
this.companyList = res.rows
this.total = res.total
},
openAddForm(type) {
openAddForm(type, detailsId) {
this.formType = type
this.detailsId = detailsId
this.formDialogVisible = true
},
},

View File

@ -1,15 +1,15 @@
"use strict";
const path = require("path");
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir);
return path.join(__dirname, dir)
}
const CompressionPlugin = require("compression-webpack-plugin");
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || "博诺思管理系统"; // 网页标题
const name = process.env.VUE_APP_TITLE || '博诺思管理系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80; // 端口
const port = process.env.port || process.env.npm_config_port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@ -18,35 +18,36 @@ module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.bonus.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.bonus.vip/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
// 在npm run build 或 yarn build 时 生成文件的目录名称要和baseUrl的生产环境路径一致默认dist
outputDir: "dist",
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: "static",
assetsDir: 'static',
// 是否开启eslint保存检测有效值ture | false | 'error'
lintOnSave: process.env.NODE_ENV === "development",
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: "0.0.0.0",
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.2.209:38080`,
// target: `http://192.168.0.244:18877`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",
['^' + process.env.VUE_APP_BASE_API]: '',
},
},
"/api": {
target: "http://192.168.0.21:17861",
'/api': {
target: 'http://192.168.0.21:17861',
//设置允许跨域——此处我经过测试发现可有可无
changeOrigin: true,
pathRewrite: {
"^/api": "",
'^/api': '',
},
},
},
@ -55,7 +56,7 @@ module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: { outputStyle: "expanded" },
sassOptions: { outputStyle: 'expanded' },
},
},
},
@ -63,7 +64,7 @@ module.exports = {
name: name,
resolve: {
alias: {
"@": resolve("src"),
'@': resolve('src'),
},
},
plugins: [
@ -71,67 +72,67 @@ module.exports = {
new CompressionPlugin({
cache: false, // 不启用文件缓存
test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
filename: "[path][base].gz[query]", // 压缩后的文件名
algorithm: "gzip", // 使用gzip压缩
filename: '[path][base].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8, // 压缩比例,小于 80% 的文件不会被压缩
deleteOriginalAssets: false, // 压缩后删除原文件
}),
],
},
chainWebpack(config) {
config.plugins.delete("preload"); // TODO: need test
config.plugins.delete("prefetch"); // TODO: need test
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
config.module
.rule("icons")
.rule('icons')
.test(/\.svg$/)
.include.add(resolve("src/assets/icons"))
.include.add(resolve('src/assets/icons'))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: "icon-[name]",
symbolId: 'icon-[name]',
})
.end();
.end()
config.when(process.env.NODE_ENV !== "development", (config) => {
config.when(process.env.NODE_ENV !== 'development', (config) => {
config
.plugin("ScriptExtHtmlWebpackPlugin")
.after("html")
.use("script-ext-html-webpack-plugin", [
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/,
},
])
.end();
.end()
config.optimization.splitChunks({
chunks: "all",
chunks: 'all',
cacheGroups: {
libs: {
name: "chunk-libs",
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: "initial", // only package third parties that are initially dependent
chunks: 'initial', // only package third parties that are initially dependent
},
elementUI: {
name: "chunk-elementUI", // split elementUI into a single package
name: 'chunk-elementUI', // split elementUI into a single package
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
},
commons: {
name: "chunk-commons",
test: resolve("src/components"), // can customize your rules
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true,
},
},
});
config.optimization.runtimeChunk("single");
});
})
config.optimization.runtimeChunk('single')
})
},
};
}