公司注册功页面提交

2024-12-30 18:07:53 +08:00 · 2024-12-30 18:07:53 +08:00 · 72cddc1d17
parent 85477dbeb9
commit 72cddc1d17
7 changed files with 423 additions and 157 deletions
--- a/prettier.config.js
+++ b/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',
+}
--- a/src/api/company-manage/index.js
+++ b/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)
+}
--- a/src/plugins/modal.js
+++ b/src/plugins/modal.js
@ -1,83 +1,86 @@
 import { Message, MessageBox, Notification, Loading } from 'element-ui'

-let loadingInstance;
+let loadingInstance

 export default {
-  // 消息提示
-  msg(content) {
-    Message.info(content)
-  },
-  // 错误消息
-  msgError(content) {
-    Message.error(content)
-  },
-  // 成功消息
-  msgSuccess(content) {
-    Message.success(content)
-  },
-  // 警告消息
-  msgWarning(content) {
-    Message.warning(content)
-  },
-  // 弹出提示
-  alert(content) {
-    MessageBox.alert(content, "系统提示")
-  },
-  // 错误提示
-  alertError(content) {
-    MessageBox.alert(content, "系统提示", { type: 'error' })
-  },
-  // 成功提示
-  alertSuccess(content) {
-    MessageBox.alert(content, "系统提示", { type: 'success' })
-  },
-  // 警告提示
-  alertWarning(content) {
-    MessageBox.alert(content, "系统提示", { type: 'warning' })
-  },
-  // 通知提示
-  notify(content) {
-    Notification.info(content)
-  },
-  // 错误通知
-  notifyError(content) {
-    Notification.error(content);
-  },
-  // 成功通知
-  notifySuccess(content) {
-    Notification.success(content)
-  },
-  // 警告通知
-  notifyWarning(content) {
-    Notification.warning(content)
-  },
-  // 确认窗体
-  confirm(content) {
-    return MessageBox.confirm(content, "系统提示", {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: "warning",
-    })
-  },
-  // 提交内容
-  prompt(content) {
-    return MessageBox.prompt(content, "系统提示", {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: "warning",
-    })
-  },
-  // 打开遮罩层
-  loading(content) {
-    loadingInstance = Loading.service({
-      lock: true,
-      text: content,
-      spinner: "el-icon-loading",
-      background: "rgba(0, 0, 0, 0.7)",
-    })
-  },
-  // 关闭遮罩层
-  closeLoading() {
-    loadingInstance.close();
-  }
+    // 消息提示
+    msg(content) {
+        Message.info(content)
+    },
+    // 错误消息
+    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, '系统提示')
+    },
+    // 错误提示
+    alertError(content) {
+        MessageBox.alert(content, '系统提示', { type: 'error' })
+    },
+    // 成功提示
+    alertSuccess(content) {
+        MessageBox.alert(content, '系统提示', { type: 'success' })
+    },
+    // 警告提示
+    alertWarning(content) {
+        MessageBox.alert(content, '系统提示', { type: 'warning' })
+    },
+    // 通知提示
+    notify(content) {
+        Notification.info(content)
+    },
+    // 错误通知
+    notifyError(content) {
+        Notification.error(content)
+    },
+    // 成功通知
+    notifySuccess(content) {
+        Notification.success(content)
+    },
+    // 警告通知
+    notifyWarning(content) {
+        Notification.warning(content)
+    },
+    // 确认窗体
+    confirm(content) {
+        return MessageBox.confirm(content, '系统提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        })
+    },
+    // 提交内容
+    prompt(content) {
+        return MessageBox.prompt(content, '系统提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        })
+    },
+    // 打开遮罩层
+    loading(content) {
+        loadingInstance = Loading.service({
+            lock: true,
+            text: content,
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)',
+        })
+    },
+    // 关闭遮罩层
+    closeLoading() {
+        loadingInstance.close()
+    },
 }
--- a/src/views/company-manage/components/add-form.vue
+++ b/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>
--- a/src/views/company-manage/components/company-card.vue
+++ b/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>
--- a/src/views/company-manage/index.vue
+++ b/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>
--- a/vue.config.js
+++ b/vue.config.js
@ -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
@ -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",
+      "/api": {
+        target: "http://192.168.0.21:17861",
        //设置允许跨域——此处我经过测试发现可有可无
-        "changeOrigin" : true,
-        "pathRewrite" : {
-          "^/api" : ""
-        }
+        changeOrigin: true,
+        pathRewrite: {
+          "^/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]',            // 压缩后的文件名
-        algorithm: 'gzip',                             // 使用gzip压缩
-        minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩
-        deleteOriginalAssets: false                    // 压缩后删除原文件
-      })
+        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
+    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
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
+    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()
+            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')
-    })
-  }
-}
+      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");
+    });
+  },
+};