图片预览组件

龚焕茏

2024-04-28 f3617593bf3a08eb88b29637332a863bc0eec0f2

图片预览组件

 src/views/system/contract/index.vue

@@ -4,9 +4,8 @@
    <el-row v-loading="loading">
      <el-col :span="8" v-for="(item, index) in contractList" :key="index" style="margin: 10px;width: 30%;">
        <el-card :body-style="{ padding: '0px' }">
          <el-image style="width: 420px;height: 187px;"
            :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']"
            fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357"
          <ImagePreview style="width: 420px;height: 187px;"
            fit="cover" :src="item.attachment"
            class="image" />
          <div style="padding: 14px;">
            <span>{{ item.name }}</span>
@@ -34,7 +33,7 @@
          <el-collapse-item  v-for="(item, index) in ruleData" :key="index" :title="item.ruleName" :name="index">
            <div class="inline-input-container" v-for="(item, index) in item.children" :key="index">
              <b>{{ item.ruleDesc }}</b> <br v-if="item.ruleDesc"/>
              <el-tooltip class="item" v-for="(item, index) in item.children" :key="index" effect="dark" :content="item.deductCategory + ' ' + item.calcFraction + (item.calcUnit ? '/' + item.calcUnit : '')" placement="top">
              <el-tooltip class="item" v-for="(item, index) in item.children" :key="index" effect="dark" :content="item.deductCategory == '分数乘以数量' ? '扣' + item.calcFraction  + '乘以数量 ' : item.deductCategory == '除以数量后乘以分数' ? '扣' + item.calcFraction + '分/' +  item.calcUnit + '小时' : item.deductCategory + ' ' + item.calcFraction" placement="top">
                <span>{{ item.ruleCondition }}<br/></span>
                <!-- {{ item.deductCategory }} {{ item.calcFraction }}{{ item.calcUnit ? "/" + item.calcUnit : ''  }} -->
            </el-tooltip>
@@ -146,9 +145,11 @@
import { unitSelect } from "../../../api/platform/unit";
import { deptSelect } from "../../../api/system/dept";
import { getToken } from "@/utils/auth";
import { ImagePreview } from "@/components/ImagePreview";

export default {
  name: "Contract",
  comments: { ImagePreview },
  data() {
    return {
      loading: false,