spfm-market-front/src/pages/main/performance/components/sheet.vue

<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-12-04 14:23:58
 * @LastEditors: daiqisheng
 * @LastEditTime: 2022-05-10 11:24:05
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\sheet.vue
-->
<template>
  <div class="sheet-container">
    <div class="flex-justify-align-end margin-bottom-20">
      <span
        class="margin-right-10 font-size-16"
        v-if="['template'].includes(attribute)"
        ><span class="sheet-container-require">*</span>模板类型:</span
      >
      <el-input
        v-if="['template'].includes(attribute)"
        v-model="templateType"
        :disabled="type === 'view' || (type === 'edit' && attribute === 'file')"
      ></el-input>
      <el-button
        type="primary"
        @click="handleVisible"
        v-if="['template'].includes(attribute)"
        >权限设置</el-button
      >
      <el-button type="primary" @click="handleDownload">导出</el-button>
      <el-button type="primary" @click="handleFullscreen()">全屏显示</el-button>
      <el-button
        type="primary"
        @click="handleSupervise('confirm')"
        v-if="['template'].includes(attribute)"
        >督办</el-button
      >
      <template v-if="['edit'].includes(type)">
        <el-upload
          v-if="!id"
          class="margin-right-10 margin-left-10"
          action
          :on-change="handleChange"
          :show-file-list="false"
        >
          <el-button type="primary">上传</el-button>
        </el-upload>
        <el-button
          v-if="!status || status === '2'"
          type="primary"
          @click="handleSave('2')"
          :disabled="handleForbid()"
          >暂存</el-button
        >
        <el-button
          v-if="
            status === '2' ||
            status === '3' ||
            (status === '0' && superviseFlag === '1')
          "
          type="primary"
          @click="handleResave"
          :disabled="handleForbid()"
          >保存</el-button
        >
        <el-button
          v-if="addFlag === '0'"
          type="primary"
          @click="handleSave('0')"
          :disabled="handleForbid()"
          ><span>{{ id ? "提交" : "新增" }}</span
          ><span>{{
            handleForbid() ? `（请先设置权限）` : ""
          }}</span></el-button
        >
      </template>
    </div>
    <div id="luckysheet" class="sheet-container-block"></div>
    <!-- 设置权限的 -->
    <simple-dialog
      title="权限设置"
      :visible="visible"
      :modal="false"
      width="1400px"
      @confirm="handleAuth"
      @cancel="handleVisible"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-radio-group
          v-model="form.permission_type"
          :disabled="type !== 'edit'"
        >
          <el-form-item>
            <el-radio :label="0"><span>无特殊权限</span></el-radio>
            <div>
              <span class="form-content">负责人</span>
              <el-select
                v-model="form.person"
                multiple
                placeholder="请选择负责人"
                :disabled="type !== 'edit'"
              >
                <el-option
                  v-for="({ label, value }, index) in charge_list"
                  :key="index"
                  :label="label"
                  :value="value"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <el-radio :label="1"><span>特殊权限：</span></el-radio>
            <el-form-item
              label="负责人"
              prop="charge"
              v-for="(item, index) in 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"
                  filterable
                  :disabled="type !== 'edit'"
                >
                  <el-option
                    v-for="({ label, value }, index) in charge_list"
                    :key="index"
                    :label="label"
                    :value="value"
                  ></el-option>
                </el-select>
                <div class="form-select">
                  <span class="form-content">可编辑行：从</span>
                  <el-input
                    v-model="item.row_start"
                    @input="(params) => handleInput(index, 'row_start', params)"
                    :disabled="type !== 'edit'"
                  />
                  <span class="form-content">到</span>
                  <el-input
                    v-model="item.row_end"
                    @input="(params) => handleInput(index, 'row_end', params)"
                    :disabled="type !== 'edit'"
                  />
                </div>
                <div class="form-select">
                  <span class="form-content">可编辑列：从</span>
                  <el-input
                    :disabled="type !== 'edit'"
                    v-model="item.col_start"
                  />
                  <!-- @input="(params) => handleInput(index, 'col_start', params)" -->
                  <span class="form-content">到</span>
                  <el-input
                    :disabled="type !== 'edit'"
                    v-model="item.col_end"
                  />
                </div>
              </div>
            </el-form-item>
            <div>
              <el-button
                @click.prevent="handleCharge('add')"
                :disabled="type !== 'edit'"
                >添加</el-button
              >
              <el-button
                v-if="form.charge.length - 1"
                @click.prevent="handleCharge('delete')"
                :disabled="type !== 'edit'"
                >删除</el-button
              >
            </div>
          </el-form-item>
        </el-radio-group>
      </el-form>
      <template v-if="id && status !== '2' && status !== '3'" v-slot:footer
        ><div></div
      ></template>
    </simple-dialog>
    <!-- 科室经理提交的 -->
    <simpleDialog
      title="提交"
      :visible="manager_approve"
      :modal="false"
      @cancel="handleApprove(0)"
    >
      <el-form :model="approveForm" label-width="120px">
        <el-form-item
          label="审批意见："
          :rules="{
            required: true,
            message: '请选择审批意见',
            trigger: 'change',
          }"
        >
          <el-select v-model="approveForm.type">
            <el-option
              v-for="item in approveForm.list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="approveForm.type === '3'"
          label="其它审批意见："
          :rules="{
            required: true,
            message: '请输入审批意见',
            trigger: 'blur',
          }"
          ><el-input v-model="approveForm.comments"
        /></el-form-item>
      </el-form>
      <template v-slot:footer>
        <div>
          <el-button @click.prevent="handleApprove('1')" type="primary">结束</el-button>
          <el-button @click.prevent="handleApprove('4')"
            >转副总审批</el-button
          >
          <el-button @click.prevent="handleApprove('3')"
            >转总经理审批</el-button
          >
        </div>
      </template>
    </simpleDialog>
    <simpleDialog
      title="督办"
      :visible="supervise"
      :modal="false"
      @confirm="handleSupervise('confirm')"
      @cancel="handleSupervise('cancel')"
    >
      <span class="margin-left-20"
        >注：设置督办后，系统会按照设定的周期自动派发</span
      >
      <el-form
        :rules="superviserules"
        :model="superviseForm"
        ref="superviseForm"
        class="margin-top-20"
        label-width="120px"
      >
        <el-form-item prop="distribute" label="派发周期">
          <el-select v-model="superviseForm.distribute" filterable>
            <!-- 0.月 1.季度 2.半年 3.年 -->
            <el-option
              v-for="({ label, value }, index) in [
                { label: '月', value: '0' },
                { label: '季度', value: '1' },
                { label: '半年', value: '2' },
                { label: '年', value: '3' },
              ]"
              :key="index"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="write" label="填报日期">
          <el-date-picker
            v-model="superviseForm.write"
            type="date"
            @change="handleWrite"
            :picker-options="pickWrite"
          >
          </el-date-picker
        ></el-form-item>
        <el-form-item prop="endTime" label="截止时间">
          <el-date-picker
            v-model="superviseForm.endTime"
            @change="handleEnd"
            type="datetime"
            :unlink-panels="true"
            :picker-options="pickOptions"
          >
          </el-date-picker
        ></el-form-item>
      </el-form>
      <template v-if="id && type === 'view'" v-slot:footer
        ><div></div
      ></template>
    </simpleDialog>
  </div>
</template>

<script>
import luckyexcel from "luckyexcel";
import { exportExcel } from "../common/export";
import simpleDialog from "./dialog.vue";
export default {
  components: {
    simpleDialog,
  },
  props: {
    type: {
      type: String,
      default: "view", // view 查看 edit 编辑
    },
    attribute: {
      type: String,
      default: "template", // template 模板 order 工单 file 文件
    },
    id: {
      default: null,
    },
    // 接收人
    receiver: {
      type: String,
      default: "",
    },
    // 模板状态按钮判断
    status: { type: String, default: "" },
  },
  data() {
    return {
      form: {
        charge: [
          {
            person: [],
            col_start: "",
            col_end: "",
            row_start: "",
            row_end: "",
          },
        ],
        array: [],
        type: null,
        permission_type: null,
        col_start: "",
        col_end: "",
        row_start: "",
        row_end: "",
      },
      approveForm: {
        type: "",
        comments: "",
        list: [
          {
            label: "同意",
            value: "同意",
          },
          {
            label: "不同意",
            value: "不同意",
          },
          {
            label: "其他",
            value: "3",
          },
        ],
      },
      superviserules: {
        distribute: [
          { required: true, message: "请选择派发周期", trigger: "change" },
        ],
        write: [
          { required: true, message: "请选择填报周期", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择截止时间", trigger: "change" },
        ],
      },
      superviseForm: {
        distribute: "", // 派单周期
        write: "", // 填写周期
        endTime: "", // 截止时间
      },
      originSuperviseForm: {},
      pickOptions: {
        disabledDate(time) {
          return time.getTime() < new Date().getTime() - 8.64e7;
        },
      },
      pickWrite: {
        disabledDate(time) {
          return time.getTime() < new Date().getTime() - 8.64e7;
        },
      },
      // 可提交标志
      addFlag: "0",
      // 督办标志
      superviseFlag: null,
      rowList: [],
      isDisable: true,
      issued_id: null,
      template_id: null,
      visible: false,
      templateType: "",
      // 督办
      supervise: false,
      manager_approve: false,
      row_list: [],
      column_list: [],
      charge_list: [],
      type_options: [
        {
          value: 1,
          label: "按行",
        },
        // {
        //     value: 2,
        //     label: "按列",
        // },
      ],
    };
  },
  methods: {
    handleInit() {
      if (this.id) {
        this.handleQuery();
      } else {
        this.handleCreate();
      }
    },
    // 填报日期
    handleWrite(value) {
      if (value) {
        let range =
          new Date().getTime() > value.getTime()
            ? new Date().getTime()
            : value.getTime();
        this.pickOptions = {
          disabledDate(time) {
            return time.getTime() < range;
          },
        };
      } else {
        this.pickOptions = {
          disabledDate(time) {
            return time.getTime() < new Date().getTime() - 864000;
          },
        };
      }
    },
    handleEnd(value) {
      if (value) {
        this.pickWrite = {
          disabledDate(time) {
            return time.getTime() > value.getTime();
          },
        };
        let write = new Date(this.superviseForm.write).getTime();
        if (this.superviseForm.write && value.getTime() < write) {
          this.superviseForm.endTime = "";
        }
      } else {
        this.pickWrite = {
          disabledDate(time) {
            return time.getTime() - 864000 < new Date().getTime();
          },
        };
      }
    },
    // // 权限选择
    // handleRadio(e){
    //     console.log(e,'e');
    // },
    handleAllow({ row, column }) {
      let public_permisson =
        (!this.form.permission_type ||
          this.status === "2" ||
          this.status === "3") &&
        this.type === "edit";
      let editable =
        this.row_list.includes(row) && this.column_list.includes(column);
      // let totalBoolean = (public_permisson || editable) && this.id;
      let totalBoolean = public_permisson || editable;
      return totalBoolean;
    },
    async handleQuery() {
      let url = "";
      let params = {};
      switch (this.attribute) {
        case "template":
          url = "/market/CMKFileTemplate/QueryCMKFileTemplateById";
          params = {
            templateId: this.id,
          };
          break;
        case "order":
          url = "/market/CMKIssued/CMKQueryIssuedById";
          params = {
            id: this.id,
          };
          break;
        case "file":
          url = "/market/CMKIssued/CMKIssuedProcessByUser";
          params = {
            id: this.id,
            receiverId: this.receiver,
          };
          break;
      }
      const {
        data: {
          templateContent,
          templateName,
          issuedId,
          templateId,
          list,
          superviseFlag,
          templateType,
          addFlag,
          distributeEndTime,
          distributeTime,
          distributeType,
        },
      } = await this.$http({
        url,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: params,
      });
      this.superviseFlag = superviseFlag;
      if (superviseFlag === "1") {
        this.superviseForm = {
          distribute: distributeType, // 派单周期
          write: distributeTime, // 填写周期
          endTime: distributeEndTime, // 截止时间
        };
      }
      console.log(this.superviseForm, "this.superviseForm");
      this.templateType = templateType;
      this.template_id = templateId;
      this.issued_id = issuedId;
      this.addFlag = addFlag;
      console.log(JSON.parse(templateContent), "123123");
      if (list && list.length) {
        const { type } = list[0];
        if (type === "1") {
          // 公共权限
          // const { allowEditingColumns, rowNum } = list[0];
          this.form = {
            permission_type: Number(type) - 1,
            person: list.map((el) => {
              return `${el.principalMent}-${el.principalId},${el.principalName}`;
            }),
            charge: [
              {
                person: "",
                col_start: "",
                col_end: "",
                row_start: "",
                row_end: "",
              },
            ],
          };
        } else {
          // 特殊权限
          this.form = {
            permission_type: Number(type) - 1,
            col_start: "",
            col_end: "",
            row_start: "",
            row_end: "",
            charge: list.map((el) => ({
              person: `${el.principalMent}-${el.principalId},${el.principalName}`,
              col_start: el.allowEditingColumns.split(",")[0],
              col_end:
                el.allowEditingColumns.split(",")[
                  el.allowEditingColumns.split(",").length - 1
                ],
              row_start: el.rowNum.split(",")[0],
              row_end: el.rowNum.split(",")[el.rowNum.split(",").length - 1],
            })),
          };
        }
        this.row_list =
          this.type === "edit" && list[0].rowNum
            ? list[0].rowNum
                .split(",")
                .map((element) => JSON.parse(element) - 1)
            : [];
        if (this.type === "edit" && list[0].allowEditingColumns) {
          // this.column_list = list[0].allowEditingColumns
          //   .split(",")
          //   .map((element) => JSON.parse(element) - 1);
          this.column_list =
            list[0].allowEditingColumnsFlag === "1"
              ? list[0].allowEditingColumnsShuzi
                  .split(",")
                  .map((element) => JSON.parse(element) - 1)
              : list[0].allowEditingColumns
                  .split(",")
                  .map((element) => JSON.parse(element) - 1);
        } else {
          this.column_list = [];
        }
        // this.formateNumber(list[0].allowEditingColumns);
      }
      this.handleCreate({
        json: templateContent ? JSON.parse(templateContent) : {},
        name: templateName,
        type: "json",
      });
    },
    handleSupervise(data) {
      if (data === "cancel") {
        this.supervise = false;
        this.superviseForm = {
          ...this.originSuperviseForm,
        };
        return;
      }
      if (this.supervise === false) {
        this.supervise = true;
        this.originSuperviseForm = {
          ...this.superviseForm,
        };
      } else {
        let filled =
          Object.keys(this.superviseForm).length === 3 &&
          Object.values(this.superviseForm).filter((el) => el !== "").length ===
            3;
        if (filled) {
          let time = new Date().getTime();
          let endTime = new Date(this.superviseForm.endTime).getTime();
          if (time > endTime) {
            this.$message.error("截止时间不能小于当前时间");
            return;
          }
          this.superviseForm = {
            ...this.superviseForm,
            endTime: this.$formatDate(
              this.superviseForm.endTime,
              "YYYY-MM-DD HH:mm:ss"
            ), // 督办设置的截止时间
            write: this.$formatDate(this.superviseForm.write, "YYYY-MM-DD"), // 派发时间–或者叫—填报时间
          };
          this.supervise = false;
        } else {
          this.$message.error("请填写完整必要的信息");
        }
      }
    },
    handleForbid() {
      // const object = {};
      const { permission_type } = this.form;
      if (permission_type === 0) {
        // 公共权限 暂时不用可编辑行和列
        const { person } = this.form;
        if (person.length) {
          return false;
        }
        return true;
      } else if (permission_type === 1) {
        // 特殊权限
        let flag = 1;
        const { charge } = this.form;
        charge.forEach((el) => {
          if (
            Object.values(el).filter((v) => {
              return v !== "";
            }).length === 5
          ) {
            flag = flag * 1;
          } else {
            flag = flag * 0;
          }
        });
        return !flag;
      } else {
        return true;
      }
    },
    async handleCreate({ file, json, type, name } = {}) {
      let that = this;
      const options = {
        container: "luckysheet",
        lang: "zh",
        showsheetbar: false,
        hook: {
          cellEditBefore: function ([
            { row_focus: row, column_focus: column },
          ]) {
            if (!that.handleAllow({ row, column })) {
              that.$message.error("您没有编辑权限");
            }
          },
          // cellUpdated: function (row, column) {
          //   that.rowList.push(row);
          // },
          cellUpdateBefore: function (row, column) {
            console.log(row, column);
            if (!that.handleAllow({ row, column })) {
              return false;
            }
          },
          cellRenderAfter: function (cell, position) {
            const { r: row, c: column } = position;
            console.log();
            if (cell) {
              if (!that.handleAllow({ row, column })) {
                cell.bg = "#d5d5d5";
              } else {
                cell.bg = "#ffffff";
              }
            }
          },
          rangePasteBefore: function ([
            { row_focus: row, column_focus: column },
          ]) {
            if (!that.handleAllow({ row, column })) {
              that.$message.error("您没有编辑权限");
              return false;
            }
          },
          updated: function ({ range }) {
            const middle = range.map((el) => {
              return that.paramsArr(el.row[0], el.row[1]);
            });
            let changedList = middle.join(",").split(",");
            that.rowList.push(...changedList);
          },
        },
      };
      switch (type) {
        case "file":
          if (file) {
            await new Promise((resolve) => {
              luckyexcel.transformExcelToLucky(file, (export_json) => {
                options.data = [
                  ...export_json.sheets.map((element) => ({
                    ...element,
                    zoomRatio: 0.75,
                  })),
                ];
                options.title = export_json.info.name;
                resolve();
              });
            });
          }
          break;
        case "json":
          if (json) {
            options.data = [
              {
                ...json,
                zoomRatio: 0.75,
              },
            ];
            options.title = name;
          }
          break;
      }
      window.luckysheet.create(options);

      let clock = setInterval(() => {
        if (window.luckysheet) {
          window.luckysheet.refresh();
          clearInterval(clock);
        }
      }, 1000);
    },
    async handleChange(response) {
      this.handleCreate({ file: response.raw, type: "file" });
    },
    handleDownload() {
      exportExcel(
        window.luckysheet.getAllSheets(),
        window.luckysheet.getWorkbookName()
      );
    },
    async handleAddAuth({ id }) {
      // const object = {};
      const { permission_type } = this.form;
      console.log(id, permission_type);
      let reqdata = {
        templateId: id,
        type: permission_type ? 2 : 1,
      };
      if (!permission_type) {
        //  公共权限
        const { person } = this.form;

        const principalId = [];
        const principalName = [];
        const principalMent = [];
        person.forEach((el) => {
          principalMent.push(el.split(",")[0].split("-")[0]);
          principalId.push(el.split(",")[0].split("-")[1]);
          principalName.push(el.split(",")[1]);
        });
        reqdata.principalId = principalId.join(",");
        reqdata.principalName = principalName.join(",");
        reqdata.principalMent = principalMent.join(",");
      } else {
        const { charge } = this.form;
        //  特殊权限
        reqdata.specialAuth = charge.map((el) =>
          JSON.stringify({
            allowEditingColumns: `${el.col_start},${el.col_end}`,
            rowNum: `${el.row_start},${el.row_end}`,
            principalMent: el.person.split(",")[0].split("-")[0],
            principalId: el.person.split(",")[0].split("-")[1],
            principalName: el.person.split(",")[1],
          })
        );
      }
      const {
        data: { result, desc },
      } = await this.$http({
        url: this.id
          ? "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityUpdate"
          : "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityAdd",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: reqdata,
      });
      if (result) {
        this.$message.error(desc);
      } else {
        this.$message.success(desc);
      }
      return result;
    },
    async handleSave(type) {
      let edit_url = "";
      switch (this.attribute) {
        case "template":
          edit_url = "";
          break;
        case "order":
          edit_url = "";
          break;
        case "file":
          edit_url = "/market/CMKIssued/CMKIssuedSubmit";
          break;
      }

      const sheet_name = window.luckysheet.getSheet().name;
      const data = window.luckysheet.getSheet(sheet_name);
      const workbook_name = window.luckysheet.getWorkbookName();
      if (!this.id) {
        // 新增时添加权限
        let value = {};
        if (!this.templateType) {
          this.$message.error("请输入模板类型");
          return;
        }
        if (
          Object.values(this.superviseForm).filter((el) => el !== "").length ===
          3
        ) {
          value = {
            distributeEndTime: this.superviseForm.endTime, // 督办设置的截止时间
            distributeTime: this.superviseForm.write, // 派发时间–或者叫—填报时间
            distributeType: this.superviseForm.distribute, //派发周期类型 派发周期类型 0.月 1.季度 2.半年 3.年
            superviseFlag: 1, //督办标识 0.不是 1.是
            templateType: this.templateType, //模板类型
            templateContent: JSON.stringify(data), //文件内容
            templateName: workbook_name, //模板名称
            templateUrl: "", //文件链接
            status: type,
          };
        } else {
          value = {
            superviseFlag: 0, //督办标识 0.不是 1.是
            templateType: this.templateType, //模板类型
            templateContent: JSON.stringify(data), //文件内容
            templateName: workbook_name, //模板名称
            templateUrl: "", //文件链接
            status: type,
          };
        }
        const {
          data: { body },
        } = await this.$http({
          url: "/market/CMKFileTemplate/CMKFileTemplateAdd", // 新增
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: value,
        });
        await this.handleAddAuth({ id: body });
        this.$emit("save");
      } else {
        // 职位
        let duty = JSON.parse(sessionStorage.userInfo).duty;
        if (duty === "7" && type === "0") {
          this.manager_approve = true;
        } else {
          if (type === "2") {
            // 暂存
            let value = {};
            if (!this.templateType) {
              this.$message.error("请输入模板类型");
              return;
            }
            if (
              Object.values(this.superviseForm).filter((el) => el !== "")
                .length === 3
            ) {
              value = {
                templateId: this.id,
                distributeEndTime: this.superviseForm.endTime, // 督办设置的截止时间
                distributeTime: this.superviseForm.write, // 派发时间–或者叫—填报时间
                distributeType: this.superviseForm.distribute, //派发周期类型 派发周期类型 0.月 1.季度 2.半年 3.年
                superviseFlag: 1, //督办标识 0.不是 1.是
                templateType: this.templateType, //模板类型
                templateContent: JSON.stringify(data), //文件内容
                templateName: workbook_name, //模板名称
                templateUrl: "", //文件链接
                status: type,
              };
            } else {
              value = {
                templateId: this.id,
                superviseFlag: 0, //督办标识 0.不是 1.是
                templateType: this.templateType, //模板类型
                templateContent: JSON.stringify(data), //文件内容
                templateName: workbook_name, //模板名称
                templateUrl: "", //文件链接
                status: type,
              };
            }

            await this.$http({
              url: "/market/CMKFileTemplate/UptateCMKFileTemplateById", //
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: value,
            });
            this.$emit("save");
            return;
          }
          // 员工提交
          this.rowList.shift();
          let reqdata = {
            rowIndex: [...new Set(this.rowList)]
              .sort(function (a, b) {
                return a - b;
              })
              .join(","),
            rowContent: [...new Set(this.rowList)]
              .sort(function (a, b) {
                return a - b;
              })
              .map((el) => {
                return data.data[el];
              }),
          };
          await this.$http({
            url: edit_url, //提交
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              id: this.template_id,
              templateContent: JSON.stringify(data),
              templateName: workbook_name,
              issuedId: this.issued_id,
              rowJson: JSON.stringify(reqdata),
            },
          });
          this.$emit("save");
        }
      }
    },
    // 判断数组是否有值
    confirmArrayData(data) {
      if (data instanceof Array) {
        let flag = 0;
        if (data.length) {
          data.forEach((el) => {
            if (el instanceof Object) {
              flag = flag + 1;
            }
          });
          if (flag) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    async handleAuth() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.handleForbid()) {
            this.$message.error("请完善可编辑信息");
            return false;
          }
          if (this.id) {
            this.handleAddAuth({ id: this.id });
          }
          this.handleVisible();
        }
      });
    },
    // 通用方法用于转化全局
    paramsArr(start, end) {
      const arr = [];
      console.log(start, end);
      for (let i = Number(start); i <= Number(end); i++) {
        arr.push(i);
      }
      return arr.join(",");
    },
    filterName(id, arr) {
      return arr.filter((el) => el.secLeaderLogin === id)[0].secLeaderName;
    },
    handleCharge(type) {
      switch (type) {
        case "add":
          this.form.charge.push({
            person: "",
          });
          this.handleForbid();
          break;
        case "delete":
          this.form.charge.pop();
          this.handleForbid();
          break;
      }
    },
    handleVisible() {
      this.visible = !this.visible;
    },
    handleInput(index, name, value) {
      let reg = /^[0-9]*$/;
      if (!reg.test(value)) {
        this.form.charge[index][name] = this.form.charge[index][name].substr(
          0,
          this.form.charge[index][name].length - 1
        );
        this.$message.error("该处只能填写数字");
      }
    },
    async handleApprove(type) {
      if (type) {
        if (this.approveForm.type) {
          if (this.approveForm.type === "3" && !this.approveForm.comments) {
            this.$message.error("请输入其他审批意见");
            return;
          }
        } else {
          this.$message.error("请选择审批意见");
          return;
        }
        const sheet_name = window.luckysheet.getSheet().name;
        const data = window.luckysheet.getSheet(sheet_name);
        const workbook_name = window.luckysheet.getWorkbookName();
        // 经理提交
        this.rowList.shift();
        let reqdata = {
          rowIndex: [...new Set(this.rowList)]
            .sort(function (a, b) {
              return a - b;
            })
            .join(","),
          rowContent: [...new Set(this.rowList)]
            .sort(function (a, b) {
              return a - b;
            })
            .map((el) => {
              return data.data[el];
            }),
        };
        await this.$http({
          url: "/market/CMKIssued/CMKIssuedSubmit", // 提交
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            id: this.template_id,
            templateContent: JSON.stringify(data),
            templateName: workbook_name,
            issuedId: this.issued_id,
            rowJson: JSON.stringify(reqdata),
          },
        });
        let params = {
          id: this.issued_id,
          reviewOpinion:
            this.approveForm.type === "3"
              ? this.approveForm.comments
              : this.approveForm.type,
        };
        switch (type) {
          case "1":
            params = {
              ...params,
              operateName: "结束",
              status: 3,
            };
            break;
          case "4":
            params = {
              ...params,
              operateName: "转副总审批",
              reviewType: 2,
            };
            break;
          case "3":
            params = {
              ...params,
              operateName: "转总经理审批",
              reviewType: 3,
            };
            break;
        }
        await this.$http({
          url: "/market/CMKIssued/CMKIssuedCheck", // 审批
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: params,
        });
        this.$message({
          type: "success",
          message: "审批成功",
        });
        this.manager_approve = false;
        this.$emit("save");
      } else {
        this.manager_approve = false;
      }
    },
    handleFullscreen() {
      const element = document.body;
      const is_fullscreen =
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;
      if (!is_fullscreen) {
        //进入全屏,多重短路表达式
        (element.requestFullscreen && element.requestFullscreen()) ||
          (element.mozRequestFullScreen && element.mozRequestFullScreen()) ||
          (element.webkitRequestFullscreen &&
            element.webkitRequestFullscreen()) ||
          (element.msRequestFullscreen && element.msRequestFullscreen());
      } else {
        //退出全屏,三目运算符
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
          ? document.mozCancelFullScreen()
          : document.webkitExitFullscreen
          ? document.webkitExitFullscreen()
          : "";
      }
    },
    handleResave() {
      const sheet_name = window.luckysheet.getSheet().name;
      const data = window.luckysheet.getSheet(sheet_name);
      const workbook_name = window.luckysheet.getWorkbookName();

      let value = {};
      if (!this.templateType) {
        this.$message.error("请输入模板类型");
        return;
      }
      if (
        Object.values(this.superviseForm).filter((el) => el !== "").length === 3
      ) {
        value = {
          templateId: this.id,
          distributeEndTime: this.superviseForm.endTime, // 督办设置的截止时间
          distributeTime: this.superviseForm.write, // 派发时间–或者叫—填报时间
          distributeType: this.superviseForm.distribute, //派发周期类型 派发周期类型 0.月 1.季度 2.半年 3.年
          superviseFlag: 1, //督办标识 0.不是 1.是
          templateType: this.templateType, //模板类型
          templateContent: JSON.stringify(data), //文件内容
          templateName: workbook_name, //模板名称
          templateUrl: "", //文件链接
          status: "0",
        };
      } else {
        value = {
          templateId: this.id,
          superviseFlag: 0, //督办标识 0.不是 1.是
          templateType: this.templateType, //模板类型
          templateContent: JSON.stringify(data), //文件内容
          templateName: workbook_name, //模板名称
          templateUrl: "", //文件链接
          status: "0",
        };
      }

      this.$http({
        url: "/market/CMKFileTemplate/UptateCMKFileTemplateById",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: value,
      }).then(() => {
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.$emit("save");
      });
    },
    handleChargeList() {
      this.$http({
        url: "/market/techcentergj/queryLeaderList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((response) => {
        this.charge_list = response.data.map((element) => ({
          label: `${element.ou} ${element.secLeaderName}`,
          value: `${element.ou}-${element.secLeaderLogin},${element.secLeaderName}`,
        }));
      });
    },
  },
  mounted() {
    console.log(this.attribute, "attribute");
    console.log(this.type, "type");
    this.handleInit();
    this.handleChargeList();
  },
  destroyed() {
    window.luckysheet.destroy();
  },
};
</script>

<style lang="scss" scope>
.sheet-container {
  position: fixed;
  width: calc(100% - 40px);
  height: 100%;
  &-block {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 75%;
  }
  &-require {
    color: red;
  }
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}
.form {
  &-input {
    margin-top: 5px;
    .el-input {
      width: 150px;
      .el-input__inner {
        height: 30px !important;
        line-height: 30px !important;
      }
    }
  }
  &-content {
    margin: 0px 10px;
  }
  &-select {
    .el-input {
      width: 100px;
      .el-input__inner {
        height: 30px !important;
        line-height: 30px !important;
      }
    }
  }
}
</style>