daimp-front/sub-operation-service/src/views/brand/components/Auth.vue

<template>
  <div class="auth-management">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" style="border-radius: 24px" :body-class="'card-body'">
          <div class="card-left">
            <img :src="getAssetsFile('images/brand/1532.png')" alt="" />
            <div class="card-content flex-1 flex-column">
              <div class="stat-number">{{ statisticsData.advent }} <span>件</span></div>
              <div class="stat-label">授权产品</div>
            </div>
          </div>
          <div v-if="statisticsData.adventNum >= 0" class="card-right">
            <img :src="getAssetsFile('images/brand/cardLeft.png')" alt="" />
            <p>
              较上月上涨 <span>{{ statisticsData.adventNum }}</span> 件
            </p>
          </div>
          <div v-else class="card-right">
            <img :src="getAssetsFile('images/brand/cardRight.png')" alt="" />
            <p>
              较上月下降 <span>{{ -statisticsData.adventNum }}</span> 件
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" style="border-radius: 24px" :body-class="'card-body'">
          <div class="card-left">
            <img :src="getAssetsFile('images/brand/1533.png')" alt="" />
            <div class="card-content flex-1 flex-column">
              <div class="stat-number">{{ statisticsData.total }} <span>件</span></div>
              <div class="stat-label">临期产品</div>
            </div>
          </div>
          <div v-if="statisticsData.totalNum >= 0" class="card-right">
            <img :src="getAssetsFile('images/brand/cardLeft.png')" alt="" />
            <p>
              较上月上涨 <span>{{ statisticsData.totalNum }}</span> 件
            </p>
          </div>
          <div v-else class="card-right">
            <img :src="getAssetsFile('images/brand/cardRight.png')" alt="" />
            <p>
              较上月下降 <span>{{ -statisticsData.totalNum }}</span> 件
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 产品列表 -->
    <el-card shadow="hover" style="border-radius: 16px" class="product-card">
      <!-- 状态筛选 -->
      <el-tabs v-model="activeStatus" class="tabs-wrapper" @tab-change="changeStatus">
        <el-tab-pane label="已授权" name="2" />
        <el-tab-pane label="审批中" name="1" />
        <el-tab-pane label="被驳回" name="3" />
        <el-tab-pane label="已失效" name="4" />
      </el-tabs>
      <div class="product-list">
        <div v-for="(product, index) in products" :key="product.id" class="product-item" :class="{ 'border-top': index > 0 }">
          <div class="product-info">
            <img class="product-img" :src="product.goodsUrl ? product.goodsUrl.split(',')[0] : ''" alt="product" />
            <div class="product-text">
              <span class="product-name">{{ product.productName }}</span>
              <div class="detail-item">
                <label>检测批次：</label>
                <span>2</span>
              </div>
              <div class="detail-item">
                <label>授权期限：</label>
                <span
                  >{{ product.timeNum
                  }}{{ product.timeNumUnit === 1 ? '天' : product.timeNumUnit === 2 ? '月' : product.timeNumUnit === 3 ? '年' : '' }}</span
                >
              </div>
              <div class="detail-item">
                <label>到期时间：</label>
                <span class="text-expire">{{ product.endTime }}</span>
              </div>
            </div>
          </div>
          <div class="product-action">
            <el-tag v-if="product.status == 2" size="large" class="text-success status-tag" type="success">已授权</el-tag>
            <el-tag v-if="product.status == 1" size="large" class="text-warning status-tag" type="warning">审批中</el-tag>
            <el-tag v-if="product.status == 3" size="large" class="text-danger status-tag" type="danger">被驳回</el-tag>
            <el-tag v-if="product.status == 4" size="large" class="text-info status-tag" type="info">已失效</el-tag>
            <div style="display: flex">
              <el-button
                v-if="product.status == 2"
                type="primary"
                plain
                :icon="Edit"
                size="large"
                style="border-radius: 8px"
                @click="handleCertificate(product)"
              >
                授权证书
              </el-button>
              <!--              <el-button size="large" class="button" @click="onInspect(product)">溯源报告</el-button>-->
              <!--              <el-button v-if="product.status == 2" size="large" class="button" type="danger" @click="onRevoke(product)">取消授权</el-button>-->
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 证书预览 -->
    <el-dialog v-model="certificateDialogVisible" title="授权证书" width="30%" destroy-on-close>
      <div style="display: flex; justify-content: center">
        <el-image
          :src="currentCertificateImg"
          fit="contain"
          style="max-width: 600px; width: 80%"
          :preview-src-list="[currentCertificateImg]"
          :z-index="9999"
        />
      </div>
    </el-dialog>
    <!-- 抽查弹窗 -->
    <el-dialog v-model="dialogVisible" width="720px" top="20px" modal="false" :before-close="() => (dialogVisible = false)" title="追溯记录">
      <div v-if="traceData" class="trace-record">
        <!-- 基本信息 -->
        <section class="section">
          <h3>基本信息</h3>
          <el-row :gutter="12">
            <el-col :span="6">产品名称：</el-col><el-col :span="18">{{ traceData.productName }}</el-col> <el-col :span="6">产品数量：</el-col
            ><el-col :span="18">{{ traceData.quantity }}</el-col> <el-col :span="6">生产经营主体：</el-col
            ><el-col :span="18">{{ traceData.producer }}</el-col> <el-col :span="6">原产地：</el-col
            ><el-col :span="18">{{ traceData.origin }}</el-col> <el-col :span="6">生产日期：</el-col
            ><el-col :span="18">{{ traceData.productionDate }}</el-col> <el-col :span="6">追溯码：</el-col
            ><el-col :span="18">{{ traceData.traceCode }}</el-col> <el-col :span="6">追溯次数：</el-col
            ><el-col :span="18">{{ traceData.traceCount }} 次</el-col>
          </el-row>
        </section>

        <!-- 基地信息 -->
        <section class="section">
          <h3>基地信息</h3>
          <el-row :gutter="12">
            <el-col :span="6">基地地址：</el-col><el-col :span="18">{{ traceData.base.address }}</el-col> <el-col :span="6">地理位置：</el-col
            ><el-col :span="18">{{ traceData.base.location }}</el-col> <el-col :span="6">面积：</el-col
            ><el-col :span="18">{{ traceData.base.area }} 亩</el-col> <el-col :span="6">气候条件：</el-col
            ><el-col :span="18">{{ traceData.base.climate }}</el-col> <el-col :span="6">土壤类型：</el-col
            ><el-col :span="18">{{ traceData.base.soil }}</el-col>
          </el-row>
        </section>

        <!-- 农事信息 -->
        <section class="section">
          <h3>农事信息</h3>
          <el-table :data="traceData.farmingRecords" stripe border style="width: 100%">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="operation" label="操作" />
            <el-table-column prop="operator" label="作业人" width="120" />
          </el-table>
        </section>

        <!-- 包装信息 -->
        <section class="section">
          <h3>分拣包装</h3>
          <el-row :gutter="12">
            <el-col :span="6">包装企业：</el-col><el-col :span="18">{{ traceData.packaging.company }}</el-col> <el-col :span="6">包装类型：</el-col
            ><el-col :span="18">{{ traceData.packaging.type }}</el-col> <el-col :span="6">包装人：</el-col
            ><el-col :span="18">{{ traceData.packaging.person }}</el-col> <el-col :span="6">包装时间：</el-col
            ><el-col :span="18">{{ traceData.packaging.time }}</el-col>
          </el-row>
        </section>

        <!-- 仓储物流 -->
        <section class="section">
          <h3>仓储物流信息</h3>
          <el-row :gutter="12">
            <el-col :span="6">存储类型：</el-col><el-col :span="18">{{ traceData.logistics.storageType }}</el-col>
            <el-col :span="6">存储温度：</el-col><el-col :span="18">{{ traceData.logistics.temperature }}</el-col>
            <el-col :span="6">发货地址：</el-col><el-col :span="18">{{ traceData.logistics.shipFrom }}</el-col> <el-col :span="6">收货地址：</el-col
            ><el-col :span="18">{{ traceData.logistics.shipTo }}</el-col>
          </el-row>
        </section>

        <!-- 交易信息 -->
        <section class="section">
          <h3>交易信息</h3>
          <el-row :gutter="12">
            <el-col :span="6">交易时间：</el-col><el-col :span="18">{{ traceData.trade.time }}</el-col> <el-col :span="6">买家：</el-col
            ><el-col :span="18">{{ traceData.trade.buyer }}</el-col>
          </el-row>
        </section>

        <!-- 右侧图片 -->
        <div class="trace-img">
          <img :src="traceData.img" alt="产品图" width="150" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { getAssetsFile } from '@/utils/index.js';
import { authList, getProducts } from '@/apis/brand';
import { Edit } from '@element-plus/icons-vue';
import { getStatisticsData } from '@/apis/brand.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { cancelAuth } from '@/apis/brand.js';

const dialogVisible = ref(false);
const traceData = ref(null);

const activeStatus = ref('2');

const products = ref([
  {
    id: 1,
    name: '耿马镇沙疆西红柿',
    batch: '10021',
    duration: '6个月',
    expireDate: '2025.01.01',
    status: 'authorized',
    statusLabel: '已授权',
    img: getAssetsFile('images/brand/product4.png'),
  },
  {
    id: 2,
    name: '孟弄乡沙地土豆',
    batch: '10022',
    duration: '6个月',
    expireDate: '2025.01.02',
    status: 'authorized',
    statusLabel: '已授权',
    img: getAssetsFile('images/brand/product6.png'),
  },
  {
    id: 3,
    name: '芒洪乡水果彩椒',
    batch: '10021',
    duration: '6个月',
    expireDate: '2025.01.01',
    status: 'authorized',
    statusLabel: '已授权',
    img: getAssetsFile('images/brand/product2.png'),
  },
  {
    id: 4,
    name: '耿马镇沙疆西红柿',
    batch: '10021',
    duration: '6个月',
    expireDate: '2025.01.01',
    status: 'approving',
    statusLabel: '审批中',
    img: getAssetsFile('images/brand/product4.png'),
  },
  {
    id: 5,
    name: '孟弄乡沙地土豆',
    batch: '10022',
    duration: '6个月',
    expireDate: '2025.01.02',
    status: 'approving',
    statusLabel: '审批中',
    img: getAssetsFile('images/brand/product6.png'),
  },
  {
    id: 6,
    name: '芒洪乡水果彩椒',
    batch: '10021',
    duration: '6个月',
    expireDate: '2025.01.01',
    status: 'expired',
    statusLabel: '已失效',
    img: getAssetsFile('images/brand/product2.png'),
  },
]);

const statisticsData = ref({
  advent: 817,
  adventNum: 13,
  total: 125,
  totalNum: -5,
});

const onRevoke = (p) => {
  ElMessageBox.confirm('是否确认取消该商品的授权？', '注意！', {
    confirmButtonText: '确认',
    cancelButtonText: '放弃',
    type: 'error',
  })
    .then(() => {
      cancelAuth({ id: p.id }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '已取消授权',
          });
          getAuthList(2);
        }
      });
    })
    .catch(() => {
      // ElMessage({
      //   type: 'info',
      //   message: 'Delete canceled',
      // });
    });
};

function onInspect(item) {
  // 这里用硬编码模拟请求，实际中可换成接口调用：getTraceById(id).then(res=> traceData.value = res)
  const mocks = [
    {
      productName: '耿马镇沙疆西红柿',
      quantity: '300KG',
      producer: '北大荒技术有限公司',
      origin: '耿马县孟定镇下坝村',
      productionDate: '2025-6-3',
      traceCode: '10.5487542154785XSE254.1040201',
      traceCount: 30,
      base: {
        address: '耿马县孟定镇下坝村',
        location: '东经102° · 北纬24°',
        area: 9000,
        climate: '亚热带高原季风型，温和多雨',
        soil: '红壤',
      },
      farmingRecords: [
        { date: '2025/3/14', operation: '播种西红柿种', operator: '李强' },
        { date: '2025/4/2', operation: '施肥 氮肥', operator: '李强' },
        { date: '2025/5/17', operation: '浇水', operator: '李强' },
        { date: '2025/6/14', operation: '采摘', operator: '李强' },
      ],
      packaging: {
        company: '瑞禾农产品包装公司',
        type: '纸箱',
        person: '李明瑞',
        time: '2025-1-20 16:27:41',
      },
      logistics: {
        storageType: '冷藏',
        temperature: '2°C',
        shipFrom: '北京市朝阳区解放路24号',
        shipTo: '上海市黄浦区南京路36号',
      },
      trade: {
        time: '2025-4-2 08:13:52',
        buyer: '李楠',
      },
      img: 'images/brand/product4.png',
    },
  ];
  traceData.value = mocks[0];
  traceData.value.img = item.goodsUrl;
  traceData.value.productName = item.productName;
  console.log(item);
  dialogVisible.value = true;
}

// const filteredProducts = computed(() => products.value.filter((p) => p.status === activeStatus.value));
const certificateDialogVisible = ref(false);
const currentCertificateImg = ref('');

const handleCertificate = (product) => {
  console.log('查看证书:', product);
  // 假设每个产品都有一个证书图片路径字段，临时写死
  currentCertificateImg.value = getAssetsFile('images/brand/sqzs.png'); // 你可以换成真实字段，如 product.certificate
  certificateDialogVisible.value = true;
};

const changeStatus = (tab) => {
  getAuthList(tab);
};

const getAuthList = (status) => {
  products.value = [];
  authList({ status: status }).then((res) => {
    if (res.code === 200) {
      products.value = res.data.records;
      for (let i in products.value) {
        if (products.value[i].endTime) {
          products.value[i].endTime = products.value[i].endTime.split(' ')[0];
        }
      }
    }
  });
};

const getStatusData = () => {
  getStatisticsData().then((res) => {
    console.log(res);
  });
};

onMounted(() => {
  getAuthList(2);
  getStatusData();
});
</script>

<style lang="scss" scoped>
.auth-management {
  padding: 0 20px 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card {
  flex: 1;
  margin-top: 20px;
}
:deep(.el-card__body) {
  height: 100%;
}
.product-list {
  height: calc(100% - 40px);
  overflow: auto;
}

.product-list::-webkit-scrollbar {
  display: none;
}
:deep(.card-body) {
  display: flex;
  align-items: center;
  padding: 0;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.card-left:deep(img) {
  width: 88px;
  display: block;
  aspect-ratio: 1/1;
  padding: 20px;
  margin: 0;
}
.card-right:deep(img) {
  width: 133px;
  height: 80px;
  display: block;
  // padding: 20px;
  margin: 0;
  padding: 8px;
}
.card-left {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .card-content {
    height: 88px;
    // background-color: #fafafa;

    span {
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      color: #000000;
    }
  }

  .stat-number {
    font-size: 32px;
    font-weight: 600;
    font-weight: 700;
    text-align: left;
    color: #000000;
  }
  .stat-label {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    color: #999999;
  }
}
.card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;

  p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #000000;
    span {
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      color: #25bf82;
    }
  }
}

.tabs-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;

  :deep(.el-tabs__item) {
    font-size: 24px;
    font-weight: 700;
    border: 0;
  }
}
.flex {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.flex-space-between {
  justify-content: space-between;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;

  .product-info {
    display: flex;
    flex: 1;

    .product-img {
      width: 110px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      padding: 8px;
    }

    .product-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .product-name {
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        color: #000000;
      }
      .detail-item {
        width: 100%;
        display: flex;
        gap: 10px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #999999;

        span {
          color: #000000;
        }
      }
    }
  }

  .product-action {
    width: 200px;
    height: 110px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;

    .status-tag {
      text-align: right;
      font-size: 20px;
      font-weight: 700;
      .text-success {
        color: #67c23a;
      }
      .text-warning {
        color: #e6a23c;
      }
      .text-danger {
        color: #f56c6c;
      }
    }
  }
}
</style>