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

<template>
  <div class="container">
    <img :src="goodDetail.imgPath" alt="" class="img" />

    <el-form label-width="120px" class="form">
      <h1 style="margin: 0 0 20px 50px">请选择溯源农产品申请</h1>
      <el-form-item label="溯源商品">
        <el-select v-model="batch" placeholder="请选择商品" filterable :width="200">
          <el-option v-for="(item, index) in goodsList" :key="index" :label="item.goodName" :value="item.id">
            <el-tooltip :content="item.goodName" placement="top">
              <span>{{ item.goodNames }}</span>
            </el-tooltip>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="溯源码">
        <el-button type="primary" @click="uploadTraceCode">
          <template #icon>
            <el-icon><Upload /></el-icon>
          </template>
          点击上传
        </el-button>
      </el-form-item>

      <el-form-item label="产品名称">
        <el-input v-model="productName" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item label="检测时间">
        <el-input v-model="detectTime" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item label="检测站">
        <el-input v-model="station" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item label="产地信息">
        <el-input v-model="origin" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="border-radius: 8px" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { getAssetsFile } from '@/utils/index.js';
import { goodList, saveRecords } from '@/apis/brand.js';
import { authDetail } from '../../../apis/brand.js';

const router = useRouter();
const route = useRoute();

const productId = route.query.id;
const product = ref({ name: '加载中...', id: productId });
const goodDetail = ref({});

const goodsList = reactive([]);

onMounted(() => {
  // 模拟加载产品数据
  product.value = {
    id: productId,
    name: productId == 1 ? '有机苹果' : '绿色蔬菜',
  };
  goodList().then((res) => {
    if (res.code === 200) {
      goodsList.splice(0, goodsList.length, ...res.data);
      for (let i in goodsList) {
        goodsList[i].goodNames = goodsList[i].goodName.length > 15 ? goodsList[i].goodName.substring(0, 15) + '...' : goodsList[i].goodName;
      }
    }
  });
  authDetail(productId).then((res) => {
    if (res.code === 200) {
      goodDetail.value = res.data;
    }
  });
});

const batch = ref('');
const productName = ref('');
const detectTime = ref('');
const station = ref('');
const origin = ref('');

function backToList() {
  router.push(`/sub-operation-service/brand/apply`);
}

function uploadTraceCode() {
  console.log('上传溯源码');
}

function submit() {
  // console.log('提交申请：', {
  //   product: productId,
  //   batch: batch.value,
  //   detectTime: detectTime.value,
  //   station: station.value,
  //   origin: origin.value,
  // });
  let obj = {
    goodsId: batch.value,
    brandId: productId,
  };
  saveRecords(obj).then((res) => {
    if (res.code === 200) {
      // console.log(res);
      ElMessage.success('提交成功！');
    }
  });
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  background-color: #fff;
  position: relative;
  height: 100%;

  :deep(.el-breadcrumb__inner a) {
    color: #25bf82;
  }
}
.img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 20px;
  left: 20px;
}

.form {
  width: 60%;
  margin: 0 auto;
}
:deep(.form .el-form-item__content) {
  max-width: 300px;
}

:deep(.form .el-input, .form .el-select) {
  width: 100%;
  max-width: 300px;
}
</style>