公司业绩管理页面新增

prettier.config.js

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

src/components/DialogModel/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <!-- 弹框组件 -->
+    <div>
+        <el-dialog
+            :title="dialogConfig.outerTitle"
+            :width="dialogConfig.outerWidth"
+            :visible.sync="dialogConfig.outerVisible"
+            v-if="dialogConfig.outerVisible"
+            :before-close="handleCloseOuter"
+            append-to-body
+        >
+            <!-- 外层弹框内容 -->
+            <slot name="outerContent"></slot>
+
+            <!-- 内层对话框 -->
+            <el-dialog
+                :title="dialogConfig.innerTitle"
+                :width="dialogConfig.innerWidth"
+                :visible.sync="dialogConfig.innerVisible"
+                v-if="dialogConfig.innerVisible"
+                :before-close="handleCloseInner"
+                append-to-body
+            >
+                <!-- 内层弹框内容 -->
+                <slot name="innerContent"></slot>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        /* 配置项 */
+        dialogConfig: {
+            type: Object,
+            default: () => {
+                return {}
+            },
+        },
+    },
+    methods: {
+        /* 右上角关闭外层 */
+        handleCloseOuter() {
+            /* 通知父组件更改弹框显示值 */
+            this.$emit('closeDialogOuter', false)
+        },
+        /* 右上角关闭内层 */
+        handleCloseInner() {
+            /* 通知父组件更改弹框显示值 */
+            this.$emit('closeDialogInner', false)
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog {
+    display: flex !important;
+    flex-direction: column !important;
+    margin: 0 !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    max-height: 100vh !important;
+    min-height: 100vh;
+    .el-dialog__body {
+        flex: 1;
+        overflow-y: scroll !important;
+    }
+    .dialog-content {
+        padding: 20px;
+    }
+}
+</style>

src/views/company-manage/performance-manage/components/addAndEditForm.vue

@@ -0,0 +1,193 @@
+<template>
+    <div>
+        <el-form :model="addAndEditForm" :rules="addAndEditRules" ref="login" label-width="0px" label-position="top">
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="工程名称" prop="proName">
+                        <el-input v-model="addAndEditForm.proName" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="电压等级" prop="level">
+                        <el-input v-model="addAndEditForm.level" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="起止时间" prop="startTime">
+                        <el-input v-model="addAndEditForm.startTime" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="竣工日期" prop="endTime">
+                        <el-input v-model="addAndEditForm.endTime" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="变电站座数" prop="num">
+                        <el-input v-model="addAndEditForm.num" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="线路建设规模" prop="scale">
+                        <el-input v-model="addAndEditForm.scale" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="承包范围" prop="fw">
+                        <el-input v-model="addAndEditForm.fw" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="业主单位" prop="unit">
+                        <el-input v-model="addAndEditForm.unit" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="业务单位联系方式" prop="unitPhone">
+                        <el-input v-model="addAndEditForm.unitPhone" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <div style="display: flex; align-items: center; padding: 8px 0">
+            <div> 项目关键人员 </div>
+            <el-button :icon="CirclePlus" type="primary" link @click="onHandleAdd">添加</el-button>
+        </div>
+
+        <el-table :data="addTableList" stripe style="width: 100%">
+            <el-table-column label="序号" width="55" type="index" />
+            <el-table-column align="center" label="担任职务" show-overflow-tooltip>
+                <template slot-scope="{ row }">
+                    <el-input v-model="row.zhiW" placeholder="请输入职务" clearable />
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="姓名">
+                <template slot-scope="{ row }">
+                    <el-select v-model="row.name" clearable>
+                        <el-option label="张三" value="1" />
+                        <el-option label="李四" value="2" />
+                        <el-option label="王五" value="3" />
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="zhiW" label="身份证号" show-overflow-tooltip />
+            <el-table-column align="center" prop="zhiW" label="电话" show-overflow-tooltip />
+            <el-table-column align="center" label="工作内容" show-overflow-tooltip>
+                <template slot-scope="{ row }">
+                    <el-input v-model="row.content" placeholder="请输入工作内容" clearable />
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="zhiW" label="业绩证明材料" show-overflow-tooltip>
+                <template slot-scope="scope">
+                    <el-button @click="uploadOuterVisible = true"> 上传 </el-button>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <el-button type="danger" link @click="onHandleDelete(scope)" />
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog
+            title="上传"
+            width="40%"
+            v-model="uploadOuterVisible"
+            v-if="uploadOuterVisible"
+            :before-close="(uploadOuterVisible = false)"
+            append-to-body
+        >
+            <!-- 外层弹框内容 -->
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            uploadOuterVisible: false,
+            addAndEditForm: {
+                proName: '',
+                level: '',
+                startTime: [],
+                endTime: '',
+                num: '',
+                scale: '',
+                fw: '',
+                unit: '',
+                unitPhone: '',
+            },
+            addAndEditRules: {
+                proName: [
+                    {
+                        required: true,
+                        message: '请输入输工程名称',
+                        trigger: 'blur',
+                    },
+                ],
+                level: [
+                    {
+                        required: true,
+                        message: '请输入电压等级',
+                        trigger: 'blur',
+                    },
+                ],
+                startTime: [
+                    {
+                        required: true,
+                        message: '请选择起止时间',
+                        trigger: 'blur',
+                    },
+                ],
+                endTime: [
+                    {
+                        required: true,
+                        message: '请选择竣工时间',
+                        trigger: 'blur',
+                    },
+                ],
+                fw: [
+                    {
+                        required: true,
+                        message: '请输入承包范围',
+                        trigger: 'blur',
+                    },
+                ],
+                unit: [
+                    {
+                        required: true,
+                        message: '请输入业主单位',
+                        trigger: 'blur',
+                    },
+                ],
+                unitPhone: [
+                    {
+                        required: true,
+                        message: '请输入业主单位联系方式',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+            addTableList: [],
+        }
+    },
+    methods: {
+        onHandleAdd() {
+            this.addTableList.push({
+                zhiW: '',
+                name: '',
+                content: '',
+            })
+        },
+        onHandleDelete(row) {
+            this.addTableList.splice(row.$index, 1)
+        },
+    },
+}
+</script>

src/views/company-manage/performance-manage/index.vue

@@ -0,0 +1,119 @@
+<template>
+    <!-- 公司业绩管理 -->
+    <div class="app-container">
+        <el-form :model="queryParam" ref="login" label-width="0px" class="ms-content">
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item>
+                        <el-input v-model="queryParam.projectName" placeholder="请输入工程名称" clearable> </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item>
+                        <el-date-picker
+                            v-model="timeValue"
+                            type="daterange"
+                            range-separator="~"
+                            value-format="YYYY-MM-DD"
+                            end-placeholder="结束时间"
+                            start-placeholder="开始时间"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item>
+                        <el-button type="primary">查询</el-button>
+                        <el-button>重置</el-button>
+                        <el-button type="primary" @click="onHandleAdd">新增业绩</el-button>
+                        <el-button>导出数据</el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <el-table :data="tableList" stripe style="width: 100%">
+            <el-table-column label="序号" width="55" type="index" />
+            <el-table-column
+                :key="index"
+                align="center"
+                :prop="item.prop"
+                :label="item.label"
+                show-overflow-tooltip
+                v-for="(item, index) in tableColumn"
+            />
+
+            <el-table-column label="操作" width="200" align="center">
+                <template #default="{ row }">
+                    <el-button type="success" size="small">详情</el-button>
+                    <el-button type="primary" size="small">编辑</el-button>
+                    <el-button type="danger" size="small">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
+            <template slot="outerContent">
+                <AddAndEditForm />
+            </template>
+        </DialogModel>
+    </div>
+</template>
+
+<script>
+import DialogModel from '@/components/DialogModel/index'
+import AddAndEditForm from './components/addAndEditForm.vue'
+export default {
+    components: {
+        DialogModel,
+        AddAndEditForm,
+    },
+    data() {
+        return {
+            dialogConfig: {
+                outerTitle: '新增',
+                innerTitle: false,
+                outerWidth: '80%',
+                outerVisible: false,
+                innerVisible: false,
+            },
+            queryParam: {
+                projectName: '',
+                startTime: '',
+                endTime: '',
+            },
+            timeValue: [],
+            tableList: [
+                {
+                    projectName: '测试工程1',
+                },
+                {
+                    projectName: '测试工程2',
+                },
+                {
+                    projectName: '测试工程3',
+                },
+            ],
+            tableColumn: [
+                { label: '工程名称', prop: 'projectName' },
+                { label: '电压等级', prop: '' },
+                { label: '起止时间', prop: '' },
+                { label: '竣工日期', prop: '' },
+                { label: '变电站数量', prop: '' },
+                { label: '线路建设规模(折单公里)', prop: '' },
+                { label: '承包范围', prop: '' },
+                { label: '业主单位', prop: '' },
+                { label: '业主单位联系方式', prop: '' },
+                { label: '关键人员', prop: '' },
+            ],
+        }
+    },
+    methods: {
+        onHandleAdd() {
+            this.dialogConfig.outerVisible = true
+        },
+        closeDialogOuter() {
+            this.dialogConfig.outerVisible = false
+        },
+    },
+}
+</script>
+<style scoped lang="scss"></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
@@ -18,28 +18,29 @@ module.exports = {
     // 部署生产环境和开发环境下的URL。
     // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
     // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.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,
-  transpileDependencies: ["quill"],
+    transpileDependencies: ['quill'],
     // 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.0.38:58080`,
+                target: `http://192.168.0.60:8080`,
+                // target: `http://192.168.0.38:58080`,
                 changeOrigin: true,
                 pathRewrite: {
-          ["^" + process.env.VUE_APP_BASE_API]: "",
+                    ['^' + process.env.VUE_APP_BASE_API]: '',
                 },
             },
         },
@@ -48,7 +49,7 @@ module.exports = {
     css: {
         loaderOptions: {
             sass: {
-        sassOptions: { outputStyle: "expanded" },
+                sassOptions: { outputStyle: 'expanded' },
             },
         },
     },
@@ -56,7 +57,7 @@ module.exports = {
         name: name,
         resolve: {
             alias: {
-        "@": resolve("src"),
+                '@': resolve('src'),
             },
         },
         plugins: [
@@ -64,67 +65,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')
-    });
+        })
     },
-};
+}