spfm-market-front/src/pages/main/fileList/fileList.vue

<template>
  <!-- <div style="height: 95%"> -->
  <div class="container" style="margin: 15px 0 0 0">
    <fullscreen
      :fullscreen.sync="fullscreen"
      class="container-box"
      style="margin: 0 !important; padding: 0 !important"
    >
      <div class="titbox">
        <!-- <h2>部门预算模板管理</h2> -->
        <h2>在线文档编辑</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <el-button
          size="small"
          @click="addExcel"
          type="primary"
          v-show="quanxian"
          >新增文件</el-button
        >
      </div>

      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="tempName"
            label="在线文档名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="opTime"
            show-overflow-tooltip
            label="创建文档时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="opNo"
            show-overflow-tooltip
            label="创建文档工号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="opName"
            show-overflow-tooltip
            label="创建文档姓名"
          >
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="tempStsDesc"
            show-overflow-tooltip
            label="模板状态"
          >
          </el-table-column> -->
          <!-- <el-table-column align="center" prop="tempTypeDesc" label="模板类型">
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="tempStsDesc"
            show-overflow-tooltip
            label="权限状态"
          >
            <template slot-scope="scope">
              {{ scope.row.powerFlag == 0 ? "开" : "关" }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="caozuo1"
            align="center"
            prop="hotline"
            width="200"
            label="無權操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="detailes(scope.row)"
                >查看</el-button
              >
              <el-button
                :disabled="scope.row.powerFlag != 0"
                size="mini"
                type="danger"
                plain
                @click="updates(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            v-if="caozuo2"
            align="center"
            prop="hotline"
            width="200"
            label="有權操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="detailes(scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="updates(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
      <myMessage
        :messTit="messTit"
        @closeMessage="closeMessage"
        :centerDialogVisible="centerDialogVisible"
        v-if="centerDialogVisible"
      ></myMessage>
    </fullscreen>
    <!-- 
    <el-dialog
      title="选择接收人"
      :visible.sync="dialogStatus"
      width="50%"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        label-width="80px"
      >
        
        <el-form-item class="info-line online" prop="fileList">
          <deptTree
            v-if="!disableStatus"
            :closeList="closeList"
            class="tree"
            @treeCheck="treeCheck"
          >
          </deptTree>
          <div :class="!disableStatus ? 'tree treeUser' : 'tree treeUserb'">
            <p v-for="(item, index) in treeList" :key="index">
              {{ item.receiveName }}
              <i @click="deletes(item, index)" class="el-icon-error"></i>
            </p>
          </div>
        </el-form-item>

        <el-form-item label="接收人" prop="sendNoArr">
          <el-select
            placeholder="选择接收人"
            v-model="formData.sendNoArr"
            multiple
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="items in options"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetUser('ruleForm')">取 消</el-button>
        <el-button @click="subUser('ruleForm')">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import mySearch from "../../../components/search";
import myMessage from "../../../components/myMessage.vue";
import deptTree from "../../../components/deptTreeUser.vue";
export default {
  components: {
    mySearch,
    myMessage,
    deptTree,
  },
  data() {
    return {
      treeList: [],
      quanxian: false,
      caozuo1: false,
      caozuo2: true,
      closeList: [],
      disableStatus: false,
      centerDialogVisible: false,
      messTit: "",
      dataId: "",
      typeFlag: "",
      value1: "",
      options: [],
      dialogStatus: false,
      formData: {
        woTitle: "",
        woDesc: "",
        requiredTime: "",
        sendNoArr: "",
        sendYear: "",
        sendMonth: "",
        sendQuarter: "",
        needReply: "是",
      },
      rules: {
        // woTitle: [
        //   { required: true, message: "请输入预算标题", trigger: "blur" },
        // ],
        // woDesc: [
        //   { required: true, message: "请输入预算备注", trigger: "change" },
        // ],
        // requiredTime: [
        //   {
        //     required: true,
        //     message: "请选择反馈时间",
        //     trigger: "change",
        //   },
        // ],
        // sendNoArr: [
        //   {
        //     required: true,
        //     message: "请选择接收人",
        //     trigger: "change",
        //   },
        // ],
        // sendYear: [
        //   {
        //     required: true,
        //     message: "请选择下发年份",
        //     trigger: "change",
        //   },
        // ],
        // sendMonth: [
        //   {
        //     required: true,
        //     message: "请选择下发月份",
        //     trigger: "change",
        //   },
        // ],
        // sendQuarter: [
        //   {
        //     required: true,
        //     message: "请选择下发季度",
        //     trigger: "change",
        //   },
        // ],
      },
      headers: {
        agileauthtoken: sessionStorage.agileauthtoken.replace(/"/g, ""),
      },
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [
        {
          name: "黑龙江公司移动成本预算简表",
          cNo: "admin",
          cUser: "admin",
          ctime: "2021-03-10",
          status: "已下发",
        },
        {
          name: "黑龙江公司移动成本预算简表1",
          cNo: "admin",
          cUser: "admin",
          ctime: "2021-03-10",
          status: "草稿",
        },
      ],
      searchList: [
        {
          type: "input",
          tit: "文档模板名称",
          value: "",
          width: "100%",
          options: [],
        },
        // {
        //   type: "input",
        //   tit: "创建时间",
        //   value: "",
        //   width: "100%",
        //   options: [],
        // },
        // {
        //   type: "input",
        //   tit: "模板状态",
        //   value: "",
        //   width: "100%",
        //   options: [],
        // },
      ],
      params: {
        tempName: "",
      },
      loading: false,
      fileList: [],
      fileName: "",
    };
  },
  methods: {
    treeCheck(v) {
      this.treeList = v;
    },
    deletes(val, index) {
      this.treeList.splice(index, 1);
      this.closeList = this.treeList;
    },
    chenckType(val) {
      if (val.tempStsDesc == "草稿") {
        this.$http({
          url: "/market/filepre/updateType",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            id: val.id,
            tempType: val.tempType,
            tempTypeDesc: val.tempTypeDesc,
          },
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        });
      }
    },
    chenck(val) {
      if (val.tempStsDesc == "草稿") {
        this.$http({
          url: "/market/filepre/updatePower",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: { id: val.id },
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        });
      }
    },
    detailes(val) {
      this.$router.push("/initExcelsee1?status=see&id=" + val.id + "");
    },
    // 增加表单处理
    subUser(formName) {
      // console.log(this.treeList);
      // console.log(formName)
      // formData.SendNoArr=this.treeList
      let sendNoArr = [];
      // for (var i = 0; i <= this.treeList.length; i++) {}
      // let sendNoArr = this.treeList;
      this.$refs[formName].validate((valid) => {
        // console.log(valid)
        if (valid) {
          this.formData.sendNoArr.map((item) => {
            this.options.map((row) => {
              if (item == row.value) {
                sendNoArr.push({
                  receiveNo: item,
                  receiveName: row.label,
                  deptCode: row.deptCode,
                  deptName: row.deptName,
                });
              }
            });
          });
          let data = {
            // woTitle: this.formData.woTitle,
            // woDesc: this.formData.woDesc,
            // requiredTime: this.formData.requiredTime,
            sendNoArr: JSON.stringify(sendNoArr),
            // sendNoArr: this.treeList,
            // needReply: this.formData.needReply,
            preTempId: this.preTempId,
            // sendYear: this.typeFlag == "1" ? "" : this.formData.sendYear,
            // sendMonth: this.formData.sendMonth,
            // sendQuarter:
            //   this.typeFlag == "1"
            //     ? this.formData.sendYear + "-" + this.formData.sendQuarter
            //     : "",
            // tempType: this.typeFlag,
            funcCode:
              this.typeFlag == "0"
                ? "1000"
                : this.typeFlag == "1"
                ? "1004"
                : this.typeFlag == "2"
                ? "1001"
                : this.typeFlag == "3"
                ? "1003"
                : "",
          };
          console.log(data);
          this.$http({
            url: "/market/filepre/pub",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: data,
          }).then((res) => {
            if (res.data.result == 0) {
              this.$message({
                type: "success",
                message: "下发成功",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.desc,
              });
            }
            this.resetUser(formName);
            this.dialogStatus = false;
            this.getList(this.params, this.pageSize);
          });
        }
      });
    },
    // 取消提交
    resetUser(formName) {
      this.$refs[formName].resetFields();
      this.dialogStatus = false;
    },
    closeDialog() {
      this.dialogStatus = false;
    },
    issue(val) {
      this.typeFlag = val.tempType;
      console.log(this.typeFlag);
      this.preTempId = val.id;
      this.dialogStatus = true;
    },
    defaultMenu(path, name) {
      let defaults = this.$store.state.tabList.filter((item) => {
        if (item.rountPath == path) {
          return item;
        }
      });
      if (defaults.length == 1) {
        return;
      }
      let params = {
        children: "",
        name: name,
        rountPath: path,
        target: "_self",
      };
      let set = new Set([...this.$store.state.tabList, params]);
      this.$store.commit("setDefaultActive", path);
      this.$store.commit("setTabList", Array.from(set));
    },
    closeMessage(v) {
      this.centerDialogVisible = false;
      if (v === 1) {
        this.$http({
          url: "/market/filepre/cancelPre",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: { id: this.dataId },
        }).then((res) => {
          if (res.data.result == "0") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.getList(this.params, this.pageSize);
        });
      }
    },
    addExcel() {
      this.$router.push("/initExceladd1?status=add");
      // this.defaultMenu("/initExceladd?status=add", "新增预算模板");
    },
    updates(val) {
      this.$router.push("/initExcelupdate1?status=update&id=" + val.id + "");
      // this.defaultMenu("/initExcelupdate?status=update", "修改预算模板");
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.tempName = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/market/filepre/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
        console.log(this.tableData);
      });
      this.$http({
        url: "/market/filepre/queryRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { isFile: "0" },
      }).then((res) => {
        console.log(res.data);
        if (res.data) {
          this.quanxian = true;
        } else {
          this.caozuo1 = true;
          this.caozuo2 = false;
        }
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
    getOpations() {
      this.$http({
        url: "/sysmgr/sys/mk/offices/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        res.data.body.map((item) => {
          this.options.push({
            label: item.loginName,
            value: item.loginNo,
            deptCode: item.groupId,
            deptName: item.groupName,
          });
        });
      });
    },
  },
  mounted() {
    this.getOpations();
    this.getList(this.params, this.pageSize);
    // 获取权限
  },
  watch: {
    $route() {
      this.getList(this.params, this.pageSize);
    },
  },
};
</script>
<style scoped>
.el-upload-list {
  float: right;
}
.el-input__suffix {
  cursor: pointer;
}
.container .el-upload {
  width: auto !important;
}
</style>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
.info-line {
  width: 100%;
  display: block;

  span {
    width: 80px;
    display: inline-block;
    text-align: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }
}
.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }

  .tree {
    width: calc(50% - 60px);
    display: inline-block;
    margin-right: 20px;
    height: 300px;
    overflow-y: scroll;

    .el-icon-error {
      float: right;
      font-size: 20px;
      margin-top: 9px;
      cursor: pointer;
    }
  }

  .treeUser {
    margin: 0;
    border: 1px solid #ddd;

    p {
      background: #f4f4f4;
      padding: 0 20px;
      margin-bottom: 5px;
    }
  }

  .treeUserb {
    width: calc(100% - 100px);
    border: 1px solid #ddd;
    background: #f4f4f4;
    border-radius: 3px;
    height: auto;
    overflow: hidden;

    p {
      display: inline-block;
      padding: 0 20px;
      margin-bottom: 5px;
    }
  }
}
</style>