添加部分交互

src/pages/main/performance/analysis.vue

@@ -2,11 +2,11 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-12-03 15:18:11
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-03 18:19:38
+ * @LastEditTime : 2021-12-03 19:57:11
  * @FilePath     : \spfm-market-front\src\pages\main\performance\analysis.vue
 -->
 <template>
-    <div>
+    <div class="simple-container">
         <simple-table
             :list="table_list"
             :config="table_config"
@@ -32,8 +32,8 @@ export default {
                     subject: "政企能力攻坚工程",
                     origin: "八大工程",
                     content:
-                        "1、推进项目支撑能力升级，优化智慧中台运营能<br/>2、推进风险防控质量升级，打造风险防控体系<br/>3、推进集团价值能力提升，打造业务运营监控体系<br/>",
-                    mark: "1、推进项目支撑能力升级：<br/>1.1、4月完成资金管理、响应交付功能上线；<br/>1.2、6月完成政企沙盘、行业库、标杆项目库功能上线；<br/>1.3、12月完成商机管理、角色管理、欠费管理、ESOP迁移、六项重点产品甩单支撑能力建设、ICT项目支撑能力升级。",
+                        "1、推进项目支撑能力升级，优化智慧中台运营能\n2、推进风险防控质量升级，打造风险防控体系\n3、推进集团价值能力提升，打造业务运营监控体系\n",
+                    mark: "1、推进项目支撑能力升级：\n1.1、4月完成资金管理、响应交付功能上线；\n1.2、6月完成政企沙盘、行业库、标杆项目库功能上线；\n1.3、12月完成商机管理、角色管理、欠费管理、ESOP迁移、六项重点产品甩单支撑能力建设、ICT项目支撑能力升级。",
                     score: "1",
                     leader: "邱钰",
                 },

src/pages/main/performance/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container flex-justify-start">
+    <div class="performance-container flex-justify-start">
         <div>
             <el-tabs tab-position="left" v-model="name">
                 <el-tab-pane
@@ -64,7 +64,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.container {
+.performance-container {
     padding: 20px;
     height: 100%;
     &-viewport {

src/pages/main/performance/issue.vue

@@ -1,9 +1,152 @@
 <template>
-    <div>Issue</div>
+    <div>
+        <div v-if="!visible_detail" class="simple-container">
+            <simple-form
+                :form="table_form"
+                @search="handleSearch"
+            ></simple-form>
+            <simple-table
+                :list="table_list"
+                :config="table_config"
+                :loading="table_loading"
+                :handle-row="table_handle_row"
+                @detail="handleDetail"
+            ></simple-table>
+            <simple-pagination
+                :page="page"
+                :total="total"
+                @change="handleChange"
+            ></simple-pagination>
+        </div>
+        <analysis v-else />
+    </div>
 </template>
 
 <script>
-export default {};
+import analysis from "./analysis.vue";
+import simpleForm from "./components/form.vue";
+import simpleTable from "./components/table.vue";
+import simplePagination from "./components/pagination.vue";
+export default {
+    components: {
+        analysis,
+        simpleTable,
+        simpleForm,
+        simplePagination,
+    },
+    data() {
+        return {
+            page: 1,
+            rows: 10,
+            total: 0,
+            visible_detail: false,
+            table_loading: false,
+            table_search: {},
+            table_form: [
+                {
+                    label: "模板名称",
+                    props: "template_name",
+                    type: "select",
+                    dictionary: [
+                        {
+                            label: "GS",
+                            value: "GS",
+                        },
+                        {
+                            label: "KPI",
+                            value: "KPI",
+                        },
+                    ],
+                },
+                {
+                    label: "截止日期",
+                    props: "date",
+                    type: "date",
+                },
+            ],
+            table_list: [],
+            table_handle_row: [
+                {
+                    label: "查看",
+                    props: "detail",
+                },
+                {
+                    label: "修改",
+                    props: "edit",
+                },
+                {
+                    label: "撤回",
+                    props: "delete",
+                },
+            ],
+            table_config: [
+                {
+                    label: "绩效类型",
+                    props: "performance_type",
+                },
+                {
+                    label: "模板名称",
+                    props: "template_name",
+                },
+                {
+                    label: "填报事由",
+                    props: "reason",
+                },
+                {
+                    label: "填报注意事项",
+                    props: "note",
+                },
+                {
+                    label: "截止时间",
+                    props: "date",
+                },
+                {
+                    label: "接收人",
+                    props: "receiver",
+                },
+            ],
+        };
+    },
+    methods: {
+        async handleInit() {
+            this.table_loading = true;
+            const data = [];
+            let index = 0;
+            while (index < 10) {
+                data.push({
+                    performance_type: `GS`,
+                    template_name: `信息技术中心2021年度部门GS绩效计划(${index})`,
+                    reason: `填报事由${index}`,
+                    note: `填报注意事项${index}`,
+                    date: `2021.02.01`,
+                    receiver: `邱钰、郭鹏`,
+                });
+                index = index + 1;
+            }
+            this.total = index;
+            this.table_list = data;
+            this.table_loading = false;
+        },
+        handleSearch({ template_name }) {
+            this.table_search = { template_name };
+            this.handleReset();
+            this.handleInit();
+        },
+        handleChange(page) {
+            this.page = page;
+            this.handleInit();
+        },
+        handleDetail() {
+            this.visible_detail = !this.visible_detail;
+        },
+        handleReset() {
+            this.page = 1;
+        },
+    },
+    mounted() {
+        this.handleInit();
+    },
+};
 </script>
 
 <style></style>

src/pages/main/performance/mould.vue

@@ -1,17 +1,191 @@
 <template>
     <div>
-        <analysis />
+        <div class="simple-container">
+            <simple-form
+                :form="table_form"
+                :handle="table_handle"
+                @search="handleSearch"
+            ></simple-form>
+            <simple-table
+                :list="table_list"
+                :config="table_config"
+                :loading="table_loading"
+                :handle-row="table_handle_row"
+                @issue="handleVisible('issue')"
+                @detail="handleVisible('template')"
+            ></simple-table>
+            <simple-pagination
+                :page="page"
+                :total="total"
+                @change="handleChange"
+            ></simple-pagination>
+        </div>
+        <simple-dialog
+            title="查看模板"
+            width="1200px"
+            @cancel="handleVisible('template')"
+            @confirm="handleVisible('template')"
+            :visible="template_visible"
+        >
+            <analysis />
+        </simple-dialog>
+        <simple-dialog
+            title="下发"
+            width="500px"
+            @cancel="handleVisible('issue')"
+            @confirm="handleVisible('issue')"
+            :visible="issue_visible"
+        >
+            <el-form label-width="100px" :model="form">
+                <el-form-item label="填报事由">
+                    <el-input v-model="form.name"></el-input>
+                </el-form-item>
+                <el-form-item label="填报注意事项">
+                    <el-input v-model="form.region"></el-input>
+                </el-form-item>
+                <el-form-item label="截止时间">
+                    <el-input v-model="form.type"></el-input>
+                </el-form-item>
+                <el-form-item label="">
+                    <el-upload
+                        drag
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        multiple
+                    >
+                        <i class="el-icon-upload"></i>
+                        <div>上传附件</div>
+                    </el-upload>
+                </el-form-item>
+            </el-form>
+        </simple-dialog>
     </div>
 </template>
 
 <script>
 import analysis from "./analysis.vue";
+import simpleForm from "./components/form.vue";
+import simpleTable from "./components/table.vue";
+import simpleDialog from "./components/dialog.vue";
+import simplePagination from "./components/pagination.vue";
 export default {
     components: {
         analysis,
+        simpleTable,
+        simpleDialog,
+        simpleForm,
+        simplePagination,
     },
     data() {
-        return {};
+        return {
+            page: 1,
+            rows: 10,
+            total: 0,
+            form: {},
+            template_visible: false,
+            issue_visible: false,
+            table_loading: false,
+            table_search: {},
+            table_form: [
+                {
+                    label: "模板名称",
+                    props: "template_name",
+                    type: "input",
+                },
+            ],
+            table_list: [],
+            table_handle: [
+                {
+                    label: "新增模板",
+                    props: "add",
+                },
+            ],
+            table_handle_row: [
+                {
+                    label: "下发",
+                    props: "issue",
+                },
+                {
+                    label: "查看",
+                    props: "detail",
+                },
+                {
+                    label: "删除",
+                    props: "delete",
+                    popconfirm: true,
+                },
+            ],
+            table_config: [
+                {
+                    label: "模板名称",
+                    props: "template_name",
+                },
+                {
+                    label: "配置时间",
+                    props: "template_date",
+                },
+                {
+                    label: "配置工号",
+                    props: "template_number",
+                },
+                {
+                    label: "模板分类",
+                    props: "template_class",
+                },
+                {
+                    label: "模板状态",
+                    props: "template_status",
+                },
+                {
+                    label: "模板类型",
+                    props: "template_type",
+                },
+            ],
+        };
+    },
+    methods: {
+        async handleInit() {
+            this.table_loading = true;
+            const data = [];
+            let index = 0;
+            while (index < 10) {
+                data.push({
+                    template_name: `模板${index}`,
+                    template_date: "2021-12-01 12:00:00",
+                    template_number: `NUMBER${index}`,
+                    template_class: `部门绩效${index}`,
+                    template_status: `在用`,
+                    template_type: `科室绩效${index}`,
+                });
+                index = index + 1;
+            }
+            this.total = index;
+            this.table_list = data;
+            this.table_loading = false;
+        },
+        handleSearch({ template_name }) {
+            this.table_search = { template_name };
+            this.handleReset();
+            this.handleInit();
+        },
+        handleChange(page) {
+            this.page = page;
+            this.handleInit();
+        },
+        handleVisible(props) {
+            switch (props) {
+                case "template":
+                    this.template_visible = !this.template_visible;
+                    break;
+                case "issue":
+                    this.issue_visible = !this.issue_visible;
+            }
+        },
+        handleReset() {
+            this.page = 1;
+        },
+    },
+    mounted() {
+        this.handleInit();
     },
 };
 </script>