htui-yllkbz 1.5.13 → 1.5.16

package/src/packages/HtOffice/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @Descripttion:导出公共组件Excel
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-19 13:38:48
+ */
+// import HtOffice from "./index.vue";
+
+// (HtOffice as any).install = function (Vue: any) {
+
+//   Vue.component("HtOffice", HtOffice);
+// };
+
+// export default HtOffice;

package/src/packages/HtOffice/index.vue

@@ -0,0 +1,491 @@
+<!--
+ * @Descripttion: 附件預覽
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-09-02 09:03:43
+ * @LastEditors: hutao
+ * @LastEditTime: 2024-05-16 13:47:01
+-->
+<template>
+  <div v-loading="state.loading"
+       style="min-height: 500px;">
+
+    <div v-if="state.fileToken">
+      <iframe v-if="getSuffix.group"
+              :src="
+          `/onlyOffice/index.html?group=${getSuffix.group}&type=${getSuffix.type}&id=${id}&fileToken=${state.fileToken}&tenant=${tenant}&fileName=${fileName}`
+        "
+              frameborder="0"
+              width="100%"
+              style="height: calc(100vh - 120px)"></iframe>
+      <!-- <div v-else-if="suffix === 'json'">
+        <JsonViewer v-if="state.fileInfo"
+                    :value="state.fileInfo"
+                    :expand-depth="3" />
+      </div> -->
+      <div v-else-if="suffix === 'mp4'">
+        <video controls
+               autoplay
+               controlslist="nodownload noremoteplayback"
+               style="margin:0 auto;display:block;max-width:1000px"
+               id="previewVideo"></video>
+      </div>
+      <div v-else>
+        <img style="margin:0 auto;display:block;max-width:1000px"
+             :src="
+            `/file-management-service/api/filing/file/download/${state.fileToken}?token=${state.fileToken}`
+          " />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { baseConfig, _axios } from "vue-kst-auth";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { AxiosRequestConfig, Method } from "axios";
+//import CryptoJS from "./crypto";
+/** 设置axios返回类型 */
+Vue.config.productionTip = false;
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  canExport?: boolean;
+}
+/** 文件格式 */
+interface InSuffix {
+  group?: "word" | "cell" | "slide";
+  type?: string;
+}
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 文件可预览格式 */
+  fileSuffix: {
+    [key: string]: InSuffix;
+  };
+  /** 文件预览配置 */
+  fileConfig: any;
+  /** 文件预览token */
+  fileToken: string;
+  /** onlyoffice文件预览token */
+  fileViewToken: string;
+  fileInfo: any;
+}
+@Component({
+  name: "HtOffice",
+})
+export default class Index extends Vue {
+  @Prop() suffix!: string;
+  @Prop() id!: string;
+  @Prop() fileName!: string;
+  /** 下载权限 */
+  @Prop() download?: boolean;
+  /** 文件管理api */
+  /** 数据 */
+  state: State = {
+    loading: false,
+    fileSuffix: {
+      djvu: {
+        group: "word",
+        type: "djvu",
+      },
+      doc: {
+        group: "word",
+        type: "doc",
+      },
+      docm: {
+        group: "word",
+        type: "docm",
+      },
+      docx: {
+        group: "word",
+        type: "docx",
+      },
+      docxf: {
+        group: "word",
+        type: "docxf",
+      },
+      dot: {
+        group: "word",
+        type: "dot",
+      },
+      dotm: {
+        group: "word",
+        type: "dotm",
+      },
+      dotx: {
+        group: "word",
+        type: "dotx",
+      },
+      epub: {
+        group: "word",
+        type: "epub",
+      },
+      fb2: {
+        group: "word",
+        type: "fb2",
+      },
+      fodt: {
+        group: "word",
+        type: "fodt",
+      },
+      htm: {
+        group: "word",
+        type: "htm",
+      },
+      html: {
+        group: "word",
+        type: "html",
+      },
+      mht: {
+        group: "word",
+        type: "mht",
+      },
+      mhtml: {
+        group: "word",
+        type: "mhtml",
+      },
+      odt: {
+        group: "word",
+        type: "odt",
+      },
+      oform: {
+        group: "word",
+        type: "oform",
+      },
+      ott: {
+        group: "word",
+        type: "ott",
+      },
+      oxps: {
+        group: "word",
+        type: "oxps",
+      },
+      pdf: {
+        group: "word",
+        type: "pdf",
+      },
+      rtf: {
+        group: "word",
+        type: "rtf",
+      },
+      stw: {
+        group: "word",
+        type: "stw",
+      },
+      sxw: {
+        group: "word",
+        type: "sxw",
+      },
+      txt: {
+        group: "word",
+        type: "txt",
+      },
+      wps: {
+        group: "word",
+        type: "wps",
+      },
+      wpt: {
+        group: "word",
+        type: "wpt",
+      },
+      xml: {
+        group: "word",
+        type: "xml",
+      },
+      xps: {
+        group: "word",
+        type: "xps",
+      },
+
+      csv: {
+        group: "cell",
+        type: "csv",
+      },
+      et: {
+        group: "cell",
+        type: "et",
+      },
+      ett: {
+        group: "cell",
+        type: "ett",
+      },
+      fods: {
+        group: "cell",
+        type: "fods",
+      },
+      ods: {
+        group: "cell",
+        type: "ods",
+      },
+      ots: {
+        group: "cell",
+        type: "ots",
+      },
+      sxc: {
+        group: "cell",
+        type: "sxc",
+      },
+      xls: {
+        group: "cell",
+        type: "xls",
+      },
+      xlsb: {
+        group: "cell",
+        type: "xlsb",
+      },
+      xlsm: {
+        group: "cell",
+        type: "xlsm",
+      },
+      xlsx: {
+        group: "cell",
+        type: "xlsx",
+      },
+      xlt: {
+        group: "cell",
+        type: "xlt",
+      },
+      xltm: {
+        group: "cell",
+        type: "xltm",
+      },
+      xltx: {
+        group: "cell",
+        type: "xltx",
+      },
+      // xml: {
+      //   group: "cell",
+      //   type: "xml",
+      // },
+
+      dps: {
+        group: "slide",
+        type: "dps",
+      },
+      dpt: {
+        group: "slide",
+        type: "dpt",
+      },
+      fodp: {
+        group: "slide",
+        type: "fodp",
+      },
+      odp: {
+        group: "slide",
+        type: "odp",
+      },
+      otp: {
+        group: "slide",
+        type: "otp",
+      },
+      pot: {
+        group: "slide",
+        type: "pot",
+      },
+      potm: {
+        group: "slide",
+        type: "potm",
+      },
+      potx: {
+        group: "slide",
+        type: "potx",
+      },
+      pps: {
+        group: "slide",
+        type: "pps",
+      },
+      ppsm: {
+        group: "slide",
+        type: "ppsm",
+      },
+      ppsx: {
+        group: "slide",
+        type: "ppsx",
+      },
+      ppt: {
+        group: "slide",
+        type: "ppt",
+      },
+      pptm: {
+        group: "slide",
+        type: "pptm",
+      },
+      pptx: {
+        group: "slide",
+        type: "pptx",
+      },
+      sxi: {
+        group: "slide",
+        type: "sxi",
+      },
+    },
+    fileConfig: {},
+    fileToken: "",
+    fileViewToken: "",
+    fileInfo: {},
+  };
+
+  mounted() {
+    //
+  }
+  /** 方法 */
+  /** 获取json数据 */
+  jsonCnt() {
+    _axios
+      .get(
+        `/file-management-service/api/filing/file/download/${this.state.fileToken}`
+      )
+      .then((res) => {
+        this.state.fileInfo = res.data;
+      });
+  }
+  /** 视频获取流数据 */
+  getVideoBolb() {
+    this.state.loading = true;
+    const config: any = {
+      headers: {
+        _tenant: baseConfig.getCookie("__tenant"),
+        Authorization: "Bearer " + baseConfig.getCookie("Abp.AuthToken"),
+      },
+      responseType: "blob",
+    };
+    _axios
+      .get(
+        `/file-management-service/api/filing/file/download/${this.state.fileToken}`,
+        config
+      )
+      .then((res2) => {
+        const blob = new Blob([res2.data as any]);
+        const downloadHref = window.URL.createObjectURL(blob);
+        /** 创建a标签并为其添加属性 */
+        const dom = document.getElementById("previewVideo");
+        if (dom) (dom as any).src = downloadHref;
+      })
+      .finally(() => {
+        this.state.loading = false;
+      });
+  }
+  /** 设置onlyoffice token */
+  setOnlyOfficeToken(id?: string) {
+    // 配置文档： https://api.onlyoffice.com/editors/config/
+    const host = window.location.origin.includes("localhost")
+      ? "http://uxinyun.com"
+      : window.location.origin;
+    this.state.fileConfig = {
+      document: {
+        permissions: {
+          // 启用评论
+          comment: false,
+          // 启用下载
+          download: this.download ?? false,
+          // 启用编辑
+          edit: false,
+          // 启用导出
+          print: this.download ?? false,
+          // 启用预览
+          review: true,
+        },
+        fileType: this.getSuffix.type, //"pptx", // docx ,
+        key: this.id + Math.random(), // 不要忘记每次编辑和保存文档时，都必须重新生成document.key
+        title: this.fileName, //"test.pptx",
+        // "url": "http://192.168.3.241:21030/api/filing/file/download/0485029d32b198fdc87c3a0bd55fc5b4?__tenant=cbe81ce3-fdf5-ae08-7421-3a0955bd3378",// "http://192.168.3.22:5007/api/files/download/test.pptx"
+        // "url": `http://192.168.3.241:44316/api/file-management/file/${urlParams.id}/preview`// "http://192.168.3.22:5007/api/files/download/test.pptx"
+        url: `${host}/file-management-service/api/filing/file/download/${id}?token=${id}&__tenant=${this.tenant}`, // "http://192.168.3.22:5007/api/files/download/test.pptx"
+      },
+      documentType: this.getSuffix.group, //"slide", //cell 如：excel, word 如：docx, slide 如：ppt
+      editorConfig: {
+        lang: "zh-CN",
+        mode: "view",
+        // "callbackUrl": "http://192.168.3.237:55002/url-to-callback.ashx"
+      },
+      token: "",
+    };
+
+    // this.state.fileViewToken = this.generateToken(
+    //   "dNq6Zd0wOdc2Ha",
+    //   this.state.fileConfig
+    // );
+    this.state.fileConfig.token = this.state.fileViewToken;
+    window.localStorage.setItem("fileViewToken", this.state.fileViewToken);
+    window.localStorage.setItem(
+      "onlyofficeConfig",
+      JSON.stringify(this.state.fileConfig)
+    );
+  }
+  /** base64 */
+  // base64UrlEncode(str: string) {
+  //   let encodedSource = (CryptoJS as any).enc.Base64.stringify(str);
+  //   const reg = new RegExp("/", "g");
+  //   encodedSource = encodedSource
+  //     .replace(/=+$/, "")
+  //     .replace(/\+/g, "-")
+  //     .replace(reg, "_");
+  //   return encodedSource;
+  // }
+
+  /**
+   * clains body 将config放进去
+   * secretSalt  秘钥
+   */
+  generateToken(secretSalt: string, clains: any) {
+    const header = JSON.stringify({
+      alg: "HS256",
+      typ: "JWT",
+    });
+
+    const iat = new Date().getTime();
+    const exp = iat + 2 * 60 * 60 * 1000;
+    const payload = JSON.stringify({
+      iat: iat,
+      exp: exp, // 过期时间
+      ...clains, // 内容
+    });
+
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    // const before_sign =
+    //   this.base64UrlEncode((CryptoJS as any).enc.Utf8.parse(header)) +
+    //   "." +
+    //   this.base64UrlEncode((CryptoJS as any).enc.Utf8.parse(payload));
+    // let signature = (CryptoJS as any).HmacSHA256(before_sign, secretSalt);
+    // signature = this.base64UrlEncode(signature);
+    // // eslint-disable-next-line @typescript-eslint/camelcase
+    // const final_sign = before_sign + "." + signature;
+
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    //return final_sign;
+  }
+
+  /** 监听 */
+  /** 计算属性 */
+  /** 匹配在线预览文件格式 */
+  get getSuffix(): InSuffix {
+    return this.state.fileSuffix[this.suffix as string] ?? {};
+  }
+  /** 获取租户id */
+  get tenant(): string {
+    return baseConfig.getCookie("__tenant");
+  }
+  @Watch("id", { immediate: true })
+  setFileToken(id?: string) {
+    this.state.fileConfig = {};
+    this.state.fileToken = id as string;
+    if (id) {
+      if (this.getSuffix.group) {
+        this.setOnlyOfficeToken(id);
+        this.state.loading = false;
+      } else {
+        if (this.suffix === "json") {
+          this.jsonCnt();
+        } else if (this.suffix === "mp4") {
+          this.getVideoBolb();
+        } else {
+          this.state.loading = false;
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/HtSelectUser/index.vue

@@ -4,42 +4,43 @@
  * @Author: hutao
  * @Date: 2021-12-30 14:29:14
  * @LastEditors: hutao
- * @LastEditTime: 2022-12-13 17:27:15
+ * @LastEditTime: 2024-05-13 14:00:36
 -->
 <template>
   <span v-if="readonly">
-    <HtShowBaseData v-if="value" :user-id="userId" :org="org"></HtShowBaseData>
+    <HtShowBaseData v-if="value"
+                    :user-id="userId"
+                    :org="org"></HtShowBaseData>
     <span v-else> </span>
   </span>
-  <HtBaseData
-    v-else
-    :size="size"
-    :org="org"
-    ref="htBaseData"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    com-style="background:#fff"
-    :appendToBody="appendToBody"
-    :config-json="configJson"
-    :com-class="
+  <HtBaseData v-else
+              :size="size"
+              :org="org"
+              ref="htBaseData"
+              :placeholder="placeholder"
+              :disabled="disabled"
+              com-style="background:#fff"
+              :showLocked="showLocked"
+              :appendToBody="appendToBody"
+              :config-json="configJson"
+              :com-class="
       heightAuto
         ? 'component-item-heightAuto ht-item-common'
         : 'component-item-height ht-item-common'
     "
-    @change="searchCommonData"
-  ></HtBaseData>
+              @change="searchCommonData"></HtBaseData>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import HtShowBaseData from '@/packages/HtShowBaseData';
-import HtBaseData from '@/packages/HtBaseData';
-import { getCommDataItem } from '../common';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import HtShowBaseData from "@/packages/HtShowBaseData";
+import HtBaseData from "@/packages/HtBaseData";
+import { getCommDataItem } from "../common";
 interface State {
   /** 数据状态 */
   loading: boolean;
 }
 @Component({
-  name: 'HtSelectUser',
+  name: "HtSelectUser",
   components: {
     HtShowBaseData,
     HtBaseData,
@@ -53,12 +54,15 @@ export default class HtSelectUser extends Vue {
   @Prop() disabled?: boolean;
   @Prop() heightAuto?: boolean;
   @Prop() placeholder?: string;
+
   /** 是否可以清除 */
   @Prop() clearable?: boolean;
   @Prop({ default: true }) show?: boolean;
   @Prop({ default: false }) multiple?: boolean;
   @Prop({ default: true }) showAllLevels?: boolean;
   @Prop({ default: true }) checkStrictly?: boolean;
+  /** 是否显示被锁定的用户 */
+  @Prop({ default: true }) showLocked?: boolean;
   /* 是否只读 */
   @Prop({ default: false }) readonly?: boolean;
   @Prop({ default: false }) panel?: boolean;
@@ -72,7 +76,7 @@ export default class HtSelectUser extends Vue {
   /** 方法 */
   /**部门选择回调 */
   searchCommonData(res: any) {
-    const dep = res['departmentUser'];
+    const dep = res["departmentUser"];
 
     let data = undefined;
     if (dep.length) {
@@ -86,19 +90,19 @@ export default class HtSelectUser extends Vue {
         data = dep[0].id;
       }
     }
-    this.$emit('input', data);
-    this.$emit('change', data, getCommDataItem('user', data));
+    this.$emit("input", data);
+    this.$emit("change", data, getCommDataItem("user", data));
   }
   /** 监听 */
   get configJson() {
     return JSON.stringify({
       departmentUser: {
-        name: '部门树结构',
+        name: "部门树结构",
         show: this.show,
         disabled: this.disabled,
         showAllLevels: this.showAllLevels,
         multiple: this.multiple,
-        code: 'departmentUser',
+        code: "departmentUser",
         data: {},
         checkStrictly: false,
         panel: this.panel,

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2023-11-28 15:08:11
+ * @LastEditTime: 2024-05-16 13:45:14
  */
 
 // 导入组件
@@ -42,6 +42,7 @@ import HtPopover from './HtPopover'
 import HtTimeLine from './HtTimeLine'
 import HtTimeLineItem from './HtTimeLineItem'
 import HtRealTime from './HtRealTime'
+// import HtOffice from './HtOffice'
 
 
 

package/src/shims-js.d.ts

@@ -0,0 +1,12 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-03-06 17:15:33
+ * @LastEditors: hutao
+ * @LastEditTime: 2022-03-06 17:16:00
+ */
+declare module "*.js" {
+  const body: any;
+  export default body;
+}