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>
            <template v-if="edit_visible">
              <el-button
                type="primary"
                v-if="edit_form.status === '0'"
                @click="handleTransfer"
                >转派</el-button
              >
              <el-button
                type="primary"
                v-if="edit_form.status === '0'"
                @click="handleSubmit"
                >提交</el-button
              >
              <el-button
                type="primary"
                v-if="edit_form.status === '2'"
                @click="handleApprove"
                >审批</el-button
              >
            </template>
            <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>
        <!-- 主体部分 -->
        <sheet />
        <!-- <analysis
          :edit="edit_form.department_status === '待处理' && edit_visible"
        /> -->
      </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" 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="handleBack">打回</el-button>
            <el-button @click="handleAgree" 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";
import sheet from "./components/sheet.vue";
export default {
  components: {
    simpleForm,
    simpleTable,
    simplePagination,
    simpleDialog,
    // analysis,
    sheet,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: 5,
      //   搜索参数
      table_search: {},
      //   dialog 参数
      visible: false,
      edit_visible: false,
      approve_visible: false,
      track_visible: false,
      edit_form: {},
      reload: 0,
      // 判断类型
      type: "3",
      approverules: {
        comments: [
          {
            required: true,
            message: "请输入审批意见",
            trigger: "blur",
          },
        ],
      },
      // 审批意见
      approveForm: { comments: "" },
      trackList: [],
      //   顶部form
      table_form: [
        {
          label: "模板名称",
          props: "name",
          type: "input",
        },
        {
          label: "下发月份",
          props: "issuedDate",
          type: "month",
        },
        {
          label: "状态",
          props: "status",
          type: "select",
          // 0.待处理  1.待汇总 2.待审批  3.已完成
          dictionary: [
            {
              label: "待处理",
              value: "0",
            },
            {
              label: "待汇总",
              value: "1",
            },
            {
              label: "待审批",
              value: "2",
            },
            {
              label: "已完成",
              value: "3",
            },
          ],
        },
      ],
      //   列表数据
      table_list: [],
      table_loading: false,
      //   表格里的操作按钮
      table_handle_row: [
        {
          label: "查看",
          props: "check",
        },
        {
          label: "处理",
          props: "edit",
          visible: {
            status: ["0", "2"],
          },
        },
      ],
      //  表头配置
      table_config: [
        {
          label: "模板名称",
          props: "templateName",
        },
        {
          label: "填报事由",
          props: "reason",
        },
        {
          label: "填报注意事项",
          props: "precautions",
        },
        {
          label: "截止时间",
          props: "endTime",
          type: "date",
        },
        {
          label: "发起人",
          props: "loginNameStr",
        },
        {
          label: "状态",
          props: "status",
          type: "dictionary",
          dictionary: { 0: "待处理", 1: "待汇总", 2: "待审批", 3: "已完成" },
        },
      ],
    };
  },
  mounted() {
    this.handleInit({
      ...this.table_search,
      page: this.page,
      pagesize: this.rows,
    });
  },
  methods: {
    //   初始化
    handleInit(data) {
      this.$http({
        url: "/CMKIssued/CMKIssuedListByUser",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      }).then((res) => {
        console.log(res);
        res.data = this.table_list;
        this.table_list.push({
          templateName: "模板名称",
          status: "0",
          reason: "填报事由",
          precautions: "填报注意事项",
          endTime: new Date(),
          loginNameStr: "发起人",
          id:23,
          templateContent:'templateContent'
        });
      });
    },
    handleChange(page) {
      this.page = page;
      this.handleInit({
        ...this.table_search,
        page: this.page,
        pagesize: this.rows,
      });
    },
    // 搜索事件
    handleSearch(data) {
      this.table_search = data;
      this.page = 1;
      this.handleInit({ ...data, page: this.page, pagesize: this.rows });
    },
    // 编辑按钮
    handleEdit(row) {
      console.log(row, "row");
      this.visible = true;
      this.edit_visible = true;
      this.edit_form = row;
    },
    handleCheck(row) {
      console.log(row, "row");
      this.visible = true;
      this.edit_visible = false;
    },
    handleDelete() {},
    // dialog事件
    //权限管理事件
    handleApprove() {
      this.approve_visible = true;
    },
    handleTrack() {
      this.track_visible = true;
    },
    handleTransfer() {
      console.log(this.edit_form, "prams");
      // const object = {
      //   ...JSON.parse(sessionStorage.global_data)[0],
      //   department_status: "待审批",
      // };
      // sessionStorage.setItem("global_data", JSON.stringify([object]));
      // const process_array = JSON.parse(sessionStorage.global_process);
      // process_array.push({
      //   link: "转派工单",
      //   creatperson: `ADMIN ${this.$formatDate(new Date(), "YYYY-MM-DD")}`,
      //   explain: "",
      // });
      // sessionStorage.setItem("global_process", JSON.stringify(process_array));
      // this.handleInit();
      // this.handleCancel("visible");
      // this.$message.success("转派成功");
    },
    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;
          break;
        case "approve_visible":
          this.approveForm.comments = "";
          this.approve_visible = false;
          break;
        case "track_visible":
          this.track_visible = false;
          break;
      }
    },
    handleBack() {
      const object = {
        ...JSON.parse(sessionStorage.global_data)[0],
        department_status: "待处理",
      };
      sessionStorage.setItem("global_data", JSON.stringify([object]));
      const process_array = JSON.parse(sessionStorage.global_process);
      process_array.push({
        link: "审批驳回",
        creatperson: `ADMIN ${this.$formatDate(new Date(), "YYYY-MM-DD")}`,
        explain: this.approveForm.comments,
      });
      sessionStorage.setItem("global_process", JSON.stringify(process_array));
      this.handleInit();
      this.$message.success("打回成功");
      this.handleCancel("visible");
      this.handleCancel("approve_visible");
    },
    handleAgree() {
      const object = {
        ...JSON.parse(sessionStorage.global_data)[0],
        department_status: "已完成",
      };
      sessionStorage.setItem("global_data", JSON.stringify([object]));
      const process_array = JSON.parse(sessionStorage.global_process);
      process_array.push({
        link: "审批通过",
        creatperson: `ADMIN ${this.$formatDate(new Date(), "YYYY-MM-DD")}`,
        explain: this.approveForm.comments,
      });
      sessionStorage.setItem("global_process", JSON.stringify(process_array));
      this.handleInit();
      this.$message.success("审批成功");
      this.handleCancel("visible");
      this.handleCancel("approve_visible");
    },
    handleSubmit() {
      let reqdata = {
        id: this.edit_form.id,
        templateContent: this.edit_form.templateContent,
      };
      console.log(reqdata,'reqdata')
      // 提交好了
      // this.$http({
      //   url: "/CMKIssued/CMKIssuedSubmit",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: reqdata,
      // }).then((res) => {
      //   console.log(res);
      //   this.$message.success("提交成功");
      //   this.handleCancel("visible");
      // });
    },
  },
};
</script>

<style></style>