公司注册功页面提交

prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    tabWidth: 4,
+    semi: false,
+    vueIndentScriptAndStyle: false,
+    singleQuote: true,
+    trailingComma: 'all',
+    proseWrap: 'never',
+    htmlWhitespaceSensitivity: 'strict',
+    endOfLine: 'auto',
+}

src/api/company-manage/index.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+/**
+ *  @data 参数 公司注册接口
+ */
+export const addCompanyAPI = (data) => {
+    return request.post('/system/dept', data)
+}

src/plugins/modal.js

@@ -1,6 +1,6 @@
 import { Message, MessageBox, Notification, Loading } from 'element-ui'
 
-let loadingInstance;
+let loadingInstance
 
 export default {
     // 消息提示
@@ -9,31 +9,34 @@ export default {
     },
     // 错误消息
     msgError(content) {
+        Message.closeAll()
         Message.error(content)
     },
     // 成功消息
     msgSuccess(content) {
+        Message.closeAll()
         Message.success(content)
     },
     // 警告消息
     msgWarning(content) {
+        Message.closeAll()
         Message.warning(content)
     },
     // 弹出提示
     alert(content) {
-    MessageBox.alert(content, "系统提示")
+        MessageBox.alert(content, '系统提示')
     },
     // 错误提示
     alertError(content) {
-    MessageBox.alert(content, "系统提示", { type: 'error' })
+        MessageBox.alert(content, '系统提示', { type: 'error' })
     },
     // 成功提示
     alertSuccess(content) {
-    MessageBox.alert(content, "系统提示", { type: 'success' })
+        MessageBox.alert(content, '系统提示', { type: 'success' })
     },
     // 警告提示
     alertWarning(content) {
-    MessageBox.alert(content, "系统提示", { type: 'warning' })
+        MessageBox.alert(content, '系统提示', { type: 'warning' })
     },
     // 通知提示
     notify(content) {
@@ -41,7 +44,7 @@ export default {
     },
     // 错误通知
     notifyError(content) {
-    Notification.error(content);
+        Notification.error(content)
     },
     // 成功通知
     notifySuccess(content) {
@@ -53,18 +56,18 @@ export default {
     },
     // 确认窗体
     confirm(content) {
-    return MessageBox.confirm(content, "系统提示", {
+        return MessageBox.confirm(content, '系统提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
-      type: "warning",
+            type: 'warning',
         })
     },
     // 提交内容
     prompt(content) {
-    return MessageBox.prompt(content, "系统提示", {
+        return MessageBox.prompt(content, '系统提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
-      type: "warning",
+            type: 'warning',
         })
     },
     // 打开遮罩层
@@ -72,12 +75,12 @@ export default {
         loadingInstance = Loading.service({
             lock: true,
             text: content,
-      spinner: "el-icon-loading",
+            spinner: 'el-icon-loading',
-      background: "rgba(0, 0, 0, 0.7)",
+            background: 'rgba(0, 0, 0, 0.7)',
         })
     },
     // 关闭遮罩层
     closeLoading() {
-    loadingInstance.close();
+        loadingInstance.close()
-  }
+    },
 }

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

@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <el-dialog
+            width="50%"
+            title="公司注册"
+            :visible.sync="dialogVisible"
+            :before-close="handleClose"
+        >
+            <el-form
+                label-width="120px"
+                :model="addOrEditForm"
+                ref="addOrEditFormRef"
+            >
+                <h3>公司信息</h3>
+                <el-form-item label="公司名称：" prop="deptName">
+                    <el-input v-model="addOrEditForm.deptName" />
+                </el-form-item>
+                <el-form-item label="公司简称：" prop="deptAbbreviation">
+                    <el-input v-model="addOrEditForm.deptAbbreviation" />
+                </el-form-item>
+                <el-form-item label="公司概述：" prop="remark">
+                    <el-input v-model="addOrEditForm.remark" type="textarea" />
+                </el-form-item>
+                <h3>基础设置</h3>
+                <el-form-item label="默认密码：" prop="password">
+                    <el-input
+                        type="textarea"
+                        v-model="addOrEditForm.password"
+                    />
+                </el-form-item>
+                <el-form-item label="LOGO设置：" prop="logo">
+                    <el-input type="textarea" v-model="addOrEditForm.logo" />
+                </el-form-item>
+                <h3>默认管理员</h3>
+                <el-form-item label="姓名：" prop="nickName">
+                    <el-input v-model="addOrEditForm.nickName" />
+                </el-form-item>
+                <el-form-item label="手机号码：" prop="phonenumber">
+                    <el-input v-model="addOrEditForm.phonenumber" />
+                </el-form-item>
+                <el-form-item label="角色：">
+                    <el-input type="textarea" />
+                </el-form-item>
+                <el-form-item class="handle">
+                    <el-button
+                        @click="
+                            () => {
+                                $emit('update:formDialogVisible', false)
+                            }
+                        "
+                    >
+                        取消
+                    </el-button>
+                    <el-button type="primary" @click="onSubmitForm">
+                        保存
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { addCompanyAPI } from '@/api/company-manage/index.js'
+export default {
+    props: {
+        formDialogVisible: {
+            type: Boolean,
+            default: () => false,
+        },
+    },
+    data() {
+        return {
+            // 新增或修改接口
+            addOrEditForm: {
+                deptName: '',
+                deptAbbreviation: '',
+                remark: '',
+                password: '',
+                logo: '',
+                nickName: '',
+                phonenumber: '',
+                userName: '',
+                orderNum: 200,
+            },
+        }
+    },
+
+    computed: {
+        dialogVisible: {
+            get() {
+                return this.formDialogVisible
+            },
+        },
+    },
+    methods: {
+        handleClose() {
+            this.$emit('update:formDialogVisible', false)
+        },
+        async onSubmitForm() {
+            const res = await addCompanyAPI(this.addOrEditForm)
+            if (res.code === 200) {
+                this.$modal.msgSuccess('新增成功')
+            }
+            this.$emit('update:formDialogVisible', false)
+        },
+    },
+    watch: {
+        formDialogVisible: {
+            handler(newValue) {
+                if (!newValue) {
+                    this.$refs.addOrEditFormRef.resetFields()
+                }
+            },
+            deep: true,
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .handle .el-form-item__content {
+    text-align: right;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+    <div class="company-card">
+        <div class="company-info">
+            <div> 头像 </div>
+            <div>
+                <div>
+                    安徽送变电工程有限公司
+                    <span> 启用中 </span>
+                </div>
+
+                <p> 秉承专业.... </p>
+            </div>
+        </div>
+
+        <div>
+            <div>
+                <div>用户</div>
+                <div>20</div>
+            </div>
+            <div>
+                <div>用户</div>
+                <div>20</div>
+            </div>
+            <div>
+                <div>用户</div>
+                <div>20</div>
+            </div>
+        </div>
+        <div>
+            <div>
+                <div>详情操作</div>
+            </div>
+            <div>
+                <div>详情操作</div>
+            </div>
+            <div>
+                <div>详情操作</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.company-card {
+    background-color: #f7f8fc;
+
+    .company-info {
+        display: flex;
+        align-items: center;
+    }
+}
+</style>

src/views/company-manage/index.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="app-container">
+        <el-form ref="queryForm" size="small" :inline="true">
+            <el-form-item>
+                <el-input placeholder="请输入搜索关键词" />
+            </el-form-item>
+
+            <el-form-item>
+                <el-button
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="onRegisterCompany"
+                >
+                    注册公司
+                </el-button>
+            </el-form-item>
+        </el-form>
+
+        <div class="company-list">
+            <CompanyCard class="company-items" />
+            <CompanyCard class="company-items" />
+            <CompanyCard class="company-items" />
+        </div>
+
+        <AddForm :formDialogVisible.sync="formDialogVisible" />
+    </div>
+</template>
+
+<script>
+import AddForm from './components/add-form'
+import CompanyCard from './components/company-card'
+export default {
+    components: {
+        AddForm,
+        CompanyCard,
+    },
+    data() {
+        return {
+            formDialogVisible: false,
+        }
+    },
+    methods: {
+        onRegisterCompany() {
+            this.formDialogVisible = true
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.company-list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .company-items {
+        width: calc((100% - 30px) / 3);
+        margin-right: 15px;
+    }
+
+    & .company-items:nth-child(3n) {
+        margin-right: 0;
+    }
+}
+</style>

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
@@ -20,119 +20,118 @@ module.exports = {
   // 例如 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',
+  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://localhost:18080`,
+        target: `http://192.168.2.209:38080`,
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
+          ["^" + process.env.VUE_APP_BASE_API]: "",
-        }
+        },
       },
       "/api": {
-        "target" : "http://192.168.0.21:17861",
+        target: "http://192.168.0.21:17861",
         //设置允许跨域——此处我经过测试发现可有可无
-        "changeOrigin" : true,
+        changeOrigin: true,
-        "pathRewrite" : {
+        pathRewrite: {
-          "^/api" : ""
+          "^/api": "",
-        }
         },
       },
-    disableHostCheck: true
+    },
+    disableHostCheck: true,
   },
   css: {
     loaderOptions: {
       sass: {
-        sassOptions: { outputStyle: "expanded" }
+        sassOptions: { outputStyle: "expanded" },
-      }
+      },
-    }
+    },
   },
   configureWebpack: {
     name: name,
     resolve: {
       alias: {
-        '@': resolve('src')
+        "@": 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]',            // 压缩后的文件名
+        filename: "[path][base].gz[query]", // 压缩后的文件名
-        algorithm: 'gzip',                             // 使用gzip压缩
+        algorithm: "gzip", // 使用gzip压缩
         minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩
-        deleteOriginalAssets: false                    // 压缩后删除原文件
+        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')
+      .rule("icons")
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
-    config.module
-      .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$/
+            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
+            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
+            reuseExistingChunk: true,
-              }
+          },
-            }
+        },
-          })
+      });
-          config.optimization.runtimeChunk('single')
+      config.optimization.runtimeChunk("single");
-    })
+    });
-  }
+  },
-}
+};