添加公用组件

src/App.vue

@@ -17,6 +17,7 @@ export default {
 </script>
 <style lang="scss">
 @import "assets/style";
+@import "assets/simple";
 * {
   padding: 0;
   margin: 0;

src/assets/simple.scss

@@ -0,0 +1,829 @@
+// simple
+.simple {
+    &-container {
+        overflow: auto;
+        padding: 20px;
+        .el {
+            &-form {
+                &-item {
+                    display: flex;
+                    margin: 0;
+                    padding: 0;
+                    .el-select,
+                    .el-input {
+                        width: 100%;
+                    }
+                    &__label {
+                        white-space: nowrap;
+                    }
+                    &__content {
+                        flex: 1;
+                    }
+                }
+            }
+            &-col {
+                padding-bottom: 20px;
+            }
+        }
+    }
+    &-title {
+        padding-bottom: 20px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+    &-table {
+        font-size: 12px;
+        border: 1px solid #dddddd;
+        border-bottom: none;
+    }
+    &-pagination {
+        padding-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+    }
+    &-drawer {
+        &-container {
+            padding: 20px;
+        }
+        &-footer {
+            display: flex;
+            width: 100%;
+            justify-content: flex-end;
+            padding: 20px;
+            border-top: 1px solid #dddddd;
+            position: absolute;
+            bottom: 0;
+        }
+    }
+}
+// padding
+.padding {
+    &-top {
+        &-5 {
+            padding-top: 5px;
+        }
+        &-10 {
+            padding-top: 10px;
+        }
+        &-15 {
+            padding-top: 15px;
+        }
+        &-20 {
+            padding-top: 20px;
+        }
+        &-25 {
+            padding-top: 25px;
+        }
+        &-30 {
+            padding-top: 30px;
+        }
+        &-35 {
+            padding-top: 35px;
+        }
+        &-40 {
+            padding-top: 40px;
+        }
+        &-45 {
+            padding-top: 45px;
+        }
+        &-50 {
+            padding-top: 50px;
+        }
+        &-55 {
+            padding-top: 55px;
+        }
+        &-60 {
+            padding-top: 60px;
+        }
+        &-65 {
+            padding-top: 65px;
+        }
+        &-70 {
+            padding-top: 70px;
+        }
+        &-75 {
+            padding-top: 75px;
+        }
+        &-80 {
+            padding-top: 80px;
+        }
+        &-85 {
+            padding-top: 85px;
+        }
+        &-90 {
+            padding-top: 90px;
+        }
+        &-95 {
+            padding-top: 95px;
+        }
+        &-100 {
+            padding-top: 100px;
+        }
+    }
+    &-bottom {
+        &-5 {
+            padding-bottom: 5px;
+        }
+        &-10 {
+            padding-bottom: 10px;
+        }
+        &-15 {
+            padding-bottom: 15px;
+        }
+        &-20 {
+            padding-bottom: 20px;
+        }
+        &-25 {
+            padding-bottom: 25px;
+        }
+        &-30 {
+            padding-bottom: 30px;
+        }
+        &-35 {
+            padding-bottom: 35px;
+        }
+        &-40 {
+            padding-bottom: 40px;
+        }
+        &-45 {
+            padding-bottom: 45px;
+        }
+        &-50 {
+            padding-bottom: 50px;
+        }
+        &-55 {
+            padding-bottom: 55px;
+        }
+        &-60 {
+            padding-bottom: 60px;
+        }
+        &-65 {
+            padding-bottom: 65px;
+        }
+        &-70 {
+            padding-bottom: 70px;
+        }
+        &-75 {
+            padding-bottom: 75px;
+        }
+        &-80 {
+            padding-bottom: 80px;
+        }
+        &-85 {
+            padding-bottom: 85px;
+        }
+        &-90 {
+            padding-bottom: 90px;
+        }
+        &-95 {
+            padding-bottom: 95px;
+        }
+        &-100 {
+            padding-bottom: 100px;
+        }
+    }
+    &-left {
+        &-5 {
+            padding-left: 5px;
+        }
+        &-10 {
+            padding-left: 10px;
+        }
+        &-15 {
+            padding-left: 15px;
+        }
+        &-20 {
+            padding-left: 20px;
+        }
+        &-25 {
+            padding-left: 25px;
+        }
+        &-30 {
+            padding-left: 30px;
+        }
+        &-35 {
+            padding-left: 35px;
+        }
+        &-40 {
+            padding-left: 40px;
+        }
+        &-45 {
+            padding-left: 45px;
+        }
+        &-50 {
+            padding-left: 50px;
+        }
+        &-55 {
+            padding-left: 55px;
+        }
+        &-60 {
+            padding-left: 60px;
+        }
+        &-65 {
+            padding-left: 65px;
+        }
+        &-70 {
+            padding-left: 70px;
+        }
+        &-75 {
+            padding-left: 75px;
+        }
+        &-80 {
+            padding-left: 80px;
+        }
+        &-85 {
+            padding-left: 85px;
+        }
+        &-90 {
+            padding-left: 90px;
+        }
+        &-95 {
+            padding-left: 95px;
+        }
+        &-100 {
+            padding-left: 100px;
+        }
+    }
+    &-right {
+        &-5 {
+            padding-right: 5px;
+        }
+        &-10 {
+            padding-right: 10px;
+        }
+        &-15 {
+            padding-right: 15px;
+        }
+        &-20 {
+            padding-right: 20px;
+        }
+        &-25 {
+            padding-right: 25px;
+        }
+        &-30 {
+            padding-right: 30px;
+        }
+        &-35 {
+            padding-right: 35px;
+        }
+        &-40 {
+            padding-right: 40px;
+        }
+        &-45 {
+            padding-right: 45px;
+        }
+        &-50 {
+            padding-right: 50px;
+        }
+        &-55 {
+            padding-right: 55px;
+        }
+        &-60 {
+            padding-right: 60px;
+        }
+        &-65 {
+            padding-right: 65px;
+        }
+        &-70 {
+            padding-right: 70px;
+        }
+        &-75 {
+            padding-right: 75px;
+        }
+        &-80 {
+            padding-right: 80px;
+        }
+        &-85 {
+            padding-right: 85px;
+        }
+        &-90 {
+            padding-right: 90px;
+        }
+        &-95 {
+            padding-right: 95px;
+        }
+        &-100 {
+            padding-right: 100px;
+        }
+    }
+}
+// margin
+.margin {
+    &-top {
+        &-5 {
+            margin-top: 5px;
+        }
+        &-10 {
+            margin-top: 10px;
+        }
+        &-15 {
+            margin-top: 15px;
+        }
+        &-20 {
+            margin-top: 20px;
+        }
+        &-25 {
+            margin-top: 25px;
+        }
+        &-30 {
+            margin-top: 30px;
+        }
+        &-35 {
+            margin-top: 35px;
+        }
+        &-40 {
+            margin-top: 40px;
+        }
+        &-45 {
+            margin-top: 45px;
+        }
+        &-50 {
+            margin-top: 50px;
+        }
+        &-55 {
+            margin-top: 55px;
+        }
+        &-60 {
+            margin-top: 60px;
+        }
+        &-65 {
+            margin-top: 65px;
+        }
+        &-70 {
+            margin-top: 70px;
+        }
+        &-75 {
+            margin-top: 75px;
+        }
+        &-80 {
+            margin-top: 80px;
+        }
+        &-95 {
+            margin-top: 95px;
+        }
+        &-100 {
+            margin-top: 100px;
+        }
+    }
+    &-bottom {
+        &-5 {
+            margin-bottom: 5px;
+        }
+        &-10 {
+            margin-bottom: 10px;
+        }
+        &-15 {
+            margin-bottom: 15px;
+        }
+        &-20 {
+            margin-bottom: 20px;
+        }
+        &-25 {
+            margin-bottom: 25px;
+        }
+        &-30 {
+            margin-bottom: 30px;
+        }
+        &-35 {
+            margin-bottom: 35px;
+        }
+        &-40 {
+            margin-bottom: 40px;
+        }
+        &-45 {
+            margin-bottom: 45px;
+        }
+        &-50 {
+            margin-bottom: 50px;
+        }
+        &-55 {
+            margin-bottom: 55px;
+        }
+        &-60 {
+            margin-bottom: 60px;
+        }
+        &-65 {
+            margin-bottom: 65px;
+        }
+        &-70 {
+            margin-bottom: 70px;
+        }
+        &-75 {
+            margin-bottom: 75px;
+        }
+        &-80 {
+            margin-bottom: 80px;
+        }
+        &-85 {
+            margin-bottom: 85px;
+        }
+        &-90 {
+            margin-bottom: 90px;
+        }
+        &-95 {
+            margin-bottom: 95px;
+        }
+        &-100 {
+            margin-bottom: 100px;
+        }
+    }
+    &-left {
+        &-5 {
+            margin-left: 5px;
+        }
+        &-10 {
+            margin-left: 10px;
+        }
+        &-15 {
+            margin-left: 15px;
+        }
+        &-20 {
+            margin-left: 20px;
+        }
+        &-25 {
+            margin-left: 25px;
+        }
+        &-30 {
+            margin-left: 30px;
+        }
+        &-35 {
+            margin-left: 35px;
+        }
+        &-40 {
+            margin-left: 40px;
+        }
+        &-45 {
+            margin-left: 45px;
+        }
+        &-50 {
+            margin-left: 50px;
+        }
+        &-55 {
+            margin-left: 55px;
+        }
+        &-60 {
+            margin-left: 60px;
+        }
+        &-65 {
+            margin-left: 65px;
+        }
+        &-70 {
+            margin-left: 70px;
+        }
+        &-75 {
+            margin-left: 75px;
+        }
+        &-80 {
+            margin-left: 80px;
+        }
+        &-85 {
+            margin-left: 85px;
+        }
+        &-90 {
+            margin-left: 90px;
+        }
+        &-95 {
+            margin-left: 95px;
+        }
+        &-100 {
+            margin-left: 100px;
+        }
+    }
+    &-right {
+        &-5 {
+            margin-right: 5px;
+        }
+        &-10 {
+            margin-right: 10px;
+        }
+        &-15 {
+            margin-right: 15px;
+        }
+        &-20 {
+            margin-right: 20px;
+        }
+        &-25 {
+            margin-right: 25px;
+        }
+        &-30 {
+            margin-right: 30px;
+        }
+        &-35 {
+            margin-right: 35px;
+        }
+        &-40 {
+            margin-right: 40px;
+        }
+        &-45 {
+            margin-right: 45px;
+        }
+        &-50 {
+            margin-right: 50px;
+        }
+        &-55 {
+            margin-right: 55px;
+        }
+        &-60 {
+            margin-right: 60px;
+        }
+        &-65 {
+            margin-right: 65px;
+        }
+        &-70 {
+            margin-right: 70px;
+        }
+        &-75 {
+            margin-right: 75px;
+        }
+        &-80 {
+            margin-right: 80px;
+        }
+        &-85 {
+            margin-right: 85px;
+        }
+        &-90 {
+            margin-right: 90px;
+        }
+        &-95 {
+            margin-right: 95px;
+        }
+        &-100 {
+            margin-right: 100px;
+        }
+    }
+}
+// text
+.text {
+    &-align {
+        &-center {
+            text-align: center;
+        }
+        &-right {
+            text-align: right;
+        }
+        &-left {
+            text-align: left;
+        }
+    }
+    &-line-through {
+        text-decoration-line: line-through;
+    }
+    &-underline {
+        text-decoration: underline;
+    }
+}
+// font
+.font {
+    &-weight {
+        &-normal {
+            font-weight: normal;
+        }
+        &-bold {
+            font-weight: bold;
+        }
+    }
+    &-size {
+        &-12 {
+            font-size: 12px;
+        }
+        &-14 {
+            font-size: 14px;
+        }
+        &-16 {
+            font-size: 16px;
+        }
+        &-18 {
+            font-size: 18px;
+        }
+        &-20 {
+            font-size: 20px;
+        }
+        &-22 {
+            font-size: 22px;
+        }
+        &-24 {
+            font-size: 24px;
+        }
+        &-26 {
+            font-size: 26px;
+        }
+        &-28 {
+            font-size: 28px;
+        }
+        &-30 {
+            font-size: 30px;
+        }
+        &-32 {
+            font-size: 32px;
+        }
+        &-34 {
+            font-size: 34px;
+        }
+        &-36 {
+            font-size: 36px;
+        }
+        &-38 {
+            font-size: 38px;
+        }
+        &-40 {
+            font-size: 40px;
+        }
+        &-42 {
+            font-size: 42px;
+        }
+        &-44 {
+            font-size: 44px;
+        }
+        &-46 {
+            font-size: 46px;
+        }
+        &-48 {
+            font-size: 48px;
+        }
+        &-50 {
+            font-size: 50px;
+        }
+    }
+}
+// flex
+.flex {
+    display: flex;
+    &-1 {
+        flex: 1;
+    }
+    &-auto {
+        @extend .flex;
+        flex: auto;
+    }
+    &-wrap {
+        @extend .flex;
+        flex-wrap: wrap;
+    }
+    &-column {
+        @extend .flex;
+        flex-direction: column;
+    }
+    &-justify {
+        &-start {
+            @extend .flex;
+            justify-content: flex-start;
+        }
+        &-end {
+            @extend .flex;
+            justify-content: flex-end;
+        }
+        &-center {
+            @extend .flex;
+            justify-content: center;
+        }
+        &-between {
+            @extend .flex;
+            justify-content: space-between;
+        }
+        &-align {
+            &-start {
+                @extend .flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+            &-end {
+                @extend .flex;
+                justify-content: flex-end;
+                align-items: center;
+            }
+            &-center {
+                @extend .flex;
+                justify-content: center;
+                align-items: center;
+            }
+            &-between {
+                @extend .flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            &-around {
+                @extend .flex;
+                justify-content: space-around;
+                align-items: center;
+            }
+        }
+    }
+}
+// color
+.color {
+    &-ffffff {
+        color: #ffffff;
+    }
+    &-7f7f7f {
+        color: #7f7f7f;
+    }
+    &-10afd1 {
+        color: #10afd1;
+    }
+    &-141414 {
+        color: #141414;
+    }
+    &-414141 {
+        color: #414141;
+    }
+    &-576b95 {
+        color: #576b95;
+    }
+    &-b5b5b5 {
+        color: #b5b5b5;
+    }
+    &-6388E3 {
+        color: #6388e3;
+    }
+}
+// background
+.background {
+    &-fbfbfb {
+        background: #fbfbfb;
+    }
+    &-f3f3f3 {
+        background: #f3f3f3;
+    }
+    &-10afd1 {
+        background: #10afd1;
+    }
+    &-f1f1f3 {
+        background: #f1f1f3;
+    }
+    &-efefef {
+        background: #efefef;
+    }
+}
+// position
+.position {
+    &-relative {
+        position: relative;
+    }
+}
+// overflow
+.overflow {
+    &-hidden {
+        overflow: hidden;
+    }
+}
+// display
+.display {
+    &-block {
+        display: block;
+    }
+    &-inline {
+        display: inline;
+    }
+    &-inline-block {
+        display: inline-block;
+    }
+}
+// cursor
+.cursor {
+    &-pointer {
+        cursor: pointer;
+    }
+}
+// white-space
+.white {
+    &-space {
+        &-nowrap {
+            white-space: nowrap;
+        }
+    }
+}
+// vertical-align
+.vertical-align {
+    &-top {
+        vertical-align: top;
+    }
+    &-middle {
+        vertical-align: middle;
+    }
+    &-bottom {
+        vertical-align: bottom;
+    }
+}
+// line-clamp
+.line-clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    &-1 {
+        @extend .line-clamp;
+        -webkit-line-clamp: 1;
+    }
+    &-2 {
+        @extend .line-clamp;
+        -webkit-line-clamp: 2;
+    }
+    &-3 {
+        @extend .line-clamp;
+        -webkit-line-clamp: 3;
+    }
+    &-4 {
+        @extend .line-clamp;
+        -webkit-line-clamp: 4;
+    }
+}

src/pages/main/performance/components/form.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author       : yuanrunwei
+ * @Date         : 2021-11-01 18:03:02
+ * @LastEditors  : yuanrunwei
+ * @LastEditTime : 2021-11-02 18:10:37
+ * @FilePath     : \spfm-front\src\pages\main\dataConfig\components\form.vue
+-->
+<template>
+    <el-form :inline="true" :model="object">
+        <el-row :gutter="24">
+            <el-col
+                v-for="({ props, label, type, dictionary }, index) in form"
+                :key="index"
+                :span="6"
+                ><el-form-item :label="label">
+                    <template v-if="type === 'select'">
+                        <el-select
+                            v-model="object[props]"
+                            :placeholder="label"
+                            filterable
+                            clearable
+                        >
+                            <el-option
+                                :label="label"
+                                :value="value"
+                                v-for="({ label, value }, index) in dictionary"
+                                :key="index"
+                            ></el-option> </el-select
+                    ></template> </el-form-item
+            ></el-col>
+            <el-col :span="6">
+                <el-form-item>
+                    <el-button type="primary" @click="handleSearch"
+                        >搜索</el-button
+                    >
+                </el-form-item>
+            </el-col>
+            <el-col class="flex-justify-align-end" :span="6">
+                <el-button
+                    v-for="({ label, props }, index) in handle"
+                    :key="index"
+                    @click="handleSubmit(props)"
+                >
+                    <i class="el-icon-document-add font-weight-bold" />{{
+                        label
+                    }}
+                </el-button>
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+<script>
+export default {
+    props: {
+        form: {
+            type: Array,
+            default: () => []
+        },
+        handle: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data: () => ({
+        object: {}
+    }),
+    methods: {
+        handleSearch() {
+            this.$emit("search", this.object);
+        },
+        handleSubmit(params) {
+            this.$emit(params, this.object);
+        }
+    }
+};
+</script>

src/pages/main/performance/components/pagination.vue

@@ -0,0 +1,38 @@
+<!--
+ * @Author       : yuanrunwei
+ * @Date         : 2021-11-01 18:11:59
+ * @LastEditors  : yuanrunwei
+ * @LastEditTime : 2021-11-02 14:27:11
+ * @FilePath     : \spfm-front\src\pages\main\dataConfig\components\pagination.vue
+-->
+<template>
+    <el-pagination
+        class="simple-pagination"
+        @current-change="handleChange"
+        layout="prev, pager, next"
+        background
+        :current-page="page"
+        :total="total"
+    >
+    </el-pagination>
+</template>
+<script>
+export default {
+    props: {
+        page: {
+            type: Number,
+            default: 0
+        },
+        total: {
+            type: Number,
+            default: 0
+        }
+    },
+    data: () => ({}),
+    methods: {
+        handleChange(page) {
+            this.$emit("change", page);
+        }
+    }
+};
+</script>

src/pages/main/performance/components/table.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author       : yuanrunwei
+ * @Date         : 2021-11-01 18:02:58
+ * @LastEditors  : yuanrunwei
+ * @LastEditTime : 2021-12-03 16:30:48
+ * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
+-->
+<template>
+    <el-table class="simple-table" :data="list" v-loading="loading">
+        <el-table-column
+            v-for="({ props, label, width, children }, index) in config"
+            :key="index"
+            :prop="props"
+            :width="width"
+            :label="label"
+            align="center"
+        >
+            <template v-if="children">
+                <el-table-column
+                    v-for="({ props, label, width }, index) in children"
+                    :key="index"
+                    :prop="props"
+                    :width="width"
+                    :label="label"
+                    align="center"
+                />
+            </template>
+        </el-table-column>
+        <el-table-column
+            v-if="handleRow.length"
+            label="操作"
+            :width="handleRow.length * 50"
+        >
+            <template slot-scope="scope">
+                <el-button
+                    v-for="({ label, props }, index) in handleRow"
+                    :key="index"
+                    @click="handleClick(props, scope.row)"
+                    type="text"
+                    size="small"
+                    >{{ label }}</el-button
+                >
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+<script>
+export default {
+    props: {
+        list: {
+            type: Array,
+            default: () => [],
+        },
+        config: {
+            type: Array,
+            default: () => [],
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        handleRow: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    methods: {
+        handleClick(props, row) {
+            this.$emit(props, row);
+        },
+    },
+};
+</script>

src/pages/main/performance/department.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Department</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/pages/main/performance/index.vue

@@ -0,0 +1,132 @@
+<!--
+ * @Author       : yuanrunwei
+ * @Date         : 2021-12-03 15:18:11
+ * @LastEditors  : yuanrunwei
+ * @LastEditTime : 2021-12-03 16:30:37
+ * @FilePath     : \spfm-market-front\src\pages\main\performance\index.vue
+-->
+<template>
+    <div>
+        <simple-table
+            :list="table_list"
+            :config="table_config"
+            :loading="table_loading"
+            @delete="handleDelete"
+            @check="handleCheck"
+            @edit="handleEdit"
+        ></simple-table>
+        <simple-pagination
+            :page="page"
+            :total="total"
+            @change="handleChange"
+        ></simple-pagination>
+    </div>
+</template>
+
+<script>
+import simpleTable from "./components/table.vue";
+import simplePagination from "./components/pagination.vue";
+export default {
+    components: {
+        simpleTable,
+        simplePagination,
+    },
+    data() {
+        return {
+            page: 1,
+            total: 0,
+            table_list: [],
+            table_loading: false,
+            table_handle_row: [
+                {
+                    label: "查看",
+                    props: "check",
+                },
+                {
+                    label: "修改",
+                    props: "edit",
+                },
+                {
+                    label: "删除",
+                    props: "delete",
+                },
+            ],
+            table_config: [
+                {
+                    label: "序号",
+                    props: "preCata1",
+                },
+                {
+                    label: "重点工作",
+                    props: "preCata2",
+                },
+                {
+                    label: "来源",
+                    props: "preCata3",
+                },
+                {
+                    label: "主要内容",
+                    props: "preCata4",
+                },
+                {
+                    label: "完成标志及计分方法（需体现出完成时间）",
+                    props: "preCata5",
+                },
+                {
+                    label: "分支",
+                    props: "preCata6",
+                },
+                {
+                    label: "负责人",
+                    props: "preCata7",
+                },
+                {
+                    label: "本月绩效自评",
+                    props: "dealType",
+                    width: 300,
+                    children: [
+                        {
+                            label: "本月工作内容",
+                            props: "preCata7",
+                        },
+                        {
+                            label: "本月完成情况",
+                            props: "preCata7",
+                        },
+                        {
+                            label: "本月完成情况自评",
+                            props: "preCata7",
+                        },
+                    ],
+                },
+                {
+                    label: "下月计划",
+                    props: "wordCode",
+                    children: [
+                        {
+                            label: "工作内容",
+                            props: "preCata7",
+                        },
+                        {
+                            label: "下月工作内容计分方法",
+                            props: "preCata7",
+                        },
+                    ],
+                },
+            ],
+        };
+    },
+    methods: {
+        handleInit() {},
+        handleChange(page) {
+            this.page = page;
+            this.handleInit();
+        },
+        handleEdit() {},
+        handleCheck() {},
+        handleDelete() {},
+    },
+};
+</script>
+
+<style></style>