From 2bce41582ed57dbb933e719c5cfc9eded966b941 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 3 Jan 2025 15:03:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=8F=B8=E7=AE=A1=E7=90=86=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/company-manage/index.js               |  12 +
 src/components/UploadModel/index.vue          |  67 -----
 .../company-manage/components/add-form.vue    | 197 ++++++++++++--
 .../components/company-card.vue               |  55 +++-
 src/views/company-manage/index.vue            |  11 +-
 vue.config.js                                 | 245 +++++++++---------
 6 files changed, 371 insertions(+), 216 deletions(-)
 delete mode 100644 src/components/UploadModel/index.vue

diff --git a/src/api/company-manage/index.js b/src/api/company-manage/index.js
index 44a1d9d3..0d981648 100644
--- a/src/api/company-manage/index.js
+++ b/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)
+}
diff --git a/src/components/UploadModel/index.vue b/src/components/UploadModel/index.vue
deleted file mode 100644
index 21de70e5..00000000
--- a/src/components/UploadModel/index.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/company-manage/components/add-form.vue b/src/views/company-manage/components/add-form.vue
index cb69cf17..ee8d3722 100644
--- a/src/views/company-manage/components/add-form.vue
+++ b/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
-                            :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 />
                             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 { 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)
-            if (res.code === 200) {
-                this.$modal.msgSuccess('新增成功')
+        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.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
             }
-            this.$emit('update:formDialogVisible', false)
-            this.$emit('updateTableList')
+            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>
diff --git a/src/views/company-manage/components/company-card.vue b/src/views/company-manage/components/company-card.vue
index ac3b424b..5d74244f 100644
--- a/src/views/company-manage/components/company-card.vue
+++ b/src/views/company-manage/components/company-card.vue
@@ -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;
diff --git a/src/views/company-manage/index.vue b/src/views/company-manage/index.vue
index 9eaf4de8..2cd72157 100644
--- a/src/views/company-manage/index.vue
+++ b/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
         },
     },
diff --git a/vue.config.js b/vue.config.js
index 9691ed13..d165b854 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,137 +1,138 @@
-"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
 // 这里只列一部分，具体配置参考文档
 module.exports = {
-  // 部署生产环境和开发环境下的URL。
-  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
-  // 例如 https://www.bonus.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.bonus.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
-  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-  outputDir: "dist",
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
-  assetsDir: "static",
-  // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === "development",
-  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
-  productionSourceMap: false,
-  // webpack-dev-server 相关配置
-  devServer: {
-    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`,
-        changeOrigin: true,
-        pathRewrite: {
-          ["^" + process.env.VUE_APP_BASE_API]: "",
+    // 部署生产环境和开发环境下的URL。
+    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
+    // 例如 https://www.bonus.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.bonus.vip/admin/，则设置 baseUrl 为 /admin/。
+    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
+    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
+    outputDir: 'dist',
+    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
+    assetsDir: 'static',
+    // 是否开启eslint保存检测，有效值：ture | false | 'error'
+    lintOnSave: process.env.NODE_ENV === 'development',
+    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
+    productionSourceMap: false,
+    // webpack-dev-server 相关配置
+    devServer: {
+        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]: '',
+                },
+            },
+            '/api': {
+                target: 'http://192.168.0.21:17861',
+                //设置允许跨域——此处我经过测试发现可有可无
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/api': '',
+                },
+            },
         },
-      },
-      "/api": {
-        target: "http://192.168.0.21:17861",
-        //设置允许跨域——此处我经过测试发现可有可无
-        changeOrigin: true,
-        pathRewrite: {
-          "^/api": "",
+        disableHostCheck: true,
+    },
+    css: {
+        loaderOptions: {
+            sass: {
+                sassOptions: { outputStyle: 'expanded' },
+            },
         },
-      },
     },
-    disableHostCheck: true,
-  },
-  css: {
-    loaderOptions: {
-      sass: {
-        sassOptions: { outputStyle: "expanded" },
-      },
-    },
-  },
-  configureWebpack: {
-    name: name,
-    resolve: {
-      alias: {
-        "@": resolve("src"),
-      },
-    },
-    plugins: [
-      // http://doc.bonus.vip/bonus-vue/other/faq.html#使用gzip解压缩静态文件
-      new CompressionPlugin({
-        cache: false, // 不启用文件缓存
-        test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
-        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
-
-    // set svg-sprite-loader
-    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
-    config.module
-      .rule("icons")
-      .test(/\.svg$/)
-      .include.add(resolve("src/assets/icons"))
-      .end()
-      .use("svg-sprite-loader")
-      .loader("svg-sprite-loader")
-      .options({
-        symbolId: "icon-[name]",
-      })
-      .end();
-
-    config.when(process.env.NODE_ENV !== "development", (config) => {
-      config
-        .plugin("ScriptExtHtmlWebpackPlugin")
-        .after("html")
-        .use("script-ext-html-webpack-plugin", [
-          {
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-            inline: /runtime\..*\.js$/,
-          },
-        ])
-        .end();
-
-      config.optimization.splitChunks({
-        chunks: "all",
-        cacheGroups: {
-          libs: {
-            name: "chunk-libs",
-            test: /[\\/]node_modules[\\/]/,
-            priority: 10,
-            chunks: "initial", // only package third parties that are initially dependent
-          },
-          elementUI: {
-            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
-            minChunks: 3, //  minimum common number
-            priority: 5,
-            reuseExistingChunk: true,
-          },
+    configureWebpack: {
+        name: name,
+        resolve: {
+            alias: {
+                '@': resolve('src'),
+            },
         },
-      });
-      config.optimization.runtimeChunk("single");
-    });
-  },
-};
+        plugins: [
+            // http://doc.bonus.vip/bonus-vue/other/faq.html#使用gzip解压缩静态文件
+            new CompressionPlugin({
+                cache: false, // 不启用文件缓存
+                test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
+                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
+
+        // set svg-sprite-loader
+        config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
+        config.module
+            .rule('icons')
+            .test(/\.svg$/)
+            .include.add(resolve('src/assets/icons'))
+            .end()
+            .use('svg-sprite-loader')
+            .loader('svg-sprite-loader')
+            .options({
+                symbolId: 'icon-[name]',
+            })
+            .end()
+
+        config.when(process.env.NODE_ENV !== 'development', (config) => {
+            config
+                .plugin('ScriptExtHtmlWebpackPlugin')
+                .after('html')
+                .use('script-ext-html-webpack-plugin', [
+                    {
+                        // `runtime` must same as runtimeChunk name. default is `runtime`
+                        inline: /runtime\..*\.js$/,
+                    },
+                ])
+                .end()
+
+            config.optimization.splitChunks({
+                chunks: 'all',
+                cacheGroups: {
+                    libs: {
+                        name: 'chunk-libs',
+                        test: /[\\/]node_modules[\\/]/,
+                        priority: 10,
+                        chunks: 'initial', // only package third parties that are initially dependent
+                    },
+                    elementUI: {
+                        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
+                        minChunks: 3, //  minimum common number
+                        priority: 5,
+                        reuseExistingChunk: true,
+                    },
+                },
+            })
+            config.optimization.runtimeChunk('single')
+        })
+    },
+}