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"
        @delete="handleDelete"
        @receiverName="handleReceiver"
      ></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">
              <!-- 转派按钮 科室经理 7、分管副总 2、总经理 1可见   -->
              <el-button
                type="primary"
                v-if="
                  edit_form.status === '0' &&
                  (duty === '7' || duty === '2' || duty === '1')
                "
                @click="handleTransfer"
                >转派</el-button
              >
              <!-- 提交按钮 科员可见 9  -->
              <!-- <el-button
                type="primary"
                v-if="edit_form.status === '1' && duty === '9'"
                @click="handleSubmit"
                >提交</el-button
              > -->
              <!-- 审批按钮 科室经理、分管副总、总经理可见  -->
              <el-button
                type="primary"
                v-if="
                  edit_form.status === '2' &&
                  (duty === '7' || duty === '2' || duty === '1') &&
                  reviewType === duty
                "
                @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>
        <!-- 主体部分 -->
        <simple-sheet
          v-if="visible"
          :id="edit_form.id"
          :type="
            edit_visible && edit_form.status === '1' && duty === '9'
              ? 'edit'
              : 'view'
          "
          attribute="file"
          @save="handleSave"
        />
        <!-- <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"
      @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="handleTurn('finish')">结束</el-button>
            <el-button @click="handleTurn('transfer')" type="primary"
              >转副总审批</el-button
            >
          </div>
          <div v-else-if="type === '2'">
            <el-button @click="handleTurn('finish')">结束</el-button>
            <el-button @click="handleTurn('return')">退回</el-button>
            <el-button @click="handleTurn('back')">打回</el-button>
            <el-button @click="handleTurn('transfer')" type="primary"
              >转总经理审批</el-button
            >
          </div>
          <div v-else>
            <el-button @click="handleTurn('back')">打回</el-button>
            <el-button @click="handleTurn('return')">退回</el-button>
            <el-button @click="handleTurn('agree')" type="primary"
              >同意</el-button
            >
          </div>
        </div>
      </template>
    </simple-dialog>
    <simple-dialog
      title="转派"
      :visible="transfer_visible"
      :reload="reload"
      width="1000px"
      @confirm="transferConfirm"
      @cancel="handleCancel('transfer_visible')"
    >
      <el-form
        :model="transfer_form"
        :rules="transfer_rules"
        ref="transfer_form"
        label-width="80px"
      >
        <el-form-item
          label="转派人员"
          v-for="(item, index) in transfer_form.charge"
          :key="index"
          :rules="{
            required: true,
            message: '负责人不能为空',
            trigger: 'blur',
          }"
        >
          <div class="flex">
            <el-select
              class="margin-bottom-20 margin-right-10"
              placeholder="请选择负责人"
              v-model="item.person"
              @change="personChange"
              filterable
            >
              <el-option
                v-for="({ label, value }, index) in transfer_list_orgin"
                :key="index"
                :label="label"
                :value="value"
              ></el-option>
            </el-select>
            <div v-if="permission_type === 2">
              <span class="form-content">可编辑行：</span>
              <el-select
                class="margin-bottom-20 margin-right-10"
                placeholder="请选择可编辑行"
                multiple
                v-model="item.allowEditingColumns"
                @change="colsChange"
              >
                <el-option
                  v-for="(item, index) in transfer_cols_orgin"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div v-if="permission_type === 2">
              <span class="form-content">可编辑列：</span>
              <el-select
                class="margin-bottom-20 margin-right-10"
                placeholder="请选择可编辑列"
                multiple
                v-model="item.rowNum"
                @change="rowsChange"
              >
                <el-option
                  v-for="(item, index) in transfer_rows_orgin"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <div>
          <el-button
            class="margin-right-10"
            @click.prevent="handleCharge('add')"
            type="primary"
            >添加</el-button
          >
          <el-button
            v-if="transfer_form.charge.length - 1"
            @click.prevent="handleCharge('delete')"
            >删除</el-button
          >
        </div>
      </el-form>
    </simple-dialog>
    <simple-dialog
      title="回复详情"
      width="1000px"
      @cancel="handleCancel('principal_visible')"
      @confirm="handleCancel('principal_visible')"
      :visible="principal_visible"
    >
      <simple-table
        :list="receiver_table_list"
        :config="receiver_table_config"
      ></simple-table>
    </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 simpleSheet from "./components/sheet.vue";
export default {
  components: {
    simpleForm,
    simpleTable,
    simplePagination,
    simpleDialog,
    simpleSheet,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: 0,
      reviewType: "",
      isCheck: false,
      // 判断是否为2---特殊权限或者为1---公共权限
      permission_type: 2,
      // 职位判断转派用
      duty: "",
      //   搜索参数
      table_search: {},
      //   dialog 参数
      transfer_visible: false,
      visible: false,
      edit_visible: false,
      // 审批
      approve_visible: false,
      // 转派
      track_visible: false,
      // 回复详情
      principal_visible: false,
      edit_form: {},
      // 回复详情
      receiver_table_list: [],
      receiver_table_config: [
        {
          label: "接收人",
          props: "receiveName",
        },
        {
          label: "科室",
          props: "dept",
        },
        {
          label: "回复时间",
          props: "createTime",
        },
        {
          label: "审批记录",
          props: "result",
          type: "textarea",
        },
        {
          label: "审批意见",
          props: "opinion",
          type: "textarea",
        },
      ],
      transfer_list_orgin: [],
      transfer_cols_orgin: [],
      transfer_rows_orgin: [],
      transfer_list: [],
      transfer_form: {
        // personnel: "", // 转派人员
        charge: [{ person: "", allowEditingColumns: [], rowNum: [] }],
      },
      reload: 0,
      // 判断类型
      type: "3",
      approverules: {
        comments: [
          {
            required: true,
            message: "请输入审批意见",
            trigger: "blur",
          },
        ],
      },
      // 转派规则
      transfer_rules: {
        personnel: [
          {
            required: true,
            message: "请选择转派人员",
            trigger: "change",
          },
        ],
        col_start: [
          {
            required: true,
            message: "请选择行",
            trigger: "change",
          },
        ],
        row_start: [
          {
            required: true,
            message: "请选择列",
            trigger: "change",
          },
        ],
      },
      // 审批意见
      approveForm: { comments: "" },
      trackList: [],
      //   顶部form
      table_form: [
        {
          label: "模板名称",
          props: "name",
          type: "input",
        },
        {
          label: "截止时间",
          props: "issuedDate",
          type: "datetime",
        },
        {
          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,
      //   表格里的操作按钮delete
      table_handle_row: [
        {
          label: "查看",
          props: "check",
        },
        {
          label: "处理",
          props: "edit",
          visible: {
            status: ["0", "1", "2"],
          },
        },
        {
          label: "撤回",
          props: "delete",
          popconfirm: true,
          visible: {
            status: ["0"],
          },
        },
      ],
      //  表头配置
      table_config: [
        {
          label: "序号",
          type: "number",
        },
        {
          label: "模板名称",
          props: "templateName",
        },
        {
          label: "填报事由",
          props: "reason",
        },
        {
          label: "填报注意事项",
          props: "precautions",
        },
        {
          label: "截止时间",
          props: "endTime",
          // type: "time",
        },
        {
          label: "发起人",
          props: "loginNameStr",
        },
        {
          label: "接受人",
          props: "receiverName",
          type: "click",
        },
        {
          label: "状态",
          props: "status",
          type: "dictionary",
          dictionary: { 0: "待处理", 1: "待汇总", 2: "待审批", 3: "已完成" },
        },
      ],
    };
  },
  mounted() {
    this.handleInit({
      ...this.table_search,
      page: this.page,
      pageSize: this.rows,
    });
    // 职位
    this.duty = JSON.parse(sessionStorage.userInfo).duty;
    // 根据职位判定  科室经理7、分管副总 2 、总经理 1 、职员 9
    console.log(this.duty, "duty");
    switch (this.duty) {
      // 科室经理
      case "7":
        this.type = "1";
        break;
      // 分管副总
      case "2":
        this.type = "2";
        break;
      // 总经理
      case "1":
        this.type = "3";
        break;
    }
  },
  methods: {
    //   初始化
    handleInit(data) {
      this.table_loading = true;
      this.$http({
        url: "/market/CMKIssued/CMKIssuedListByUser",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      }).then(({ data: { count, data } }) => {
        this.table_loading = false;
        this.total = count;
        this.table_list = data || [];
      });
    },
    handleChange(page) {
      this.page = page;
      this.handleInit({
        ...this.table_search,
        page: this.page,
        pageSize: this.rows,
      });
    },
    // 搜索事件
    handleSearch(data) {
      this.table_search = {
        ...data,
        issuedDate: data.issuedDate
          ? this.$formatDate(data.issuedDate, "YYYY-MM-DD HH:00:00")
          : data.issuedDate,
      };
      this.page = 1;
      this.handleInit({
        ...this.table_search,
        page: this.page,
        pageSize: this.rows,
      });
    },
    // 编辑按钮
    handleEdit(row) {
      this.visible = true;
      this.edit_visible = true;
      this.edit_form = row;
      this.reviewType = "";
      // 暂时的处理先调接口
      this.$http({
        url: "/market/CMKIssued/CMKIssuedProcessByUser",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { id: this.edit_form.id },
      }).then(({ data: { reviewType, list } }) => {
        // 判断审批按钮是否还存在
        this.permission_type = Number(list[0].type);
        console.log(reviewType, "res");
        this.reviewType = reviewType;
        switch (reviewType) {
          case null:
            this.reviewType = "";
            break;
          case "1":
            this.reviewType = "7";
            break;
          case "2":
            this.reviewType = "2";
            break;
          case "3":
            this.reviewType = "1";
            break;
        }
        // if (reviewType) {
        //   this.type = reviewType;
        // }
      });
    },
    // 查看按钮
    handleCheck(row) {
      console.log(row, "row");
      this.visible = true;
      this.edit_visible = false;
      this.edit_form = row;
    },
    // 原下发管理的撤回
    handleDelete({ id }) {
      console.log(id, "id");
      this.$http({
        url: "/market/CMKIssued/CMKDelIssuedById",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          id,
        },
      }).then(() => {
        this.$message.success("撤回成功");
        this.handleInit({
          ...this.table_search,
          page: this.page,
          pageSize: this.rows,
        });
      });
    },
    // dialog事件
    //权限管理事件
    handleApprove() {
      this.approve_visible = true;
    },
    handleTrack() {
      this.track_visible = true;
    },
    // 转派的增加或删除
    handleCharge(type) {
      switch (type) {
        case "add":
          this.transfer_form.charge.push({
            person: "",
            allowEditingColumns: [],
            rowNum: [],
          });
          break;
        case "delete":
          this.transfer_form.charge.pop();
          break;
      }
    },
    // 三个change事件控制行列人员变动
    personChange(val) {
      console.log(val, this.transfer_list);
      this.transfer_list = this.transfer_list.filter((el) => el.value !== val);
      console.log(this.transfer_list, "this.transfer_list");
    },
    rowsChange(val) {
      console.log(val, "rowsChange");
    },
    colsChange(val) {
      console.log(val, "colsChange");
    },
    handleForbid() {
      const permission_type = this.permission_type;
      const { charge } = this.transfer_form;
      let flag = 1;
      console.log(permission_type, "permission_type");
      if (permission_type === 1) {
        // 公共权限 暂时不用可编辑行和列
        charge.forEach((el) => {
          if (el.person) {
            flag = flag * 1;
          } else {
            flag = flag * 0;
          }
        });
      } else if (permission_type === 2) {
        // 特殊权限
        console.log(permission_type, "permission_type");
        charge.forEach((el) => {
          if (el.person && el.allowEditingColumns.length && el.rowNum.length) {
            flag = flag * 1;
          } else {
            flag = flag * 0;
          }
        });
      }
      return flag;
    },
    // 转派的同意事件
    async transferConfirm() {
      this.$refs["transfer_form"].validate((valid) => {
        if (valid) {
          if (this.handleForbid()) {
            const { charge } = this.transfer_form;
            let params = {
              issuedId: this.edit_form.id,
            };
            if (this.permission_type === 1) {
              params.transferCommonAuthority = charge
                .map((el) => {
                  el = el.person.split(",")[0];
                  return el;
                })
                .join(",");
            } else if (this.permission_type === 2) {
              params.transferAuthority = charge.map((el) =>
                JSON.stringify({
                  allowEditingColumns: el.allowEditingColumns.join(","),
                  rowNum: el.rowNum.join(","),
                  principalId: el.person.split(",")[0],
                  principalName: el.person.split(",")[1],
                })
              );
            }
            this.$http({
              url: "/market/CMKIssued/CMKIssuedTransfer",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: params,
            }).then(({ data: { desc } }) => {
              if (desc === "转派成功") {
                this.$message({
                  type: "success",
                  message: desc,
                });
                this.transfer_visible = false;
                this.handleInit({
                  ...this.table_search,
                  page: this.page,
                  pageSize: this.rows,
                });
                this.handleCancel("visible");
              }
            });
            console.log(params, "this.transfer_form");
          } else {
            this.$message.error("请填写必要的信息");
          }
        }
      });
    },
    async handleTransfer() {
      let loginNoStr = JSON.parse(sessionStorage.userInfo).loginNoStr;
      let groupId = JSON.parse(sessionStorage.userInfo).groupId;
      await this.$http({
        url: "/sysmgr/sysuserinfo/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          groupId,
        },
      }).then(({ data }) => {
        this.transfer_list_orgin = data
          .filter((el) => {
            return el.loginNoStr !== loginNoStr;
          })
          .map((el) => ({
            ...el,
            label: `${el.loginNameStr}`,
            value: `${el.loginNoStr},${el.loginNameStr}`,
          }));
        this.transfer_list = this.transfer_list_orgin;
        // 可编辑行
      });
      await this.$http({
        url: "/market/CMKIssued/CMKIssuedRow",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          id: this.edit_form.id,
        },
      }).then(({ data: { column, row } }) => {
        this.transfer_cols_orgin = column.split(",");
        this.transfer_rows_orgin = row.split(",");
      });
      this.transfer_visible = true;
    },
    handleTurn(type) {
      // finish 结束 transfer 转派 back //打回 // agree 同意
      let request = 0;
      let reqdata = {
        id: this.edit_form.id,
        reviewOpinion: this.approveForm.comments,
      };
      switch (type) {
        case "finish":
          // status 0.打回 3.结束
          reqdata.status = "3";
          reqdata.operateName = "结束";
          request = 1;
          break;
        case "transfer":
          // reviewType 2.副总经理 3总经理
          if (this.duty === "7") {
            reqdata.reviewType = 2;
            reqdata.operateName = "转副总审批";
            request = 1;
          } else if (this.duty === "2") {
            reqdata.reviewType = 3;
            request = 1;
            reqdata.operateName = "转总经理审批";
          }
          break;
        case "back":
          reqdata.status = "0";
          reqdata.reviewType = 1;
          request = 1;
          reqdata.operateName = "打回";
          break;
        case "return":
          reqdata.status = "0";
          reqdata.operateName = "退回";
          if (this.duty === "2") {
            reqdata.reviewType = 1;
          } else if (this.duty === "3") {
            reqdata.reviewType = 2;
          }
          request = 1;
          break;
        case "agree":
          reqdata.operateName = "同意";
          reqdata.status = "3";
          request = 1;
          break;
      }
      if (request) {
        // 这里调接口
        this.$http({
          url: "/market/CMKIssued/CMKIssuedCheck",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: reqdata,
        }).then(({ data: { desc } }) => {
          if (desc === "审批成功") {
            this.$message({
              type: "success",
              message: desc,
            });
            // this.page = 1;
            this.handleCancel("visible");
            this.handleCancel("approve_visible");
            this.handleInit({
              ...this.table_search,
              page: this.page,
              pageSize: this.rows,
            });
          } else if (desc === "存在未提交,是否还要审核") {
            this.$confirm(desc, {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then((res) => {
                this.$http({
                  url: "/market/CMKIssued/CMKIssuedCheck",
                  method: "post",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  data: { ...reqdata, submitFlag: 1 },
                }).then(({ data: { desc } }) => {
                  if (desc === "审批成功") {
                    this.$message({
                      type: "success",
                      message: desc,
                    });
                    this.handleCancel("visible");
                    this.handleCancel("approve_visible");
                    this.handleInit({
                      ...this.table_search,
                      page: this.page,
                      pageSize: this.rows,
                    });
                  }
                });
              })
              .catch((error) => {
                console.log(error);
              });
          }
        });
      }
      // this.$http({
      //   url: "/market/CMKIssued/CMKIssuedCheck",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: {
      //     groupId,
      //   },
      // }).then((res) => {
      //   console.log(res, "res");
      //  this.handleInit()
      // this.handleCancel("visible");
      // this.handleCancel("approve_visible");
      // });
    },
    // 通用方法用于转化全局
    paramsArr(start, end) {
      const arr = [];
      console.log(start, end);
      for (let i = Number(start); i <= Number(end); i++) {
        arr.push(i);
      }
      return arr.join(",");
    },
    handleConfirm(visible) {
      console.log(visible);
      this.track_visible = visible;
    },
    handleSave() {
      this.handleInit({
        ...this.table_search,
        page: this.page,
        pageSize: this.rows,
      });
      this.handleCancel("visible");
    },
    handleReceiver({ id }) {
      // 回复详情
      console.log(id);
      this.principal_visible = true;
      this.$http({
        url: "/market/CMKIssued/replyDetails",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { issuedId: id },
      }).then(({data}) => {
        this.receiver_table_list = data
      });
    },
    // 关闭方法
    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;
        case "transfer_visible":
          this.transfer_visible = false;
          break;
        case "principal_visible":
          this.principal_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: "asdad",
    //   };
    //   this.$http({
    //     url: "/CMKIssued/CMKIssuedSubmit",
    //     method: "post",
    //     headers: {
    //       "Content-Type": "application/json",
    //     },
    //     data: reqdata,
    //   }).then(({ data }) => {
    //     console.log(data, "data");
    //     if (data) {
    //       this.$message.success("提交成功");
    //       this.handleCancel("visible");
    //     } else {
    //       this.$message.error("提交失败");
    //     }
    //   });
    // },
  },
};
</script>

<style c>
</style>