cloud-web-corejs 1.0.54-dev.81 → 1.0.54-dev.810

package/src/components/fileLibrary/filterDialog.vue

@@ -0,0 +1,454 @@
+<template>
+  <el-dialog
+    title="高级筛选"
+    :append-to-body="true"
+    :modal-append-to-body="true"
+    :close-on-click-modal="falseValue"
+    :visible.sync="showDialog"
+    :modal="falseValue"
+    custom-class="dialog-style proList-dialog"
+    width="1200px"
+    @close="dialogClose"
+    v-el-drag-dialog
+    v-el-dialog-center
+  >
+    <div class="cont">
+      <div id="containt" style="height: 550px">
+        <div class="search-criteria fl" style="width: 220px; height: 100%">
+          <div class="tit">
+            <i class="iconfont icon-shaixuan"></i><b>{{ $t1("搜索条件") }}</b>
+          </div>
+
+          <el-form label-position="top">
+            <div style="height: 468px; padding-top: 10px; overflow: auto">
+              <el-form-item :label="$t1('搜索类型')">
+                <el-radio-group v-model="fileType">
+                  <el-radio :label="2">{{ $t1("文件夹") }}</el-radio>
+                  <el-radio :label="1">{{ $t1("文件") }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="文件名">
+                <el-input v-model="formData.fileName" size="small" clearable />
+              </el-form-item>
+              <!--              <el-form-item label="所属对象描述">
+                <base-input-batch v-model="formData.note"/>
+              </el-form-item>-->
+              <el-form-item :label="$t1('创建时间')">
+                <el-date-picker
+                  v-model="formData.startTime"
+                  type="date"
+                  placeholder=""
+                  size="small"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  :picker-options="$baseStartPickerOptions(formData.endTime)"
+                ></el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                  v-model="formData.endTime"
+                  type="date"
+                  placeholder=""
+                  size="small"
+                  clearable
+                  value-format="yyyy-MM-dd"
+                  :picker-options="$baseEndPickerOptions(formData.startTime)"
+                ></el-date-picker>
+              </el-form-item>
+              <!-- <el-form-item :label="$t1('文件类型')">
+                <el-select v-model="fileTypeSn" @change="getAttributeList">
+                  <el-option
+                    v-for="(item, index) in fileTypes"
+                    :key="index"
+                    :label="item.fileTypeName"
+                    :value="item.fileTypeSn"
+                  ></el-option>
+                </el-select>
+              </el-form-item> -->
+              <el-form-item
+                v-for="(item, index) in fileAttributes"
+                :key="index"
+                :label="item.attributeName"
+              >
+                <el-input v-model="item.formValue" clearable></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item class="btns">
+              <el-button
+                icon="el-icon-brush"
+                class="button-sty"
+                @click="resetEvent"
+                type="primary"
+                plain
+                >{{ $t1("刷新") }}
+              </el-button>
+              <el-button
+                type="warning"
+                icon="el-icon-search"
+                class="button-sty"
+                @click="searchEvent"
+                >{{ $t1("搜索") }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <label id="labBtn" class="labBtn1" style="cursor: unset; height: 100%">
+          <!--          <div class="icon">
+                      <i class="el-icon-more"></i>
+                      <i class="el-icon-more"></i>
+                    </div>-->
+        </label>
+        <div class="main-right fr" style="width: calc(100% - 220px); padding-left: 6px">
+          <div style="height: 100%">
+            <vxe-grid
+              ref="table-m1"
+              v-bind="vxeOption"
+              @resizable-change="$vxeTableUtil.onColumnWitchChange"
+              @custom="$vxeTableUtil.customHandle"
+            >
+              <template #form>
+                <div class="clearfix screen-btns">
+                  <div class="fl screen-breadcrumb">
+                    <el-breadcrumb separator-class="el-icon-arrow-right ">
+                      <el-breadcrumb-item
+                        ><i class="iconfont icon-dingwei-mianxing"></i
+                        ><span class="f-blue" @click="checkTreeNode()">{{
+                          $t1("搜索范围")
+                        }}</span>
+                      </el-breadcrumb-item>
+                      <el-breadcrumb-item
+                        v-for="(treeNode, index) in treeNodeArr"
+                        :key="index"
+                      >
+                        <span class="f-blue" @click="checkTreeNode(treeNode)">{{
+                          treeNode.label
+                        }}</span>
+                      </el-breadcrumb-item>
+                    </el-breadcrumb>
+                  </div>
+                  <div class="fr"></div>
+                </div>
+              </template>
+              <template #fileName="{ row }">
+                <div v-if="!row.dirs">
+                  <el-tooltip
+                    :enterable="false"
+                    effect="dark"
+                    :content="$t2('预览', 'components.fileLibrary.preview')"
+                    placement="top"
+                  >
+                    <a class="a-link img" @click="$baseFilePreview(row)">
+                      <el-image :src="getShowUrl(row, 'thumbnail')"></el-image>
+                    </a>
+                  </el-tooltip>
+                  <a class="a-link underLine" @click="$baseFilePreview(row)">{{
+                    row.fileName
+                  }}</a>
+                </div>
+                <div v-else>
+                  <a class="a-link img">
+                    <div class="img">
+                      <svg-icon icon-class="ico-wenjianjia" />{{ row.fileName }}
+                    </div>
+                  </a>
+                </div>
+              </template>
+            </vxe-grid>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { selectDialogMixins } from "@base/mixins/selectDialog/index.js";
+
+import { treeScollx, treeScolly } from "@base/utils/global.js";
+import { encode } from "js-base64";
+
+export default {
+  name: "fileLibraryFilterDialog",
+  props: ["visiable", "multi", "rows", "treeNodeArr", "currentFileCategory"],
+  mixins: [selectDialogMixins],
+  inject: ["current_prefix", "storeAreaCode", "getObjectForeignId", "getIsPrivate"],
+  created() {
+    this.initSetting({ treeScolly: false });
+    /*setTimeout(() => {
+      treeScollx({target: this, type: 'default', dragBtn: '.labBtn1'});
+      treeScolly({target: this, type: 'selectDialog', dragBtn: '.labBtn2'});
+    }, 200);*/
+  },
+  mounted() {
+    this.getFileTypeList();
+    this.initTableM1();
+  },
+
+  computed: {},
+  data() {
+    return {
+      showDialog: true,
+      falseValue: false,
+      selectMulti: true,
+      formData: {},
+      vxeOption: {},
+
+      fileTypes: [],
+      fileAttributes: [],
+      fileTypeSn: null,
+      fileAttachAttributeCDTos: [],
+      fileType: 1,
+    };
+  },
+  methods: {
+    initTableM1() {
+      let that = this;
+
+      let tableOption = {
+        vue: that,
+        tableRef: "table-m1",
+        tableName: "fileLigraryFilterDialog-m1",
+        path: () => {
+          let url = null;
+          if (this.fileType === 1) {
+            url = this.current_prefix + "/file_obj/listAuthAttachPage";
+          } else if (this.fileType === 2) {
+            url = this.current_prefix + "/file_obj/listAuthObjPage";
+          }
+          return url;
+        },
+        param: () => {
+          /* let parents = this.currentFileCategory &&
+           this.currentFileCategory.id &&
+           this.currentFileCategory.id > 0
+             ? [this.currentFileCategory.id]
+             : [];*/
+          let fileAttachAttributeCDTOs = [];
+          this.fileAttributes.map((item) => {
+            if (item.formValue !== "" && item.formValue !== null) {
+              fileAttachAttributeCDTOs.push({
+                attributeSn: item.attributeSn,
+                attributeValue: item.formValue,
+              });
+            }
+          });
+
+          let objectForeignId = this.getObjectForeignId();
+          let isPrivate = this.getIsPrivate();
+          return {
+            // parents,
+            objectForeignId: objectForeignId,
+            // privateDir: isPrivate ? 1 : 0,
+            fileAttachAttributeCDTOs,
+            storeAreaCode: this.storeAreaCode,
+            ...this.formData,
+          };
+        },
+        config: {
+          proxyConfig: {
+            autoLoad: false,
+          },
+        },
+        columns: [
+          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
+          {
+            title: this.$t2("文件名称", "components.fileLibrary.fileName"),
+            field: "fileName",
+            width: 250,
+            fixed: "left",
+            slots: {
+              default: "fileName",
+            },
+          },
+          {
+            title: this.$t2("文件大小", "components.fileLibrary.fileSize"),
+            field: "fileSize",
+            width: 150,
+            slots: {
+              default: ({ row, $rowIndex }) => {
+                if (!row.dirs) {
+                  return this.formatFileSize(row.fileSize);
+                }
+              },
+            },
+          },
+          {
+            title: this.$t1("文件路径"),
+            field: "treePathName",
+            width: 250,
+          },
+          {
+            title: this.$t2("版本号", "components.fileLibrary.fileRev"),
+            field: "rev",
+            width: 150,
+            slots: {
+              default: ({ row, $rowIndex }) => {
+                if (!row.dirs) {
+                  return row.rev;
+                }
+              },
+            },
+          },
+          {
+            title: this.$t2("分辨率", "components.fileLibrary.widthHeight"),
+            field: "widthHeight",
+            width: 150,
+          },
+          {
+            title: this.$t2("所属对象描述", "components.fileLibrary.note"),
+            field: "note",
+            width: 250,
+          },
+          {
+            title: this.$t1("状态"),
+            field: "status",
+            width: 150,
+            slots: {
+              default: ({ row, $rowIndex }) => {
+                if (!row.dirs) {
+                  return row.status == 1 ? this.$t1("已归档") : this.$t1("未归档");
+                }
+              },
+            },
+          },
+          {
+            title: this.$t2("文件编码", "components.fileLibrary.fileSn"),
+            field: "fileSn",
+            width: 150,
+          },
+          // ...customColumns,
+          {
+            title: this.$t2("创建人", "components.fileLibrary.createBy"),
+            field: "_createBy",
+            width: 150,
+          },
+          {
+            field: "createDate",
+            title: this.$t2("创建时间", "components.fileLibrary.createDate"),
+            width: 150,
+          },
+          {
+            width: 47,
+            fixed: "right",
+            title: "",
+            sortable: false,
+            slots: {
+              default: ({ row, rowIndex }) => {
+                return [
+                  <div>
+                    <a
+                      href="javascript:void(0);"
+                      class="a-link"
+                      onclick={() => {
+                        this.openFileDirs(row);
+                      }}
+                    >
+                      <el-tooltip
+                        enterable={false}
+                        effect="dark"
+                        content={this.$t1("在文件夹中显示")}
+                        placement="top"
+                        popper-class="tooltip-skin"
+                      >
+                        <i class="el-icon-folder-opened" />
+                      </el-tooltip>
+                    </a>
+                  </div>,
+                ];
+              },
+            },
+          },
+        ],
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
+        that.vxeOption = opts;
+      });
+    },
+    openFileDirs(row) {
+      this.dialogClose();
+      this.$emit("openFileDirs", row);
+    },
+    getShowUrl(attachment, field) {
+      if (!field) field = "medium";
+      return this.$commonFileUtil.getShowUrl(
+        attachment.domain + (attachment[field] ? attachment[field] : attachment.url)
+      );
+    },
+    formatFileSize(fileSize) {
+      fileSize = fileSize || 0;
+      if (fileSize < 1024) {
+        return fileSize + "B";
+      } else if (fileSize < 1024 * 1024) {
+        var temp = fileSize / 1024;
+        temp = temp.toFixed(2);
+        return temp + "KB";
+      } else if (fileSize < 1024 * 1024 * 1024) {
+        var temp = fileSize / (1024 * 1024);
+        temp = temp.toFixed(2);
+        return temp + "MB";
+      } else {
+        var temp = fileSize / (1024 * 1024 * 1024);
+        temp = temp.toFixed(2);
+        return temp + "GB";
+      }
+    },
+    searchEvent() {
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    resetEvent() {
+      this.formData = {};
+      this.clearFileAttributeFormValue();
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    clearFileAttributeFormValue() {
+      this.fileTypeSn = null;
+      this.fileAttributes = [];
+    },
+    getFileTypeList() {
+      this.$http({
+        url: this.current_prefix + `/file_type/listPage`,
+        method: `post`,
+        data: {
+          enabled: true,
+        },
+        // isLoading: true,
+        // modalStrictly: true,
+        success: (res) => {
+          this.fileTypes = res.objx?.records || [];
+        },
+      });
+    },
+    getAttributeList() {
+      this.$http({
+        url: this.current_prefix + `/file_type/listAttribute`,
+        method: `post`,
+        data: {
+          stringOne: this.fileTypeSn,
+        },
+        // isLoading: true,
+        // modalStrictly: true,
+        success: (res) => {
+          let rows = res.objx || [];
+          rows.forEach((row) => {
+            row.formValue = null;
+          });
+          this.fileAttributes = rows;
+        },
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.dialog-style.proList-dialog .el-dialog__body #containt {
+  height: 100%;
+
+  .main-right {
+    height: 100%;
+  }
+}
+
+#labBtn.transverse {
+  margin-bottom: 0;
+  margin-left: -8px;
+}
+</style>