spfm-market-front/src/pages/main/luckySheet/index.vue

<template>
  <div class="flex-count">
    <div class="flex-count-header">
      <span>在线文档-文件管理</span>
      <el-button type="primary" class="header-button" @click="clickSave"
        >新建</el-button
      >
    </div>

    <Table @clickDemand="clickDemand" :list="lable" ref="TableList"> </Table>
    <!-- <div v-for="(item, index) in optionsExcel" :key="index">
      <div @click="clickSee(item)">{{ item.option.title }}</div>
    </div>
    <el-button @click="newExcle">新建</el-button>
    <div
      id="luckysheet"
      v-show="excelStatus"
      style="
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
      "
    ></div> -->
  </div>
</template>

<script>
import axios from "axios";
import luckyexcel from "luckyexcel";
import Table from "../../../components/el-form.vue";
export default {
  components: {
    Table,
  },
  data() {
    return {
      excelStatus: false,
      optionsExcel: [],
      ids: "",
      lable: {
        name: "first",
        height: "650",
        titledata: [
          {
            label: "名称",
            prop: "needName",
            width: 300,
            color: "#0682CD",
          },
          {
            label: "创建时间",
            prop: "needType",
            width: 200,
          },
          {
            label: "创建科室",
            prop: "applyDept",
            width: 200,
          },
          {
            label: "创建人",
            prop: "applyDepartment",
            width: 200,
          },
          {
            label: "权限状态",
            prop: "proposer",
            width: 200,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: true, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "50", // 根据实际情况给宽度
          data: [
            {
              label: "操作", // 操作名称
              type: "", //按钮类型
              handleRow: (e, r, o) => {
                // this.disabled = true;
                // this.dialogTitle = "查看";
                // if (r.taskName === "起草") {
                //   this.disabled = false;
                // } else {
                //   this.disabled = true;
                // }
                // this.fromList = r;
                // this.clickForm(r);
                // this.getFromQuery(r);
                // this.dialogStatus = true;
                // setTimeout(() => {
                //   this.getBtnStatus(r);
                // }, 500);
                // this.formWorkId = r.id;
                // this.formId = r.taskId;
                // this.taskName = r.taskName;
                // this.getQuery()
              }, // 自定义事件
            },
          ],
        },
      },
    };
  },
  created() {
    this.getAllExcel();
  },
  mounted() {},
  methods: {
    clickSave() {
      this.$http({
        url: "/market/cOnlineExcel/addExcel",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          folderId: '',
        },
      }).then((res) => {
        // if (res.data.result === 1) {
        //   _this.$message({
        //     message: res.data.desc,
        //     type: "error",
        //   });
        // } else {
        //   _this.$message({
        //     message: "成功",
        //     type: "success",
        //   });
        //   var id = res.data.desc;
        //   _this.addNewStatus = false;
        //   //放入id，切换到excel模式
        //   document.getElementById("excelId").setAttribute("value", id);
        //   _this.showExcel = true;
        // }
      });
    },
    clickSee(e) {
      this.$http({
        url: "/api/sheet/workbook/" + e.id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.ids = e.id;
        // this.optionsExcel = res.data;
        let options = {
          container: "luckysheet",
          title: "123123",
          allowUpdate: true,
          lang: "zh",
          loadUrl:
            window.location.protocol +
            "//43.138.50.94:7777" +
            "/sheet/worksheet/" +
            this.ids,
          loadSheetUrl:
            window.location.protocol +
            "//43.138.50.94:7777" +
            "/sheet/loadsheet/" +
            this.ids,
          updateUrl:
            "ws://" +
            "//43.138.50.94:7777" +
            "/ws/" +
            JSON.parse(window.sessionStorage.userInfo).loginName +
            "/" +
            this.ids,
        };
        window.luckysheet.create(options);
        this.excelStatus = true;
      });
    },
    //获取所有
    getAllExcel() {
      let data = {};
      axios
        .post("http://43.138.50.94:7777/sheet/allSheet", data)
        .then((res) => {
          console.log(res);
          this.optionsExcel = res.data;
        });
    },
    newExcle() {
      let data = {};
      axios.post("http://43.138.50.94:7777/sheet/create", data).then((res) => {
        console.log(res);
        let list = {
          name: res.data.name,
          id: res.data.id,
        };
        this.optionsExcel.push(list);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-count {
  background-color: #fff;
  .flex-count-header {
    display: flex;
    flex-direction: column;
    span {
      font-size: 22px;
      margin: 20px 0 0 30px;
    }
    .header-button {
      width: 10%;
      margin: 20px 0 20px 30px;
    }
  }
}
</style>