wjw_jiankangzhidaozhongxin/src/views/official/components/Received.vue

<!-- @format -->

<template>
  <div
    class="app-container"
    v-loading="loadingWebLoad"
    :element-loading-text="loadingWebLoadText"
  >
    <el-row :gutter="10">
      <el-col :span="20">
        <div class="iWebOfficeDom" ref="iWebOfficeDom"></div
      ></el-col>
      <el-col :span="4">
        <el-form
          ref="receivedFormRef"
          label-width="90px"
          :rules="rules"
          :model="receivedParams"
        >
          <el-form-item label="来文标题:" prop="title">
            <el-input
              v-model="receivedParams.title"
              placeholder="请输入来文标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="来文单位:" prop="sender">
            <el-input
              v-model="receivedParams.sender"
              placeholder="请输入来文单位"
            ></el-input>
          </el-form-item>
          <el-form-item label="来文日期:" prop="sendTime">
            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="receivedParams.sendTime"
              type="date"
              placeholder="请输入来文日期"
              size="defalut"
            />
          </el-form-item>
          <el-form-item label="流水号: " prop="serial">
            <el-input
              v-model="receivedParams.serial"
              placeholder="请输入流水号"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件字号:" prop="documentNum">
            <el-input
              v-model="receivedParams.documentNum"
              placeholder="请输入文件字号"
            ></el-input>
          </el-form-item>
          <el-form-item label="紧急程度:">
            <el-input
              v-model="receivedParams.emergencyDegree"
              placeholder="请输入紧急程度"
            ></el-input>
          </el-form-item>
          <el-form-item label="添加附件:">
            <el-upload
              v-model:file-list="receivedParams.yOffcialReceiveFileList"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :limit="3"
            >
              <el-button type="primary">点击上传附件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="收文原件:">
            <el-upload
              v-model:file-list="receivedParams.receiveFileId"
              :action="`${baseUrl}/system/file/fileupload`"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :limit="3"
            >
              <el-button type="primary">点击上传原件</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button @click="onSubmit(receivedFormRef)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { LoadStr } from "@/plugins/iWebOffice2015";
import { getRequest } from "../hookFunction";
import { setObj, WebOpenFile } from "@/plugins/my.js";
import { saveReceived } from "@/api/office/received";
const WebOfficeStr = LoadStr();
const iWebOfficeDom = ref(null); //获取他的dom
const loadingWebLoad = ref(false);
const receivedFormRef = ref(false);
const loadingWebLoadText = ref("");
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
console.log(baseUrl);
const receivedParams = reactive({
  title: null, //来文标题
  sender: null, //单位
  sendTime: null, //时间
  serial: null, //流水号
  documentNum: null, //字号
  emergencyDegree: null, //紧急程度
  sendDownFileId: null,
  receiveFileId: [], //收文原件
  yOffcialReceiveFileList: [], //附件信息
});
const rules = reactive({
  title: [
    {
      required: true,
      message: "来文标题不能为空",
      trigger: "blur",
    },
  ],
  sender: [
    {
      required: true,
      message: "来文时间不能为空",
      trigger: "blur",
    },
  ],
  sendTime: [
    {
      required: true,
      message: "来文单位不能为空",
      trigger: "blur",
    },
  ],
  serial: [
    {
      required: true,
      message: "流水号不能为空",
      trigger: "blur",
    },
  ],
  documentNum: [
    {
      required: true,
      message: "字号不能为空",
      trigger: "blur",
    },
  ],
});
let requestParams = getRequest(); //获取当前url地址
let WebOffice;
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      loadingWebLoadText.value = "正在提交中";
      loadingWebLoad.value = true;
      let { code } = await saveReceived(receivedParams);
      if (code == 200) {
        loadingWebLoad.value = false;
      }
    }
  });
};
const handlePreview = () => {};
const handleRemove = () => {};
function Load() {
  //chrome浏览器，HookEnabled设置为true，用于控件中和本地excel表格的焦点互相切换
  let FuncExt = WebOffice.FuncExtModule; //获取iWebOffice2015扩展接口对象
  setObj(WebOffice);
  FuncExt.ShowToolBar = 1;
  WebOpenFile();
  loadingWebLoad.value = false;
  //FuncExt.EditType="1,1"; //可以编辑,不显示痕迹,可以有批注
}
function OnReady() {
  //获取iWebOffice2015控件对象，WebOffice.FuncExtModule是iWebOffice2015控件扩展接口对象
  WebOffice = document.getElementById("WebOffice2015");
  setTimeout(function () {
    Load();
  }, 10); //需要做一个延时，iWebOffice2015才能获取FuncExtModule扩展接口对象
}
onMounted(() => {
  loadingWebLoad.value = true;
  iWebOfficeDom.value.innerHTML = WebOfficeStr;
  OnReady();
});
</script>

<style lang="scss" scoped>
.iWebOfficeDom {
  height: 950px;
}
</style>