44个表格在1366*768下的适配，保安员管理-》保安员查询中操作栏更改，在用户表左侧控制栏同步高

liuyg

2022-02-16 dc252ad2bd275f697c266e3c8b10cb7d540fdcaa

 src/views/resource/attach.vue

@@ -1,6 +1,13 @@
<template>
    <basic-container>
        <avue-crud :option="option"
  <basic-container
    :class="[
      $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : '',
    ]"
  >
    <avue-crud
      :option="option"
      class="tablesss"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
@@ -15,7 +22,8 @@
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
      @on-load="onLoad"
    >
            <template slot="menuLeft">
                <!--        <el-button type="primary"-->
                <!--                   size="small"-->
@@ -30,48 +38,50 @@
                <!--                   @click="handleDelete">删 除-->
                <!--        </el-button>-->
            </template>
            <template slot-scope="scope"
                      slot="menu">
                <el-button type="text"
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
                           icon="el-icon-download"
                           size="small"
                           @click="handleDownload(scope.row)">下载
          @click="handleDownload(scope.row)"
          >下载
                </el-button>
                <el-button type="text"
        <el-button
          type="text"
                           icon="el-icon-picture-outline-round"
                           size="small"
                           v-show="!fileFormat(scope.row)"
                           @click="seeImages(scope.row)">预览
          @click="seeImages(scope.row)"
          >预览
                </el-button>
            </template>
            <template slot-scope="{ row }"
                      slot="attachSize">
      <template slot-scope="{ row }" slot="attachSize">
                <el-tag>{{ `${row.attachSize} KB` }}</el-tag>
            </template>
        </avue-crud>
        <el-dialog title="附件管理"
    <el-dialog
      title="附件管理"
                   append-to-body
                   :visible.sync="attachBox"
                   width="555px">
            <avue-form ref="form"
      width="555px"
    >
      <avue-form
        ref="form"
                       :option="attachOption"
                       v-model="attachForm"
                       :upload-after="uploadAfter">
        :upload-after="uploadAfter"
      >
            </avue-form>
        </el-dialog>

        <el-dialog title="预览"
    <el-dialog
      title="预览"
                   append-to-body
                   :visible.sync="imgSee"
                   class="see-img-box">

            <div class="img"
                 :style="{background: imgUrl}">

            </div>

      class="see-img-box"
    >
      <div class="img" :style="{ background: imgUrl }"></div>
        </el-dialog>

    </basic-container>
</template>

@@ -91,6 +101,7 @@
                pageSize: 10,
                currentPage: 1,
                total: 0,
        ...this.$store.state.control.changePageSize,
            },
            attachBox: false,
            selectionList: [],
@@ -107,10 +118,12 @@
                viewBtn: true,
                selection: true,
                dialogClickModal: false,
        ...this.$store.state.control.clearOtherBut,
                column: [
                    {
                        label: "附件地址",
                        prop: "link",
            overHidden: true,
                        rules: [
                            {
                                required: true,
@@ -122,6 +135,7 @@
                    {
                        label: "附件域名",
                        prop: "domain",
            overHidden: true,
                        search: true,
                        rules: [
                            {
@@ -134,6 +148,7 @@
                    {
                        label: "附件名称",
                        prop: "name",
            overHidden: true,
                        search: true,
                        rules: [
                            {
@@ -146,6 +161,7 @@
                    {
                        label: "附件原名",
                        prop: "originalName",
            overHidden: true,
                        search: true,
                        rules: [
                            {
@@ -192,7 +208,7 @@
                        label: "类型",
                        prop: "type",
                        addDisplay: false,
                        width: 80,
            width: 95,
                        type: "select",
                        dicData: [
                            {
@@ -237,7 +253,7 @@
            },

            imgSee: false,
            imgUrl: ""
      imgUrl: "",
        };
    },
    created () {
@@ -277,6 +293,9 @@
            });
            return ids.join(",");
        },
  },
  mounted() {
    this.$store.commit("setWindowSizeHeightAdd");
    },
    methods: {
        handleUpload () {
@@ -376,11 +395,11 @@
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
        this.$store.commit("setWindowSizeHeightAdd");
                this.loading = false;
                this.selectionClear();
            });
        },


        seeImages (row) {
            this.imgUrl = "";
@@ -393,13 +412,22 @@
            var index = row.link.lastIndexOf(".");
            var ext = row.link.substr(index + 1);

            return [
                'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
                indexOf(ext.toLowerCase()) == -1;
        }
      return (
        [
          "png",
          "jpg",
          "jpeg",
          "bmp",
          "gif",
          "webp",
          "psd",
          "svg",
          "tiff",
        ].indexOf(ext.toLowerCase()) == -1
      );
    },
    },
};
</script>

<style>
</style>
<style></style>