spfm-market-front/src/pages/main/performance/department.vue

<template>
  <div>
    <div class="simple-container">
      <simple-form :form="table_form" @search="handleSearch">
        <!-- :handle="table_handle"
      @add="handleRulesVisible"
      @class="handleDrawer('class')"
      @download="handleDownload" -->
      </simple-form>
      <simple-table
        :list="table_list"
        :config="table_config"
        :loading="table_loading"
        :handle-row="table_handle_row"
        @check="handleCheck"
        @edit="handleEdit"
      ></simple-table>
      <simple-pagination
        :page="page"
        :total="total"
        @change="handleChange"
      ></simple-pagination>
    </div>
    <simple-dialog
      fullscreen
      title="部门绩效"
      :visible="visible"
      
      :reload="reload"
      width="1200px"
      @cancel="handleCancel('visible')"
    >
      <template>
        <!-- 按钮部分 -->
        <div class="flex-justify-between padding-right-20 padding-left-20">
          <div>
            <el-button type="primary">转派</el-button>
            <el-button type="primary" @click="handleApprove">审批</el-button>
            <el-button type="primary" @click="handleTrack">流程跟踪</el-button>
            <el-button type="primary">导出</el-button>
          </div>
          <div>
            <el-button @click="handleCancel('visible')" type="primary"
              >返回</el-button
            >
          </div>
        </div>
        <!-- 主体部分 -->
        <analysis />
      </template>
      <template v-slot:footer><div></div></template>
    </simple-dialog>
    <simple-dialog
      title="审批"
      :visible="approve_visible"
      :reload="reload"
      width="500px"
      props="approve_visible"
      @cancel="handleCancel('approve_visible')"
    >
      <el-form :model="approveForm" :rules="approverules" ref="approveForm"
        ><el-form-item label="审批意见" prop="comments" label-width="80px"
          ><el-input
            type="textarea"
            v-model="approveForm.comments"
            autosize /></el-form-item
      ></el-form>
      <template v-slot:footer
        ><div>
          <div v-if="type === '1'">
            <el-button @click="handleCancel('approve_visible')">结束</el-button>
            <el-button @click="handleTurn(type)" type="primary"
              >转副总审批</el-button
            >
          </div>
          <div v-else-if="type === '2'">
            <el-button @click="handleCancel('approve_visible')">结束</el-button>
            <el-button @click="handleCancel('approve_visible')">打回</el-button>
            <el-button @click="handleTurn(type)" type="primary"
              >转总经理审批</el-button
            >
          </div>
          <div v-else>
            <el-button @click="handleCancel('approve_visible')">打回</el-button>
            <el-button @click="handleTurn(type)" type="primary">同意</el-button>
          </div>
        </div>
      </template>
    </simple-dialog>
    <simple-dialog
      title="流程跟踪"
      :visible="track_visible"
      :reload="reload"
      width="600px"
      props="track_visible"
      @confirm="handleConfirm"
      @cancel="handleCancel('track_visible')"
    >
      <el-table :data="trackList" border>
        <el-table-column
          prop="link"
          label="流程环节"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="creatperson"
          label="处理人"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="explain" label="审批说明" align="center">
        </el-table-column>
      </el-table>
    </simple-dialog>
  </div>
</template>

<script>
import simpleForm from "./components/form.vue";
import simpleTable from "./components/table.vue";
import simplePagination from "./components/pagination.vue";
import simpleDialog from "./components/dialog.vue";
import analysis from "./analysis.vue";
export default {
  components: {
    simpleForm,
    simpleTable,
    simplePagination,
    simpleDialog,
    analysis,
  },
  data() {
    return {
      page: 1,
      total: 5,
      //   dialog 参数
      visible: false,
      approve_visible: false,
      track_visible: false,
      reload: 0,
      // 判断类型
      type: "2",
      approverules: {
        comments: [
          {
            required: true,
            message: "请输入审批意见",
            trigger: "blur",
          },
        ],
      },
      // 审批意见
      approveForm: { comments: "" },
      trackList: [
        {
          link: "发起工单",
          creatperson: "XXX  2021-06-08",
          explain: "",
        },
      ],
      //   顶部form
      table_form: [
        {
          label: "绩效分类",
          props: "department",
          type: "select",
          dictionary: [
            {
              label: "GS",
              value: "1",
            },
            {
              label: "KPI",
              value: "2",
            },
          ],
        },
        {
          label: "下发月份",
          props: "month",
          type: "month",
        },
        {
          label: "状态",
          props: "service",
          type: "select",
          dictionary: [
            {
              label: "待处理",
              value: "1",
            },
            {
              label: "待汇总",
              value: "2",
            },
            {
              label: "待审批",
              value: "3",
            },
            {
              label: "已完成",
              value: "4",
            },
          ],
        },
      ],
      //   列表数据
      table_list: [
        {
          preCata1: "GS",
          preCata2: "信息技术中心2021年度部门GS绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待处理",
        },
        {
          preCata1: "GS",
          preCata2: "信息技术中心2021年度部门GS绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待汇总",
        },
        {
          preCata1: "GS",
          preCata2: "信息技术中心2021年度部门GS绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待审批",
        },
        {
          preCata1: "GS",
          preCata2: "信息技术中心2021年度部门GS绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待处理",
        },
        {
          preCata1: "GS",
          preCata2: "信息技术中心2021年度部门GS绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "已完成",
        },
          {
          preCata1: "KPI",
          preCata2: "信息技术中心2021年度部门KPI绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待处理",
        },
        {
          preCata1: "GS",
          preCata2: "信息技术中心2021年度部门GS绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待汇总",
        },
        {
          preCata1: "KPI",
          preCata2: "信息技术中心2021年度部门KPI绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待审批",
        },
        {
          preCata1: "GS",
          preCata2: "信息技术中心2021年度部门GS绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "待处理",
        },
        {
          preCata1: "KPI",
          preCata2: "信息技术中心2021年度部门KPI绩效计划",
          preCata3: "XXXXXXXXX",
          preCata4: "XXXXXXXXX",
          preCata5: "2021.02.01",
          preCata6: "周钰",
          preCata7: "已完成",
        },
      ],
      table_loading: false,
      //   表格里的操作按钮
      table_handle_row: [
        {
          label: "查看",
          props: "check",
        },
        {
          label: "处理",
          props: "edit",
          visible: {
            preCata7: ["待处理", "待审批"],
          },
        },
      ],
      //  表头配置
      table_config: [
        {
          label: "绩效分类",
          props: "preCata1",
        },
        {
          label: "模板名称",
          props: "preCata2",
        },
        {
          label: "填报事由",
          props: "preCata3",
        },
        {
          label: "填报注意事项",
          props: "preCata4",
        },
        {
          label: "截止时间",
          props: "preCata5",
        },
        {
          label: "发起人",
          props: "preCata6",
        },
        {
          label: "状态",
          props: "preCata7",
        },
      ],
    };
  },
  methods: {
    //   初始化
    handleInit() {},
    handleChange(page) {
      this.page = page;
      this.handleInit();
    },
    // 搜索事件
    handleSearch(data) {
      console.log(data);
    },
    // 编辑按钮
    handleEdit(row) {
      console.log(row, "row");
      this.visible = true;
    },
    handleCheck(row) {
       console.log(row, "row");
      this.visible = true;
    },
    handleDelete() {},
    // dialog事件
    //权限管理事件
    handleApprove() {
      this.approve_visible = true;
    },
    handleTrack() {
      this.track_visible = true;
    },
    handleTurn(type) {
      this.handleCancel('approve_visible')
      console.log(type);
    },
    handleConfirm(visible) {
      console.log(visible);
      this.track_visible = visible;
    },
    // 关闭方法
    handleCancel(data) {
      switch (data) {
        case "visible": {
          this.visible = false;
        }
        case "approve_visible": {
          this.approveForm.comments = ''
          this.approve_visible = false;
        }
        case "track_visible": {
          this.track_visible = false;
        }
      }
    },
  },
};
</script>

<style></style>