搬迁检验任务11%

spring

2025-02-19 d68551caef23bd5d3c00035d7add3814f0fdece1

 src/components/Table/lims-table.vue

@@ -19,169 +19,180 @@
      @current-change="currentChange"
      @selection-change="handleSelectionChange"
    >
      <template v-if="isSelection">
        <el-table-column type="selection" width="55" />
      </template>
      <template>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="60"
          :index="indexMethod"
        />
      </template>
      <el-table-column
        align="center"
        type="selection"
        width="55"
        v-if="isSelection"
      />
      <el-table-column
        align="center"
        label="序号"
        type="index"
        width="60"
        :index="indexMethod"
      />

      <template v-for="(item, index) in column">
        <el-table-column
          :column-key="item.columnKey"
          :filter-method="item.filterHandler"
          :filter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :filters="item.filters"
          :fixed="item.fixed"
          :label="item.label"
          :min-width="item.minWidth"
          :prop="item.prop"
          show-overflow-tooltip
          :sortable="item.sortable ? true : false"
          :type="item.type"
          :width="item.width"
          align="center"
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :column-key="item.columnKey"
        :filter-method="item.filterHandler"
        :filter-multiple="item.filterMultiple"
        :filtered-value="item.filteredValue"
        :filters="item.filters"
        :fixed="item.fixed"
        :label="item.label"
        :min-width="item.minWidth"
        :prop="item.prop"
        show-overflow-tooltip
        :sortable="item.sortable ? true : false"
        :type="item.type"
        :width="item.width"
        align="center"
      >
        <!-- <div class="123" v-if="item.type == ''"> -->
        <template
          v-if="item.hasOwnProperty('colunmTemplate')"
          :slot="item.colunmTemplate"
          slot-scope="scope"
        >
          <!-- <div class="123" v-if="item.type == ''"> -->
          <template
            v-if="item.hasOwnProperty('colunmTemplate')"
            :slot="item.colunmTemplate"
            slot-scope="scope"
          >
          <slot
            v-if="item.theadSlot"
            :index="index"
            :name="item.theadSlot"
            :row="scope.row"
          />
        </template>

        <template slot-scope="scope">
          <!-- 插槽 -->
          <div v-if="item.dataType == 'slot'">
            <slot
              v-if="item.theadSlot"
              :index="index"
              :name="item.theadSlot"
              v-if="item.slot"
              :index="scope.$index"
              :name="item.slot"
              :row="scope.row"
            />
          </template>
          </div>
          <!-- 进度条 -->
          <div v-else-if="item.dataType == 'progress'">
            <el-progress :percentage="Number(scope.row[item.prop])" />
          </div>
          <!-- 图片 -->
          <div v-else-if="item.dataType == 'image'">
            <img
              :src="javaApi + '/img/' + item.prop"
              alt=""
              style="width: 40px; height: 40px; margin-top: 10px"
            />
          </div>

          <template slot-scope="scope">
            <!-- 插槽 -->
            <div v-if="item.dataType == 'slot'">
              <slot
                v-if="item.slot"
                :index="scope.$index"
                :name="item.slot"
                :row="scope.row"
              />
            </div>
            <!-- 进度条 -->
            <div v-else-if="item.dataType == 'progress'">
              <el-progress :percentage="Number(scope.row[item.prop])" />
            </div>
            <!-- 图片 -->
            <div v-else-if="item.dataType == 'image'">
              <img :src="javaApi+'/img/'+item.prop"
                   alt="" style="width: 40px;height: 40px;margin-top: 10px;">
            </div>

            <!-- tag -->
            <div v-else-if="item.dataType == 'tag'">
              <el-tag
                v-if="
                  typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
                  'string'
                "
                :title="scope.row[item.prop] | formatters(item.formatData)"
                :type="formatType(scope.row[item.prop], item.formatType)"
                >{{
                  scope.row[item.prop] | formatters(item.formatData)
                }}</el-tag
              >
              <el-tag
                v-for="(tag, index) in dataTypeFn(
                  scope.row[item.prop],
                  item.formatData
                )"
                v-else-if="
                  typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
                  'object'
                "
                :key="index"
                :title="scope.row[item.prop] | formatters(item.formatData)"
                :type="formatType(tag, item.formatType)"
                >{{
                  item.tagGroup
          <!-- tag -->
          <div v-else-if="item.dataType == 'tag'">
            <el-tag
              v-if="
                typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
                'string'
              "
              :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(scope.row[item.prop], item.formatType)"
              >{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag
            >
            <el-tag
              v-for="(tag, index) in dataTypeFn(
                scope.row[item.prop],
                item.formatData
              )"
              v-else-if="
                typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
                'object'
              "
              :key="index"
              :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(tag, item.formatType)"
              >{{
                item.tagGroup
                  ? tag[item.tagGroup.label]
                    ? tag[item.tagGroup.label]
                      ? tag[item.tagGroup.label]
                      : tag
                    : tag
                }}</el-tag
              >
              <el-tag
                v-else
                :title="scope.row[item.prop] | formatters(item.formatData)"
                :type="formatType(scope.row[item.prop], item.formatType)"
                >{{
                  scope.row[item.prop] | formatters(item.formatData)
                }}</el-tag
              >
            </div>
                  : tag
              }}</el-tag
            >
            <el-tag
              v-else
              :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(scope.row[item.prop], item.formatType)"
              >{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag
            >
          </div>

            <!-- 按钮 -->
            <div v-else-if="item.dataType == 'action'">
              <template v-for="(o, key) in item.operation">
          <!-- 按钮 -->
          <div v-else-if="item.dataType == 'action'">
            <template v-for="(o, key) in item.operation">
              <el-button
                v-if="o.type != 'upload'"
                size="mini"
                v-show="o.showHide ? o.showHide(scope.row) : true"
                :disabled="o.disabled ? o.disabled(scope.row) : false"
                :icon="iconFn(o)"
                :plain="o.plain"
                :style="{ color: o.name === '删除' ? '#f56c6c' : o.color }"
                :type="o.type | typeFn(scope.row)"
                @click="o.clickFun(scope.row)"
                :key="key"
              >
                {{ o.name }}
              </el-button>
              <el-upload
                action="#"
                size="mini"
                :on-change="
                  (file, fileList) => o.clickFun(scope.row, file, fileList)
                "
                :multiple="o.multiple ? o.multiple : false"
                :limit="o.limit ? o.limit : 1"
                :disabled="o.disabled ? o.disabled(scope.row) : false"
                :accept="
                  o.accept
                    ? o.accept
                    : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                "
                v-if="o.type == 'upload'"
                style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true"
                :auto-upload="false"
                :on-exceed="onExceed"
                :show-file-list="false"
                :key="key"
              >
                <el-button
                  v-if="o.type != 'upload'"
                  size="mini"
                  v-show="o.showHide ? o.showHide(scope.row) : true"
                  :size="o.size ? o.size : 'small'"
                  type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false"
                  :icon="iconFn(o)"
                  :plain="o.plain"
                  :style="{ color: o.name === '删除' ? '#f56c6c' : o.color }"
                  :type="o.type | typeFn(scope.row)"
                  @click="o.clickFun(scope.row)"
                  >{{ o.name }}</el-button
                >
                  {{ o.name }}
                </el-button>
                <el-upload
                  action="#"
                  size="mini"
                  :on-change="
                    (file, fileList) => o.clickFun(scope.row, file, fileList)
                  "
                  :multiple="o.multiple ? o.multiple : false"
                  :limit="o.limit ? o.limit : 1"
                  :disabled="o.disabled ? o.disabled(scope.row) : false"
                  :accept="
                    o.accept
                      ? o.accept
                      : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                  "
                  v-if="o.type == 'upload'"
                  style="display: inline-block; width: 50px"
                  v-show="o.showHide ? o.showHide(scope.row) : true"
                  :auto-upload="false"
                  :on-exceed="onExceed"
                  :show-file-list="false"
                >
                  <el-button
                    :size="o.size ? o.size : 'small'"
                    type="text"
                    :disabled="o.disabled ? o.disabled(scope.row) : false"
                    >{{ o.name }}</el-button
                  >
                </el-upload>
              </template>
            </div>
            <!-- 默认纯展示数据 -->
            <div v-else>
              <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
              <span v-else>{{
                scope.row[item.prop] | formatters(item.formatData)
              }}</span>
            </div>
          </template>
        </el-table-column>
      </template>
              </el-upload>
            </template>
          </div>
          <!-- 可点击的文字 -->
          <div
            v-else-if="item.dataType == 'link'"
            class="cell link"
            style="width: 100%"
            @click="goLink(scope.row, item.linkMethod)"
          >
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
          </div>
          <!-- 默认纯展示数据 -->
          <div v-else class="cell" style="width: 100%">
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
            <span v-else>{{
              scope.row[item.prop] | formatters(item.formatData)
            }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="page.total > 0"
@@ -297,7 +308,7 @@
    },
    border: {
      type: Boolean,
      default: false,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
@@ -331,19 +342,19 @@
    },
    rowKey: {
      type: String,
      default: undefined
      default: undefined,
    },
    page:{
      type:Object,
    page: {
      type: Object,
      default() {
        return {
          total:0,
          current:0,
          size:10,
          layout: 'total, sizes, prev, pager, next, jumper'
          total: 0,
          current: 0,
          size: 10,
          layout: "total, sizes, prev, pager, next, jumper",
        };
      }
    }
      },
    },
  },

  methods: {
@@ -384,6 +395,13 @@
      // return index * 2;
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    // 点击单元格link事件
    goLink(row, linkMethod) {
      if (!linkMethod) {
        return this.$message.warning("请配置lingk事件");
      }
      this.$parent[linkMethod](row);
    },
  },
};
</script>
@@ -392,4 +410,19 @@
.el-table >>> .el-table__empty-text {
  text-align: center;
}

>>> .cell {
  padding: 0 !important;
}
.cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
  padding-left: 10px;
}
.link {
  color: rgb(64, 158, 255);
  cursor: pointer;
}
</style>