公司管理模块完善

src/api/company-manage/index.js

@@ -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)
+}

src/components/UploadModel/index.vue

@@ -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>

src/views/company-manage/components/add-form.vue

@@ -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
+                        <el-upload
-                            :uploadFileList.sync="addOrEditForm.fileList"
+                            :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 />
                             2、LOGO图片大小不超过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 {
-import { addCompanyAPI } from '@/api/company-manage/index.js'
+    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() {
+        onSubmitForm() {
-            this.addOrEditForm.userName = this.addOrEditForm.phonenumber
+            this.$refs.addOrEditFormRef.validate(async (valid) => {
-            const res = await addCompanyAPI(this.addOrEditForm)
+                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>

src/views/company-manage/components/company-card.vue

@@ -2,17 +2,35 @@
     <div class="company-card">
         <div class="company-info">
             <div>
-                <el-avatar
+                <el-avatar size="large" :src="companyInfo.logo" />
-                    size="large"
-                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-                />
             </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;

src/views/company-manage/index.vue

@@ -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
         },
     },

vue.config.js

@@ -1,15 +1,15 @@
-"use strict";
+'use strict'
-const path = require("path");
+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": {
+            '/api': {
-        target: "http://192.168.0.21:17861",
+                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]", // 压缩后的文件名
+                filename: '[path][base].gz[query]', // 压缩后的文件名
-        algorithm: "gzip", // 使用gzip压缩
+                algorithm: 'gzip', // 使用gzip压缩
                 minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩
                 deleteOriginalAssets: false, // 压缩后删除原文件
             }),
         ],
     },
     chainWebpack(config) {
-    config.plugins.delete("preload"); // TODO: need test
+        config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete("prefetch"); // 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")
+            .use('svg-sprite-loader')
-      .loader("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")
+                .plugin('ScriptExtHtmlWebpackPlugin')
-        .after("html")
+                .after('html')
-        .use("script-ext-html-webpack-plugin", [
+                .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",
+                        name: 'chunk-commons',
-            test: resolve("src/components"), // can customize your rules
+                        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')
-    });
+        })
     },
-};
+}