shuili_manager/jwtech-admin-page/src/views/project/plan/options/ApprovalPage.vue

<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-col :span="24">
          <el-form-item label="计划审批日期" prop="approvalTime">
            <el-date-picker
              clearable
              size="small"
              style="width: 100%"
              v-model="form.approvalTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择计划审批日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="审批人信息" prop="approvalPerson">
            <el-input
              v-model="form.approvalPerson"
              placeholder="请输入审批人信息"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="审批意见" prop="approvalOpinion">
            <el-input
              v-model="form.approvalOpinion"
              placeholder="请输入审批意见"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="意见附件" prop="opinionAttachment">
            <!-- <el-input
            v-model="form.opinionAttachment"
            placeholder="请输入意见附件"
          /> -->
            <el-upload
              class="upload-demo"
              action="thinking/common/upload"
              :headers="headers"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :on-exceed="handleExceed"
              :on-success="submitOpinionUpload"
              :file-list="opinionFileList"
            >
              <el-button size="small" type="primary" plain>
                <i class="el-icon-upload el-icon--right"></i>
                点击上传
              </el-button>
              <div slot="tip" class="el-upload__tip">
                支持jpg/png/pdf/word/excel文件等，不超过100M
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  listPlanApproval,
  getPlanApproval,
  delPlanApproval,
  addPlanApproval,
  updatePlanApproval,
  exportPlanApproval,
} from "@/api/earlyStage/planApproval";
import { getToken } from "@/utils/auth";
import { getFileStream } from "@/api/system/upload";

export default {
  name: "PlanApproval",
  props: ["proNo", "planId"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ids: null,
        data: {
          approvalTime: null,
          approvalPerson: null,
          approvalOpinion: null,
          opinionAttachment: null,
          planId: null,
          proNo: null,
          createUid: null,
          createTime: null,
          updateUid: null,
          updateTime: null,
          owerDept: null,
          remark: null,
        },
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        approvalTime: [
          { required: true, message: "选择计划审批日期", trigger: "blur" },
        ],
        approvalPerson: [
          {
            required: true,
            message: "请输入审批人信息",
            trigger: "blur",
          },
        {max:250,message:"字符长度最大为250",trigger:"blur"}
        ],
        approvalOpinion: [
          { required: true, message: "请输入审批意见", trigger: "blur" },
        {max:250,message:"字符长度最大为250",trigger:"blur"}
        ],
      },
      // 意见附件
      opinionFileList: [],
      // 请求头
      headers: {
        jianwei: "jwtech " + getToken(),
      },
    };
  },
  created() {
    this.getList();
  },
  // 父组件  利用axios请求得到的值  传送到子组件，要监听，否则初始渲染时为空
  watch: {
    proNo: function (n, o) {
      this.proNo = n;
      this.getList();
    },
    planId: function (n, o) {
      this.planId = n;
      this.getList();
    },
  },
  methods: {
    /** 查询计划编制审批信息列表 */
    getList() {
      this.loading = true;
      // 当planId存在时才发送请求，防止子组件渲染时，一开始planId为空，后面planId才有值
      if (this.planId) {
        this.queryParams.data.planId = this.planId;
        // console.log("this.planId", this.planId);
        listPlanApproval(this.queryParams).then((response) => {
          // console.log("response", response.records);
          // 当审批存在时，在赋值
          if (response.records[0]) {
            this.form = response.records[0];
            if (response.records[0].opinionAttachment) {
              this.opinionFileList = JSON.parse(
                response.records[0].opinionAttachment
              );
            }
          } else {
            this.reset();
          }

          this.loading = false;
        });
      }
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        approvalTime: null,
        approvalPerson: null,
        approvalOpinion: null,
        opinionAttachment: null,
        planId: null,
        proNo: null,
        createUid: null,
        createTime: null,
        updateUid: null,
        updateTime: null,
        owerDept: null,
        remark: null,
      };
      this.resetForm("form");
      this.opinionFileList = [];
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        // 合同附件
        this.form.opinionAttachment = JSON.stringify(this.opinionFileList);
        // console.log("this.form", this.form);
        if (valid) {
          if (this.form.id != null) {
            updatePlanApproval(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.getList();
              }
            });
          } else {
            this.form.planId = this.planId;
            this.form.proNo = this.proNo;
            addPlanApproval(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.getList();
              }
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.$router.push("/project/plan");
    },

    // 上传附件
    submitOpinionUpload(_, fileList) {
      console.log("fileList", fileList);
      this.opinionFileList.push({
        name: fileList.name,
        fileName: fileList.response.fileName,
        url: fileList.response.url,
        uid: fileList.uid,
      });
      // console.log("this.opinionFileList", this.opinionFileList);
    },

    handleRemove(file, fileList) {
      // console.log(file, fileList);
      let index = this.opinionFileList.findIndex(
        (item) => item.uid === file.uid
      );
      // 删除文件
      this.opinionFileList.splice(index, 1);
    },
    // 点击预览的文件进行下载
    handlePreview(file) {
      // console.log(file);
      getFileStream({ fileName: file.fileName }).then((res) => {
        const blob = new Blob([res], {
          // type类型后端返回来的数据中会有，根据自己实际进行修改
          // 表格下载为 application/xlsx，压缩包为 application/zip等，
          type: "application/xlsx",
        }); //excel,pdf等
        const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
        const a = document.createElement("a"); //创建a标签
        a.style.display = "none";
        a.href = href; // 指定下载链接
        a.download = file.name; //指定下载文件名
        a.click(); //触发下载
        URL.revokeObjectURL(a.href); //释放URL对象
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>